kupos-ui-components-lib 10.4.63 → 10.4.65

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 (62) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +3 -1
  2. package/dist/components/ServiceItem/PeruServiceItemMobile.js +5 -3
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -2
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +11 -13
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +2 -0
  6. package/dist/components/ServiceItem/types.d.ts +2 -0
  7. package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +1 -0
  8. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +7 -1
  9. package/dist/ui/OfferBanner.d.ts +1 -1
  10. package/dist/ui/OfferBanner.js +9 -5
  11. package/dist/ui/PeruOfferBanner.d.ts +1 -1
  12. package/dist/ui/PeruOfferBanner.js +5 -1
  13. package/dist/ui/SeatSection/SeatSection.js +6 -4
  14. package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
  15. package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +1 -0
  16. package/dist/ui/mobileweb/ExpandedDropdownMobile.js +6 -1
  17. package/dist/ui/mobileweb/SeatSectionMobile.js +7 -3
  18. package/dist/utils/CommonService.d.ts +7 -0
  19. package/dist/utils/CommonService.js +6 -0
  20. package/package.json +1 -1
  21. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +4 -1
  22. package/src/components/ServiceItem/PeruServiceItemMobile.tsx +6 -3
  23. package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -2
  24. package/src/components/ServiceItem/ServiceItemMobile.tsx +12 -13
  25. package/src/components/ServiceItem/mobileTypes.ts +2 -0
  26. package/src/components/ServiceItem/types.ts +2 -0
  27. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +12 -2
  28. package/src/ui/OfferBanner.tsx +10 -5
  29. package/src/ui/PeruOfferBanner.tsx +7 -1
  30. package/src/ui/SeatSection/SeatSection.tsx +20 -16
  31. package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
  32. package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +13 -1
  33. package/src/ui/mobileweb/SeatSectionMobile.tsx +25 -18
  34. package/src/utils/CommonService.ts +13 -0
  35. package/dist/ServiceItemPb.d.ts +0 -4
  36. package/dist/ServiceItemPb.js +0 -486
  37. package/dist/assets/images/anims/service_list/60_percent_anim.json +0 -1
  38. package/dist/assets/images/directo-icon.png +0 -0
  39. package/dist/components/FilterSortBar/SingleFilterSheet.d.ts +0 -15
  40. package/dist/components/FilterSortBar/SingleFilterSheet.js +0 -21
  41. package/dist/components/PaymentOptions/PaymentOptionsDesktop.d.ts +0 -4
  42. package/dist/components/PaymentOptions/PaymentOptionsDesktop.js +0 -5
  43. package/dist/components/PaymentOptions/PaymentOptionsMobile.d.ts +0 -4
  44. package/dist/components/PaymentOptions/PaymentOptionsMobile.js +0 -5
  45. package/dist/components/PaymentOptions/ResponsivePaymentOptions.d.ts +0 -3
  46. package/dist/components/PaymentOptions/ResponsivePaymentOptions.js +0 -10
  47. package/dist/components/PaymentOptions/index.d.ts +0 -5
  48. package/dist/components/PaymentOptions/index.js +0 -4
  49. package/dist/components/PaymentOptions/mobileTypes.d.ts +0 -0
  50. package/dist/components/PaymentOptions/mobileTypes.js +0 -0
  51. package/dist/components/PaymentOptions/type.d.ts +0 -4
  52. package/dist/components/PaymentOptions/type.js +0 -1
  53. package/dist/components/ServiceItem/ExpandedDropdown.d.ts +0 -19
  54. package/dist/components/ServiceItem/ExpandedDropdown.js +0 -28
  55. package/dist/components/ServiceItem/ServiceItemDesktopPeru.d.ts +0 -6
  56. package/dist/components/ServiceItem/ServiceItemDesktopPeru.js +0 -612
  57. package/dist/example.d.ts +0 -5
  58. package/dist/example.js +0 -240
  59. package/dist/ui/ServiceType.d.ts +0 -9
  60. package/dist/ui/ServiceType.js +0 -9
  61. package/dist/ui/TopAmenities/PromoCountdown.d.ts +0 -18
  62. package/dist/ui/TopAmenities/PromoCountdown.js +0 -55
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -110,7 +110,9 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
110
110
  return label;
111
111
  })();
112
112
  let isSoldOut = serviceItem.available_seats <= 0;
113
- const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
113
+ // show_dp_ui: false renders a DP service with the regular card UI
114
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
115
+ !CommonService.isDpUiHidden(serviceItem);
114
116
  const peruDiscount = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0];
115
117
  const uiType = peruDiscount === null || peruDiscount === void 0 ? void 0 : peruDiscount.ui_type;
116
118
  const renderIcon = (iconKey, size = "14px") => {
package/dist/components/ServiceItem/PeruServiceItemMobile.js CHANGED
@@ -33,7 +33,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
33
33
  const displayOfferText = offerText.length > OFFER_TEXT_MAX_CHARS
34
34
  ? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
35
35
  : offerText;
36
- const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
36
+ // show_dp_ui: false renders a DP service with the regular card UI
37
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
38
+ !commonService.isDpUiHidden(serviceItem);
37
39
  const hasDpRibbon = hasDpEnabled && Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
38
40
  // ui_type comes from the active discount entry: 1 = offer-text-only tier,
39
41
  // 2 = full new-UI tier (timer, bomb animation, viewers).
@@ -117,7 +119,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
117
119
  const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
118
120
  ? extractStage(serviceItem.stage_details_arr, 1)
119
121
  : null;
120
- return (React.createElement("div", { className: `relative ${!hasOfferText || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
122
+ return (React.createElement("div", { className: `relative ${!hasOfferText || !hasDpEnabled ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
121
123
  isConexion ||
122
124
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
123
125
  showTopLabel ||
@@ -185,7 +187,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
185
187
  } },
186
188
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
187
189
  React.createElement("div", { className: "flex justify-between items-center" },
188
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
190
+ hasDpEnabled &&
189
191
  Object.keys((_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _s !== void 0 ? _s : {}).length ===
190
192
  0 &&
191
193
  ((_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _t !== void 0 ? _t : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -165,9 +165,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
165
165
  }
166
166
  return false;
167
167
  })();
168
+ // show_dp_ui: false renders a DP service with the regular card UI
169
+ const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
168
170
  const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
169
- const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
170
- const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
171
+ const dpDiscountPercent = isDpUiHidden ? undefined : dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
172
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true && !isDpUiHidden;
171
173
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
172
174
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
173
175
  const serviceCardStyle = ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -32,13 +32,15 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
32
32
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
33
33
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
34
34
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
35
+ // show_dp_ui: false renders a DP service with the regular card UI
36
+ const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !commonService.isDpUiHidden(serviceItem);
35
37
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
36
38
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
37
39
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
38
40
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
39
41
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
40
42
  const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
41
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
43
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
42
44
  ? {
43
45
  borderColor: isSoldOut ? "#ccc" : "transparent",
44
46
  borderStyle: "solid",
@@ -120,7 +122,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
120
122
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
121
123
  isFeatureDropDownExpand === true
122
124
  ? null
123
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!hasOfferText || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
125
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!hasOfferText || !showDpUi ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
124
126
  isConexion ||
125
127
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
126
128
  showTopLabel ||
@@ -128,8 +130,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
128
130
  ? "mt-[20px]"
129
131
  : "mt-[10px]"} `, style: { zIndex: 1 } },
130
132
  React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
131
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
132
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
133
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
133
134
  !isSoldOut
134
135
  ? "rounded-[18px]"
135
136
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -169,7 +170,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
169
170
  isNewUiEnabled &&
170
171
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
171
172
  !isSoldOut &&
172
- !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
173
+ !showDpUi && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
173
174
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
174
175
  borderRadius: "0 0 14px 14px",
175
176
  zIndex: -1,
@@ -185,8 +186,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
185
186
  } },
186
187
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
187
188
  ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
188
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
189
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
189
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
190
190
  !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
191
191
  background: isSoldOut
192
192
  ? offerGradientWithOpacity
@@ -197,7 +197,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
197
197
  } },
198
198
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
199
199
  React.createElement("div", { className: "flex justify-between items-center" },
200
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
200
+ showDpUi &&
201
201
  Object.keys((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _k !== void 0 ? _k : {})
202
202
  .length === 0 &&
203
203
  ((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _l !== void 0 ? _l : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
@@ -242,8 +242,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
242
242
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
243
243
  position: "relative",
244
244
  zIndex: hasOfferText ||
245
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
246
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
245
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
247
246
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
248
247
  ? -2
249
248
  : -1,
@@ -251,13 +250,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
251
250
  React.createElement("div", { style: {
252
251
  overflow: "hidden",
253
252
  minHeight: 0,
254
- position: hasOfferText || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
253
+ position: hasOfferText || isNewUiEnabled || showDpUi
255
254
  ? "relative"
256
255
  : undefined,
257
256
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
258
257
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
259
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
260
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
258
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
261
259
  ? -3
262
260
  : undefined,
263
261
  marginTop: hasOfferText ? "-15px" : "-10px",
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -37,6 +37,8 @@ export interface MobileServiceItemProps {
37
37
  train_type_label?: string;
38
38
  ladies_booked_seats?: string;
39
39
  is_dp_enabled?: boolean;
40
+ show_dp_ui?: boolean;
41
+ show_best_price?: boolean;
40
42
  offer_text?: string;
41
43
  is_direct_trip?: boolean;
42
44
  is_train_type?: boolean;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -41,6 +41,8 @@ export interface ServiceItemProps {
41
41
  offer_text?: string;
42
42
  is_direct_trip?: boolean;
43
43
  is_dp_enabled?: boolean;
44
+ show_dp_ui?: boolean;
45
+ show_best_price?: boolean;
44
46
  dp_discount_percents?: any;
45
47
  dp_discounted_seats?: any;
46
48
  original_dp_price?: any;
package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ExpandedDropdownProps {
5
5
  pet_seat_info?: Record<string, any>;
6
6
  is_change_ticket?: boolean;
7
7
  is_tracking_enabled?: boolean;
8
+ operator_service_name?: string;
8
9
  };
9
10
  isPeru?: boolean;
10
11
  translation?: Record<string, string>;
package/dist/ui/ExpendedDropDown/ExpandedDropdown.js CHANGED
@@ -2,12 +2,18 @@ import React from "react";
2
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
+ console.log("ExpandedDropdown serviceItem:", serviceItem);
5
6
  return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
6
7
  backgroundColor: "#ffefef",
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 || isDpEnabled ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
11
+ isPeru || isDpEnabled ? null : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) ===
12
+ "Cóndor Bus" ? (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
13
+ React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
14
+ React.createElement("span", null,
15
+ React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
16
+ " Esta empresa permite cambios hasta la hora del viaje."))) : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
11
17
  React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
12
18
  React.createElement("span", null,
13
19
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
package/dist/ui/OfferBanner.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "../components/ServiceItem/types";
3
- type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
3
+ type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
4
4
  interface OfferBannerColors {
5
5
  bottomStripColor?: string;
6
6
  }
package/dist/ui/OfferBanner.js CHANGED
@@ -10,6 +10,8 @@ function truncateOfferText(text) {
10
10
  }
11
11
  function hasDpDiscounts(serviceItem) {
12
12
  var _a, _b;
13
+ if (CommonService.isDpUiHidden(serviceItem))
14
+ return false;
13
15
  return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
14
16
  ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
15
17
  }
@@ -64,16 +66,18 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
64
66
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
65
67
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
66
68
  const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
69
+ // With show_dp_ui: false the banner renders as for a non-DP service
70
+ const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !CommonService.isDpUiHidden(serviceItem);
67
71
  const isLegacyOffer = !!offerText &&
68
72
  isNewUiEnabled &&
69
73
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
70
- !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
74
+ !showDpUi;
71
75
  const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
72
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
76
+ showDpUi;
73
77
  const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
74
78
  const renderLeftContent = () => {
75
79
  const hasDp = hasDpDiscounts(serviceItem);
76
- if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDp) {
80
+ if (showDpUi && !hasDp) {
77
81
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
78
82
  }
79
83
  if (isLegacyOffer) {
@@ -86,13 +90,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
86
90
  };
87
91
  return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end `, style: {
88
92
  background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
89
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
93
+ (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
90
94
  ? offerGradient
91
95
  : background,
92
96
  opacity: isSoldOut ? 0.5 : 1,
93
97
  zIndex: isLinatal ? "-1" : "0",
94
98
  paddingBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 2
95
- ? "12px"
99
+ ? "7px"
96
100
  : "9px",
97
101
  } },
98
102
  React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },
package/dist/ui/PeruOfferBanner.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "../components/ServiceItem/types";
3
- type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
3
+ type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
4
4
  interface OfferBannerColors {
5
5
  bottomStripColor?: string;
6
6
  }
package/dist/ui/PeruOfferBanner.js CHANGED
@@ -10,6 +10,8 @@ function truncateOfferText(text) {
10
10
  }
11
11
  function hasDpDiscounts(serviceItem) {
12
12
  var _a, _b;
13
+ if (CommonService.isDpUiHidden(serviceItem))
14
+ return false;
13
15
  return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
14
16
  ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
15
17
  }
@@ -64,7 +66,9 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, is
64
66
  ? (colors === null || colors === void 0 ? void 0 : colors.bottomStripColor) || offerGradient
65
67
  : offerGradient;
66
68
  const renderLeftContent = () => {
67
- if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDp) {
69
+ if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
70
+ !CommonService.isDpUiHidden(serviceItem) &&
71
+ !hasDp) {
68
72
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
69
73
  }
70
74
  if (isOfferTextOnly) {
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -281,6 +281,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
281
281
  // ).find(([, percent]) => Number(percent));
282
282
  const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {}).sort(([, a], [, b]) => Number(a) - Number(b))[0];
283
283
  const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
284
+ // show_dp_ui: false falls through to the regular fare layout
285
+ const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
284
286
  const getLowestDpValue = (source) => {
285
287
  if (!source)
286
288
  return undefined;
@@ -325,7 +327,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
325
327
  ? CommonService.currency(0, currencySign)
326
328
  : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
327
329
  };
328
- if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !dpDiscountEntry) {
330
+ if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !isDpUiHidden && !dpDiscountEntry) {
329
331
  const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
330
332
  const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
331
333
  return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] ", style: {
@@ -337,7 +339,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
337
339
  React.createElement("div", null,
338
340
  React.createElement("div", { className: "relative" },
339
341
  React.createElement("div", { className: "absolute -left-[20px] transform -translate-y-1/2 top-[16px]" }, renderIcon("fireIcon", "16px")),
340
- React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
342
+ CommonService.showDpBestPrice(serviceItem) && (React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
341
343
  animation: "pulse-zoom 2s ease-in-out infinite",
342
344
  whiteSpace: "nowrap",
343
345
  } },
@@ -346,12 +348,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
346
348
  whiteSpace: "nowrap",
347
349
  color: dpSeatColor,
348
350
  backgroundColor: tooltipColor,
349
- } }, "Mejor precio")),
351
+ } }, "Mejor precio"))),
350
352
  React.createElement("div", { className: "text-[22px] bold-text leading-[30px] text-center", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } }, availableSeats <= 0
351
353
  ? CommonService.currency(0, currencySign)
352
354
  : CommonService.discountedCurrency(lowestFare, currencySign))))));
353
355
  }
354
- if (dpDiscountEntry) {
356
+ if (dpDiscountEntry && !isDpUiHidden) {
355
357
  const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
356
358
  const allFares = ((_a = serviceItem.seat_types) !== null && _a !== void 0 ? _a : [])
357
359
  .map((st) => st.fare)
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import CommonService from "../../utils/CommonService";
3
3
  const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
4
- return (React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
+ return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
5
5
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
6
6
  backgroundColor: colors.topLabelBgColor || "#fff",
7
7
  border: isSoldOut
package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ExpandedDropdownMobileProps {
5
5
  pet_seat_info?: Record<string, any>;
6
6
  is_change_ticket?: boolean;
7
7
  is_tracking_enabled?: boolean;
8
+ operator_service_name?: string;
8
9
  };
9
10
  isPeru?: boolean;
10
11
  petSeatInfo?: Record<string, any>;
package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED
@@ -6,7 +6,12 @@ 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 || isDpEnabled ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
9
+ isPeru || isDpEnabled ? null : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) ===
10
+ "Cóndor Bus" ? (React.createElement("div", { className: "flex gap-[6px]" },
11
+ React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
12
+ React.createElement("span", null,
13
+ React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
14
+ " Esta empresa permite cambios hasta la hora del viaje."))) : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
10
15
  React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
11
16
  React.createElement("span", null,
12
17
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -156,7 +156,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
156
156
  const { discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
157
157
  const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
158
158
  return (React.createElement("div", { className: "relative flex flex-col justify-center h-full", style: { opacity: isSoldOut ? 0.5 : 1 } },
159
- React.createElement("div", { className: "absolute right-[0px]", style: {
159
+ commonService.showDpBestPrice(serviceItem) && (React.createElement("div", { className: "absolute right-[0px]", style: {
160
160
  animation: "pulse-zoom 2s ease-in-out infinite",
161
161
  top: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
162
162
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0) ||
@@ -166,7 +166,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
166
166
  } },
167
167
  React.createElement("span", { className: "rounded-[100px] px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]", style: {
168
168
  backgroundColor: tooltipBgColor,
169
- } }, "Mejor precio")),
169
+ } }, "Mejor precio"))),
170
170
  React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
171
171
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]" }, "Desde"),
172
172
  React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
@@ -255,12 +255,16 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
255
255
  const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
256
256
  const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
257
257
  const firstSeatFare = (_h = (_g = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.fare - b.fare)[0]) === null || _h === void 0 ? void 0 : _h.fare;
258
- const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
258
+ // show_dp_ui: false falls through to the regular fare layout
259
+ const isDpUiHidden = commonService.isDpUiHidden(serviceItem);
260
+ const hasDpDiscount = !isDpUiHidden &&
261
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
259
262
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
260
263
  originalDpPrice != null &&
261
264
  dpDiscountPercent != null &&
262
265
  firstSeatFare != null;
263
266
  return (React.createElement("div", { className: "content-center relative", style: { width: "40%", flexShrink: 0 } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
267
+ !isDpUiHidden &&
264
268
  !((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _j === void 0 ? void 0 : _j.length) &&
265
269
  !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (
266
270
  // Antes/Desde rows spread top/bottom so they line up with the
package/dist/utils/CommonService.d.ts CHANGED
@@ -16,6 +16,13 @@ declare const commonService: {
16
16
  formatDefaultLabel: (label: string) => string;
17
17
  addSeatDegree: (label: string) => string;
18
18
  getSeatDegreeIcon: (label: string, icons: any) => string | null;
19
+ isDpUiHidden: (serviceItem?: {
20
+ is_dp_enabled?: boolean;
21
+ show_dp_ui?: boolean;
22
+ }) => boolean;
23
+ showDpBestPrice: (serviceItem?: {
24
+ show_best_price?: boolean;
25
+ }) => boolean;
19
26
  calculateDiscountedPrice: (originalPrice: number | string, serviceItem?: {
20
27
  discount_type?: string;
21
28
  discount_value?: number;
package/dist/utils/CommonService.js CHANGED
@@ -332,6 +332,12 @@ const commonService = {
332
332
  const match = String(label !== null && label !== void 0 ? label : "").match(/\b(120|140|160|180)\b/);
333
333
  return match ? (icons === null || icons === void 0 ? void 0 : icons[`seat${match[1]}`]) || null : null;
334
334
  },
335
+ // The backend can switch off the DP look (gradient card, ribbon, DP fare
336
+ // block) per DP service with show_dp_ui: false. DP fare rules (no changes /
337
+ // cancellations) still apply. A missing flag keeps the current UI.
338
+ isDpUiHidden: (serviceItem) => Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_dp_ui) === false,
339
+ // "Mejor precio" pill on DP fares; a missing flag keeps the current UI.
340
+ showDpBestPrice: (serviceItem) => (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_best_price) !== false,
335
341
  calculateDiscountedPrice: (originalPrice, serviceItem) => {
336
342
  var _a;
337
343
  const price = typeof originalPrice === "string"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.63",
3
+ "version": "10.4.65",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -180,7 +180,10 @@ function PeruServiceItemDesktop({
180
180
  })();
181
181
 
182
182
  let isSoldOut = serviceItem.available_seats <= 0;
183
- const hasDpEnabled = serviceItem?.is_dp_enabled === true;
183
+ // show_dp_ui: false renders a DP service with the regular card UI
184
+ const hasDpEnabled =
185
+ serviceItem?.is_dp_enabled === true &&
186
+ !CommonService.isDpUiHidden(serviceItem);
184
187
  const peruDiscount = (serviceItem as any)?.discounts?.[0];
185
188
  const uiType = peruDiscount?.ui_type;
186
189
 
package/src/components/ServiceItem/PeruServiceItemMobile.tsx CHANGED
@@ -100,7 +100,10 @@ function PeruServiceItemMobile({
100
100
  offerText.length > OFFER_TEXT_MAX_CHARS
101
101
  ? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
102
102
  : offerText;
103
- const hasDpEnabled = serviceItem?.is_dp_enabled === true;
103
+ // show_dp_ui: false renders a DP service with the regular card UI
104
+ const hasDpEnabled =
105
+ serviceItem?.is_dp_enabled === true &&
106
+ !commonService.isDpUiHidden(serviceItem);
104
107
  const hasDpRibbon = hasDpEnabled && Boolean(serviceItem?.dp_discount_percents);
105
108
 
106
109
  // ui_type comes from the active discount entry: 1 = offer-text-only tier,
@@ -224,7 +227,7 @@ function PeruServiceItemMobile({
224
227
 
225
228
  return (
226
229
  <div
227
- className={`relative ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
230
+ className={`relative ${!hasOfferText || !hasDpEnabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
228
231
  serviceItem?.is_direct_trip ||
229
232
  isConexion ||
230
233
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -470,7 +473,7 @@ function PeruServiceItemMobile({
470
473
  style={{ lineHeight: 1.6 }}
471
474
  >
472
475
  <div className="flex justify-between items-center">
473
- {serviceItem?.is_dp_enabled &&
476
+ {hasDpEnabled &&
474
477
  Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
475
478
  0 &&
476
479
  (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -278,11 +278,13 @@ function ServiceItemPB({
278
278
  return false;
279
279
  })();
280
280
 
281
+ // show_dp_ui: false renders a DP service with the regular card UI
282
+ const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
281
283
  const dpDiscountEntry = Object.entries(
282
284
  serviceItem?.dp_discount_percents || {},
283
285
  )[0];
284
- const dpDiscountPercent = dpDiscountEntry?.[1];
285
- const hasDpEnabled = serviceItem?.is_dp_enabled === true;
286
+ const dpDiscountPercent = isDpUiHidden ? undefined : dpDiscountEntry?.[1];
287
+ const hasDpEnabled = serviceItem?.is_dp_enabled === true && !isDpUiHidden;
286
288
 
287
289
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
288
290
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -94,6 +94,9 @@ function ServiceItemMobile({
94
94
 
95
95
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
96
96
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
97
+ // show_dp_ui: false renders a DP service with the regular card UI
98
+ const showDpUi =
99
+ serviceItem?.is_dp_enabled && !commonService.isDpUiHidden(serviceItem);
97
100
 
98
101
  const isDiscountBelow20 =
99
102
  (serviceItem as any)?.discount_value > 0 &&
@@ -103,7 +106,7 @@ function ServiceItemMobile({
103
106
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
104
107
  const serviceCardStyle: React.CSSProperties =
105
108
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
106
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
109
+ (showDpUi && serviceItem?.dp_discount_percents)
107
110
  ? {
108
111
  borderColor: isSoldOut ? "#ccc" : "transparent",
109
112
  borderStyle: "solid",
@@ -286,7 +289,7 @@ function ServiceItemMobile({
286
289
  />
287
290
  ) : (
288
291
  <div
289
- className={`relative ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
292
+ className={`relative ${!hasOfferText || !showDpUi ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
290
293
  serviceItem?.is_direct_trip ||
291
294
  isConexion ||
292
295
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -300,8 +303,7 @@ function ServiceItemMobile({
300
303
  <div
301
304
  className={`z-1 ${
302
305
  ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
303
- (serviceItem?.is_dp_enabled &&
304
- serviceItem?.dp_discount_percents)) &&
306
+ (showDpUi && serviceItem?.dp_discount_percents)) &&
305
307
  !isSoldOut
306
308
  ? "rounded-[18px]"
307
309
  : "rounded-[10px] border border-[#ccc]"
@@ -492,7 +494,7 @@ function ServiceItemMobile({
492
494
  isNewUiEnabled &&
493
495
  serviceItem?.ui_type === 1 &&
494
496
  !isSoldOut &&
495
- !serviceItem?.is_dp_enabled && (
497
+ !showDpUi && (
496
498
  <div
497
499
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
498
500
  style={{
@@ -535,8 +537,7 @@ function ServiceItemMobile({
535
537
 
536
538
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
537
539
  {((isNewUiEnabled && serviceItem?.ui_type === 2) ||
538
- (serviceItem?.is_dp_enabled &&
539
- serviceItem?.dp_discount_percents)) &&
540
+ (showDpUi && serviceItem?.dp_discount_percents)) &&
540
541
  !isSoldOut && (
541
542
  <div
542
543
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
@@ -554,7 +555,7 @@ function ServiceItemMobile({
554
555
  style={{ lineHeight: 1.6 }}
555
556
  >
556
557
  <div className="flex justify-between items-center">
557
- {serviceItem?.is_dp_enabled &&
558
+ {showDpUi &&
558
559
  Object.keys(serviceItem?.dp_discount_percents ?? {})
559
560
  .length === 0 &&
560
561
  (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
@@ -662,8 +663,7 @@ function ServiceItemMobile({
662
663
  position: "relative",
663
664
  zIndex:
664
665
  hasOfferText ||
665
- (serviceItem?.is_dp_enabled &&
666
- serviceItem?.dp_discount_percents) ||
666
+ (showDpUi && serviceItem?.dp_discount_percents) ||
667
667
  (isNewUiEnabled && serviceItem?.ui_type === 2)
668
668
  ? -2
669
669
  : -1,
@@ -674,14 +674,13 @@ function ServiceItemMobile({
674
674
  overflow: "hidden",
675
675
  minHeight: 0,
676
676
  position:
677
- hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
677
+ hasOfferText || isNewUiEnabled || showDpUi
678
678
  ? "relative"
679
679
  : undefined,
680
680
  zIndex:
681
681
  serviceItem?.offer_text ||
682
682
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
683
- (serviceItem?.is_dp_enabled &&
684
- serviceItem?.dp_discount_percents)
683
+ (showDpUi && serviceItem?.dp_discount_percents)
685
684
  ? -3
686
685
  : undefined,
687
686
  marginTop: hasOfferText ? "-15px" : "-10px",
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -40,6 +40,8 @@ export interface MobileServiceItemProps {
40
40
  train_type_label?: string;
41
41
  ladies_booked_seats?: string;
42
42
  is_dp_enabled?: boolean;
43
+ show_dp_ui?: boolean;
44
+ show_best_price?: boolean;
43
45
  offer_text?: string;
44
46
  is_direct_trip?: boolean;
45
47
  is_train_type?: boolean;