kupos-ui-components-lib 9.3.1 → 9.3.3

package/dist/assets/images/anims/service_list/60_percent_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":100,"w":100,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[37,9]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":1},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[109,109],"t":48},{"s":[100,100],"t":89}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.51,0.27],[0.31,0.46],[0.14,0.56],[0,0.59],[-0.31,0.79],[-0.58,0.44],[-0.83,0],[-0.49,-0.27],[-0.26,-0.44],[-0.05,-0.49],[0,0],[0.25,0.2],[0.39,0],[0.27,-0.23],[0.15,-0.45],[0.02,-0.66],[0,-0.02],[0,-0.01],[-0.24,0.18],[-0.3,0.1],[-0.32,0],[-0.47,-0.26],[-0.28,-0.49],[0,-0.65],[0.3,-0.51],[0.52,-0.3],[0.67,0]],"o":[[-0.75,0],[-0.51,-0.28],[-0.31,-0.46],[-0.13,-0.57],[0,-1.1],[0.31,-0.8],[0.59,-0.44],[0.71,0],[0.49,0.27],[0.26,0.44],[0,0],[-0.07,-0.37],[-0.24,-0.21],[-0.37,0],[-0.27,0.22],[-0.15,0.45],[0,0.01],[0,0.02],[0.14,-0.24],[0.24,-0.18],[0.3,-0.1],[0.54,0],[0.47,0.25],[0.29,0.48],[0,0.61],[-0.29,0.5],[-0.51,0.3],[0,0]],"v":[[10.74,14.17],[8.85,13.76],[7.61,12.66],[6.94,11.13],[6.75,9.39],[7.21,6.55],[8.54,4.69],[10.67,4.03],[12.46,4.44],[13.58,5.5],[14.04,6.9],[12.08,6.9],[11.6,6.05],[10.65,5.74],[9.69,6.09],[9.06,7.1],[8.8,8.76],[8.8,8.81],[8.8,8.85],[9.38,8.22],[10.19,7.8],[11.11,7.64],[12.63,8.04],[13.75,9.14],[14.18,10.84],[13.73,12.52],[12.51,13.72],[10.74,14.17]]}}},{"ty":"sh","nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.23,0.12],[-0.13,0.22],[0,0.28],[0.14,0.21],[0.24,0.12],[0.31,0],[0.23,-0.12],[0.14,-0.22],[0,-0.29],[-0.14,-0.23],[-0.23,-0.13],[-0.31,0]],"o":[[0.3,0],[0.23,-0.13],[0.14,-0.22],[0,-0.31],[-0.13,-0.22],[-0.23,-0.13],[-0.3,0],[-0.23,0.12],[-0.14,0.22],[0,0.29],[0.14,0.22],[0.24,0.12],[0,0]],"v":[[10.62,12.38],[11.42,12.19],[11.97,11.66],[12.18,10.91],[11.97,10.12],[11.41,9.6],[10.6,9.41],[9.8,9.59],[9.24,10.11],[9.03,10.88],[9.24,11.66],[9.8,12.19],[10.62,12.38]]}}},{"ty":"sh","nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0]],"o":[[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[0,0]],"v":[[19.93,14.17],[17.61,13.52],[16.11,11.75],[15.59,9.1],[16.11,6.47],[17.61,4.68],[19.93,4.03],[22.25,4.68],[23.74,6.47],[24.27,9.1],[23.74,11.75],[22.25,13.52],[19.93,14.17]]}}},{"ty":"sh","nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.33,0.26],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.25],[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0]],"o":[[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0],[-0.33,0.25],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.26],[0,0]],"v":[[19.93,12.28],[21.08,11.89],[21.85,10.79],[22.13,9.1],[21.85,7.42],[21.08,6.33],[19.93,5.94],[18.77,6.33],[18,7.42],[17.73,9.1],[18,10.79],[18.77,11.89],[19.93,12.28]]}}},{"ty":"sh","nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[27.69,14],[33.13,4.2],[35.18,4.2],[29.73,14],[27.69,14]]}}},{"ty":"sh","nm":"Path 6","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.46,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.48,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.22,0.38],[-0.36,0.21],[0,0]],"v":[[34.94,14.17],[33.66,13.86],[32.77,12.98],[32.43,11.62],[32.77,10.25],[33.66,9.37],[34.92,9.06],[36.2,9.37],[37.08,10.25],[37.42,11.62],[37.08,12.98],[36.18,13.86],[34.94,14.17]]}}},{"ty":"sh","nm":"Path 7","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.25],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.25],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[34.92,12.75],[35.37,12.63],[35.68,12.24],[35.79,11.62],[35.68,10.98],[35.37,10.6],[34.92,10.46],[34.48,10.6],[34.17,10.98],[34.06,11.61],[34.17,12.24],[34.48,12.63],[34.92,12.75]]}}},{"ty":"sh","nm":"Path 8","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.47,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.47,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.21,0.38],[-0.37,0.21],[0,0]],"v":[[27.99,9.14],[26.72,8.83],[25.82,7.95],[25.49,6.59],[25.82,5.22],[26.72,4.34],[27.99,4.03],[29.25,4.34],[30.14,5.22],[30.47,6.59],[30.14,7.95],[29.25,8.83],[27.99,9.14]]}}},{"ty":"sh","nm":"Path 9","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[27.98,7.73],[28.43,7.6],[28.74,7.21],[28.85,6.59],[28.74,5.95],[28.43,5.57],[27.98,5.43],[27.53,5.57],[27.22,5.95],[27.11,6.59],[27.22,7.21],[27.53,7.6],[27.98,7.73]]}}},{"ty":"sh","nm":"Path 10","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.73,0.43],[0.42,0.76],[0,1],[-0.41,0.76],[-0.73,0.43],[-0.96,0],[-0.74,-0.43],[-0.4,-0.77],[0,-1],[0.41,-0.77],[0.74,-0.43],[0.96,0]],"o":[[-0.96,0],[-0.73,-0.43],[-0.41,-0.77],[0,-1],[0.42,-0.77],[0.73,-0.43],[0.96,0],[0.74,0.43],[0.41,0.76],[0,1],[-0.4,0.76],[-0.74,0.43],[0,0]],"v":[[46.66,14.17],[44.12,13.52],[42.4,11.75],[41.79,9.1],[42.4,6.47],[44.12,4.68],[46.66,4.03],[49.21,4.68],[50.91,6.47],[51.53,9.1],[50.91,11.75],[49.21,13.52],[46.66,14.17]]}}},{"ty":"sh","nm":"Path 11","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.4,0.26],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.25],[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.41,-0.26],[-0.55,0]],"o":[[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.4,-0.26],[-0.55,0],[-0.41,0.25],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.26],[0,0]],"v":[[46.66,12.28],[48.11,11.89],[49.07,10.79],[49.4,9.1],[49.07,7.42],[48.11,6.33],[46.66,5.94],[45.22,6.33],[44.26,7.42],[43.93,9.1],[44.26,10.79],[45.22,11.89],[46.66,12.28]]}}},{"ty":"sh","nm":"Path 12","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[53.1,14],[53.1,4.2],[59.61,4.2],[59.61,5.89],[55.2,5.89],[55.2,8.27],[58.67,8.27],[58.67,9.91],[55.2,9.91],[55.2,14],[53.1,14]]}}},{"ty":"sh","nm":"Path 13","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60.99,14],[60.99,4.2],[67.5,4.2],[67.5,5.89],[63.09,5.89],[63.09,8.27],[66.56,8.27],[66.56,9.91],[63.09,9.91],[63.09,14],[60.99,14]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37.094,9.075]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37.094,9.075]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 14","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-3.53],[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0]],"o":[[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0],[0,0],[0,-3.53],[0,0]],"v":[[6.4,0],[67.6,0],[74,6.4],[74,11.6],[67.6,18],[6.4,18],[0,11.6],[0,6.4],[6.4,0]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.361,0.38]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37,9]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37,9]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":30,"op":89,"ip":0,"assets":[]}

package/dist/assets/images/anims/service_list/dot_animation.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":260.03,"w":256,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"circle 3","sr":1,"st":12,"op":91,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-96.841,-18.544,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[1000,1000],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[400,400],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":53},{"s":[1000,1000],"t":78}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,130.015]},"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":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":53},{"s":[100],"t":78}]}},"shapes":[{"ty":"gr","nm":"Ellipse 1","it":[{"ty":"el","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[23.352,23.352]}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-96.841,-18.544]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":29.97,"op":84,"ip":0,"assets":[]}

package/dist/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/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -20,6 +20,7 @@ import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -29,6 +30,7 @@ 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 ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
     promoAnim: {
@@ -60,26 +62,11 @@ const ANIMATION_MAP = {
     bombAnimation: {
         kupos: bombAnimation,
     },
+    dotAnimation: {
+        kupos: dotAnimation,
+    },
 };
 function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, }) {
-    const startViewerCount = (node) => {
-        if (!node || !viewersConfig)
-            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);
-        const id = setInterval(() => {
-            const current = Number(node.textContent) || initialValue;
-            const delta = Math.ceil(current * 0.2);
-            const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
-            node.textContent = String(clamp(Math.round(next)));
-        }, interval);
-        node.dataset.viewerId = String(id);
-    };
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -111,9 +98,19 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         busStage[labelId].split("|")[1] === "true" &&
         busStage[labelId].split("|")[0];
     let isSoldOut = serviceItem.available_seats <= 0;
-    const showPromo = Math.random() > 0.5;
     const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
+    const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
+    const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
+    const serviceCardStyle = hasOfferText
+        ? {
+            borderColor: "transparent",
+            borderStyle: "solid",
+            borderWidth: "6px 6px 0 6px",
+            borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
+            background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+        }
+        : {};
     const renderIcon = (iconKey, size = "14px") => {
         var _a;
         const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
@@ -199,29 +196,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         }
         onBookButtonPress();
     };
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const items = [
         {
             key: "amenities",
@@ -235,19 +209,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             condition: serviceItem.duration,
             render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
         },
-        // {
-        //   key: "directo",
-        //   width: "12%",
-        //   condition: serviceItem?.is_direct_trip === true,
-        //   render: (
-        //     <DirectoBlock
-        //       translation={translation}
-        //       getAnimationIcon={getAnimationIcon}
-        //       colors={colors}
-        //       isSoldOut={isSoldOut}
-        //     />
-        //   ),
-        // },
         {
             key: "pet",
             width: "20%",
@@ -263,34 +224,23 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { 
-        // className={`relative ${
-        //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-        // } mt-[14px]`}
-        className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative rounded-[10px] border border-[#ccc]" },
+        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { className: " pt-[20px]", style: {
                     padding: coachKey
                         ? "15px 15px 20px 15px"
                         : "20px 15px 11px 15px",
+                    marginTop: hasOfferText ? "14px" : "0",
                 } },
-                React.createElement("div", { 
-                    // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
-                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", style: {
-                        marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
-                    } },
-                    React.createElement("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "5px",
-                        } },
-                        React.createElement("div", { 
-                            // className="flex items-center justify-center m-[auto]"
-                            className: "" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                    React.createElement("div", { className: "flex flex-col gap-[5px]" },
+                        React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
                             isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
                         React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
@@ -301,13 +251,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon })),
                     React.createElement("div", { className: "relative" },
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] w-[100%] right-[0px] absolute", style: {
+                        React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
+                        showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px]", style: {
                                 top: serviceDetailsLoading ? "-17px" : "-20px",
                             } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
-                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
-                        React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
+                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null)),
                 React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
                         setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
         isPeru ? null : (React.createElement("div", { style: {
@@ -318,11 +268,18 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 position: "relative",
                 zIndex: -1,
             } },
-            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
+            React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: "-10px" }, (hasOfferText
+                    ? {
+                        borderLeft: "6px solid #ff5964",
+                        borderRight: "6px solid #ff8842",
+                        borderRadius: "0 0 18px 18px",
+                        boxSizing: "border-box",
+                    }
+                    : {})) },
                 React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true })))),
         children,
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]", style: {
-                backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
             React.createElement("div", { className: "flex  justify-between items-center w-full" },
@@ -335,57 +292,29 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 "\u00A0"),
                             " ",
                             "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
+                            React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
                                     fontVariantNumeric: "tabular-nums",
                                     display: "inline-block",
                                     // minWidth: "70px",
                                 } })))),
                 React.createElement("div", { className: "flex items-center" },
-                    renderIcon("personIcon", "16px"),
-                    "\u00A0",
+                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
                     React.createElement("span", { className: "ml-[6px]" },
-                        React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
+                        React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
                         " ",
                         React.createElement("span", { className: "bold-text" }, "personas"),
                         " ",
                         React.createElement("span", null,
                             " ",
-                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " están viendo este viaje")))))),
-        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
-            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`, style: {
-                    backgroundColor: isSoldOut
-                        ? "#ddd"
-                        : colors.ratingBottomColor,
-                } },
-                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                    React.createElement(LottiePlayer
-                    // animationData={serviceItem.icons.priorityStageAnim}
-                    , { 
-                        // animationData={serviceItem.icons.priorityStageAnim}
-                        animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
-                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                } },
-                renderIcon("connectingServiceIcon", "12px"),
-                React.createElement("div", null, "Conexión"))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                } },
-                React.createElement(LottiePlayer
-                // animationData={serviceItem.icons.directoAnim}
-                , { 
-                    // animationData={serviceItem.icons.directoAnim}
-                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
-                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                } },
-                React.createElement(LottiePlayer
-                // animationData={serviceItem.icons.directoAnim}
-                , { 
-                    // animationData={serviceItem.icons.directoAnim}
-                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
-                React.createElement("div", null, "Tren Express"))))))));
+                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
+                            " |",
+                            " ",
+                            React.createElement("span", { className: "" },
+                                "\u26A1 Quedan pocos",
+                                " ",
+                                React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                "comprando"))))))),
+        React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -4,6 +4,7 @@ import commonService from "../../utils/CommonService";
 import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
+import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -22,47 +23,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
     let isSoldOut = serviceItem.available_seats <= 0;
     const isLongOfferText = (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _a === void 0 ? void 0 : _a.length) || 0) > 35;
-    const startViewerCount = (node) => {
-        if (!node || !viewersConfig)
-            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);
-        const id = setInterval(() => {
-            const current = Number(node.textContent) || initialValue;
-            const delta = Math.ceil(current * 0.2);
-            const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
-            node.textContent = String(clamp(Math.round(next)));
-        }, interval);
-        node.dataset.viewerId = String(id);
-    };
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
+    const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
+    const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+    const serviceCardStyle = hasOfferText
+        ? {
+            borderColor: "transparent",
+            borderStyle: "solid",
+            borderWidth: "6px 6px 0 6px",
+            borderRadius: "18px",
+            background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+        }
+        : {};
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -110,26 +81,18 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
-    return (React.createElement("div", { 
-        // className={`relative  ${
-        //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
-        //   }
-        className: `relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement("div", { className: `relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement("div", { className: " rounded-[20px]", style: {
-                backgroundColor: "#fff",
-                zIndex: 1,
-                // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "12px",
-                border: "1px solid #ccc",
-            } },
+        React.createElement("div", { className: `bg-white z-1 ${hasOfferText
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
                 React.createElement("div", { className: "flex justify-between  items-center mb-[10px]" },
-                    React.createElement("div", { className: "flex items-center  justify-between" },
+                    React.createElement("div", { className: "flex items-center  justify-between", style: { marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "10px" : "" } },
                         React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
                         isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px]  items-center" },
@@ -141,79 +104,55 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null),
                     showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
-                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
+                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_d = serviceItem.duration) === null || _d === void 0 ? void 0 : _d.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), 
-                    // onDropdownToggle={() => {
-                    //   setShowDropdown(!showDropdown);
-                    //   setAmenetiesAtomValue({
-                    //     service: serviceItem,
-                    //     showTopLabel: showTopLabel,
-                    //   });
-                    // }}
-                    onDropdownToggle: () => {
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_d = serviceItem.duration) === null || _d === void 0 ? void 0 : _d.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru })),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
-                showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `, style: {
-                        backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
-                    } },
-                    React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
-                    React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) === true && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20  `, style: {
-                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipBgColor,
-                        color: isSoldOut ? "#bbb" : colors.directoColor,
-                    } },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
-                    React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
-                isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
-                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
-                    } },
-                    renderIcon("airportIcon", "14px"),
-                    React.createElement("div", null, "Conexi\u00F3n"))),
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
-                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                    } },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
-                    React.createElement("div", null, "Tren Express"))))),
+            React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
-                backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                background: isSoldOut ? "#ccc" : offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,
             } },
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
-                React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                React.createElement("div", { className: "flex justify-between items-start" },
                     React.createElement("div", { className: `flex ${isLongOfferText ? "items-start" : "items-center"}` },
                         React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
-                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" })),
-                        React.createElement("div", { className: `ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" })),
+                        React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
                                 color: "#fff",
                                 lineHeight: 1.4,
                             } },
-                            React.createElement("span", { className: "min-[380px]:text-[12px] bold-text" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
-                            " ",
-                            React.createElement("span", { className: "min-[380px]:text-[12px]" }, "|"),
-                            " ",
                             React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
                                 "Termina en\u00A0",
-                                React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startCountdown(node, 599), style: {
                                         fontVariantNumeric: "tabular-nums",
                                         display: "inline-block",
                                     } })))),
-                    React.createElement("div", { className: "flex items-start", style: {
+                    React.createElement("div", { className: "flex flex-col items-end", style: {
                             color: "#fff",
                         } },
-                        React.createElement("div", null, renderIcon("personIcon", "16px")),
-                        React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
-                            React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
-                            " ",
-                            React.createElement("span", { className: "bold-text" }, "personas"),
-                            " ",
-                            React.createElement("span", null,
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: "mr-[4px]" },
+                                " ",
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" })),
+                            React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                React.createElement("span", { className: "bold-text" }, "personas"),
+                                " ",
+                                React.createElement("span", null,
+                                    " ",
+                                    "viendo"))),
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("span", { className: "whitespace-nowrap" },
+                                "\u26A1 Quedan pocos",
+                                " ",
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
-                                viewersConfig.label || " están viendo este viaje"))))))),
+                                "comprando"))))))),
         React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/components/ServiceItem/mobileTypes.d.ts

@@ -114,6 +114,9 @@ export interface MobileServiceItemProps {
             whiteBoardingIcon?: string;
             downArrow?: string;
             personIcon?: string;
+            specialDeparture?: string;
+            fireIcon?: string;
+            directoIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

package/dist/components/ServiceItem/types.d.ts

@@ -146,6 +146,8 @@ export interface ServiceItemProps {
         bottomStripColor?: string;
         directoColor?: string;
         seatPriceColor?: string;
+        rightGradiantColor?: string;
+        leftGradiantColor?: string;
     };
     cityOrigin?: {
         value: number;