kupos-ui-components-lib 9.9.0 → 9.9.2

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 (36) hide show
  1. package/dist/KuposUIComponent.d.ts +3 -0
  2. package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
  3. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +2 -2
  4. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  5. package/dist/components/ServiceItem/ServiceItemDesktop.js +29 -12
  6. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  7. package/dist/components/ServiceItem/ServiceItemMobile.js +43 -17
  8. package/dist/components/ServiceItem/mobileTypes.d.ts +48 -1
  9. package/dist/components/ServiceItem/types.d.ts +27 -2
  10. package/dist/styles.css +215 -3
  11. package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +1 -2
  12. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +2 -4
  13. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +22 -41
  14. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +24 -44
  15. package/dist/ui/OfferBanner.d.ts +2 -0
  16. package/dist/ui/OfferBanner.js +19 -14
  17. package/dist/ui/SeatSection/SeatSection.js +3 -3
  18. package/dist/utils/CommonService.d.ts +3 -0
  19. package/dist/utils/CommonService.js +18 -1
  20. package/package.json +1 -1
  21. package/src/KuposUIComponent.tsx +3 -0
  22. package/src/assets/images/anims/service_list/flame_anim.json +1 -0
  23. package/src/assets/images/anims/service_list/thunder_icon.json +1 -0
  24. package/src/assets/images/anims/service_list/users_anim.json +1 -0
  25. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +35 -24
  26. package/src/components/ServiceItem/ServiceItemDesktop.tsx +65 -10
  27. package/src/components/ServiceItem/ServiceItemMobile.tsx +387 -288
  28. package/src/components/ServiceItem/mobileTypes.ts +50 -7
  29. package/src/components/ServiceItem/types.ts +39 -13
  30. package/src/styles.css +15 -0
  31. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +2 -4
  32. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +575 -0
  33. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +610 -0
  34. package/src/ui/OfferBanner.tsx +31 -10
  35. package/src/ui/SeatSection/SeatSection.tsx +3 -3
  36. package/src/utils/CommonService.ts +26 -1
@@ -28,14 +28,14 @@ const HARDCODED_OPERATORS = [
28
28
  },
29
29
  ];
30
30
  const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
31
- var _a, _b, _c, _d, _e, _f;
32
- // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
33
- const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
34
- ? wowDealData.operators.map((op) => ({
35
- logo: op.operator_logo_url,
36
- name: op.operator_name,
37
- time: op.starting_departure,
38
- seatsAvailable: `${op.available_seats} disponibles`,
31
+ var _a, _b, _c, _d, _e, _f, _g;
32
+ // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
33
+ const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
34
+ ? wowDealData.services.slice(0, 3).map((service) => ({
35
+ logo: service.operator_logo_url,
36
+ name: service.operator_name,
37
+ time: service.departure_time,
38
+ seatsAvailable: `${service.available_seats} disponibles`,
39
39
  }))
40
40
  : ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
41
41
  ? serviceItem.operators
@@ -67,6 +67,16 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
67
67
  isFeatureDropDownExpand === true;
68
68
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
69
69
  const canDecreaseTicketQuantity = ticketQuantity > 1;
70
+ const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
71
+ let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
72
+ if (departures === null || departures === void 0 ? void 0 : departures.length) {
73
+ const sorted = [...departures].sort((a, b) => {
74
+ const [ah, am] = a.split(":").map(Number);
75
+ const [bh, bm] = b.split(":").map(Number);
76
+ return ah * 60 + am - (bh * 60 + bm);
77
+ });
78
+ departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
79
+ }
70
80
  const HOW_IT_WORKS_STEPS = [
71
81
  {
72
82
  icon: "flexible",
@@ -142,8 +152,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
142
152
  // animationData={serviceItem.icons.flexibleAnim}
143
153
  animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
144
154
  React.createElement("span", { className: "bold-text" }, "Remate"),
145
- "\u00A0t\u00E9rmina en",
146
- " ",
155
+ "\u00A0t\u00E9rmina en \u00A0",
147
156
  React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, getCountdownSeconds()), style: {
148
157
  fontVariantNumeric: "tabular-nums",
149
158
  display: "inline-block",
@@ -155,42 +164,14 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
155
164
  React.createElement("div", { className: "flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]" },
156
165
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
157
166
  React.createElement("div", { className: "flex items-center gap-[8px]" },
158
- React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
167
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
159
168
  React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
160
169
  React.createElement("div", { className: "flex items-center gap-[8px]" },
161
- React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
170
+ React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
162
171
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
163
172
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
164
173
  React.createElement("div", { className: "text-[12px] bold-text" }, travelDate ? new Date(travelDate).toLocaleDateString('es-CL', { weekday: 'long', day: 'numeric', month: 'long' }) : 'Viernes 23 de mayo'),
165
- React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
166
- if (!e.currentTarget.contains(e.relatedTarget)) {
167
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
168
- }
169
- }, style: { outline: "none" } },
170
- React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
171
- React.createElement("span", null, displayTimeSlot),
172
- React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
173
- width: "12px",
174
- height: "8px",
175
- filter: "brightness(0) invert(1)",
176
- } })),
177
- isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
178
- React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
179
- zIndex: 20,
180
- backgroundColor: "#fff",
181
- borderRadius: "14px",
182
- minWidth: "190px",
183
- boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
184
- overflow: "hidden",
185
- padding: "6px 0",
186
- } }, TIME_SLOTS.map((slot) => {
187
- const isActive = slot === selectedTimeSlot;
188
- return (React.createElement("button", { key: slot, type: "button", onClick: () => {
189
- onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
190
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
191
- }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
192
- React.createElement("span", null, slot)));
193
- })))))),
174
+ React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)),
194
175
  React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
195
176
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
196
177
  renderIcon("sheildIcon", "16px"),
@@ -256,8 +237,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
256
237
  savingsPercent,
257
238
  "% OFF"),
258
239
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
259
- "$",
260
- originalPrice.toLocaleString(),
240
+ `$${(originalPrice * ticketQuantity).toLocaleString()}`,
261
241
  React.createElement("span", { style: {
262
242
  position: "absolute",
263
243
  left: "-2px",
@@ -292,7 +272,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
292
272
  animationData: getAnimationIcon("thunderAnimation"), width: "16px", height: "16px" }),
293
273
  React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
294
274
  React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
295
- React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
275
+ React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
296
276
  width: "14px",
297
277
  height: "8px",
298
278
  filter: "brightness(0) invert(1)",
@@ -10,6 +10,8 @@ interface OfferBannerProps {
10
10
  viewersConfig: ServiceItemProps["viewersConfig"];
11
11
  getAnimationIcon: (name: string) => any;
12
12
  showLoginOption?: boolean;
13
+ isNewUiEnabled?: boolean;
14
+ colors: any;
13
15
  }
14
16
  declare const OfferBanner: React.FC<OfferBannerProps>;
15
17
  export default OfferBanner;
@@ -1,10 +1,10 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../assets/LottiePlayer";
3
3
  import CommonService from "../utils/CommonService";
4
- const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, }) => {
5
- var _a, _b, _c, _d, _e, _f;
6
- return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]", style: {
7
- background: offerGradient,
4
+ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
5
+ var _a, _b, _c, _d;
6
+ return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
7
+ background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient,
8
8
  opacity: isSoldOut ? 0.5 : 1,
9
9
  // zIndex: 0,
10
10
  } },
@@ -13,7 +13,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
13
13
  Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length === 0 &&
14
14
  ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[5px]" },
15
15
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("starAnimation"), width: "18px", height: "18px" }),
16
- React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
16
+ React.createElement("span", null, "Servicio popular entre los usuarios"))) : ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) ? (React.createElement("div", { className: "flex items-center" },
17
17
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
18
18
  React.createElement("div", { className: "flex items-center mt-[2px]" },
19
19
  React.createElement("span", { className: "bold-text", style: {
@@ -23,19 +23,24 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
23
23
  ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
24
24
  : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
25
25
  " ",
26
- isLoggedIn && showLoginOption ? null : Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length > 0 ||
27
- ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length >
28
- 0 ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
26
+ isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
29
27
  " ",
30
28
  "\u00A0"),
31
29
  " ",
32
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "| " : "",
30
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "|" : "",
33
31
  "Termina en\u00A0",
34
32
  React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
35
33
  fontVariantNumeric: "tabular-nums",
36
34
  display: "inline-block",
37
- } }))))),
38
- React.createElement("div", { className: "flex items-center" },
35
+ } }))))
36
+ : ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled) && (React.createElement("div", { className: "flex items-center" },
37
+ React.createElement(LottiePlayer, { animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
38
+ React.createElement("div", { className: "flex items-center mt-[2px]" },
39
+ React.createElement("span", { className: "bold-text", style: {
40
+ marginLeft: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "6px" : "3px",
41
+ } }, ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "")),
42
+ " "))))),
43
+ (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "flex items-center" },
39
44
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
40
45
  React.createElement("span", { className: "ml-[6px]" },
41
46
  React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
@@ -47,13 +52,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
47
52
  " ",
48
53
  React.createElement("span", { className: "" },
49
54
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
50
- Object.keys((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _e !== void 0 ? _e : {}).length ===
55
+ Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length ===
51
56
  0 &&
52
- ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _f !== void 0 ? _f : []).length === 0
57
+ ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length === 0
53
58
  ? null
54
59
  : "Quedan pocos • ",
55
60
  React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
56
61
  " ",
57
- "comprando")))))));
62
+ "comprando"))))))));
58
63
  };
59
64
  export default OfferBanner;
@@ -147,7 +147,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
147
147
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
148
148
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
149
149
  React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, !isNaN(Number(dpDiscountPercent)) &&
150
- Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
150
+ Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
151
151
  animation: "pulse-zoom 2s ease-in-out infinite",
152
152
  whiteSpace: "nowrap",
153
153
  } },
@@ -168,7 +168,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
168
168
  } }))),
169
169
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
170
170
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
171
- React.createElement("div", { className: "absolute", style: { left: isPeru ? "-19px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
171
+ React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
172
172
  availableSeats <= 0
173
173
  ? CommonService.currency(0, currencySign)
174
174
  : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
@@ -239,7 +239,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
239
239
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
240
240
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
241
241
  React.createElement("div", { className: "absolute", style: {
242
- left: isPeru ? "-18px" : "-18px",
242
+ left: isPeru ? "-1px" : "-18px",
243
243
  bottom: "1px",
244
244
  } }, renderIcon("fireIcon", "16px")),
245
245
  availableSeats <= 0
@@ -14,6 +14,9 @@ declare const commonService: {
14
14
  discount_type?: string;
15
15
  discount_value?: number;
16
16
  max_discount?: number;
17
+ discounts?: Array<{
18
+ new_ui_enabled?: boolean;
19
+ }>;
17
20
  }) => {
18
21
  originalPrice: number;
19
22
  discountedPrice: number;
@@ -275,6 +275,7 @@ const commonService = {
275
275
  return label.toLowerCase();
276
276
  },
277
277
  calculateDiscountedPrice: (originalPrice, serviceItem) => {
278
+ var _a;
278
279
  const price = typeof originalPrice === "string"
279
280
  ? parseFloat(originalPrice)
280
281
  : originalPrice;
@@ -282,6 +283,12 @@ const commonService = {
282
283
  return { originalPrice: price, discountedPrice: price };
283
284
  }
284
285
  const { discount_type, discount_value, max_discount } = serviceItem;
286
+ // Check if there's a discount with new_ui_enabled = true
287
+ const newUiEnabled = (_a = serviceItem.discounts) === null || _a === void 0 ? void 0 : _a.some((d) => d.new_ui_enabled === true);
288
+ // Only apply discount if new_ui_enabled is true OR if regular discount exists
289
+ if (!newUiEnabled && (!discount_type || discount_value == null)) {
290
+ return { originalPrice: price, discountedPrice: price };
291
+ }
285
292
  const fixedDiscount = discount_type === "fixed" && discount_value != null ? discount_value : 0;
286
293
  const percentageDiscount = discount_type === "percentage" && discount_value != null
287
294
  ? (price * discount_value) / 100
@@ -296,10 +303,14 @@ const commonService = {
296
303
  startViewerCount: (node, viewersConfig) => {
297
304
  if (!node || !viewersConfig)
298
305
  return;
306
+ const { min, max, interval = 5000 } = viewersConfig;
307
+ const configKey = `${min}-${max}-${interval}`;
308
+ if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
309
+ return;
310
+ }
299
311
  const prevId = node.dataset.viewerId;
300
312
  if (prevId)
301
313
  clearInterval(Number(prevId));
302
- const { min, max, interval = 5000 } = viewersConfig;
303
314
  const clamp = (v) => Math.min(max, Math.max(min, v));
304
315
  const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
305
316
  node.textContent = String(initialValue);
@@ -310,6 +321,7 @@ const commonService = {
310
321
  node.textContent = String(clamp(Math.round(next)));
311
322
  }, interval);
312
323
  node.dataset.viewerId = String(id);
324
+ node.dataset.viewerConfig = configKey;
313
325
  },
314
326
  startCountdown: (node, countdownSeconds = 599) => {
315
327
  if (!node)
@@ -339,6 +351,10 @@ const commonService = {
339
351
  startComprandoCount: (node, min = 4, max = 16) => {
340
352
  if (!node)
341
353
  return;
354
+ const configKey = `${min}-${max}`;
355
+ if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
356
+ return;
357
+ }
342
358
  const prevId = node.dataset.comprandoId;
343
359
  if (prevId)
344
360
  clearInterval(Number(prevId));
@@ -355,6 +371,7 @@ const commonService = {
355
371
  node.textContent = String(next);
356
372
  }, 5000); // Update every 5 seconds
357
373
  node.dataset.comprandoId = String(id);
374
+ node.dataset.comprandoConfig = configKey;
358
375
  },
359
376
  };
360
377
  export default commonService;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.9.0",
3
+ "version": "9.9.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -32,6 +32,9 @@ interface KuposUIComponentProps {
32
32
  orignLabel?: string;
33
33
  destinationLabel?: string;
34
34
  t?: (key: string) => string;
35
+ ticketQuantity?: number;
36
+ onIncreaseTicketQuantity?: (serviceItem: any) => void;
37
+ onDecreaseTicketQuantity?: (serviceItem: any) => void;
35
38
 
36
39
  // New ServiceItem props
37
40
  id?: string;
@@ -0,0 +1 @@
1
+ {"v":"5.7.4","ip":0,"op":15,"fr":30,"w":512,"h":512,"nm":"F","assets":[],"layers":[{"ind":1,"nm":"Y","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[258.695,426.49,0],"l":2},"a":{"a":0,"k":[0,0,0],"l":2},"s":{"a":0,"k":[60,60,100],"l":2}},"ip":0,"op":15,"st":0,"ty":3},{"ind":2,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-3,"s":[-1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[-1]},{"t":18,"s":[1]}]},"p":{"a":0,"k":[-2.695,0.01,0],"l":2},"a":{"a":0,"k":[0,170,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,2.289]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-2,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,-1.289]},"t":2,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":18,"s":[100,100,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"t":21,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":3,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[2]},{"t":21,"s":[0]}]},"p":{"a":0,"k":[-43.551,-9.952,0],"l":2},"a":{"a":0,"k":[-40,160,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[92,92,100]},{"t":14,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-17,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-10,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"t":18,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":4,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-1,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13,"s":[0]},{"t":20,"s":[2]}]},"p":{"a":0,"k":[1.234,-1.178,0],"l":2},"a":{"a":0,"k":[2.694,170.559,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[96,96,100]},{"t":21,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"t":18,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":5,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-3,"s":[-1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[-1]},{"t":18,"s":[1]}]},"p":{"a":0,"k":[256,426,0],"l":2},"a":{"a":0,"k":[0,170,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,2.289]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-2,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,-1.289]},"t":2,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":18,"s":[100,100,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"t":21,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4},{"ind":6,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[2]},{"t":21,"s":[0]}]},"p":{"a":0,"k":[215.144,416.538,0],"l":2},"a":{"a":0,"k":[-40,160,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[92,92,100]},{"t":14,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-17,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-10,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"t":18,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4},{"ind":7,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-1,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13,"s":[0]},{"t":20,"s":[2]}]},"p":{"a":0,"k":[259.929,425.312,0],"l":2},"a":{"a":0,"k":[2.694,170.559,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[96,96,100]},{"t":21,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"t":18,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4}],"markers":[]}
@@ -0,0 +1 @@
1
+ {"nm":"t","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":4,"nm":"t","sr":1,"st":60,"op":90,"ip":60,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":89},{"s":[0],"t":90}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":66}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":60},{"s":[100],"t":61}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":66},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":72}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":66},{"s":[100],"t":67}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":66},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":72},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":78}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":72},{"s":[100],"t":73}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"t","sr":1,"st":30,"op":60,"ip":30,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":59},{"s":[0],"t":60}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":30},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":36}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":30},{"s":[100],"t":31}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":36},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":42}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":36},{"s":[100],"t":37}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":36},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":42},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":48}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":42},{"s":[100],"t":43}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"t","sr":1,"st":0,"op":30,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":29},{"s":[0],"t":30}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":6}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":0},{"s":[100],"t":1}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":6},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":12}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":6},{"s":[100],"t":7}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":6},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":12},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":18}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":12},{"s":[100],"t":13}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3}],"v":"5.9.0","fr":30,"op":90,"ip":0,"assets":[]}
@@ -0,0 +1 @@
1
+ {"nm":"Main Scene","ddd":0,"h":512,"w":512,"meta":{"g":"@lottiefiles/creator@1.90.1"},"layers":[{"ty":2,"nm":"111","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[54.49996512276783,38.99999128069197]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[436.62,436.62],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[300,300],"t":58},{"s":[436.62,436.62],"t":112}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[255.99996512276783,255.99999128069197]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":58},{"s":[100],"t":112}]}},"refId":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","ind":1}],"v":"5.7.0","fr":30,"op":114,"ip":0,"assets":[{"id":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","e":1,"w":109,"h":78,"p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABOCAYAAAAqwJjOAAAACXBIWXMAAAsSAAALEgHS3X78AAAFrUlEQVR4nO2d4XXiOBDHf5u33+MOcAfLVRBfBctVEFJBuAqO6yDpwKlgsxWcqeCggnM6gAp0H8beYGEDNhpZBv/e4wUF0Bj/PdJYGokvxhgCIQJmQAJMgW8N71sBayAD3n0cWGh8CUC0BFgA3zt8dge8FI+tw2MKmj5Fi5GT3UUsm1K8pYO6gqcv0ebISb53XO+mqHvtuN6g6EO0FHhUrH+H9I2Zoo1e8S1aiq5g+zwV9toSIYHQPtmlB+MSn6K9AM++jCEel3C6qYwRz5whYjU12R98Rqy9Rq2+RJsBP3wYsvhAhKiLLGMkcOni+b1GrT5Ei4Ac90HHubwhwck+rrx+V9Tt1fPuPNjQiBLb8Ig0k/tEjuq+R1qQ1FF9Z6HtaTHwn6aBM1lRFW4K/KtgY4aH5lLb0xbK9Z/LA9WIcI30d65teGkmtUWbK9ffhrlV1jjBD0h3oIqmaAn99mU2M6us5RXPHPahTtEWLSQmSB9bojnUlSrWfVOiQbVf2+K+XyuZoNg1+Aj5Q8IensoVbS21KtYU7UGx7iEw4fAiccKteZpv7ODHCaNouiQalWqKptXJDwmVLkJTtFyx7q7kVtnVGKRXNEULcco/t8pNGV9Boylaplh3F3ZUjynp5zAu55ZEy6yySjjuA03RtsBPxfrbklrleQ/H4ATtkF99xPtMPqgOEMf46c9WGpVqi5ahdOAtWVrluSe7KsGYjxyRBPhH28gRNlT7L585K7+hIJyPEZEMePVgp4m5VV7gR7APlDzN1zDWArniffNE9cTFwF+ebKv15z7HHhP8CvcnhxGjXdbiQ9OWT9G2+BPulcMrfYm/6aIFmllZxhjfj8gY82502Bpj5jU2Z0r26khr7Dt99DE1s0XmmZ6QoSVXrJAoMa15LXdsq4kNHtIG+5xPS5HA4G8uO6Eb4A+k6c0b3rMuXtcUblPYUE9WDWH5Lnyuty7XXJ8KycsRjpR2YfW0+Nyk9REe5w3tfmyPUESzmfK5Tqyc81ojJ6X825UICVJcrJPbIQGO1+G6UEXzQUL3iPLqlzqFTow0bQnHB5HL+bhyUWFvuymMoh2S1PwvJ6D0iVG0ATKm0A2QUbQBMoo2QEbRBsgo2gD52vcBWOyPgNg755SjISWXjowMlr5EmyL3Q3Hx/NhOOafYIOJliJBrArqn0sDXfVrM52Bwgn6ORjBbImmgKVqMCDWn/5z5n8iMwDEBo+I9TftPlqmAZTOdF4/s8sNrh4ZoCd13StWmzN1IqW9CI+TY2yb/bBDxMnx4tsNp8MQYkzmduNclNcbEpv67TI0x6wvqfjeS9hA11H/R4xbFsklN/cmNitcuYVvUMa2pvxfRXHypUNgaYxam/nvOHdnIjFzgF4vWtU+bIf1CSDvyuGCFBE659f8p0l+5+L5NNs6m7YhIGWH94PoEA5nFXnOYSu4yMegB2ZnvhY7Lh9t4WoxERn2H77545TAdzqXHgUSzc1reNpzraVPkarsVwUA2Jnun6g2uU/EmyIqiZZsPneNprq+uoVGXz6ixyefZaXinPO3WBQNpXTIOPe7JsZ3HGju1HBNtFOyTb9SvwHlTsJNxQrim5jFCribXmbhDxw5OtM7T0RTzJk/TSJ2+Bp6pblK2RWf9dp1n/6JOtAXjtn/HSKnu0JrhvpkEGXBf1r1gN48x4u5jP3Yce8v4GL3z9jvWfZztaS9Khq+NB6rNZI7eIowUKzDZFy0hzDmwULFFSpXsTLBGZvZFWyoZvVbszaVzdPo2ENF+eVsp2pQx+OiCPTaZKtm537dVBiIp/n6M7tqwd+XJ0bld2lF4W+lps+b3jpxgbpW1ckTuS1t3hPfzIkPDvuAzbVulaCPdsX8OJVO09R1G0VyR7D3fortTenLHgLeFDYjYKueKtqZ3jP2ZCxKrnCnair4Sxs6nQ8fegCZH77xG/wM8sVe80j/03AAAAABJRU5ErkJggg==","u":""}]}
@@ -67,7 +67,7 @@ function PeruServiceItemDesktop({
67
67
  isPeru,
68
68
  siteType,
69
69
  isAllinBus,
70
- isFlores,
70
+ isNewUiEnabled,
71
71
  t = (key: string) => key,
72
72
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
73
73
  const animationMap: Record<string, Record<string, any>> = {
@@ -149,8 +149,9 @@ function PeruServiceItemDesktop({
149
149
  style={{
150
150
  filter: color === "white" ? "brightness(0) invert(1)" : "",
151
151
  }}
152
- className={`object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
153
- }`}
152
+ className={`object-contain ${
153
+ moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
154
+ }`}
154
155
  />
155
156
  );
156
157
  };
@@ -261,8 +262,9 @@ function PeruServiceItemDesktop({
261
262
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
262
263
  <span
263
264
  key={key}
264
- className={`flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
265
- }`}
265
+ className={`flex items-center justify-between text-[13.33px] ${
266
+ isSoldOut ? "text-[#c0c0c0]" : ""
267
+ }`}
266
268
  >
267
269
  <div>
268
270
  <img
@@ -287,8 +289,9 @@ function PeruServiceItemDesktop({
287
289
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
288
290
  <span
289
291
  key={key}
290
- className={`flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
291
- }`}
292
+ className={`flex items-center justify-between text-[13.33px] ${
293
+ isSoldOut ? "text-[#c0c0c0]" : ""
294
+ }`}
292
295
  >
293
296
  <div>
294
297
  <img
@@ -536,13 +539,15 @@ function PeruServiceItemDesktop({
536
539
 
537
540
  return (
538
541
  <div
539
- className={`relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
540
- } ${serviceItem?.is_direct_trip ||
541
- serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
542
- showTopLabel
542
+ className={`relative ${
543
+ serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
544
+ } ${
545
+ serviceItem?.is_direct_trip ||
546
+ serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
547
+ showTopLabel
543
548
  ? "mt-[24px]"
544
549
  : "mt-[20px]"
545
- } `}
550
+ } `}
546
551
  >
547
552
  <div
548
553
  className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
@@ -583,8 +588,9 @@ function PeruServiceItemDesktop({
583
588
  <img
584
589
  src={serviceItem.operator_details[0]}
585
590
  alt="service logo"
586
- className={`h-auto object-contain ${isFlores ? "w-[80%]" : "w-full"
587
- } ${isSoldOut ? "grayscale" : ""}`}
591
+ className={` h-auto object-contain ${
592
+ isSoldOut ? "grayscale" : ""
593
+ }`}
588
594
  />
589
595
  </div>
590
596
  {isCiva ? (
@@ -596,8 +602,9 @@ function PeruServiceItemDesktop({
596
602
 
597
603
  {/* DATE AND TIME - Grid Layout */}
598
604
  <div
599
- className={`min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
600
- }`}
605
+ className={`min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
606
+ isSoldOut ? "text-[#c0c0c0]" : ""
607
+ }`}
601
608
  style={{
602
609
  gridTemplateRows: "1fr",
603
610
  }}
@@ -614,8 +621,9 @@ function PeruServiceItemDesktop({
614
621
  <img
615
622
  src={serviceItem.icons?.origin}
616
623
  alt="origin"
617
- className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
618
- }`}
624
+ className={`w-[18px] h-auto mr-[8px] ${
625
+ isSoldOut ? "grayscale" : ""
626
+ }`}
619
627
  />
620
628
  </div>
621
629
  )}
@@ -630,8 +638,9 @@ function PeruServiceItemDesktop({
630
638
  <div className="h-[20px] flex items-center">
631
639
  <img
632
640
  src={serviceItem.icons?.destination}
633
- className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
634
- }`}
641
+ className={`w-[18px] h-auto mr-[8px] ${
642
+ isSoldOut ? "grayscale" : ""
643
+ }`}
635
644
  style={{ opacity: isSoldOut ? 0.5 : 1 }}
636
645
  />
637
646
  </div>
@@ -736,8 +745,9 @@ function PeruServiceItemDesktop({
736
745
  {/* SEATS */}
737
746
  <div className="content-center">
738
747
  <div
739
- className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""
740
- }`}
748
+ className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
749
+ getNumberOfSeats() < 3 ? "" : ""
750
+ }`}
741
751
  style={
742
752
  getNumberOfSeats() < 2
743
753
  ? { alignItems: "center" }
@@ -783,8 +793,9 @@ function PeruServiceItemDesktop({
783
793
  <button
784
794
  onClick={() => (!isSoldOut ? checkMidnight() : null)}
785
795
  disabled={serviceDetailsLoading}
786
- className={`w-full ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
787
- } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
796
+ className={`w-full ${
797
+ serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
798
+ } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
788
799
  style={{
789
800
  backgroundColor:
790
801
  serviceDetailsLoading || isSoldOut