kupos-ui-components-lib 10.3.0 → 10.3.1

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 (5) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +0 -2
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +18 -7
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -7
  5. package/src/components/ServiceItem/ServiceItemMobile.tsx +104 -94
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -89,7 +89,6 @@ const ANIMATION_MAP = {
89
89
  };
90
90
  function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
91
91
  var _a, _b, _c;
92
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
93
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
94
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
95
94
  onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
@@ -157,7 +156,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
157
156
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
158
157
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
159
158
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
160
- console.log("🚀 ~ ServiceItemPB ~ hasOfferText:", hasOfferText, isNewUiEnabled, hasDpEnabled);
161
159
  const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
162
160
  ? {
163
161
  borderColor: "transparent",
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -30,10 +30,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
30
30
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
31
31
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
32
32
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
33
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
33
34
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
34
35
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
35
36
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
36
- const serviceCardStyle = (hasOfferText && isNewUiEnabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
+ const serviceCardStyle = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
38
  ? {
38
39
  borderColor: isSoldOut ? "#ccc" : "transparent",
39
40
  borderStyle: "solid",
@@ -166,9 +167,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
166
167
  lineHeight: 1.4,
167
168
  } },
168
169
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
169
- (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && isNewUiEnabled) ||
170
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
171
- !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
170
+ (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
172
171
  background: isSoldOut
173
172
  ? offerGradientWithOpacity
174
173
  : offerGradient,
@@ -219,13 +218,25 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
219
218
  opacity: isItemExpanded ? 1 : 0,
220
219
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
221
220
  position: "relative",
222
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? -2 : -1,
221
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
222
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
223
+ isNewUiEnabled
224
+ ? -2
225
+ : -1,
223
226
  } },
224
227
  React.createElement("div", { style: {
225
228
  overflow: "hidden",
226
229
  minHeight: 0,
227
- position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "relative" : undefined,
228
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
230
+ position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
231
+ isNewUiEnabled ||
232
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
233
+ ? "relative"
234
+ : undefined,
235
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
236
+ isNewUiEnabled ||
237
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
238
+ ? -3
239
+ : undefined,
229
240
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
230
241
  } },
231
242
  React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.3.0",
3
+ "version": "10.3.1",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -152,7 +152,6 @@ function ServiceItemPB({
152
152
  isFlores,
153
153
  operatorLabel,
154
154
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
155
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
156
155
  const handleSeatSelect = (
157
156
  key: any,
158
157
  price: number,
@@ -270,12 +269,7 @@ function ServiceItemPB({
270
269
 
271
270
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
272
271
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
273
- console.log(
274
- "🚀 ~ ServiceItemPB ~ hasOfferText:",
275
- hasOfferText,
276
- isNewUiEnabled,
277
- hasDpEnabled,
278
- );
272
+
279
273
  const serviceCardStyle: React.CSSProperties =
280
274
  (isNewUiEnabled || hasDpEnabled) && !isSoldOut
281
275
  ? {
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -87,12 +87,13 @@ function ServiceItemMobile({
87
87
  );
88
88
 
89
89
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
90
+ const hasDpEnabled = serviceItem?.is_dp_enabled === true;
90
91
 
91
92
  const hasOfferText = Boolean(serviceItem?.offer_text);
92
93
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
93
94
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
94
95
  const serviceCardStyle: React.CSSProperties =
95
- (hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled
96
+ isNewUiEnabled || serviceItem?.is_dp_enabled
96
97
  ? {
97
98
  borderColor: isSoldOut ? "#ccc" : "transparent",
98
99
  borderStyle: "solid",
@@ -456,118 +457,113 @@ function ServiceItemMobile({
456
457
  )}
457
458
 
458
459
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
459
- {((serviceItem?.offer_text && isNewUiEnabled) ||
460
- serviceItem?.is_dp_enabled) &&
461
- !isSoldOut && (
460
+ {(isNewUiEnabled || serviceItem?.is_dp_enabled) && !isSoldOut && (
461
+ <div
462
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
463
+ style={{
464
+ background: isSoldOut
465
+ ? offerGradientWithOpacity
466
+ : offerGradient,
467
+ // opacity: isSoldOut ? 0.5 : 1,
468
+ borderRadius: "0 0 14px 14px",
469
+ zIndex: -1,
470
+ }}
471
+ >
462
472
  <div
463
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
464
- style={{
465
- background: isSoldOut
466
- ? offerGradientWithOpacity
467
- : offerGradient,
468
- // opacity: isSoldOut ? 0.5 : 1,
469
- borderRadius: "0 0 14px 14px",
470
- zIndex: -1,
471
- }}
473
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
474
+ style={{ lineHeight: 1.6 }}
472
475
  >
473
- <div
474
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
475
- style={{ lineHeight: 1.6 }}
476
- >
477
- <div className="flex justify-between items-center">
478
- {serviceItem?.is_dp_enabled &&
479
- Object.keys(serviceItem?.dp_discount_percents ?? {})
480
- .length === 0 &&
481
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
482
- <div className="flex items-center gap-[6px]">
483
- {/* {renderIcon("whiteFireIcon", "14px")} */}
476
+ <div className="flex justify-between items-center">
477
+ {serviceItem?.is_dp_enabled &&
478
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
479
+ .length === 0 &&
480
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
481
+ <div className="flex items-center gap-[6px]">
482
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
483
+ <LottiePlayer
484
+ animationData={serviceItem.icons.starAnimation}
485
+ width="14px"
486
+ height="14px"
487
+ />
488
+
489
+ <span className="text-[#fff]">Más elegido</span>
490
+ </div>
491
+ ) : (
492
+ <div
493
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
494
+ >
495
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
484
496
  <LottiePlayer
485
- animationData={serviceItem.icons.starAnimation}
497
+ animationData={serviceItem.icons.bombAnim}
486
498
  width="14px"
487
499
  height="14px"
488
500
  />
489
-
490
- <span className="text-[#fff]">Más elegido</span>
491
501
  </div>
492
- ) : (
493
502
  <div
494
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
503
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
504
+ style={{
505
+ color: "#fff",
506
+ lineHeight: 1.4,
507
+ }}
495
508
  >
496
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
497
- <LottiePlayer
498
- animationData={serviceItem.icons.bombAnim}
499
- width="14px"
500
- height="14px"
509
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
510
+ Termina en&nbsp;
511
+ <span
512
+ className="bold-text"
513
+ ref={(node) =>
514
+ commonService.startCountdown(node, 599)
515
+ }
516
+ style={{
517
+ fontVariantNumeric: "tabular-nums",
518
+ display: "inline-block",
519
+ }}
501
520
  />
502
- </div>
503
- <div
504
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
505
- style={{
506
- color: "#fff",
507
- lineHeight: 1.4,
508
- }}
509
- >
510
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
511
- Termina en&nbsp;
512
- <span
513
- className="bold-text"
514
- ref={(node) =>
515
- commonService.startCountdown(node, 599)
516
- }
517
- style={{
518
- fontVariantNumeric: "tabular-nums",
519
- display: "inline-block",
520
- }}
521
- />
522
- </span>
523
- </div>
521
+ </span>
524
522
  </div>
525
- )}
526
- <div
527
- className="flex flex-col items-end"
528
- style={{
529
- color: "#fff",
530
- }}
531
- >
532
- <div className="flex items-center">
533
- <div className="mr-[4px]">
534
- {" "}
535
- <LottiePlayer
536
- animationData={serviceItem.icons.dotAnimation}
537
- width="12px"
538
- height="12px"
539
- />
540
- </div>
541
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
523
+ </div>
524
+ )}
525
+ <div
526
+ className="flex flex-col items-end"
527
+ style={{
528
+ color: "#fff",
529
+ }}
530
+ >
531
+ <div className="flex items-center">
532
+ <div className="mr-[4px]">
533
+ {" "}
534
+ <LottiePlayer
535
+ animationData={serviceItem.icons.dotAnimation}
536
+ width="12px"
537
+ height="12px"
538
+ />
539
+ </div>
540
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
541
+ <span
542
+ className="bold-text"
543
+ ref={(node) =>
544
+ commonService.startViewerCount(node, viewersConfig)
545
+ }
546
+ style={{ fontVariantNumeric: "tabular-nums" }}
547
+ />{" "}
548
+ <span> viendo</span> |{" "}
549
+ <span className="whitespace-nowrap">
550
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
542
551
  <span
543
552
  className="bold-text"
544
553
  ref={(node) =>
545
- commonService.startViewerCount(
546
- node,
547
- viewersConfig,
548
- )
554
+ commonService.startComprandoCount(node, 4, 16)
549
555
  }
550
556
  style={{ fontVariantNumeric: "tabular-nums" }}
551
557
  />{" "}
552
- <span> viendo</span> |{" "}
553
- <span className="whitespace-nowrap">
554
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
555
- <span
556
- className="bold-text"
557
- ref={(node) =>
558
- commonService.startComprandoCount(node, 4, 16)
559
- }
560
- style={{ fontVariantNumeric: "tabular-nums" }}
561
- />{" "}
562
- comprando
563
- </span>
558
+ comprando
564
559
  </span>
565
- </div>
560
+ </span>
566
561
  </div>
567
562
  </div>
568
563
  </div>
569
564
  </div>
570
- )}
565
+ </div>
566
+ )}
571
567
  <div
572
568
  style={{
573
569
  display: "grid",
@@ -577,15 +573,29 @@ function ServiceItemMobile({
577
573
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
578
574
  position: "relative",
579
575
  zIndex:
580
- serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
576
+ serviceItem?.offer_text ||
577
+ serviceItem?.is_dp_enabled ||
578
+ isNewUiEnabled
579
+ ? -2
580
+ : -1,
581
581
  }}
582
582
  >
583
583
  <div
584
584
  style={{
585
585
  overflow: "hidden",
586
586
  minHeight: 0,
587
- position: serviceItem?.offer_text ? "relative" : undefined,
588
- zIndex: serviceItem?.offer_text ? -3 : undefined,
587
+ position:
588
+ serviceItem?.offer_text ||
589
+ isNewUiEnabled ||
590
+ serviceItem?.is_dp_enabled
591
+ ? "relative"
592
+ : undefined,
593
+ zIndex:
594
+ serviceItem?.offer_text ||
595
+ isNewUiEnabled ||
596
+ serviceItem?.is_dp_enabled
597
+ ? -3
598
+ : undefined,
589
599
  marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
590
600
  }}
591
601
  >