kupos-ui-components-lib 10.0.7 → 10.0.9

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 (15) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +11 -8
  2. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +8 -5
  3. package/dist/styles.css +3 -0
  4. package/dist/ui/SeatSection/SeatSection.js +2 -2
  5. package/dist/ui/ServiceBadges/ServiceBadges.js +3 -2
  6. package/dist/ui/mobileweb/ServiceBadgesMobile.js +3 -2
  7. package/dist/utils/CommonService.d.ts +1 -0
  8. package/dist/utils/CommonService.js +5 -0
  9. package/package.json +1 -1
  10. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +32 -25
  11. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +29 -23
  12. package/src/ui/SeatSection/SeatSection.tsx +11 -5
  13. package/src/ui/ServiceBadges/ServiceBadges.tsx +3 -2
  14. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +3 -2
  15. package/src/utils/CommonService.ts +5 -0
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -129,7 +129,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
129
129
  React.createElement("div", { className: "ml-7 text-xs mt-[5px]", style: { lineHeight: 1.3 } },
130
130
  boardingStage,
131
131
  ". ",
132
- boardingTime && isLinatal ? (boardingTime.includes("AM") || boardingTime.includes("PM") ? (React.createElement("span", null,
132
+ boardingTime || isLinatal ? (boardingTime.includes("AM") || boardingTime.includes("PM") ? (React.createElement("span", null,
133
133
  journeyTypeActive === 1
134
134
  ? cleanedDepTime
135
135
  : cleanBoardingReturnTime,
@@ -153,7 +153,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
153
153
  React.createElement("div", { className: "ml-7 text-xs mt-[5px]", style: { lineHeight: 1.3 } },
154
154
  droppingStage,
155
155
  ". ",
156
- droppingTime && isLinatal ? (droppingTime.includes("AM") || droppingTime.includes("PM") ? (React.createElement("span", null,
156
+ droppingTime || isLinatal ? (droppingTime.includes("AM") || droppingTime.includes("PM") ? (React.createElement("span", null,
157
157
  journeyTypeActive === 1
158
158
  ? cleanedDropDepTime
159
159
  : cleanDroppingReturnTime,
@@ -422,11 +422,14 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
422
422
  React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor } })) : null,
423
423
  removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "" })),
424
424
  React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
425
- React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, currencySign), className: "text-[13.33px]", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor } }),
426
- (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10 flex items-center gap-[5px]" },
427
- React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
428
- React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
429
- React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
425
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
426
+ React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount)
427
+ ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
428
+ : 0, currencySign), className: "text-[13.33px]", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor } }),
429
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10 flex items-center gap-[5px]" },
430
+ React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
431
+ React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
432
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null)),
430
433
  (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
431
434
  React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
432
435
  React.createElement("div", { className: "img-hover" },
@@ -441,7 +444,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
441
444
  walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), currency: "" })) : null,
442
445
  virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text " }, `${creditosLabel}(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
443
446
  showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), className: "text-[13.33px]", amount: CommonService.currency(isAgency ? netFareInUsd + agencyFee : netFareInUsd, currencySign), currency: "USD", customStyle: { color: "var(--secondary-color)" } })) : null),
444
- React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[9%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
447
+ React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
445
448
  React.createElement("div", { className: "flex justify-between items-center w-full" },
446
449
  React.createElement("div", { className: "black-text" }, "Total"),
447
450
  React.createElement("div", { className: "bold-text ", style: {
package/dist/components/PaymentSideBar/PaymentSideBarMobile.js CHANGED
@@ -206,11 +206,14 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
206
206
  backgroundColor: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesBgColor,
207
207
  color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesTextColor,
208
208
  } }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor } })) : null,
209
- React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, currencySign), className: "text-[14px]", showCurrency: false, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }, currency: "" }),
210
- (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font14 flex items-center gap-[5px]" },
211
- React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
212
- React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
213
- React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
209
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
210
+ React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount)
211
+ ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
212
+ : 0, currencySign), className: "text-[14px]", showCurrency: false, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }, currency: "" }),
213
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font14 flex items-center gap-[5px]" },
214
+ React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
215
+ React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
216
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null)),
214
217
  (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
215
218
  React.createElement("div", { className: " font14 flex items-center gap-[5px]" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
216
219
  React.createElement("div", { className: "img-hover", onClick: () => setShowServicefeeModal(true) },
package/dist/styles.css CHANGED
@@ -87,6 +87,9 @@
87
87
  .-bottom-\[30px\] {
88
88
  bottom: calc(30px * -1);
89
89
  }
90
+ .-bottom-\[35px\] {
91
+ bottom: calc(35px * -1);
92
+ }
90
93
  .-bottom-\[36px\] {
91
94
  bottom: calc(36px * -1);
92
95
  }
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -210,7 +210,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
210
210
  const filteredSeats = seats.filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
211
211
  const seatLabel = filteredSeats.length > 0
212
212
  ? removeDuplicateSeats
213
- ? CommonService.truncateSeatLabel(filteredSeats[0].label)
213
+ ? filteredSeats[0].label
214
214
  : filteredSeats[0].label
215
215
  : null;
216
216
  const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -357,7 +357,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
357
357
  color: isSoldOut ? "#c0c0c0" : priceColor,
358
358
  top: 0,
359
359
  bottom: 0,
360
- left: isTrain
360
+ left: isTrain || isPeru
361
361
  ? "73%"
362
362
  : "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
363
363
  right: 0,
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
+ import CommonService from "../../utils/CommonService";
3
4
  const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
4
5
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
5
6
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
@@ -12,7 +13,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
12
13
  renderIcon("specialDeparture", "12px", {
13
14
  filter: isSoldOut ? "grayscale(0.5)" : "",
14
15
  }),
15
- React.createElement("div", null, showTopLabel))),
16
+ React.createElement("div", null, CommonService.capitalize(showTopLabel)))),
16
17
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
17
18
  backgroundColor: "#fff",
18
19
  border: isSoldOut
@@ -45,6 +46,6 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
45
46
  } },
46
47
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
47
48
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
48
- React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, boardingName)))));
49
+ React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, CommonService.capitalize(boardingName))))));
49
50
  };
50
51
  export default ServiceBadges;
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import CommonService from "../../utils/CommonService";
2
3
  const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, isAllinBus = false, boardingName, }) => {
3
4
  return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
5
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
@@ -11,7 +12,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
11
12
  React.createElement("div", { className: isSoldOut ? "grayscale" : "", style: { marginTop: "1px" } }, renderIcon("specialDeparture", "12px", { marginTop: "1px" })),
12
13
  React.createElement("div", { style: {
13
14
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
14
- } }, showTopLabel))),
15
+ } }, CommonService.capitalize(showTopLabel)))),
15
16
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
16
17
  backgroundColor: "#fff",
17
18
  border: isSoldOut
@@ -49,7 +50,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
49
50
  React.createElement("div", { className: isSoldOut ? "grayscale" : "", style: { marginTop: "1px" } }, renderIcon("specialDeparture", "12px", { marginTop: "1px" })),
50
51
  React.createElement("div", { style: {
51
52
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
52
- } }, boardingName))
53
+ } }, CommonService.capitalize(boardingName)))
53
54
  // <div
54
55
  // className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
55
56
  // style={{
package/dist/utils/CommonService.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const commonService: {
9
9
  getAmenityName: (rawAmenity: string) => string;
10
10
  getSeatNameForFilters: (rawSeat: any) => any;
11
11
  capitalize: (str: any) => any;
12
+ capitalizeFirstLetter: (str: any) => string;
12
13
  formatTimeLabel: (label: string) => string;
13
14
  formatDefaultLabel: (label: string) => string;
14
15
  calculateDiscountedPrice: (originalPrice: number | string, serviceItem?: {
package/dist/utils/CommonService.js CHANGED
@@ -272,6 +272,11 @@ const commonService = {
272
272
  }
273
273
  return "";
274
274
  },
275
+ capitalizeFirstLetter: (str) => {
276
+ if (!str)
277
+ return "";
278
+ return commonService.capitalize(String(str));
279
+ },
275
280
  formatTimeLabel: (label) => {
276
281
  if (!label)
277
282
  return "";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.0.7",
3
+ "version": "10.0.9",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -187,7 +187,7 @@ const renderSummaryDetailsCard = ({
187
187
  </div>
188
188
  <div className="ml-7 text-xs mt-[5px]" style={{ lineHeight: 1.3 }}>
189
189
  {boardingStage}. {/* {boardingTime && `. ${boardingTime}`} */}
190
- {boardingTime && isLinatal ? (
190
+ {boardingTime || isLinatal ? (
191
191
  boardingTime.includes("AM") || boardingTime.includes("PM") ? (
192
192
  <span>
193
193
  {journeyTypeActive === 1
@@ -229,7 +229,7 @@ const renderSummaryDetailsCard = ({
229
229
  </div>
230
230
  <div className="ml-7 text-xs mt-[5px]" style={{ lineHeight: 1.3 }}>
231
231
  {droppingStage}. {/* {droppingTime && `. ${droppingTime}`} */}
232
- {droppingTime && isLinatal ? (
232
+ {droppingTime || isLinatal ? (
233
233
  droppingTime.includes("AM") || droppingTime.includes("PM") ? (
234
234
  <span>
235
235
  {journeyTypeActive === 1
@@ -736,28 +736,35 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
736
736
  {renderDiscount(discountAmount)}
737
737
  </div>
738
738
 
739
- <PaymentItem
740
- label={`${translation?.promotionalCode}:`}
741
- amount={CommonService.currency(
742
- promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0,
743
- currencySign,
744
- )}
745
- className="text-[13.33px]"
746
- currency={currency}
747
- customStyle={{ color: colors?.promoCodePriceColor }}
748
- />
749
- {promoCode?.promoCouponAmount ? (
750
- <div className="promocode font10 flex items-center gap-[5px]">
751
- <div>{promoCode?.promoCode}</div>
752
- <span className="promo-remove" onClick={onPromoRemove}>
753
- <img
754
- src={icons?.closeIcon}
755
- alt="close"
756
- className="w-[16px] h-[16px]"
757
- />
758
- </span>
759
- </div>
760
- ) : null}
739
+ {promoCode?.promoCodeApplied && (
740
+ <>
741
+ <PaymentItem
742
+ label={`${translation?.promotionalCode}:`}
743
+ amount={CommonService.currency(
744
+ promoCode?.promoCouponAmount
745
+ ? promoCode?.promoCouponAmount
746
+ : 0,
747
+ currencySign,
748
+ )}
749
+ className="text-[13.33px]"
750
+ currency={currency}
751
+ customStyle={{ color: colors?.promoCodePriceColor }}
752
+ />
753
+ {promoCode?.promoCouponAmount ? (
754
+ <div className="promocode font10 flex items-center gap-[5px]">
755
+ <div>{promoCode?.promoCode}</div>
756
+ <span className="promo-remove" onClick={onPromoRemove}>
757
+ <img
758
+ src={icons?.closeIcon}
759
+ alt="close"
760
+ className="w-[16px] h-[16px]"
761
+ />
762
+ </span>
763
+ </div>
764
+ ) : null}
765
+ </>
766
+ )}
767
+
761
768
  {serviceFeeDataStateValue?.total_convenience_fee_amount && (
762
769
  <PaymentItem
763
770
  label={
@@ -839,7 +846,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
839
846
  ) : null}
840
847
  </div>
841
848
  <div
842
- className={` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[9%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
849
+ className={` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
843
850
  style={{ backgroundColor: colors?.bottomStripColor }}
844
851
  >
845
852
  <div className="flex justify-between items-center w-full">
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -504,29 +504,35 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
504
504
  />
505
505
  ) : null}
506
506
 
507
- <PaymentItem
508
- label={`${translation?.promotionalCode}:`}
509
- amount={CommonService.currency(
510
- promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0,
511
- currencySign,
512
- )}
513
- className="text-[14px]"
514
- showCurrency={false}
515
- customStyle={{ color: colors?.promoCodePriceColor }}
516
- currency=""
517
- />
518
- {promoCode?.promoCouponAmount ? (
519
- <div className="promocode font14 flex items-center gap-[5px]">
520
- <div>{promoCode?.promoCode}</div>
521
- <span className="promo-remove" onClick={onPromoRemove}>
522
- <img
523
- src={icons?.closeIcon}
524
- alt="close"
525
- className="w-[16px] h-[16px]"
526
- />
527
- </span>
528
- </div>
529
- ) : null}
507
+ {promoCode?.promoCodeApplied && (
508
+ <>
509
+ <PaymentItem
510
+ label={`${translation?.promotionalCode}:`}
511
+ amount={CommonService.currency(
512
+ promoCode?.promoCouponAmount
513
+ ? promoCode?.promoCouponAmount
514
+ : 0,
515
+ currencySign,
516
+ )}
517
+ className="text-[14px]"
518
+ showCurrency={false}
519
+ customStyle={{ color: colors?.promoCodePriceColor }}
520
+ currency=""
521
+ />
522
+ {promoCode?.promoCouponAmount ? (
523
+ <div className="promocode font14 flex items-center gap-[5px]">
524
+ <div>{promoCode?.promoCode}</div>
525
+ <span className="promo-remove" onClick={onPromoRemove}>
526
+ <img
527
+ src={icons?.closeIcon}
528
+ alt="close"
529
+ className="w-[16px] h-[16px]"
530
+ />
531
+ </span>
532
+ </div>
533
+ ) : null}
534
+ </>
535
+ )}
530
536
 
531
537
  {serviceFeeDataStateValue?.total_convenience_fee_amount && (
532
538
  <PaymentItem
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -390,7 +390,7 @@ function SeatSection({
390
390
  const seatLabel =
391
391
  filteredSeats.length > 0
392
392
  ? removeDuplicateSeats
393
- ? CommonService.truncateSeatLabel(filteredSeats[0].label)
393
+ ? filteredSeats[0].label
394
394
  : filteredSeats[0].label
395
395
  : null;
396
396
 
@@ -416,7 +416,12 @@ function SeatSection({
416
416
  <span className="text-[13.33px] whitespace-nowrap flex items-center">
417
417
  {isSeatIcon && !hasDiscount && (
418
418
  <img
419
- src={getSeatTypeIcon(seatLabel as string, serviceItem) as string}
419
+ src={
420
+ getSeatTypeIcon(
421
+ seatLabel as string,
422
+ serviceItem,
423
+ ) as string
424
+ }
420
425
  alt="seattype"
421
426
  style={{
422
427
  width: "20px",
@@ -711,9 +716,10 @@ function SeatSection({
711
716
  color: isSoldOut ? "#c0c0c0" : priceColor,
712
717
  top: 0,
713
718
  bottom: 0,
714
- left: isTrain
715
- ? "73%"
716
- : "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
719
+ left:
720
+ isTrain || isPeru
721
+ ? "73%"
722
+ : "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
717
723
  right: 0,
718
724
  justifyContent: isCentered ? "center" : "",
719
725
  gap: "10px",
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
+ import CommonService from "../../utils/CommonService";
3
4
 
4
5
  interface ServiceBadgesProps {
5
6
  showTopLabel?: string;
@@ -48,7 +49,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
48
49
  filter: isSoldOut ? "grayscale(0.5)" : "",
49
50
  })}
50
51
  {/* </div> */}
51
- <div>{showTopLabel}</div>
52
+ <div>{CommonService.capitalize(showTopLabel)}</div>
52
53
  </div>
53
54
  )}
54
55
  {serviceItem?.is_transpordo && (
@@ -115,7 +116,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
115
116
  isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
116
117
  }
117
118
  >
118
- {boardingName}
119
+ {CommonService.capitalize(boardingName)}
119
120
  </div>
120
121
  </div>
121
122
  )}
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
+ import CommonService from "../../utils/CommonService";
3
4
 
4
5
  interface ServiceBadgesMobileProps {
5
6
  showTopLabel?: string;
@@ -52,7 +53,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
52
53
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
53
54
  }}
54
55
  >
55
- {showTopLabel}
56
+ {CommonService.capitalize(showTopLabel)}
56
57
  </div>
57
58
  </div>
58
59
  )}
@@ -123,7 +124,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
123
124
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
124
125
  }}
125
126
  >
126
- {boardingName}
127
+ {CommonService.capitalize(boardingName)}
127
128
  </div>
128
129
  </div>
129
130
 
package/src/utils/CommonService.ts CHANGED
@@ -286,6 +286,11 @@ const commonService = {
286
286
  return "";
287
287
  },
288
288
 
289
+ capitalizeFirstLetter: (str: any): string => {
290
+ if (!str) return "";
291
+ return commonService.capitalize(String(str));
292
+ },
293
+
289
294
  formatTimeLabel: (label: string) => {
290
295
  if (!label) return "";
291
296