kupos-ui-components-lib 10.4.11 → 10.4.13

package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx

@@ -177,571 +177,598 @@ const renderSummaryDetailsCard = ({
   );
 };
 
-const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
-  serviceNameOnward,
-  serviceNameReturn,
-  metaData,
-  currencySign,
-  dateOnward,
-  dateReturn,
-  sourceOnward,
-  sourceReturn,
-  destinationOnward,
-  destinationReturn,
-  boardingStageOnward,
-  boardingStageReturn,
-  droppingStageOnward,
-  droppingStageReturn,
-  boardingTimeOnward,
-  boardingTimeReturn,
-  droppingTimeOnward,
-  droppingTimeReturn,
-  durationOnward,
-  durationReturn,
-  selectSeatOnward,
-  selectSeatReturn,
-  journeyTypeActive,
-  setJourneyTypeActive,
-  translation,
-  trainTypeOnward,
-  trainTypeReturn,
-  colors,
-  trainType,
-  icons,
-  selectedOnward,
-  selectedReturn,
-  conexionChecked,
-  conexionPassengers,
-  returnConexionFare,
-  conexionFare,
-  loginData,
-  checkWhatsappEligibility,
-  removeDiscountAtomValue,
-  netFare,
-  promoCode,
-  onPromoRemove,
-  isAgency,
-  agencyFee,
-  walletMoney,
-  virtualMoney,
-  virtualLimit,
-  showUsd,
-  netFareInUsd,
-  renderDiscount,
-  discountAmount,
-  currency,
-  showWhatsappChargesInfo,
-  setShowWhatsappChargesInfo,
-  t,
-  countdown,
-  walletLabel,
-  creditosLabel,
-  isTacna,
-  isLinatal,
-  insuranceData,
-  isPeru,
-  setShowServicefeeModal,
-  serviceFeeDataStateValue,
-  isOpsite,
-}) => {
-  return (
-    <div className="pb-[15px]">
-      <div
-        className="border border-[#ccc] rounded-[20px] relative"
-        style={{ margin: "0px 20px 20px" }}
-      >
-        <div
-          style={{
-            position: "absolute",
-            zIndex: 200,
-            right: "20px",
-            top: "20px",
-          }}
-        >
-          {/* <CountDownTimer icons={icons} colors={colors} countdown={countdown} /> */}
-        </div>
-        <div className="p-[15px] z-100 relative bg-white rounded-[20px] bg-[#fff]">
-          <div>
-            {dateReturn ? (
-              <div className="mt-[2px] flex justify-center mt-[15px] mb-[15px]">
-                <div
-                  className={`flex rounded-[20px] overflow-hidden text-xs ${
-                    dateReturn ? "w-[60%]" : "w-auto"
-                  }`}
-                  style={{
-                    backgroundColor: colors?.idVueltaBgColor,
-                  }}
-                >
-                  <span
-                    onClick={() =>
-                      setJourneyTypeActive && setJourneyTypeActive(1)
-                    }
-                    className="px-[10px] py-[6px] cursor-pointer text-sm font-medium transition-colors text-[14px] flex items-center justify-center w-[100%]"
-                    style={{
-                      backgroundColor:
-                        journeyTypeActive === 1
-                          ? colors?.idaBgColor
-                          : "transparent",
-                      color:
-                        journeyTypeActive === 1
-                          ? colors?.idaSelectedTextColor
-                          : colors?.idaUnSelectedTextColor,
-                      borderRadius: journeyTypeActive === 2 ? "0px" : "20px",
-                    }}
-                  >
-                    {translation?.going || "Ida"}
-                  </span>
+import { PaymentCardMobile } from "../../ui/PaymentCardMobile";
 
-                  {dateReturn && (
-                    <span
-                      onClick={() =>
-                        setJourneyTypeActive && setJourneyTypeActive(2)
-                      }
-                      className="px-[10px] py-[6px] cursor-pointer text-sm font-medium transition-colors text-[14px] flex items-center justify-center w-[100%]"
+const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = (props) => {
+  const {
+    serviceNameOnward,
+    serviceNameReturn,
+    metaData,
+    currencySign,
+    dateOnward,
+    dateReturn,
+    sourceOnward,
+    sourceReturn,
+    destinationOnward,
+    destinationReturn,
+    boardingStageOnward,
+    boardingStageReturn,
+    droppingStageOnward,
+    droppingStageReturn,
+    boardingTimeOnward,
+    boardingTimeReturn,
+    droppingTimeOnward,
+    droppingTimeReturn,
+    durationOnward,
+    durationReturn,
+    selectSeatOnward,
+    selectSeatReturn,
+    journeyTypeActive,
+    setJourneyTypeActive,
+    translation,
+    trainTypeOnward,
+    trainTypeReturn,
+    colors,
+    trainType,
+    icons,
+    selectedOnward,
+    selectedReturn,
+    conexionChecked,
+    conexionPassengers,
+    returnConexionFare,
+    conexionFare,
+    loginData,
+    checkWhatsappEligibility,
+    removeDiscountAtomValue,
+    netFare,
+    promoCode,
+    onPromoRemove,
+    isAgency,
+    agencyFee,
+    walletMoney,
+    virtualMoney,
+    virtualLimit,
+    showUsd,
+    netFareInUsd,
+    renderDiscount,
+    discountAmount,
+    currency,
+    showWhatsappChargesInfo,
+    setShowWhatsappChargesInfo,
+    t,
+    countdown,
+    walletLabel,
+    creditosLabel,
+    isTacna,
+    isLinatal,
+    insuranceData,
+    isPeru,
+    setShowServicefeeModal,
+    serviceFeeDataStateValue,
+    isOpsite,
+    isNewUi = false,
+    showDetails = false,
+    setShowDetails,
+  } = props;
+  return (
+    <>
+      {isNewUi ? (
+        <PaymentCardMobile {...props} />
+      ) : (
+        <div className="pb-[15px]">
+          <div
+            className="border border-[#ccc] rounded-[20px] relative"
+            style={{ margin: "0px 20px 20px" }}
+          >
+            <div
+              style={{
+                position: "absolute",
+                zIndex: 200,
+                right: "20px",
+                top: "20px",
+              }}
+            >
+              {/* <CountDownTimer icons={icons} colors={colors} countdown={countdown} /> */}
+            </div>
+            <div className="p-[15px] z-100 relative bg-white rounded-[20px] bg-[#fff]">
+              <div>
+                {dateReturn ? (
+                  <div className="mt-[2px] flex justify-center mt-[15px] mb-[15px]">
+                    <div
+                      className={`flex rounded-[20px] overflow-hidden text-xs ${
+                        dateReturn ? "w-[60%]" : "w-auto"
+                      }`}
                       style={{
-                        backgroundColor:
-                          journeyTypeActive === 2
-                            ? colors?.vueltaBgColor
-                            : "transparent",
-                        color:
-                          journeyTypeActive === 2
-                            ? colors?.vueltaSelectedTextColor
-                            : colors?.vueltaUnSelectedTextColor,
-                        borderRadius: journeyTypeActive === 2 ? "20px" : "0",
+                        backgroundColor: colors?.idVueltaBgColor,
                       }}
                     >
-                      {translation?.return || "Vuelta"}
-                    </span>
-                  )}
-                </div>
-              </div>
-            ) : null}
-
-            {journeyTypeActive == 1
-              ? renderSummaryDetailsCard({
-                  serviceName: serviceNameOnward,
-                  date: dateOnward,
-                  source: sourceOnward,
-                  dest: destinationOnward,
-                  boardingStage: boardingStageOnward,
-                  boardingTime: boardingTimeOnward,
-                  droppingStage: droppingStageOnward,
-                  droppingTime: droppingTimeOnward,
-                  duration: durationOnward,
-                  trainType: trainTypeOnward,
-                  isTrain: trainType,
-                  icons: icons,
-                  isTacna: isTacna,
-                  isLinatal: isLinatal,
-                })
-              : renderSummaryDetailsCard({
-                  serviceName: serviceNameReturn,
-                  date: dateReturn,
-                  source: sourceReturn,
-                  dest: destinationReturn,
-                  boardingStage: boardingStageReturn,
-                  boardingTime: boardingTimeReturn,
-                  droppingStage: droppingStageReturn,
-                  droppingTime: droppingTimeReturn,
-                  duration: durationReturn,
-                  trainType: trainTypeReturn,
-                  isTrain: trainType,
-                  icons: icons,
-                  isTacna: isTacna,
-                  isLinatal: isLinatal,
-                })}
-          </div>
-
-          <div className="mt-[15px] ">
-            <div
-              className=" text-[14px]"
-              style={{ margin: checkWhatsappEligibility ? "0" : "6px 0" }}
-            >
-              <div className="text-[14px] bold-text">Detalles del pago</div>
+                      <span
+                        onClick={() =>
+                          setJourneyTypeActive && setJourneyTypeActive(1)
+                        }
+                        className="px-[10px] py-[6px] cursor-pointer text-sm font-medium transition-colors text-[14px] flex items-center justify-center w-[100%]"
+                        style={{
+                          backgroundColor:
+                            journeyTypeActive === 1
+                              ? colors?.idaBgColor
+                              : "transparent",
+                          color:
+                            journeyTypeActive === 1
+                              ? colors?.idaSelectedTextColor
+                              : colors?.idaUnSelectedTextColor,
+                          borderRadius:
+                            journeyTypeActive === 2 ? "0px" : "20px",
+                        }}
+                      >
+                        {translation?.going || "Ida"}
+                      </span>
 
-              <div className="mt-[10px] mb-[10px]">
-                <div className="">N° Asientos:</div>
-                {selectSeatOnward && selectedOnward && selectedOnward[0]
-                  ? selectedOnward[0].map((val, key) => {
-                      return (
-                        <div
-                          key={key}
-                          className="flex justify-between items-center w-[100%]"
-                        >
-                          <div>
-                            <span>{selectedOnward[1][key]} </span>
-                            {" x "}
-                            {
-                              val.is_pet_seat ? "Asiento Mascota" : val.type
-                              //   CommonService.capitalize(
-                              //     CommonService.getSeatName(val.type),
-                              // )
-                            }
-                            :
-                          </div>
-                          <div className="bold-text">
-                            {CommonService.currency(
-                              isPeru
-                                ? Math.round(
-                                    val.fare * selectedOnward[1][key] * 100,
-                                  ) / 100
-                                : val.fare * selectedOnward[1][key],
-                              currencySign,
-                            )}
-                          </div>
-                        </div>
-                      );
-                    })
-                  : null}
-                {selectSeatReturn && selectedReturn && selectedReturn[0]
-                  ? selectedReturn[0].map((val, key) => {
-                      return (
-                        <div
-                          key={key}
-                          className="flex justify-between items-center w-[100%] mt-[5px]"
+                      {dateReturn && (
+                        <span
+                          onClick={() =>
+                            setJourneyTypeActive && setJourneyTypeActive(2)
+                          }
+                          className="px-[10px] py-[6px] cursor-pointer text-sm font-medium transition-colors text-[14px] flex items-center justify-center w-[100%]"
+                          style={{
+                            backgroundColor:
+                              journeyTypeActive === 2
+                                ? colors?.vueltaBgColor
+                                : "transparent",
+                            color:
+                              journeyTypeActive === 2
+                                ? colors?.vueltaSelectedTextColor
+                                : colors?.vueltaUnSelectedTextColor,
+                            borderRadius:
+                              journeyTypeActive === 2 ? "20px" : "0",
+                          }}
                         >
-                          <div>
-                            <span>{selectedReturn[1][key]} </span>
-                            {" x "}
-                            {
-                              val.is_pet_seat ? "Asiento Mascota" : val.type
-                              //  CommonService.capitalize(
-                              // CommonService.getSeatName(val.type)
-                              // )
-                            }
-                            :
-                          </div>
-                          <div className="bold-text">
-                            {CommonService.currency(
-                              isPeru
-                                ? Math.round(
-                                    val.fare * selectedReturn[1][key] * 100,
-                                  ) / 100
-                                : val.fare * selectedReturn[1][key],
-                              currencySign,
-                            )}
-                          </div>
-                        </div>
-                      );
+                          {translation?.return || "Vuelta"}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ) : null}
+
+                {journeyTypeActive == 1
+                  ? renderSummaryDetailsCard({
+                      serviceName: serviceNameOnward,
+                      date: dateOnward,
+                      source: sourceOnward,
+                      dest: destinationOnward,
+                      boardingStage: boardingStageOnward,
+                      boardingTime: boardingTimeOnward,
+                      droppingStage: droppingStageOnward,
+                      droppingTime: droppingTimeOnward,
+                      duration: durationOnward,
+                      trainType: trainTypeOnward,
+                      isTrain: trainType,
+                      icons: icons,
+                      isTacna: isTacna,
+                      isLinatal: isLinatal,
                     })
-                  : null}
+                  : renderSummaryDetailsCard({
+                      serviceName: serviceNameReturn,
+                      date: dateReturn,
+                      source: sourceReturn,
+                      dest: destinationReturn,
+                      boardingStage: boardingStageReturn,
+                      boardingTime: boardingTimeReturn,
+                      droppingStage: droppingStageReturn,
+                      droppingTime: droppingTimeReturn,
+                      duration: durationReturn,
+                      trainType: trainTypeReturn,
+                      isTrain: trainType,
+                      icons: icons,
+                      isTacna: isTacna,
+                      isLinatal: isLinatal,
+                    })}
               </div>
 
-              {/* insurance data */}
-              {insuranceData?.insurance_enabled ? (
+              <div className="mt-[15px] ">
                 <div
-                  className="flex justify-between items-center w-[100%] text-[13.33px]"
+                  className=" text-[14px]"
                   style={{ margin: checkWhatsappEligibility ? "0" : "6px 0" }}
                 >
-                  <div>
-                    <span>
-                      {(selectedOnward?.[1]?.reduce(
-                        (acc, qty) => acc + qty,
-                        0,
-                      ) ?? 0) +
-                        (selectedReturn?.[1]?.reduce(
-                          (acc, qty) => acc + qty,
-                          0,
-                        ) ?? 0)}
-                    </span>
-                    {" x "}
-                    Viajero Seguro:
-                  </div>
-                  <div
-                    className="bold-text"
-                    style={{ color: colors?.seatPriceColor }}
-                  >
-                    {CommonService.currency(
-                      insuranceData?.insurance_total ?? 0,
-                      currencySign,
-                    )}
+                  <div className="text-[14px] bold-text">Detalles del pago</div>
+
+                  <div className="mt-[10px] mb-[10px]">
+                    <div className="">N° Asientos:</div>
+                    {selectSeatOnward && selectedOnward && selectedOnward[0]
+                      ? selectedOnward[0].map((val, key) => {
+                          return (
+                            <div
+                              key={key}
+                              className="flex justify-between items-center w-[100%]"
+                            >
+                              <div>
+                                <span>{selectedOnward[1][key]} </span>
+                                {" x "}
+                                {
+                                  val.is_pet_seat ? "Asiento Mascota" : val.type
+                                  //   CommonService.capitalize(
+                                  //     CommonService.getSeatName(val.type),
+                                  // )
+                                }
+                                :
+                              </div>
+                              <div className="bold-text">
+                                {CommonService.currency(
+                                  isPeru
+                                    ? Math.round(
+                                        val.fare * selectedOnward[1][key] * 100,
+                                      ) / 100
+                                    : val.fare * selectedOnward[1][key],
+                                  currencySign,
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })
+                      : null}
+                    {selectSeatReturn && selectedReturn && selectedReturn[0]
+                      ? selectedReturn[0].map((val, key) => {
+                          return (
+                            <div
+                              key={key}
+                              className="flex justify-between items-center w-[100%] mt-[5px]"
+                            >
+                              <div>
+                                <span>{selectedReturn[1][key]} </span>
+                                {" x "}
+                                {
+                                  val.is_pet_seat ? "Asiento Mascota" : val.type
+                                  //  CommonService.capitalize(
+                                  // CommonService.getSeatName(val.type)
+                                  // )
+                                }
+                                :
+                              </div>
+                              <div className="bold-text">
+                                {CommonService.currency(
+                                  isPeru
+                                    ? Math.round(
+                                        val.fare * selectedReturn[1][key] * 100,
+                                      ) / 100
+                                    : val.fare * selectedReturn[1][key],
+                                  currencySign,
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })
+                      : null}
                   </div>
+
+                  {/* insurance data */}
+                  {insuranceData?.insurance_enabled ? (
+                    <div
+                      className="flex justify-between items-center w-[100%] text-[13.33px]"
+                      style={{
+                        margin: checkWhatsappEligibility ? "0" : "6px 0",
+                      }}
+                    >
+                      <div>
+                        <span>
+                          {(selectedOnward?.[1]?.reduce(
+                            (acc, qty) => acc + qty,
+                            0,
+                          ) ?? 0) +
+                            (selectedReturn?.[1]?.reduce(
+                              (acc, qty) => acc + qty,
+                              0,
+                            ) ?? 0)}
+                        </span>
+                        {" x "}
+                        Viajero Seguro:
+                      </div>
+                      <div
+                        className="bold-text"
+                        style={{ color: colors?.seatPriceColor }}
+                      >
+                        {CommonService.currency(
+                          insuranceData?.insurance_total ?? 0,
+                          currencySign,
+                        )}
+                      </div>
+                    </div>
+                  ) : null}
                 </div>
-              ) : null}
-            </div>
 
-            <div style={{ margin: "6px 0" }}>
-              {renderDiscount(discountAmount)}
-            </div>
+                <div style={{ margin: "6px 0" }}>
+                  {renderDiscount(discountAmount)}
+                </div>
 
-            {metaData &&
-            !isOpsite &&
-            metaData.whatsapp_delivery_charges &&
-            !loginData &&
-            !checkWhatsappEligibility ? (
-              <PaymentItem
-                label={
-                  <div style={{ display: "flex" }}>
-                    <div className="font-[14px]">
-                      {translation?.whatsappDeliveryCharges}
-                    </div>
-                    <div className="img-hover">
-                      <img
-                        src={icons?.whatsappInfoIcon}
-                        alt=""
-                        style={{
-                          marginLeft: "5px",
-                          width: "15px",
-                        }}
-                        onClick={() =>
-                          setShowWhatsappChargesInfo(!showWhatsappChargesInfo)
-                        }
-                      />
-                      {showWhatsappChargesInfo && (
-                        <div
-                          className=" absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]"
-                          style={{
-                            lineHeight: "1.3",
-                            backgroundColor:
-                              colors?.whatsappDeliveryChargesBgColor,
-                            color: colors?.whatsappDeliveryChargesTextColor,
-                          }}
-                        >
-                          {translation?.whatsappInfoIcon}
+                {metaData &&
+                !isOpsite &&
+                metaData.whatsapp_delivery_charges &&
+                !loginData &&
+                !checkWhatsappEligibility ? (
+                  <PaymentItem
+                    label={
+                      <div style={{ display: "flex" }}>
+                        <div className="font-[14px]">
+                          {translation?.whatsappDeliveryCharges}
                         </div>
-                      )}
-                    </div>
-                  </div>
-                }
-                amount={metaData.whatsapp_delivery_charges}
-                className="text-[14px]"
-                customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
-                currency={currency}
-              />
-            ) : null}
-
-            {metaData &&
-            isOpsite &&
-            metaData.opsite_whatsapp_delivery_charges &&
-            !loginData &&
-            !checkWhatsappEligibility ? (
-              <PaymentItem
-                label={
-                  <div style={{ display: "flex" }}>
-                    <div className="font-[14px]">
-                      {translation?.whatsappDeliveryCharges}
-                    </div>
-                    <div className="img-hover">
-                      <img
-                        src={icons?.whatsappInfoIcon}
-                        alt=""
-                        style={{
-                          marginLeft: "5px",
-                          width: "15px",
-                        }}
-                        onClick={() =>
-                          setShowWhatsappChargesInfo(!showWhatsappChargesInfo)
-                        }
-                      />
-                      {showWhatsappChargesInfo && (
-                        <div
-                          className=" absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]"
-                          style={{
-                            lineHeight: "1.3",
-                            backgroundColor:
-                              colors?.whatsappDeliveryChargesBgColor,
-                            color: colors?.whatsappDeliveryChargesTextColor,
-                          }}
-                        >
-                          {translation?.whatsappInfoIcon}
+                        <div className="img-hover">
+                          <img
+                            src={icons?.whatsappInfoIcon}
+                            alt=""
+                            style={{
+                              marginLeft: "5px",
+                              width: "15px",
+                            }}
+                            onClick={() =>
+                              setShowWhatsappChargesInfo(
+                                !showWhatsappChargesInfo,
+                              )
+                            }
+                          />
+                          {showWhatsappChargesInfo && (
+                            <div
+                              className=" absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]"
+                              style={{
+                                lineHeight: "1.3",
+                                backgroundColor:
+                                  colors?.whatsappDeliveryChargesBgColor,
+                                color: colors?.whatsappDeliveryChargesTextColor,
+                              }}
+                            >
+                              {translation?.whatsappInfoIcon}
+                            </div>
+                          )}
                         </div>
-                      )}
-                    </div>
-                  </div>
-                }
-                amount={metaData.opsite_whatsapp_delivery_charges}
-                className="text-[14px]"
-                customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
-                isBoldText={true}
-                currency={currency}
-              />
-            ) : null}
+                      </div>
+                    }
+                    amount={metaData.whatsapp_delivery_charges}
+                    className="text-[14px]"
+                    customStyle={{
+                      color: colors?.whatsappDeliveryChargesColor,
+                    }}
+                    currency={currency}
+                  />
+                ) : null}
 
-            {promoCode?.promoCodeApplied && (
-              <>
-                <PaymentItem
-                  label={`${translation?.promotionalCode}:`}
-                  amount={CommonService.currency(
-                    promoCode?.promoCouponAmount
-                      ? promoCode?.promoCouponAmount
-                      : 0,
-                    currencySign,
-                  )}
-                  className="text-[14px]"
-                  showCurrency={false}
-                  customStyle={{ color: colors?.promoCodePriceColor }}
-                  currency=""
-                  isBoldText={true}
-                />
-                {promoCode?.promoCouponAmount ? (
-                  <div className="promocode font14 flex items-center gap-[5px]">
-                    <div>{promoCode?.promoCode}</div>
-                    <span className="promo-remove" onClick={onPromoRemove}>
-                      <img
-                        src={icons?.closeIcon}
-                        alt="close"
-                        className="w-[16px] h-[16px]"
-                      />
-                    </span>
-                  </div>
+                {metaData &&
+                isOpsite &&
+                metaData.opsite_whatsapp_delivery_charges &&
+                !loginData &&
+                !checkWhatsappEligibility ? (
+                  <PaymentItem
+                    label={
+                      <div style={{ display: "flex" }}>
+                        <div className="font-[14px]">
+                          {translation?.whatsappDeliveryCharges}
+                        </div>
+                        <div className="img-hover">
+                          <img
+                            src={icons?.whatsappInfoIcon}
+                            alt=""
+                            style={{
+                              marginLeft: "5px",
+                              width: "15px",
+                            }}
+                            onClick={() =>
+                              setShowWhatsappChargesInfo(
+                                !showWhatsappChargesInfo,
+                              )
+                            }
+                          />
+                          {showWhatsappChargesInfo && (
+                            <div
+                              className=" absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]"
+                              style={{
+                                lineHeight: "1.3",
+                                backgroundColor:
+                                  colors?.whatsappDeliveryChargesBgColor,
+                                color: colors?.whatsappDeliveryChargesTextColor,
+                              }}
+                            >
+                              {translation?.whatsappInfoIcon}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    }
+                    amount={metaData.opsite_whatsapp_delivery_charges}
+                    className="text-[14px]"
+                    customStyle={{
+                      color: colors?.whatsappDeliveryChargesColor,
+                    }}
+                    isBoldText={true}
+                    currency={currency}
+                  />
                 ) : null}
-              </>
-            )}
 
-            {!!serviceFeeDataStateValue?.total_convenience_fee_amount && (
-              <PaymentItem
-                label={
-                  <div style={{ display: "flex", alignItems: "center" }}>
-                    <div className=" font14 flex items-center gap-[5px]">
-                      {translation?.serviceFeeLabel}
-                    </div>
-                    <div
-                      className="img-hover"
-                      onClick={() => setShowServicefeeModal(true)}
-                    >
-                      <img
-                        src={icons?.whatsappInfoIcon}
-                        alt=""
-                        style={{
-                          marginLeft: "5px",
-                          width: "15px",
-                        }}
-                      />
-                      {/* <div
+                {promoCode?.promoCodeApplied && (
+                  <>
+                    <PaymentItem
+                      label={`${translation?.promotionalCode}:`}
+                      amount={CommonService.currency(
+                        promoCode?.promoCouponAmount
+                          ? promoCode?.promoCouponAmount
+                          : 0,
+                        currencySign,
+                      )}
+                      className="text-[14px]"
+                      showCurrency={false}
+                      customStyle={{ color: colors?.promoCodePriceColor }}
+                      currency=""
+                      isBoldText={true}
+                    />
+                    {promoCode?.promoCouponAmount ? (
+                      <div className="promocode font14 flex items-center gap-[5px]">
+                        <div>{promoCode?.promoCode}</div>
+                        <span className="promo-remove" onClick={onPromoRemove}>
+                          <img
+                            src={icons?.closeIcon}
+                            alt="close"
+                            className="w-[16px] h-[16px]"
+                          />
+                        </span>
+                      </div>
+                    ) : null}
+                  </>
+                )}
+
+                {!!serviceFeeDataStateValue?.total_convenience_fee_amount && (
+                  <PaymentItem
+                    label={
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        <div className=" font14 flex items-center gap-[5px]">
+                          {translation?.serviceFeeLabel}
+                        </div>
+                        <div
+                          className="img-hover"
+                          onClick={() => setShowServicefeeModal(true)}
+                        >
+                          <img
+                            src={icons?.whatsappInfoIcon}
+                            alt=""
+                            style={{
+                              marginLeft: "5px",
+                              width: "15px",
+                            }}
+                          />
+                          {/* <div
                       className="duration-mouseover font9"
                       style={{ lineHeight: "1.3" }}
                     >
                       <span>{translation?.serviceFeeHoverLabel}</span>
                     </div> */}
-                    </div>
-                  </div>
-                }
-                amount={CommonService.currency(
-                  serviceFeeDataStateValue?.total_convenience_fee_amount,
-                  currencySign,
+                        </div>
+                      </div>
+                    }
+                    amount={CommonService.currency(
+                      serviceFeeDataStateValue?.total_convenience_fee_amount,
+                      currencySign,
+                    )}
+                    className="font14"
+                    currency={currency}
+                    customStyle={{ color: colors?.serviceFeePriceColor }}
+                  />
                 )}
-                className="font14"
-                currency={currency}
-                customStyle={{ color: colors?.serviceFeePriceColor }}
-              />
-            )}
 
-            {conexionChecked && conexionFare && returnConexionFare ? (
-              <PaymentItem
-                label="Conexión Aeropuerto:"
-                amount={CommonService.currency(
-                  dateReturn
-                    ? returnConexionFare * conexionPassengers
-                    : conexionFare,
-                  currencySign,
-                )}
-                className="subtotal-row text-[14px]"
-                customStyle={{ color: colors?.seatPriceColor }}
-                isBoldText={true}
-              />
-            ) : null}
+                {conexionChecked && conexionFare && returnConexionFare ? (
+                  <PaymentItem
+                    label="Conexión Aeropuerto:"
+                    amount={CommonService.currency(
+                      dateReturn
+                        ? returnConexionFare * conexionPassengers
+                        : conexionFare,
+                      currencySign,
+                    )}
+                    className="subtotal-row text-[14px]"
+                    customStyle={{ color: colors?.seatPriceColor }}
+                    isBoldText={true}
+                  />
+                ) : null}
 
-            {removeDiscountAtomValue && (
-              <PaymentItem
-                label="Cupón"
-                amount={CommonService.currency(netFare, currencySign)}
-                isNegative={true}
-                customStyle={{ color: "var(--secondary-color)" }}
-                className="text-[14px]"
-                isBoldText={true}
-              />
-            )}
+                {removeDiscountAtomValue && (
+                  <PaymentItem
+                    label="Cupón"
+                    amount={CommonService.currency(netFare, currencySign)}
+                    isNegative={true}
+                    customStyle={{ color: "var(--secondary-color)" }}
+                    className="text-[14px]"
+                    isBoldText={true}
+                  />
+                )}
 
-            {isAgency && (
-              <PaymentItem
-                label={translation?.agencyFee}
-                amount={CommonService.currency(
-                  agencyFee ? agencyFee : 0,
-                  currencySign,
+                {isAgency && (
+                  <PaymentItem
+                    label={translation?.agencyFee}
+                    amount={CommonService.currency(
+                      agencyFee ? agencyFee : 0,
+                      currencySign,
+                    )}
+                    className="text-[14px"
+                    customStyle={{ color: colors?.agencyFeePriceColor }}
+                    isBoldText={true}
+                  />
                 )}
-                className="text-[14px"
-                customStyle={{ color: colors?.agencyFeePriceColor }}
-                isBoldText={true}
-              />
-            )}
 
-            {walletMoney ? (
-              <PaymentItem
-                label={walletLabel}
-                amount={
-                  isPeru
-                    ? CommonService.currencyFixed(walletMoney, currencySign)
-                    : CommonService.currency(walletMoney, currencySign)
-                }
-                className="text-[14px]"
-                customStyle={{ color: "var(--secondary-color)" }}
-                currency=""
-                isBoldText={true}
-              />
-            ) : null}
+                {walletMoney ? (
+                  <PaymentItem
+                    label={walletLabel}
+                    amount={
+                      isPeru
+                        ? CommonService.currencyFixed(walletMoney, currencySign)
+                        : CommonService.currency(walletMoney, currencySign)
+                    }
+                    className="text-[14px]"
+                    customStyle={{ color: "var(--secondary-color)" }}
+                    currency=""
+                    isBoldText={true}
+                  />
+                ) : null}
 
-            {virtualMoney ? (
-              <PaymentItem
-                label={
-                  <span
-                    className="secondary-text"
-                    style={{ color: "var(--secondary-color)" }}
-                  >{`${creditosLabel}(${virtualLimit}%)`}</span>
-                }
-                amount={CommonService.currency(virtualMoney, currencySign)}
-                customStyle={{ color: "var(--secondary-color)" }}
-                className="text-[14px]"
-                currency=""
-                isBoldText={true}
-              />
-            ) : null}
+                {virtualMoney ? (
+                  <PaymentItem
+                    label={
+                      <span
+                        className="secondary-text"
+                        style={{ color: "var(--secondary-color)" }}
+                      >{`${creditosLabel}(${virtualLimit}%)`}</span>
+                    }
+                    amount={CommonService.currency(virtualMoney, currencySign)}
+                    customStyle={{ color: "var(--secondary-color)" }}
+                    className="text-[14px]"
+                    currency=""
+                    isBoldText={true}
+                  />
+                ) : null}
 
-            {showUsd ? (
-              <PaymentItem
-                label={
-                  <span className="primary-text">{translation?.showUsd}</span>
-                }
-                amount={CommonService.currency(
-                  isAgency ? netFareInUsd + agencyFee : netFareInUsd,
-                  currencySign,
-                )}
-                currency="USD"
-                customStyle={{ color: "var(--primary-color)" }}
-                className="text-[14px]"
-                isBoldText={true}
-              />
-            ) : null}
-          </div>
-        </div>
-        <div
-          className={`  text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] rounded-b-[14px] text-[14px]`}
-          style={{ backgroundColor: colors?.bottomStripColor }}
-        >
-          <div className="flex justify-between items-center w-full text-[#fff]">
-            <div className="bold-text">Total</div>
+                {showUsd ? (
+                  <PaymentItem
+                    label={
+                      <span className="primary-text">
+                        {translation?.showUsd}
+                      </span>
+                    }
+                    amount={CommonService.currency(
+                      isAgency ? netFareInUsd + agencyFee : netFareInUsd,
+                      currencySign,
+                    )}
+                    currency="USD"
+                    customStyle={{ color: "var(--primary-color)" }}
+                    className="text-[14px]"
+                    isBoldText={true}
+                  />
+                ) : null}
+              </div>
+            </div>
             <div
-              className="bold-text text-[14px] text-[#fff]"
-              style={{
-                minWidth: 80,
-                display: "flex",
-                justifyContent: "flex-end",
-              }}
+              className={`  text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] rounded-b-[14px] text-[14px]`}
+              style={{ backgroundColor: colors?.bottomStripColor }}
             >
-              {currency ? currency : ""}{" "}
-              {CommonService.currency(
-                isPeru
-                  ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) /
-                      100
-                  : removeDiscountAtomValue
-                    ? 0
-                    : netFare,
-                currencySign,
-              )}
+              <div className="flex justify-between items-center w-full text-[#fff]">
+                <div className="bold-text">Total</div>
+                <div
+                  className="bold-text text-[14px] text-[#fff]"
+                  style={{
+                    minWidth: 80,
+                    display: "flex",
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  {currency ? currency : ""}{" "}
+                  {CommonService.currency(
+                    isPeru
+                      ? Math.round(
+                          (removeDiscountAtomValue ? 0 : netFare) * 100,
+                        ) / 100
+                      : removeDiscountAtomValue
+                        ? 0
+                        : netFare,
+                    currencySign,
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };