kupos-ui-components-lib 10.3.0 → 10.3.2

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.
Files changed (14) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -3
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +18 -7
  3. package/dist/ui/BottomAmenities/BottomAmenities.d.ts +2 -1
  4. package/dist/ui/BottomAmenities/BottomAmenities.js +2 -2
  5. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +3 -2
  6. package/dist/ui/mobileweb/BottomAmenitiesMobile.js +1 -1
  7. package/dist/ui/mobileweb/ExpandedDropdownMobile.js +2 -2
  8. package/package.json +1 -1
  9. package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -7
  10. package/src/components/ServiceItem/ServiceItemMobile.tsx +104 -94
  11. package/src/ui/BottomAmenities/BottomAmenities.tsx +3 -1
  12. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +3 -2
  13. package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +1 -1
  14. package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +2 -2
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -89,7 +89,6 @@ const ANIMATION_MAP = {
89
89
  };
90
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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
91
91
  var _a, _b, _c;
92
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
93
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
94
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
95
94
  onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
@@ -157,7 +156,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
157
156
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
158
157
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
159
158
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
160
- console.log("🚀 ~ ServiceItemPB ~ hasOfferText:", hasOfferText, isNewUiEnabled, hasDpEnabled);
161
159
  const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
162
160
  ? {
163
161
  borderColor: "transparent",
@@ -341,7 +339,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
341
339
  color: colors.seatPriceColor,
342
340
  } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
343
341
  React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
344
- setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain }))),
342
+ setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled }))),
345
343
  isPeru ? null : (React.createElement("div", { style: {
346
344
  display: "grid",
347
345
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -30,10 +30,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
30
30
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
31
31
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
32
32
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
33
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
33
34
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
34
35
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
35
36
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
36
- const serviceCardStyle = (hasOfferText && isNewUiEnabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
+ const serviceCardStyle = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
38
  ? {
38
39
  borderColor: isSoldOut ? "#ccc" : "transparent",
39
40
  borderStyle: "solid",
@@ -166,9 +167,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
166
167
  lineHeight: 1.4,
167
168
  } },
168
169
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
169
- (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && isNewUiEnabled) ||
170
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
171
- !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
170
+ (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
172
171
  background: isSoldOut
173
172
  ? offerGradientWithOpacity
174
173
  : offerGradient,
@@ -219,13 +218,25 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
219
218
  opacity: isItemExpanded ? 1 : 0,
220
219
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
221
220
  position: "relative",
222
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? -2 : -1,
221
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
222
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
223
+ isNewUiEnabled
224
+ ? -2
225
+ : -1,
223
226
  } },
224
227
  React.createElement("div", { style: {
225
228
  overflow: "hidden",
226
229
  minHeight: 0,
227
- position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "relative" : undefined,
228
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
230
+ position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
231
+ isNewUiEnabled ||
232
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
233
+ ? "relative"
234
+ : undefined,
235
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
236
+ isNewUiEnabled ||
237
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
238
+ ? -3
239
+ : undefined,
229
240
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
230
241
  } },
231
242
  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 })))))));
package/dist/ui/BottomAmenities/BottomAmenities.d.ts CHANGED
@@ -25,6 +25,7 @@ interface BottomAmenitiesProps {
25
25
  onToggleExpand: () => void;
26
26
  isPeru?: boolean;
27
27
  isTrain?: boolean;
28
+ isDpEnabled?: boolean;
28
29
  }
29
- declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, }: BottomAmenitiesProps): React.ReactElement;
30
+ declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }: BottomAmenitiesProps): React.ReactElement;
30
31
  export default BottomAmenities;
package/dist/ui/BottomAmenities/BottomAmenities.js CHANGED
@@ -3,7 +3,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import FlexibleBlock from "../FlexibleBlock";
4
4
  import PetBlock from "../PetBlock";
5
5
  import FemaleBlock from "../FemaleBlock";
6
- function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, }) {
6
+ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }) {
7
7
  const hasPetInfo = serviceItem.pet_seat_info &&
8
8
  Object.keys(serviceItem.pet_seat_info).length > 0;
9
9
  const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -19,7 +19,7 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
19
19
  React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
20
20
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
21
21
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
22
- serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
22
+ serviceItem.is_change_ticket && !isDpEnabled && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
23
23
  serviceItem.ladies_booked_seats &&
24
24
  String(serviceItem.ladies_booked_seats).trim() !== "" &&
25
25
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true && (React.createElement(FemaleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
package/dist/ui/ExpendedDropDown/ExpandedDropdown.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }) {
3
+ console.log("🚀 ~ ExpandedDropdown ~ isDpEnabled:", isDpEnabled, serviceItem);
3
4
  const hasPetInfo = serviceItem.pet_seat_info &&
4
5
  Object.keys(serviceItem.pet_seat_info).length > 0;
5
6
  return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -7,7 +8,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
7
8
  borderRadius: "0 0 10px 10px",
8
9
  } },
9
10
  React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 } },
10
- isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
11
+ isPeru || isDpEnabled ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
11
12
  React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
12
13
  React.createElement("span", null,
13
14
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -41,7 +42,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
41
42
  React.createElement("span", null, renderIcon("cancelTicketIcon", "16px")),
42
43
  React.createElement("span", null,
43
44
  React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n: "),
44
- isDpEnabled ? (React.createElement("span", null, "Tu pasaje no podr\u00E1 ser anulado por tener una tarifa preferencial.")) : (React.createElement("span", null,
45
+ isDpEnabled ? (React.createElement("span", null, "Tu pasaje no podr\u00E1 ser anulado o cambiado por tener una tarifa preferencial.")) : (React.createElement("span", null,
45
46
  " ",
46
47
  "Tu pasaje puede ser anulado de forma online",
47
48
  " ",
package/dist/ui/mobileweb/BottomAmenitiesMobile.js CHANGED
@@ -18,7 +18,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
18
18
  React.createElement("div", { className: "flex items-center" },
19
19
  React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
20
20
  React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })))))) : null,
21
- isChangeTicket && (React.createElement("div", { className: "flex items-center" },
21
+ isChangeTicket && !isDpEnabled && (React.createElement("div", { className: "flex items-center" },
22
22
  React.createElement("div", { className: "relative group cursor-default" },
23
23
  React.createElement("div", { className: "flex items-center" },
24
24
  React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED
@@ -6,7 +6,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
6
6
  opacity: isSoldOut ? 0.5 : 1,
7
7
  } },
8
8
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
9
- isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
9
+ isPeru || isDpEnabled ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
10
10
  React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
11
11
  React.createElement("span", null,
12
12
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -50,7 +50,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
50
50
  React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n: "),
51
51
  isDpEnabled ? (React.createElement("span", null,
52
52
  " ",
53
- "Tu pasaje no podr\u00E1 ser anulado por tener una tarifa preferencial.")) : (React.createElement("span", null,
53
+ "Tu pasaje no podr\u00E1 ser anulado o cambiado por tener una tarifa preferencial.")) : (React.createElement("span", null,
54
54
  "Tu pasaje puede ser anulado de forma online",
55
55
  " ",
56
56
  React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.3.0",
3
+ "version": "10.3.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -152,7 +152,6 @@ function ServiceItemPB({
152
152
  isFlores,
153
153
  operatorLabel,
154
154
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
155
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
156
155
  const handleSeatSelect = (
157
156
  key: any,
158
157
  price: number,
@@ -270,12 +269,7 @@ function ServiceItemPB({
270
269
 
271
270
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
272
271
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
273
- console.log(
274
- "🚀 ~ ServiceItemPB ~ hasOfferText:",
275
- hasOfferText,
276
- isNewUiEnabled,
277
- hasDpEnabled,
278
- );
272
+
279
273
  const serviceCardStyle: React.CSSProperties =
280
274
  (isNewUiEnabled || hasDpEnabled) && !isSoldOut
281
275
  ? {
@@ -728,6 +722,7 @@ function ServiceItemPB({
728
722
  }
729
723
  isPeru={isPeru}
730
724
  isTrain={isTrain}
725
+ isDpEnabled={serviceItem.is_dp_enabled}
731
726
  />
732
727
  </div>
733
728
  </div>
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -87,12 +87,13 @@ function ServiceItemMobile({
87
87
  );
88
88
 
89
89
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
90
+ const hasDpEnabled = serviceItem?.is_dp_enabled === true;
90
91
 
91
92
  const hasOfferText = Boolean(serviceItem?.offer_text);
92
93
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
93
94
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
94
95
  const serviceCardStyle: React.CSSProperties =
95
- (hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled
96
+ isNewUiEnabled || serviceItem?.is_dp_enabled
96
97
  ? {
97
98
  borderColor: isSoldOut ? "#ccc" : "transparent",
98
99
  borderStyle: "solid",
@@ -456,118 +457,113 @@ function ServiceItemMobile({
456
457
  )}
457
458
 
458
459
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
459
- {((serviceItem?.offer_text && isNewUiEnabled) ||
460
- serviceItem?.is_dp_enabled) &&
461
- !isSoldOut && (
460
+ {(isNewUiEnabled || serviceItem?.is_dp_enabled) && !isSoldOut && (
461
+ <div
462
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
463
+ style={{
464
+ background: isSoldOut
465
+ ? offerGradientWithOpacity
466
+ : offerGradient,
467
+ // opacity: isSoldOut ? 0.5 : 1,
468
+ borderRadius: "0 0 14px 14px",
469
+ zIndex: -1,
470
+ }}
471
+ >
462
472
  <div
463
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
464
- style={{
465
- background: isSoldOut
466
- ? offerGradientWithOpacity
467
- : offerGradient,
468
- // opacity: isSoldOut ? 0.5 : 1,
469
- borderRadius: "0 0 14px 14px",
470
- zIndex: -1,
471
- }}
473
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
474
+ style={{ lineHeight: 1.6 }}
472
475
  >
473
- <div
474
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
475
- style={{ lineHeight: 1.6 }}
476
- >
477
- <div className="flex justify-between items-center">
478
- {serviceItem?.is_dp_enabled &&
479
- Object.keys(serviceItem?.dp_discount_percents ?? {})
480
- .length === 0 &&
481
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
482
- <div className="flex items-center gap-[6px]">
483
- {/* {renderIcon("whiteFireIcon", "14px")} */}
476
+ <div className="flex justify-between items-center">
477
+ {serviceItem?.is_dp_enabled &&
478
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
479
+ .length === 0 &&
480
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
481
+ <div className="flex items-center gap-[6px]">
482
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
483
+ <LottiePlayer
484
+ animationData={serviceItem.icons.starAnimation}
485
+ width="14px"
486
+ height="14px"
487
+ />
488
+
489
+ <span className="text-[#fff]">Más elegido</span>
490
+ </div>
491
+ ) : (
492
+ <div
493
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
494
+ >
495
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
484
496
  <LottiePlayer
485
- animationData={serviceItem.icons.starAnimation}
497
+ animationData={serviceItem.icons.bombAnim}
486
498
  width="14px"
487
499
  height="14px"
488
500
  />
489
-
490
- <span className="text-[#fff]">Más elegido</span>
491
501
  </div>
492
- ) : (
493
502
  <div
494
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
503
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
504
+ style={{
505
+ color: "#fff",
506
+ lineHeight: 1.4,
507
+ }}
495
508
  >
496
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
497
- <LottiePlayer
498
- animationData={serviceItem.icons.bombAnim}
499
- width="14px"
500
- height="14px"
509
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
510
+ Termina en&nbsp;
511
+ <span
512
+ className="bold-text"
513
+ ref={(node) =>
514
+ commonService.startCountdown(node, 599)
515
+ }
516
+ style={{
517
+ fontVariantNumeric: "tabular-nums",
518
+ display: "inline-block",
519
+ }}
501
520
  />
502
- </div>
503
- <div
504
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
505
- style={{
506
- color: "#fff",
507
- lineHeight: 1.4,
508
- }}
509
- >
510
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
511
- Termina en&nbsp;
512
- <span
513
- className="bold-text"
514
- ref={(node) =>
515
- commonService.startCountdown(node, 599)
516
- }
517
- style={{
518
- fontVariantNumeric: "tabular-nums",
519
- display: "inline-block",
520
- }}
521
- />
522
- </span>
523
- </div>
521
+ </span>
524
522
  </div>
525
- )}
526
- <div
527
- className="flex flex-col items-end"
528
- style={{
529
- color: "#fff",
530
- }}
531
- >
532
- <div className="flex items-center">
533
- <div className="mr-[4px]">
534
- {" "}
535
- <LottiePlayer
536
- animationData={serviceItem.icons.dotAnimation}
537
- width="12px"
538
- height="12px"
539
- />
540
- </div>
541
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
523
+ </div>
524
+ )}
525
+ <div
526
+ className="flex flex-col items-end"
527
+ style={{
528
+ color: "#fff",
529
+ }}
530
+ >
531
+ <div className="flex items-center">
532
+ <div className="mr-[4px]">
533
+ {" "}
534
+ <LottiePlayer
535
+ animationData={serviceItem.icons.dotAnimation}
536
+ width="12px"
537
+ height="12px"
538
+ />
539
+ </div>
540
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
541
+ <span
542
+ className="bold-text"
543
+ ref={(node) =>
544
+ commonService.startViewerCount(node, viewersConfig)
545
+ }
546
+ style={{ fontVariantNumeric: "tabular-nums" }}
547
+ />{" "}
548
+ <span> viendo</span> |{" "}
549
+ <span className="whitespace-nowrap">
550
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
542
551
  <span
543
552
  className="bold-text"
544
553
  ref={(node) =>
545
- commonService.startViewerCount(
546
- node,
547
- viewersConfig,
548
- )
554
+ commonService.startComprandoCount(node, 4, 16)
549
555
  }
550
556
  style={{ fontVariantNumeric: "tabular-nums" }}
551
557
  />{" "}
552
- <span> viendo</span> |{" "}
553
- <span className="whitespace-nowrap">
554
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
555
- <span
556
- className="bold-text"
557
- ref={(node) =>
558
- commonService.startComprandoCount(node, 4, 16)
559
- }
560
- style={{ fontVariantNumeric: "tabular-nums" }}
561
- />{" "}
562
- comprando
563
- </span>
558
+ comprando
564
559
  </span>
565
- </div>
560
+ </span>
566
561
  </div>
567
562
  </div>
568
563
  </div>
569
564
  </div>
570
- )}
565
+ </div>
566
+ )}
571
567
  <div
572
568
  style={{
573
569
  display: "grid",
@@ -577,15 +573,29 @@ function ServiceItemMobile({
577
573
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
578
574
  position: "relative",
579
575
  zIndex:
580
- serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
576
+ serviceItem?.offer_text ||
577
+ serviceItem?.is_dp_enabled ||
578
+ isNewUiEnabled
579
+ ? -2
580
+ : -1,
581
581
  }}
582
582
  >
583
583
  <div
584
584
  style={{
585
585
  overflow: "hidden",
586
586
  minHeight: 0,
587
- position: serviceItem?.offer_text ? "relative" : undefined,
588
- zIndex: serviceItem?.offer_text ? -3 : undefined,
587
+ position:
588
+ serviceItem?.offer_text ||
589
+ isNewUiEnabled ||
590
+ serviceItem?.is_dp_enabled
591
+ ? "relative"
592
+ : undefined,
593
+ zIndex:
594
+ serviceItem?.offer_text ||
595
+ isNewUiEnabled ||
596
+ serviceItem?.is_dp_enabled
597
+ ? -3
598
+ : undefined,
589
599
  marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
590
600
  }}
591
601
  >
package/src/ui/BottomAmenities/BottomAmenities.tsx CHANGED
@@ -29,6 +29,7 @@ interface BottomAmenitiesProps {
29
29
  onToggleExpand: () => void;
30
30
  isPeru?: boolean;
31
31
  isTrain?: boolean;
32
+ isDpEnabled?: boolean;
32
33
  }
33
34
 
34
35
  function BottomAmenities({
@@ -44,6 +45,7 @@ function BottomAmenities({
44
45
  onToggleExpand,
45
46
  isPeru,
46
47
  isTrain,
48
+ isDpEnabled,
47
49
  }: BottomAmenitiesProps): React.ReactElement {
48
50
  const hasPetInfo =
49
51
  serviceItem.pet_seat_info &&
@@ -84,7 +86,7 @@ function BottomAmenities({
84
86
  />
85
87
  </div>
86
88
  )}
87
- {serviceItem.is_change_ticket && (
89
+ {serviceItem.is_change_ticket && !isDpEnabled && (
88
90
  <FlexibleBlock
89
91
  translation={translation}
90
92
  getAnimationIcon={getAnimationIcon}
package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx CHANGED
@@ -31,6 +31,7 @@ function ExpandedDropdown({
31
31
  renderIcon,
32
32
  operatorLabel,
33
33
  }: ExpandedDropdownProps): React.ReactElement {
34
+ console.log("🚀 ~ ExpandedDropdown ~ isDpEnabled:", isDpEnabled, serviceItem);
34
35
  const hasPetInfo =
35
36
  serviceItem.pet_seat_info &&
36
37
  Object.keys(serviceItem.pet_seat_info).length > 0;
@@ -47,7 +48,7 @@ function ExpandedDropdown({
47
48
  className="flex flex-col gap-[6px] text-[13px] text-[#464647]"
48
49
  style={{ lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 }}
49
50
  >
50
- {isPeru ? null : isChangeTicket ? (
51
+ {isPeru || isDpEnabled ? null : isChangeTicket ? (
51
52
  <div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
52
53
  <span>{renderIcon("changeTicketIcon", "16px")}</span>
53
54
  {/* <span style={{ marginTop: "2px" }}>
@@ -110,7 +111,7 @@ function ExpandedDropdown({
110
111
  <span className="bold-text">Políticas de anulación: </span>
111
112
  {isDpEnabled ? (
112
113
  <span>
113
- Tu pasaje no podrá ser anulado por tener una tarifa
114
+ Tu pasaje no podrá ser anulado o cambiado por tener una tarifa
114
115
  preferencial.
115
116
  </span>
116
117
  ) : (
package/src/ui/mobileweb/BottomAmenitiesMobile.tsx CHANGED
@@ -123,7 +123,7 @@ function BottomAmenitiesMobile({
123
123
  ) : null}
124
124
 
125
125
  {/* Flexible ticket */}
126
- {isChangeTicket && (
126
+ {isChangeTicket && !isDpEnabled && (
127
127
  <div className="flex items-center">
128
128
  <div className="relative group cursor-default">
129
129
  <div className="flex items-center">
package/src/ui/mobileweb/ExpandedDropdownMobile.tsx CHANGED
@@ -48,7 +48,7 @@ function ExpandedDropdownMobile({
48
48
  className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
49
49
  style={{ lineHeight: 1.6 }}
50
50
  >
51
- {isPeru ? null : isChangeTicket ? (
51
+ {isPeru || isDpEnabled ? null : isChangeTicket ? (
52
52
  <div className="flex gap-[6px]">
53
53
  <span className="mt-[3px]">
54
54
  {renderIcon("changeTicketIcon", "14px")}
@@ -126,7 +126,7 @@ function ExpandedDropdownMobile({
126
126
  {isDpEnabled ? (
127
127
  <span>
128
128
  {" "}
129
- Tu pasaje no podrá ser anulado por tener una tarifa
129
+ Tu pasaje no podrá ser anulado o cambiado por tener una tarifa
130
130
  preferencial.
131
131
  </span>
132
132
  ) : (