kupos-ui-components-lib 10.4.75 → 10.4.77

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -2,6 +2,18 @@ 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";
+import {
+  CARD_BORDER,
+  CARD_SELECTED_BORDER,
+  CARD_SELECTED_SHADOW,
+  CalendarIcon,
+  CrownIcon,
+  DestinationIcon,
+  OriginIcon,
+  formatDepartureTime,
+  formatTravelDate,
+  setNodeText,
+} from "../FeatureServiceUI/featureServiceShared";
 
 const HARDCODED_OPERATORS = [
   {
@@ -24,6 +36,11 @@ const HARDCODED_OPERATORS = [
   },
 ];
 
+// Selected operator card per serviceItem.id (no hooks — module-level state)
+const selectedCardMap: Record<string, string | null> = {};
+// Whether the "select a card" error is visible per serviceItem.id
+const selectErrorMap: Record<string, boolean> = {};
+
 const FeatureServiceUiMobile = ({
   serviceItem,
   showTopLabel,
@@ -104,6 +121,7 @@ const FeatureServiceUiMobile = ({
     availableTimeSlots[0];
 
   // Services that fall within the active slot, sorted by final price ascending
+  // (only used by the disabled time slot dropdown)
   const servicesInActiveSlot = activeSlot
     ? services
         .filter((s) => {
@@ -113,36 +131,127 @@ const FeatureServiceUiMobile = ({
         .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 — 3 visible, the rest scroll horizontally (scrollbar hidden)
+  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-m-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";
+        // Crown stays on the lowest fare card — selection only moves the border
+      });
+
+    const card = serviceCards.find((c) => c.key === key);
+    const price = getPriceInfo(card?.service || sortedServices[0]);
+    setNodeText(
+      document.getElementById(`feature-m-final-price-${serviceItem.id}`),
+      commonService.currencyRounded(price.final * ticketQuantity),
+    );
+    setNodeText(
+      document.getElementById(`feature-m-original-price-${serviceItem.id}`),
+      commonService.currencyRounded(price.original * ticketQuantity),
+    );
+    document
+      .querySelectorAll(`[data-feature-m-savings="${serviceItem.id}"]`)
+      .forEach((node) => setNodeText(node, String(price.savings)));
+
+    const errorNode = document.getElementById(
+      `feature-m-select-error-${serviceItem.id}`,
+    );
+    if (errorNode) errorNode.style.display = "none";
+  };
 
   // The label shown on the dropdown button (24h format, e.g. "Entre 16:00 y 20:00")
   const departureRange =
     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;
 
   const isItemExpanded =
     serviceItem.id === isFeatureDropDownExpand ||
@@ -229,7 +338,13 @@ const FeatureServiceUiMobile = ({
                 fontSize: "10px",
               }}
             >
-              <span>AHORRAS {displaySavingsPercent}%</span>
+              <span>
+                AHORRAS{" "}
+                <span data-feature-m-savings={serviceItem.id}>
+                  {displaySavingsPercent}
+                </span>
+                %
+              </span>
             </div>
           </div>
         </div>
@@ -239,10 +354,46 @@ const FeatureServiceUiMobile = ({
         >
           <div className="flex flex-col gap-[10px]">
             <div className=" text-[white]">
+              {/* Origin / destination / date, stacked (same as desktop) */}
+              <div
+                className="flex flex-col gap-[10px]"
+                style={{ filter: isSoldOut ? "grayscale(1)" : undefined }}
+              >
+                <div className="flex items-center gap-[10px]">
+                  <OriginIcon size={16} />
+                  <span className="text-[14px] bold-text">
+                    {cityOrigin?.label.split(",")[0]}
+                  </span>
+                </div>
+                <div className="flex items-center gap-[10px]">
+                  <DestinationIcon size={16} />
+                  <span className="text-[14px] bold-text">
+                    {cityDestination?.label.split(",")[0]}
+                  </span>
+                </div>
+                <div className="flex items-center gap-[10px] text-[13px]">
+                  <CalendarIcon size={16} />
+                  <span>{formatTravelDate(travelDate)}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-[10px] mt-[14px]">
+                <div className="shrink-0">
+                  {renderIcon("sheildIcon", "20px")}
+                </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>
+
+              {/* Previous origin / destination row with the time slot dropdown — disabled, kept for reference
               <div className="flex flex-col gap-[6px] relative">
-                {/* Origin / Destination row with connecting-line icons */}
                 <div className="flex items-start gap-[10px]">
-                  {/* Icon column with connecting line */}
                   <div
                     className="flex flex-col items-center shrink-0"
                     style={{ paddingTop: "2px" }}
@@ -268,7 +419,6 @@ const FeatureServiceUiMobile = ({
                       style={{ opacity: isSoldOut ? 0.5 : 1 }}
                     />
                   </div>
-                  {/* Text column */}
                   <div className="flex flex-col gap-[6px]">
                     <div className="flex items-center gap-[6px]">
                       <span className="text-[14px] bold-text">
@@ -331,7 +481,6 @@ const FeatureServiceUiMobile = ({
                               const isActive =
                                 slot.label === selectedTimeSlot ||
                                 slot === activeSlot;
-                              // Count services in this slot
                               const count = services.filter((s) => {
                                 const depMin = commonService.timeToMinutes(
                                   s.departure_time,
@@ -370,11 +519,9 @@ const FeatureServiceUiMobile = ({
                       )}
                     </div>
                   </div>
-                  {/* end text column */}
                 </div>
-                {/* end flex items-start row */}
               </div>
-              {/* end flex-col gap-6 relative */}
+              */}
             </div>
             {/* end text-[white] */}
 
@@ -382,46 +529,72 @@ const FeatureServiceUiMobile = ({
 
             <div>
               <span
-                className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
+                className="block w-full text-[14px] bold-text text-[white] mb-[2px]"
                 style={{ textAlign: "center" }}
               >
-                {servicesInActiveSlot.length > 0
-                  ? servicesInActiveSlot.length
+                {sortedServices.length > 0
+                  ? sortedServices.length
                   : operatorsCompetingCount}{" "}
-                operadores compitiendo <br />
+                ofertas compitiendo <br />
                 por tu compra
               </span>
-              {/* Operator boxes: single full-width box when 1 operator, else flex row */}
+              {/* Operator cards: cheapest first, 3 visible, the rest scroll */}
               <div
-                className="flex gap-[8px] text-[white]"
-                style={{ width: "100%", justifyContent: "center" }}
+                id={`feature-m-cards-${serviceItem.id}`}
+                className="feature-cards-scroll flex w-full items-stretch gap-[8px] overflow-x-auto text-[white]"
+                style={{
+                  justifyContent: hasCardScroll ? "flex-start" : "center",
+                  // room for the crown badge that sits above the selected card
+                  paddingTop: "12px",
+                  scrollbarWidth: "none",
+                }}
               >
-                {(() => {
-                  const displayOps =
-                    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;
-                  const isSingle = displayOps.length === 1;
-                  return displayOps.map((op, idx) => (
+                {serviceCards.map((op, idx) => {
+                  const isSelected = op.key === selectedCard?.key;
+                  // Cards are sorted cheapest first, so index 0 is the lowest fare
+                  const isLowestFare = idx === 0;
+                  return (
                     <div
-                      key={idx}
-                      className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
+                      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="relative flex min-w-0 cursor-pointer flex-col items-center justify-center gap-[6px] outline-none"
                       style={{
-                        flex: isSingle ? "none" : 1,
-                        width: isSingle ? "32%" : undefined,
-                        margin: isSingle ? "0 auto" : undefined,
-                        minWidth: 0,
-                        height: "100px",
-                        border: "1px solid #363c48",
+                        flex: "0 0 calc((100% - 16px) / 3)",
+                        minWidth: "90px",
+                        border: isSelected ? CARD_SELECTED_BORDER : CARD_BORDER,
+                        boxShadow: isSelected ? CARD_SELECTED_SHADOW : "none",
                         backgroundColor: "#1a202e",
-                        padding: "14px 6px",
+                        padding: "16px 6px 12px",
+                        borderRadius: "10px",
+                        transition:
+                          "border-color 150ms ease, box-shadow 150ms ease",
                       }}
                     >
+                      {/* Crown badge — always on the lowest fare card */}
+                      <span
+                        className="absolute items-center justify-center"
+                        style={{
+                          display: isLowestFare ? "flex" : "none",
+                          top: "-12px",
+                          right: "-1px",
+                          width: "30px",
+                          height: "20px",
+                          borderRadius: "6px",
+                          backgroundColor: "#FF5C60",
+                        }}
+                      >
+                        <CrownIcon width={14} height={11} />
+                      </span>
                       <img
                         src={op.logo}
                         alt={op.name}
@@ -441,12 +614,18 @@ const FeatureServiceUiMobile = ({
                       <span className="text-[12px] truncate max-w-full text-center">
                         {op.name}
                       </span>
-                      <span className="text-[11px] whitespace-nowrap">
+                      <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[3px] rounded-[6px] bold-text whitespace-nowrap">
+                        {commonService.currencyRounded(op.price)}
+                      </div>
+                      <span className="bold-text text-[12px] whitespace-nowrap">
+                        {formatDepartureTime(op?.time)}
+                      </span>
+                      <span className="bold-text text-[11px] whitespace-nowrap">
                         {op?.seatsAvailable}
                       </span>
                     </div>
-                  ));
-                })()}
+                  );
+                })}
               </div>
 
               <div
@@ -551,9 +730,11 @@ const FeatureServiceUiMobile = ({
                     className="text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative"
                     style={{ position: "relative" }}
                   >
-                    {commonService.currencyRounded(
-                      displayOriginalPrice * ticketQuantity,
-                    )}
+                    <span id={`feature-m-original-price-${serviceItem.id}`}>
+                      {commonService.currencyRounded(
+                        displayOriginalPrice * ticketQuantity,
+                      )}
+                    </span>
                     <span
                       style={{
                         position: "absolute",
@@ -569,7 +750,10 @@ const FeatureServiceUiMobile = ({
                       }}
                     />
                   </span>
-                  <span className="text-[white] bold-text text-[24px] leading-none mt-[4px]">
+                  <span
+                    id={`feature-m-final-price-${serviceItem.id}`}
+                    className="text-[white] bold-text text-[24px] leading-none mt-[4px]"
+                  >
                     {commonService.currencyRounded(
                       displayFinalPrice * ticketQuantity,
                     )}
@@ -582,7 +766,10 @@ const FeatureServiceUiMobile = ({
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {displaySavingsPercent}% OFF
+                  <span data-feature-m-savings={serviceItem.id}>
+                    {displaySavingsPercent}
+                  </span>
+                  % OFF
                 </span>
               </div>
 
@@ -592,6 +779,28 @@ const FeatureServiceUiMobile = ({
                   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-m-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";
@@ -606,7 +815,8 @@ const FeatureServiceUiMobile = ({
                     onBookButtonPress?.(
                       ticketQuantity,
                       serviceItem,
-                      servicesInActiveSlot,
+                      orderedServices,
+                      chosenService,
                     );
                   };
                 }}
@@ -624,6 +834,16 @@ const FeatureServiceUiMobile = ({
                 />
                 <span className="whitespace-nowrap">¡Lo quiero!</span>
               </button>
+              <span
+                id={`feature-m-select-error-${serviceItem.id}`}
+                role="alert"
+                className="text-[11px] text-[#FF5C60] text-center leading-[14px] mt-[6px]"
+                style={{
+                  display: isSelectErrorVisible ? "block" : "none",
+                }}
+              >
+                Selecciona un horario para continuar
+              </span>
 
               <div
                 className="flex justify-end mt-[10px]"