kupos-ui-components-lib 9.8.4 → 9.8.6

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -1,556 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-import commonService from "../../utils/CommonService";
-import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
-
-const TIME_SLOTS = [
-  "Entre 07:00 AM y 10:00 AM",
-  "Entre 11:00 AM y 14:00 AM",
-  "Entre 15:00 PM y 18:00 PM",
-  "Entre 19:00 PM y 22:00 PM",
-];
-
-const HARDCODED_OPERATORS = [
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
-    name: "Turbus",
-    time: "7:00 am",
-    seatsAvailable: "3 disponibles",
-  },
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
-    name: "Turbus",
-    time: "8:00 am",
-    seatsAvailable: "5 disponibles",
-  },
-  {
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
-    name: "Turbus",
-    time: "9:00 am",
-    seatsAvailable: "3 disponibles",
-  },
-];
-
-const FeatureServiceUiMobile = ({
-  serviceItem,
-  showTopLabel,
-  colors,
-  isSoldOut,
-  cityOrigin,
-  cityDestination,
-  renderIcon,
-  viewersConfig,
-  isFeatureDropDownExpand,
-  onToggleExpand,
-  ticketQuantity = 1,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onBookButtonPress,
-  selectedTimeSlot = TIME_SLOTS[0],
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
-  wowDealData = undefined,
-}) => {
-  // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
-  const operators =
-    wowDealData?.operators?.length > 0
-      ? wowDealData.operators.map((op: any) => ({
-        logo: op.operator_logo_url,
-        name: op.operator_name,
-        time: op.starting_departure,
-        seatsAvailable: `${op.available_seats} disponibles`,
-      }))
-      : serviceItem?.operators?.length > 0
-        ? serviceItem.operators
-        : HARDCODED_OPERATORS;
-
-  // Use wow_deal pricing if available
-  const finalPrice = wowDealData?.final_price || 4000;
-  const originalPrice = wowDealData?.original_price || 10000;
-  const savingsPercent = wowDealData?.savings_percent || 60;
-  const operatorsCompetingCount = wowDealData?.operators_competing_count || 3;
-  const maxSeatsPerBooking = wowDealData?.max_seats_per_booking || 4;
-  const expiresAt = wowDealData?.expires_at;
-  const isPostPaymentAssignment = wowDealData?.is_post_payment_assignment;
-  const dealWindowFrom = wowDealData?.deal_window_from || "07:00";
-  const dealWindowTo = wowDealData?.deal_window_to || "10:00";
-  const travelDate = wowDealData?.travel_date;
-
-  // Calculate countdown seconds from expires_at ISO timestamp
-  const getCountdownSeconds = () => {
-    if (!expiresAt) return 599;
-    const expires = new Date(expiresAt).getTime();
-    const now = Date.now();
-    const seconds = Math.max(0, Math.floor((expires - now) / 1000));
-    return seconds;
-  };
-
-  // Generate time slot from deal window
-  const dynamicTimeSlot = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
-  const displayTimeSlot = selectedTimeSlot || dynamicTimeSlot;
-
-  const isItemExpanded =
-    serviceItem.id === isFeatureDropDownExpand ||
-    isFeatureDropDownExpand === true;
-  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
-
-  const canDecreaseTicketQuantity = ticketQuantity > 1;
-
-  const HOW_IT_WORKS_STEPS = [
-    {
-      icon: "flexible",
-      name: "Salida flexible",
-      text: `Viajas en un horario entre las ${dealWindowFrom} y las ${dealWindowTo} del día elegido.`,
-    },
-    {
-      icon: "bus",
-      name: "Empresa asignada",
-      text: isPostPaymentAssignment
-        ? "Empresa y hora a confirmar luego del pago."
-        : "Una de las empresas confirmará tu viaje al instante tras el pago.",
-    },
-    {
-      icon: "price",
-      name: "Precio garantizado",
-      text: "Mejor precio garantizado. Sin cambios ni cancelación.",
-    },
-    {
-      icon: "ticket",
-      name: "¡Listo!",
-      text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
-    },
-  ];
-
-  const FeatureStepIcon = ({ icon }) => {
-    switch (icon) {
-      case "flexible":
-        return renderIcon("flexibleIcon", "20px");
-      case "bus":
-        return renderIcon("empressaIcon", "20px");
-      case "price":
-        return renderIcon("precioIcon", "20px");
-      default:
-        return renderIcon("listoIcon", "20px");
-    }
-  };
-
-  return (
-    <div
-      // ${
-      //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-      // }
-      className={`relative  mb-[10px]
-       ${serviceItem?.is_direct_trip ||
-          serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-          showTopLabel
-          ? "mt-[24px]"
-          : "mt-[20px]"
-        }`}
-    >
-      <div
-        // className="shadow-service"
-        style={{
-          border: "1px solid #c0c0c0",
-          padding: "12px",
-          borderRadius: "14px",
-        }}
-      >
-        <div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
-          <div className="flex items-center gap-[10px] mt-[16px]">
-            <span>Salida flexible</span>
-            <div
-              className="bold-text font-[9px]"
-              style={{
-                backgroundColor: "#FF5C60",
-                padding: "4px 8px",
-                borderRadius: "10px",
-                color: "#fff",
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-                fontSize: "10px",
-              }}
-            >
-              <span>AHORRAS {savingsPercent}%</span>
-            </div>
-          </div>
-        </div>
-        <div
-          id={`service-card-${serviceItem.id}`}
-          className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
-        >
-          <div className="flex flex-col gap-[10px]">
-            <div className=" text-[white]">
-              <div className="flex flex-col gap-[10px] relative">
-                <div className="flex items-center gap-[6px]">
-                  <img
-                    src={serviceItem.icons?.whiteOrigin}
-                    alt="origin"
-                    className={`w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""
-                      }`}
-                  />
-
-                  <span className="text-[14px] bold-text">
-                    {cityOrigin?.label.split(",")[0]}
-                  </span>
-
-                  <span className="mx-[6px] text-[14px] bold-text">→</span>
-
-                  <img
-                    src={serviceItem.icons?.whiteDestination}
-                    alt="destination"
-                    className={`w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""
-                      }`}
-                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                  />
-
-                  <span className="text-[14px] bold-text">
-                    {cityDestination?.label.split(",")[0]}
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-[6px]">
-                  <div
-                    className="kupos-time-dd relative"
-                    tabIndex={0}
-                    onBlur={(e) => {
-                      if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                        onTimeDropdownToggle?.(null);
-                      }
-                    }}
-                    style={{ outline: "none" }}
-                  >
-                    <button
-                      type="button"
-                      onClick={() =>
-                        onTimeDropdownToggle?.(
-                          isThisTimeDropdownOpen ? null : serviceItem.id,
-                        )
-                      }
-                      className="flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]"
-                    >
-                      <span>{displayTimeSlot}</span>
-                      <img
-                        src={serviceItem?.icons?.downArrow}
-                        alt="down arrow"
-                        className={`kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`}
-                        style={{
-                          width: "12px",
-                          height: "8px",
-                          filter: "brightness(0) invert(1)",
-                        }}
-                      />
-                    </button>
-                    {isThisTimeDropdownOpen && (
-                      <>
-                        <div
-                          className="absolute left-0 top-[calc(100%+10px)]"
-                          style={{
-                            zIndex: 20,
-                            backgroundColor: "#fff",
-                            borderRadius: "14px",
-                            minWidth: "190px",
-                            boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
-                            overflow: "hidden",
-                            padding: "6px 0",
-                          }}
-                        >
-                          {TIME_SLOTS.map((slot) => {
-                            const isActive = slot === selectedTimeSlot;
-                            return (
-                              <button
-                                key={slot}
-                                type="button"
-                                onClick={() => {
-                                  onTimeSlotChange?.(slot);
-                                  onTimeDropdownToggle?.(null);
-                                }}
-                                className={`flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}`}
-                              >
-                                <span>{slot}</span>
-                              </button>
-                            );
-                          })}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="border-t border-[#363c48] my-[8px]" />
-
-            <div>
-              <span
-                className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
-                style={{ textAlign: "center" }}
-              >
-                {operatorsCompetingCount} operadores compitiendo <br />
-                por tu compra
-              </span>
-              <div
-                className="flex gap-[8px] text-[white]"
-                style={{ width: "100%" }}
-              >
-                {operators.map((op, idx) => (
-                  <div
-                    key={idx}
-                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                    style={{
-                      flex: 1,
-                      minWidth: 0,
-                      height: "100px",
-                      border: "1px solid #363c48",
-                      backgroundColor: "#1a202e",
-                      padding: "14px 6px",
-                    }}
-                  >
-                    <img
-                      src={op.logo}
-                      alt={op.name}
-                      onError={(e) => {
-                        e.currentTarget.src = serviceItem?.operator_details?.[0] || "/images/service-list/bus-icon.svg";
-                      }}
-                      className={`h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""
-                        }`}
-                    />
-                    <span className="text-[12px] truncate max-w-full text-center ">
-                      {op.name}
-                    </span>
-                    {/* <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
-                      <span>{op?.time}</span>
-                    </div> */}
-                    <span className="text-[11px] whitespace-nowrap">
-                      {op?.seatsAvailable}
-                    </span>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className="flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]"
-                style={{
-                  padding: "4px 14px",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem.icons.personsAnim}
-                  width="18px"
-                  height="18px"
-                />
-                <span>
-                  <span className="bold-text text-[white]">
-                    {" "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        color: "#FF5C60",
-                      }}
-                    />{" "}
-                  </span>{" "}
-                  <span style={{ color: "#FF5C60" }}>viendo</span>
-                  <span className="text-[white]"> |</span>{" "}
-                  <span
-                    className="bold-text text-[white]"
-                    ref={(node) =>
-                      commonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="text-[white]">han comprado</span>
-                </span>
-              </div>
-
-              <div className="mt-[10px] flex flex-col items-center gap-[8px]">
-                <span className="text-[12px] text-[white]">
-                  ¿Cuántos pasajes quieres?
-                </span>
-                <div
-                  className="flex w-[50%] items-center justify-between"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                    padding: "4px 14px",
-                    borderRadius: "14px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    aria-label="Disminuir pasajes"
-                    disabled={!canDecreaseTicketQuantity}
-                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
-                    className={`flex h-[26px] w-[26px] items-center justify-center rounded-full border-none text-[16px] leading-none text-[white] ${canDecreaseTicketQuantity
-                        ? "cursor-pointer bg-[#2d374d]"
-                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
-                      }`}
-                  >
-                    -
-                  </button>
-                  <span className="bold-text text-[14px] text-[white]">
-                    {ticketQuantity}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label="Aumentar pasajes"
-                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
-                    className="flex h-[26px] w-[26px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[16px] leading-none text-[white]"
-                  >
-                    +
-                  </button>
-                </div>
-              </div>
-
-              <div
-                className="mt-[10px] flex justify-between items-center rounded-[14px]"
-                style={{
-                  // height: "80px",
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "14px 10px",
-                }}
-              >
-                <div className="flex flex-col">
-                  <span
-                    className="text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative"
-                    style={{ position: "relative" }}
-                  >
-                    ${originalPrice.toLocaleString()}
-                    <span
-                      style={{
-                        position: "absolute",
-                        left: "-2px",
-                        top: "50%",
-                        width: "calc(80% + 4px)",
-                        height: "1px",
-
-                        backgroundColor: "#FF5C60",
-
-                        transform: "rotate(-10deg)",
-                        transformOrigin: "center",
-                      }}
-                    />
-                  </span>
-                  <span className="text-[white] bold-text text-[24px] leading-none mt-[4px]">
-                    {`$${(finalPrice * ticketQuantity).toLocaleString()}`}
-                  </span>
-                </div>
-                <span
-                  className="text-[#FF8F45] bold-text text-[22px] leading-tight"
-                  style={{
-                    animation: "pulse-zoom 2s ease-in-out infinite",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {savingsPercent}% OFF
-                </span>
-              </div>
-
-              <button
-                type="button"
-                onClick={onBookButtonPress}
-                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px]  justify-center border-none cursor-pointer"
-                style={{
-                  backgroundColor: "#FF5C60",
-                  whiteSpace: "nowrap",
-                  width: "100%",
-                }}
-              >
-                <LottiePlayer
-                  animationData={serviceItem.icons.thunderAnim}
-                  width="16px"
-                  height="16px"
-                />
-                <span className="whitespace-nowrap">¡Lo quiero!</span>
-              </button>
-
-              <div
-                className="flex justify-end mt-[10px]"
-                onClick={onToggleExpand}
-              >
-                <img
-                  src={serviceItem?.icons?.downArrow}
-                  alt="down arrow"
-                  className={`transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
-                  style={{
-                    width: "14px",
-                    height: "8px",
-                    filter: "brightness(0) invert(1)",
-                    marginRight: "2px",
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {isItemExpanded && (
-          <div
-            className="flex flex-col gap-[10px]"
-            style={{
-              opacity: isItemExpanded ? 1 : 0,
-              transition: "opacity 250ms ease-in-out",
-            }}
-          >
-            <div
-              className={` text-[12px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
-                }`}
-              style={{ transition: "padding 300ms ease-in-out" }}
-            >
-              <span className="bold-text">¿Cómo funciona?</span>
-
-              <div className="flex flex-col">
-                {HOW_IT_WORKS_STEPS.map((step) => (
-                  <div className="flex items-start gap-[8px] mt-[10px]">
-                    <div>
-                      <FeatureStepIcon icon={step.icon} />
-                    </div>
-                    <div className="flex flex-col">
-                      <span className="bold-text">{step.name}</span>
-                      <span>{step.text}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
-      <div className="absolute -top-[13px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 ">
-        <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
-          <span className="flex items-center">
-            <div className="mb-[2px]">
-              <LottiePlayer
-                animationData={flameAnimation}
-                width="16px"
-                height="16px"
-              />
-            </div>
-            <span className="bold-text text-[white] ml-[3px]">
-              Remate&nbsp;
-            </span>{" "}
-            <span className="text-[white]">términa en</span>{" "}
-            <span
-              className="bold-text text-end"
-              ref={(node) => commonService.startCountdown(node, getCountdownSeconds())}
-              style={{
-                fontVariantNumeric: "tabular-nums",
-                display: "inline-block",
-                color: "#fff",
-                minWidth: "40px",
-              }}
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FeatureServiceUiMobile;