kupos-ui-components-lib 9.6.3 → 9.6.5

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -26,6 +26,7 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
+import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -76,6 +77,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   starAnimation: {
     kupos: starAnimation,
   },
+  femaaleAnimation: {
+    kupos: femaleAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -111,6 +115,7 @@ function ServiceItemPB({
   viewersConfig,
   showLoginModal,
   isLoggedIn,
+  showLoginOption
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -409,12 +414,6 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
-          viewersConfig={viewersConfig}
-          isLoggedIn={isLoggedIn}
-          showLoginModal={showLoginModal}
-          isExpand={isExpand}
-          setIsExpand={setIsExpand}
-          coachKey={coachKey}
         />
       ) : (
         <div
@@ -436,6 +435,7 @@ function ServiceItemPB({
               showLoginModal={showLoginModal}
               viewersConfig={viewersConfig}
               getAnimationIcon={getAnimationIcon}
+              showLoginOption={showLoginOption}
             />
           )}
           <div
@@ -611,6 +611,8 @@ function ServiceItemPB({
                   getAnimationIcon={getAnimationIcon}
                   isChangeTicket={serviceItem.is_change_ticket === true}
                   isSoldOut={isSoldOut}
+                  ladiesBookedSeats={serviceItem.ladies_booked_seats}
+                  isDpEnabled={serviceItem.is_dp_enabled}
                 />
               </div>
             </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -247,6 +247,7 @@ function ServiceItemMobile({
             removeDuplicateSeats={removeDuplicateSeats}
             serviceItem={serviceItem}
             showLastSeats={showLastSeats}
+            discountSeatPriceColor={colors.discountSeatPriceColor}
           />
 
           {hasDiscount && (
@@ -302,6 +303,9 @@ function ServiceItemMobile({
               setIsExpanded(isItemExpanded ? null : serviceItem.id);
             }}
             isPeru={isPeru}
+            femaleAnim={serviceItem.icons.femaleAnim}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
           />
         </div>
 
@@ -332,7 +336,10 @@ function ServiceItemMobile({
               style={{ lineHeight: 1.6 }}
             >
               <div className="flex justify-between items-center">
-                {serviceItem?.is_dp_enabled ? (
+                {serviceItem?.is_dp_enabled &&
+                Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
+                  0 &&
+                (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
                   <div className="flex items-center gap-[6px]">
                     {/* {renderIcon("whiteFireIcon", "14px")} */}
                     <LottiePlayer
@@ -414,77 +421,8 @@ function ServiceItemMobile({
                       </span>
                     </span>
                   </div>
-                  {/* <div className="flex items-center">
-                  <span className="whitespace-nowrap">
-                    {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startComprandoCount(node, 4, 16)
-                      }
-                      style={{ fontVariantNumeric: "tabular-nums" }}
-                    />{" "}
-                    comprando
-                  </span>
-                </div> */}
                 </div>
               </div>
-              {/* <div className="flex flex-col gap-[4px]">
-              <div
-                className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
-              >
-                <div className={isLongOfferText ? "mt-[2px]" : ""}>
-                  <LottiePlayer
-                    animationData={serviceItem.icons.bombAnim}
-                    width="12px"
-                    height="12px"
-                  />
-                </div>
-                <div
-                  className={`ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                  style={{
-                    color: "#fff",
-                    lineHeight: 1.4,
-                  }}
-                >
-                  <span className="min-[380px]:text-[12px] bold-text">
-                    {serviceItem?.offer_text || ""}
-                  </span>{" "}
-                  <span className="min-[380px]:text-[12px]">|</span>{" "}
-                  <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                    Termina en&nbsp;
-                    <span
-                      className="bold-text"
-                      ref={(node) => commonService.startCountdown(node, 599)}
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        display: "inline-block",
-                      }}
-                    />
-                  </span>
-                </div>
-              </div>
-              <div
-                className="flex items-start"
-                style={{
-                  color: "#fff",
-                }}
-              >
-                <div>{renderIcon("personIcon", "16px")}</div>
-                <span className="flex-1" style={{ lineHeight: 1.4 }}>
-                  <span
-                    className="bold-text"
-                    ref={(node) => commonService.startViewerCount(node, viewersConfig)}
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="bold-text">personas</span>{" "}
-                  <span>
-                    {" "}
-                    {viewersConfig?.label || " están viendo este viaje"}
-                  </span>
-                </span>
-              </div>
-            </div> */}
             </div>
           </div>
         )}
@@ -516,6 +454,8 @@ function ServiceItemMobile({
             petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
             isSoldOut={isSoldOut}
             isChangeTicket={serviceItem.is_change_ticket === true}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
           />
         </div>
       </div>

package/src/components/ServiceItem/mobileTypes.ts

@@ -37,11 +37,14 @@ export interface MobileServiceItemProps {
     change_ticket_hours?: number;
     duration?: number;
     train_type_label?: string;
+    ladies_booked_seats?: string;
     is_dp_enabled?: boolean;
     offer_text?: string;
     is_direct_trip?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
+    dp_discount_percents?: Record<string, number>;
+    dp_discounted_seats?: string[];
     dep_validation_text?: string;
     metaData?: {};
     is_tracking_enabled?: boolean;
@@ -123,6 +126,7 @@ export interface MobileServiceItemProps {
       fireIcon?: string;
       directoIcon?: string;
       whiteFireIcon?: string
+      femaleAnim?:string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -171,6 +175,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
+    discountSeatPriceColor?: string
   };
   isCiva?: boolean;
   currencySign?: string;

package/src/components/ServiceItem/types.ts

@@ -41,15 +41,16 @@ export interface ServiceItemProps {
     offer_text?: string;
     is_direct_trip?: boolean;
     is_dp_enabled?: boolean;
-    dp_discount_percents?: Record<string, number | string> | Array<number | string>;
-    dp_discounted_seats?: Array<string | number>;
-    original_dp_price?: Record<string, number | string> | Array<number | string>;
+    dp_discount_percents?: any;
+    dp_discounted_seats?: any;
+    original_dp_price?: any;
     discount_type?: string;
     discount_value?: number;
     max_discount?: number;
     is_transpordo?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
+    ladies_booked_seats?: string;
     dep_validation_text?: string;
     metaData?: {};
     is_tracking_enabled?: boolean;
@@ -224,5 +225,6 @@ export interface ServiceItemProps {
   };
   showLoginModal?: any
   isLoggedIn?: any
+  showLoginOption?: boolean
   
 }

package/src/types.ts

@@ -57,6 +57,7 @@ export interface ServiceItemProps {
     is_direct_trip?: boolean;
     is_transpordo?: boolean;
     is_train_type?: boolean;
+    ladies_booked_seats?: any
     operator_service_name?: string;
     dep_validation_text?: string;
     metaData?: {};

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
+import FemaleBlock from "../FemaleBlock";
 
 interface ItemEntry {
   key: string;
@@ -15,6 +16,8 @@ interface BottomAmenitiesProps {
     is_tracking_enabled?: boolean;
     is_change_ticket?: boolean;
     pet_seat_info?: Record<string, any>;
+    ladies_booked_seats?: any;
+    is_dp_enabled?: boolean;
   };
   grayscaleClass: string;
   isSoldOut: boolean;
@@ -86,6 +89,17 @@ function BottomAmenities({
             isSoldOut={isSoldOut}
           />
         )}
+        {serviceItem.ladies_booked_seats &&
+          String(serviceItem.ladies_booked_seats).trim() !== "" &&
+          serviceItem?.is_dp_enabled === true && (
+            <FemaleBlock
+              translation={translation}
+              getAnimationIcon={getAnimationIcon}
+              colors={colors}
+              serviceItem={serviceItem}
+              isSoldOut={isSoldOut}
+            />
+          )}
         {hasPetInfo && (
           <PetBlock
             translation={translation}

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -13,6 +13,8 @@ interface ExpandedDropdownProps {
   getAnimationIcon?: (iconName: string) => any;
   isChangeTicket?: boolean;
   isSoldOut?: boolean;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function ExpandedDropdown({
@@ -22,6 +24,8 @@ function ExpandedDropdown({
   getAnimationIcon,
   isChangeTicket = false,
   isSoldOut,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -76,6 +80,18 @@ function ExpandedDropdown({
           </div>
         )}
 
+             {ladiesBookedSeats &&
+          String(ladiesBookedSeats).trim() !== "" &&
+          isDpEnabled === true && (
+            <div className="flex gap-[6px]">
+              <span style={{ marginTop: "2px" }}>•</span>
+              <span>
+                <span className="bold-text">Asientos para damas:</span> Esta
+                empresa cuenta con asientos recomendados para mujeres.
+              </span>
+            </div>
+          )}
+
         <div className="flex gap-[8px] text-[13.33px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>

package/src/ui/FemaleBlock.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+
+const FemaleBlock = ({
+  translation,
+  getAnimationIcon,
+  colors,
+  serviceItem,
+  isSoldOut,
+}) => (
+  <div className="flex items-center">
+    <div className="relative group cursor-pointer">
+      <div className="flex items-center">
+        <div className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}>
+          <LottiePlayer
+            // animationData={serviceItem.icons.flexibleAnim}
+            animationData={getAnimationIcon("femaaleAnimation")}
+            width="20px"
+            height="20px"
+          />
+        </div>
+        {/* <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
+          <span>{translation?.flexible}</span>
+        </div> */}
+      </div>
+      <div
+        className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
+        style={{
+          backgroundColor: colors.bottomStripColor,
+          lineHeight: "1.5",
+          zIndex: "1000",
+        }}
+      >
+        {/* Tooltip arrow */}
+        <div
+          className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
+          style={{ borderBottomColor: colors.bottomStripColor }}
+        ></div>
+        Esta empresa cuenta con asientos recomendados para mujeres.
+      </div>
+    </div>
+  </div>
+);
+
+export default FemaleBlock;

package/src/ui/OfferBanner.tsx

@@ -8,13 +8,17 @@ interface OfferBannerProps {
   isSoldOut: boolean;
   serviceItem: Pick<
     ServiceItemProps["serviceItem"],
-    "is_dp_enabled" | "offer_text"
+    | "is_dp_enabled"
+    | "offer_text"
+    | "dp_discount_percents"
+    | "dp_discounted_seats"
   >;
   renderIcon: (name: string, size: string) => React.ReactNode;
   isLoggedIn: any;
   showLoginModal: any;
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
+  showLoginOption?: boolean
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -26,6 +30,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   showLoginModal,
   viewersConfig,
   getAnimationIcon,
+  showLoginOption
 }) => {
   return (
     <div
@@ -38,7 +43,9 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
     >
       <div className="flex  justify-between items-center w-full">
         <div className="flex items-center ">
-          {serviceItem?.is_dp_enabled ? (
+          {serviceItem?.is_dp_enabled &&
+          Object.keys(serviceItem?.dp_discount_percents ?? {}).length === 0 &&
+          (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
             <div className="flex items-center gap-[5px]">
               {/* {renderIcon("whiteFireIcon", "14px")} */}
               <LottiePlayer
@@ -57,18 +64,24 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                 height="18px"
               />
               <div className="flex items-center mt-[2px]">
-                <span className="bold-text ml-[6px]">
+                <span
+                  className="bold-text"
+                  style={{
+                    marginLeft: serviceItem?.offer_text ? "6px" : "3px",
+                  }}
+                >
                   {(serviceItem?.offer_text || "").length > 30
                     ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
                     : serviceItem?.offer_text || ""}{" "}
-                  {isLoggedIn ? null : (
+                  {isLoggedIn && showLoginOption ? null : (
                     <span onClick={showLoginModal} className="cursor-pointer">
                       - registro
                     </span>
                   )}{" "}
                   &nbsp;
                 </span>{" "}
-                | Termina en&nbsp;
+                {serviceItem?.offer_text ? "|" : ""}
+                Termina en&nbsp;
                 <span
                   className="bold-text text-end"
                   ref={(node) => CommonService.startCountdown(node, 599)}
@@ -102,7 +115,12 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
               {" "}
               {viewersConfig?.label || " viendo"} |{" "}
               <span className="">
-                {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
+                {serviceItem?.is_dp_enabled &&
+                Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
+                  0 &&
+                (serviceItem?.dp_discounted_seats ?? []).length === 0
+                  ? null
+                  : "Quedan pocos • "}
                 <span
                   className="bold-text"
                   ref={(node) => CommonService.startComprandoCount(node, 4, 16)}

package/src/ui/SeatSection/SeatSection.tsx

@@ -241,11 +241,15 @@ function SeatSection({
   // ).find(([, percent]) => Number(percent));
   const dpDiscountEntry = Object.entries(
     serviceItem?.dp_discount_percents || {},
-  )[0];
+  ).sort(([, a], [, b]) => Number(a) - Number(b))[0];
   const dpDiscountPercent = dpDiscountEntry?.[1];
-  const getFirstDpValue = (source: any) => {
+  const getLowestDpValue = (source: any): number | undefined => {
     if (!source) return undefined;
-    return Array.isArray(source) ? source[0] : Object.values(source)[0];
+    const values: any[] = Array.isArray(source)
+      ? source
+      : Object.values(source);
+    const nums = values.map(Number).filter((n) => !isNaN(n) && n > 0);
+    return nums.length > 0 ? Math.min(...nums) : undefined;
   };
 
   const renderDpDiscountUi = (
@@ -315,7 +319,7 @@ function SeatSection({
           >
             <div
               className="absolute"
-              style={{ left: isPeru ? "-1px" : "-8px" }}
+              style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
             >
               {renderIcon("fireIcon", "16px")}
             </div>
@@ -353,7 +357,7 @@ function SeatSection({
         </div>
         <div>
           <div className="relative">
-            <div className="absolute -left-[20px] top-1/2 transform -translate-y-1/2">
+            <div className="absolute -left-[20px] top-1/3 transform -translate-y-1/2">
               {renderIcon("fireIcon", "16px")}
             </div>
             <div
@@ -389,8 +393,12 @@ function SeatSection({
   }
 
   if (dpDiscountEntry) {
-    const originalDpPrice = getFirstDpValue(serviceItem.original_dp_price);
-    const seatTypeFare = serviceItem.seat_types?.[0]?.fare ?? originalDpPrice;
+    const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
+    const allFares = (serviceItem.seat_types ?? [])
+      .map((st: any) => st.fare)
+      .filter((f: any) => f != null && !isNaN(Number(f)));
+    const seatTypeFare =
+      allFares.length > 0 ? Math.min(...allFares) : originalDpPrice;
 
     if (originalDpPrice && seatTypeFare) {
       return renderDpDiscountUi(originalDpPrice, seatTypeFare);
@@ -468,7 +476,8 @@ function SeatSection({
             <div
               className="absolute"
               style={{
-                left: isPeru ? "-1px" : "-8px",
+                left: isPeru ? "-1px" : "-18px",
+                bottom:"1px"
               }}
             >
               {renderIcon("fireIcon", "16px")}

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -22,6 +22,9 @@ interface BottomAmenitiesMobileProps {
   onDropdownToggle: () => void;
   isItemExpanded?: boolean;
   isPeru?: boolean;
+  femaleAnim?: any;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function BottomAmenitiesMobile({
@@ -45,6 +48,9 @@ function BottomAmenitiesMobile({
   onDropdownToggle,
   isItemExpanded,
   isPeru,
+  femaleAnim,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: BottomAmenitiesMobileProps): React.ReactElement {
   return (
     <div className={`${"flex justify-between items-center items-center "}`}>
@@ -132,6 +138,27 @@ function BottomAmenitiesMobile({
                 </div>
               )}
 
+              {/* Flexible ticket */}
+              {ladiesBookedSeats &&
+                String(ladiesBookedSeats).trim() !== "" &&
+                isDpEnabled === true && (
+                  <div className="flex items-center">
+                    <div className="relative group cursor-default">
+                      <div className="flex items-center">
+                        <div
+                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
+                        >
+                          <LottiePlayer
+                            animationData={femaleAnim}
+                            width="16px"
+                            height="16px"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
               {isTrackingEnabled && (
                 <div className="flex items-center mr-[10px]">
                   <div

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -24,6 +24,7 @@ interface DateTimeSectionMobileProps {
   serviceItem?: any;
   tooltipBgColor?: string;
   showLastSeats?: boolean;
+  discountSeatPriceColor?: string;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -123,6 +124,7 @@ function DateTimeSectionMobile({
   serviceItem,
   tooltipBgColor,
   showLastSeats,
+  discountSeatPriceColor,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -193,6 +195,7 @@ function DateTimeSectionMobile({
         serviceItem={serviceItem}
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
+        discountSeatPriceColor={discountSeatPriceColor}
       />
     </div>
   );

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -13,6 +13,8 @@ interface ExpandedDropdownMobileProps {
   petFriendlyAnim?: any;
   isSoldOut?: boolean;
   isChangeTicket?: boolean;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function ExpandedDropdownMobile({
@@ -22,6 +24,8 @@ function ExpandedDropdownMobile({
   petFriendlyAnim,
   isSoldOut,
   isChangeTicket = false,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -60,6 +64,17 @@ function ExpandedDropdownMobile({
             </span>
           </div>
         )}
+        {ladiesBookedSeats &&
+          String(ladiesBookedSeats).trim() !== "" &&
+          isDpEnabled === true && (
+            <div className="flex gap-[6px]">
+              <span style={{ marginTop: "2px" }}>•</span>
+              <span>
+                <span className="bold-text">Asientos para damas:</span> Esta
+                empresa cuenta con asientos recomendados para mujeres.
+              </span>
+            </div>
+          )}
         {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
           <div className="flex items-center">
             <div className={`relative group cursor-default `}>