kupos-ui-components-lib 9.7.8 → 9.7.9

package/src/components/ServiceItem/mobileTypes.ts

@@ -127,7 +127,21 @@ export interface MobileServiceItemProps {
       directoIcon?: string;
       whiteFireIcon?: string
       femaleAnim?:string
-        cancelTicketIcon?: string;
+       thunderAnim?: string
+       personsAnim?: string
+        whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+      empressaIcon?: string,
+      flexibleIcon?: string,
+      listoIcon?: string,
+      precioIcon?: string,
+      confirmarIcon?: string
+      cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
       womenSeatIcon?: string
@@ -136,6 +150,7 @@ export interface MobileServiceItemProps {
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
+  onRemateUiButtonClick?: ()=> void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -199,4 +214,17 @@ export interface MobileServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
+   isFeatureDropDownExpand?: any;
+  setIsFeatureDropDownExpand?: (value: any) => void;
+  ticketQuantity?: number;
+  onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  cityOrigin?: { value: number; label: string };
+  cityDestination?: { value: number; label: string };
+    isNewUi?: boolean
+
+    selectedTimeSlot?: string;
+  onTimeSlotChange?: (slot: string) => void;
+  isTimeDropdownOpen?: string | number | null;
+  onTimeDropdownToggle?: (id?: string | number | null) => void;
 }

package/src/components/ServiceItem/types.ts

@@ -132,11 +132,24 @@ export interface ServiceItemProps {
       whiteFireIcon?: string
       fireIcon?: string
 
+      whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+      empressaIcon?: string,
+      flexibleIcon?: string,
+      listoIcon?: string,
+      precioIcon?: string,
+      confirmarIcon?: string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
+  onRemateUiButtonClick?: ()=>void;
   terminals?: any[];
   t?: (key: string) => string;
   serviceDetailsLoading?: boolean;
@@ -215,6 +228,11 @@ export interface ServiceItemProps {
   isAllinBus?: boolean;
   isExpand?: any;
   setIsExpand?: (value: any) => void;
+  isFeatureDropDownExpand?: any;
+  setIsFeatureDropDownExpand?: (value: any) => void;
+  ticketQuantity?: number;
+  onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
   coachKey?: number
   viewersConfig?: {
     min: number;
@@ -223,8 +241,12 @@ export interface ServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
+  isNewUi?: boolean
   showLoginModal?: any
   isLoggedIn?: any
   showLoginOption?: boolean
-  
+   selectedTimeSlot?: string;
+  onTimeSlotChange?: (slot: string) => void;
+  isTimeDropdownOpen?: string | number | null;
+  onTimeDropdownToggle?: (id?: string | number | null) => void;
 }

package/src/styles.css

@@ -93,6 +93,21 @@
   display: none;
 }
 
+/* Time slot dropdown */
+.kupos-time-dd > summary {
+  list-style: none;
+}
+.kupos-time-dd > summary::-webkit-details-marker {
+  display: none;
+}
+.kupos-time-chevron {
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+.kupos-time-dd[open] .kupos-time-chevron {
+  transform: rotate(180deg);
+}
+
 .hide-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -0,0 +1,525 @@
+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 FeatureServiceUiMobile = ({
+  serviceItem,
+  showTopLabel,
+  colors,
+  isSoldOut,
+  cityOrigin,
+  cityDestination,
+  renderIcon,
+  viewersConfig,
+  isFeatureDropDownExpand,
+  onToggleExpand,
+  ticketQuantity = 1,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onBookButtonPress,
+  selectedTimeSlot = TIME_SLOTS[0],
+  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: "1. Salida flexible",
+      text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+    },
+    {
+      icon: "bus",
+      name: "2. Empresa asignada",
+      text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
+    },
+    {
+      icon: "price",
+      name: "3. Precio garantizado",
+      text: "Mejor precio garantizado. Sin cambios ni cancelación.",
+    },
+    {
+      icon: "ticket",
+      name: "4. ¡Listo!",
+      text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+    },
+  ];
+
+  const FeatureStepIcon = ({ icon }) => {
+    switch (icon) {
+      case "flexible":
+        return renderIcon("flexibleIcon", "20px");
+      case "bus":
+        return renderIcon("empressaIcon", "20px");
+      case "price":
+        return renderIcon("precioIcon", "20px");
+      default:
+        return renderIcon("listoIcon", "20px");
+    }
+  };
+
+  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="shadow-service"
+        style={{
+          border: "1px solid #c0c0c0",
+          padding: "12px",
+          borderRadius: "14px",
+        }}
+      >
+        <div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
+          <div className="flex items-center gap-[10px] mt-[16px]">
+            <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>
+        <div
+          id={`service-card-${serviceItem.id}`}
+          className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
+        >
+          <div className="flex flex-col gap-[10px]">
+            <div className=" text-[white]">
+              <div className="flex flex-col gap-[10px] relative">
+                <div className="flex items-center gap-[6px]">
+                  <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 className="mx-[10px]">→</span>
+                    {cityDestination?.label.split(",")[0]}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    width: "1px",
+                    flex: 1,
+                    backgroundColor: "#fff",
+                    margin: "3px 0",
+                    minHeight: "8px",
+                    position: "absolute",
+                    top: "13px",
+                    left: "7px",
+                  }}
+                />
+                <div className="flex items-center gap-[6px]">
+                  <img
+                    src={serviceItem.icons?.whiteDestination}
+                    alt="destination"
+                    className={`w-[14px] h-[14px] shrink-0 ${
+                      isSoldOut ? "grayscale" : ""
+                    }`}
+                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
+                  />
+                  <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 cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] 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>
+              </div>
+            </div>
+
+            <div className="border-t border-[#363c48] my-[8px]" />
+
+            <div>
+              <span
+                className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
+                style={{ textAlign: "center" }}
+              >
+                3 operadores compitiendo por tu compra
+              </span>
+              <div
+                className="flex gap-[8px] text-[white]"
+                style={{ width: "100%" }}
+              >
+                {operators.map((op, idx) => (
+                  <div
+                    key={idx}
+                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
+                    style={{
+                      flex: 1,
+                      minWidth: 0,
+                      height: "100px",
+                      border: "1px solid #363c48",
+                      backgroundColor: "#1a202e",
+                      padding: "14px 6px",
+                    }}
+                  >
+                    <img
+                      src={serviceItem.operator_details[0]}
+                      alt={op.name}
+                      className={`h-[24px] max-w-full object-contain ${
+                        isSoldOut ? "grayscale" : ""
+                      }`}
+                    />
+                    <span className="text-[12px] truncate max-w-full text-center ">
+                      {serviceItem.operator_details[2]}
+                    </span>
+                    {/* <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
+                      <span>{op?.time}</span>
+                    </div> */}
+                    <span className="text-[11px] mt-[6px] whitespace-nowrap">
+                      {op?.seatsAvailable}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div
+                className="flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]"
+                style={{
+                  border: "1px solid #363c48",
+                  backgroundColor: "#1a202e",
+                  padding: "4px 14px",
+                  borderRadius: "24px",
+                }}
+              >
+                <LottiePlayer
+                  animationData={serviceItem.icons.personsAnim}
+                  width="18px"
+                  height="18px"
+                />
+                <span>
+                  <span className="bold-text text-[white]">
+                    {" "}
+                    <span
+                      className="bold-text"
+                      ref={(node) =>
+                        commonService.startViewerCount(node, viewersConfig)
+                      }
+                      style={{
+                        fontVariantNumeric: "tabular-nums",
+                        color: "#FF5C60",
+                      }}
+                    />{" "}
+                  </span>{" "}
+                  <span className="text-[white]">viendo |</span>{" "}
+                  <span
+                    className="bold-text text-[white]"
+                    ref={(node) =>
+                      commonService.startComprandoCount(node, 4, 16)
+                    }
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  />{" "}
+                  <span className="text-[white]">han comprado</span>
+                </span>
+              </div>
+
+              <div className="mt-[10px] flex flex-col items-center gap-[8px]">
+                <span className="text-[12px] text-[white]">
+                  ¿Cuántos pasajes quieres?
+                </span>
+                <div
+                  className="flex w-[50%] items-center justify-between"
+                  style={{
+                    border: "1px solid #363c48",
+                    backgroundColor: "#1a202e",
+                    padding: "4px 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>
+
+              <div
+                className="mt-[10px] flex justify-between items-center rounded-[14px]"
+                style={{
+                  // height: "80px",
+                  border: "1px solid #363c48",
+                  backgroundColor: "#1a202e",
+                  padding: "14px 10px",
+                }}
+              >
+                <div className="flex flex-col">
+                  <span
+                    className="text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative"
+                    style={{ position: "relative" }}
+                  >
+                    $10.000
+                    <span
+                      style={{
+                        position: "absolute",
+                        left: "-2px",
+                        top: "50%",
+                        width: "calc(80% + 4px)",
+                        height: "1px",
+
+                        backgroundColor: "#FF5C60",
+
+                        transform: "rotate(-10deg)",
+                        transformOrigin: "center",
+                      }}
+                    />
+                  </span>
+                  <span className="text-[white] bold-text text-[28px] leading-none mt-[4px]">
+                    {`$${(4000 * ticketQuantity).toLocaleString()}`}
+                  </span>
+                </div>
+                <span
+                  className="text-[#FF8F45] bold-text text-[26px] leading-tight"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  60% OFF
+                </span>
+              </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-[10px]  justify-center border-none cursor-pointer"
+                style={{
+                  backgroundColor: "#FF5C60",
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  whiteSpace: "nowrap",
+                  width: "100%",
+                }}
+              >
+                <LottiePlayer
+                  animationData={serviceItem.icons.thunderAnim}
+                  width="18px"
+                  height="18px"
+                />
+                <span className="whitespace-nowrap">¡Lo quiero!</span>
+              </button>
+
+              <div
+                className="flex justify-end mt-[10px]"
+                onClick={onToggleExpand}
+              >
+                <img
+                  src={serviceItem?.icons?.downArrow}
+                  alt="down arrow"
+                  className={`transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
+                  style={{
+                    width: "14px",
+                    height: "8px",
+                    filter: "brightness(0) invert(1)",
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {isItemExpanded && (
+          <div
+            className="flex flex-col gap-[10px]"
+            style={{
+              opacity: isItemExpanded ? 1 : 0,
+              transition: "opacity 250ms ease-in-out",
+            }}
+          >
+            <div
+              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>
+
+              <div className="flex flex-col">
+                {HOW_IT_WORKS_STEPS.map((step) => (
+                  <div className="flex items-start gap-[8px] mt-[10px]">
+                    <div>
+                      <FeatureStepIcon icon={step.icon} />
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="bold-text">{step.name}</span>
+                      <span>{step.text}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
+      <div className="absolute -top-[11px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 ">
+        <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
+          <span className="flex items-center">
+            <LottiePlayer
+              animationData={serviceItem.icons.bombAnim}
+              width="14px"
+              height="14px"
+            />
+            <span className="bold-text ml-[5px] text-[white]">
+              Remate&nbsp;
+            </span>{" "}
+            <span className="text-[white]">términa en</span>{" "}
+            <span
+              className="bold-text text-end"
+              ref={(node) => commonService.startCountdown(node, 599)}
+              style={{
+                fontVariantNumeric: "tabular-nums",
+                display: "inline-block",
+                color: "#fff",
+                minWidth: "40px",
+              }}
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureServiceUiMobile;