/* eslint-disable */
import React, { useState, useEffect } from "react";
import Layout from "../../../common/layout";
import DropdownInput from "../../../common/dropdown-input";
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 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 handleChangeReason = (val) => {
setSelectedReason(val);
};
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 && selectedReason.descripcion === "Descuento 11x12" && (
<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={() => {
setSelectedReason();
}}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">Condiciones estándares</div>
<p>
A las pólizas financiadas en 12 meses se les modifica a 11 y a
la prima anual se le brinda un descuento del 8.3% para no
modificar el monto mensual.
</p>
<div className="benefitsPrima_actual">
<div className="benefitsPrima_actual__tilte">
Prima total actual:
</div>
<div className="benefitsPrima_actual__amount">$486</div>
</div>
<div className="benefitsPrima_total">
<div className="benefitsPrima_total__title">
Prima total con el beneficio aplicado:
</div>
<div className="benefitsPrima_total__amount">
$286 <span>(-8.3%)</span>
</div>
</div>
<div className="divider"></div>
<div className="benefitsList">
<ul>
<li>
Sólo aplica para clientes sin pagos pendientes o que
tengan solo 1 cuota pendiente.
</li>
<li>Refinanciamiento de pago al mes siguiente.</li>
<li>Vehículos con máximo 1 siniestro.</li>
<li>Es compatible con el Descuento 13x12.</li>
<li>No aplica con migraciones.</li>
<li>Válido para Lima y provincias.</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>
"Estimado(a) [nombre del cliente], entiendo las dificultades
que podría tener para realizar el pago debido a la coyuntura
que estamos viviendo, por...{" "}
</p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
)}
{selectedReason && selectedReason.descripcion === "SOAT gratis" && (
<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={() => {
setSelectedReason();
}}
className="buttonRemove"
></button>
</div>
</div>
<div className="benefits_body">
<div className="benefits_title">SOAT gratis</div>
<div className="benefitsList">
<ul>
<li>Será entregado en formato digital.</li>
<li>Sólo aplica para vehículos particulares de Lima.</li>
<li>
La entrega también aplica a familiares cercanos como
padres, hermanos, hijos y cónyuges.
</li>
<li>Revisar cartilla de vehículos restringidos</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>
“Estimado(a) [nombre del cliente], le comento que también por
seguir siendo parte de la familia Rimac,{" "}
<span>le puedo ofrecer el SOAT gratis...</span>
</p>
</div>
<div className="BenefitsReadMore">
<button onClick={() => console.log("carga modal...")}>
leer más
</button>
</div>
</div>
</div>
)}
<button
onClick={() => console.log("faltan mas vistas")}
className={`btn-brokers ${
selectedReason ? "" : "disabled"
} pull-right`}
>
CONTINUAR
</button>
</div>
);
};
return (
<Layout leftContent={<LeftContent />} rightContent={<RightContent />} />
);
};
export default StepThree;