kupos-ui-components-lib 9.0.7 → 9.0.8

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -3,6 +3,10 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
 import { MobileServiceItemProps } from "./mobileTypes";
 import commonService from "../../utils/CommonService";
+import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
+import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
+import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
+import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -39,6 +43,7 @@ function ServiceItemMobile({
 }: MobileServiceItemProps): React.ReactElement {
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   let isSoldOut = serviceItem.available_seats <= 0;
+  const showPromo = Math.random() > 0.5;
 
   const labelId =
     typeof serviceItem.boarding_stages === "string"
@@ -61,194 +66,6 @@ function ServiceItemMobile({
     }
   };
 
-  const seatTypes = () => {
-    let seatTypes = serviceItem.seat_types
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare) // Add this line to sort by fare
-      ?.slice(0, 2)
-      ?.map((type, i) =>
-        exceptions.includes(type.label) ? null : (
-          <div
-            className={
-              serviceItem.seat_types?.length > 2
-                ? "w-[100%] flex flex-row justify-between "
-                : "w-[100%] flex flex-row justify-between items-center"
-            }
-            key={i}
-          >
-            <span
-              className="min-[420]:text-[13px] text-[12px] "
-              style={{
-                // marginLeft: "10px",
-                color: isSoldOut ? "#bbb" : "#464647",
-              }}
-            >
-              {type.label}
-            </span>
-            <span
-              className={"min-[420]:text-[13px] text-[12px]  bold-text"}
-              style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
-            >
-              {commonService.currency(type.fare, currencySign)}
-            </span>
-          </div>
-        ),
-      );
-    return seatTypes;
-  };
-
-  const seatTypesWithRemoveDuplicateSeats = () => {
-    const seatMap = new Map();
-
-    serviceItem.seat_types
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.forEach((item) => {
-        if (exceptions.includes(item.key as any)) return;
-        const existing = seatMap.get(item.label);
-        if (
-          !existing ||
-          parseFloat(item.fare as any) < parseFloat(existing.fare)
-        ) {
-          seatMap.set(item.label, item);
-        }
-      });
-
-    const uniqueSeats = Array.from(seatMap.values())
-      .sort((a, b) => a.fare - b.fare)
-      .slice(0, 3);
-    return uniqueSeats.map((type, i) => {
-      return exceptions.includes(type.label) ? null : (
-        <div
-          className={
-            serviceItem.seat_types?.length > 2
-              ? "w-[100%] flex flex-row justify-between "
-              : "w-[100%] flex flex-row justify-between items-center"
-          }
-          key={i}
-        >
-          <span
-            className="min-[420]:text-[13px] text-[11px] "
-            style={{
-              // marginLeft: "10px",
-              color: isSoldOut ? "#bbb" : "#464647",
-            }}
-          >
-            {commonService.truncateSeatLabel(type.label)}
-          </span>
-          <span
-            className={"min-[420]:text-[13px] text-[11px]  bold-text"}
-            style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
-          >
-            {/* {serviceItem?.operator_service_name === "Pullman San Andrés" &&
-              serviceItem?.available_seats <= 0
-                ? null
-                : commonService.currency(type.fare, currencySign)} */}
-
-            {serviceItem?.available_seats <= 0 && !isPeru
-              ? commonService.currency(0, currencySign)
-              : commonService.currency(type.fare, currencySign)}
-          </span>
-        </div>
-      );
-    });
-  };
-
-  const getFilteredSeats = (item) => {
-    return item;
-  };
-
-  const getAmenitiesImage = (name: string): string => {
-    switch (name) {
-      case "air_condtion.png": {
-        return serviceItem?.icons?.airConditionIcon;
-      }
-      case "baggage.png": {
-        return serviceItem?.icons?.baggageIcon;
-      }
-      case "charging_plug.png": {
-        return serviceItem?.icons?.chargingIcon;
-      }
-      case "coffee.png": {
-        return serviceItem?.icons?.coffeeIcon;
-      }
-      case "food_new_icon.png": {
-        return serviceItem?.icons?.foodIcon;
-      }
-      case "gaming.png": {
-        return serviceItem?.icons?.gamingIcon;
-      }
-      case "handicap.png": {
-        return serviceItem?.icons?.handicapIcon;
-      }
-      case "mobile_ticket.png": {
-        return serviceItem?.icons?.mobileTicketIcon;
-      }
-      case "movie.png": {
-        return serviceItem?.icons?.movieIcon;
-      }
-      case "restrooms.png": {
-        return serviceItem?.icons?.restroomsIcon;
-      }
-      case "snacks_new.png": {
-        return serviceItem?.icons?.snackIcon;
-      }
-      case "wifi.png": {
-        return serviceItem?.icons?.wifiIcon;
-      }
-      case "cortina_divisoria.png": {
-        return serviceItem?.icons?.cortinaIcon;
-      }
-      case "frazada.png": {
-        return serviceItem?.icons?.frazaIcon;
-      }
-      case "blanket.png": {
-        return serviceItem?.icons?.blankketIcon;
-      }
-      case "cctv.png": {
-        return serviceItem?.icons?.cctvIcon;
-      }
-      case "cup_holder.png": {
-        return serviceItem?.icons?.cupHolderIcon;
-      }
-      case "emergency_contact.png": {
-        return serviceItem?.icons?.emergencyContactIcon;
-      }
-      case "emergency_exit.png": {
-        return serviceItem?.icons?.emergencyExitIcon;
-      }
-      case "fire_extinguisher.png": {
-        return serviceItem?.icons?.fireExtinguisherIcon;
-      }
-      case "reading_light.png": {
-        return serviceItem?.icons?.readingLIghtIcon;
-      }
-      case "seat_belt.png": {
-        return serviceItem?.icons?.sercurityBeltIcon;
-      }
-      case "service_on_board.png": {
-        return serviceItem?.icons?.serviceOnBoardIcon;
-      }
-      case "personal_tv.png": {
-        return serviceItem?.icons?.personalTVIcon;
-      }
-      case "pet_admission.png": {
-        return serviceItem?.icons?.petAdmissionIcon;
-      }
-      case "music.png": {
-        return serviceItem?.icons?.musicIcon;
-      }
-      case "headset.png": {
-        return serviceItem?.icons?.headPhoneIcon;
-      }
-      case "allows_cancellation.png": {
-        return serviceItem?.icons?.allowCancellationIcon;
-      }
-      default: {
-        return "";
-      }
-    }
-  };
-
   const amenities = () => {
     const raw = serviceItem?.operator_details?.[3];
     const list = Array.isArray(raw)
@@ -261,8 +78,8 @@ function ServiceItemMobile({
       <img
         key={i}
         className="amenity"
-        height={14}
-        width={14}
+        height={12}
+        width={12}
         // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
         src={commonService.getAmenitiesImage(
           amenitiesData?.[am]?.toLowerCase(),
@@ -298,32 +115,6 @@ function ServiceItemMobile({
     isConexion = true;
   }
 
-  const depTime = serviceItem.dep_time || "";
-
-  // Extract hours and minutes and check for AM/PM
-  const hasAM = depTime.includes("AM");
-  const hasPM = depTime.includes("PM");
-  const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
-  const [hour, minute] = timePart.split(":").map(Number);
-
-  // Convert to 24-hour format
-  let cleanedDepTime;
-  if (hasAM) {
-    cleanedDepTime =
-      hour === 12
-        ? `00:${minute < 10 ? "0" + minute : minute}`
-        : `${hour < 10 ? "0" + hour : hour}:${
-            minute < 10 ? "0" + minute : minute
-          }`;
-  } else if (hasPM) {
-    cleanedDepTime =
-      hour === 12
-        ? `${hour}:${minute < 10 ? "0" + minute : minute}`
-        : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
-  } else {
-    cleanedDepTime = timePart;
-  }
-
   return (
     <div
       className={`relative  ${
@@ -333,28 +124,42 @@ function ServiceItemMobile({
         isConexion ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
-          ? "mt-[20px]"
+          ? "mt-[10px]"
           : "mt-[10px]"
       }	`}
       style={{ backgroundColor: "#fff", zIndex: 1 }}
     >
+      <TopAmenitieMobile
+        showTopLabel={showTopLabel}
+        isSoldOut={isSoldOut}
+        seatPriceColor={colors.seatPriceColor}
+        bombAnim={serviceItem.icons.bombAnim}
+        priorityStageAnim={serviceItem.icons.priorityStageAnim}
+      />
       <div
-        className={"border border-[#E6E6E6] rounded-[20px]"}
-        style={{ backgroundColor: "#fff", zIndex: 1 }}
+        className={" rounded-[20px]"}
+        style={{
+          backgroundColor: "#fff",
+          zIndex: 1,
+          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
+          borderRadius: "14px 0 14px 14px",
+          border: `1px solid ${colors.bottomStripColor}`,
+        }}
       >
         <div
-          className={`p-[12px] ${
-            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-            showTopLabel ||
-            serviceItem?.is_direct_trip ||
-            serviceItem?.is_transpordo
-              ? "mt-[10px]"
-              : ""
-          }`}
+          // className={` ${
+          //   serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+          //   showTopLabel ||
+          //   serviceItem?.is_direct_trip ||
+          //   serviceItem?.is_transpordo
+          //     ? "mt-[10px]"
+          //     : ""
+          // }`}
+          style={{ padding: "12px 12px 8px 12px" }}
         >
           {/* Header with operator info and favorite */}
-          <div className="flex justify-between  mb-[8px]">
-            <div className="flex items-center w-[50%] justify-between">
+          <div className="flex justify-between  items-center mb-[10px]">
+            <div className="flex items-center  justify-between">
               <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -369,21 +174,44 @@ function ServiceItemMobile({
                   {serviceItem?.operator_details[2]}
                 </div>
               ) : showRating ? (
-                <div className="flex min-[420]:text-[13px] text-[12px] bold-text items-center">
-                  <img
-                    src={serviceItem.icons.rating}
-                    alt="origin"
-                    className={`w-[12px] h-[12px] mr-[4px] object-contain   ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <span style={{ lineHeight: "normal" }}>
-                    {getServiceStars(serviceItem)}
-                  </span>
+                <div className="flex min-[420]:text-[13px] text-[12px]  items-center">
+                  <div className="flex items-center">
+                    <div className="flex items-center">
+                      <img
+                        src={serviceItem.icons.rating}
+                        alt="origin"
+                        className={`w-[12px] h-[12px] mr-[4px] object-contain   ${
+                          isSoldOut ? "grayscale" : ""
+                        }`}
+                      />
+                      <span style={{ lineHeight: "normal" }}>
+                        {getServiceStars(serviceItem)}
+                      </span>
+                    </div>
+
+                    <div
+                      className="flex items-center cursor-pointer "
+                      style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
+                    >
+                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px]">
+                        {serviceItem.operator_details[2]}
+                      </span>
+                    </div>
+                  </div>
                 </div>
               ) : null}
             </div>
             {showLastSeats ? (
+              <div className="flex justify-end  ">
+                {serviceItem?.available_seats < 10 &&
+                  serviceItem?.available_seats > 0 && (
+                    <div className="text-[10px] text-[#464647] text-center">
+                      ¡ Últimos Asientos!
+                    </div>
+                  )}
+              </div>
+            ) : null}
+            {/* {showLastSeats ? (
               <div className="flex justify-end  -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center ">
                 {serviceItem?.available_seats < 10 &&
                   serviceItem?.available_seats > 0 && (
@@ -398,267 +226,58 @@ function ServiceItemMobile({
                     </span>
                   )}
               </div>
-            ) : null}
-          </div>
-
-          <div
-            className="flex justify-between gap-[5px] w-full"
-            onClick={onBookButtonPress}
-          >
-            {/* DATE AND TIME */}
-            <div
-              className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
-              style={{ justifyContent: isCiva && "center" }}
-            >
-              <div
-                className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between   ${
-                  isSoldOut ? "text-[#c0c0c0]" : ""
-                }`}
-              >
-                <div className="flex items-center" style={{ flex: 1 }}>
-                  <div>
-                    {" "}
-                    {orignLabel ? (
-                      <div className="w-[60px]">{orignLabel}</div>
-                    ) : (
-                      <div className="w-[14px] h-auto mr-[5px]">
-                        <img
-                          src={serviceItem.icons?.origin}
-                          alt="origin"
-                          className={`w-[14px] h-auto mr-[5px] ${
-                            isSoldOut ? "grayscale" : ""
-                          }`}
-                        />
-                      </div>
-                    )}
-                  </div>
-                  <div
-                    className="flex items-center relative capitalize  justify-between "
-                    style={{ flex: 1 }}
-                  >
-                    <span className="cursor-pointer black-text">
-                      {DateService.getServiceItemDate(serviceItem.travel_date)}
-                    </span>
-                    <div className="absolute left-[50%]">•</div>
-                    <div className="font-[900] relative black-text">
-                      {isLinatal ? (
-                        <div>
-                          <span>
-                            {" "}
-                            {cleanedDepTime}{" "}
-                            <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
-                          </span>
-                          <span>
-                            {serviceItem?.dep_time.includes("AM") ||
-                            serviceItem?.dep_time.includes("PM")
-                              ? null
-                              : DateService.ampmOnly(serviceItem.dep_time)}
-                          </span>
-                        </div>
-                      ) : (
-                        DateService.formatTime(serviceItem.dep_time)
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {isCiva ? null : (
-                <div
-                  className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between  ${
-                    isSoldOut ? "text-[#c0c0c0]" : ""
-                  }`}
-                >
-                  <div className="flex items-center" style={{ flex: 1 }}>
-                    <div>
-                      {" "}
-                      {destinationLabel ? (
-                        <div className="w-[60px]">{destinationLabel}</div>
-                      ) : (
-                        <div className="w-[14px] h-auto mr-[5px]">
-                          <img
-                            src={serviceItem.icons?.destination}
-                            alt="destination"
-                            className={`w-[14px] h-auto mr-[5px] ${
-                              isSoldOut ? "grayscale" : ""
-                            }`}
-                          />
-                        </div>
-                      )}
-                    </div>
-                    <div
-                      className="flex items-center relative capitalize  justify-between "
-                      style={{ flex: 1 }}
-                    >
-                      <span className="cursor-pointer black-text">
-                        {DateService.getServiceItemDate(
-                          serviceItem.arrival_date,
-                        )}
-                      </span>
-                      <div className="absolute left-[50%]">•</div>
-                      <div className="font-[900] relative black-text">
-                        {DateService.formatTime(serviceItem.arr_time)}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-            <div
-              style={{
-                width: "1px",
-                height: "2.5rem",
-                backgroundColor: "#ccc",
-                margin: "auto",
-              }}
-            ></div>
-            {/* SEATS */}
-            <div
-              className="content-center"
-              style={{
-                width: isPeru ? "40%" : "40%",
-              }}
-            >
-              <div
-                className="flex flex-col justify-between h-[2.5rem] "
-                style={{
-                  gap: isSoldOut ? "0px" : "5px",
-                  justifyContent:
-                    serviceItem.seat_types?.length > 2
-                      ? "space-between"
-                      : "center",
-                }}
-              >
-                {removeDuplicateSeats
-                  ? seatTypesWithRemoveDuplicateSeats()
-                  : seatTypes()}
-
-                {isSoldOut ? (
-                  <div className="flex justify-end">
-                    <span
-                      className={
-                        "min-[420]:text-[13px] text-[12px] text-[#ccc]"
-                      }
-                    >
-                      Agotado
-                    </span>
-                  </div>
-                ) : null}
-              </div>
-            </div>
+            ) : null} */}
           </div>
-          <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div>
-          <div
-            className={`${"flex justify-between items-center items-center "}`}
-          >
-            {/* Rating */}
-            <div>
-              <div className="flex items-center ">
-                <div
-                  className="flex items-center cursor-pointer "
-                  style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-                >
-                  <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] bold-text">
-                    {serviceItem.operator_details[2]}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div
-              className="flex  relative "
-              style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-            >
-              <div
-                className={`w-[12px] h-auto mr-[2px] ${
-                  isSoldOut ? "grayscale" : ""
-                }`}
-              >
-                {renderIcon("hours", "14px")}
-              </div>
-              &nbsp;
-              <div
-                className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
-                  isSoldOut ? "text-[#c0c0c0]" : ""
-                }`}
-                style={{ lineHeight: "normal" }}
-              >
-                {serviceItem.duration}hrs
-              </div>
-            </div>
-
-            <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenities()}</div>
 
-            {(serviceItem.is_change_ticket || isPetSeat) && (
-              <div
-                onClick={() => {
-                  setShowDropdown(!showDropdown);
-                  setAmenetiesAtomValue({
-                    service: serviceItem,
-                    showTopLabel: showTopLabel,
-                  });
-                }}
-                className="flex items-center"
-              >
-                {serviceItem.pet_seat_info &&
-                Object.keys(serviceItem.pet_seat_info).length > 0 ? (
-                  <div className="flex items-center">
-                    <div className={`relative group cursor-default `}>
-                      <div className="flex items-center">
-                        <div
-                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                        >
-                          <LottiePlayer
-                            animationData={serviceItem.icons.petFriendlyAnim}
-                            width="20px"
-                            height="20px"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ) : null}
-
-                {/* Flexible ticket */}
-                {serviceItem.is_change_ticket && (
-                  <div className="flex items-center">
-                    <div className="relative group cursor-default">
-                      <div className="flex items-center">
-                        <div
-                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                        >
-                          <LottiePlayer
-                            animationData={serviceItem.icons.flexibleAnim}
-                            width="20px"
-                            height="20px"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {serviceItem?.is_tracking_enabled && (
-                  <div className="flex items-center mr-[10px]">
-                    <div
-                      className={`h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
-                    >
-                      <LottiePlayer
-                        animationData={serviceItem.icons.locationAnim}
-                        width="20px"
-                        height="20px"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(serviceItem.is_change_ticket || isPetSeat) && (
-                  <img src={serviceItem.icons.plus} alt="icon" width={11} />
-                )}
-              </div>
-            )}
-          </div>
+          <DateTimeSectionMobile
+            onBookButtonPress={onBookButtonPress}
+            isCiva={isCiva}
+            isSoldOut={isSoldOut}
+            isLinatal={isLinatal}
+            isPeru={isPeru}
+            orignLabel={orignLabel}
+            destinationLabel={destinationLabel}
+            originIcon={serviceItem.icons?.origin}
+            destinationIcon={serviceItem.icons?.destination}
+            travelDate={serviceItem.travel_date}
+            arrivalDate={serviceItem.arrival_date}
+            depTime={serviceItem.dep_time}
+            arrTime={serviceItem.arr_time}
+            seatTypes={serviceItem.seat_types}
+            seatPriceColor={colors.seatPriceColor}
+            currencySign={currencySign}
+            availableSeats={serviceItem.available_seats}
+            removeDuplicateSeats={removeDuplicateSeats}
+          />
+          {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
+          <div className="bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]"></div>
+
+          <BottomAmenitiesMobile
+            isSoldOut={isSoldOut}
+            amenitiesNodes={amenities()}
+            hoursIcon={renderIcon("hours", "14px")}
+            duration={serviceItem.duration?.toString()}
+            isDirectTrip={serviceItem?.is_direct_trip}
+            directoColor={colors.directoColor}
+            directoAnim={serviceItem.icons.directoAnim}
+            isChangeTicket={serviceItem.is_change_ticket}
+            isPetSeat={isPetSeat}
+            petSeatInfo={serviceItem.pet_seat_info}
+            petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
+            flexibleAnim={serviceItem.icons.flexibleAnim}
+            isTrackingEnabled={serviceItem?.is_tracking_enabled}
+            locationAnim={serviceItem.icons.locationAnim}
+            downArrowIcon={serviceItem.icons.downArrow}
+            showDropdown={showDropdown}
+            setShowDropdown={setShowDropdown}
+            onDropdownToggle={() => {
+              setShowDropdown(!showDropdown);
+              setAmenetiesAtomValue({
+                service: serviceItem,
+                showTopLabel: showTopLabel,
+              });
+            }}
+          />
         </div>
 
         {serviceItem?.offer_text && (
@@ -684,7 +303,7 @@ function ServiceItemMobile({
         )}
 
         <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
-          {showTopLabel && (
+          {/* {showTopLabel && (
             <div
               className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `}
               style={{
@@ -752,7 +371,7 @@ function ServiceItemMobile({
               />
               <div>{"Tren Express"}</div>
             </div>
-          )}
+          )} */}
         </div>
       </div>
     </div>