kupos-ui-components-lib 8.0.7 → 8.0.10

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 (10) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +9 -1
  2. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +10 -3
  3. package/dist/components/PaymentSideBar/types.d.ts +1 -0
  4. package/dist/components/ServiceItem/ServiceItemDesktop.js +6 -6
  5. package/package.json +1 -1
  6. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +50 -21
  7. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +46 -14
  8. package/src/components/PaymentSideBar/types.ts +1 -0
  9. package/src/components/ServiceItem/ServiceItemDesktop.tsx +6 -6
  10. package/src/components/ServiceItem/ServiceItemMobile.tsx +5 -5
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -177,7 +177,8 @@ 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, }) => {
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, }) => {
181
+ var _a, _b, _c, _d, _e;
181
182
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
182
183
  const depTime = droppingTimeOnward || "";
183
184
  const returnTime = droppingTimeReturn || "";
@@ -392,6 +393,13 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
392
393
  CommonService.currency(val.fare * selectedReturn[1][key], currencySign))));
393
394
  })
394
395
  : null),
396
+ (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" } },
397
+ React.createElement("div", null,
398
+ React.createElement("span", null, ((_b = (_a = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _a === void 0 ? void 0 : _a.reduce((acc, qty) => acc + qty, 0)) !== null && _b !== void 0 ? _b : 0) +
399
+ ((_d = (_c = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0)),
400
+ " x ",
401
+ "Viajero Seguro:"),
402
+ React.createElement("div", { className: "bold-text", style: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null,
395
403
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
396
404
  ? returnConexionFare * conexionPassengers
397
405
  : conexionFare, currencySign), className: "subtotal-row font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } })) : null,
package/dist/components/PaymentSideBar/PaymentSideBarMobile.js CHANGED
@@ -15,7 +15,6 @@ const convertTo24HourFormat = (time12) => {
15
15
  return moment(time12, "hh:mm A").format("HH:mm A");
16
16
  };
17
17
  const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingStage, boardingTime, droppingStage, droppingTime, duration, trainType, isTrain, icons, isTacna, isLinatal, }) => {
18
- console.log("🚀 ~ renderSummaryDetailsCard ~ isLinatal:", isLinatal);
19
18
  return (React.createElement(React.Fragment, null,
20
19
  React.createElement("div", { className: "mt-3 border-b border-[#ccc] text-[14px]" },
21
20
  React.createElement("div", { className: "summary-details-card mb-[15px]" },
@@ -74,7 +73,8 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
74
73
  ? `${getRoundedHour(duration)}hrs aprox`
75
74
  : `${duration} horas`)))))));
76
75
  };
77
- 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, }) => {
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, }) => {
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" },
80
80
  React.createElement("div", { style: {
@@ -178,7 +178,14 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
178
178
  ":"),
179
179
  React.createElement("div", { className: "bold-text" }, CommonService.currency(val.fare * selectedReturn[1][key], currencySign))));
180
180
  })
181
- : null)),
181
+ : null),
182
+ (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" } },
183
+ React.createElement("div", null,
184
+ React.createElement("span", null, ((_b = (_a = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _a === void 0 ? void 0 : _a.reduce((acc, qty) => acc + qty, 0)) !== null && _b !== void 0 ? _b : 0) +
185
+ ((_d = (_c = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0)),
186
+ " x ",
187
+ "Viajero Seguro:"),
188
+ React.createElement("div", { className: "bold-text", style: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null),
182
189
  React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
183
190
  metaData &&
184
191
  metaData.whatsapp_delivery_charges &&
package/dist/components/PaymentSideBar/types.d.ts CHANGED
@@ -101,4 +101,5 @@ export interface PaymentSideBarProps {
101
101
  customSideBarwidth?: string;
102
102
  isLinatal?: boolean;
103
103
  isTacna?: boolean;
104
+ insuranceData?: any;
104
105
  }
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -344,22 +344,22 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
344
344
  React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
345
345
  gridTemplateRows: "1fr",
346
346
  } },
347
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
347
+ React.createElement("div", { className: "flex flex-col gap-[6px]" },
348
348
  orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
349
349
  React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
350
350
  !isCiva &&
351
351
  (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
352
352
  React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
353
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
353
+ React.createElement("div", { className: "flex flex-col gap-[6px]" },
354
354
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
355
355
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
356
356
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
357
357
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
358
- React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
358
+ React.createElement("div", { className: "flex flex-col gap-[6px] items-center" },
359
359
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
360
360
  React.createElement("div", null, "\u2022")),
361
361
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
362
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
362
+ React.createElement("div", { className: "flex flex-col gap-[6px]" },
363
363
  React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
364
364
  React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
365
365
  cleanedDepTime,
@@ -383,7 +383,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
383
383
  React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 || removeDuplicateSeats
384
384
  ? { alignItems: "center" }
385
385
  : {} },
386
- React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "15px" } }, getSeatNames()),
386
+ React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, getSeatNames()),
387
387
  React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
388
388
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
389
389
  top: 0,
@@ -394,7 +394,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
394
394
  justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
395
395
  ? "center"
396
396
  : "",
397
- gap: "15px",
397
+ gap: "10px",
398
398
  } }, getSeatPrice()))),
399
399
  React.createElement("div", null,
400
400
  React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "8.0.7",
3
+ "version": "8.0.10",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -197,13 +197,13 @@ const renderSummaryDetailsCard = ({
197
197
  ? hasPM
198
198
  ? "PM"
199
199
  : hasAM
200
- ? "AM"
201
- : ""
200
+ ? "AM"
201
+ : ""
202
202
  : hasBoardingReturnPM
203
- ? "PM"
204
- : hasBoardingReturnAM
205
- ? "AM"
206
- : ""}
203
+ ? "PM"
204
+ : hasBoardingReturnAM
205
+ ? "AM"
206
+ : ""}
207
207
  </span>
208
208
  ) : (
209
209
  <span>{DateService.formatTime(boardingTime)}</span>
@@ -239,13 +239,13 @@ const renderSummaryDetailsCard = ({
239
239
  ? hasPM
240
240
  ? "PM"
241
241
  : hasAM
242
- ? "AM"
243
- : ""
242
+ ? "AM"
243
+ : ""
244
244
  : hasDroppingReturnPM
245
- ? "PM"
246
- : hasDroppingReturnAM
247
- ? "AM"
248
- : ""}
245
+ ? "PM"
246
+ : hasDroppingReturnAM
247
+ ? "AM"
248
+ : ""}
249
249
  </span>
250
250
  ) : (
251
251
  <span>{DateService.formatTime(droppingTime)}</span>
@@ -332,6 +332,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
332
332
  currency,
333
333
  customSideBarwidth,
334
334
  isLinatal,
335
+ insuranceData,
335
336
  }) => {
336
337
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
337
338
  const depTime = droppingTimeOnward || "";
@@ -592,7 +593,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
592
593
  {currency ? currency : ""}{" "}
593
594
  {CommonService.currency(
594
595
  val.fare * selectedOnward[1][key],
595
- currencySign
596
+ currencySign,
596
597
  )}
597
598
  </div>
598
599
  </div>
@@ -626,7 +627,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
626
627
  {currency ? currency : ""}{" "}
627
628
  {CommonService.currency(
628
629
  val.fare * selectedReturn[1][key],
629
- currencySign
630
+ currencySign,
630
631
  )}
631
632
  </div>
632
633
  </div>
@@ -635,6 +636,34 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
635
636
  : null}
636
637
  </div>
637
638
 
639
+ {/* insurance data */}
640
+ {insuranceData?.insurance_enabled ? (
641
+ <div
642
+ className="flex justify-between items-center w-[100%] text-[13.33px]"
643
+ style={{ margin: checkWhatsappEligibility ? "0" : "6px 0" }}
644
+ >
645
+ <div>
646
+ <span>
647
+ {(selectedOnward?.[1]?.reduce((acc, qty) => acc + qty, 0) ??
648
+ 0) +
649
+ (selectedReturn?.[1]?.reduce((acc, qty) => acc + qty, 0) ??
650
+ 0)}
651
+ </span>
652
+ {" x "}
653
+ Viajero Seguro:
654
+ </div>
655
+ <div
656
+ className="bold-text"
657
+ style={{ color: colors?.seatPriceColor }}
658
+ >
659
+ {CommonService.currency(
660
+ insuranceData?.insurance_total ?? 0,
661
+ currencySign,
662
+ )}
663
+ </div>
664
+ </div>
665
+ ) : null}
666
+
638
667
  {conexionChecked && conexionFare && returnConexionFare ? (
639
668
  <PaymentItem
640
669
  label="Conexión Aeropuerto:"
@@ -642,7 +671,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
642
671
  dateReturn
643
672
  ? returnConexionFare * conexionPassengers
644
673
  : conexionFare,
645
- currencySign
674
+ currencySign,
646
675
  )}
647
676
  className="subtotal-row font10"
648
677
  customStyle={{ color: colors?.seatPriceColor }}
@@ -701,7 +730,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
701
730
  label={`${translation?.promotionalCode}:`}
702
731
  amount={CommonService.currency(
703
732
  promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0,
704
- currencySign
733
+ currencySign,
705
734
  )}
706
735
  className="text-[13.33px]"
707
736
  currency={currency}
@@ -725,7 +754,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
725
754
  label={translation?.agencyFee}
726
755
  amount={CommonService.currency(
727
756
  agencyFee ? agencyFee : 0,
728
- currencySign
757
+ currencySign,
729
758
  )}
730
759
  currency=""
731
760
  customStyle={{ color: colors?.agencyFeePriceColor }}
@@ -759,7 +788,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
759
788
  className="text-[13.33px]"
760
789
  amount={CommonService.currency(
761
790
  isAgency ? netFareInUsd + agencyFee : netFareInUsd,
762
- currencySign
791
+ currencySign,
763
792
  )}
764
793
  currency="USD"
765
794
  customStyle={{ color: "var(--secondary-color)" }}
@@ -785,9 +814,9 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
785
814
  removeDiscountAtomValue
786
815
  ? 0
787
816
  : isAgency
788
- ? netFare + agencyFee
789
- : netFare,
790
- currencySign
817
+ ? netFare + agencyFee
818
+ : netFare,
819
+ currencySign,
791
820
  )}
792
821
  </div>
793
822
  </div>
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -36,7 +36,6 @@ const renderSummaryDetailsCard = ({
36
36
  isTacna,
37
37
  isLinatal,
38
38
  }) => {
39
- console.log("🚀 ~ renderSummaryDetailsCard ~ isLinatal:", isLinatal);
40
39
  return (
41
40
  <>
42
41
  {/* Summary Details Card */}
@@ -93,8 +92,8 @@ const renderSummaryDetailsCard = ({
93
92
  {convertTo24HourFormat(
94
93
  DateService.ampm(boardingTime).replace(
95
94
  /\s?(AM|PM)$/,
96
- ""
97
- )
95
+ "",
96
+ ),
98
97
  )}
99
98
  </span>
100
99
  ) : null}
@@ -138,8 +137,8 @@ const renderSummaryDetailsCard = ({
138
137
  {convertTo24HourFormat(
139
138
  DateService.ampm(droppingTime).replace(
140
139
  /\s?(AM|PM)$/,
141
- ""
142
- )
140
+ "",
141
+ ),
143
142
  )}
144
143
  </span>
145
144
  ) : null}
@@ -239,6 +238,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
239
238
  creditosLabel,
240
239
  isTacna,
241
240
  isLinatal,
241
+ insuranceData,
242
242
  }) => {
243
243
  return (
244
244
  <div className="pb-[10px]">
@@ -375,7 +375,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
375
375
  <div className="bold-text">
376
376
  {CommonService.currency(
377
377
  val.fare * selectedOnward[1][key],
378
- currencySign
378
+ currencySign,
379
379
  )}
380
380
  </div>
381
381
  </div>
@@ -403,7 +403,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
403
403
  <div className="bold-text">
404
404
  {CommonService.currency(
405
405
  val.fare * selectedReturn[1][key],
406
- currencySign
406
+ currencySign,
407
407
  )}
408
408
  </div>
409
409
  </div>
@@ -411,6 +411,38 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
411
411
  })
412
412
  : null}
413
413
  </div>
414
+
415
+ {/* insurance data */}
416
+ {insuranceData?.insurance_enabled ? (
417
+ <div
418
+ className="flex justify-between items-center w-[100%] text-[13.33px]"
419
+ style={{ margin: checkWhatsappEligibility ? "0" : "6px 0" }}
420
+ >
421
+ <div>
422
+ <span>
423
+ {(selectedOnward?.[1]?.reduce(
424
+ (acc, qty) => acc + qty,
425
+ 0,
426
+ ) ?? 0) +
427
+ (selectedReturn?.[1]?.reduce(
428
+ (acc, qty) => acc + qty,
429
+ 0,
430
+ ) ?? 0)}
431
+ </span>
432
+ {" x "}
433
+ Viajero Seguro:
434
+ </div>
435
+ <div
436
+ className="bold-text"
437
+ style={{ color: colors?.seatPriceColor }}
438
+ >
439
+ {CommonService.currency(
440
+ insuranceData?.insurance_total ?? 0,
441
+ currencySign,
442
+ )}
443
+ </div>
444
+ </div>
445
+ ) : null}
414
446
  </div>
415
447
 
416
448
  <div style={{ margin: "6px 0" }}>
@@ -465,7 +497,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
465
497
  label={`${translation?.promotionalCode}:`}
466
498
  amount={CommonService.currency(
467
499
  promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0,
468
- currencySign
500
+ currencySign,
469
501
  )}
470
502
  className="text-[14px]"
471
503
  showCurrency={false}
@@ -492,7 +524,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
492
524
  dateReturn
493
525
  ? returnConexionFare * conexionPassengers
494
526
  : conexionFare,
495
- currencySign
527
+ currencySign,
496
528
  )}
497
529
  className="subtotal-row text-[14px]"
498
530
  customStyle={{ color: colors?.seatPriceColor }}
@@ -514,7 +546,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
514
546
  label={translation?.agencyFee}
515
547
  amount={CommonService.currency(
516
548
  agencyFee ? agencyFee : 0,
517
- currencySign
549
+ currencySign,
518
550
  )}
519
551
  className="text-[14px"
520
552
  customStyle={{ color: colors?.agencyFeePriceColor }}
@@ -553,7 +585,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
553
585
  }
554
586
  amount={CommonService.currency(
555
587
  isAgency ? netFareInUsd + agencyFee : netFareInUsd,
556
- currencySign
588
+ currencySign,
557
589
  )}
558
590
  currency="USD"
559
591
  customStyle={{ color: "var(--primary-color)" }}
@@ -581,9 +613,9 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
581
613
  removeDiscountAtomValue
582
614
  ? 0
583
615
  : isAgency
584
- ? netFare + agencyFee
585
- : netFare,
586
- currencySign
616
+ ? netFare + agencyFee
617
+ : netFare,
618
+ currencySign,
587
619
  )}
588
620
  </div>
589
621
  </div>
package/src/components/PaymentSideBar/types.ts CHANGED
@@ -100,4 +100,5 @@ export interface PaymentSideBarProps {
100
100
  customSideBarwidth?: string;
101
101
  isLinatal?: boolean;
102
102
  isTacna?: boolean;
103
+ insuranceData?: any;
103
104
  }
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -589,7 +589,7 @@ function ServiceItemPB({
589
589
  }}
590
590
  >
591
591
  {/* ICONS COLUMN */}
592
- <div className="flex flex-col gap-[10px]">
592
+ <div className="flex flex-col gap-[6px]">
593
593
  {/* Origin Icon */}
594
594
  {orignLabel ? (
595
595
  <div className="w-[60px] h-[20px] flex items-center">
@@ -627,7 +627,7 @@ function ServiceItemPB({
627
627
  </div>
628
628
 
629
629
  {/* DATES COLUMN */}
630
- <div className="flex flex-col gap-[10px]">
630
+ <div className="flex flex-col gap-[6px]">
631
631
  {/* Departure Date */}
632
632
  <StageTooltip
633
633
  stageData={serviceItem.boarding_stages}
@@ -664,7 +664,7 @@ function ServiceItemPB({
664
664
  </div>
665
665
 
666
666
  {/* DOTS COLUMN */}
667
- <div className="flex flex-col gap-[10px] items-center">
667
+ <div className="flex flex-col gap-[6px] items-center">
668
668
  {/* Departure Dot */}
669
669
  <div className="h-[20px] flex items-center justify-center">
670
670
  <div>•</div>
@@ -681,7 +681,7 @@ function ServiceItemPB({
681
681
  </div>
682
682
 
683
683
  {/* TIMES COLUMN */}
684
- <div className="flex flex-col gap-[10px]">
684
+ <div className="flex flex-col gap-[6px]">
685
685
  {/* Departure Time */}
686
686
  <StageTooltip
687
687
  stageData={serviceItem.dropoff_stages}
@@ -748,7 +748,7 @@ function ServiceItemPB({
748
748
  >
749
749
  <div
750
750
  className="flex flex-col justify-between"
751
- style={{ gap: "15px" }}
751
+ style={{ gap: "10px" }}
752
752
  >
753
753
  {getSeatNames()}
754
754
  </div>
@@ -765,7 +765,7 @@ function ServiceItemPB({
765
765
  getNumberOfSeats() < 2 || removeDuplicateSeats
766
766
  ? "center"
767
767
  : "",
768
- gap: "15px",
768
+ gap: "10px",
769
769
  }}
770
770
  >
771
771
  {getSeatPrice()}
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -92,7 +92,7 @@ function ServiceItemMobile({
92
92
  {commonService.currency(type.fare, currencySign)}
93
93
  </span>
94
94
  </div>
95
- )
95
+ ),
96
96
  );
97
97
  return seatTypes;
98
98
  };
@@ -149,7 +149,7 @@ function ServiceItemMobile({
149
149
  : commonService.currency(type.fare, currencySign)}
150
150
  </span>
151
151
  </div>
152
- )
152
+ ),
153
153
  );
154
154
  };
155
155
 
@@ -251,8 +251,8 @@ function ServiceItemMobile({
251
251
  const list = Array.isArray(raw)
252
252
  ? raw
253
253
  : typeof raw === "string"
254
- ? raw.split("|").filter(Boolean)
255
- : [];
254
+ ? raw.split("|").filter(Boolean)
255
+ : [];
256
256
 
257
257
  const nodes = list
258
258
  .slice(0, 2)
@@ -486,7 +486,7 @@ function ServiceItemMobile({
486
486
  >
487
487
  <span className="cursor-pointer black-text">
488
488
  {DateService.getServiceItemDate(
489
- serviceItem.arrival_date
489
+ serviceItem.arrival_date,
490
490
  )}
491
491
  </span>
492
492
  <div className="absolute left-[50%]">•</div>