kupos-ui-components-lib 10.4.75 → 10.4.76

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
-import DateService from "../../utils/DateService";
-
-if (typeof document !== "undefined") {
-  if (!document.getElementById("feature-spin-style")) {
-    const style = document.createElement("style");
-    style.id = "feature-spin-style";
-    style.textContent =
-      "@keyframes feature-spin { to { transform: rotate(360deg); } }";
-    document.head.appendChild(style);
-  }
-}
+import {
+  CARD_BORDER,
+  CARD_SELECTED_BORDER,
+  CARD_SELECTED_SHADOW,
+  CalendarIcon,
+  CrownIcon,
+  DestinationIcon,
+  OriginIcon,
+  formatDepartureTime,
+  formatTravelDate,
+  setNodeText,
+} from "./featureServiceShared";
 
 const HARDCODED_OPERATORS = [
   {
@@ -34,6 +35,10 @@ const HARDCODED_OPERATORS = [
   },
 ];
 const expandedStateMap: Record<string, boolean> = {};
+// Selected operator card per serviceItem.id (no hooks — same pattern as expandedStateMap)
+const selectedCardMap: Record<string, string | null> = {};
+// Whether the "select a card" error is visible per serviceItem.id
+const selectErrorMap: Record<string, boolean> = {};
 
 const FeatureServiceUi = ({
   serviceItem,
@@ -55,6 +60,7 @@ const FeatureServiceUi = ({
   onTimeDropdownToggle,
   wowDealData = undefined,
 }) => {
+  console.log("🚀 ~ FeatureServiceUi ~ wowDealData:", wowDealData);
   // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
   const operators =
     wowDealData?.services?.length > 0
@@ -123,23 +129,112 @@ const FeatureServiceUi = ({
         .sort((a, b) => a.final_price - b.final_price)
     : services;
 
-  // The selected price (final and original) from the cheapest service in the active slot
-  const selectedSlotService = servicesInActiveSlot?.[0];
-  const displayFinalPrice = selectedSlotService
-    ? selectedSlotService.final_price
-    : finalPrice;
-  const displayOriginalPrice = selectedSlotService
-    ? selectedSlotService.original_price
-    : originalPrice;
-  const displaySavingsPercent =
-    selectedSlotService && selectedSlotService.original_price
-      ? Math.round(
-          ((selectedSlotService.original_price -
-            selectedSlotService.final_price) /
-            selectedSlotService.original_price) *
-            100,
-        )
-      : savingsPercent;
+  // All services in the deal window (time slot dropdown is disabled),
+  // cheapest first, then by departure time.
+  const sortedServices = [...services].sort(
+    (a, b) =>
+      (a.final_price ?? 0) - (b.final_price ?? 0) ||
+      commonService.timeToMinutes(a.departure_time) -
+        commonService.timeToMinutes(b.departure_time),
+  );
+
+  // Cards shown in the middle column — scrollable when there are more than 3
+  const serviceCards: any[] =
+    sortedServices.length > 0
+      ? sortedServices.map((s: any, idx: number) => ({
+          key: String(
+            s?.id ??
+              s?.service_id ??
+              `${s?.operator_name}-${s?.departure_time}-${idx}`,
+          ),
+          logo: s.operator_logo_url,
+          name: s.operator_name,
+          time: s.departure_time,
+          price: s.final_price,
+          seatsAvailable: `¡Solo quedan ${s.available_seats}!`,
+          service: s,
+        }))
+      : operators.map((op: any, idx: number) => ({
+          ...op,
+          key: `fallback-${idx}`,
+          price: op.price ?? finalPrice,
+          service: null,
+        }));
+  const hasCardScroll = serviceCards.length > 3;
+
+  // Default to the first (cheapest) card when nothing is selected yet,
+  // or when the previous selection is no longer in the list (data refresh)
+  if (
+    serviceCards.length > 0 &&
+    !serviceCards.some((c) => c.key === selectedCardMap[serviceItem.id])
+  ) {
+    selectedCardMap[serviceItem.id] = serviceCards[0].key;
+  }
+  const selectedCard = serviceCards.find(
+    (c) => c.key === selectedCardMap[serviceItem.id],
+  );
+  const isSelectErrorVisible =
+    !selectedCard && !!selectErrorMap[serviceItem.id];
+
+  const getPriceInfo = (svc: any) =>
+    svc
+      ? {
+          final: svc.final_price,
+          original: svc.original_price,
+          savings: svc.original_price
+            ? Math.round(
+                ((svc.original_price - svc.final_price) / svc.original_price) *
+                  100,
+              )
+            : savingsPercent,
+        }
+      : { final: finalPrice, original: originalPrice, savings: savingsPercent };
+
+  // Price shown: the selected card's service, otherwise the cheapest service
+  const selectedSlotService = selectedCard?.service || sortedServices[0];
+  const {
+    final: displayFinalPrice,
+    original: displayOriginalPrice,
+    savings: displaySavingsPercent,
+  } = getPriceInfo(selectedSlotService);
+
+  const handleCardSelect = (key: string) => {
+    selectedCardMap[serviceItem.id] = key;
+    selectErrorMap[serviceItem.id] = false;
+    if (typeof document === "undefined") return;
+
+    const container = document.getElementById(
+      `feature-cards-${serviceItem.id}`,
+    );
+    container
+      ?.querySelectorAll<HTMLElement>("[data-card-key]")
+      .forEach((node) => {
+        const isSelected = node.dataset.cardKey === key;
+        node.style.border = isSelected ? CARD_SELECTED_BORDER : CARD_BORDER;
+        node.style.boxShadow = isSelected ? CARD_SELECTED_SHADOW : "none";
+        const check = node.querySelector<HTMLElement>("[data-card-check]");
+        if (check) check.style.display = isSelected ? "flex" : "none";
+      });
+
+    const card = serviceCards.find((c) => c.key === key);
+    const price = getPriceInfo(card?.service || sortedServices[0]);
+    setNodeText(
+      document.getElementById(`feature-final-price-${serviceItem.id}`),
+      commonService.currencyRounded(price.final * ticketQuantity),
+    );
+    setNodeText(
+      document.getElementById(`feature-original-price-${serviceItem.id}`),
+      commonService.currencyRounded(price.original * ticketQuantity),
+    );
+    document
+      .querySelectorAll(`[data-feature-savings="${serviceItem.id}"]`)
+      .forEach((node) => setNodeText(node, String(price.savings)));
+
+    const errorNode = document.getElementById(
+      `feature-select-error-${serviceItem.id}`,
+    );
+    if (errorNode) errorNode.style.display = "none";
+  };
 
   // The label shown on the dropdown button
 
@@ -147,14 +242,17 @@ const FeatureServiceUi = ({
     activeSlot?.label || `${dealWindowFrom} y ${dealWindowTo}`;
   // activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
 
-  const currentWindowFrom = activeSlot
-    ? commonService.minutesToTime(activeSlot.start)
-    : dealWindowFrom;
-  const currentWindowTo = activeSlot
-    ? commonService.minutesToTime(
-        activeSlot.end === 1440 ? 1439 : activeSlot.end,
-      )
-    : dealWindowTo;
+  // Time slot dropdown is disabled, so use the full deal window
+  const currentWindowFrom = dealWindowFrom;
+  const currentWindowTo = dealWindowTo;
+  // const currentWindowFrom = activeSlot
+  //   ? commonService.minutesToTime(activeSlot.start)
+  //   : dealWindowFrom;
+  // const currentWindowTo = activeSlot
+  //   ? commonService.minutesToTime(
+  //       activeSlot.end === 1440 ? 1439 : activeSlot.end,
+  //     )
+  //   : dealWindowTo;
 
   if (expandedStateMap[serviceItem.id] === undefined) {
     expandedStateMap[serviceItem.id] = true;
@@ -241,7 +339,13 @@ const FeatureServiceUi = ({
                 fontSize: "12px",
               }}
             >
-              <span>AHORRAS {displaySavingsPercent}%</span>
+              <span>
+                AHORRAS{" "}
+                <span data-feature-savings={serviceItem.id}>
+                  {displaySavingsPercent}
+                </span>
+                %
+              </span>
             </div>
           </div>
           <div
@@ -279,8 +383,23 @@ const FeatureServiceUi = ({
         >
           <div className="grid grid-cols-[27%_46%_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 items-center gap-[6px]">
+            <div className="flex flex-col gap-[14px] mb-[16px] pr-[22px]">
+              {/* mt-auto here + mt-auto on "Precio Remate" centers origin/destination/date vertically */}
+              <div className="mt-auto flex flex-col gap-[12px]">
+                <div className="flex items-center gap-[12px]">
+                  <OriginIcon />
+                  <span className="text-[16px] bold-text text-white tracking-wide">
+                    {cityOrigin?.label.split(",")[0]}
+                  </span>
+                </div>
+                <div className="flex items-center gap-[12px]">
+                  <DestinationIcon />
+                  <span className="text-[16px] bold-text text-white tracking-wide">
+                    {cityDestination?.label.split(",")[0]}
+                  </span>
+                </div>
+              </div>
+              {/* <div className="flex items-center gap-[6px]">
                 <span className="text-[16px] bold-text text-white tracking-wide">
                   {cityOrigin?.label.split(",")[0]}
                 </span>
@@ -288,9 +407,9 @@ const FeatureServiceUi = ({
                 <span className="text-[16px] bold-text text-white tracking-wide">
                   {cityDestination?.label.split(",")[0]}
                 </span>
-              </div>
+              </div> */}
 
-              <div
+              {/* <div
                 className="flex items-center w-fit rounded-[6px] px-[8px] py-[4px] gap-[6px] "
                 style={{
                   border: "1px solid rgb(54, 60, 72)",
@@ -301,9 +420,14 @@ const FeatureServiceUi = ({
                   {renderIcon("flexibleIcon", "14px")}
                 </div>
                 <span className="text-[12px] text-white">Salida flexible</span>
-              </div>
+              </div> */}
 
-              <div className="flex flex-col gap-[4px] mt-[4px]">
+              <div className="flex flex-col gap-[4px]">
+                {/* Static deal window (time slot dropdown disabled below)
+                <span className="text-[14px] font-bold leading-none text-white tracking-wide whitespace-nowrap">
+                  Entre {dealWindowFrom} y {dealWindowTo}
+                </span> */}
+                {/* Time slot dropdown — disabled for now, kept for reference
                 <div
                   className="kupos-time-dd relative"
                   tabIndex={0}
@@ -390,31 +514,29 @@ const FeatureServiceUi = ({
                     </>
                   )}
                 </div>
+                */}
 
-                <div className="text-[13px] text-[#9b9b9b]">
-                  {travelDate
-                    ? (() => {
-                        const dayName = DateService.getDayNameFromDate(
-                          travelDate,
-                          "yyyy-mm-dd",
-                          "full",
-                        );
-                        const day = parseInt(
-                          DateService.getDateFromDate(travelDate, "yyyy-mm-dd"),
-                          10,
-                        );
-                        const monthName = DateService.getMonthNameFromDate(
-                          travelDate,
-                          "yyyy-mm-dd",
-                          "full",
-                        );
-                        return `${dayName.charAt(0).toUpperCase() + dayName.slice(1)} ${day} de ${monthName}`;
-                      })()
-                    : "Viernes 23 de mayo"}
+                <div className="flex items-center gap-[12px] text-[13px] text-white">
+                  <CalendarIcon />
+                  <span>{formatTravelDate(travelDate)}</span>
                 </div>
               </div>
 
-              <div className="flex flex-col items-start gap-[12px] text-[13px] mt-[6px]">
+              <div className="mt-auto flex items-center gap-[12px]">
+                <div className="shrink-0">
+                  {renderIcon("sheildIcon", "24px")}
+                </div>
+                <div className="flex flex-col gap-[2px]">
+                  <span className="bold-text text-[13px] text-white">
+                    Precio Remate
+                  </span>
+                  <span className="text-[11px] text-[#dcdcdc]">
+                    Sin cambios, sin cancelación
+                  </span>
+                </div>
+              </div>
+
+              {/* <div className="flex flex-col items-start gap-[12px] text-[13px] mt-[6px]">
                 <div className="flex items-start gap-[10px]">
                   <div className="mt-[2px] opacity-80">
                     {renderIcon("confirmarIcon", "20px")}
@@ -431,70 +553,108 @@ const FeatureServiceUi = ({
                     Si nadie confirma, <br /> te devolvemos tu dinero
                   </span>
                 </div>
-              </div>
+              </div> */}
             </div>
 
             {/* MIDDLE: competing operators + viewers */}
-            <div className="min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
+            <div className="feature-cards-scroll min-w-0 overflow-x-auto 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-[13px]">
-                  {servicesInActiveSlot.length > 0
-                    ? servicesInActiveSlot.length
+                  {sortedServices.length > 0
+                    ? sortedServices.length
                     : operatorsCompetingCount}{" "}
-                  operadores compitiendo por tu compra
+                  ofertas compitiendo por tu compra
                 </div>
               </div>
 
               <div
-                className="grid items-stretch gap-[14px]"
+                id={`feature-cards-${serviceItem.id}`}
+                className="feature-cards-scroll flex w-full items-stretch gap-[14px] overflow-x-auto"
                 style={{
-                  gridTemplateColumns: `repeat(${Math.min(
-                    servicesInActiveSlot.length || operators.length,
-                    3,
-                  )}, minmax(80px, 1fr))`,
+                  justifyContent: hasCardScroll ? "flex-start" : "center",
+                  // room for the crown badge that sits above the selected card
+                  paddingTop: "12px",
+                  paddingBottom: 0,
+                  scrollbarWidth: "none",
                 }}
               >
-                {(servicesInActiveSlot.length > 0
-                  ? servicesInActiveSlot.slice(0, 3).map((s: any) => ({
-                      logo: s.operator_logo_url,
-                      name: s.operator_name,
-                      time: s.departure_time,
-                      seatsAvailable: `${s.available_seats} disponibles`,
-                    }))
-                  : operators
-                ).map((op, idx) => (
-                  <div
-                    key={idx}
-                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
-                    style={{
-                      // border: "1px solid #363c48",
-                      // backgroundColor: "#fff",
-                      border: "1px solid #363c48",
-                      backgroundColor: "#1a202e",
-                      padding: "25px 10px",
-                    }}
-                  >
-                    <img
-                      src={op.logo}
-                      alt={op.name}
-                      onError={(e) => {
-                        e.currentTarget.src =
-                          serviceItem?.operator_details?.[0] ||
-                          "/images/service-list/bus-icon.svg";
+                {serviceCards.map((op) => {
+                  const isSelected = op.key === selectedCard?.key;
+                  return (
+                    <div
+                      key={op.key}
+                      data-card-key={op.key}
+                      role="button"
+                      tabIndex={0}
+                      aria-pressed={isSelected}
+                      onClick={() => handleCardSelect(op.key)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleCardSelect(op.key);
+                        }
                       }}
-                      className={`h-[24px] max-w-full object-contain`}
-                    />
-                    <span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
-                      {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>
+                      className="relative flex min-w-0 cursor-pointer flex-col items-center justify-center gap-[8px] rounded-[8px] outline-none"
+                      style={{
+                        // 3 cards visible; the rest scroll horizontally
+                        flex: "0 0 calc((100% - 28px) / 3)",
+                        minWidth: "80px",
+                        border: isSelected ? CARD_SELECTED_BORDER : CARD_BORDER,
+                        boxShadow: isSelected ? CARD_SELECTED_SHADOW : "none",
+                        backgroundColor: "#1a202e",
+                        padding: "20px 10px 16px",
+                        borderRadius: "12px",
+                        transition:
+                          "border-color 150ms ease, box-shadow 150ms ease",
+                      }}
+                    >
+                      {/* Crown badge on the selected card */}
+                      <span
+                        data-card-check="true"
+                        className="absolute items-center justify-center"
+                        style={{
+                          display: isSelected ? "flex" : "none",
+                          top: "-9px",
+                          right: "7px",
+                          width: "32px",
+                          height: "20px",
+                          borderRadius: "6px",
+                          backgroundColor: "#FF5C60",
+                        }}
+                      >
+                        <CrownIcon />
+                      </span>
+                      <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`}
+                      />
+                      <span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
+                        {op.name}
+                      </span>
+                      <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[14px] py-[4px] rounded-[6px] bold-text whitespace-nowrap">
+                        <span>{commonService.currencyRounded(op.price)}</span>
+                      </div>
+                      <span className="bold-text text-[12px] text-white whitespace-nowrap">
+                        {formatDepartureTime(op?.time)}
+                      </span>
+                      <span className="bold-text text-[10px] text-white whitespace-nowrap">
+                        {op?.seatsAvailable}
+                      </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] text-[white]">
+                        {op?.seatsAvailable}
+                      </span> */}
                     </div>
-                    <span className="text-[10px] mt-[6px] text-[white]">
-                      {op?.seatsAvailable}
-                    </span>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
 
               <div
@@ -554,7 +714,10 @@ const FeatureServiceUi = ({
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {displaySavingsPercent}% OFF
+                  <span data-feature-savings={serviceItem.id}>
+                    {displaySavingsPercent}
+                  </span>
+                  % OFF
                 </span>
                 {/* <span className="text-[#666] text-[14px] line-through">
                   $10.000
@@ -563,9 +726,11 @@ const FeatureServiceUi = ({
                   className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
                   style={{ position: "relative" }}
                 >
-                  {commonService.currencyRounded(
-                    displayOriginalPrice * ticketQuantity,
-                  )}
+                  <span id={`feature-original-price-${serviceItem.id}`}>
+                    {commonService.currencyRounded(
+                      displayOriginalPrice * ticketQuantity,
+                    )}
+                  </span>
                   <span
                     style={{
                       position: "absolute",
@@ -581,7 +746,10 @@ const FeatureServiceUi = ({
                     }}
                   />
                 </span>
-                <span className="text-white bold-text text-[28px] leading-none">
+                <span
+                  id={`feature-final-price-${serviceItem.id}`}
+                  className="text-white bold-text text-[28px] leading-none"
+                >
                   {commonService.currencyRounded(
                     displayFinalPrice * ticketQuantity,
                   )}
@@ -643,6 +811,28 @@ const FeatureServiceUi = ({
                   if (!btn) return;
                   btn.onclick = () => {
                     if (btn.disabled) return;
+
+                    // Require an operator card to be selected before booking
+                    const currentCard = serviceCards.find(
+                      (c) => c.key === selectedCardMap[serviceItem.id],
+                    );
+                    if (!currentCard) {
+                      selectErrorMap[serviceItem.id] = true;
+                      const errorNode = document.getElementById(
+                        `feature-select-error-${serviceItem.id}`,
+                      );
+                      if (errorNode) errorNode.style.display = "block";
+                      return;
+                    }
+                    const chosenService = currentCard.service;
+                    // Selected service first so consumers reading [0] get the chosen one
+                    const orderedServices = chosenService
+                      ? [
+                          chosenService,
+                          ...sortedServices.filter((s) => s !== chosenService),
+                        ]
+                      : sortedServices;
+
                     btn.disabled = true;
                     btn.style.cursor = "not-allowed";
                     btn.style.opacity = "0.85";
@@ -657,7 +847,8 @@ const FeatureServiceUi = ({
                     onBookButtonPress?.(
                       ticketQuantity,
                       serviceItem,
-                      servicesInActiveSlot,
+                      orderedServices,
+                      chosenService,
                     );
                   };
                 }}
@@ -697,6 +888,17 @@ const FeatureServiceUi = ({
                   />
                 </span>
               </button>
+              <span
+                id={`feature-select-error-${serviceItem.id}`}
+                role="alert"
+                className="text-[11px] text-[#FF5C60] text-center leading-[14px]"
+                style={{
+                  display: isSelectErrorVisible ? "block" : "none",
+                  marginTop: "-4px",
+                }}
+              >
+                Selecciona un horario para continuar
+              </span>
             </div>
 
             <div