kupos-ui-components-lib 9.8.5 → 9.8.7

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -74,7 +74,7 @@ const ANIMATION_MAP = {
         kupos: femaleAnimation,
     },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -290,6 +290,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-6px",
             } },
             React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
                     ? {
@@ -299,7 +300,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         boxSizing: "border-box",
                     }
                     : {})) },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, renderIcon: renderIcon })))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, renderIcon: renderIcon, operatorLabel: operatorLabel })))),
         children,
         React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }

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

@@ -225,4 +225,5 @@ export interface ServiceItemProps {
     isLoggedIn?: any;
     showLoginOption?: boolean;
     isFlores?: boolean;
+    operatorLabel?: string;
 }

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -14,6 +14,7 @@ interface ExpandedDropdownProps {
     ladiesBookedSeats?: string;
     isDpEnabled?: boolean;
     renderIcon?: any;
+    operatorLabel?: string;
 }
-declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }) {
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -18,7 +18,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera",
+                    " ", operatorLabel !== null && operatorLabel !== void 0 ? operatorLabel : "kupospay",
+                    "."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
                 React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
                 React.createElement("span", null,
                     React.createElement("span", null,

package/dist/ui/OfferBanner.js

@@ -1,8 +1,8 @@
 import React from "react";
 import LottiePlayer from "../assets/LottiePlayer";
 import CommonService from "../utils/CommonService";
-const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption }) => {
-    var _a, _b, _c, _d;
+const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, }) => {
+    var _a, _b, _c, _d, _e, _f;
     return (React.createElement("div", { 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: offerGradient,
             opacity: isSoldOut ? 0.5 : 1,
@@ -23,7 +23,9 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
                             ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
                             : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
                         " ",
-                        isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
+                        isLoggedIn && showLoginOption ? null : Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length > 0 ||
+                            ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length >
+                                0 ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
                         " ",
                         "\u00A0"),
                     " ",
@@ -45,9 +47,9 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
                         " ",
                         React.createElement("span", { className: "" },
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                                Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length ===
+                                Object.keys((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _e !== void 0 ? _e : {}).length ===
                                     0 &&
-                                ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length === 0
+                                ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _f !== void 0 ? _f : []).length === 0
                                 ? null
                                 : "Quedan pocos • ",
                             React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -117,6 +117,7 @@ function ServiceItemPB({
   isLoggedIn,
   showLoginOption,
   isFlores,
+  operatorLabel,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -588,6 +589,7 @@ function ServiceItemPB({
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-6px",
               }}
             >
               <div
@@ -616,6 +618,7 @@ function ServiceItemPB({
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
                   renderIcon={renderIcon}
+                  operatorLabel={operatorLabel}
                 />
               </div>
             </div>

package/src/components/ServiceItem/types.ts

@@ -125,12 +125,12 @@ 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;
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -161,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 };
@@ -215,7 +215,7 @@ export interface ServiceItemProps {
   isAllinBus?: boolean;
   isExpand?: any;
   setIsExpand?: (value: any) => void;
-  coachKey?: number
+  coachKey?: number;
   viewersConfig?: {
     min: number;
     max: number;
@@ -223,8 +223,9 @@ export interface ServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
-  showLoginModal?: any
-  isLoggedIn?: any
-  showLoginOption?: boolean
-  isFlores?: boolean
+  showLoginModal?: any;
+  isLoggedIn?: any;
+  showLoginOption?: boolean;
+  isFlores?: boolean;
+  operatorLabel?: string;
 }

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 &&
@@ -62,8 +64,8 @@ function ExpandedDropdown({
               <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,7 +18,7 @@ interface OfferBannerProps {
   showLoginModal: any;
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
-  showLoginOption?: boolean
+  showLoginOption?: boolean;
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -30,7 +30,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   showLoginModal,
   viewersConfig,
   getAnimationIcon,
-  showLoginOption
+  showLoginOption,
 }) => {
   return (
     <div
@@ -73,7 +73,11 @@ 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>