kupos-ui-components-lib 10.2.10 → 10.3.0

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 +8 -5
  2. package/dist/ui/OfferBanner.js +4 -4
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemDesktop.tsx +33 -22
  5. package/src/ui/OfferBanner.tsx +5 -2
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -89,6 +89,7 @@ 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);
92
93
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
94
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
94
95
  onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
@@ -156,7 +157,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
156
157
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
157
158
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
158
159
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
159
- const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
160
+ console.log("🚀 ~ ServiceItemPB ~ hasOfferText:", hasOfferText, isNewUiEnabled, hasDpEnabled);
161
+ const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
160
162
  ? {
161
163
  borderColor: "transparent",
162
164
  borderStyle: "solid",
@@ -298,10 +300,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
298
300
  showTopLabel
299
301
  ? "mt-[25px]"
300
302
  : "mt-[20px]"} ` },
301
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal, coachKey: coachKey, isExpand: isExpand })),
302
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
303
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || isNewUiEnabled) &&
304
+ !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal, coachKey: coachKey, isExpand: isItemExpanded })),
305
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(isNewUiEnabled || hasDpEnabled) && !isSoldOut
303
306
  ? "z-[3] rounded-[18px]"
304
- : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
307
+ : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { zIndex: hasOfferText ? 1 : undefined }) },
305
308
  React.createElement("div", { className: " pt-[20px]", style: {
306
309
  padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
307
310
  ? "20px 15px 10px 15px"
@@ -344,7 +347,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
344
347
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
345
348
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
346
349
  position: "relative",
347
- zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
350
+ zIndex: hasDiscount || hasDpEnabled || hasOfferText ? 0 : -1,
348
351
  marginTop: isItemExpanded ? "" : "-10px",
349
352
  } },
350
353
  React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || hasDiscount ? "" : "-10px" }, (hasDpEnabled || hasDiscount
package/dist/ui/OfferBanner.js CHANGED
@@ -18,14 +18,14 @@ const AnimationIcon = ({ getAnimationIcon, name, width = "18px", height = "18px"
18
18
  const PopularServiceBanner = ({ getAnimationIcon }) => (React.createElement("div", { className: "flex items-center gap-[5px]" },
19
19
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "starAnimation" }),
20
20
  React.createElement("span", null, "Servicio popular entre los usuarios")));
21
- const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, }) => (React.createElement("div", { className: "flex items-center" },
21
+ const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, isNewUiEnabled, }) => (React.createElement("div", { className: "flex items-center" },
22
22
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "bombAnimation" }),
23
23
  React.createElement("div", { className: "flex items-center mt-[2px]" },
24
24
  React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } },
25
25
  truncateOfferText(offerText),
26
26
  " ",
27
27
  !hideRegister &&
28
- (isLoggedIn && showLoginOption
28
+ ((isLoggedIn && showLoginOption) || isNewUiEnabled
29
29
  ? null
30
30
  : showLoginOption && (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro"))),
31
31
  " ",
@@ -66,8 +66,8 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
66
66
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
67
67
  }
68
68
  const hasDp = hasDpDiscounts(serviceItem);
69
- if (hasDp || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))) {
70
- return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp }));
69
+ if (hasDp || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) {
70
+ return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled }));
71
71
  }
72
72
  if (isLegacyOffer) {
73
73
  return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.2.10",
3
+ "version": "10.3.0",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -152,6 +152,7 @@ function ServiceItemPB({
152
152
  isFlores,
153
153
  operatorLabel,
154
154
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
155
+ console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
155
156
  const handleSeatSelect = (
156
157
  key: any,
157
158
  price: number,
@@ -269,8 +270,14 @@ function ServiceItemPB({
269
270
 
270
271
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
271
272
  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
  const serviceCardStyle: React.CSSProperties =
273
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
280
+ (isNewUiEnabled || hasDpEnabled) && !isSoldOut
274
281
  ? {
275
282
  borderColor: "transparent",
276
283
  borderStyle: "solid",
@@ -543,32 +550,36 @@ function ServiceItemPB({
543
550
  : "mt-[20px]"
544
551
  } `}
545
552
  >
546
- {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
547
- <OfferBanner
548
- offerGradient={offerGradient}
549
- isSoldOut={isSoldOut}
550
- serviceItem={serviceItem}
551
- renderIcon={renderIcon}
552
- isLoggedIn={isLoggedIn}
553
- showLoginModal={showLoginModal}
554
- viewersConfig={viewersConfig}
555
- getAnimationIcon={getAnimationIcon}
556
- showLoginOption={showLoginOption}
557
- isNewUiEnabled={isNewUiEnabled}
558
- colors={colors}
559
- isLinatal={isLinatal}
560
- coachKey={coachKey}
561
- isExpand={isExpand}
562
- />
563
- )}
553
+ {(serviceItem?.offer_text || hasDpEnabled || isNewUiEnabled) &&
554
+ !isSoldOut && (
555
+ <OfferBanner
556
+ offerGradient={offerGradient}
557
+ isSoldOut={isSoldOut}
558
+ serviceItem={serviceItem}
559
+ renderIcon={renderIcon}
560
+ isLoggedIn={isLoggedIn}
561
+ showLoginModal={showLoginModal}
562
+ viewersConfig={viewersConfig}
563
+ getAnimationIcon={getAnimationIcon}
564
+ showLoginOption={showLoginOption}
565
+ isNewUiEnabled={isNewUiEnabled}
566
+ colors={colors}
567
+ isLinatal={isLinatal}
568
+ coachKey={coachKey}
569
+ isExpand={isItemExpanded}
570
+ />
571
+ )}
564
572
  <div
565
573
  id={`service-card-${serviceItem.id}`}
566
574
  className={`bg-white mx-auto relative ${
567
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
575
+ (isNewUiEnabled || hasDpEnabled) && !isSoldOut
568
576
  ? "z-[3] rounded-[18px]"
569
577
  : "rounded-[10px] border border-[#ccc]"
570
578
  }`}
571
- style={serviceCardStyle}
579
+ style={{
580
+ ...serviceCardStyle,
581
+ zIndex: hasOfferText ? 1 : undefined,
582
+ }}
572
583
  >
573
584
  <div
574
585
  className=" pt-[20px]"
@@ -730,7 +741,7 @@ function ServiceItemPB({
730
741
  transition:
731
742
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
732
743
  position: "relative",
733
- zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
744
+ zIndex: hasDiscount || hasDpEnabled || hasOfferText ? 0 : -1,
734
745
  marginTop: isItemExpanded ? "" : "-10px",
735
746
  }}
736
747
  >
package/src/ui/OfferBanner.tsx CHANGED
@@ -91,6 +91,7 @@ interface NewUiOfferBannerProps {
91
91
  showLoginOption?: boolean;
92
92
  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
93
93
  hideRegister?: boolean;
94
+ isNewUiEnabled?: any;
94
95
  }
95
96
 
96
97
  const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
@@ -100,6 +101,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
100
101
  showLoginOption,
101
102
  getAnimationIcon,
102
103
  hideRegister,
104
+ isNewUiEnabled,
103
105
  }) => (
104
106
  <div className="flex items-center">
105
107
  <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
@@ -110,7 +112,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
110
112
  >
111
113
  {truncateOfferText(offerText)}{" "}
112
114
  {!hideRegister &&
113
- (isLoggedIn && showLoginOption
115
+ ((isLoggedIn && showLoginOption) || isNewUiEnabled
114
116
  ? null
115
117
  : showLoginOption && (
116
118
  <span onClick={showLoginModal} className="cursor-pointer">
@@ -232,7 +234,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
232
234
 
233
235
  const hasDp = hasDpDiscounts(serviceItem);
234
236
 
235
- if (hasDp || (isNewUiEnabled && serviceItem?.offer_text)) {
237
+ if (hasDp || isNewUiEnabled || serviceItem?.offer_text) {
236
238
  return (
237
239
  <NewUiOfferBanner
238
240
  offerText={serviceItem.offer_text || ""}
@@ -241,6 +243,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
241
243
  showLoginOption={showLoginOption}
242
244
  getAnimationIcon={getAnimationIcon}
243
245
  hideRegister={hasDp}
246
+ isNewUiEnabled={isNewUiEnabled}
244
247
  />
245
248
  );
246
249
  }