kupos-ui-components-lib 9.7.2 → 9.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -2
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  6. package/dist/components/ServiceItem/types.d.ts +1 -0
  7. package/dist/styles.css +6 -6
  8. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +120 -107
  9. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +22 -24
  10. package/package.json +1 -1
  11. package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -1
  12. package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -1
  13. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  14. package/src/components/ServiceItem/types.ts +1 -0
  15. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +277 -46
  16. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +26 -23
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare 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, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }: ServiceItemProps & {
3
+ declare 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, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -83,7 +83,7 @@ const ANIMATION_MAP = {
83
83
  kupos: usersAnimation,
84
84
  },
85
85
  };
86
- 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }) {
86
+ 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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, }) {
87
87
  var _a;
88
88
  const getAnimationIcon = (icon) => {
89
89
  var _a;
@@ -252,7 +252,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
252
252
  },
253
253
  ];
254
254
  const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
255
- 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 })) : isNewUi ? (React.createElement(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: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
255
+ 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 })) : isNewUi ? (React.createElement(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 &&
256
256
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
257
257
  isFeatureDropDownExpand === true
258
258
  ? null
package/dist/components/ServiceItem/ServiceItemMobile.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { MobileServiceItemProps } from "./mobileTypes";
3
- declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }: MobileServiceItemProps): React.ReactElement;
3
+ declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -18,7 +18,7 @@ const exceptions = [
18
18
  "blanco",
19
19
  "asiento_mascota",
20
20
  ];
21
- function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }) {
21
+ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, }) {
22
22
  var _a, _b, _c, _d, _e, _f, _g;
23
23
  const isItemExpanded = serviceItem.id === isExpanded;
24
24
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -88,7 +88,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
88
88
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
89
89
  isConexion = true;
90
90
  }
91
- return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
91
+ return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
92
92
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
93
93
  isFeatureDropDownExpand === true
94
94
  ? null
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -143,6 +143,7 @@ export interface MobileServiceItemProps {
143
143
  useLottieFor?: string[];
144
144
  };
145
145
  onBookButtonPress?: () => void;
146
+ onRemateUiButtonClick?: () => void;
146
147
  terminals?: any[];
147
148
  showDropdown?: boolean;
148
149
  setShowDropdown?: (value: boolean) => void;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -145,6 +145,7 @@ export interface ServiceItemProps {
145
145
  useLottieFor?: string[];
146
146
  };
147
147
  onBookButtonPress?: () => void;
148
+ onRemateUiButtonClick?: () => void;
148
149
  terminals?: any[];
149
150
  t?: (key: string) => string;
150
151
  serviceDetailsLoading?: boolean;
package/dist/styles.css CHANGED
@@ -174,12 +174,18 @@
174
174
  .m-\[auto\] {
175
175
  margin: auto;
176
176
  }
177
+ .mx-\[6px\] {
178
+ margin-inline: 6px;
179
+ }
177
180
  .mx-\[10px\] {
178
181
  margin-inline: 10px;
179
182
  }
180
183
  .mx-auto {
181
184
  margin-inline: auto;
182
185
  }
186
+ .my-\[8px\] {
187
+ margin-block: 8px;
188
+ }
183
189
  .my-\[14px\] {
184
190
  margin-block: 14px;
185
191
  }
@@ -587,9 +593,6 @@
587
593
  .gap-\[2px\] {
588
594
  gap: 2px;
589
595
  }
590
- .gap-\[3px\] {
591
- gap: 3px;
592
- }
593
596
  .gap-\[3rem\] {
594
597
  gap: 3rem;
595
598
  }
@@ -996,9 +999,6 @@
996
999
  .text-\[15px\] {
997
1000
  font-size: 15px;
998
1001
  }
999
- .text-\[16px\] {
1000
- font-size: 16px;
1001
- }
1002
1002
  .text-\[17\.33px\] {
1003
1003
  font-size: 17.33px;
1004
1004
  }
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -21,31 +21,8 @@ const HARDCODED_OPERATORS = [
21
21
  seatsAvailable: "3 disponibles",
22
22
  },
23
23
  ];
24
- const HARDCODED_COUNTDOWN = "09:55";
25
- const HOW_IT_WORKS_STEPS = [
26
- {
27
- icon: "flexible",
28
- name: "1. Salida flexible",
29
- text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
30
- },
31
- {
32
- icon: "bus",
33
- name: "2. Empresa asignada",
34
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
35
- },
36
- {
37
- icon: "price",
38
- name: "3. Precio garantizado",
39
- text: "Al seleccionar este servicio aseguras el precio reducido.",
40
- },
41
- {
42
- icon: "ticket",
43
- name: "4. ¡Listo!",
44
- text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
45
- },
46
- ];
47
24
  const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
48
- var _a, _b, _c, _d;
25
+ var _a, _b, _c, _d, _e;
49
26
  const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
50
27
  ? serviceItem.operators
51
28
  : HARDCODED_OPERATORS;
@@ -61,12 +38,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
61
38
  {
62
39
  icon: "bus",
63
40
  name: "2. Empresa asignada",
64
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
41
+ text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
65
42
  },
66
43
  {
67
44
  icon: "price",
68
45
  name: "3. Precio garantizado",
69
- text: "Al seleccionar este servicio aseguras el precio reducido.",
46
+ text: "Mejor precio garantizado. Sin cambios ni cancelación.",
70
47
  },
71
48
  {
72
49
  icon: "ticket",
@@ -96,100 +73,90 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
96
73
  showTopLabel
97
74
  ? "mt-[24px]"
98
75
  : "mt-[20px]"}` },
99
- React.createElement("div", { className: "", style: {
100
- border: "1px solid #c0c0c0",
76
+ React.createElement("div", { className: "shadow-service", style: {
77
+ // border: "1px solid #c0c0c0",
101
78
  padding: "12px",
102
79
  borderRadius: "14px",
103
80
  } },
81
+ React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
82
+ React.createElement("div", null,
83
+ React.createElement("span", { className: "flex items-center" },
84
+ React.createElement("img", { src: (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "h-[14px] w-[14px] mr-[4px]" }),
85
+ React.createElement("span", { className: "bold-text" }, "Remate"),
86
+ " t\u00E9rmina en",
87
+ " ",
88
+ React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
89
+ fontVariantNumeric: "tabular-nums",
90
+ display: "inline-block",
91
+ color: "#FF5C60",
92
+ minWidth: "40px",
93
+ } }))),
94
+ React.createElement("div", { className: "flex items-center gap-[10px]" },
95
+ React.createElement("span", null, "Salida flexible"),
96
+ React.createElement("div", { className: "bold-text font-[9px]", style: {
97
+ backgroundColor: "#FF5C60",
98
+ padding: "1px 8px",
99
+ borderRadius: "4px",
100
+ color: "#fff",
101
+ animation: "pulse-zoom 2s ease-in-out infinite",
102
+ whiteSpace: "nowrap",
103
+ } },
104
+ React.createElement("span", null, "AHORRAS 60%")))),
104
105
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]" },
105
106
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
106
- React.createElement("div", { className: "flex justify-between items-center text-[white]" },
107
- React.createElement("div", { className: "flex flex-col gap-[8px]" },
108
- React.createElement("div", { className: "flex items-center gap-[8px]" },
109
- React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
110
- React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
111
- React.createElement("div", { className: "flex items-center gap-[8px]" },
112
- React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
113
- React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
114
- React.createElement("div", { className: "flex flex-col justify-end gap-[12px] relative mb-[16px]" },
115
- React.createElement("div", { className: "flex flex-col gap-[3px] items-end" },
116
- React.createElement("span", { className: "text-[#FF8F45] bold-text text-[16px] leading-tight", style: {
117
- animation: "pulse-zoom 2s ease-in-out infinite",
118
- whiteSpace: "nowrap",
119
- } }, "60% OFF"),
120
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
121
- "$10.000",
122
- React.createElement("span", { style: {
123
- position: "absolute",
124
- left: "-2px",
125
- top: "50%",
126
- width: "calc(100% + 4px)",
127
- height: "1px",
128
- backgroundColor: "#FF5C60",
129
- transform: "rotate(-10deg)",
130
- transformOrigin: "center",
131
- } })),
132
- React.createElement("span", { className: "text-white bold-text text-[22px] leading-none" }, `$${(4000 * ticketQuantity).toLocaleString()}`)))),
107
+ React.createElement("div", { className: " text-[white]" },
108
+ React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
109
+ React.createElement("div", { className: "flex items-center gap-[6px]" },
110
+ React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
111
+ React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 :
112
+ cityOrigin.label.split(",")[0],
113
+ React.createElement("span", { className: "mx-[6px]" }, "\u2192"), cityDestination === null || cityDestination === void 0 ? void 0 :
114
+ cityDestination.label.split(",")[0])),
115
+ React.createElement("div", { style: {
116
+ width: "1px",
117
+ flex: 1,
118
+ backgroundColor: "#fff",
119
+ margin: "3px 0",
120
+ minHeight: "8px",
121
+ position: "absolute",
122
+ top: "13px",
123
+ left: "7px",
124
+ } }),
125
+ React.createElement("div", { className: "flex items-center gap-[6px]" },
126
+ React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
127
+ React.createElement("span", { className: "text-[13px]" },
128
+ "23 de mayo,",
129
+ " ",
130
+ React.createElement("span", { className: "bold-text" }, "Entre 07:00 AM y 10:00 AM"))))),
131
+ React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
133
132
  React.createElement("div", null,
134
- React.createElement("div", { className: "flex items-center text-[white]" },
135
- React.createElement("span", null, "Vie, 04/11"),
136
- React.createElement("span", { className: "h-[20px] flex items-center justify-center mx-[10px]" }, "\u2022"),
137
- React.createElement("span", null, "07:00 AM - 10:00 AM")),
138
- React.createElement("div", { style: {
133
+ React.createElement("span", { className: "text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]" }, "3 operadores compitiendo por tu compra"),
134
+ React.createElement("div", { className: "flex gap-[8px] text-[white]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
139
135
  // height: "80px",
140
136
  border: "1px solid #363c48",
141
137
  backgroundColor: "#1a202e",
142
138
  padding: "14px 10px",
143
- borderRadius: "14px",
144
- marginTop: "14px",
145
139
  } },
146
- React.createElement("div", { className: "flex flex-col justify-center items-center text-[white]" },
147
- React.createElement("span", { className: "text-[15px] bold-text" }, "3 operadores compitiendo por tu compra"),
148
- React.createElement("span", { className: "mt-[8px]" }, "Empresa a confirmar despu\u00E9s de tu pago")),
149
- React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px] mt-[12px] text-[white]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
150
- // height: "80px",
151
- border: "1px solid #363c48",
152
- backgroundColor: "#1a202e",
153
- padding: "14px 10px",
154
- } },
155
- React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
156
- React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
157
- React.createElement("div", { className: "bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
158
- React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
159
- React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
160
- React.createElement("div", { className: "flex items-center gap-[4px]" },
161
- renderIcon("sheildIcon", "14px"),
162
- React.createElement("span", { className: "text-[white]" }, "Tu asiento confirmado al instante.")))),
163
- React.createElement("div", null,
164
- React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
165
- React.createElement("span", { className: "text-[12px] text-[white]" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
166
- React.createElement("div", { className: "flex w-full items-center justify-between", style: {
167
- border: "1px solid #363c48",
168
- backgroundColor: "#1a202e",
169
- padding: "6px 14px",
170
- borderRadius: "14px",
171
- } },
172
- React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
173
- ? "cursor-pointer bg-[#2d374d]"
174
- : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
175
- React.createElement("span", { className: "bold-text text-[20px] text-[white]" }, ticketQuantity),
176
- 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]" }, "+")),
177
- 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: {
178
- backgroundColor: "#FF5C60",
179
- animation: "pulse-zoom 2s ease-in-out infinite",
180
- whiteSpace: "nowrap",
181
- width: "100%",
182
- } },
183
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
184
- React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")))),
185
- React.createElement("div", { className: "flex justify-between items-center" },
186
- React.createElement("div", { className: "flex items-center" },
187
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" }),
188
- React.createElement("span", { className: "ml-[5px]" },
140
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
141
+ React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
142
+ React.createElement("div", { className: "bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
143
+ React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
144
+ React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
145
+ React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
146
+ border: "1px solid #363c48",
147
+ backgroundColor: "#1a202e",
148
+ padding: "4px 14px",
149
+ borderRadius: "24px",
150
+ } },
151
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.personsAnim,
152
+ // animationData={getAnimationIcon("usersAnimation")}
153
+ width: "18px", height: "18px" }),
154
+ React.createElement("span", null,
189
155
  React.createElement("span", { className: "bold-text text-[white]" },
190
156
  " ",
191
157
  React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
192
158
  fontVariantNumeric: "tabular-nums",
159
+ color: "#FF5C60",
193
160
  } }),
194
161
  " "),
195
162
  " ",
@@ -198,8 +165,54 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
198
165
  React.createElement("span", { className: "bold-text text-[white]", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
199
166
  " ",
200
167
  React.createElement("span", { className: "text-[white]" }, "han comprado"))),
201
- React.createElement("div", { className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
202
- React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
168
+ React.createElement("div", { className: "mt-[10px] flex flex-col items-center gap-[8px]" },
169
+ React.createElement("span", { className: "text-[12px] text-[white]" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
170
+ React.createElement("div", { className: "flex w-[50%] items-center justify-between", style: {
171
+ border: "1px solid #363c48",
172
+ backgroundColor: "#1a202e",
173
+ padding: "6px 14px",
174
+ borderRadius: "14px",
175
+ } },
176
+ React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
177
+ ? "cursor-pointer bg-[#2d374d]"
178
+ : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
179
+ React.createElement("span", { className: "bold-text text-[20px] text-white" }, ticketQuantity),
180
+ 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]" }, "+"))),
181
+ React.createElement("div", { className: "mt-[10px] flex justify-between items-center rounded-[14px]", style: {
182
+ // height: "80px",
183
+ border: "1px solid #363c48",
184
+ backgroundColor: "#1a202e",
185
+ padding: "14px 10px",
186
+ } },
187
+ React.createElement("div", { className: "flex flex-col" },
188
+ React.createElement("span", { className: "text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
189
+ "$10.000",
190
+ React.createElement("span", { style: {
191
+ position: "absolute",
192
+ left: "-2px",
193
+ top: "50%",
194
+ width: "calc(80% + 4px)",
195
+ height: "1px",
196
+ backgroundColor: "#FF5C60",
197
+ transform: "rotate(-10deg)",
198
+ transformOrigin: "center",
199
+ } })),
200
+ React.createElement("span", { className: "text-[white] bold-text text-[28px] leading-none mt-[4px]" }, `$${(4000 * ticketQuantity).toLocaleString()}`)),
201
+ React.createElement("div", null,
202
+ React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight", style: {
203
+ animation: "pulse-zoom 2s ease-in-out infinite",
204
+ whiteSpace: "nowrap",
205
+ } }, "60% OFF"))),
206
+ 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-[10px] justify-center border-none cursor-pointer", style: {
207
+ backgroundColor: "#FF5C60",
208
+ animation: "pulse-zoom 2s ease-in-out infinite",
209
+ whiteSpace: "nowrap",
210
+ width: "100%",
211
+ } },
212
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
213
+ React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
214
+ React.createElement("div", { className: `flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
215
+ React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
203
216
  width: "14px",
204
217
  height: "8px",
205
218
  filter: "brightness(0) invert(1)",
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -22,7 +22,7 @@ const HARDCODED_OPERATORS = [
22
22
  },
23
23
  ];
24
24
  const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
25
- var _a, _b, _c, _d;
25
+ var _a, _b, _c, _d, _e;
26
26
  const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
27
27
  ? serviceItem.operators
28
28
  : HARDCODED_OPERATORS;
@@ -38,12 +38,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
38
38
  {
39
39
  icon: "bus",
40
40
  name: "2. Empresa asignada",
41
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
41
+ text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
42
42
  },
43
43
  {
44
44
  icon: "price",
45
45
  name: "3. Precio garantizado",
46
- text: "Al seleccionar este servicio aseguras el precio reducido.",
46
+ text: "Mejor precio garantizado. Sin cambios ni cancelación.",
47
47
  },
48
48
  {
49
49
  icon: "ticket",
@@ -73,8 +73,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
73
73
  showTopLabel
74
74
  ? "mt-[24px]"
75
75
  : "mt-[20px]"}` },
76
- React.createElement("div", { className: "", style: {
77
- border: "1px solid #c0c0c0",
76
+ React.createElement("div", { className: "shadow-service", style: {
77
+ // border: "1px solid #c0c0c0",
78
78
  padding: "14px",
79
79
  borderRadius: "14px",
80
80
  } },
@@ -90,28 +90,26 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
90
90
  whiteSpace: "nowrap",
91
91
  } },
92
92
  React.createElement("span", null, "AHORRAS 60%"))),
93
- React.createElement("div", null,
94
- React.createElement("span", null,
95
- renderIcon("fireIcon", "14px"),
96
- " ",
97
- React.createElement("span", { className: "bold-text" }, "Remate"),
98
- " t\u00E9rmina en",
99
- " ",
100
- React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
101
- fontVariantNumeric: "tabular-nums",
102
- display: "inline-block",
103
- color: "#FF5C60",
104
- minWidth: "40px",
105
- } })))),
93
+ React.createElement("span", null,
94
+ React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "w-[14px] h-[14px] mb-[4px] mr-[4px]" }),
95
+ React.createElement("span", { className: "bold-text" }, "Remate"),
96
+ " t\u00E9rmina en",
97
+ " ",
98
+ React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
99
+ fontVariantNumeric: "tabular-nums",
100
+ display: "inline-block",
101
+ color: "#FF5C60",
102
+ minWidth: "40px",
103
+ } }))),
106
104
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]" },
107
105
  React.createElement("div", { className: "grid grid-cols-[23%_50%_27%] items-stretch" },
108
106
  React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
109
107
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
110
108
  React.createElement("div", { className: "flex items-center gap-[8px]" },
111
- React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
109
+ React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
112
110
  React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
113
111
  React.createElement("div", { className: "flex items-center gap-[8px]" },
114
- React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
112
+ React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
115
113
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
116
114
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
117
115
  React.createElement("div", { className: "text-[12px] bold-text whitespace-nowrap" }, "Entre 07:00 AM y 10:00 AM"),
@@ -119,12 +117,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
119
117
  React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
120
118
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
121
119
  renderIcon("sheildIcon", "16px"),
122
- React.createElement("span", { className: "text-[10px]", style: {
120
+ React.createElement("span", { className: "text-[11px]", style: {
123
121
  lineHeight: 1.3,
124
122
  } }, "Empresa y hora a confirmar luego del pago.")),
125
123
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
126
124
  renderIcon("confirmarIcon", "16px"),
127
- React.createElement("span", { className: "text-[10px]", style: {
125
+ React.createElement("span", { className: "text-[11px]", style: {
128
126
  lineHeight: 1.3,
129
127
  } }, "Tu compra est\u00E1 100% asegurada.")))),
130
128
  React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
@@ -152,7 +150,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
152
150
  , {
153
151
  // animationData={serviceItem.icons.flexibleAnim}
154
152
  animationData: getAnimationIcon("usersAnimation"), width: "18px", height: "18px" }),
155
- React.createElement("span", null,
153
+ React.createElement("span", { className: "text-[13px]" },
156
154
  React.createElement("span", { className: "bold-text text-white" },
157
155
  " ",
158
156
  React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
@@ -212,7 +210,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
212
210
  animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
213
211
  React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
214
212
  React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
215
- React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
213
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
216
214
  width: "14px",
217
215
  height: "8px",
218
216
  filter: "brightness(0) invert(1)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.7.2",
3
+ "version": "9.7.4",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -132,6 +132,7 @@ function ServiceItemPB({
132
132
  ticketQuantity,
133
133
  onIncreaseTicketQuantity,
134
134
  onDecreaseTicketQuantity,
135
+ onRemateUiButtonClick,
135
136
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
136
137
  const getAnimationIcon = (icon: string) => {
137
138
  const animation = ANIMATION_MAP[icon];
@@ -445,7 +446,7 @@ function ServiceItemPB({
445
446
  ticketQuantity={ticketQuantity}
446
447
  onIncreaseTicketQuantity={onIncreaseTicketQuantity}
447
448
  onDecreaseTicketQuantity={onDecreaseTicketQuantity}
448
- onBookButtonPress={onBookButtonPress}
449
+ onBookButtonPress={onRemateUiButtonClick}
449
450
  onToggleExpand={() =>
450
451
  setIsFeatureDropDownExpand &&
451
452
  setIsFeatureDropDownExpand(
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -54,6 +54,7 @@ function ServiceItemMobile({
54
54
  cityOrigin,
55
55
  cityDestination,
56
56
  isNewUi,
57
+ onRemateUiButtonClick,
57
58
  }: MobileServiceItemProps): React.ReactElement {
58
59
  const isItemExpanded = serviceItem.id === isExpanded;
59
60
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -177,7 +178,7 @@ function ServiceItemMobile({
177
178
  ticketQuantity={ticketQuantity}
178
179
  onIncreaseTicketQuantity={onIncreaseTicketQuantity}
179
180
  onDecreaseTicketQuantity={onDecreaseTicketQuantity}
180
- onBookButtonPress={onBookButtonPress}
181
+ onBookButtonPress={onRemateUiButtonClick}
181
182
  onToggleExpand={() =>
182
183
  setIsFeatureDropDownExpand &&
183
184
  setIsFeatureDropDownExpand(
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -147,6 +147,7 @@ export interface MobileServiceItemProps {
147
147
  useLottieFor?: string[];
148
148
  };
149
149
  onBookButtonPress?: () => void;
150
+ onRemateUiButtonClick?: ()=> void;
150
151
  terminals?: any[];
151
152
  showDropdown?: boolean;
152
153
  setShowDropdown?: (value: boolean) => void;
package/src/components/ServiceItem/types.ts CHANGED
@@ -149,6 +149,7 @@ export interface ServiceItemProps {
149
149
  useLottieFor?: string[];
150
150
  };
151
151
  onBookButtonPress?: () => void;
152
+ onRemateUiButtonClick?: ()=>void;
152
153
  terminals?: any[];
153
154
  t?: (key: string) => string;
154
155
  serviceDetailsLoading?: boolean;
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -23,31 +23,6 @@ const HARDCODED_OPERATORS = [
23
23
  },
24
24
  ];
25
25
 
26
- const HARDCODED_COUNTDOWN = "09:55";
27
-
28
- const HOW_IT_WORKS_STEPS = [
29
- {
30
- icon: "flexible",
31
- name: "1. Salida flexible",
32
- text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
33
- },
34
- {
35
- icon: "bus",
36
- name: "2. Empresa asignada",
37
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
38
- },
39
- {
40
- icon: "price",
41
- name: "3. Precio garantizado",
42
- text: "Al seleccionar este servicio aseguras el precio reducido.",
43
- },
44
- {
45
- icon: "ticket",
46
- name: "4. ¡Listo!",
47
- text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
48
- },
49
- ];
50
-
51
26
  const FeatureServiceUiMobile = ({
52
27
  serviceItem,
53
28
  showTopLabel,
@@ -83,12 +58,12 @@ const FeatureServiceUiMobile = ({
83
58
  {
84
59
  icon: "bus",
85
60
  name: "2. Empresa asignada",
86
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
61
+ text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
87
62
  },
88
63
  {
89
64
  icon: "price",
90
65
  name: "3. Precio garantizado",
91
- text: "Al seleccionar este servicio aseguras el precio reducido.",
66
+ text: "Mejor precio garantizado. Sin cambios ni cancelación.",
92
67
  },
93
68
  {
94
69
  icon: "ticket",
@@ -125,21 +100,59 @@ const FeatureServiceUiMobile = ({
125
100
  }`}
126
101
  >
127
102
  <div
128
- className=""
103
+ className="shadow-service"
129
104
  style={{
130
- border: "1px solid #c0c0c0",
105
+ // border: "1px solid #c0c0c0",
131
106
  padding: "12px",
132
107
  borderRadius: "14px",
133
108
  }}
134
109
  >
110
+ <div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
111
+ <div>
112
+ <span className="flex items-center">
113
+ <img
114
+ src={serviceItem?.icons?.fireIcon}
115
+ alt="fire"
116
+ className="h-[14px] w-[14px] mr-[4px]"
117
+ />
118
+ <span className="bold-text">Remate</span> términa en{" "}
119
+ <span
120
+ className="bold-text text-end"
121
+ ref={(node) => commonService.startCountdown(node, 599)}
122
+ style={{
123
+ fontVariantNumeric: "tabular-nums",
124
+ display: "inline-block",
125
+ color: "#FF5C60",
126
+ minWidth: "40px",
127
+ }}
128
+ />
129
+ </span>
130
+ </div>
131
+ <div className="flex items-center gap-[10px]">
132
+ <span>Salida flexible</span>
133
+ <div
134
+ className="bold-text font-[9px]"
135
+ style={{
136
+ backgroundColor: "#FF5C60",
137
+ padding: "1px 8px",
138
+ borderRadius: "4px",
139
+ color: "#fff",
140
+ animation: "pulse-zoom 2s ease-in-out infinite",
141
+ whiteSpace: "nowrap",
142
+ }}
143
+ >
144
+ <span>AHORRAS 60%</span>
145
+ </div>
146
+ </div>
147
+ </div>
135
148
  <div
136
149
  id={`service-card-${serviceItem.id}`}
137
150
  className="bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]"
138
151
  >
139
152
  <div className="flex flex-col gap-[10px]">
140
- <div className="flex justify-between items-center text-[white]">
141
- <div className="flex flex-col gap-[8px]">
142
- <div className="flex items-center gap-[8px]">
153
+ <div className=" text-[white]">
154
+ <div className="flex flex-col gap-[10px] relative">
155
+ <div className="flex items-center gap-[6px]">
143
156
  <img
144
157
  src={serviceItem.icons?.whiteOrigin}
145
158
  alt="origin"
@@ -149,9 +162,55 @@ const FeatureServiceUiMobile = ({
149
162
  />
150
163
  <span className="text-[13px] bold-text">
151
164
  {cityOrigin?.label.split(",")[0]}
165
+ <span className="mx-[6px]">→</span>
166
+ {cityDestination?.label.split(",")[0]}
152
167
  </span>
153
168
  </div>
154
- <div className="flex items-center gap-[8px]">
169
+ <div
170
+ style={{
171
+ width: "1px",
172
+ flex: 1,
173
+ backgroundColor: "#fff",
174
+ margin: "3px 0",
175
+ minHeight: "8px",
176
+ position: "absolute",
177
+ top: "13px",
178
+ left: "7px",
179
+ }}
180
+ />
181
+ <div className="flex items-center gap-[6px]">
182
+ <img
183
+ src={serviceItem.icons?.whiteDestination}
184
+ alt="destination"
185
+ className={`w-[14px] h-[14px] shrink-0 ${
186
+ isSoldOut ? "grayscale" : ""
187
+ }`}
188
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
189
+ />
190
+ <span className="text-[13px]">
191
+ 23 de mayo,{" "}
192
+ <span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
193
+ </span>
194
+ </div>
195
+ </div>
196
+ {/* <div className="flex gap-[8px]">
197
+ <div className="flex flex-col items-center">
198
+ <img
199
+ src={serviceItem.icons?.whiteOrigin}
200
+ alt="origin"
201
+ className={`w-[14px] h-[14px] shrink-0 ${
202
+ isSoldOut ? "grayscale" : ""
203
+ }`}
204
+ />
205
+ <div
206
+ style={{
207
+ width: "1px",
208
+ flex: 1,
209
+ backgroundColor: "#fff",
210
+ margin: "3px 0",
211
+ minHeight: "8px",
212
+ }}
213
+ />
155
214
  <img
156
215
  src={serviceItem.icons?.whiteDestination}
157
216
  alt="destination"
@@ -160,25 +219,152 @@ const FeatureServiceUiMobile = ({
160
219
  }`}
161
220
  style={{ opacity: isSoldOut ? 0.5 : 1 }}
162
221
  />
222
+ </div>
223
+ <div className="flex flex-col gap-[8px]">
163
224
  <span className="text-[13px] bold-text">
225
+ {cityOrigin?.label.split(",")[0]}
226
+ <span className="mx-[6px]">→</span>
164
227
  {cityDestination?.label.split(",")[0]}
165
228
  </span>
229
+ <span className="text-[13px]">
230
+ 23 de mayo,{" "}
231
+ <span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
232
+ </span>
166
233
  </div>
167
- </div>
168
- <div className="flex flex-col justify-end gap-[12px] relative mb-[16px]">
169
- <div className="flex flex-col gap-[3px] items-end">
170
- <span
171
- className="text-[#FF8F45] bold-text text-[16px] leading-tight"
234
+ </div> */}
235
+ </div>
236
+
237
+ <div className="border-t border-[#363c48] my-[8px]" />
238
+
239
+ <div>
240
+ <span className="text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]">
241
+ 3 operadores compitiendo por tu compra
242
+ </span>
243
+ <div className="flex gap-[8px] text-[white]">
244
+ {operators.map((op, idx) => (
245
+ <div
246
+ key={idx}
247
+ className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
172
248
  style={{
173
- animation: "pulse-zoom 2s ease-in-out infinite",
174
- whiteSpace: "nowrap",
249
+ // height: "80px",
250
+ border: "1px solid #363c48",
251
+ backgroundColor: "#1a202e",
252
+ padding: "14px 10px",
175
253
  }}
176
254
  >
177
- 60% OFF
255
+ <img
256
+ src={serviceItem.operator_details[0]}
257
+ alt={op.name}
258
+ className={`h-[24px] max-w-full object-contain ${
259
+ isSoldOut ? "grayscale" : ""
260
+ }`}
261
+ />
262
+ <span className="text-[11px] truncate max-w-full text-center">
263
+ {serviceItem.operator_details[2]}
264
+ </span>
265
+ <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
266
+ <span>{op?.time}</span>
267
+ </div>
268
+ <span className="text-[10px] mt-[6px]">
269
+ {op?.seatsAvailable}
270
+ </span>
271
+ </div>
272
+ ))}
273
+ </div>
274
+
275
+ <div
276
+ className="flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]"
277
+ style={{
278
+ border: "1px solid #363c48",
279
+ backgroundColor: "#1a202e",
280
+ padding: "4px 14px",
281
+ borderRadius: "24px",
282
+ }}
283
+ >
284
+ <LottiePlayer
285
+ animationData={serviceItem.icons.personsAnim}
286
+ // animationData={getAnimationIcon("usersAnimation")}
287
+ width="18px"
288
+ height="18px"
289
+ />
290
+ <span>
291
+ <span className="bold-text text-[white]">
292
+ {" "}
293
+ <span
294
+ className="bold-text"
295
+ ref={(node) =>
296
+ commonService.startViewerCount(node, viewersConfig)
297
+ }
298
+ style={{
299
+ fontVariantNumeric: "tabular-nums",
300
+ color: "#FF5C60",
301
+ }}
302
+ />{" "}
303
+ </span>{" "}
304
+ <span className="text-[white]">viendo |</span>{" "}
305
+ <span
306
+ className="bold-text text-[white]"
307
+ ref={(node) =>
308
+ commonService.startComprandoCount(node, 4, 16)
309
+ }
310
+ style={{ fontVariantNumeric: "tabular-nums" }}
311
+ />{" "}
312
+ <span className="text-[white]">han comprado</span>
313
+ </span>
314
+ </div>
315
+
316
+ <div className="mt-[10px] flex flex-col items-center gap-[8px]">
317
+ <span className="text-[12px] text-[white]">
318
+ ¿Cuántos pasajes quieres?
319
+ </span>
320
+ <div
321
+ className="flex w-[50%] items-center justify-between"
322
+ style={{
323
+ border: "1px solid #363c48",
324
+ backgroundColor: "#1a202e",
325
+ padding: "6px 14px",
326
+ borderRadius: "14px",
327
+ }}
328
+ >
329
+ <button
330
+ type="button"
331
+ aria-label="Disminuir pasajes"
332
+ disabled={!canDecreaseTicketQuantity}
333
+ onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
334
+ className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${
335
+ canDecreaseTicketQuantity
336
+ ? "cursor-pointer bg-[#2d374d]"
337
+ : "cursor-not-allowed bg-[#222b3d] opacity-50"
338
+ }`}
339
+ >
340
+ -
341
+ </button>
342
+ <span className="bold-text text-[20px] text-white">
343
+ {ticketQuantity}
178
344
  </span>
345
+ <button
346
+ type="button"
347
+ aria-label="Aumentar pasajes"
348
+ onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
349
+ className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]"
350
+ >
351
+ +
352
+ </button>
353
+ </div>
354
+ </div>
179
355
 
356
+ <div
357
+ className="mt-[10px] flex justify-between items-center rounded-[14px]"
358
+ style={{
359
+ // height: "80px",
360
+ border: "1px solid #363c48",
361
+ backgroundColor: "#1a202e",
362
+ padding: "14px 10px",
363
+ }}
364
+ >
365
+ <div className="flex flex-col">
180
366
  <span
181
- className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
367
+ className="text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative"
182
368
  style={{ position: "relative" }}
183
369
  >
184
370
  $10.000
@@ -187,7 +373,7 @@ const FeatureServiceUiMobile = ({
187
373
  position: "absolute",
188
374
  left: "-2px",
189
375
  top: "50%",
190
- width: "calc(100% + 4px)",
376
+ width: "calc(80% + 4px)",
191
377
  height: "1px",
192
378
 
193
379
  backgroundColor: "#FF5C60",
@@ -197,14 +383,59 @@ const FeatureServiceUiMobile = ({
197
383
  }}
198
384
  />
199
385
  </span>
200
- <span className="text-white bold-text text-[22px] leading-none">
386
+ <span className="text-[white] bold-text text-[28px] leading-none mt-[4px]">
201
387
  {`$${(4000 * ticketQuantity).toLocaleString()}`}
202
388
  </span>
203
389
  </div>
390
+ <div>
391
+ <span
392
+ className="text-[#FF8F45] bold-text text-[26px] leading-tight"
393
+ style={{
394
+ animation: "pulse-zoom 2s ease-in-out infinite",
395
+ whiteSpace: "nowrap",
396
+ }}
397
+ >
398
+ 60% OFF
399
+ </span>
400
+ </div>
401
+ </div>
402
+
403
+ <button
404
+ type="button"
405
+ onClick={onBookButtonPress}
406
+ className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px] justify-center border-none cursor-pointer"
407
+ style={{
408
+ backgroundColor: "#FF5C60",
409
+ animation: "pulse-zoom 2s ease-in-out infinite",
410
+ whiteSpace: "nowrap",
411
+ width: "100%",
412
+ }}
413
+ >
414
+ <LottiePlayer
415
+ animationData={serviceItem.icons.thunderAnim}
416
+ width="18px"
417
+ height="18px"
418
+ />
419
+ <span className="whitespace-nowrap">¡Lo quiero!</span>
420
+ </button>
421
+
422
+ <div
423
+ className={`flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
424
+ onClick={onToggleExpand}
425
+ >
426
+ <img
427
+ src={serviceItem?.icons?.downArrow}
428
+ alt="down arrow"
429
+ style={{
430
+ width: "14px",
431
+ height: "8px",
432
+ filter: "brightness(0) invert(1)",
433
+ }}
434
+ />
204
435
  </div>
205
436
  </div>
206
437
 
207
- <div>
438
+ {/* <div>
208
439
  <div className="flex items-center text-[white]">
209
440
  <span>Vie, 04/11</span>
210
441
  <span className="h-[20px] flex items-center justify-center mx-[10px]">
@@ -374,7 +605,7 @@ const FeatureServiceUiMobile = ({
374
605
  }}
375
606
  />
376
607
  </div>
377
- </div>
608
+ </div> */}
378
609
  </div>
379
610
  </div>
380
611
 
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -58,12 +58,12 @@ const FeatureServiceUi = ({
58
58
  {
59
59
  icon: "bus",
60
60
  name: "2. Empresa asignada",
61
- text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
61
+ text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
62
62
  },
63
63
  {
64
64
  icon: "price",
65
65
  name: "3. Precio garantizado",
66
- text: "Al seleccionar este servicio aseguras el precio reducido.",
66
+ text: "Mejor precio garantizado. Sin cambios ni cancelación.",
67
67
  },
68
68
  {
69
69
  icon: "ticket",
@@ -100,9 +100,9 @@ const FeatureServiceUi = ({
100
100
  }`}
101
101
  >
102
102
  <div
103
- className=""
103
+ className="shadow-service"
104
104
  style={{
105
- border: "1px solid #c0c0c0",
105
+ // border: "1px solid #c0c0c0",
106
106
  padding: "14px",
107
107
  borderRadius: "14px",
108
108
  }}
@@ -124,22 +124,25 @@ const FeatureServiceUi = ({
124
124
  <span>AHORRAS 60%</span>
125
125
  </div>
126
126
  </div>
127
- <div>
128
- <span>
129
- {renderIcon("fireIcon", "14px")}{" "}
130
- <span className="bold-text">Remate</span> términa en{" "}
131
- <span
132
- className="bold-text text-end"
133
- ref={(node) => commonService.startCountdown(node, 599)}
134
- style={{
135
- fontVariantNumeric: "tabular-nums",
136
- display: "inline-block",
137
- color: "#FF5C60",
138
- minWidth: "40px",
139
- }}
140
- />
141
- </span>
142
- </div>
127
+ <span>
128
+ {/* {renderIcon("fireIcon", "14px")}{" "} */}
129
+ <img
130
+ src={serviceItem.icons?.fireIcon}
131
+ alt="fire"
132
+ className="w-[14px] h-[14px] mb-[4px] mr-[4px]"
133
+ />
134
+ <span className="bold-text">Remate</span> términa en{" "}
135
+ <span
136
+ className="bold-text text-end"
137
+ ref={(node) => commonService.startCountdown(node, 599)}
138
+ style={{
139
+ fontVariantNumeric: "tabular-nums",
140
+ display: "inline-block",
141
+ color: "#FF5C60",
142
+ minWidth: "40px",
143
+ }}
144
+ />
145
+ </span>
143
146
  </div>
144
147
  <div
145
148
  id={`service-card-${serviceItem.id}`}
@@ -188,7 +191,7 @@ const FeatureServiceUi = ({
188
191
  {renderIcon("sheildIcon", "16px")}
189
192
 
190
193
  <span
191
- className="text-[10px]"
194
+ className="text-[11px]"
192
195
  style={{
193
196
  lineHeight: 1.3,
194
197
  }}
@@ -200,7 +203,7 @@ const FeatureServiceUi = ({
200
203
  {renderIcon("confirmarIcon", "16px")}
201
204
 
202
205
  <span
203
- className="text-[10px]"
206
+ className="text-[11px]"
204
207
  style={{
205
208
  lineHeight: 1.3,
206
209
  }}
@@ -269,7 +272,7 @@ const FeatureServiceUi = ({
269
272
  width="18px"
270
273
  height="18px"
271
274
  />
272
- <span>
275
+ <span className="text-[13px]">
273
276
  <span className="bold-text text-white">
274
277
  {" "}
275
278
  <span