kupos-ui-components-lib 9.7.1 → 9.7.2

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -21,70 +21,48 @@ const HARDCODED_OPERATORS = [
         seatsAvailable: "3 disponibles",
     },
 ];
-const HARDCODED_COUNTDOWN = "09:55";
-const HOW_IT_WORKS_STEPS = [
-    {
-        icon: "flexible",
-        name: "1. Salida flexible",
-        text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
-    },
-    {
-        icon: "bus",
-        name: "2. Empresa asignada",
-        text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
-    },
-    {
-        icon: "price",
-        name: "3. Precio garantizado",
-        text: "Al seleccionar este servicio aseguras el precio reducido.",
-    },
-    {
-        icon: "ticket",
-        name: "4. ¡Listo!",
-        text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
-    },
-];
-const FeatureStepIcon = ({ icon }) => {
-    const iconClassName = "h-[30px] w-[30px] text-[#171717]";
-    switch (icon) {
-        case "flexible":
-            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
-                React.createElement("path", { d: "M31.5 13.4A13 13 0 0 0 8 12.3", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }),
-                React.createElement("path", { d: "m7.4 7.7.2 5.2 5.1-1.2M8.5 26.6A13 13 0 0 0 32 27.7", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }),
-                React.createElement("path", { d: "m32.6 32.3-.2-5.2-5.1 1.2", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" })));
-        case "bus":
-            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
-                React.createElement("rect", { x: "8", y: "4.5", width: "24", height: "27", rx: "2.5", stroke: "currentColor", strokeWidth: "2.2" }),
-                React.createElement("path", { d: "M8 18.5h24M12 9h16M12 26h4m8 0h4M11 31.5v3h5v-3m8 0v3h5v-3M5.5 10v7m29-7v7", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" })));
-        case "price":
-            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
-                React.createElement("circle", { cx: "20", cy: "20", r: "14", stroke: "currentColor", strokeWidth: "2.2" }),
-                React.createElement("path", { d: "M23.7 15.4c-1-.7-2.2-1-3.6-1-2.2 0-3.8 1.1-3.8 2.8 0 4.2 7.4 1.8 7.4 5.8 0 1.8-1.6 2.8-4 2.8-1.5 0-2.9-.4-4-1.2M20 11.7v2.5m0 11.8v2.4", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" })));
-        default:
-            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
-                React.createElement("path", { d: "M7 11h26v6a3.5 3.5 0 0 0 0 7v6H7v-6a3.5 3.5 0 0 0 0-7v-6Z", stroke: "currentColor", strokeWidth: "2.2", strokeLinejoin: "round" }),
-                React.createElement("path", { d: "M22 12.5v3m0 3v3m0 3v4", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" })));
-    }
-};
-const AssuranceIcon = ({ type }) => {
-    const iconClassName = "h-[18px] w-[18px] shrink-0 text-white";
-    if (type === "pending") {
-        return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
-            React.createElement("path", { d: "M4.2 8.2a6.2 6.2 0 1 1 .5 5.1", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
-            React.createElement("path", { d: "M4.2 4.8v3.4h3.4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })));
-    }
-    return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
-        React.createElement("path", { d: "M10 2.2 16.3 4v5c0 4-2.4 6.8-6.3 8.7C6.1 15.8 3.7 13 3.7 9V4L10 2.2Z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "m6.9 9.7 2.1 2.1 4.3-4.4", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })));
-};
-const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
-    var _a, _b, _c, _d, _e;
+const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
+    var _a, _b, _c, _d;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? serviceItem.operators
         : HARDCODED_OPERATORS;
     const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
         isFeatureDropDownExpand === true;
     const canDecreaseTicketQuantity = ticketQuantity > 1;
+    const HOW_IT_WORKS_STEPS = [
+        {
+            icon: "flexible",
+            name: "1. Salida flexible",
+            text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+        },
+        {
+            icon: "bus",
+            name: "2. Empresa asignada",
+            text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+        },
+        {
+            icon: "price",
+            name: "3. Precio garantizado",
+            text: "Al seleccionar este servicio aseguras el precio reducido.",
+        },
+        {
+            icon: "ticket",
+            name: "4. ¡Listo!",
+            text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+        },
+    ];
+    const FeatureStepIcon = ({ icon }) => {
+        switch (icon) {
+            case "flexible":
+                return renderIcon("flexibleIcon", "24px");
+            case "bus":
+                return renderIcon("empressaIcon", "24px");
+            case "price":
+                return renderIcon("precioIcon", "24px");
+            default:
+                return renderIcon("listoIcon", "24px");
+        }
+    };
     return (React.createElement("div", { 
         // ${
         //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
@@ -108,6 +86,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                             padding: "1px 8px",
                             borderRadius: "4px",
                             color: "#fff",
+                            animation: "pulse-zoom 2s ease-in-out infinite",
+                            whiteSpace: "nowrap",
                         } },
                         React.createElement("span", null, "AHORRAS 60%"))),
                 React.createElement("div", null,
@@ -138,12 +118,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                             React.createElement("div", { className: "text-[11px] bold-text" }, "Viernes 23 de mayo")),
                         React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
                             React.createElement("div", { className: "flex items-justify gap-[8px]" },
-                                React.createElement(AssuranceIcon, { type: "pending" }),
+                                renderIcon("sheildIcon", "16px"),
                                 React.createElement("span", { className: "text-[10px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Empresa y hora a confirmar luego del pago.")),
                             React.createElement("div", { className: "flex items-justify gap-[8px]" },
-                                React.createElement(AssuranceIcon, { type: "secured" }),
+                                renderIcon("confirmarIcon", "16px"),
                                 React.createElement("span", { className: "text-[10px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
@@ -167,7 +147,11 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 padding: "8px 14px",
                                 borderRadius: "24px",
                             } },
-                            React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.userIcon, alt: "eye", style: { width: "16px", height: "16px" } }),
+                            React.createElement(LottiePlayer
+                            // animationData={serviceItem.icons.flexibleAnim}
+                            , { 
+                                // animationData={serviceItem.icons.flexibleAnim}
+                                animationData: getAnimationIcon("usersAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", null,
                                 React.createElement("span", { className: "bold-text text-white" },
                                     " ",
@@ -175,12 +159,9 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                             fontVariantNumeric: "tabular-nums",
                                             color: "#FF5C60",
                                         } }),
-                                    " ",
-                                    React.createElement("span", { style: {
-                                            color: "#FF5C60",
-                                        } }, "personas")),
+                                    " "),
                                 " ",
-                                "viendo este viaje |",
+                                "viendo |",
                                 " ",
                                 React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
@@ -189,7 +170,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                         React.createElement("div", { className: "flex flex-col gap-[6px] ", style: {
                                 alignItems: "center",
                             } },
-                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight" }, "60% OFF"),
+                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight", style: {
+                                    animation: "pulse-zoom 2s ease-in-out infinite",
+                                    whiteSpace: "nowrap",
+                                } }, "60% OFF"),
                             React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
                                 "$10.000",
                                 React.createElement("span", { style: {
@@ -202,7 +186,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                         transform: "rotate(-10deg)",
                                         transformOrigin: "center",
                                     } })),
-                            React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, "$4.000")),
+                            React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, `$${(4000 * ticketQuantity).toLocaleString()}`)),
                         React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
                             React.createElement("span", { className: "text-[12px] text-white" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
                             React.createElement("div", { className: "flex w-full items-center justify-between", style: {
@@ -218,6 +202,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-white" }, "+"))),
                         React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer", style: {
                                 backgroundColor: "#FF5C60",
+                                animation: "pulse-zoom 2s ease-in-out infinite",
+                                whiteSpace: "nowrap",
                             } },
                             React.createElement(LottiePlayer
                             // animationData={serviceItem.icons.flexibleAnim}
@@ -226,7 +212,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
                     React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
-                        React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
+                        React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",

package/dist/ui/SeatSection/SeatSection.js

@@ -240,7 +240,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
                     React.createElement("div", { className: "absolute", style: {
                             left: isPeru ? "-1px" : "-18px",
-                            bottom: "1px"
+                            bottom: "1px",
                         } }, renderIcon("fireIcon", "16px")),
                     availableSeats <= 0
                         ? CommonService.currency(0, currencySign)

package/package.json

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

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,7 @@ 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 RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -86,6 +87,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
+  usersAnimation: {
+    kupos: usersAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -431,7 +435,6 @@ function ServiceItemPB({
         <FeatureServiceUi
           serviceItem={serviceItem}
           showTopLabel={showTopLabel}
-          colors={colors}
           isSoldOut={isSoldOut}
           getAnimationIcon={getAnimationIcon}
           cityOrigin={cityOrigin}