0

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;

1 respuesta 1

0

Dejo la solución: se entiende que tengo un array de objetos del cual obtengo un dropdown que listo items y formo un menú, ese array tiene información que se debe mostrar, al seleccionar un item del dropdown, la relación para mostrar contenido del selector con la info es por la descripción, por ejemplo: Condiciones estándares === si es igual a cada descripción muestro o o listo cada item uno debajo del otro, el problema que se tenía eran 2 los ítems que salían con la información ,traen un botón eliminar que debe remover cada item por su ID, eso fue lo primero que resolví, el otro problema era que en el dropdown cuando se seleccionaba un item que ya existía lo volvía a limar, (llamaba o duplicaba el contenidos por 2 veces,) lo que hice fue pasar el id para que detecte que si ya existe no lo vuelva invocar, con la función que dejae arriba, igual dejo el link donde saque la documentación para esa función, pase un Uniqueid

Saludos,

https://reactgo.com/removeduplicateobjects/

const [selectedReason, setSelectedReason] = useState([]);

const getUnique = (arr, comp) => {
      const unique = arr
        .map((e) => e[comp])
        .map((e, i, final) => final.indexOf(e) === i && i)
        .filter((e) => arr[e])
        .map((e) => arr[e]);

      return unique;
    }

    const uniqueBeneficios = getUnique(selectedReason, 'id');
    
    {uniqueBeneficios.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>
        ))}

1
  • Sería bueno que describas al menos brevemente sobre qué trata la solución
    – Pollo
    Commented el 7 oct. 2020 a las 4:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.