kupos-ui-components-lib 9.9.7 → 9.9.9

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -0,0 +1,634 @@
+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: "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 FeatureServiceUi = ({
+  serviceItem,
+  showTopLabel,
+  isSoldOut,
+  getAnimationIcon,
+  cityOrigin,
+  cityDestination,
+  renderIcon,
+  viewersConfig,
+  isFeatureDropDownExpand,
+  onToggleExpand,
+  ticketQuantity = 1,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onBookButtonPress,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData = undefined,
+}) => {
+  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
+  const operators =
+    wowDealData?.services?.length > 0
+      ? wowDealData.services.slice(0, 3).map((service: any) => ({
+          logo: service.operator_logo_url,
+          name: service.operator_name,
+          time: service.departure_time,
+          seatsAvailable: `${service.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 canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
+
+  const departures = wowDealData?.services
+    ?.map((s) => s.departure_time)
+    ?.filter(Boolean);
+
+  let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
+
+  if (departures?.length) {
+    const sorted = [...departures].sort((a, b) => {
+      const [ah, am] = a.split(":").map(Number);
+      const [bh, bm] = b.split(":").map(Number);
+      return ah * 60 + am - (bh * 60 + bm);
+    });
+
+    departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 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", "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: "5px 8px",
+                borderRadius: "10px",
+                color: "#fff",
+                animation: "pulse-zoom 2s ease-in-out infinite",
+                whiteSpace: "nowrap",
+                fontSize: "12px",
+              }}
+            >
+              <span>AHORRAS {savingsPercent}%</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>&nbsp;términa en &nbsp;
+            <span
+              className="bold-text text-end"
+              ref={(node) =>
+                commonService.startCountdown(node, getCountdownSeconds())
+              }
+              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] mb-[16px] 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">
+                  {travelDate
+                    ? new Date(travelDate).toLocaleDateString("es-CL", {
+                        weekday: "long",
+                        day: "numeric",
+                        month: "long",
+                      })
+                    : "Viernes 23 de mayo"}
+                </div>
+
+                <div className="bold-text text-[12px] text-white">
+                  {departureRange}
+                </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>{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 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]">
+                  {operatorsCompetingCount} operadores compitiendo
+                  <br /> por tu compra
+                </div>
+              </div>
+
+              <div className="grid w-full grid-cols-3 items-stretch gap-[14px] ">
+                {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={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-[11px] truncate max-w-full text-center">
+                      {op.name}
+                    </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={{
+                  padding: "8px 14px",
+                  marginBottom: "6px",
+                }}
+              >
+                <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>
+                  <span style={{ color: "#FF5C60" }}>viendo</span> |{" "}
+                  <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",
+                  }}
+                >
+                  {savingsPercent}% 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" }}
+                >
+                  {`$${(originalPrice * ticketQuantity).toLocaleString()}`}
+                  <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">
+                  {`$${(finalPrice * 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 rounded-[16px] "
+                  style={{
+                    border: "1px solid #363c48",
+                    backgroundColor: "#1a202e",
+                    padding: "4px 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"
+                    disabled={!canIncreaseTicketQuantity}
+                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
+                    className={`flex h-[26px] w-[26px] items-center justify-center rounded-full border-none text-[16px] leading-none text-white ${
+                      canIncreaseTicketQuantity
+                        ? "cursor-pointer bg-[#2d374d]"
+                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
+                    }`}
+                  >
+                    +
+                  </button>
+                </div>
+                {!canIncreaseTicketQuantity && (
+                  <span className="text-[10px] text-[#FF5C60]">
+                    máx. {maxSeatsPerBooking} pasajes
+                  </span>
+                )}
+              </div>
+
+              <button
+                type="button"
+                onClick={() => onBookButtonPress?.(ticketQuantity, serviceItem)}
+                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 text-center"
+                style={{
+                  backgroundColor: "#FF5C60",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                <LottiePlayer
+                  // animationData={serviceItem.icons.flexibleAnim}
+                  animationData={getAnimationIcon("thunderAnimation")}
+                  width="16px"
+                  height="16px"
+                />
+                <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;