kupos-ui-components-lib 9.8.0 → 9.8.2

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -1,559 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-import commonService from "../../utils/CommonService";
-
-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: "Pullmanbus",
-    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: "Expreso Santa C...",
-    time: "9:00 am",
-    seatsAvailable: "3 disponibles",
-  },
-];
-
-const FeatureServiceUi = ({
-  serviceItem,
-  showTopLabel,
-  isSoldOut,
-  getAnimationIcon,
-  cityOrigin,
-  cityDestination,
-  renderIcon,
-  viewersConfig,
-  isFeatureDropDownExpand,
-  onToggleExpand,
-  ticketQuantity = 1,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onBookButtonPress,
-  selectedTimeSlot,
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
-}) => {
-  const operators =
-    serviceItem?.operators?.length > 0
-      ? serviceItem.operators
-      : HARDCODED_OPERATORS;
-
-  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 07:00 y las 10:00 AM del día elegido.",
-    },
-    {
-      icon: "bus",
-      name: "Empresa asignada",
-      text: "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", "24px");
-      case "bus":
-        return renderIcon("empressaIcon", "24px");
-      case "price":
-        return renderIcon("precioIcon", "24px");
-      default:
-        return renderIcon("listoIcon", "24px");
-    }
-  };
-
-  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="border border-[#ccc]"
-        style={{
-          // border: "0.6px solid #ccc",
-          padding: "14px",
-          borderRadius: "14px",
-        }}
-      >
-        <div className="flex justify-between items-center px-[14px] pb-[10px] text-[13.33px]">
-          <div className="flex items-center gap-[10px]">
-            <span>Salida flexible</span>
-            <div
-              className="bold-text font-[9px]"
-              style={{
-                backgroundColor: "#FF5C60",
-                padding: "1px 8px",
-                borderRadius: "4px",
-                color: "#fff",
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <span>AHORRAS 60%</span>
-            </div>
-          </div>
-          <div className="flex items-center">
-            {/* {renderIcon("fireIcon", "14px")}{" "} */}
-            <div className="mb-[2px]">
-              <LottiePlayer
-                // animationData={serviceItem.icons.flexibleAnim}
-                animationData={getAnimationIcon("flameAnimation")}
-                width="18px"
-                height="18px"
-              />
-            </div>
-            <span className="bold-text">Remate</span> términa en{" "}
-            <span
-              className="bold-text text-end"
-              ref={(node) => commonService.startCountdown(node, 599)}
-              style={{
-                fontVariantNumeric: "tabular-nums",
-                display: "inline-block",
-                color: "#FF5C60",
-                minWidth: "40px",
-              }}
-            />
-          </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="grid grid-cols-[25%_48%_27%] items-stretch">
-            {/* LEFT: origin, destination, flexible, time, confirmed seat */}
-            <div className="flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]">
-              <div className="flex flex-col gap-[8px]">
-                <div className="flex items-center gap-[8px]">
-                  <img
-                    src={serviceItem.icons?.whiteOrigin}
-                    alt="origin"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <span className="text-[13px] bold-text">
-                    {cityOrigin?.label.split(",")[0]}
-                  </span>
-                </div>
-                <div className="flex items-center gap-[8px]">
-                  <img
-                    src={serviceItem.icons?.whiteDestination}
-                    alt="destination"
-                    className={`w-[14px] h-[14px] shrink-0 ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                  />
-                  <span className="text-[13px] bold-text">
-                    {cityDestination?.label.split(",")[0]}
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-[8px]">
-                <div className="text-[12px] bold-text">Viernes 23 de mayo</div>
-
-                <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 whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]"
-                  >
-                    <span>{selectedTimeSlot}</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: "248px",
-                          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 className="text-[12px] bold-text whitespace-nowrap">
-                  Entre 07:00 AM y 10:00 AM
-                </div> */}
-              </div>
-
-              <div className="flex flex-col items-start gap-[10px] text-[12px] ">
-                <div className="flex items-justify gap-[8px]">
-                  {renderIcon("sheildIcon", "16px")}
-
-                  <span
-                    className="text-[11px]"
-                    style={{
-                      lineHeight: 1.3,
-                    }}
-                  >
-                    Empresa y hora a confirmar luego del pago.
-                  </span>
-                </div>
-                <div className="flex items-justify gap-[8px]">
-                  {renderIcon("confirmarIcon", "16px")}
-
-                  <span
-                    className="text-[11px]"
-                    style={{
-                      lineHeight: 1.3,
-                    }}
-                  >
-                    Tu compra está 100% asegurada.
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* MIDDLE: competing operators + viewers */}
-            <div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
-              <div className="text-center">
-                <div className="bold-text text-[14px]">
-                  3 operadores compitiendo
-                  <br /> por tu compra
-                </div>
-              </div>
-
-              <div className="grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]">
-                {operators.map((op, idx) => (
-                  <div
-                    key={idx}
-                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                    style={{
-                      // height: "80px",
-                      border: "1px solid #363c48",
-                      backgroundColor: "#1a202e",
-                      padding: "14px 10px",
-                    }}
-                  >
-                    <img
-                      src={serviceItem.operator_details[0]}
-                      alt={op.name}
-                      className={`h-[24px] max-w-full object-contain ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
-                    />
-                    <span className="text-[11px] truncate max-w-full text-center">
-                      {serviceItem.operator_details[2]}
-                    </span>
-                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
-                      <span>{op?.time}</span>
-                    </div>
-                    <span className="text-[10px] mt-[6px]">
-                      {op?.seatsAvailable}
-                    </span>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className="flex w-full items-center justify-center gap-[6px] text-[12px]"
-                style={{
-                  border: "1px solid #363c48",
-                  backgroundColor: "#1a202e",
-                  padding: "8px 14px",
-                  borderRadius: "24px",
-                }}
-              >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.flexibleAnim}
-                  animationData={getAnimationIcon("usersAnimation")}
-                  width="18px"
-                  height="18px"
-                />
-                <span className="text-[13px]">
-                  <span className="bold-text text-white">
-                    {" "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        color: "#FF5C60",
-                      }}
-                    />{" "}
-                  </span>{" "}
-                  viendo |{" "}
-                  <span
-                    className="bold-text"
-                    ref={(node) =>
-                      commonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  han comprado
-                </span>
-              </div>
-            </div>
-
-            {/* RIGHT: price + button */}
-            <div className="flex flex-col justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]">
-              <div
-                className="flex flex-col gap-[6px] "
-                style={{
-                  alignItems: "center",
-                }}
-              >
-                <span
-                  className="text-[#FF8F45] bold-text text-[26px] leading-tight"
-                  style={{
-                    animation: "pulse-zoom 2s ease-in-out infinite",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  60% OFF
-                </span>
-                {/* <span className="text-[#666] text-[14px] line-through">
-                  $10.000
-                </span> */}
-                <span
-                  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
-                  style={{ position: "relative" }}
-                >
-                  $10.000
-                  <span
-                    style={{
-                      position: "absolute",
-                      left: "-2px",
-                      top: "50%",
-                      width: "calc(100% + 4px)",
-                      height: "1px",
-
-                      backgroundColor: "#FF5C60",
-
-                      transform: "rotate(-10deg)",
-                      transformOrigin: "center",
-                    }}
-                  />
-                </span>
-                <span className="text-white bold-text text-[28px] leading-none">
-                  {`$${(4000 * ticketQuantity).toLocaleString()}`}
-                </span>
-              </div>
-
-              <div className="mt-[4px] flex flex-col items-center gap-[8px]">
-                <span className="text-[12px] text-white">
-                  ¿Cuántos pasajes quieres?
-                </span>
-                <div
-                  className="flex w-full items-center justify-between"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                    padding: "6px 14px",
-                    borderRadius: "14px",
-                  }}
-                >
-                  <button
-                    type="button"
-                    aria-label="Disminuir pasajes"
-                    disabled={!canDecreaseTicketQuantity}
-                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
-                    className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-white ${
-                      canDecreaseTicketQuantity
-                        ? "cursor-pointer bg-[#2d374d]"
-                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
-                    }`}
-                  >
-                    -
-                  </button>
-                  <span className="bold-text text-[20px] text-white">
-                    {ticketQuantity}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label="Aumentar pasajes"
-                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
-                    className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-white"
-                  >
-                    +
-                  </button>
-                </div>
-              </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-[4px]  justify-center border-none cursor-pointer"
-                style={{
-                  backgroundColor: "#FF5C60",
-                  animation: "pulse-zoom 2s ease-in-out infinite",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.flexibleAnim}
-                  animationData={getAnimationIcon("thunderAnimation")}
-                  width="18px"
-                  height="18px"
-                />
-                <span className="whitespace-nowrap">¡Lo quiero!</span>
-              </button>
-            </div>
-
-            <div
-              className={`absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
-              onClick={onToggleExpand}
-            >
-              <img
-                src={serviceItem.icons?.downArrow}
-                alt="down arrow"
-                style={{
-                  width: "14px",
-                  height: "8px",
-                  filter: "brightness(0) invert(1)",
-                }}
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className="grid"
-          style={{
-            gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
-            opacity: isItemExpanded ? 1 : 0,
-            transition:
-              "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
-          }}
-        >
-          <div
-            className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${
-              isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
-            }`}
-            style={{ transition: "padding 300ms ease-in-out" }}
-          >
-            <span className="bold-text">¿Cómo funciona?</span>
-
-            <div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
-              {HOW_IT_WORKS_STEPS.map((step) => (
-                <div
-                  key={step.name}
-                  className="flex flex-col items-center text-center text-[#272727]"
-                >
-                  <FeatureStepIcon icon={step.icon} />
-                  <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
-                    {step.name}
-                  </span>
-                  <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
-                    {step.text}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
-      {/* {showTopLabel && (
-        <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
-          <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
-            <LottiePlayer
-              animationData={getAnimationIcon("bombAnimation")}
-              width="14px"
-              height="14px"
-            />
-            <span>
-              <strong>Remate</strong> | Termina en{" "}
-              <strong>{HARDCODED_COUNTDOWN}</strong> min
-            </span>
-          </div>
-        </div>
-      )} */}
-    </div>
-  );
-};
-
-export default FeatureServiceUi;