kupos-ui-components-lib 9.5.5 → 9.5.7

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 (11) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +19 -8
  2. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +18 -8
  3. package/dist/components/PaymentSideBar/types.d.ts +1 -0
  4. package/dist/ui/ServiceBadges/ServiceBadges.js +17 -9
  5. package/dist/ui/mobileweb/ServiceBadgesMobile.js +17 -9
  6. package/package.json +1 -1
  7. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +25 -7
  8. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +24 -7
  9. package/src/components/PaymentSideBar/types.ts +2 -0
  10. package/src/ui/ServiceBadges/ServiceBadges.tsx +17 -15
  11. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +17 -9
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -177,7 +177,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
177
177
  duration,
178
178
  " horas")))))));
179
179
  };
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, }) => {
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, }) => {
181
181
  var _a, _b, _c, _d, _e;
182
182
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
183
183
  const depTime = droppingTimeOnward || "";
@@ -351,6 +351,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
351
351
  React.createElement("div", { className: "mt-3 text-[13.33px]", style: { margin: checkWhatsappEligibility ? "0" : "6px 0" } },
352
352
  selectSeatOnward && selectedOnward && selectedOnward[0]
353
353
  ? selectedOnward[0].map((val, key) => {
354
+ console.log("🚀 ~ PaymentSideBarDesktop ~ val:", val);
354
355
  return (React.createElement("div", { key: key, className: "flex justify-between items-center w-[100%]" },
355
356
  React.createElement("div", null,
356
357
  React.createElement("span", null,
@@ -368,7 +369,9 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
368
369
  } },
369
370
  currency ? currency : "",
370
371
  " ",
371
- CommonService.currency(val.fare * selectedOnward[1][key], currencySign))));
372
+ CommonService.currency(isPeru
373
+ ? Math.round(val.fare * selectedOnward[1][key] * 100) / 100
374
+ : val.fare * selectedOnward[1][key], currencySign))));
372
375
  })
373
376
  : null,
374
377
  selectSeatReturn && selectedReturn && selectedReturn[0]
@@ -390,7 +393,9 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
390
393
  } },
391
394
  currency ? currency : "",
392
395
  " ",
393
- CommonService.currency(val.fare * selectedReturn[1][key], currencySign))));
396
+ CommonService.currency(isPeru
397
+ ? Math.round(val.fare * selectedReturn[1][key] * 100) / 100
398
+ : val.fare * selectedReturn[1][key], currencySign))));
394
399
  })
395
400
  : null),
396
401
  (insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_enabled) ? (React.createElement("div", { className: "flex justify-between items-center w-[100%] text-[13.33px]", style: { margin: checkWhatsappEligibility ? "0" : "6px 0" } },
@@ -437,10 +442,16 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
437
442
  } },
438
443
  currency ? currency : "",
439
444
  " ",
440
- CommonService.currency(removeDiscountAtomValue
441
- ? 0
442
- : isAgency
443
- ? netFare + agencyFee
444
- : netFare, currencySign)))))));
445
+ CommonService.currency(isPeru
446
+ ? Math.round((removeDiscountAtomValue
447
+ ? 0
448
+ : isAgency
449
+ ? netFare + agencyFee
450
+ : netFare) * 100) / 100
451
+ : removeDiscountAtomValue
452
+ ? 0
453
+ : isAgency
454
+ ? netFare + agencyFee
455
+ : netFare, currencySign)))))));
445
456
  };
446
457
  export default PaymentSideBarDesktop;
package/dist/components/PaymentSideBar/PaymentSideBarMobile.js CHANGED
@@ -73,7 +73,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
73
73
  ? `${getRoundedHour(duration)}hrs aprox`
74
74
  : `${duration} horas`)))))));
75
75
  };
76
- const PaymentSideBarMobile = ({ 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, currency, showWhatsappChargesInfo, setShowWhatsappChargesInfo, t, countdown, walletLabel, creditosLabel, isTacna, isLinatal, insuranceData, }) => {
76
+ const PaymentSideBarMobile = ({ 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, currency, showWhatsappChargesInfo, setShowWhatsappChargesInfo, t, countdown, walletLabel, creditosLabel, isTacna, isLinatal, insuranceData, isPeru, }) => {
77
77
  var _a, _b, _c, _d, _e;
78
78
  return (React.createElement("div", { className: "pb-[10px]" },
79
79
  React.createElement("div", { className: "border border-[#ccc] m-[20px] rounded-[20px] relative" },
@@ -159,7 +159,9 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
159
159
  // )
160
160
  ,
161
161
  ":"),
162
- React.createElement("div", { className: "bold-text" }, CommonService.currency(val.fare * selectedOnward[1][key], currencySign))));
162
+ React.createElement("div", { className: "bold-text" }, CommonService.currency(isPeru
163
+ ? Math.round(val.fare * selectedOnward[1][key] * 100) / 100
164
+ : val.fare * selectedOnward[1][key], currencySign))));
163
165
  })
164
166
  : null,
165
167
  selectSeatReturn && selectedReturn && selectedReturn[0]
@@ -176,7 +178,9 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
176
178
  // )
177
179
  ,
178
180
  ":"),
179
- React.createElement("div", { className: "bold-text" }, CommonService.currency(val.fare * selectedReturn[1][key], currencySign))));
181
+ React.createElement("div", { className: "bold-text" }, CommonService.currency(isPeru
182
+ ? Math.round(val.fare * selectedReturn[1][key] * 100) / 100
183
+ : val.fare * selectedReturn[1][key], currencySign))));
180
184
  })
181
185
  : null),
182
186
  (insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_enabled) ? (React.createElement("div", { className: "flex justify-between items-center w-[100%] text-[13.33px]", style: { margin: checkWhatsappEligibility ? "0" : "6px 0" } },
@@ -225,10 +229,16 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
225
229
  } },
226
230
  currency ? currency : "",
227
231
  " ",
228
- CommonService.currency(removeDiscountAtomValue
229
- ? 0
230
- : isAgency
231
- ? netFare + agencyFee
232
- : netFare, currencySign)))))));
232
+ CommonService.currency(isPeru
233
+ ? Math.round((removeDiscountAtomValue
234
+ ? 0
235
+ : isAgency
236
+ ? netFare + agencyFee
237
+ : netFare) * 100) / 100
238
+ : removeDiscountAtomValue
239
+ ? 0
240
+ : isAgency
241
+ ? netFare + agencyFee
242
+ : netFare, currencySign)))))));
233
243
  };
234
244
  export default PaymentSideBarMobile;
package/dist/components/PaymentSideBar/types.d.ts CHANGED
@@ -102,4 +102,5 @@ export interface PaymentSideBarProps {
102
102
  isLinatal?: boolean;
103
103
  isTacna?: boolean;
104
104
  insuranceData?: any;
105
+ isPeru?: boolean;
105
106
  }
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -3,29 +3,37 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
- React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
12
+ React.createElement("div", null, showTopLabel))),
11
13
  (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: {
12
14
  backgroundColor: "#fff",
13
- border: `1px solid ${colors.topLabelColor}`,
14
- color: colors.topLabelColor,
15
+ border: isSoldOut
16
+ ? "1px solid #ccc"
17
+ : `1px solid ${colors.topLabelColor}`,
18
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
15
19
  } },
16
20
  renderIcon("connectingServiceIcon", "12px"),
17
21
  React.createElement("div", null, "Conexión"))),
18
22
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
19
23
  backgroundColor: "#fff",
20
- border: `1px solid ${colors.topLabelColor}`,
21
- color: colors.topLabelColor,
24
+ border: isSoldOut
25
+ ? "1px solid #ccc"
26
+ : `1px solid ${colors.topLabelColor}`,
27
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
22
28
  } },
23
29
  renderIcon("directo", "12px"),
24
30
  React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
25
31
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
26
32
  backgroundColor: "#fff",
27
- border: `1px solid ${colors.topLabelColor}`,
28
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
29
37
  } },
30
38
  renderIcon("directo", "12px"),
31
39
  React.createElement("div", null, "Tren Express")))));
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -3,31 +3,39 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
12
  React.createElement("div", { style: {
11
- color: colors.topLabelColor,
13
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
12
14
  } }, showTopLabel))),
13
15
  (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: {
14
16
  backgroundColor: "#fff",
15
- border: `1px solid ${colors.topLabelColor}`,
16
- color: colors.topLabelColor,
17
+ border: isSoldOut
18
+ ? "1px solid #ccc"
19
+ : `1px solid ${colors.topLabelColor}`,
20
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
17
21
  } },
18
22
  renderIcon("directo", "12px"),
19
23
  React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
20
24
  isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`, style: {
21
25
  backgroundColor: "#fff",
22
- border: `1px solid ${colors.topLabelColor}`,
23
- color: colors.topLabelColor,
26
+ border: isSoldOut
27
+ ? "1px solid #ccc"
28
+ : `1px solid ${colors.topLabelColor}`,
29
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
24
30
  } },
25
31
  renderIcon("airportIcon", "14px"),
26
32
  React.createElement("div", null, "Conexi\u00F3n"))),
27
33
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
28
34
  backgroundColor: "#fff",
29
- border: `1px solid ${colors.topLabelColor}`,
30
- color: colors.topLabelColor,
35
+ border: isSoldOut
36
+ ? "1px solid #ccc"
37
+ : `1px solid ${colors.topLabelColor}`,
38
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
31
39
  } },
32
40
  renderIcon("directo", "12px"),
33
41
  React.createElement("div", null, "Tren Express")))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.5.5",
3
+ "version": "9.5.7",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -333,6 +333,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
333
333
  customSideBarwidth,
334
334
  isLinatal,
335
335
  insuranceData,
336
+ isPeru,
336
337
  }) => {
337
338
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
338
339
  const depTime = droppingTimeOnward || "";
@@ -568,6 +569,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
568
569
  >
569
570
  {selectSeatOnward && selectedOnward && selectedOnward[0]
570
571
  ? selectedOnward[0].map((val, key) => {
572
+ console.log("🚀 ~ PaymentSideBarDesktop ~ val:", val);
571
573
  return (
572
574
  <div
573
575
  key={key}
@@ -592,7 +594,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
592
594
  >
593
595
  {currency ? currency : ""}{" "}
594
596
  {CommonService.currency(
595
- val.fare * selectedOnward[1][key],
597
+ isPeru
598
+ ? Math.round(
599
+ val.fare * selectedOnward[1][key] * 100,
600
+ ) / 100
601
+ : val.fare * selectedOnward[1][key],
596
602
  currencySign,
597
603
  )}
598
604
  </div>
@@ -626,7 +632,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
626
632
  >
627
633
  {currency ? currency : ""}{" "}
628
634
  {CommonService.currency(
629
- val.fare * selectedReturn[1][key],
635
+ isPeru
636
+ ? Math.round(
637
+ val.fare * selectedReturn[1][key] * 100,
638
+ ) / 100
639
+ : val.fare * selectedReturn[1][key],
630
640
  currencySign,
631
641
  )}
632
642
  </div>
@@ -811,11 +821,19 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
811
821
  >
812
822
  {currency ? currency : ""}{" "}
813
823
  {CommonService.currency(
814
- removeDiscountAtomValue
815
- ? 0
816
- : isAgency
817
- ? netFare + agencyFee
818
- : netFare,
824
+ isPeru
825
+ ? Math.round(
826
+ (removeDiscountAtomValue
827
+ ? 0
828
+ : isAgency
829
+ ? netFare + agencyFee
830
+ : netFare) * 100,
831
+ ) / 100
832
+ : removeDiscountAtomValue
833
+ ? 0
834
+ : isAgency
835
+ ? netFare + agencyFee
836
+ : netFare,
819
837
  currencySign,
820
838
  )}
821
839
  </div>
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -239,6 +239,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
239
239
  isTacna,
240
240
  isLinatal,
241
241
  insuranceData,
242
+ isPeru,
242
243
  }) => {
243
244
  return (
244
245
  <div className="pb-[10px]">
@@ -374,7 +375,11 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
374
375
  </div>
375
376
  <div className="bold-text">
376
377
  {CommonService.currency(
377
- val.fare * selectedOnward[1][key],
378
+ isPeru
379
+ ? Math.round(
380
+ val.fare * selectedOnward[1][key] * 100,
381
+ ) / 100
382
+ : val.fare * selectedOnward[1][key],
378
383
  currencySign,
379
384
  )}
380
385
  </div>
@@ -402,7 +407,11 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
402
407
  </div>
403
408
  <div className="bold-text">
404
409
  {CommonService.currency(
405
- val.fare * selectedReturn[1][key],
410
+ isPeru
411
+ ? Math.round(
412
+ val.fare * selectedReturn[1][key] * 100,
413
+ ) / 100
414
+ : val.fare * selectedReturn[1][key],
406
415
  currencySign,
407
416
  )}
408
417
  </div>
@@ -610,11 +619,19 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
610
619
  >
611
620
  {currency ? currency : ""}{" "}
612
621
  {CommonService.currency(
613
- removeDiscountAtomValue
614
- ? 0
615
- : isAgency
616
- ? netFare + agencyFee
617
- : netFare,
622
+ isPeru
623
+ ? Math.round(
624
+ (removeDiscountAtomValue
625
+ ? 0
626
+ : isAgency
627
+ ? netFare + agencyFee
628
+ : netFare) * 100,
629
+ ) / 100
630
+ : removeDiscountAtomValue
631
+ ? 0
632
+ : isAgency
633
+ ? netFare + agencyFee
634
+ : netFare,
618
635
  currencySign,
619
636
  )}
620
637
  </div>
package/src/components/PaymentSideBar/types.ts CHANGED
@@ -101,4 +101,6 @@ export interface PaymentSideBarProps {
101
101
  isLinatal?: boolean;
102
102
  isTacna?: boolean;
103
103
  insuranceData?: any;
104
+ isPeru?: boolean;
104
105
  }
106
+
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -30,20 +30,16 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
30
30
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
38
40
  {renderIcon("specialDeparture", "12px")}
39
41
  </div>
40
- <div
41
- className={
42
- isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
43
- }
44
- >
45
- {showTopLabel}
46
- </div>
42
+ <div>{showTopLabel}</div>
47
43
  </div>
48
44
  )}
49
45
  {serviceItem?.is_transpordo && (
@@ -51,8 +47,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
51
47
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
52
48
  style={{
53
49
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
50
+ border: isSoldOut
51
+ ? "1px solid #ccc"
52
+ : `1px solid ${colors.topLabelColor}`,
53
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
54
  }}
57
55
  >
58
56
  {renderIcon("connectingServiceIcon", "12px")}
@@ -64,8 +62,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
64
62
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
65
63
  style={{
66
64
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
65
+ border: isSoldOut
66
+ ? "1px solid #ccc"
67
+ : `1px solid ${colors.topLabelColor}`,
68
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
69
  }}
70
70
  >
71
71
  {renderIcon("directo", "12px")}
@@ -77,8 +77,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
77
77
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
78
78
  style={{
79
79
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
80
+ border: isSoldOut
81
+ ? "1px solid #ccc"
82
+ : `1px solid ${colors.topLabelColor}`,
83
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
84
  }}
83
85
  >
84
86
  {renderIcon("directo", "12px")}
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -30,8 +30,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
30
30
  className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
@@ -39,7 +41,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
39
41
  </div>
40
42
  <div
41
43
  style={{
42
- color: colors.topLabelColor,
44
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
43
45
  }}
44
46
  >
45
47
  {showTopLabel}
@@ -51,8 +53,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
51
53
  className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
52
54
  style={{
53
55
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
56
+ border: isSoldOut
57
+ ? "1px solid #ccc"
58
+ : `1px solid ${colors.topLabelColor}`,
59
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
60
  }}
57
61
  >
58
62
  {renderIcon("directo", "12px")}
@@ -64,8 +68,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
64
68
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`}
65
69
  style={{
66
70
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
71
+ border: isSoldOut
72
+ ? "1px solid #ccc"
73
+ : `1px solid ${colors.topLabelColor}`,
74
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
75
  }}
70
76
  >
71
77
  {renderIcon("airportIcon", "14px")}
@@ -77,8 +83,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
77
83
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
78
84
  style={{
79
85
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
86
+ border: isSoldOut
87
+ ? "1px solid #ccc"
88
+ : `1px solid ${colors.topLabelColor}`,
89
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
90
  }}
83
91
  >
84
92
  {renderIcon("directo", "12px")}