0

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;

1 respuesta 1

0

parece que lo que necesitas es un estado en el componente que sea una lista que se vaya llenando según se van seleccionando los items del dropdown

Te pongo un ejemplo básico:

import React from 'react';
import './App.css';

const isSameItem = id => item => item.id === id;

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" },
];

function App() {
  const [selected, setSelected] = React.useState([]);

  const handleChange = e => {
    if (selected.some(isSameItem(e.target.value))) {
      const items = selected.filter(s => s.id !== e.target.value)
      setSelected(items)
    } else {
      const item = ITEMS_BENEFITS_DROP_DOWN.find(isSameItem(e.target.value))
      const n = selected.concat(item)
      setSelected(n)
    }
  }
  return (
    <div className="App">
      <header className="App-header">
        <form>
          <select onChange={handleChange}>
            {ITEMS_BENEFITS_DROP_DOWN.map(item => (
              <option id={item.id} value={item.id}>{item.descripcion}</option>
            ))}
          </select>
          {selected.map(s => (
            <p key={s.id}>{s.descripcion}</p>
          ))}
        </form>
      </header>
    </div>
  );
}

export default App;

Es algo simple pero espero que te ayude a solucionar el problema.

Saludos!

EDITADO:

const items = selectedReason.filter(s => s.descripcion !== val)

pasa a:

const items = selectedReason.filter(s => s.descripcion !== val.descripcion)

y isSameItem(val) pasa a isSameItem(val.descripcion)

27
  • ok lo probare y te aviso, si estoy seguro que si pero me complique demasiado voy a probar y aviso gracias el 23 sep. 2020 a las 18:31
  • Hola Funciona, ok , pero necesito adaptarlo a mi componente dropdown , no uso el select, ni option, y el dropdoown que utilizo no usa ni target, ni value, en realidad ese es lo complejo, tengo que resolverlo con lo que tengo no puedo usar un select normal.. el 23 sep. 2020 a las 19:51
  • actualice mi código Intentando adaptar a lo que me pasaste pero me sale descrpcion Undefined, algo no estoy haciendo bien en la adaptacion. el 23 sep. 2020 a las 20:12
  • en el parametro, val , el dropdpwn me trae id, descripción, por eso lo utilizo en vez de value. el 23 sep. 2020 a las 20:16
  • y val será el id no? un string? ya lo deberias tener con eso. el 23 sep. 2020 a las 20:19

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.