kupos-ui-components-lib 9.2.8 → 9.2.9

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -34,15 +34,53 @@ import linatalDirectoAnimation from "../../assets/images/anims/service_list/dire
 import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
 import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
 import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
+
+import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+
 import StageTooltip from "../../ui/StagesTooltip";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
+import SeatSection from "../../ui/SeatSection/SeatSection";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
+const ANIMATION_MAP: Record<string, Record<string, any>> = {
+  promoAnim: {
+    kupos: promoAnimation,
+  },
+  locationAnim: {
+    kupos: locationAnimation,
+    pullman: pullmanLocationAnimation,
+    opsites: opsitesLocationAnimation,
+  },
+  directoAnim: {
+    kupos: directoAnimation,
+  },
+  petFriendlyAnim: {
+    kupos: petFriendlyAnimation,
+    pullman: pullmanPetFriendlyAnimation,
+    opsites: opsitesPetFriendlyAnimation,
+  },
+  priorityStageAnim: {
+    kupos: priorityStageAnimation,
+    pullman: pullmanPriorityStageAnimation,
+    opsites: opsitesPriorityStageAnimation,
+  },
+  flexibleIcon: {
+    kupos: flexibleAnimation,
+    pullman: pullmanFlexibleAnimation,
+    opsites: opsitesFlexibleAnimation,
+  },
+  bombAnimation: {
+    kupos: bombAnimation,
+  },
+};
+
 function PeruServiceItemDesktop({
   serviceItem,
   onBookButtonPress,
@@ -67,52 +105,39 @@ function PeruServiceItemDesktop({
   isPeru,
   siteType,
   isAllinBus,
+  viewersConfig,
+  isExpand,
+  setIsExpand,
+  coachKey,
   t = (key: string) => key,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const animationMap: Record<string, Record<string, any>> = {
-    promoAnim: {
-      kupos: promoAnimation,
-      pullman: pullmanPromoAnimation,
-      opsites: opsitesPromoAnimation,
-      linatal: linatalPromoAnimation,
-    },
-    locationAnim: {
-      kupos: locationAnimation,
-      pullman: pullmanLocationAnimation,
-      opsites: opsitesLocationAnimation,
-      linatal: linatalLocationAnimation,
-    },
-    directoAnim: {
-      kupos: directoAnimation,
-      pullman: pullmanDirectoAnimation,
-      opsites: opsitesDirectoAnimation,
-      linatal: linatalDirectoAnimation,
-    },
-    petFriendlyAnim: {
-      kupos: petFriendlyAnimation,
-      pullman: pullmanPetFriendlyAnimation,
-      opsites: opsitesPetFriendlyAnimation,
-      linatal: linatalPetFriendlyAnimation,
-    },
-    priorityStageAnim: {
-      kupos: priorityStageAnimation,
-      pullman: pullmanPriorityStageAnimation,
-      opsites: opsitesPriorityStageAnimation,
-      linatal: linatalPriorityStageAnimation,
-    },
-    flexibleIcon: {
-      kupos: flexibleAnimation,
-      pullman: pullmanFlexibleAnimation,
-      opsites: opsitesFlexibleAnimation,
-      linatal: linatalFlexibleAnimation,
-    },
+  const startViewerCount = (node: HTMLSpanElement | null) => {
+    if (!node || !viewersConfig) return;
+
+    const prevId = node.dataset.viewerId;
+    if (prevId) clearInterval(Number(prevId));
+
+    const { min, max, interval = 5000 } = viewersConfig;
+    const clamp = (v: number) => Math.min(max, Math.max(min, v));
+    const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+
+    node.textContent = String(initialValue);
+
+    const id = setInterval(() => {
+      const current = Number(node.textContent) || initialValue;
+      const delta = Math.ceil(current * 0.2);
+      const next =
+        current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
+      node.textContent = String(clamp(Math.round(next)));
+    }, interval);
+
+    node.dataset.viewerId = String(id);
   };
 
   const getAnimationIcon = (icon: string) => {
-    const animation = animationMap[icon];
+    const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
-    const currentSiteType = siteType || "kupos";
-    return animation[currentSiteType];
+    return animation[siteType] ?? animation.kupos;
   };
   const SvgAmenities = ({
     moreAnemities,
@@ -450,26 +475,56 @@ function PeruServiceItemDesktop({
     ? extractStage(serviceItem.stage_details_arr, 1)
     : null;
 
+  const countdownSeconds = 599;
+
+  const startCountdown = (node: HTMLSpanElement | null) => {
+    if (!node) return;
+
+    const prevId = node.dataset.countdownId;
+    if (prevId) clearInterval(Number(prevId));
+
+    let remaining = countdownSeconds;
+
+    const formatTime = (totalSecs: number) => {
+      const m = Math.floor(totalSecs / 60);
+      const s = totalSecs % 60;
+      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    const id = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        remaining = countdownSeconds;
+      }
+      node.textContent = formatTime(remaining);
+    }, 1000);
+
+    node.dataset.countdownId = String(id);
+  };
+
   const items = [
     {
-      key: "rating",
-      width: "30%",
+      key: "amenities",
+      width: "20%",
+      condition: true,
       render: (
-        <RatingBlock
-          showRating={showRating}
+        <AmenitiesBlock
           serviceItem={serviceItem}
+          metaData={metaData}
           isSoldOut={isSoldOut}
           colors={colors}
-          t={t}
-          translation={translation}
+          getAnimationIcon={getAnimationIcon}
+          getAmenityName={CommonService.getAmenityName}
+          SvgAmenities={SvgAmenities}
           isPeru={isPeru}
         />
       ),
     },
-
     {
       key: "duration",
-      width: "20%",
+      width: "12%",
       condition: serviceItem.duration,
       render: (
         <DurationBlock
@@ -482,6 +537,20 @@ function PeruServiceItemDesktop({
       ),
     },
 
+    // {
+    //   key: "directo",
+    //   width: "12%",
+    //   condition: serviceItem?.is_direct_trip === true,
+    //   render: (
+    //     <DirectoBlock
+    //       translation={translation}
+    //       getAnimationIcon={getAnimationIcon}
+    //       colors={colors}
+    //       isSoldOut={isSoldOut}
+    //     />
+    //   ),
+    // },
+
     {
       key: "pet",
       width: "20%",
@@ -501,7 +570,7 @@ function PeruServiceItemDesktop({
     {
       key: "flexible",
       width: "20%",
-      condition: false,
+      condition: serviceItem.is_change_ticket === true,
       render: (
         <FlexibleBlock
           translation={translation}
@@ -512,30 +581,101 @@ function PeruServiceItemDesktop({
         />
       ),
     },
-
-    {
-      key: "amenities",
-      width: "20%",
-      render: (
-        <AmenitiesBlock
-          serviceItem={serviceItem}
-          metaData={metaData}
-          isSoldOut={isSoldOut}
-          colors={colors}
-          isPeru={isPeru}
-          getAnimationIcon={getAnimationIcon}
-          getAmenityName={CommonService.getAmenityName}
-          SvgAmenities={SvgAmenities}
-        />
-      ),
-    },
   ];
 
-  const amenitiesItem = items.find((i) => i.key === "amenities");
   const otherItems = items.filter(
-    (i) => i.key !== "amenities" && i.condition !== false,
+    (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
   );
 
+  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
+  const grayscaleClass = isSoldOut ? "grayscale" : "";
+
+  // const items = [
+  //   {
+  //     key: "rating",
+  //     width: "30%",
+  //     render: (
+  //       <RatingBlock
+  //         showRating={showRating}
+  //         serviceItem={serviceItem}
+  //         isSoldOut={isSoldOut}
+  //         colors={colors}
+  //         t={t}
+  //         translation={translation}
+  //         isPeru={isPeru}
+  //       />
+  //     ),
+  //   },
+
+  //   {
+  //     key: "duration",
+  //     width: "20%",
+  //     condition: serviceItem.duration,
+  //     render: (
+  //       <DurationBlock
+  //         serviceItem={serviceItem}
+  //         translation={translation}
+  //         renderIcon={renderIcon}
+  //         isSoldOut={isSoldOut}
+  //         colors={colors}
+  //       />
+  //     ),
+  //   },
+
+  //   {
+  //     key: "pet",
+  //     width: "20%",
+  //     condition:
+  //       serviceItem.pet_seat_info &&
+  //       Object.keys(serviceItem.pet_seat_info).length > 0,
+  //     render: (
+  //       <PetBlock
+  //         translation={translation}
+  //         getAnimationIcon={getAnimationIcon}
+  //         colors={colors}
+  //         isSoldOut={isSoldOut}
+  //       />
+  //     ),
+  //   },
+
+  //   {
+  //     key: "flexible",
+  //     width: "20%",
+  //     condition: false,
+  //     render: (
+  //       <FlexibleBlock
+  //         translation={translation}
+  //         getAnimationIcon={getAnimationIcon}
+  //         colors={colors}
+  //         serviceItem={serviceItem}
+  //         isSoldOut={isSoldOut}
+  //       />
+  //     ),
+  //   },
+
+  //   {
+  //     key: "amenities",
+  //     width: "20%",
+  //     render: (
+  //       <AmenitiesBlock
+  //         serviceItem={serviceItem}
+  //         metaData={metaData}
+  //         isSoldOut={isSoldOut}
+  //         colors={colors}
+  //         isPeru={isPeru}
+  //         getAnimationIcon={getAnimationIcon}
+  //         getAmenityName={CommonService.getAmenityName}
+  //         SvgAmenities={SvgAmenities}
+  //       />
+  //     ),
+  //   },
+  // ];
+
+  // const amenitiesItem = items.find((i) => i.key === "amenities");
+  // const otherItems = items.filter(
+  //   (i) => i.key !== "amenities" && i.condition !== false,
+  // );
+
   return (
     <div
       className={`relative ${
@@ -549,9 +689,15 @@ function PeruServiceItemDesktop({
       }	`}
     >
       <div
-        className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
+        id={`service-card-${serviceItem.id}`}
+        className="bg-white mx-auto relative rounded-[10px] border border-[#ccc]"
       >
-        <div className="p-[15px] pt-[20px]">
+        <div
+          className=" pt-[20px]"
+          style={{
+            padding: coachKey ? "15px 15px 20px 15px" : "20px 15px 11px 15px",
+          }}
+        >
           {/* Header with operator info and favorite */}
           {/* <div className="flex justify-between items-center mb-[15px]">
             <div className="flex items-center justify-between w-[250px]">
@@ -579,10 +725,48 @@ function PeruServiceItemDesktop({
           {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
           <div
             className="grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center"
-            style={{ marginTop: showTopLabel ? "8px" : "" }}
+            // style={{ marginTop: showTopLabel ? "8px" : "" }}
+            style={{
+              marginTop:
+                showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
+            }}
           >
             {/* OPERATOR LOGO */}
-            <div className="flex items-center justify-center m-[auto]">
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                // gap: "5px",
+              }}
+            >
+              <div
+                // className="flex items-center justify-center m-[auto]"
+                className=""
+              >
+                <img
+                  src={serviceItem.operator_details[0]}
+                  alt="service logo"
+                  className={`h-[30px] w-[auto]  ${
+                    isSoldOut ? "grayscale" : ""
+                  }`}
+                />
+                {isCiva ? (
+                  <div className="text-[13.33px] black-text ml-2">
+                    {serviceItem.operator_details[2]}
+                  </div>
+                ) : null}
+              </div>
+              <RatingBlock
+                showRating={showRating}
+                serviceItem={serviceItem}
+                isSoldOut={isSoldOut}
+                colors={colors}
+                t={t}
+                translation={translation}
+                isPeru={isPeru}
+              />
+            </div>
+            {/* <div className="flex items-center justify-center m-[auto]">
               <div className=" ">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -597,7 +781,7 @@ function PeruServiceItemDesktop({
                   {serviceItem.operator_details[2]}
                 </div>
               ) : null}
-            </div>
+            </div> */}
 
             {/* DATE AND TIME - Grid Layout */}
             <div
@@ -609,7 +793,7 @@ function PeruServiceItemDesktop({
               }}
             >
               {/* ICONS COLUMN */}
-              <div className="flex flex-col gap-[10px]">
+              <div className="flex flex-col gap-[4px]">
                 {/* Origin Icon */}
                 {orignLabel ? (
                   <div className="w-[60px] h-[20px] flex items-center bold-text">
@@ -647,7 +831,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* DATES COLUMN */}
-              <div className="flex flex-col gap-[10px]">
+              <div className="flex flex-col gap-[4px]">
                 {/* Departure Date */}
                 <StageTooltip
                   stageData={serviceItem.boarding_stages}
@@ -680,7 +864,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* DOTS COLUMN */}
-              <div className="flex flex-col gap-[10px] items-center">
+              <div className="flex flex-col gap-[4px] items-center">
                 {/* Departure Dot */}
                 <div className="h-[20px] flex items-center justify-center">
                   <div>•</div>
@@ -697,7 +881,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* TIMES COLUMN */}
-              <div className="flex flex-col gap-[10px]">
+              <div className="flex flex-col gap-[4px]">
                 {/* Departure Time */}
                 <StageTooltip
                   stageData={serviceItem.dropoff_stages}
@@ -743,6 +927,18 @@ function PeruServiceItemDesktop({
             ></div>
             {/* SEATS */}
             <div className="content-center">
+              <SeatSection
+                seatTypes={serviceItem.seat_types}
+                serviceItem={serviceItem}
+                availableSeats={serviceItem.available_seats}
+                isSoldOut={isSoldOut}
+                priceColor={colors.priceColor}
+                currencySign={currencySign}
+                removeDuplicateSeats={removeDuplicateSeats}
+                isPeru={isPeru}
+              />
+            </div>
+            {/* <div className="content-center">
               <div
                 className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
                   getNumberOfSeats() < 3 ? "" : ""
@@ -784,10 +980,38 @@ function PeruServiceItemDesktop({
                   {getSeatPrice()}
                 </div>
               </div>
-            </div>
+            </div> */}
 
             {/* BUTTON */}
             <div>
+              {showLastSeats ? (
+                <div
+                  className="flex justify-end mr-[11px] "
+                  style={{
+                    position: "absolute",
+                    top: serviceDetailsLoading ? "7px" : "5px",
+                    right: "16px",
+                  }}
+                >
+                  {serviceItem?.available_seats < 10 &&
+                    serviceItem?.available_seats > 0 && (
+                      <div className="text-[12px] text-[#464647] mt-1 text-center">
+                        ¡Últimos Asientos!
+                      </div>
+                    )}
+                </div>
+              ) : null}
+              <KuposButton
+                isSoldOut={isSoldOut}
+                isLoading={serviceDetailsLoading}
+                buttonColor={colors.kuposButtonColor}
+                buyLabel={translation?.buyButton}
+                soldOutLabel={translation?.soldOutButton}
+                soldOutIcon={renderIcon("soldOutIcon", "14px")}
+                onClick={checkMidnight}
+              />
+            </div>
+            {/* <div>
               <button
                 onClick={() => (!isSoldOut ? checkMidnight() : null)}
                 disabled={serviceDetailsLoading}
@@ -817,9 +1041,24 @@ function PeruServiceItemDesktop({
                   )}
                 </span>
               </button>
-            </div>
+            </div> */}
           </div>
-          {showLastSeats ? (
+          <BottomAmenities
+            otherItems={otherItems}
+            serviceItem={serviceItem}
+            grayscaleClass={grayscaleClass}
+            isSoldOut={isSoldOut}
+            isItemExpanded={isItemExpanded}
+            colors={colors}
+            translation={translation}
+            getAnimationIcon={getAnimationIcon}
+            downArrowIcon={renderIcon("downArrow", "10px")}
+            onToggleExpand={() =>
+              setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id)
+            }
+            isPeru={isPeru}
+          />
+          {/* {showLastSeats ? (
             <div className="flex justify-end mr-[11px]">
               {serviceItem?.available_seats < 10 &&
                 serviceItem?.available_seats > 0 && (
@@ -828,18 +1067,13 @@ function PeruServiceItemDesktop({
                   </div>
                 )}
             </div>
-          ) : null}
-
+          ) : null} */}
+          {/* 
           <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[10px]">
-            {/* 🔹 LEFT SIDE (GRID ITEMS) */}
             <div
               className="grid items-center gap-[2%] flex-1"
               style={{
                 gridTemplateColumns: "30% 18% 23% 23%",
-
-                // otherItems
-                //   .map((i) => i.width)
-                //   .join(" "),
               }}
             >
               {otherItems.map((item) => (
@@ -849,17 +1083,16 @@ function PeruServiceItemDesktop({
               ))}
             </div>
 
-            {/* 🔹 RIGHT SIDE (ALWAYS END) */}
             <div className="flex items-center ml-[12px] shrink-0 w-[130px] justify-end">
               {amenitiesItem?.render}
             </div>
-          </div>
+          </div> */}
         </div>
       </div>
 
       {children}
       {/* Bottom discount banner */}
-      {serviceItem?.offer_text && (
+      {/* {serviceItem?.offer_text && (
         <div
           className={`  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
           style={{
@@ -877,6 +1110,84 @@ function PeruServiceItemDesktop({
           />
           <span className="ml-[10px]">{serviceItem?.offer_text}</span>
         </div>
+      )} */}
+
+      {serviceItem?.offer_text && (
+        <div
+          className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]"
+          style={{
+            backgroundColor: colors?.bottomStripColor,
+            opacity: isSoldOut ? 0.5 : 1,
+          }}
+        >
+          {/* <div className="flex justify-between items-center w-full">
+                <div className="flex items-center">
+                  <LottiePlayer
+                    animationData={getAnimationIcon("bombAnimation")}
+                    width="18px"
+                    height="18px"
+                  />
+                  <span className="bold-text ml-[8px]">
+                    {" "}
+                    {serviceItem?.offer_text || ""}
+                  </span>
+                </div>
+                <div>
+                  Termina en&nbsp;
+                  <span
+                    className="bold-text text-end"
+                    ref={startCountdown}
+                    style={{
+                      fontVariantNumeric: "tabular-nums",
+                      display: "inline-block",
+                      // minWidth: "70px",
+                    }}
+                  />
+                </div>
+              </div> */}
+          <div className="flex  justify-between items-center w-full">
+            <div className="flex items-center ">
+              <div className="flex items-center">
+                <LottiePlayer
+                  animationData={getAnimationIcon("bombAnimation")}
+                  width="18px"
+                  height="18px"
+                />
+                <div className="flex items-center mt-[2px]">
+                  <span className="bold-text ml-[6px]">
+                    {serviceItem?.offer_text || ""}&nbsp;
+                  </span>{" "}
+                  | Termina en&nbsp;
+                  <span
+                    className="bold-text text-end"
+                    ref={startCountdown}
+                    style={{
+                      fontVariantNumeric: "tabular-nums",
+                      display: "inline-block",
+                      // minWidth: "70px",
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center">
+              {renderIcon("personIcon", "16px")}
+              &nbsp;
+              <span className="ml-[6px]">
+                <span
+                  className="bold-text"
+                  ref={startViewerCount}
+                  style={{ fontVariantNumeric: "tabular-nums" }}
+                />{" "}
+                <span className="bold-text">personas</span>{" "}
+                <span>
+                  {" "}
+                  {viewersConfig?.label || " están viendo este viaje"}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
       )}
 
       <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
@@ -961,11 +1272,12 @@ function PeruServiceItemDesktop({
               backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
             }}
           >
-            <LottiePlayer
+            {renderIcon("connectingServiceIcon", "12px")}
+            {/* <LottiePlayer
               animationData={serviceItem.icons.connectingServiceIcon}
               width="14px"
               height="14px"
-            />
+            /> */}
             <div>{"Conexión"}</div>
           </div>
         )}