kupos-ui-components-lib 5.0.4 → 5.0.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 (9) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +1 -5
  2. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +1 -1
  3. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +23 -19
  4. package/dist/components/ServiceItem/ServiceItemDesktop.js +0 -1
  5. package/package.json +1 -1
  6. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +1 -7
  7. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +1 -1
  8. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +28 -16
  9. package/src/components/ServiceItem/ServiceItemDesktop.tsx +0 -1
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -25,7 +25,6 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
25
25
  }
26
26
  else {
27
27
  cleanedDepTime = timePart;
28
- console.log("🚀 ~ cleanedDepTime:", cleanedDepTime);
29
28
  }
30
29
  let cleanBoardingReturnTime;
31
30
  const hasBoardingReturnAM = returnTime.includes("AM");
@@ -52,7 +51,6 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
52
51
  else {
53
52
  cleanBoardingReturnTime = returnTimePart;
54
53
  }
55
- console.log("🚀 ~ cleanBoardingReturnTime:", cleanBoardingReturnTime);
56
54
  }
57
55
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN DROPPING STAGE
58
56
  const dropdDepTime = droppingTime || "";
@@ -202,7 +200,6 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
202
200
  }
203
201
  else {
204
202
  cleanedDepTime = timePart;
205
- console.log("🚀 ~ cleanedDepTime:", cleanedDepTime);
206
203
  }
207
204
  let cleanBoardingReturnTime;
208
205
  const hasBoardingReturnAM = returnTime.includes("AM");
@@ -229,7 +226,6 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
229
226
  else {
230
227
  cleanBoardingReturnTime = returnTimePart;
231
228
  }
232
- console.log("🚀 ~ cleanBoardingReturnTime:", cleanBoardingReturnTime);
233
229
  }
234
230
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN DROPPING STAGE
235
231
  const dropdDepTime = droppingTimeOnward || "";
@@ -415,7 +411,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
415
411
  removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "" })),
416
412
  React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
417
413
  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 } }),
418
- (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10" },
414
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10 flex items-center gap-[5px]" },
419
415
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
420
416
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
421
417
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
package/dist/components/PaymentSideBar/PaymentSideBarMobile.js CHANGED
@@ -161,7 +161,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
161
161
  color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesTextColor,
162
162
  } }, 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,
163
163
  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: "" }),
164
- (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10" },
164
+ (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font14 flex items-center gap-[5px]" },
165
165
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
166
166
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
167
167
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -566,9 +566,10 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
566
566
  React.createElement("div", { className: "group" },
567
567
  React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
568
568
  React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
569
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]", style: {
569
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]", style: {
570
570
  backgroundColor: colors.tooltipColor,
571
571
  zIndex: 21,
572
+ padding: "12px",
572
573
  } },
573
574
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
574
575
  borderBottomColor: colors.tooltipColor,
@@ -576,26 +577,29 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
576
577
  getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
577
578
  }),
578
579
  ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
579
- React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold group", style: { alignItems: "flex-end", marginTop: "3px" } },
580
+ React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold group", style: {
581
+ alignItems: "flex-end",
582
+ marginTop: "3px",
583
+ } },
580
584
  React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
581
585
  "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
582
- React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
583
- React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: { backgroundColor: colors.tooltipColor } },
584
- metaData &&
585
- ((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
586
- var _a, _b, _c, _d, _e, _f, _g;
587
- const exceptions = [
588
- 1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
589
- ];
590
- return exceptions.includes(key) ? null : key >= 3 &&
591
- ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] whitespace-nowrap text-[13.33px]" },
592
- React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
593
- React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
594
- React.createElement("span", { className: "text-white text-xs" }, getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
595
- })),
596
- React.createElement("div", { className: "tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent ", style: {
597
- borderRightColor: colors.tooltipColor,
598
- } }))))))))))))),
586
+ React.createElement("div", { style: { zIndex: 100 }, className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]" },
587
+ React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
588
+ borderBottomColor: colors.tooltipColor,
589
+ } }),
590
+ React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
591
+ backgroundColor: colors.tooltipColor,
592
+ padding: "1rem",
593
+ } }, metaData &&
594
+ ((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
595
+ var _a, _b, _c, _d, _e, _f, _g;
596
+ // Show all amenities with index 3 or higher, excluding WATER
597
+ return key >= 3 &&
598
+ ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] whitespace-nowrap text-[13.33px]" },
599
+ React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
600
+ React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
601
+ React.createElement("span", { className: "text-white text-xs" }, getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
602
+ })))))))))))))),
599
603
  children,
600
604
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
601
605
  backgroundColor: isSoldOut
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -16,7 +16,6 @@ const SEAT_EXCEPTIONS = ["Asiento mascota"];
16
16
  function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, flexibleIcon, locationAnim, directoAnim, petFriendlyAnim, priorityStageAnim, promoAnim, t = (key) => key, }) {
17
17
  var _a, _b, _c, _d, _e, _f, _g;
18
18
  const getAnimationIcon = (icon) => {
19
- console.log("🚀 ~ getAnimationIcon ~ icon:", icon);
20
19
  if (icon === "promoAnim") {
21
20
  return promoAnimation;
22
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "5.0.4",
3
+ "version": "5.0.7",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -46,7 +46,6 @@ const renderSummaryDetailsCard = ({
46
46
  : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
47
47
  } else {
48
48
  cleanedDepTime = timePart;
49
- console.log("🚀 ~ cleanedDepTime:", cleanedDepTime);
50
49
  }
51
50
 
52
51
  let cleanBoardingReturnTime;
@@ -79,8 +78,6 @@ const renderSummaryDetailsCard = ({
79
78
  } else {
80
79
  cleanBoardingReturnTime = returnTimePart;
81
80
  }
82
-
83
- console.log("🚀 ~ cleanBoardingReturnTime:", cleanBoardingReturnTime);
84
81
  }
85
82
 
86
83
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN DROPPING STAGE
@@ -360,7 +357,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
360
357
  : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
361
358
  } else {
362
359
  cleanedDepTime = timePart;
363
- console.log("🚀 ~ cleanedDepTime:", cleanedDepTime);
364
360
  }
365
361
 
366
362
  let cleanBoardingReturnTime;
@@ -393,8 +389,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
393
389
  } else {
394
390
  cleanBoardingReturnTime = returnTimePart;
395
391
  }
396
-
397
- console.log("🚀 ~ cleanBoardingReturnTime:", cleanBoardingReturnTime);
398
392
  }
399
393
 
400
394
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN DROPPING STAGE
@@ -714,7 +708,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
714
708
  customStyle={{ color: colors?.promoCodePriceColor }}
715
709
  />
716
710
  {promoCode?.promoCouponAmount ? (
717
- <div className="promocode font10">
711
+ <div className="promocode font10 flex items-center gap-[5px]">
718
712
  <div>{promoCode?.promoCode}</div>
719
713
  <span className="promo-remove" onClick={onPromoRemove}>
720
714
  <img
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -396,7 +396,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
396
396
  currency=""
397
397
  />
398
398
  {promoCode?.promoCouponAmount ? (
399
- <div className="promocode font10">
399
+ <div className="promocode font14 flex items-center gap-[5px]">
400
400
  <div>{promoCode?.promoCode}</div>
401
401
  <span className="promo-remove" onClick={onPromoRemove}>
402
402
  <img
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -1109,10 +1109,11 @@ function PeruServiceItemDesktop({
1109
1109
  />
1110
1110
  </div>
1111
1111
  <div
1112
- className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]"
1112
+ className="hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]"
1113
1113
  style={{
1114
1114
  backgroundColor: colors.tooltipColor,
1115
1115
  zIndex: 21,
1116
+ padding: "12px",
1116
1117
  }}
1117
1118
  >
1118
1119
  {/* Tooltip arrow */}
@@ -1139,7 +1140,10 @@ function PeruServiceItemDesktop({
1139
1140
  <div className="relative ml-1 cursor-pointer">
1140
1141
  <div
1141
1142
  className="w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold group"
1142
- style={{ alignItems: "flex-end", marginTop: "3px" }}
1143
+ style={{
1144
+ alignItems: "flex-end",
1145
+ marginTop: "3px",
1146
+ }}
1143
1147
  >
1144
1148
  <img
1145
1149
  src={
@@ -1149,21 +1153,29 @@ function PeruServiceItemDesktop({
1149
1153
  className="w-[16px] h-[16px]"
1150
1154
  alt="plus"
1151
1155
  />
1152
- <div className="hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]">
1156
+ <div
1157
+ style={{ zIndex: 100 }}
1158
+ className="hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]"
1159
+ >
1160
+ <div
1161
+ className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
1162
+ style={{
1163
+ borderBottomColor: colors.tooltipColor,
1164
+ }}
1165
+ ></div>
1153
1166
  <div
1154
1167
  className="flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative"
1155
- style={{ backgroundColor: colors.tooltipColor }}
1168
+ style={{
1169
+ backgroundColor: colors.tooltipColor,
1170
+ padding: "1rem",
1171
+ }}
1156
1172
  >
1157
1173
  {/* Additional amenities */}
1158
1174
  {metaData &&
1159
1175
  serviceItem.operator_details[4]?.map(
1160
1176
  (val, key) => {
1161
- const exceptions = [
1162
- 1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
1163
- ];
1164
- return exceptions.includes(
1165
- key
1166
- ) ? null : key >= 3 &&
1177
+ // Show all amenities with index 3 or higher, excluding WATER
1178
+ return key >= 3 &&
1167
1179
  metaData.amenities[val]
1168
1180
  ?.split(".")[0]
1169
1181
  ?.toUpperCase() !== "WATER" ? (
@@ -1197,12 +1209,12 @@ function PeruServiceItemDesktop({
1197
1209
  }
1198
1210
  )}
1199
1211
  {/* Tooltip arrow */}
1200
- <div
1201
- className="tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent "
1202
- style={{
1203
- borderRightColor: colors.tooltipColor,
1204
- }}
1205
- ></div>
1212
+ {/* <div
1213
+ className="tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent "
1214
+ style={{
1215
+ borderRightColor: colors.tooltipColor,
1216
+ }}
1217
+ ></div> */}
1206
1218
  </div>
1207
1219
  </div>
1208
1220
  </div>
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -48,7 +48,6 @@ function ServiceItemPB({
48
48
  t = (key: string) => key,
49
49
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
50
50
  const getAnimationIcon = (icon: string) => {
51
- console.log("🚀 ~ getAnimationIcon ~ icon:", icon);
52
51
  if (icon === "promoAnim") {
53
52
  return promoAnimation;
54
53
  } else if (icon === "locationAnim") {