kupos-ui-components-lib 9.9.2 → 9.9.4

package/src/components/ServiceItem/mobileTypes.ts

@@ -46,20 +46,6 @@ export interface MobileServiceItemProps {
     dp_discount_percents?: Record<string, number>;
     dp_discounted_seats?: string[];
     dep_validation_text?: string;
-    discount_type?: string;
-    discount_value?: number;
-    max_discount?: number;
-    discounts?: Array<{
-      id?: number;
-      name?: string;
-      send_discount_to_api?: boolean;
-      new_ui_enabled?: boolean;
-      discount?: number;
-      seatwise_breakdown?: any;
-      seat_wise_discounts?: any;
-      total_amount?: number;
-      promotional_text?: string;
-    }>;
     metaData?: {};
     is_tracking_enabled?: boolean;
     show_top_label?: boolean;
@@ -135,36 +121,21 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string
+      personIcon?: string;
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string
-      femaleAnim?: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
+      whiteFireIcon?: string;
+      femaleAnim?: string;
       cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string
+      womenSeatIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
-  onRemateUiButtonClick?: ()=> void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -208,7 +179,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string
+    discountSeatPriceColor?: string;
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -221,26 +192,13 @@ export interface MobileServiceItemProps {
   showLastSeats?: boolean;
   removeDuplicateSeats?: boolean;
   isLinatal?: boolean;
-    viewersConfig?: {
+  viewersConfig?: {
     min: number;
     max: number;
     interval?: number; // ms, default 5000
     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;
-  wowDealData?: any;
-  isFlores?: boolean;
+  operatorLabel?: string;
+  isTrain?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -47,9 +47,6 @@ export interface ServiceItemProps {
     discount_type?: string;
     discount_value?: number;
     max_discount?: number;
-    discounts?: Array<{
-      new_ui_enabled?: boolean;
-    }>;
     is_transpordo?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
@@ -128,31 +125,18 @@ export interface ServiceItemProps {
       seatFallBackIcon: string;
       headPhoneIcon?: string;
       allowCancellationIcon?: string;
-      whiteBoardingIcon?: string
-      bombJson?:string
-      downArrow?:string
-      personIcon?: string
-      whiteFireIcon?: string
-      fireIcon?: string
+      whiteBoardingIcon?: string;
+      bombJson?: string;
+      downArrow?: string;
+      personIcon?: string;
+      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;
@@ -177,7 +161,7 @@ export interface ServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string
+    discountSeatPriceColor?: string;
   };
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
@@ -231,12 +215,7 @@ 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
+  coachKey?: number;
   viewersConfig?: {
     min: number;
     max: number;
@@ -244,14 +223,21 @@ 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;
-  wowDealData?: any;
-  isNewUiEnabled?: boolean;
+  showLoginModal?: any;
+  isLoggedIn?: any;
+  showLoginOption?: boolean;
+  isTrain?: boolean;
+  selectedSeatKey?: any;
+  onSeatSelect?: (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => void;
+  onTrainButtonClick?: any;
+  showSeatSelectionError?: string | null;
+  onShowSeatSelectionError?: (serviceId: string) => void;
+  onClearSeatSelectionError?: () => void;
+  isFlores?: boolean;
+  operatorLabel?: string;
 }

package/src/styles.css

@@ -93,21 +93,6 @@
   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/ExpendedDropDown/ExpandedDropdown.tsx

@@ -16,6 +16,7 @@ interface ExpandedDropdownProps {
   ladiesBookedSeats?: string;
   isDpEnabled?: boolean;
   renderIcon?: any;
+  operatorLabel?: string;
 }
 
 function ExpandedDropdown({
@@ -28,6 +29,7 @@ function ExpandedDropdown({
   ladiesBookedSeats,
   isDpEnabled,
   renderIcon,
+  operatorLabel,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -58,12 +60,12 @@ function ExpandedDropdown({
             </span> */}
             <span>
               <span className="bold-text">Pasaje flexible:</span> Tu pasaje
-              puede ser cambiado de manera online{" "}
+              puede ser cambiado sin costo{" "}
               <span className="bold-text">
                 hasta {serviceItem?.change_ticket_hours || 6} horas antes
               </span>{" "}
-              de la salida del bus. El monto será reembolsado a tu billetera
-              kupospay.
+              de la salida del bus. El monto será reembolsado a tu billetera{" "}
+              {operatorLabel ?? "kupospay"}.
             </span>
           </div>
         ) : (

package/src/ui/OfferBanner.tsx

@@ -18,9 +18,7 @@ interface OfferBannerProps {
   showLoginModal: any;
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
-  showLoginOption?: boolean
-  isNewUiEnabled?: boolean;
-  colors: any;
+  showLoginOption?: boolean;
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -33,14 +31,12 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   viewersConfig,
   getAnimationIcon,
   showLoginOption,
-  isNewUiEnabled,
-  colors,
 }) => {
   return (
     <div
-      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
+      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]"
       style={{
-        background: serviceItem?.offer_text && !isNewUiEnabled ? colors?.bottomStripColor : offerGradient,
+        background: offerGradient,
         opacity: isSoldOut ? 0.5 : 1,
         // zIndex: 0,
       }}
@@ -61,7 +57,6 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
               <span>Servicio popular entre los usuarios</span>
             </div>
           ) : (
-            (isNewUiEnabled && serviceItem?.offer_text) ? (
             <div className="flex items-center">
               <LottiePlayer
                 animationData={getAnimationIcon("bombAnimation")}
@@ -78,14 +73,18 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                   {(serviceItem?.offer_text || "").length > 30
                     ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
                     : serviceItem?.offer_text || ""}{" "}
-                  {isLoggedIn && showLoginOption ? null : (
+                  {isLoggedIn && showLoginOption ? null : Object.keys(
+                      serviceItem?.dp_discount_percents ?? {},
+                    ).length > 0 ||
+                    (serviceItem?.dp_discounted_seats ?? []).length >
+                      0 ? null : (
                     <span onClick={showLoginModal} className="cursor-pointer">
                       - registro
                     </span>
                   )}{" "}
                   &nbsp;
                 </span>{" "}
-                {serviceItem?.offer_text ? "|" : ""}
+                {serviceItem?.offer_text ? "| " : ""}
                 Termina en&nbsp;
                 <span
                   className="bold-text text-end"
@@ -96,28 +95,9 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                   }}
                 />
               </div>
-            </div>)
-            : (serviceItem?.offer_text && !isNewUiEnabled) && (
-              <div className="flex items-center">
-              <LottiePlayer
-                animationData={getAnimationIcon("promoAnim")}
-                width="18px"
-                height="18px"
-              />
-              <div className="flex items-center mt-[2px]">
-                <span
-                  className="bold-text"
-                  style={{
-                    marginLeft: serviceItem?.offer_text ? "6px" : "3px",
-                  }}
-                >
-                  {(serviceItem?.offer_text || "")}
-                </span>{" "}
-              </div>
-            </div>)
+            </div>
           )}
         </div>
-        {(isNewUiEnabled || serviceItem?.is_dp_enabled) && (
         <div className="flex items-center">
           {/* {renderIcon("personIcon", "16px")} */}
           <LottiePlayer
@@ -155,7 +135,6 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
             </span>
           </span>
         </div>
-        )}
       </div>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -7,6 +7,8 @@ interface SeatType {
   label: string;
   fare: number;
   key: any;
+  apiSeatType?: string;
+  api_seat_type?: string;
 }
 
 interface SeatSectionProps {
@@ -21,6 +23,15 @@ interface SeatSectionProps {
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
+  selectedSeatKey?: any;
+  onSeatSelect?: (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => void;
+  topLabelColor?: string;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -31,6 +42,8 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
     label: val?.label,
     price: val?.fare,
+    key: val?.key,
+    apiSeatType: val?.apiSeatType || val?.api_seat_type,
   }));
 
   seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -38,7 +51,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   return seatTypesWithPrices;
 }
 
-function getSortedSeatTypes(seatTypes: SeatType[]) {
+function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
   if (!seatTypes?.length) {
     return [{ label: "Salon cama", price: 0 }];
   }
@@ -52,7 +65,9 @@ function getSortedSeatTypes(seatTypes: SeatType[]) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  if (!isTrain) {
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  }
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -97,14 +112,18 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
+  selectedSeatKey,
+  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
+  isTrain,
+  topLabelColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -116,22 +135,68 @@ function SeatSection({
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
-    return seats.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span
-          key={key}
-          className={`flex items-center justify-between text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
+    return seats.map((val, key: number) => {
+      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
+        <div
+          className="flex items-center"
+          style={isTrain ? { cursor: "pointer" } : undefined}
+          onClick={
+            isTrain && !isSoldOut
+              ? () =>
+                  val.label === selectedSeatKey
+                    ? onSeatSelect?.(null, 0, "", "")
+                    : onSeatSelect?.(
+                        val.label,
+                        val.price,
+                        val.key,
+                        (val as any).apiSeatType,
+                      )
+              : undefined
+          }
         >
-          {typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-              ? CommonService.truncateSeatLabel(val.label)
-              : val.label
-            : null}
-        </span>
-      ),
-    );
+          {isTrain && (
+            <div
+              style={{
+                border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                borderRadius: "50%",
+                width: "14px",
+                height: "14px",
+                minWidth: "14px",
+                marginRight: "10px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {val.label === selectedSeatKey && (
+                <div
+                  style={{
+                    backgroundColor: topLabelColor,
+                    borderRadius: "50%",
+                    width: "7px",
+                    height: "7px",
+                  }}
+                />
+              )}
+            </div>
+          )}
+          <span
+            key={key}
+            className={`flex items-center justify-between text-[13.33px] ${
+              isSoldOut ? "text-[#c0c0c0]" : ""
+            }`}
+          >
+            {typeof val.label === "string" || typeof val.label === "number"
+              ? removeDuplicateSeats && isPeru
+                ? CommonService.truncateSeatLabel(val.label)
+                : isTrain
+                  ? CommonService.truncateSeatLabel(val.label, 8)
+                  : val.label
+              : null}
+          </span>
+        </div>
+      );
+    });
   };
 
   const renderSeatPrices = () => {
@@ -277,7 +342,7 @@ function SeatSection({
           {!isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (
               <span
-                className={`rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
+                className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
                 style={{
                   animation: "pulse-zoom 2s ease-in-out infinite",
                   whiteSpace: "nowrap",
@@ -319,7 +384,7 @@ function SeatSection({
           >
             <div
               className="absolute"
-              style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
+              style={{ left: isPeru ? "-19px" : "-19px", bottom: "1px" }}
             >
               {renderIcon("fireIcon", "16px")}
             </div>
@@ -476,7 +541,7 @@ function SeatSection({
             <div
               className="absolute"
               style={{
-                left: isPeru ? "-1px" : "-18px",
+                left: isPeru ? "-18px" : "-18px",
                 bottom: "1px",
               }}
             >

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -25,6 +25,7 @@ interface DateTimeSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -67,41 +68,43 @@ const TimeRow: React.FC<TimeRowProps> = ({
   isSoldOut,
 }) => {
   const formattedDate = DateService.getServiceItemDate(date);
-  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
-  return <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>
-        {" "}
-        {label ? (
-          <div className="w-[60px]">{label}</div>
-        ) : (
-          <div className="w-[12px] h-auto mr-[5px]">
-            <img
-              src={icon}
-              alt={alt}
-              className={`w-[12px] 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">
-          {formattedDate}
-        </span>
-        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
-        <div className="font-[900] relative black-text">{timeContent}</div>
+  const dotPositionClass = formattedDate.includes("dom")
+    ? "max-[399px]:left-[53%]"
+    : "";
+  return (
+    <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>
+          {" "}
+          {label ? (
+            <div className="w-[60px]">{label}</div>
+          ) : (
+            <div className="w-[12px] h-auto mr-[5px]">
+              <img
+                src={icon}
+                alt={alt}
+                className={`w-[12px] 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">{formattedDate}</span>
+          <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
+          <div className="font-[900] relative black-text">{timeContent}</div>
+        </div>
       </div>
     </div>
-  </div>;
+  );
 };
 
 function DateTimeSectionMobile({
@@ -127,6 +130,7 @@ function DateTimeSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
+  isTrain,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -198,6 +202,7 @@ function DateTimeSectionMobile({
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
         discountSeatPriceColor={discountSeatPriceColor}
+        isTrain={isTrain}
       />
     </div>
   );

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -56,7 +56,7 @@ function ExpandedDropdownMobile({
 
             <span>
               <span className="bold-text">Pasaje flexible:</span> Tu pasaje
-              puede ser cambiado de manera online{" "}
+              puede ser cambiado sin costo{" "}
               <span className="bold-text">
                 hasta {serviceItem?.change_ticket_hours || 6} horas antes
               </span>{" "}