kupos-ui-components-lib 9.10.8 → 9.10.10

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -145,6 +145,7 @@ function ServiceItemPB({
   isFlores,
   operatorLabel,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -671,8 +672,12 @@ function ServiceItemPB({
                     hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
                   ...(hasOfferText || hasDpEnabled
                     ? {
-                        borderLeft: isSoldOut ? "" : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
-                        borderRight: isSoldOut ? "" : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
+                        borderLeft: isSoldOut
+                          ? ""
+                          : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
+                        borderRight: isSoldOut
+                          ? ""
+                          : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
                         borderRadius: "0 0 18px 18px",
                         boxSizing: "border-box",
                       }

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -3,13 +3,6 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
 import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 
-const TIME_SLOTS = [
-  "Entre 07:00 AM y 10:00 AM",
-  "Entre 11:00 AM y 14:00 AM",
-  "Entre 15:00 PM y 18:00 PM",
-  "Entre 19:00 PM y 22:00 PM",
-];
-
 const HARDCODED_OPERATORS = [
   {
     logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
@@ -46,7 +39,7 @@ const FeatureServiceUiMobile = ({
   onIncreaseTicketQuantity,
   onDecreaseTicketQuantity,
   onBookButtonPress,
-  selectedTimeSlot = TIME_SLOTS[0],
+  selectedTimeSlot,
   onTimeSlotChange,
   isTimeDropdownOpen,
   onTimeDropdownToggle,
@@ -56,11 +49,11 @@ const FeatureServiceUiMobile = ({
   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`,
-      }))
+          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;
@@ -76,6 +69,7 @@ const FeatureServiceUiMobile = ({
   const dealWindowFrom = wowDealData?.deal_window_from || "07:00";
   const dealWindowTo = wowDealData?.deal_window_to || "10:00";
   const travelDate = wowDealData?.travel_date;
+  const serviceWindowHours = wowDealData?.service_window_hours;
 
   // Calculate countdown seconds from expires_at ISO timestamp
   const getCountdownSeconds = () => {
@@ -86,9 +80,58 @@ const FeatureServiceUiMobile = ({
     return seconds;
   };
 
-  // Generate time slot from deal window
-  const dynamicTimeSlot = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
-  const displayTimeSlot = selectedTimeSlot || dynamicTimeSlot;
+  // Generate dynamic time slots from deal window + service window hours
+  const allTimeSlots = serviceWindowHours
+    ? commonService.generateTimeSlots(
+        dealWindowFrom,
+        dealWindowTo,
+        serviceWindowHours,
+      )
+    : [];
+
+  // Filter slots to only those that have at least one service
+  const services: any[] = wowDealData?.services || [];
+  const availableTimeSlots = allTimeSlots.filter((slot) =>
+    services.some((s) => {
+      const depMin = commonService.timeToMinutes(s.departure_time);
+      return depMin >= slot.start && depMin < slot.end;
+    }),
+  );
+
+  // Active slot: the one matching selectedTimeSlot label, or the first available
+  const activeSlot =
+    availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
+    availableTimeSlots[0];
+
+  // Services that fall within the active slot, sorted by final price ascending
+  const servicesInActiveSlot = activeSlot
+    ? services
+        .filter((s) => {
+          const depMin = commonService.timeToMinutes(s.departure_time);
+          return depMin >= activeSlot.start && depMin < activeSlot.end;
+        })
+        .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;
+
+  // The label shown on the dropdown button
+  const departureRange =
+    activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
 
   const isItemExpanded =
     serviceItem.id === isFeatureDropDownExpand ||
@@ -97,22 +140,6 @@ const FeatureServiceUiMobile = ({
 
   const canDecreaseTicketQuantity = ticketQuantity > 1;
 
-  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",
@@ -157,12 +184,13 @@ const FeatureServiceUiMobile = ({
       //   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]"
-        }`}
+       ${
+         serviceItem?.is_direct_trip ||
+         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+         showTopLabel
+           ? "mt-[24px]"
+           : "mt-[20px]"
+       }`}
     >
       <div
         // className="shadow-service"
@@ -187,7 +215,7 @@ const FeatureServiceUiMobile = ({
                 fontSize: "10px",
               }}
             >
-              <span>AHORRAS {savingsPercent}%</span>
+              <span>AHORRAS {displaySavingsPercent}%</span>
             </div>
           </div>
         </div>
@@ -202,8 +230,9 @@ const FeatureServiceUiMobile = ({
                   <img
                     src={serviceItem.icons?.whiteOrigin}
                     alt="origin"
-                    className={`w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""
-                      }`}
+                    className={`w-[13px] h-[13px] shrink-0 ${
+                      isSoldOut ? "grayscale" : ""
+                    }`}
                   />
 
                   <span className="text-[14px] bold-text">
@@ -215,8 +244,9 @@ const FeatureServiceUiMobile = ({
                   <img
                     src={serviceItem.icons?.whiteDestination}
                     alt="destination"
-                    className={`w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""
-                      }`}
+                    className={`w-[13px] h-[13px] shrink-0 ${
+                      isSoldOut ? "grayscale" : ""
+                    }`}
                     style={{ opacity: isSoldOut ? 0.5 : 1 }}
                   />
 
@@ -226,10 +256,7 @@ const FeatureServiceUiMobile = ({
                 </div>
 
                 <div className="flex items-center gap-[6px]">
-                  <div className="bold-text text-[12px] text-white">
-                    {departureRange}
-                  </div>
-                  {/* <div
+                  <div
                     className="kupos-time-dd relative"
                     tabIndex={0}
                     onBlur={(e) => {
@@ -248,7 +275,7 @@ const FeatureServiceUiMobile = ({
                       }
                       className="flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]"
                     >
-                      <span>{displayTimeSlot}</span>
+                      <span>{departureRange}</span>
                       <img
                         src={serviceItem?.icons?.downArrow}
                         alt="down arrow"
@@ -274,26 +301,62 @@ const FeatureServiceUiMobile = ({
                             padding: "6px 0",
                           }}
                         >
-                          {TIME_SLOTS.map((slot) => {
-                            const isActive = slot === selectedTimeSlot;
+                          {availableTimeSlots.map((slot) => {
+                            const isActive =
+                              slot.label === selectedTimeSlot ||
+                              slot === activeSlot;
+                            // Count services in this slot
+                            const count = services.filter((s) => {
+                              const depMin = commonService.timeToMinutes(
+                                s.departure_time,
+                              );
+                              return depMin >= slot.start && depMin < slot.end;
+                            }).length;
                             return (
                               <button
-                                key={slot}
+                                key={slot.label}
                                 type="button"
                                 onClick={() => {
-                                  onTimeSlotChange?.(slot);
+                                  onTimeSlotChange?.(slot.label);
                                   onTimeDropdownToggle?.(null);
+                                  // const slotServices = services.filter((s) => {
+                                  //   const depMin = commonService.timeToMinutes(
+                                  //     s.departure_time,
+                                  //   );
+                                  //   return (
+                                  //     depMin >= slot.start && depMin < slot.end
+                                  //   );
+                                  // });
+                                  // console.log(
+                                  //   "Selected slot label:",
+                                  //   slot.label,
+                                  // );
+                                  // console.log(
+                                  //   "Services in selected slot:",
+                                  //   slotServices,
+                                  // );
                                 }}
-                                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]"}`}
+                                className={`flex w-full cursor-pointer items-center justify-between 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>
+                                <span>{slot.label}</span>
+                                {count > 0 && (
+                                  <span
+                                    className={`text-[11px] rounded-full px-[6px] py-[2px] font-bold ${
+                                      isActive
+                                        ? "bg-[white] text-[#FF5C60]"
+                                        : "bg-[#FF5C60] text-[white]"
+                                    }`}
+                                  >
+                                    {count}
+                                  </span>
+                                )}
                               </button>
                             );
                           })}
                         </div>
                       </>
                     )}
-                  </div> */}
+                  </div>
                 </div>
               </div>
             </div>
@@ -305,14 +368,25 @@ const FeatureServiceUiMobile = ({
                 className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
                 style={{ textAlign: "center" }}
               >
-                {operatorsCompetingCount} operadores compitiendo <br />
+                {servicesInActiveSlot.length > 0
+                  ? servicesInActiveSlot.length
+                  : operatorsCompetingCount}{" "}
+                operadores compitiendo <br />
                 por tu compra
               </span>
               <div
                 className="flex gap-[8px] text-[white]"
                 style={{ width: "100%" }}
               >
-                {operators.map((op, idx) => (
+                {(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]"
@@ -329,10 +403,13 @@ const FeatureServiceUiMobile = ({
                       src={op.logo}
                       alt={op.name}
                       onError={(e) => {
-                        e.currentTarget.src = serviceItem?.operator_details?.[0] || "/images/service-list/bus-icon.svg";
+                        e.currentTarget.src =
+                          serviceItem?.operator_details?.[0] ||
+                          "/images/service-list/bus-icon.svg";
                       }}
-                      className={`h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""
-                        }`}
+                      className={`h-[24px] max-w-full object-contain ${
+                        isSoldOut ? "grayscale" : ""
+                      }`}
                     />
                     <span className="text-[12px] truncate max-w-full text-center ">
                       {op.name}
@@ -403,10 +480,11 @@ const FeatureServiceUiMobile = ({
                     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"
-                      }`}
+                    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>
@@ -438,7 +516,7 @@ const FeatureServiceUiMobile = ({
                     className="text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative"
                     style={{ position: "relative" }}
                   >
-                    {`$${((originalPrice * ticketQuantity)).toLocaleString()}`}
+                    {`$${(displayOriginalPrice * ticketQuantity).toLocaleString()}`}
                     <span
                       style={{
                         position: "absolute",
@@ -455,7 +533,7 @@ const FeatureServiceUiMobile = ({
                     />
                   </span>
                   <span className="text-[white] bold-text text-[24px] leading-none mt-[4px]">
-                    {`$${(finalPrice * ticketQuantity).toLocaleString()}`}
+                    {`$${(displayFinalPrice * ticketQuantity).toLocaleString()}`}
                   </span>
                 </div>
                 <span
@@ -465,7 +543,7 @@ const FeatureServiceUiMobile = ({
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {savingsPercent}% OFF
+                  {displaySavingsPercent}% OFF
                 </span>
               </div>
 
@@ -516,8 +594,9 @@ const FeatureServiceUiMobile = ({
             }}
           >
             <div
-              className={` text-[12px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
-                }`}
+              className={` text-[12px] ${
+                isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
+              }`}
               style={{ transition: "padding 300ms ease-in-out" }}
             >
               <span className="bold-text">¿Cómo funciona?</span>
@@ -557,7 +636,9 @@ const FeatureServiceUiMobile = ({
             <span className="text-[white]">términa en</span>{" "}
             <span
               className="bold-text text-end"
-              ref={(node) => commonService.startCountdown(node, getCountdownSeconds())}
+              ref={(node) =>
+                commonService.startCountdown(node, getCountdownSeconds())
+              }
               style={{
                 fontVariantNumeric: "tabular-nums",
                 display: "inline-block",