kupos-ui-components-lib 10.0.8 → 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 (13) 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/ServiceBadges/ServiceBadges.js +3 -2
  5. package/dist/ui/mobileweb/ServiceBadgesMobile.js +3 -2
  6. package/dist/utils/CommonService.d.ts +1 -0
  7. package/dist/utils/CommonService.js +5 -0
  8. package/package.json +1 -1
  9. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +32 -25
  10. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +29 -23
  11. package/src/ui/ServiceBadges/ServiceBadges.tsx +3 -2
  12. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +3 -2
  13. 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/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.8",
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/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