kupos-ui-components-lib 10.4.2 → 10.4.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 (6) hide show
  1. package/dist/styles.css +21 -3
  2. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +55 -53
  3. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -1
  4. package/package.json +1 -1
  5. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +84 -95
  6. package/src/ui/mobileweb/SeatSectionMobile.tsx +2 -1
package/dist/styles.css CHANGED
@@ -264,6 +264,9 @@
264
264
  .mr-\[5px\] {
265
265
  margin-right: 5px;
266
266
  }
267
+ .mr-\[6px\] {
268
+ margin-right: 6px;
269
+ }
267
270
  .mr-\[8px\] {
268
271
  margin-right: 8px;
269
272
  }
@@ -590,12 +593,12 @@
590
593
  .grid-cols-\[1\.5fr_1fr_auto\] {
591
594
  grid-template-columns: 1.5fr 1fr auto;
592
595
  }
593
- .grid-cols-\[25\%_48\%_27\%\] {
594
- grid-template-columns: 25% 48% 27%;
595
- }
596
596
  .grid-cols-\[26px_auto_26\%_1fr\] {
597
597
  grid-template-columns: 26px auto 26% 1fr;
598
598
  }
599
+ .grid-cols-\[27\%_46\%_27\%\] {
600
+ grid-template-columns: 27% 46% 27%;
601
+ }
599
602
  .grid-cols-\[auto_auto\] {
600
603
  grid-template-columns: auto auto;
601
604
  }
@@ -699,6 +702,9 @@
699
702
  .rounded-\[4px\] {
700
703
  border-radius: 4px;
701
704
  }
705
+ .rounded-\[6px\] {
706
+ border-radius: 6px;
707
+ }
702
708
  .rounded-\[8px\] {
703
709
  border-radius: 8px;
704
710
  }
@@ -1065,6 +1071,9 @@
1065
1071
  .text-\[14px\] {
1066
1072
  font-size: 14px;
1067
1073
  }
1074
+ .text-\[15px\] {
1075
+ font-size: 15px;
1076
+ }
1068
1077
  .text-\[16px\] {
1069
1078
  font-size: 16px;
1070
1079
  }
@@ -1159,6 +1168,9 @@
1159
1168
  .text-\[\#4a4a4a\] {
1160
1169
  color: #4a4a4a;
1161
1170
  }
1171
+ .text-\[\#9b9b9b\] {
1172
+ color: #9b9b9b;
1173
+ }
1162
1174
  .text-\[\#9f9f9f\] {
1163
1175
  color: #9f9f9f;
1164
1176
  }
@@ -1186,6 +1198,9 @@
1186
1198
  .text-\[\#ccc\] {
1187
1199
  color: #ccc;
1188
1200
  }
1201
+ .text-\[\#dcdcdc\] {
1202
+ color: #dcdcdc;
1203
+ }
1189
1204
  .text-\[\#ff8f45\] {
1190
1205
  color: #ff8f45;
1191
1206
  }
@@ -1220,6 +1235,9 @@
1220
1235
  .opacity-50 {
1221
1236
  opacity: 50%;
1222
1237
  }
1238
+ .opacity-80 {
1239
+ opacity: 80%;
1240
+ }
1223
1241
  .opacity-100 {
1224
1242
  opacity: 100%;
1225
1243
  }
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -32,7 +32,8 @@ const HARDCODED_OPERATORS = [
32
32
  },
33
33
  ];
34
34
  const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
35
- var _a, _b, _c, _d, _e, _f, _g;
35
+ var _a, _b, _c, _d, _e;
36
+ console.log("🚀 ~ FeatureServiceUi ~ selectedTimeSlot:", selectedTimeSlot);
36
37
  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
37
38
  const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
38
39
  ? wowDealData.services.slice(0, 3).map((service) => ({
@@ -78,6 +79,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
78
79
  // Active slot: the one matching selectedTimeSlot label, or the first available
79
80
  const activeSlot = availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
80
81
  availableTimeSlots[0];
82
+ console.log("🚀 ~ FeatureServiceUi ~ activeSlot:", activeSlot);
81
83
  // Services that fall within the active slot, sorted by final price ascending
82
84
  const servicesInActiveSlot = activeSlot
83
85
  ? services
@@ -102,7 +104,14 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
102
104
  100)
103
105
  : savingsPercent;
104
106
  // The label shown on the dropdown button
105
- const departureRange = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
107
+ const departureRange = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `${dealWindowFrom} y ${dealWindowTo}`;
108
+ // activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
109
+ const currentWindowFrom = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
110
+ ? activeSlot.label.split(" - ")[0]
111
+ : dealWindowFrom;
112
+ const currentWindowTo = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
113
+ ? activeSlot.label.split(" - ")[1]
114
+ : dealWindowTo;
106
115
  const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
107
116
  isFeatureDropDownExpand === true;
108
117
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
@@ -113,7 +122,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
113
122
  {
114
123
  icon: "flexible",
115
124
  name: "Salida flexible",
116
- text: `Viajas en un horario entre las ${dealWindowFrom} y las ${dealWindowTo} del día elegido.`,
125
+ text: `Viajas en un horario entre las ${currentWindowFrom} y las ${currentWindowTo} del día elegido.`,
117
126
  },
118
127
  {
119
128
  icon: "bus",
@@ -176,13 +185,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
176
185
  "AHORRAS ",
177
186
  displaySavingsPercent,
178
187
  "%"))),
179
- React.createElement("div", { className: "flex items-center" },
180
- React.createElement("div", { className: "mb-[2px]" },
181
- React.createElement(LottiePlayer
182
- // animationData={serviceItem.icons.flexibleAnim}
183
- , {
184
- // animationData={serviceItem.icons.flexibleAnim}
185
- animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
188
+ React.createElement("div", { className: "flex items-center px-[12px] py-[6px] rounded-full", style: { backgroundColor: "rgba(255, 222, 223, 0.93)" } },
189
+ React.createElement("div", { className: "mb-[2px] mr-[6px]" }, renderIcon("fireIcon", "14px")),
186
190
  React.createElement("span", { className: "bold-text" }, "Remate"),
187
191
  "\u00A0t\u00E9rmina en \u00A0",
188
192
  React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startDealCountdown(node, getCountdownSeconds()), style: {
@@ -192,32 +196,27 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
192
196
  minWidth: "40px",
193
197
  } }))),
194
198
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]" },
195
- React.createElement("div", { className: "grid grid-cols-[25%_48%_27%] items-stretch" },
199
+ React.createElement("div", { className: "grid grid-cols-[27%_46%_27%] items-stretch" },
196
200
  React.createElement("div", { className: "flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]" },
197
- React.createElement("div", { className: "flex flex-col gap-[8px]" },
198
- React.createElement("div", { className: "flex items-center gap-[8px]" },
199
- React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0` }),
200
- React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
201
- React.createElement("div", { className: "flex items-center gap-[8px]" },
202
- React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0` }),
203
- React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
204
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
205
- React.createElement("div", { className: "text-[12px] bold-text" }, travelDate
206
- ? (() => {
207
- const dayName = DateService.getDayNameFromDate(travelDate, "yyyy-mm-dd", "full");
208
- const day = parseInt(DateService.getDateFromDate(travelDate, "yyyy-mm-dd"), 10);
209
- const monthName = DateService.getMonthNameFromDate(travelDate, "yyyy-mm-dd", "full");
210
- return `${dayName}, ${day} de ${monthName}`;
211
- })()
212
- : "Viernes 23 de mayo"),
201
+ React.createElement("div", { className: "flex items-center gap-[6px]" },
202
+ React.createElement("span", { className: "text-[16px] bold-text text-white tracking-wide" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0]),
203
+ React.createElement("span", { className: "text-[15px] text-[#9b9b9b]" }, "\u2794"),
204
+ React.createElement("span", { className: "text-[16px] bold-text text-white tracking-wide" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0])),
205
+ React.createElement("div", { className: "flex items-center w-fit rounded-[6px] px-[8px] py-[4px] gap-[6px] ", style: {
206
+ border: "1px solid rgb(54, 60, 72)",
207
+ backgroundColor: "rgb(26, 32, 46)",
208
+ } },
209
+ React.createElement("div", { className: "opacity-80" }, renderIcon("flexibleIcon", "14px")),
210
+ React.createElement("span", { className: "text-[12px] text-white" }, "Salida flexible")),
211
+ React.createElement("div", { className: "flex flex-col gap-[4px] mt-[4px]" },
213
212
  React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
214
213
  if (!e.currentTarget.contains(e.relatedTarget)) {
215
214
  onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
216
215
  }
217
216
  }, style: { outline: "none" } },
218
- React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
219
- React.createElement("span", null, departureRange),
220
- React.createElement("img", { src: (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
217
+ React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0" },
218
+ React.createElement("span", { className: "text-[14px] font-bold leading-none text-white tracking-wide" }, departureRange),
219
+ 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", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
221
220
  width: "12px",
222
221
  height: "8px",
223
222
  filter: "brightness(0) invert(1)",
@@ -234,7 +233,6 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
234
233
  } }, availableTimeSlots.map((slot) => {
235
234
  const isActive = slot.label === selectedTimeSlot ||
236
235
  slot === activeSlot;
237
- // Count services in this slot
238
236
  const count = services.filter((s) => {
239
237
  const depMin = commonService.timeToMinutes(s.departure_time);
240
238
  return depMin >= slot.start && depMin < slot.end;
@@ -242,29 +240,33 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
242
240
  return (React.createElement("button", { key: slot.label, type: "button", onClick: () => {
243
241
  onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot.label);
244
242
  onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
245
- const slotServices = services.filter((s) => {
246
- const depMin = commonService.timeToMinutes(s.departure_time);
247
- return (depMin >= slot.start && depMin < slot.end);
248
- });
249
- console.log("Selected slot label:", slot.label);
250
- console.log("Services in selected slot:", slotServices);
251
243
  }, className: `flex w-full cursor-pointer items-center justify-between gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
252
244
  React.createElement("span", null, slot.label),
253
245
  count > 0 && (React.createElement("span", { className: `text-[11px] rounded-full px-[6px] py-[2px] font-bold ${isActive
254
246
  ? "bg-white text-[#FF5C60]"
255
247
  : "bg-[#FF5C60] text-white"}` }, count))));
256
- })))))),
257
- React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
258
- React.createElement("div", { className: "flex items-justify gap-[8px]" },
259
- renderIcon("sheildIcon", "16px"),
260
- React.createElement("span", { className: "text-[11px]", style: {
261
- lineHeight: 1.3,
262
- } }, "Empresa y hora a confirmar luego del pago.")),
263
- React.createElement("div", { className: "flex items-justify gap-[8px]" },
264
- renderIcon("confirmarIcon", "16px"),
265
- React.createElement("span", { className: "text-[11px]", style: {
266
- lineHeight: 1.3,
267
- } }, "Tu compra est\u00E1 100% asegurada.")))),
248
+ }))))),
249
+ React.createElement("div", { className: "text-[13px] text-[#9b9b9b]" }, travelDate
250
+ ? (() => {
251
+ const dayName = DateService.getDayNameFromDate(travelDate, "yyyy-mm-dd", "full");
252
+ const day = parseInt(DateService.getDateFromDate(travelDate, "yyyy-mm-dd"), 10);
253
+ const monthName = DateService.getMonthNameFromDate(travelDate, "yyyy-mm-dd", "full");
254
+ return `${dayName.charAt(0).toUpperCase() + dayName.slice(1)} ${day} de ${monthName}`;
255
+ })()
256
+ : "Viernes 23 de mayo")),
257
+ React.createElement("div", { className: "flex flex-col items-start gap-[12px] text-[13px] mt-[6px]" },
258
+ React.createElement("div", { className: "flex items-start gap-[10px]" },
259
+ React.createElement("div", { className: "mt-[2px] opacity-80" }, renderIcon("confirmarIcon", "20px")),
260
+ React.createElement("span", { className: "text-[#dcdcdc] leading-[1.3]" },
261
+ "Operador confirmado ",
262
+ React.createElement("br", null),
263
+ " despu\u00E9s de tu compra")),
264
+ React.createElement("div", { className: "flex items-start gap-[10px]" },
265
+ React.createElement("div", { className: "mt-[2px] opacity-80" }, renderIcon("sheildIcon", "20px")),
266
+ React.createElement("span", { className: "text-[#dcdcdc] leading-[1.3]" },
267
+ "Si nadie confirma, ",
268
+ React.createElement("br", null),
269
+ " te devolvemos tu dinero")))),
268
270
  React.createElement("div", { className: "min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
269
271
  React.createElement("div", { className: "text-center" },
270
272
  React.createElement("div", { className: "bold-text text-[13px]" },
@@ -402,17 +404,17 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
402
404
  flexShrink: 0,
403
405
  } })))),
404
406
  React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
405
- React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
407
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
406
408
  width: "14px",
407
409
  height: "8px",
408
410
  filter: "brightness(0) invert(1)",
409
411
  } })))),
410
412
  React.createElement("div", { className: "grid", style: {
411
- gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
412
- opacity: isItemExpanded ? 1 : 0,
413
+ gridTemplateRows: "1fr",
414
+ opacity: 1,
413
415
  transition: "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
414
416
  } },
415
- React.createElement("div", { className: `min-h-0 overflow-hidden px-[16px] text-[13.33px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"}`, style: { transition: "padding 300ms ease-in-out" } },
417
+ React.createElement("div", { className: `min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-[14px] pb-[6px]`, style: { transition: "padding 300ms ease-in-out" } },
416
418
  React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
417
419
  React.createElement("div", { className: "mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] " }, HOW_IT_WORKS_STEPS.map((step) => (React.createElement("div", { key: step.name, className: "flex flex-col items-center text-center text-[#272727]" },
418
420
  React.createElement(FeatureStepIcon, { icon: step.icon }),
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -243,10 +243,11 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
243
243
  ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
244
244
  : `${discountValue}% OFF`)),
245
245
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
246
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
246
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-right", style: {
247
247
  position: "relative",
248
248
  display: "inline-block",
249
249
  overflow: "hidden",
250
+ color: discountSeatPriceColor,
250
251
  } },
251
252
  commonService.currency(discountSeat.originalPrice, currencySign),
252
253
  React.createElement("span", { style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.2",
3
+ "version": "10.4.4",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -54,6 +54,7 @@ const FeatureServiceUi = ({
54
54
  onTimeDropdownToggle,
55
55
  wowDealData = undefined,
56
56
  }) => {
57
+ console.log("🚀 ~ FeatureServiceUi ~ selectedTimeSlot:", selectedTimeSlot);
57
58
  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
58
59
  const operators =
59
60
  wowDealData?.services?.length > 0
@@ -111,6 +112,7 @@ const FeatureServiceUi = ({
111
112
  const activeSlot =
112
113
  availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
113
114
  availableTimeSlots[0];
115
+ console.log("🚀 ~ FeatureServiceUi ~ activeSlot:", activeSlot);
114
116
 
115
117
  // Services that fall within the active slot, sorted by final price ascending
116
118
  const servicesInActiveSlot = activeSlot
@@ -141,8 +143,17 @@ const FeatureServiceUi = ({
141
143
  : savingsPercent;
142
144
 
143
145
  // The label shown on the dropdown button
146
+
144
147
  const departureRange =
145
- activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
148
+ activeSlot?.label || `${dealWindowFrom} y ${dealWindowTo}`;
149
+ // activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
150
+
151
+ const currentWindowFrom = activeSlot?.label
152
+ ? activeSlot.label.split(" - ")[0]
153
+ : dealWindowFrom;
154
+ const currentWindowTo = activeSlot?.label
155
+ ? activeSlot.label.split(" - ")[1]
156
+ : dealWindowTo;
146
157
 
147
158
  const isItemExpanded =
148
159
  serviceItem.id === isFeatureDropDownExpand ||
@@ -157,7 +168,7 @@ const FeatureServiceUi = ({
157
168
  {
158
169
  icon: "flexible",
159
170
  name: "Salida flexible",
160
- text: `Viajas en un horario entre las ${dealWindowFrom} y las ${dealWindowTo} del día elegido.`,
171
+ text: `Viajas en un horario entre las ${currentWindowFrom} y las ${currentWindowTo} del día elegido.`,
161
172
  },
162
173
  {
163
174
  icon: "bus",
@@ -231,15 +242,19 @@ const FeatureServiceUi = ({
231
242
  <span>AHORRAS {displaySavingsPercent}%</span>
232
243
  </div>
233
244
  </div>
234
- <div className="flex items-center">
245
+ <div
246
+ className="flex items-center px-[12px] py-[6px] rounded-full"
247
+ style={{ backgroundColor: "rgba(255, 222, 223, 0.93)" }}
248
+ >
235
249
  {/* {renderIcon("fireIcon", "14px")}{" "} */}
236
- <div className="mb-[2px]">
237
- <LottiePlayer
250
+ <div className="mb-[2px] mr-[6px]">
251
+ {/* <LottiePlayer
238
252
  // animationData={serviceItem.icons.flexibleAnim}
239
253
  animationData={getAnimationIcon("flameAnimation")}
240
254
  width="18px"
241
255
  height="18px"
242
- />
256
+ /> */}
257
+ {renderIcon("fireIcon", "14px")}
243
258
  </div>
244
259
  <span className="bold-text">Remate</span>&nbsp;términa en &nbsp;
245
260
  <span
@@ -260,59 +275,33 @@ const FeatureServiceUi = ({
260
275
  id={`service-card-${serviceItem.id}`}
261
276
  className="bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]"
262
277
  >
263
- <div className="grid grid-cols-[25%_48%_27%] items-stretch">
278
+ <div className="grid grid-cols-[27%_46%_27%] items-stretch">
264
279
  {/* LEFT: origin, destination, flexible, time, confirmed seat */}
265
280
  <div className="flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]">
266
- <div className="flex flex-col gap-[8px]">
267
- <div className="flex items-center gap-[8px]">
268
- <img
269
- src={serviceItem.icons?.whiteOrigin}
270
- alt="origin"
271
- className={`w-[14px] h-[14px] shrink-0`}
272
- />
273
- <span className="text-[13px] bold-text">
274
- {cityOrigin?.label.split(",")[0]}
275
- </span>
276
- </div>
277
- <div className="flex items-center gap-[8px]">
278
- <img
279
- src={serviceItem.icons?.whiteDestination}
280
- alt="destination"
281
- className={`w-[14px] h-[14px] shrink-0`}
282
- />
283
- <span className="text-[13px] bold-text">
284
- {cityDestination?.label.split(",")[0]}
285
- </span>
286
- </div>
281
+ <div className="flex items-center gap-[6px]">
282
+ <span className="text-[16px] bold-text text-white tracking-wide">
283
+ {cityOrigin?.label.split(",")[0]}
284
+ </span>
285
+ <span className="text-[15px] text-[#9b9b9b]">➔</span>
286
+ <span className="text-[16px] bold-text text-white tracking-wide">
287
+ {cityDestination?.label.split(",")[0]}
288
+ </span>
287
289
  </div>
288
290
 
289
- <div className="flex flex-col gap-[10px]">
290
- <div className="text-[12px] bold-text">
291
- {travelDate
292
- ? (() => {
293
- const dayName = DateService.getDayNameFromDate(
294
- travelDate,
295
- "yyyy-mm-dd",
296
- "full",
297
- );
298
- const day = parseInt(
299
- DateService.getDateFromDate(travelDate, "yyyy-mm-dd"),
300
- 10,
301
- );
302
- const monthName = DateService.getMonthNameFromDate(
303
- travelDate,
304
- "yyyy-mm-dd",
305
- "full",
306
- );
307
- return `${dayName}, ${day} de ${monthName}`;
308
- })()
309
- : "Viernes 23 de mayo"}
291
+ <div
292
+ className="flex items-center w-fit rounded-[6px] px-[8px] py-[4px] gap-[6px] "
293
+ style={{
294
+ border: "1px solid rgb(54, 60, 72)",
295
+ backgroundColor: "rgb(26, 32, 46)",
296
+ }}
297
+ >
298
+ <div className="opacity-80">
299
+ {renderIcon("flexibleIcon", "14px")}
310
300
  </div>
301
+ <span className="text-[12px] text-white">Salida flexible</span>
302
+ </div>
311
303
 
312
- {/* <div className="bold-text text-[12px] text-white">
313
- {departureRange}
314
- </div> */}
315
-
304
+ <div className="flex flex-col gap-[4px] mt-[4px]">
316
305
  <div
317
306
  className="kupos-time-dd relative"
318
307
  tabIndex={0}
@@ -330,9 +319,11 @@ const FeatureServiceUi = ({
330
319
  isThisTimeDropdownOpen ? null : serviceItem.id,
331
320
  )
332
321
  }
333
- className="flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]"
322
+ className="flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0"
334
323
  >
335
- <span>{departureRange}</span>
324
+ <span className="text-[14px] font-bold leading-none text-white tracking-wide">
325
+ {departureRange}
326
+ </span>
336
327
  <img
337
328
  src={serviceItem?.icons?.downArrow}
338
329
  alt="down arrow"
@@ -362,7 +353,6 @@ const FeatureServiceUi = ({
362
353
  const isActive =
363
354
  slot.label === selectedTimeSlot ||
364
355
  slot === activeSlot;
365
- // Count services in this slot
366
356
  const count = services.filter((s) => {
367
357
  const depMin = commonService.timeToMinutes(
368
358
  s.departure_time,
@@ -376,19 +366,6 @@ const FeatureServiceUi = ({
376
366
  onClick={() => {
377
367
  onTimeSlotChange?.(slot.label);
378
368
  onTimeDropdownToggle?.(null);
379
- const slotServices = services.filter((s) => {
380
- const depMin = commonService.timeToMinutes(
381
- s.departure_time,
382
- );
383
- return (
384
- depMin >= slot.start && depMin < slot.end
385
- );
386
- });
387
- console.log("Selected slot label:", slot.label);
388
- console.log(
389
- "Services in selected slot:",
390
- slotServices,
391
- );
392
369
  }}
393
370
  className={`flex w-full cursor-pointer items-center justify-between gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}`}
394
371
  >
@@ -411,31 +388,45 @@ const FeatureServiceUi = ({
411
388
  </>
412
389
  )}
413
390
  </div>
414
- </div>
415
391
 
416
- <div className="flex flex-col items-start gap-[10px] text-[12px] ">
417
- <div className="flex items-justify gap-[8px]">
418
- {renderIcon("sheildIcon", "16px")}
392
+ <div className="text-[13px] text-[#9b9b9b]">
393
+ {travelDate
394
+ ? (() => {
395
+ const dayName = DateService.getDayNameFromDate(
396
+ travelDate,
397
+ "yyyy-mm-dd",
398
+ "full",
399
+ );
400
+ const day = parseInt(
401
+ DateService.getDateFromDate(travelDate, "yyyy-mm-dd"),
402
+ 10,
403
+ );
404
+ const monthName = DateService.getMonthNameFromDate(
405
+ travelDate,
406
+ "yyyy-mm-dd",
407
+ "full",
408
+ );
409
+ return `${dayName.charAt(0).toUpperCase() + dayName.slice(1)} ${day} de ${monthName}`;
410
+ })()
411
+ : "Viernes 23 de mayo"}
412
+ </div>
413
+ </div>
419
414
 
420
- <span
421
- className="text-[11px]"
422
- style={{
423
- lineHeight: 1.3,
424
- }}
425
- >
426
- Empresa y hora a confirmar luego del pago.
415
+ <div className="flex flex-col items-start gap-[12px] text-[13px] mt-[6px]">
416
+ <div className="flex items-start gap-[10px]">
417
+ <div className="mt-[2px] opacity-80">
418
+ {renderIcon("confirmarIcon", "20px")}
419
+ </div>
420
+ <span className="text-[#dcdcdc] leading-[1.3]">
421
+ Operador confirmado <br /> después de tu compra
427
422
  </span>
428
423
  </div>
429
- <div className="flex items-justify gap-[8px]">
430
- {renderIcon("confirmarIcon", "16px")}
431
-
432
- <span
433
- className="text-[11px]"
434
- style={{
435
- lineHeight: 1.3,
436
- }}
437
- >
438
- Tu compra está 100% asegurada.
424
+ <div className="flex items-start gap-[10px]">
425
+ <div className="mt-[2px] opacity-80">
426
+ {renderIcon("sheildIcon", "20px")}
427
+ </div>
428
+ <span className="text-[#dcdcdc] leading-[1.3]">
429
+ Si nadie confirma, <br /> te devolvemos tu dinero
439
430
  </span>
440
431
  </div>
441
432
  </div>
@@ -725,16 +716,14 @@ const FeatureServiceUi = ({
725
716
  <div
726
717
  className="grid"
727
718
  style={{
728
- gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
729
- opacity: isItemExpanded ? 1 : 0,
719
+ gridTemplateRows: "1fr",
720
+ opacity: 1,
730
721
  transition:
731
722
  "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
732
723
  }}
733
724
  >
734
725
  <div
735
- className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${
736
- isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
737
- }`}
726
+ className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-[14px] pb-[6px]`}
738
727
  style={{ transition: "padding 300ms ease-in-out" }}
739
728
  >
740
729
  <span className="bold-text">¿Cómo funciona?</span>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -575,11 +575,12 @@ function SeatSectionMobile({
575
575
  Antes
576
576
  </span>
577
577
  <span
578
- className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
578
+ className="min-[420]:text-[13px] text-[12px] leading-[20px] text-right"
579
579
  style={{
580
580
  position: "relative",
581
581
  display: "inline-block",
582
582
  overflow: "hidden",
583
+ color: discountSeatPriceColor,
583
584
  }}
584
585
  >
585
586
  {commonService.currency(