kupos-ui-components-lib 9.10.6 → 9.10.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: ServiceItemProps & {
3
+ 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
@@ -87,7 +87,7 @@ const ANIMATION_MAP = {
87
87
  kupos: flameAnimation,
88
88
  },
89
89
  };
90
- 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
90
+ 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
91
91
  var _a, _b, _c;
92
92
  const getAnimationIcon = (icon) => {
93
93
  var _a;
@@ -312,13 +312,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
312
312
  } },
313
313
  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
314
314
  ? {
315
- borderLeft: isSoldOut ? "" : "3px solid #ff5964",
316
- borderRight: isSoldOut ? "" : "3px solid #ff8842",
315
+ borderLeft: isSoldOut ? "" : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
316
+ borderRight: isSoldOut ? "" : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
317
317
  borderRadius: "0 0 18px 18px",
318
318
  boxSizing: "border-box",
319
319
  }
320
320
  : {})) },
321
- 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 })))),
321
+ 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 })))),
322
322
  children,
323
323
  React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
324
324
  }
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { MobileServiceItemProps } from "./mobileTypes";
3
- declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
3
+ declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
@@ -18,7 +18,7 @@ const exceptions = [
18
18
  "blanco",
19
19
  "asiento_mascota",
20
20
  ];
21
- function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
21
+ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }) {
22
22
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
23
23
  const isItemExpanded = serviceItem.id === isExpanded;
24
24
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -216,6 +216,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
216
216
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
217
217
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
218
218
  } },
219
- React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))))));
219
+ React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))))));
220
220
  }
221
221
  export default ServiceItemMobile;
@@ -235,4 +235,5 @@ export interface MobileServiceItemProps {
235
235
  onTimeDropdownToggle?: (id?: string | number | null) => void;
236
236
  wowDealData?: any;
237
237
  isFlores?: boolean;
238
+ operatorLabel?: string;
238
239
  }
@@ -252,4 +252,5 @@ export interface ServiceItemProps {
252
252
  wowDealData?: any;
253
253
  isNewUiEnabled?: boolean;
254
254
  isFlores?: boolean;
255
+ operatorLabel?: string;
255
256
  }
@@ -14,6 +14,7 @@ interface ExpandedDropdownProps {
14
14
  ladiesBookedSeats?: string;
15
15
  isDpEnabled?: boolean;
16
16
  renderIcon?: any;
17
+ operatorLabel?: string;
17
18
  }
18
- declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }: ExpandedDropdownProps): React.ReactElement;
19
+ declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }: ExpandedDropdownProps): React.ReactElement;
19
20
  export default ExpandedDropdown;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }) {
2
+ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }) {
3
3
  const hasPetInfo = serviceItem.pet_seat_info &&
4
4
  Object.keys(serviceItem.pet_seat_info).length > 0;
5
5
  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
18
18
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
19
19
  " horas antes"),
20
20
  " ",
21
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
21
+ "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera\u00A0",
22
+ operatorLabel || "kupospay",
23
+ "."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
22
24
  React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
23
25
  React.createElement("span", null,
24
26
  React.createElement("span", null,
@@ -147,9 +147,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
147
147
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
148
148
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
149
149
  React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, !isNaN(Number(dpDiscountPercent)) &&
150
- Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
150
+ Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
151
151
  animation: "pulse-zoom 2s ease-in-out infinite",
152
152
  whiteSpace: "nowrap",
153
+ backgroundColor: discountSeatPriceColor || "#ff5964",
153
154
  } },
154
155
  Math.round(Number(dpDiscountPercent)),
155
156
  "% OFF"))),
@@ -167,7 +168,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
167
168
  transformOrigin: "center",
168
169
  } }))),
169
170
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
170
- React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
171
+ React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
171
172
  React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
172
173
  availableSeats <= 0
173
174
  ? CommonService.currency(0, currencySign)
@@ -17,7 +17,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
17
17
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
18
18
  " horas antes"),
19
19
  " ",
20
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera",
20
+ "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera\u00A0",
21
21
  operatorLabel || "kupospay",
22
22
  "."))) : (React.createElement("div", { className: "flex gap-[8px] " },
23
23
  React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.10.6",
3
+ "version": "9.10.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -143,6 +143,7 @@ function ServiceItemPB({
143
143
  onTimeDropdownToggle,
144
144
  wowDealData,
145
145
  isFlores,
146
+ operatorLabel,
146
147
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
147
148
  const getAnimationIcon = (icon: string) => {
148
149
  const animation = ANIMATION_MAP[icon];
@@ -670,8 +671,8 @@ function ServiceItemPB({
670
671
  hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
671
672
  ...(hasOfferText || hasDpEnabled
672
673
  ? {
673
- borderLeft: isSoldOut ? "" : "3px solid #ff5964",
674
- borderRight: isSoldOut ? "" : "3px solid #ff8842",
674
+ borderLeft: isSoldOut ? "" : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
675
+ borderRight: isSoldOut ? "" : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
675
676
  borderRadius: "0 0 18px 18px",
676
677
  boxSizing: "border-box",
677
678
  }
@@ -688,6 +689,7 @@ function ServiceItemPB({
688
689
  ladiesBookedSeats={serviceItem.ladies_booked_seats}
689
690
  isDpEnabled={serviceItem.is_dp_enabled}
690
691
  renderIcon={renderIcon}
692
+ operatorLabel={operatorLabel}
691
693
  />
692
694
  </div>
693
695
  </div>
@@ -61,6 +61,7 @@ function ServiceItemMobile({
61
61
  onTimeDropdownToggle,
62
62
  wowDealData,
63
63
  isFlores,
64
+ operatorLabel
64
65
  }: MobileServiceItemProps): React.ReactElement {
65
66
  const isItemExpanded = serviceItem.id === isExpanded;
66
67
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -576,6 +577,7 @@ function ServiceItemMobile({
576
577
  femaleAnim={serviceItem.icons.femaleAnim}
577
578
  flexibleAnim={serviceItem.icons.flexibleAnim}
578
579
  renderIcon={renderIcon}
580
+ operatorLabel={operatorLabel}
579
581
  />
580
582
  </div>
581
583
  </div>
@@ -243,4 +243,5 @@ export interface MobileServiceItemProps {
243
243
  onTimeDropdownToggle?: (id?: string | number | null) => void;
244
244
  wowDealData?: any;
245
245
  isFlores?: boolean;
246
+ operatorLabel?: string;
246
247
  }
@@ -259,4 +259,5 @@ export interface ServiceItemProps {
259
259
  wowDealData?: any;
260
260
  isNewUiEnabled?: boolean;
261
261
  isFlores?: boolean;
262
+ operatorLabel?: string;
262
263
  }
@@ -16,6 +16,7 @@ interface ExpandedDropdownProps {
16
16
  ladiesBookedSeats?: string;
17
17
  isDpEnabled?: boolean;
18
18
  renderIcon?: any;
19
+ operatorLabel?: string;
19
20
  }
20
21
 
21
22
  function ExpandedDropdown({
@@ -28,6 +29,7 @@ function ExpandedDropdown({
28
29
  ladiesBookedSeats,
29
30
  isDpEnabled,
30
31
  renderIcon,
32
+ operatorLabel,
31
33
  }: ExpandedDropdownProps): React.ReactElement {
32
34
  const hasPetInfo =
33
35
  serviceItem.pet_seat_info &&
@@ -62,8 +64,8 @@ function ExpandedDropdown({
62
64
  <span className="bold-text">
63
65
  hasta {serviceItem?.change_ticket_hours || 6} horas antes
64
66
  </span>{" "}
65
- de la salida del bus. El monto será reembolsado a tu billetera
66
- kupospay.
67
+ de la salida del bus. El monto será reembolsado a tu billetera&nbsp;
68
+ {operatorLabel || "kupospay"}.
67
69
  </span>
68
70
  </div>
69
71
  ) : (
@@ -279,10 +279,11 @@ function SeatSection({
279
279
  {!isNaN(Number(dpDiscountPercent)) &&
280
280
  Number(dpDiscountPercent) > 0 && (
281
281
  <span
282
- className={`rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
282
+ className={`rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
283
283
  style={{
284
284
  animation: "pulse-zoom 2s ease-in-out infinite",
285
285
  whiteSpace: "nowrap",
286
+ backgroundColor: discountSeatPriceColor || "#ff5964",
286
287
  }}
287
288
  >
288
289
  {Math.round(Number(dpDiscountPercent))}% OFF
@@ -317,7 +318,7 @@ function SeatSection({
317
318
  <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
318
319
  <span
319
320
  className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
320
- style={{ color: isSoldOut ? "#c0c0c0" : "#ff5964" }}
321
+ style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor||"#ff5964" }}
321
322
  >
322
323
  <div
323
324
  className="absolute"
@@ -60,7 +60,7 @@ function ExpandedDropdownMobile({
60
60
  <span className="bold-text">
61
61
  hasta {serviceItem?.change_ticket_hours || 6} horas antes
62
62
  </span>{" "}
63
- de la salida del bus. El monto será reembolsado a tu billetera
63
+ de la salida del bus. El monto será reembolsado a tu billetera&nbsp;
64
64
  {operatorLabel || "kupospay"}.
65
65
  </span>
66
66
  </div>