kupos-ui-components-lib 9.9.7 → 9.9.8

package/dist/ui/OfferBanner.js

@@ -1,10 +1,12 @@
 import React from "react";
 import LottiePlayer from "../assets/LottiePlayer";
 import CommonService from "../utils/CommonService";
-const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    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: {
-            background: offerGradient,
+const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
+    var _a, _b, _c, _d;
+    return (React.createElement("div", { className: "text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]", style: {
+            background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled
+                ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
+                : offerGradient,
             opacity: isSoldOut ? 0.5 : 1,
             // zIndex: 0,
         } },
@@ -13,7 +15,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
                 Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length === 0 &&
                 ((_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]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("starAnimation"), width: "18px", height: "18px" }),
-                React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
+                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" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
                 React.createElement("div", { className: "flex items-center mt-[2px]" },
                     React.createElement("span", { className: "bold-text", style: {
@@ -23,19 +25,24 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
                             ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
                             : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
                         " ",
-                        isLoggedIn && showLoginOption ? null : Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length > 0 ||
-                            ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length >
-                                0 ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
+                        isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
                         " ",
                         "\u00A0"),
                     " ",
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "| " : "",
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "|" : "",
                     "Termina en\u00A0",
                     React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
                             fontVariantNumeric: "tabular-nums",
                             display: "inline-block",
-                        } }))))),
-            React.createElement("div", { className: "flex items-center" },
+                        } })))) : ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
+                !isNewUiEnabled && (React.createElement("div", { className: "flex items-center" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
+                React.createElement("div", { className: "flex items-center mt-[2px]" },
+                    React.createElement("span", { className: "bold-text", style: {
+                            marginLeft: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "6px" : "3px",
+                        } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
+                    " "))))),
+            (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "flex items-center" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
                 React.createElement("span", { className: "ml-[6px]" },
                     React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
@@ -47,13 +54,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
                         " ",
                         React.createElement("span", { className: "" },
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                                Object.keys((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _e !== void 0 ? _e : {}).length ===
-                                    0 &&
-                                ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _f !== void 0 ? _f : []).length === 0
+                                Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {})
+                                    .length === 0 &&
+                                ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length === 0
                                 ? null
                                 : "Quedan pocos • ",
                             React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                             " ",
-                            "comprando")))))));
+                            "comprando"))))))));
 };
 export default OfferBanner;

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -3,8 +3,6 @@ interface SeatType {
     label: string;
     fare: number;
     key: any;
-    apiSeatType?: string;
-    api_seat_type?: string;
 }
 interface SeatSectionProps {
     seatTypes: SeatType[];
@@ -18,10 +16,6 @@ interface SeatSectionProps {
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
-    isTrain?: boolean;
-    selectedSeatKey?: any;
-    onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
-    topLabelColor?: string;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -8,13 +8,11 @@ function getAllSeatTypes(seatTypes) {
     let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
         label: val === null || val === void 0 ? void 0 : val.label,
         price: val === null || val === void 0 ? void 0 : val.fare,
-        key: val === null || val === void 0 ? void 0 : val.key,
-        apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
     }));
     seatTypesWithPrices.sort((a, b) => a.price - b.price);
     return seatTypesWithPrices;
 }
-function getSortedSeatTypes(seatTypes, isTrain) {
+function getSortedSeatTypes(seatTypes) {
     if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
         return [{ label: "Salon cama", price: 0 }];
     }
@@ -23,9 +21,7 @@ function getSortedSeatTypes(seatTypes, isTrain) {
     if (premiumIndex >= 3) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
-    if (!isTrain) {
-        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-    }
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
     const seenPrices = new Set();
     seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
         if (seenPrices.has(seat.price))
@@ -58,10 +54,10 @@ function getUniqueSeats(seatTypes) {
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
-    const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
@@ -69,36 +65,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         : CommonService.currency(price, currencySign);
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-        return seats.map((val, key) => {
-            return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
-                    ? () => val.label === selectedSeatKey
-                        ? onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(null, 0, "", "")
-                        : onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price, val.key, val.apiSeatType)
-                    : undefined },
-                isTrain && (React.createElement("div", { style: {
-                        border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
-                        borderRadius: "50%",
-                        width: "14px",
-                        height: "14px",
-                        minWidth: "14px",
-                        marginRight: "10px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
-                        backgroundColor: topLabelColor,
-                        borderRadius: "50%",
-                        width: "7px",
-                        height: "7px",
-                    } })))),
-                React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
-                    ? removeDuplicateSeats && isPeru
-                        ? CommonService.truncateSeatLabel(val.label)
-                        : isTrain
-                            ? CommonService.truncateSeatLabel(val.label, 8)
-                            : val.label
-                    : null)));
-        });
+        return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+            ? removeDuplicateSeats && isPeru
+                ? CommonService.truncateSeatLabel(val.label)
+                : val.label
+            : null)));
     };
     const renderSeatPrices = () => {
         if (isPeru) {
@@ -176,7 +147,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
             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)) &&
-                Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
+                Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     whiteSpace: "nowrap",
                 } },
@@ -197,7 +168,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                         } }))),
             React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
                 React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
-                    React.createElement("div", { className: "absolute", style: { left: isPeru ? "-19px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
+                    React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
                     availableSeats <= 0
                         ? CommonService.currency(0, currencySign)
                         : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
@@ -268,7 +239,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
                 React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
                     React.createElement("div", { className: "absolute", style: {
-                            left: isPeru ? "-18px" : "-18px",
+                            left: isPeru ? "-1px" : "-18px",
                             bottom: "1px",
                         } }, renderIcon("fireIcon", "16px")),
                     availableSeats <= 0

package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts

@@ -22,7 +22,6 @@ interface DateTimeSectionMobileProps {
     tooltipBgColor?: string;
     showLastSeats?: boolean;
     discountSeatPriceColor?: string;
-    isTrain?: boolean;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: DateTimeSectionMobileProps): React.ReactElement;
+declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -23,10 +23,8 @@ const getCleanedDepTime = (raw) => {
 };
 const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
     const formattedDate = DateService.getServiceItemDate(date);
-    const dotPositionClass = formattedDate.includes("dom")
-        ? "max-[399px]:left-[53%]"
-        : "";
-    return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+    const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+    return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
         React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
             React.createElement("div", null,
                 " ",
@@ -35,9 +33,9 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
             React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
                 React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
                 React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
-                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
+                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
 };
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -49,11 +47,7 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
             ? null
             : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
     return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
-        React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
-                justifyContent: isCiva && "center",
-                minHeight: isTrain ? undefined : "2.5rem",
-                alignSelf: isTrain ? "stretch" : undefined,
-            } },
+        React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
             React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
             isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
         React.createElement("div", { style: {
@@ -62,6 +56,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 backgroundColor: "#ccc",
                 margin: "auto",
             } }),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor })));
 }
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.d.ts

@@ -16,7 +16,6 @@ interface SeatSectionMobileProps {
     tooltipBgColor?: string;
     showLastSeats?: boolean;
     discountSeatPriceColor?: string;
-    isTrain?: boolean;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -11,7 +11,7 @@ const EXCEPTIONS = [
     "blanco",
     "asiento_mascota",
 ];
-const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
+const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
     if (EXCEPTIONS.includes(type.label))
         return null;
     const rowClass = hasMultipleTypes
@@ -20,9 +20,7 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
     const labelColor = isSoldOut ? "#bbb" : "#464647";
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
     return (React.createElement("div", { className: rowClass, key: index },
-        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
-            ? commonService.truncateSeatLabel(displayLabel, 8)
-            : displayLabel),
+        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize}  bold-text`, style: { color: priceColor } }, fare)));
 };
 const getFilteredSeats = (item) => {
@@ -44,8 +42,8 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -103,24 +101,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
     };
     const renderSeats = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (isPeru) {
             return renderPeruSeats();
         }
         if (removeDuplicateSeats) {
             const uniqueSeats = getUniqueSeats(seatTypesData, 3);
-            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
+            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
         }
-        const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-        return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
+        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
     };
     const seats = removeDuplicateSeats
         ? getUniqueSeats(seatTypesData, 3)
-        : (() => {
-            var _a;
-            const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-            return isTrain ? filtered : filtered === null || filtered === void 0 ? void 0 : filtered.slice(0, 2);
-        })();
+        : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
     const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const peruLowestFare = isPeru ? getLowestFare() : null;
     const peruDiscountCalc = isPeru && peruLowestFare != null
@@ -131,7 +124,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
         : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     const discountSeat = isPeru && peruDiscountCalc
-        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_b = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
     const discountValue = (() => {
         if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
             typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
@@ -154,14 +147,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
     };
     const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
     const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
-    const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
         dpDiscountPercent != null &&
         firstSeatFare != null;
     return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-        !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
+        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
         !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         !isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
@@ -193,7 +186,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                 color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
             } },
-            ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
@@ -227,8 +220,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                     color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
                 } },
-                ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
-                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
+                ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },

package/dist/utils/CommonService.d.ts

@@ -3,7 +3,7 @@ declare const commonService: {
     discountedCurrency(amount: number, currencySign?: string): string;
     copyObject: (ob: any) => any;
     getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
-    truncateSeatLabel: (label: string | number, maxLength?: number) => string;
+    truncateSeatLabel: (label: string | number) => string;
     getAmenitiesImage: (name: string, serviceItem: any) => string;
     getAmenityName: (rawAmenity: string) => string;
     getSeatNameForFilters: (rawSeat: any) => any;
@@ -14,6 +14,9 @@ declare const commonService: {
         discount_type?: string;
         discount_value?: number;
         max_discount?: number;
+        discounts?: Array<{
+            new_ui_enabled?: boolean;
+        }>;
     }) => {
         originalPrice: number;
         discountedPrice: number;

package/dist/utils/CommonService.js

@@ -34,15 +34,11 @@ const commonService = {
                 return "";
         }
     },
-    truncateSeatLabel: (label, maxLength) => {
+    truncateSeatLabel: (label) => {
         if (typeof label !== "string")
             return String(label);
         if (label.includes("("))
             return label;
-        // If maxLength provided, hard-truncate regardless of word count
-        if (maxLength != null && label.length > maxLength) {
-            return label.slice(0, maxLength) + "...";
-        }
         const words = label.trim().split(/\s+/);
         const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
         if (words.length === 1)
@@ -279,6 +275,7 @@ const commonService = {
         return label.toLowerCase();
     },
     calculateDiscountedPrice: (originalPrice, serviceItem) => {
+        var _a;
         const price = typeof originalPrice === "string"
             ? parseFloat(originalPrice)
             : originalPrice;
@@ -286,6 +283,12 @@ const commonService = {
             return { originalPrice: price, discountedPrice: price };
         }
         const { discount_type, discount_value, max_discount } = serviceItem;
+        // Check if there's a discount with new_ui_enabled = true
+        const newUiEnabled = (_a = serviceItem.discounts) === null || _a === void 0 ? void 0 : _a.some((d) => d.new_ui_enabled === true);
+        // Only apply discount if new_ui_enabled is true OR if regular discount exists
+        if (!newUiEnabled && (!discount_type || discount_value == null)) {
+            return { originalPrice: price, discountedPrice: price };
+        }
         const fixedDiscount = discount_type === "fixed" && discount_value != null ? discount_value : 0;
         const percentageDiscount = discount_type === "percentage" && discount_value != null
             ? (price * discount_value) / 100
@@ -300,10 +303,14 @@ const commonService = {
     startViewerCount: (node, viewersConfig) => {
         if (!node || !viewersConfig)
             return;
+        const { min, max, interval = 5000 } = viewersConfig;
+        const configKey = `${min}-${max}-${interval}`;
+        if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
+            return;
+        }
         const prevId = node.dataset.viewerId;
         if (prevId)
             clearInterval(Number(prevId));
-        const { min, max, interval = 5000 } = viewersConfig;
         const clamp = (v) => Math.min(max, Math.max(min, v));
         const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
         node.textContent = String(initialValue);
@@ -314,6 +321,7 @@ const commonService = {
             node.textContent = String(clamp(Math.round(next)));
         }, interval);
         node.dataset.viewerId = String(id);
+        node.dataset.viewerConfig = configKey;
     },
     startCountdown: (node, countdownSeconds = 599) => {
         if (!node)
@@ -343,6 +351,10 @@ const commonService = {
     startComprandoCount: (node, min = 4, max = 16) => {
         if (!node)
             return;
+        const configKey = `${min}-${max}`;
+        if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
+            return;
+        }
         const prevId = node.dataset.comprandoId;
         if (prevId)
             clearInterval(Number(prevId));
@@ -359,6 +371,7 @@ const commonService = {
             node.textContent = String(next);
         }, 5000); // Update every 5 seconds
         node.dataset.comprandoId = String(id);
+        node.dataset.comprandoConfig = configKey;
     },
 };
 export default commonService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.9.7",
+  "version": "9.9.8",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/KuposUIComponent.tsx

@@ -32,6 +32,9 @@ interface KuposUIComponentProps {
   orignLabel?: string;
   destinationLabel?: string;
   t?: (key: string) => string;
+  ticketQuantity?: number;
+  onIncreaseTicketQuantity?: (serviceItem: any) => void;
+  onDecreaseTicketQuantity?: (serviceItem: any) => void;
 
   // New ServiceItem props
   id?: string;

package/src/assets/images/anims/service_list/flame_anim.json

@@ -0,0 +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":[]}