kupos-ui-components-lib 10.3.1 → 10.3.3

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.
@@ -179,7 +179,6 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
179
179
  };
180
180
  const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, walletLabel, creditosLabel, currency, customSideBarwidth, isLinatal, insuranceData, isPeru, serviceFeeDataStateValue, isOpsite, }) => {
181
181
  var _a, _b, _c, _d, _e;
182
- console.log("🚀 ~ PaymentSideBarDesktop ~ walletMoney:", walletMoney);
183
182
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
184
183
  const depTime = droppingTimeOnward || "";
185
184
  const returnTime = droppingTimeReturn || "";
@@ -446,7 +445,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
446
445
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
447
446
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
448
447
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null)),
449
- (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
448
+ !!(serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
450
449
  React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
451
450
  React.createElement("div", { className: "img-hover" },
452
451
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
@@ -231,7 +231,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
231
231
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
232
232
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
233
233
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null)),
234
- (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
234
+ !!(serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
235
235
  React.createElement("div", { className: " font14 flex items-center gap-[5px]" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
236
236
  React.createElement("div", { className: "img-hover", onClick: () => setShowServicefeeModal(true) },
237
237
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
@@ -319,7 +319,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
319
319
  React.createElement("div", null,
320
320
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
321
321
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
322
- React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
322
+ React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru, isTrain: isTrain })),
323
323
  React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
324
324
  React.createElement("div", { style: {
325
325
  width: "1px",
@@ -339,7 +339,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
339
339
  color: colors.seatPriceColor,
340
340
  } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
341
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 &&
342
- setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain }))),
342
+ setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled }))),
343
343
  isPeru ? null : (React.createElement("div", { style: {
344
344
  display: "grid",
345
345
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
@@ -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;
@@ -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 })),
@@ -7,7 +7,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
7
7
  borderRadius: "0 0 10px 10px",
8
8
  } },
9
9
  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 } },
10
+ isPeru || isDpEnabled ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
11
11
  React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
12
12
  React.createElement("span", null,
13
13
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -41,7 +41,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
41
41
  React.createElement("span", null, renderIcon("cancelTicketIcon", "16px")),
42
42
  React.createElement("span", null,
43
43
  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,
44
+ isDpEnabled ? (React.createElement("span", null, "Tu pasaje no podr\u00E1 ser anulado o cambiado por tener una tarifa preferencial.")) : (React.createElement("span", null,
45
45
  " ",
46
46
  "Tu pasaje puede ser anulado de forma online",
47
47
  " ",
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
- declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, }: any) => React.JSX.Element;
2
+ declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, isTrain, }: any) => React.JSX.Element;
3
3
  export default RatingBlock;
@@ -1,13 +1,18 @@
1
1
  import React from "react";
2
2
  import RatingHover from "../components/ServiceItem/RatingHover";
3
- const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
4
- showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
5
- React.createElement("div", { className: "group relative ml-[10px] text-[12px]", style: {
6
- marginLeft: showRating ? "6px" : "0",
7
- color: isSoldOut ? "#c0c0c0" : "#464647",
8
- } },
9
- React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, serviceItem.operator_details[2]),
10
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
11
- React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
12
- serviceItem.operator_details[2]))));
3
+ import commonService from "../utils/CommonService";
4
+ const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, isTrain = false, }) => {
5
+ return (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
6
+ showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
7
+ React.createElement("div", { className: "group relative ml-[10px] text-[12px]", style: {
8
+ marginLeft: showRating ? "6px" : "0",
9
+ color: isSoldOut ? "#c0c0c0" : "#464647",
10
+ } },
11
+ React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, isTrain
12
+ ? commonService.truncateSeatLabel(serviceItem.operator_details[2], 14)
13
+ : commonService.capitalize(serviceItem.operator_details[2])),
14
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
15
+ React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
16
+ serviceItem.operator_details[2]))));
17
+ };
13
18
  export default RatingBlock;
@@ -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" : ""}` },
@@ -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.1",
3
+ "version": "10.3.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -339,7 +339,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
339
339
  serviceFeeDataStateValue,
340
340
  isOpsite,
341
341
  }) => {
342
- console.log("🚀 ~ PaymentSideBarDesktop ~ walletMoney:", walletMoney);
343
342
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
344
343
  const depTime = droppingTimeOnward || "";
345
344
  const returnTime = droppingTimeReturn || "";
@@ -813,7 +812,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
813
812
  </>
814
813
  )}
815
814
 
816
- {serviceFeeDataStateValue?.total_convenience_fee_amount && (
815
+ {!!serviceFeeDataStateValue?.total_convenience_fee_amount && (
817
816
  <PaymentItem
818
817
  label={
819
818
  <div style={{ display: "flex", alignItems: "center" }}>
@@ -588,7 +588,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
588
588
  </>
589
589
  )}
590
590
 
591
- {serviceFeeDataStateValue?.total_convenience_fee_amount && (
591
+ {!!serviceFeeDataStateValue?.total_convenience_fee_amount && (
592
592
  <PaymentItem
593
593
  label={
594
594
  <div style={{ display: "flex", alignItems: "center" }}>
@@ -619,6 +619,7 @@ function ServiceItemPB({
619
619
  t={t}
620
620
  translation={translation}
621
621
  isPeru={isPeru}
622
+ isTrain={isTrain}
622
623
  />
623
624
  </div>
624
625
 
@@ -722,6 +723,7 @@ function ServiceItemPB({
722
723
  }
723
724
  isPeru={isPeru}
724
725
  isTrain={isTrain}
726
+ isDpEnabled={serviceItem.is_dp_enabled}
725
727
  />
726
728
  </div>
727
729
  </div>
@@ -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}
@@ -47,7 +47,7 @@ function ExpandedDropdown({
47
47
  className="flex flex-col gap-[6px] text-[13px] text-[#464647]"
48
48
  style={{ lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 }}
49
49
  >
50
- {isPeru ? null : isChangeTicket ? (
50
+ {isPeru || isDpEnabled ? null : isChangeTicket ? (
51
51
  <div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
52
52
  <span>{renderIcon("changeTicketIcon", "16px")}</span>
53
53
  {/* <span style={{ marginTop: "2px" }}>
@@ -110,7 +110,7 @@ function ExpandedDropdown({
110
110
  <span className="bold-text">Políticas de anulación: </span>
111
111
  {isDpEnabled ? (
112
112
  <span>
113
- Tu pasaje no podrá ser anulado por tener una tarifa
113
+ Tu pasaje no podrá ser anulado o cambiado por tener una tarifa
114
114
  preferencial.
115
115
  </span>
116
116
  ) : (
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import RatingHover from "../components/ServiceItem/RatingHover";
3
+ import commonService from "../utils/CommonService";
3
4
 
4
5
  const RatingBlock = ({
5
6
  showRating,
@@ -9,46 +10,54 @@ const RatingBlock = ({
9
10
  t,
10
11
  translation,
11
12
  isPeru = false,
12
- }: any) => (
13
- <div
14
- className="flex items-center whitespace-nowrap"
15
- // style={{ opacity: isSoldOut ? 0.5 : 1 }}
16
- >
17
- {showRating && (
18
- <RatingHover
19
- serviceItem={serviceItem}
20
- isSoldOut={isSoldOut}
21
- colors={colors}
22
- t={t}
23
- translation={translation}
24
- isPeru={isPeru}
25
- />
26
- )}
27
-
13
+ isTrain = false,
14
+ }: any) => {
15
+ return (
28
16
  <div
29
- className="group relative ml-[10px] text-[12px]"
30
- style={{
31
- marginLeft: showRating ? "6px" : "0",
32
- color: isSoldOut ? "#c0c0c0" : "#464647",
33
- }}
17
+ className="flex items-center whitespace-nowrap"
18
+ // style={{ opacity: isSoldOut ? 0.5 : 1 }}
34
19
  >
35
- <span
36
- className={`block max-w-[120px] cursor-pointer text-[12px] ${isPeru ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}`}
37
- >
38
- {serviceItem.operator_details[2]}
39
- </span>
20
+ {showRating && (
21
+ <RatingHover
22
+ serviceItem={serviceItem}
23
+ isSoldOut={isSoldOut}
24
+ colors={colors}
25
+ t={t}
26
+ translation={translation}
27
+ isPeru={isPeru}
28
+ />
29
+ )}
30
+
40
31
  <div
41
- className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
42
- style={{ backgroundColor: colors.bottomStripColor, zIndex: "300" }}
32
+ className="group relative ml-[10px] text-[12px]"
33
+ style={{
34
+ marginLeft: showRating ? "6px" : "0",
35
+ color: isSoldOut ? "#c0c0c0" : "#464647",
36
+ }}
43
37
  >
38
+ <span
39
+ className={`block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}`}
40
+ >
41
+ {isTrain
42
+ ? commonService.truncateSeatLabel(
43
+ serviceItem.operator_details[2],
44
+ 14,
45
+ )
46
+ : commonService.capitalize(serviceItem.operator_details[2])}
47
+ </span>
44
48
  <div
45
- className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
46
- style={{ borderBottomColor: colors.bottomStripColor }}
47
- ></div>
48
- {serviceItem.operator_details[2]}
49
+ className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
50
+ style={{ backgroundColor: colors.bottomStripColor, zIndex: "300" }}
51
+ >
52
+ <div
53
+ className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
54
+ style={{ borderBottomColor: colors.bottomStripColor }}
55
+ ></div>
56
+ {serviceItem.operator_details[2]}
57
+ </div>
49
58
  </div>
50
59
  </div>
51
- </div>
52
- );
60
+ );
61
+ };
53
62
 
54
63
  export default RatingBlock;
@@ -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">
@@ -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
  ) : (