kupos-ui-components-lib 9.8.2 → 9.8.4

package/dist/ui/SeatSection/SeatSection.js

@@ -8,7 +8,6 @@ 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,
     }));
     seatTypesWithPrices.sort((a, b) => a.price - b.price);
     return seatTypesWithPrices;
@@ -55,7 +54,7 @@ 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);
@@ -66,32 +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) => 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)
-                : 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)
-                    : 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) {

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -57,7 +57,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.filter((item) => !EXCEPTIONS.includes(item.label));
         if (!filtered || filtered.length === 0)
             return null;
-        return filtered.reduce((min, item) => (item.fare < min ? item.fare : min), filtered[0].fare);
+        return filtered.reduce((min, item) => (Number(item.fare) < min ? Number(item.fare) : min), Number(filtered[0].fare));
     };
     const renderPeruSeats = () => {
         const lowestFare = getLowestFare();

package/dist/utils/CommonService.js

@@ -296,10 +296,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);
@@ -310,6 +314,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)
@@ -339,6 +344,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));
@@ -355,6 +364,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.8.2",
+  "version": "9.8.4",
   "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":[]}

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

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

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

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,6 +27,8 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
+import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -37,6 +39,9 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
@@ -71,6 +76,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -80,6 +88,12 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
+  usersAnimation: {
+    kupos: usersAnimation,
+  },
+  flameAnimation: {
+    kupos: flameAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -113,21 +127,22 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const handleSeatSelect = (key: any, price: number) => {
-    onClearSeatSelectionError?.();
-    onSeatSelect?.(key, price);
-  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -324,17 +339,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -437,6 +441,36 @@ function ServiceItemPB({
           siteType={siteType}
           isAllinBus={isAllinBus}
         />
+      ) : isNewUi ? (
+        <FeatureServiceUi
+          serviceItem={serviceItem}
+          showTopLabel={showTopLabel}
+          isSoldOut={isSoldOut}
+          getAnimationIcon={getAnimationIcon}
+          cityOrigin={cityOrigin}
+          cityDestination={cityDestination}
+          renderIcon={renderIcon}
+          viewersConfig={viewersConfig}
+          isFeatureDropDownExpand={isFeatureDropDownExpand}
+          ticketQuantity={ticketQuantity}
+          onIncreaseTicketQuantity={onIncreaseTicketQuantity}
+          onDecreaseTicketQuantity={onDecreaseTicketQuantity}
+          onBookButtonPress={onRemateUiButtonClick}
+          onToggleExpand={() =>
+            setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(
+              isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id,
+            )
+          }
+          selectedTimeSlot={selectedTimeSlot}
+          onTimeSlotChange={onTimeSlotChange}
+          isTimeDropdownOpen={isTimeDropdownOpen}
+          onTimeDropdownToggle={onTimeDropdownToggle}
+          wowDealData={wowDealData}
+        />
       ) : (
         <div
           className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
@@ -547,10 +581,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -566,18 +596,6 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
-                  {showSeatSelectionError === serviceItem.id && isTrain && (
-                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
-                      <div
-                        className="text-[9px] text-center whitespace-nowrap"
-                        style={{
-                          color: colors.seatPriceColor,
-                        }}
-                      >
-                        Selecciona el tipo de servicio
-                      </div>
-                    </div>
-                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&
@@ -624,6 +642,7 @@ function ServiceItemPB({
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-10px",
               }}
             >
               <div