kupos-ui-components-lib 10.4.21 → 10.4.24

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -387,13 +387,19 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
     ];
+    const seats = removeDuplicateSeats
+        ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
+        : serviceItem.seat_types || [];
+    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
+    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
     const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
     const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
     const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
     const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
-    const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
+    const serviceCardStyle = (hasOfferText || isNewUiEnabled || hasDpEnabled || hasDiscount) &&
+        !isSoldOut
         ? {
             borderColor: "transparent",
             borderStyle: "solid",
@@ -403,18 +409,15 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
             // zIndex: 1,
         }
         : {};
-    const seats = removeDuplicateSeats
-        ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
-        : serviceItem.seat_types || [];
-    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
-    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[30px]"
             : "mt-[20px]"}	` },
-        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(PeruOfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, colors: colors, coachKey: coachKey, isExpand: isExpand, isNewUiEnabled: isNewUiEnabled })),
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || hasDiscount) &&
+            !isSoldOut && (React.createElement(PeruOfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, colors: colors, coachKey: coachKey, isExpand: isExpand, isNewUiEnabled: isNewUiEnabled })),
+        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText || isNewUiEnabled || hasDiscount || hasDpEnabled) &&
+                !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { className: " pt-[20px]", style: {

package/dist/components/ServiceItem/types.d.ts

@@ -179,6 +179,7 @@ export interface ServiceItemProps {
         leftGradiantColor?: string;
         discountSeatPriceColor?: string;
         topLabelBgColor?: string;
+        boardingBorderColor?: string;
     };
     cityOrigin?: {
         value: number;

package/dist/ui/PeruOfferBanner.js

@@ -60,8 +60,7 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
     const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
     const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
-    const isLegacyOffer = !!offerText &&
-        !isNewUiEnabled;
+    const isLegacyOffer = !!offerText && !isNewUiEnabled;
     // const showViewers = serviceItem?.is_dp_enabled;
     const showViewers = isNewUiEnabled;
     const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
@@ -71,7 +70,7 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
             return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
         }
         // If new UI is enabled, show offer with registro and countdown
-        if (isNewUiEnabled && offerText) {
+        if (isNewUiEnabled || offerText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value)) {
             return (React.createElement(OfferBannerContent, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button }));
         }
         // If new UI is disabled, show offer text only
@@ -81,7 +80,9 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
         return null;
     };
     return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
-            background: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+            background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) ||
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value)
                 ? offerGradient
                 : background,
             opacity: isSoldOut ? 0.5 : 1,

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -1,5 +1,4 @@
 import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
 import CommonService from "../../utils/CommonService";
 const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
     return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
@@ -45,11 +44,12 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"
-                    : `1px solid ${colors.topLabelColor}`,
-                color: isSoldOut ? "#ccc" : colors.topLabelColor,
+                    : `1px solid ${colors.boardingBorderColor}`,
+                color: isSoldOut ? "#ccc" : colors.boardingBorderColor,
             } },
-            React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
-            React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, CommonService.capitalize(boardingName))))));
+            renderIcon("specialDeparture", "12px", {
+                filter: isSoldOut ? "grayscale(0.5)" : "",
+            }),
+            React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.boardingBorderColor}]` }, CommonService.capitalize(boardingName))))));
 };
 export default ServiceBadges;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.21",
+  "version": "10.4.24",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -586,6 +586,22 @@ function PeruServiceItemDesktop({
     },
   ];
 
+  const seats = removeDuplicateSeats
+    ? serviceItem.seat_types?.filter(
+        (seat, index, self) =>
+          index === self.findIndex((s) => s.label === seat.label),
+      ) || []
+    : serviceItem.seat_types || [];
+
+  const discountedSeats = seats.map((seat) => ({
+    ...seat,
+    ...CommonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
+  }));
+
+  const hasDiscount = discountedSeats.some(
+    (seat) => seat.originalPrice !== seat.discountedPrice,
+  );
+
   const otherItems = items.filter(
     (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
   );
@@ -598,7 +614,8 @@ function PeruServiceItemDesktop({
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
-    ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
+    (hasOfferText || isNewUiEnabled || hasDpEnabled || hasDiscount) &&
+    !isSoldOut
       ? {
           borderColor: "transparent",
           borderStyle: "solid",
@@ -609,22 +626,6 @@ function PeruServiceItemDesktop({
         }
       : {};
 
-  const seats = removeDuplicateSeats
-    ? serviceItem.seat_types?.filter(
-        (seat, index, self) =>
-          index === self.findIndex((s) => s.label === seat.label),
-      ) || []
-    : serviceItem.seat_types || [];
-
-  const discountedSeats = seats.map((seat) => ({
-    ...seat,
-    ...CommonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
-  }));
-
-  const hasDiscount = discountedSeats.some(
-    (seat) => seat.originalPrice !== seat.discountedPrice,
-  );
-
   return (
     <div
       className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
@@ -635,27 +636,29 @@ function PeruServiceItemDesktop({
           : "mt-[20px]"
       }	`}
     >
-      {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
-        <PeruOfferBanner
-          offerGradient={offerGradient}
-          isSoldOut={isSoldOut}
-          serviceItem={serviceItem}
-          renderIcon={renderIcon}
-          isLoggedIn={isLoggedIn}
-          showLoginModal={showLoginModal}
-          viewersConfig={viewersConfig}
-          getAnimationIcon={getAnimationIcon}
-          showLoginOption={showLoginOption}
-          colors={colors}
-          coachKey={coachKey}
-          isExpand={isExpand}
-          isNewUiEnabled={isNewUiEnabled}
-        />
-      )}
+      {(serviceItem?.offer_text || hasDpEnabled || hasDiscount) &&
+        !isSoldOut && (
+          <PeruOfferBanner
+            offerGradient={offerGradient}
+            isSoldOut={isSoldOut}
+            serviceItem={serviceItem}
+            renderIcon={renderIcon}
+            isLoggedIn={isLoggedIn}
+            showLoginModal={showLoginModal}
+            viewersConfig={viewersConfig}
+            getAnimationIcon={getAnimationIcon}
+            showLoginOption={showLoginOption}
+            colors={colors}
+            coachKey={coachKey}
+            isExpand={isExpand}
+            isNewUiEnabled={isNewUiEnabled}
+          />
+        )}
       <div
         id={`service-card-${serviceItem.id}`}
         className={`bg-white mx-auto relative ${
-          ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
+          (hasOfferText || isNewUiEnabled || hasDiscount || hasDpEnabled) &&
+          !isSoldOut
             ? "z-[3] rounded-[18px]"
             : "rounded-[10px] border border-[#ccc]"
         }`}

package/src/components/ServiceItem/types.ts

@@ -183,6 +183,7 @@ export interface ServiceItemProps {
     leftGradiantColor?: string;
     discountSeatPriceColor?: string;
     topLabelBgColor?: string;
+    boardingBorderColor?: string;
   };
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };

package/src/ui/PeruOfferBanner.tsx

@@ -223,9 +223,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
     (serviceItem as any)?.discount_value < 20;
   const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
 
-  const isLegacyOffer =
-    !!offerText &&
-    !isNewUiEnabled;
+  const isLegacyOffer = !!offerText && !isNewUiEnabled;
 
   // const showViewers = serviceItem?.is_dp_enabled;
   const showViewers = isNewUiEnabled;
@@ -240,7 +238,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
     }
 
     // If new UI is enabled, show offer with registro and countdown
-    if (isNewUiEnabled && offerText) {
+    if (isNewUiEnabled || offerText || (serviceItem as any)?.discount_value) {
       return (
         <OfferBannerContent
           offerText={offerText}
@@ -272,7 +270,9 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
       className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
       style={{
         background:
-          (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+          serviceItem?.is_dp_enabled ||
+          serviceItem?.dp_discount_percents ||
+          (serviceItem as any)?.discount_value
             ? offerGradient
             : background,
         opacity: isSoldOut ? 0.5 : 1,

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -104,20 +104,16 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
             backgroundColor: colors.topLabelBgColor || "#fff",
             border: isSoldOut
               ? "1px solid #ccc"
-              : `1px solid ${colors.topLabelColor}`,
-            color: isSoldOut ? "#ccc" : colors.topLabelColor,
+              : `1px solid ${colors.boardingBorderColor}`,
+            color: isSoldOut ? "#ccc" : colors.boardingBorderColor,
           }}
         >
-          <div className={isSoldOut ? "grayscale" : ""}>
-            <LottiePlayer
-              animationData={getAnimationIcon("priorityStageAnim")}
-              width="14px"
-              height="14px"
-            />
-          </div>
+          {renderIcon("specialDeparture", "12px", {
+            filter: isSoldOut ? "grayscale(0.5)" : "",
+          })}
           <div
             className={
-              isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
+              isSoldOut ? "text-white" : `text-[${colors.boardingBorderColor}]`
             }
           >
             {CommonService.capitalize(boardingName)}