necesito hacer un filtrado para que al seleccionar un item de del dropdown si el id y su contenido ya se encuentra mostrado, que no sea capaz de mostrarlo hasta que sea removido, y que sea seleccionado nuevamente, el remover del item ya esta el seleccionar también solo quiero evitar la duplicidad por id si ya existe que no sea capaz de volverlo a mostrar, espero se entienda. la función especifica que hace el listado y ejecuta la función en el dropdown es esta. pero dejo todo el código en la parte de abajo.
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());
}
}
};
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",
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...",
},
{
id: "0001",
descripcion: "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...",
},
{
id: "0002",
descripcion: "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...",
},
{
id: "0003",
descripcion: "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...",
},
{
id: "0004",
descripcion: "SOAT gratis",
terms: {
term_1: "Será entregado en formato digital.",
term_2: "Sólo aplica para vehículos particulares de Lima.",
term_3:
"La entrega también aplica a familiares cercanos como padres, hermanos, hijos y cónyuges.",
term_4: "Revisar cartilla de <a href='#'>vehículos restringidos</a>",
},
suggested:
"Estimado(a) [nombre del cliente], le comento que también por seguir siendo parte de la familia Rimac, <b>le puedo ofrecer el SOAT gratis...</b>",
},
];
const BENEFITS_DETAIL = {
beneficio: "No usa el seguro, lo retomará más adelante",
};
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 [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 = (id) => {
const newList = selectedReason.filter((s) => s.id !== id);
setSelectedReason(newList);
};
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>
<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(s.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{s.descripcion}</div>
<p
dangerouslySetInnerHTML={{
__html: s.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{s.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">
{s.total_payment} <span>({s.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{s.terms.term_1}</li>
<li>{s.terms.term_2}</li>
<li>{s.terms.term_3}</li>
<li>{s.terms.term_4}</li>
<li>{s.terms.term_5}</li>
<li>{s.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: s.suggested,
}}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
)}
{s.descripcion === "Descuento 11x12" && (
<React.Fragment>
<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(s.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{s.descripcion}</div>
<p
dangerouslySetInnerHTML={{
__html: s.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{s.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">
{s.total_payment} <span>({s.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{s.terms.term_1}</li>
<li>{s.terms.term_2}</li>
<li>{s.terms.term_3}</li>
<li>{s.terms.term_4}</li>
<li>{s.terms.term_5}</li>
<li>{s.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: s.suggested,
}}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
)}
{s.descripcion === "Descuento 13x12" && (
<React.Fragment>
<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(s.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{s.descripcion}</div>
<p
dangerouslySetInnerHTML={{
__html: s.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{s.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">
{s.total_payment} <span>({s.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{s.terms.term_1}</li>
<li>{s.terms.term_2}</li>
<li>{s.terms.term_3}</li>
<li>{s.terms.term_4}</li>
<li>{s.terms.term_5}</li>
<li>{s.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: s.suggested,
}}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
)}
{s.descripcion === "Migración Pago por Kilómetros" && (
<React.Fragment>
<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(s.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{s.descripcion}</div>
<p
dangerouslySetInnerHTML={{
__html: s.information,
}}
></p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">
{s.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">
{s.total_payment} <span>({s.discount})</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>{s.terms.term_1}</li>
<li>{s.terms.term_2}</li>
<li>{s.terms.term_3}</li>
<li>{s.terms.term_4}</li>
<li>{s.terms.term_5}</li>
<li>{s.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: s.suggested,
}}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</React.Fragment>
)}
{s.descripcion === "SOAT gratis" && (
<React.Fragment>
<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(s.id)}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">{s.descripcion}</div>
<div className="benefitsList">
<ul>
<li>{s.terms.term_1}</li>
<li>{s.terms.term_2}</li>
<li>{s.terms.term_3}</li>
<li
dangerouslySetInnerHTML={{
__html: s.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: s.suggested,
}}
></p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
</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;