kupos-ui-components-lib 9.0.6 → 9.0.7

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -3,10 +3,6 @@ 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"];
 
@@ -43,7 +39,6 @@ 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"
@@ -66,6 +61,194 @@ 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)
@@ -78,8 +261,8 @@ function ServiceItemMobile({
       <img
         key={i}
         className="amenity"
-        height={12}
-        width={12}
+        height={14}
+        width={14}
         // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
         src={commonService.getAmenitiesImage(
           amenitiesData?.[am]?.toLowerCase(),
@@ -115,6 +298,32 @@ 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  ${
@@ -124,42 +333,28 @@ function ServiceItemMobile({
         isConexion ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
-          ? "mt-[10px]"
+          ? "mt-[20px]"
           : "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={" rounded-[20px]"}
-        style={{
-          backgroundColor: "#fff",
-          zIndex: 1,
-          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-          borderRadius: "14px 0 14px 14px",
-          border: `1px solid ${colors.bottomStripColor}`,
-        }}
+        className={"border border-[#E6E6E6] rounded-[20px]"}
+        style={{ backgroundColor: "#fff", zIndex: 1 }}
       >
         <div
-          // className={` ${
-          //   serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-          //   showTopLabel ||
-          //   serviceItem?.is_direct_trip ||
-          //   serviceItem?.is_transpordo
-          //     ? "mt-[10px]"
-          //     : ""
-          // }`}
-          style={{ padding: "12px 12px 8px 12px" }}
+          className={`p-[12px] ${
+            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+            showTopLabel ||
+            serviceItem?.is_direct_trip ||
+            serviceItem?.is_transpordo
+              ? "mt-[10px]"
+              : ""
+          }`}
         >
           {/* Header with operator info and favorite */}
-          <div className="flex justify-between  items-center mb-[10px]">
-            <div className="flex items-center  justify-between">
+          <div className="flex justify-between  mb-[8px]">
+            <div className="flex items-center w-[50%] justify-between">
               <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -174,44 +369,21 @@ function ServiceItemMobile({
                   {serviceItem?.operator_details[2]}
                 </div>
               ) : showRating ? (
-                <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 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>
               ) : 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 && (
@@ -226,58 +398,267 @@ function ServiceItemMobile({
                     </span>
                   )}
               </div>
-            ) : null} */}
+            ) : null}
           </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
+            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>
+          </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>
         </div>
 
         {serviceItem?.offer_text && (
@@ -303,7 +684,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={{
@@ -371,7 +752,7 @@ function ServiceItemMobile({
               />
               <div>{"Tren Express"}</div>
             </div>
-          )} */}
+          )}
         </div>
       </div>
     </div>