he realizado unas modificaciones al código pero no logro el objetivo por favor alguna ayuda, en este caso estoy haciendo un .map al contenido de acuerdo a la cantidad de items del array y que se listan en el dropdown, ese .map me esta mostrando la cantidad de elementos que tiene el menú en este caso tiene 5 items me repite 5 veces el contenido, lo que se nesecita es que al inicio muestre vació el contenido. he realizado unos cambios en el contenido, para mejora. se unificado todo en un solo archivo. Gracias.
/* eslint-disable */
import React, { useState, useContext } from "react";
import Layout from "../../../common/layout";
import DropdownInput from "../../../common/dropdown-input";
import { store } from "../store";
const isSameItem = (descripcion) => (item) => item.descripcion === descripcion;
const ITEMS_BENEFITS_DROP_DOWN = [
{ id: "0000", descripcion: "Condiciones estándares" },
{ id: "0001", descripcion: "Descuento 11x12" },
{ id: "0002", descripcion: "Descuento 13x12" },
{ id: "0003", descripcion: "Migración Pago por Kilómetros" },
{ id: "0004", descripcion: "SOAT gratis" },
];
const BENEFITS_DETAIL = {
beneficio: "No usa el seguro, lo retomará más adelante",
};
const BENEFICIOS = {
CONDICIONES_ESTANDARES: {
data: [
{
id: '0',
title: "Condiciones estándares",
information:
"A las pólizas financiadas en 12 meses se les modifica a 11 y a la prima anual se le brinda un <b>descuento del 8.3%</b> para no modificar el monto mensual.",
down_payment: "$486",
total_payment: "$286",
discount: "-8.3%",
terms: {
term_1:
"Sólo aplica para clientes sin pagos pendientes o que tengan solo 1 cuota pendiente.",
term_2: "Refinanciamiento de pago al mes siguiente.",
term_3: "Vehículos con máximo 1 siniestro.",
term_4: "Es compatible con el Descuento 13x12.",
term_5: "No aplica con migraciones.",
term_6: "Válido para Lima y provincias.",
},
suggested:
"Estimado(a) [nombre del cliente], entiendo las dificultades que podría tener para realizar el pago debido a la coyuntura que estamos viviendo, por...",
},
],
},
DESCUENTO_ONCE_POR_DOCE: {
data: [
{
id: '1',
title: "Descuento 11x12",
information:
"A las pólizas financiadas en 12 meses se les modifica a 11 y a la prima anual se le brinda un <b>descuento del 8.3%</b> para no modificar el monto mensual.",
down_payment: "$486",
total_payment: "$286",
discount: "-8.3%",
terms: {
term_1:
"Sólo aplica para clientes sin pagos pendientes o que tengan solo 1 cuota pendiente.",
term_2: "Refinanciamiento de pago al mes siguiente.",
term_3: "Vehículos con máximo 1 siniestro.",
term_4: "Es compatible con el Descuento 13x12.",
term_5: "No aplica con migraciones.",
term_6: "Válido para Lima y provincias.",
},
suggested:
"Estimado(a) [nombre del cliente], entiendo las dificultades que podría tener para realizar el pago debido a la coyuntura que estamos viviendo, por...",
},
],
},
DESCUENTO_TRECE_POR_DOCE: {
data: [
{
id: '2',
title: "Descuento 13x12",
information:
"A las pólizas financiadas en 12 meses se les modifica a 11 y a la prima anual se le brinda un <b>descuento del 8.3%</b> para no modificar el monto mensual.",
down_payment: "$486",
total_payment: "$286",
discount: "-8.3%",
terms: {
term_1:
"Sólo aplica para clientes sin pagos pendientes o que tengan solo 1 cuota pendiente.",
term_2: "Refinanciamiento de pago al mes siguiente.",
term_3: "Vehículos con máximo 1 siniestro.",
term_4: "Es compatible con el Descuento 13x12.",
term_5: "No aplica con migraciones.",
term_6: "Válido para Lima y provincias.",
},
suggested:
"Estimado(a) [nombre del cliente], entiendo las dificultades que podría tener para realizar el pago debido a la coyuntura que estamos viviendo, por...",
},
],
},
MIGRACION_POR_KILOMETROS: {
data: [
{
id: '3',
title: "Migración Pago por Kilómetros",
information:
"A las pólizas financiadas en 12 meses se les modifica a 11 y a la prima anual se le brinda un <b>descuento del 8.3%</b> para no modificar el monto mensual.",
down_payment: "$486",
total_payment: "$286",
discount: "-8.3%",
terms: {
term_1:
"Sólo aplica para clientes sin pagos pendientes o que tengan solo 1 cuota pendiente.",
term_2: "Refinanciamiento de pago al mes siguiente.",
term_3: "Vehículos con máximo 1 siniestro.",
term_4: "Es compatible con el Descuento 13x12.",
term_5: "No aplica con migraciones.",
term_6: "Válido para Lima y provincias.",
},
suggested:
"Estimado(a) [nombre del cliente], entiendo las dificultades que podría tener para realizar el pago debido a la coyuntura que estamos viviendo, por...",
},
],
},
};
const StepThree = ({ setStep }) => {
const LeftContent = () => (
<div className="stepTwo leftContent">
<div className="btn-back" onClick={() => setStep(2)}></div>
<h2>
<b>Beneficios</b> a brindar
</h2>
<p>Elige el beneficio que deseas brindarle a tu cliente.</p>
<div className="separator"></div>
<div className="policieDetail">
<div className="policieDetail__title">MOTIVO ELEGIDO</div>
<div className="policieDetail__code">{BENEFITS_DETAIL.beneficio}</div>
</div>
</div>
);
const RightContent = () => {
const [beneficios, setBeneficios] = useState(BENEFICIOS);
const [selectedReason, setSelectedReason] = useState([]);
const { dispatch } = useContext(store);
const handleChangeReason = (val) => {
if (selectedReason.some(isSameItem(val))) {
const items = selectedReason.filter(
(s) => s.descripcion !== val.descripcion
);
setSelectedReason(items);
} else {
if (!val) return;
const item = ITEMS_BENEFITS_DROP_DOWN.find(isSameItem(val.descripcion));
if (item) {
const n = selectedReason.concat(item);
setSelectedReason(n.reverse());
}
}
};
const handleBtnContinue = () => {
dispatch({ type: "SET_INFO", payload: selectedReason });
setStep(4);
};
const handleRemove = (itemId) => {
// se filtran los items que tienen un id diferente al que se le esta pasando
const NuevoEstadoCondiciones = beneficios.CONDICIONES_ESTANDARES.data.filter((item) => item.id !== itemId);
const NuevoEstadoOncePorDoce = beneficios.DESCUENTO_ONCE_POR_DOCE.data.filter((item) => item.id !== itemId);
const NuevoEstadoTrecePorDoce = beneficios.DESCUENTO_TRECE_POR_DOCE.data.filter((item) => item.id !== itemId);
const NuevoEstadoMigracionPorKilometros = beneficios.MIGRACION_POR_KILOMETROS.data.filter((item) => item.id !== itemId);
const NuevoEstadoSoatGratis = beneficios.SOAT_GRATIS.data.filter((item) => item.id !== itemId);
// se actualiza el estado
setBeneficios((prevState) => ({
...prevState,
CONDICIONES_ESTANDARES : {
...prevState.CONDICIONES_ESTANDARES,
data: NuevoEstadoCondiciones
},
DESCUENTO_ONCE_POR_DOCE : {
...prevState.DESCUENTO_ONCE_POR_DOCE,
data: NuevoEstadoOncePorDoce
},
DESCUENTO_TRECE_POR_DOCE : {
...prevState.DESCUENTO_TRECE_POR_DOCE,
data: NuevoEstadoTrecePorDoce
},
MIGRACION_POR_KILOMETROS : {
...prevState.MIGRACION_POR_KILOMETROS,
data: NuevoEstadoMigracionPorKilometros
},
SOAT_GRATIS : {
...prevState.SOAT_GRATIS,
data: NuevoEstadoSoatGratis
}
}));
};
return (
<div className="stepTwo rightContent">
<div>
<h2>Elige el beneficio</h2>
<div className="benefit-reason">
<p>
Los beneficios van de acuerdo al <span>motivo elegido.</span>
</p>
</div>
</div>
<DropdownInput
items={ITEMS_BENEFITS_DROP_DOWN}
onDropdownSelectItem={handleChangeReason}
// loading = {false}
label="Beneficios a brindar"
name="beneficios"
/>
{selectedReason.map((s, id) => (
<React.Fragment key={id}>
{s.descripcion === "Condiciones estándares" && (
<React.Fragment>
{beneficios.CONDICIONES_ESTANDARES.data.map((item) => (
<React.Fragment key={item.id}>
<div className="benefits-detail">
<div className="box-benefits-detail">
<div className="benefits_header">
<div className="benefitsLabel">
<div className="benefitsLabel blue">beneficio</div>
</div>
<div className="benefitsRemove">
<span className="textRemove">eliminar</span>
<button onClick={() => handleRemove(item.id)} className="buttonRemove"></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{item.title}</div>
<p
dangerouslySetInnerHTML={{
__html: item.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{item.down_payment}
</div>
</div>
<div className="benefitsPrima_total">
<div className="benefitsPrima_total__title">
Prima total con el beneficio aplicado:
</div>
<div className="benefitsPrima_total__amount">
{item.total_payment}{" "}
<span>({item.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{item.terms.term_1}</li>
<li>{item.terms.term_2}</li>
<li>{item.terms.term_3}</li>
<li>{item.terms.term_4}</li>
<li>{item.terms.term_5}</li>
<li>{item.terms.term_6}</li>
</ul>
</div>
</div>
</div>
<div className="benefitsGuion">
<div className="benefitsGuion_img"></div>
<div className="benefitsGuion_content">
<div className="benefitsGuion_content__title">
GUIÓN SUGERIDO
</div>
<p
dangerouslySetInnerHTML={{ __html: item.suggested }}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</React.Fragment>
)}
{s.descripcion === "Descuento 11x12" && (
<React.Fragment>
{beneficios.DESCUENTO_ONCE_POR_DOCE.data.map((item) => (
<React.Fragment key={item.id}>
<div className="benefits-detail">
<div className="box-benefits-detail">
<div className="benefits_header">
<div className="benefitsLabel">
<div className="benefitsLabel blue">beneficio</div>
</div>
<div className="benefitsRemove">
<span className="textRemove">eliminar</span>
<button
onClick={() => handleRemove(item.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{item.title}</div>
<p
dangerouslySetInnerHTML={{
__html: item.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{item.down_payment}
</div>
</div>
<div className="benefitsPrima_total">
<div className="benefitsPrima_total__title">
Prima total con el beneficio aplicado:
</div>
<div className="benefitsPrima_total__amount">
{item.total_payment}{" "}
<span>({item.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{item.terms.term_1}</li>
<li>{item.terms.term_2}</li>
<li>{item.terms.term_3}</li>
<li>{item.terms.term_4}</li>
<li>{item.terms.term_5}</li>
<li>{item.terms.term_6}</li>
</ul>
</div>
</div>
</div>
<div className="benefitsGuion">
<div className="benefitsGuion_img"></div>
<div className="benefitsGuion_content">
<div className="benefitsGuion_content__title">
GUIÓN SUGERIDO
</div>
<p>{item.suggested}</p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</React.Fragment>
)}
{s.descripcion === "Descuento 13x12" && (
<React.Fragment>
{beneficios.DESCUENTO_TRECE_POR_DOCE.data.map((item) => (
<React.Fragment key={item.id}>
<div className="benefits-detail">
<div className="box-benefits-detail">
<div className="benefits_header">
<div className="benefitsLabel">
<div className="benefitsLabel blue">beneficio</div>
</div>
<div className="benefitsRemove">
<span className="textRemove">eliminar</span>
<button
onClick={() => handleRemove(item.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{item.title}</div>
<p
dangerouslySetInnerHTML={{
__html: item.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{item.down_payment}
</div>
</div>
<div className="benefitsPrima_total">
<div className="benefitsPrima_total__title">
Prima total con el beneficio aplicado:
</div>
<div className="benefitsPrima_total__amount">
{item.total_payment}{" "}
<span>({item.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{item.terms.term_1}</li>
<li>{item.terms.term_2}</li>
<li>{item.terms.term_3}</li>
<li>{item.terms.term_4}</li>
<li>{item.terms.term_5}</li>
<li>{item.terms.term_6}</li>
</ul>
</div>
</div>
</div>
<div className="benefitsGuion">
<div className="benefitsGuion_img"></div>
<div className="benefitsGuion_content">
<div className="benefitsGuion_content__title">
GUIÓN SUGERIDO
</div>
<p>{item.suggested}</p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</React.Fragment>
)}
{s.descripcion === "Migración Pago por Kilómetros" && (
<React.Fragment>
{beneficios.MIGRACION_POR_KILOMETROS.data.map((item) => (
<React.Fragment key={item.id}>
<div className="benefits-detail">
<div className="box-benefits-detail">
<div className="benefits_header">
<div className="benefitsLabel">
<div className="benefitsLabel blue">beneficio</div>
</div>
<div className="benefitsRemove">
<span className="textRemove">eliminar</span>
<button
onClick={() => handleRemove(item.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{item.title}</div>
<p
dangerouslySetInnerHTML={{
__html: item.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{item.down_payment}
</div>
</div>
<div className="benefitsPrima_total">
<div className="benefitsPrima_total__title">
Prima total con el beneficio aplicado:
</div>
<div className="benefitsPrima_total__amount">
{item.total_payment}{" "}
<span>({item.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{item.terms.term_1}</li>
<li>{item.terms.term_2}</li>
<li>{item.terms.term_3}</li>
<li>{item.terms.term_4}</li>
<li>{item.terms.term_5}</li>
<li>{item.terms.term_6}</li>
</ul>
</div>
</div>
</div>
<div className="benefitsGuion">
<div className="benefitsGuion_img"></div>
<div className="benefitsGuion_content">
<div className="benefitsGuion_content__title">
GUIÓN SUGERIDO
</div>
<p>{item.suggested}</p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</React.Fragment>
)}
{s.descripcion === "SOAT gratis" && (
<React.Fragment>
{beneficios.SOAT_GRATIS.data.map((item) => (
<React.Fragment key={item.id}>
<div className="benefits-detail">
<div className="box-benefits-detail">
<div className="benefits_header">
<div className="benefitsLabel">
<div className="benefitsLabel purple">regalo</div>
</div>
<div className="benefitsRemove">
<span className="textRemove">eliminar</span>
<button
onClick={() => handleRemove(item.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{item.title}</div>
<div className="benefitsList">
<ul>
<li>{item.terms.term_1}</li>
<li>{item.terms.term_2}</li>
<li>{item.terms.term_3}</li>
<li
dangerouslySetInnerHTML={{
__html: item.terms.term_4,
}}
></li>
</ul>
</div>
</div>
</div>
<div className="benefitsGuion">
<div className="benefitsGuion_img"></div>
<div className="benefitsGuion_content">
<div className="benefitsGuion_content__title">
GUIÓN SUGERIDO
</div>
<p
dangerouslySetInnerHTML={{ __html: item.suggested }}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</React.Fragment>
)}
</React.Fragment>
))}
<button
onClick={handleBtnContinue}
className={`btn-brokers ${(!selectedReason.length) ? "disabled" : ""} pull-right`}>
CONTINUAR
</button>
</div>
);
};
return (
<Layout leftContent={<LeftContent />} rightContent={<RightContent />} />
);
};
export default StepThree;