kupos-ui-components-lib 10.4.11 → 10.4.13

package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx

@@ -0,0 +1,982 @@
+import React from "react";
+import { PaymentSideBarProps } from "../../components/PaymentSideBar/types";
+import DateService from "../../utils/DateService";
+import CommonService from "../../utils/CommonService";
+import SlidingModal from "../SlidingModal/SlidingModal";
+
+class ModalTabStateWrapper extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { modalTab: props.initialTab };
+  }
+
+  componentDidUpdate(prevProps: any) {
+    if (this.props.showDetails && !prevProps.showDetails) {
+      this.setState({ modalTab: this.props.initialTab });
+    }
+  }
+
+  render() {
+    return this.props.render(this.state.modalTab, (tab: number) =>
+      this.setState({ modalTab: tab }),
+    );
+  }
+}
+
+export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
+  const {
+    serviceNameOnward,
+    serviceNameReturn,
+    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,
+    removeDiscountAtomValue,
+    netFare,
+    promoCode,
+    onPromoRemove,
+    renderDiscount,
+    discountAmount,
+    currency,
+    insuranceData,
+    isPeru,
+    showDetails = false,
+    setShowDetails,
+  } = props;
+  console.log("🚀 ~ PaymentCardMobile ~ selectSeatOnward:", selectSeatOnward);
+
+  // We use a Class component wrapper below to hold the state,
+  // avoiding Invalid Hook Call issues when linked in external apps with multiple React instances.
+
+  // These will be derived inside the render prop of ModalTabStateWrapper
+
+  // Derive active journey data
+  const isReturn = journeyTypeActive === 2;
+  const activeBoardingStage = isReturn
+    ? boardingStageReturn
+    : boardingStageOnward;
+  const activeBoardingTime = isReturn ? boardingTimeReturn : boardingTimeOnward;
+  const activeDroppingStage = isReturn
+    ? droppingStageReturn
+    : droppingStageOnward;
+  const activeDroppingTime = isReturn ? droppingTimeReturn : droppingTimeOnward;
+  const activeSource = isReturn ? sourceReturn : sourceOnward;
+  const activeDest = isReturn ? destinationReturn : destinationOnward;
+  const activeServiceName = isReturn ? serviceNameReturn : serviceNameOnward;
+  const activeDate = isReturn ? dateReturn : dateOnward;
+  const activeDuration = isReturn ? durationReturn : durationOnward;
+  const activeTrainType = isReturn ? trainTypeReturn : trainTypeOnward;
+
+  const formatDateBadge = (date?: string) => {
+    if (!date) return "";
+    const day = DateService.getDayNameFromDate(date);
+    const d = DateService.getDateFromDate(date);
+    const month = DateService.getMonthNameFromDate(date);
+    const year = DateService.getYearFromDate(date);
+    return `${day ? day.charAt(0).toUpperCase() + day.slice(1) : ""}, ${d} de ${
+      month ? month.toLowerCase() : ""
+    } de ${year}`;
+  };
+
+  const formatSubText = (stage?: string, time?: string) => {
+    if (!stage && !time) return null;
+    const timePart = time
+      ? ` - ${DateService.formatTime ? DateService.formatTime(time) : time}`
+      : "";
+    return `${stage || ""}${timePart}`;
+  };
+
+  // ── Shared style objects ────────────────────────────────────────────────────
+  const S = {
+    sectionRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: "14px",
+      marginBottom: "10px",
+    } as React.CSSProperties,
+    sectionRowValue: {
+      textAlign: "right",
+    } as React.CSSProperties,
+    sectionTitle: {
+      fontSize: "14px",
+      marginBottom: "10px",
+    } as React.CSSProperties,
+    section: {
+      marginBottom: "20px",
+    } as React.CSSProperties,
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          borderRadius: "20px",
+          position: "relative",
+          backgroundColor: "#fff",
+          margin: "0 20px",
+          overflow: "visible",
+          border: "1px solid #e0e0e0",
+        }}
+      >
+        {/* ── TOP CARD BODY ── */}
+        <div>
+          {/* Ida / Vuelta toggle */}
+          {dateReturn ? (
+            <div
+              style={{
+                display: "flex",
+                width: "100%",
+                boxShadow: "inset 0 -1px 0 #e0e0e0",
+              }}
+            >
+              <div
+                onClick={() => setJourneyTypeActive && setJourneyTypeActive(1)}
+                style={{
+                  flex: 1,
+                  textAlign: "center",
+                  padding: "16px 0",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: journeyTypeActive === 1 ? 600 : 500,
+                  color:
+                    journeyTypeActive === 1
+                      ? colors?.idaBgColor || "#e05252"
+                      : "#999999",
+                  borderBottom:
+                    journeyTypeActive === 1
+                      ? `2px solid ${colors?.idaBgColor || "#e05252"}`
+                      : "2px solid transparent",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {translation?.going || "Ida"}
+              </div>
+              <div
+                onClick={() => setJourneyTypeActive && setJourneyTypeActive(2)}
+                style={{
+                  flex: 1,
+                  textAlign: "center",
+                  padding: "16px 0",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: journeyTypeActive === 2 ? 600 : 500,
+                  color:
+                    journeyTypeActive === 2
+                      ? colors?.vueltaBgColor || "#e05252"
+                      : "#999999",
+                  borderBottom:
+                    journeyTypeActive === 2
+                      ? `2px solid ${colors?.vueltaBgColor || "#e05252"}`
+                      : "2px solid transparent",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {translation?.return || "Vuelta"}
+              </div>
+            </div>
+          ) : null}
+
+          <div style={{ padding: "16px 16px 0 16px" }}>
+            {/* Service Name + Date Badge */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: "8px",
+                marginBottom: "14px",
+              }}
+            >
+              <div
+                style={{
+                  fontSize: "16px",
+                  fontWeight: 700,
+                  color: "#2d2d2d",
+                  lineHeight: 1.3,
+                  flex: 1,
+                }}
+              >
+                {activeServiceName}
+                {trainType && activeTrainType && (
+                  <div
+                    style={{
+                      fontSize: "12px",
+                      fontWeight: 400,
+                      color: "#666",
+                      marginTop: "2px",
+                    }}
+                  >
+                    {activeTrainType}
+                  </div>
+                )}
+              </div>
+              {activeDate && (
+                <div
+                  style={{
+                    fontSize: "11px",
+                    color: "#555",
+                    textTransform: "capitalize",
+                    whiteSpace: "nowrap",
+                    borderRadius: "12px",
+                    padding: "4px 10px",
+                    flexShrink: 0,
+                    backgroundColor: "#F8F8F8",
+                  }}
+                >
+                  {formatDateBadge(activeDate)}
+                </div>
+              )}
+            </div>
+
+            {/* Origin row */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: "6px",
+                marginBottom: "16px",
+              }}
+            >
+              <div
+                style={{
+                  flexShrink: 0,
+                  width: "28px",
+                  height: "28px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: "2px",
+                }}
+              >
+                {icons?.origin ? (
+                  <img
+                    src={icons.origin}
+                    style={{ width: "18px", height: "18px" }}
+                    alt="origin"
+                  />
+                ) : (
+                  <div
+                    style={{
+                      width: "22px",
+                      height: "22px",
+                      borderRadius: "50%",
+                      border: "2.5px solid #e0321c",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: "#e0321c",
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontSize: "15px",
+                    fontWeight: 700,
+                    color: "#464647",
+                    textTransform: "capitalize",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {activeSource}
+                </div>
+                {formatSubText(activeBoardingStage, activeBoardingTime) && (
+                  <div
+                    style={{
+                      fontSize: "12px",
+                      color: "#464647",
+                      marginTop: "3px",
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {formatSubText(activeBoardingStage, activeBoardingTime)}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Destination row */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: "8px",
+              }}
+            >
+              <div
+                style={{
+                  flexShrink: 0,
+                  width: "28px",
+                  height: "28px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: "2px",
+                }}
+              >
+                {icons?.destination ? (
+                  <img
+                    src={icons.destination}
+                    style={{ width: "18px", height: "18px" }}
+                    alt="destination"
+                  />
+                ) : (
+                  <div
+                    style={{
+                      width: "22px",
+                      height: "22px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none">
+                      <path
+                        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
+                        fill="#e05252"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontSize: "15px",
+                    fontWeight: 700,
+                    color: "#464647",
+                    textTransform: "capitalize",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {activeDest}
+                </div>
+                {formatSubText(activeDroppingStage, activeDroppingTime) && (
+                  <div
+                    style={{
+                      fontSize: "12px",
+                      color: "#464647",
+                      marginTop: "3px",
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {formatSubText(activeDroppingStage, activeDroppingTime)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── NOTCHED DASHED SEPARATOR ── */}
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            height: "26px",
+          }}
+        >
+          {/* left notch */}
+          <div
+            style={{
+              position: "absolute",
+              left: "-1.5px",
+              top: 0,
+              width: "13px",
+              height: "26px",
+              borderRadius: "0 13px 13px 0",
+              backgroundColor: "#fff",
+              border: "1px solid #ccc",
+              borderLeft: "none",
+              boxSizing: "border-box",
+              zIndex: 20,
+            }}
+          />
+          {/* dashed line */}
+          <div
+            style={{
+              flex: 1,
+              margin: "0 13px",
+              borderTop: "1.5px dashed #ccc",
+            }}
+          />
+          {/* right notch */}
+          <div
+            style={{
+              position: "absolute",
+              right: "-1.5px",
+              top: 0,
+              width: "13px",
+              height: "26px",
+              borderRadius: "13px 0 0 13px",
+              backgroundColor: "#fff",
+              border: "1px solid #ccc",
+              borderRight: "none",
+              boxSizing: "border-box",
+              zIndex: 20,
+            }}
+          />
+        </div>
+
+        {/* ── SLIDING MODAL: Payment Details ── */}
+        <ModalTabStateWrapper
+          initialTab={journeyTypeActive || 1}
+          showDetails={showDetails}
+          render={(modalTab, setModalTab) => {
+            const modalIsReturn = modalTab === 2;
+            const modalBoardingStage = modalIsReturn
+              ? boardingStageReturn
+              : boardingStageOnward;
+            const modalBoardingTime = modalIsReturn
+              ? boardingTimeReturn
+              : boardingTimeOnward;
+            const modalDroppingStage = modalIsReturn
+              ? droppingStageReturn
+              : droppingStageOnward;
+            const modalDroppingTime = modalIsReturn
+              ? droppingTimeReturn
+              : droppingTimeOnward;
+            const modalSource = modalIsReturn ? sourceReturn : sourceOnward;
+            const modalDest = modalIsReturn
+              ? destinationReturn
+              : destinationOnward;
+            const modalServiceName = modalIsReturn
+              ? serviceNameReturn
+              : serviceNameOnward;
+            const modalDuration = modalIsReturn
+              ? durationReturn
+              : durationOnward;
+
+            return (
+              <SlidingModal
+                isOpen={showDetails}
+                onClose={() => setShowDetails && setShowDetails(false)}
+                title="Detalles del viaje"
+              >
+                {/* Ida / Vuelta toggle in Modal */}
+                {dateReturn ? (
+                  <div
+                    style={{
+                      display: "flex",
+                      width: "100%",
+                      boxShadow: "inset 0 -1px 0 #e0e0e0",
+                      marginBottom: "20px",
+                      marginTop: "-10px",
+                    }}
+                  >
+                    <div
+                      onClick={() => setModalTab(1)}
+                      style={{
+                        flex: 1,
+                        textAlign: "center",
+                        padding: "10px 0 14px 0",
+                        cursor: "pointer",
+                        fontSize: "14px",
+                        fontWeight: modalTab === 1 ? 600 : 500,
+                        color:
+                          modalTab === 1
+                            ? colors?.idaBgColor || "#e05252"
+                            : "#999999",
+                        borderBottom:
+                          modalTab === 1
+                            ? `2px solid ${colors?.idaBgColor || "#e05252"}`
+                            : "2px solid transparent",
+                        transition: "all 0.2s ease",
+                      }}
+                    >
+                      {translation?.going || "Ida"}
+                    </div>
+                    <div
+                      onClick={() => setModalTab(2)}
+                      style={{
+                        flex: 1,
+                        textAlign: "center",
+                        padding: "10px 0 14px 0",
+                        cursor: "pointer",
+                        fontSize: "14px",
+                        fontWeight: modalTab === 2 ? 600 : 500,
+                        color:
+                          modalTab === 2
+                            ? colors?.vueltaBgColor || "#e05252"
+                            : "#999999",
+                        borderBottom:
+                          modalTab === 2
+                            ? `2px solid ${colors?.vueltaBgColor || "#e05252"}`
+                            : "2px solid transparent",
+                        transition: "all 0.2s ease",
+                      }}
+                    >
+                      {translation?.return || "Vuelta"}
+                    </div>
+                  </div>
+                ) : null}
+
+                {/* ── Origin / Destination summary ── */}
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "12px",
+                    marginBottom: "30px",
+                    // borderBottom: "1px solid #f0f0f0",
+                  }}
+                >
+                  {/* Origin */}
+                  <div className="flex items-center gap-[12px] leading-[1.5]">
+                    <div
+                      style={{
+                        flexShrink: 0,
+                      }}
+                      className="w-[22px] h-[22px] flex items-center justify-center mt-[2px] "
+                    >
+                      <img
+                        src={icons.origin}
+                        style={{ width: "20px", height: "20px" }}
+                        alt="origin"
+                      />
+                    </div>
+                    <div>
+                      <div
+                        style={{
+                          fontSize: "15px",
+                          textTransform: "capitalize",
+                        }}
+                      >
+                        {modalSource}
+                      </div>
+                      {formatSubText(modalBoardingStage, modalBoardingTime) && (
+                        <div
+                          style={{
+                            fontSize: "13px",
+                            marginTop: "2px",
+                          }}
+                        >
+                          {formatSubText(modalBoardingStage, modalBoardingTime)}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Destination */}
+                  <div className="flex items-start gap-[12px] leading-[1.5]">
+                    <div
+                      style={{
+                        flexShrink: 0,
+                      }}
+                      className="w-[22px] h-[22px] flex items-center justify-center mt-[2px] "
+                    >
+                      <img
+                        src={icons.destination}
+                        style={{ width: "20px", height: "20px" }}
+                        alt="destination"
+                      />
+                    </div>
+                    <div>
+                      <div
+                        style={{
+                          fontSize: "15px",
+                          fontWeight: 700,
+                          textTransform: "capitalize",
+                        }}
+                      >
+                        {modalDest}
+                      </div>
+                      {formatSubText(modalDroppingStage, modalDroppingTime) && (
+                        <div
+                          style={{
+                            fontSize: "13px",
+                            marginTop: "2px",
+                          }}
+                        >
+                          {formatSubText(modalDroppingStage, modalDroppingTime)}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* ── VIAJE ── */}
+                <div style={S.section} className="mt-[30px]">
+                  <div style={S.sectionTitle} className="bold-text">
+                    Viaje
+                  </div>
+
+                  {/* Empresa */}
+                  <div style={S.sectionRow}>
+                    <span style={{ flex: 1 }}>Empresa</span>
+                    <span style={S.sectionRowValue} className="bold-text">
+                      {modalServiceName}
+                    </span>
+                  </div>
+
+                  {/* Duración */}
+                  {modalDuration && (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>Duración</span>
+                      <span style={S.sectionRowValue} className="bold-text">
+                        {modalDuration}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Asiento N° */}
+                  {(modalIsReturn ? selectSeatReturn : selectSeatOnward) &&
+                    (modalIsReturn ? selectedReturn : selectedOnward) &&
+                    (modalIsReturn ? selectedReturn[0] : selectedOnward[0]) &&
+                    (modalIsReturn ? selectedReturn[0] : selectedOnward[0])
+                      .length > 0 && (
+                      <div
+                        style={{ ...S.sectionRow, alignItems: "flex-start" }}
+                      >
+                        <span style={{ flex: 1 }}>Asiento N°</span>
+                        <span className="bold-text flex items-center justify-end gap-[4px] flex-wrap">
+                          {(modalIsReturn
+                            ? selectedReturn[0]
+                            : selectedOnward[0]
+                          ).map((val: any, idx: number) => (
+                            <span
+                              key={idx}
+                              style={{
+                                display: "inline-flex",
+                                alignItems: "center",
+                              }}
+                            >
+                              {val.number ||
+                                val.seat_number ||
+                                val.seatNumber ||
+                                val.name ||
+                                ""}
+                              {val.type && (
+                                <span
+                                  style={{
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "12px",
+                                    marginLeft: "4px",
+                                  }}
+                                >
+                                  {val.type?.charAt(0)?.toUpperCase()}
+                                </span>
+                              )}
+                            </span>
+                          ))}
+                        </span>
+                      </div>
+                    )}
+                </div>
+
+                {/* ── POLÍTICA ── */}
+                <div style={S.section} className="mt-[30px]">
+                  <div style={S.sectionTitle} className="bold-text">
+                    Política
+                  </div>
+                  <div style={S.sectionRow}>
+                    <span style={{ flex: 1 }}>Cancelación</span>
+                    <span
+                      style={{ ...S.sectionRowValue, fontSize: "13px" }}
+                      className="bold-text"
+                    >
+                      Gratis hasta 24h antes
+                    </span>
+                  </div>
+                </div>
+
+                {/* ── TARIFA ── */}
+                <div style={S.section} className="mt-[30px]">
+                  <div style={S.sectionTitle} className="bold-text">
+                    Tarifa
+                  </div>
+
+                  {/* Onward seat fare rows */}
+                  {selectSeatOnward && selectedOnward && selectedOnward[0]
+                    ? selectedOnward[0].map((val: any, key: number) => (
+                        <div key={key} style={S.sectionRow}>
+                          <span style={{ flex: 1 }}>
+                            Tarifa base - ida ({selectedOnward[1][key]} x{" "}
+                            {val.is_pet_seat ? "Asiento Mascota" : val.type})
+                          </span>
+                          <span style={S.sectionRowValue} className="bold-text">
+                            {CommonService.currency(
+                              isPeru
+                                ? Math.round(
+                                    val.fare * selectedOnward[1][key] * 100,
+                                  ) / 100
+                                : val.fare * selectedOnward[1][key],
+                              currencySign,
+                            )}
+                          </span>
+                        </div>
+                      ))
+                    : null}
+
+                  {/* Return seat fare rows */}
+                  {selectSeatReturn && selectedReturn && selectedReturn[0]
+                    ? selectedReturn[0].map((val: any, key: number) => (
+                        <div key={key} style={S.sectionRow}>
+                          <span style={{ flex: 1 }}>
+                            Tarifa base - vuelta ({selectedReturn[1][key]} x{" "}
+                            {val.is_pet_seat ? "Asiento Mascota" : val.type})
+                          </span>
+                          <span style={S.sectionRowValue} className="bold-text">
+                            {CommonService.currency(
+                              isPeru
+                                ? Math.round(
+                                    val.fare * selectedReturn[1][key] * 100,
+                                  ) / 100
+                                : val.fare * selectedReturn[1][key],
+                              currencySign,
+                            )}
+                          </span>
+                        </div>
+                      ))
+                    : null}
+
+                  {/* Insurance */}
+                  {insuranceData?.insurance_enabled ? (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>
+                        {(selectedOnward?.[1]?.reduce(
+                          (acc: number, qty: number) => acc + qty,
+                          0,
+                        ) ?? 0) +
+                          (selectedReturn?.[1]?.reduce(
+                            (acc: number, qty: number) => acc + qty,
+                            0,
+                          ) ?? 0)}{" "}
+                        x Viajero Seguro
+                      </span>
+                      <span style={S.sectionRowValue} className="bold-text">
+                        {CommonService.currency(
+                          insuranceData?.insurance_total ?? 0,
+                          currencySign,
+                        )}
+                      </span>
+                    </div>
+                  ) : null}
+
+                  {/* Service fee */}
+                  {props.serviceFeeDataStateValue?.service_fee > 0 && (
+                    <div style={S.sectionRow}>
+                      <span style={{ flex: 1 }}>Cargo por servicio</span>
+                      <span style={S.sectionRowValue} className="bold-text">
+                        {CommonService.currency(
+                          props.serviceFeeDataStateValue.service_fee,
+                          currencySign,
+                        )}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Promo code */}
+                  {promoCode?.promoCodeApplied && (
+                    <>
+                      <div style={S.sectionRow}>
+                        <span style={{ flex: 1 }}>
+                          {translation?.promotionalCode || "Código promocional"}
+                        </span>
+                        <span
+                          style={{
+                            ...S.sectionRowValue,
+                            color: colors?.promoCodePriceColor,
+                          }}
+                          className="bold-text"
+                        >
+                          {CommonService.currency(
+                            promoCode?.promoCouponAmount ?? 0,
+                            currencySign,
+                          )}
+                        </span>
+                      </div>
+                      {promoCode?.promoCouponAmount ? (
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "5px",
+                            marginBottom: "8px",
+                          }}
+                        >
+                          <span style={{ color: "#555", fontSize: "13px" }}>
+                            {promoCode?.promoCode}
+                          </span>
+                          <span
+                            style={{ cursor: "pointer" }}
+                            onClick={onPromoRemove}
+                          >
+                            {icons?.closeIcon && (
+                              <img
+                                src={icons.closeIcon}
+                                alt="close"
+                                style={{ width: "14px", height: "14px" }}
+                              />
+                            )}
+                          </span>
+                        </div>
+                      ) : null}
+                    </>
+                  )}
+
+                  {/* Discount */}
+                  {discountAmount ? (
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        marginBottom: "10px",
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          fontSize: "14px",
+                        }}
+                      >
+                        <span>Descuento</span>
+                        <span style={{ fontWeight: 700, color: "#e05252" }}>
+                          {renderDiscount ? "" : "- "}
+                          {currency ? currency : ""}{" "}
+                          {CommonService.currency(discountAmount, currencySign)}
+                        </span>
+                      </div>
+                      <div
+                        className="discount-label-wrapper"
+                        style={{ marginTop: "2px" }}
+                      >
+                        <style>{`
+                    .discount-label-wrapper .discount-row {
+                      justify-content: flex-start !important;
+                      margin: 0 !important;
+                    }
+                    .discount-label-wrapper .discount-row > div:last-child {
+                      display: none !important;
+                    }
+                    .discount-label-wrapper .font10 span {
+                      font-size: 13px !important;
+                      font-weight: 500 !important;
+                      color: #e05252 !important;
+                    }
+                  `}</style>
+                        {renderDiscount && renderDiscount(discountAmount)}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {/* Dashed separator */}
+                  <div
+                    style={{
+                      borderTop: "1.5px dashed #464647",
+                      margin: "14px 0",
+                    }}
+                  />
+
+                  {/* Total */}
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      fontSize: "16px",
+                      fontWeight: 700,
+                      color: "#1a1a1a",
+                    }}
+                  >
+                    <span>Total</span>
+                    <span>
+                      {currency ? currency : ""}{" "}
+                      {CommonService.currency(
+                        isPeru
+                          ? Math.round(
+                              (removeDiscountAtomValue ? 0 : netFare) * 100,
+                            ) / 100
+                          : removeDiscountAtomValue
+                            ? 0
+                            : netFare,
+                        currencySign,
+                      )}
+                    </span>
+                  </div>
+                </div>
+              </SlidingModal>
+            );
+          }}
+        />
+
+        {/* ── FOOTER: Ver todos los detalles ── */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "6px",
+            paddingBottom: "14px",
+            cursor: "pointer",
+            userSelect: "none",
+          }}
+          onClick={() => setShowDetails && setShowDetails(!showDetails)}
+        >
+          <span style={{ fontSize: "14px", fontWeight: 700, color: "#464647" }}>
+            Ver todos los detalles
+          </span>
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            style={{
+              display: "inline-block",
+              transition: "transform 0.2s ease",
+              flexShrink: 0,
+            }}
+          >
+            <path
+              d="M6 9l6 6 6-6"
+              stroke="#2d2d2d"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default PaymentCardMobile;