kupos-ui-components-lib 10.4.6 → 10.4.8

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 (9) hide show
  1. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +15 -11
  2. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +33 -7
  3. package/dist/ui/ServiceBadges/ServiceBadges.js +4 -4
  4. package/dist/ui/mobileweb/ServiceBadgesMobile.js +3 -3
  5. package/package.json +1 -1
  6. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +47 -2
  7. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +41 -7
  8. package/src/ui/ServiceBadges/ServiceBadges.tsx +4 -4
  9. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +6 -3
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import commonService from "../../utils/CommonService";
4
- import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
5
4
  const HARDCODED_OPERATORS = [
6
5
  {
7
6
  logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
@@ -23,7 +22,7 @@ const HARDCODED_OPERATORS = [
23
22
  },
24
23
  ];
25
24
  const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
26
- var _a, _b, _c, _d, _e, _f, _g;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h;
27
26
  // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
28
27
  const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
29
28
  ? wowDealData.services.slice(0, 3).map((service) => ({
@@ -112,6 +111,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
112
111
  });
113
112
  // The label shown on the dropdown button
114
113
  const departureRange = formatLabelAmPm((activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `Entre ${dealWindowFrom} y ${dealWindowTo}`);
114
+ const currentWindowFrom = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
115
+ ? activeSlot.label.split(" - ")[0]
116
+ : dealWindowFrom;
117
+ const currentWindowTo = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
118
+ ? activeSlot.label.split(" - ")[1]
119
+ : dealWindowTo;
115
120
  const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
116
121
  isFeatureDropDownExpand === true;
117
122
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
@@ -122,7 +127,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
122
127
  {
123
128
  icon: "flexible",
124
129
  name: "Salida flexible",
125
- text: `Viajas en un horario entre las ${dealWindowFrom} y las ${dealWindowTo} del día elegido.`,
130
+ text: `Viajas en un horario entre las ${currentWindowFrom} y las ${currentWindowTo} del día elegido.`,
126
131
  },
127
132
  {
128
133
  icon: "bus",
@@ -411,19 +416,18 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
411
416
  React.createElement("span", { className: "bold-text" }, step.name),
412
417
  React.createElement("span", null, step.text)))))))))),
413
418
  React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-center gap-[12px] z-10 " },
414
- React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
419
+ React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] text-white whitespace-nowrap", style: { backgroundColor: "rgba(255, 222, 223, 0.93)" } },
415
420
  React.createElement("span", { className: "flex items-center" },
416
- React.createElement("div", { className: "mb-[2px]" },
417
- React.createElement(LottiePlayer, { animationData: flameAnimation, width: "16px", height: "16px" })),
418
- React.createElement("span", { className: "bold-text text-[white] ml-[3px]" }, "Remate\u00A0"),
421
+ ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[12px] w-[12px] object-contain mr-[5px]", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
422
+ React.createElement("span", { className: "bold-text text-[#464647] ml-[3px]" }, "Remate\u00A0"),
419
423
  " ",
420
- React.createElement("span", { className: "text-[white]" }, "t\u00E9rmina en"),
424
+ React.createElement("span", { className: "text-[#464647]" }, "t\u00E9rmina en\u00A0"),
421
425
  " ",
422
- React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, getCountdownSeconds()), style: {
426
+ React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startDealCountdown(node, getCountdownSeconds()), style: {
423
427
  fontVariantNumeric: "tabular-nums",
424
428
  display: "inline-block",
425
- color: "#fff",
426
- minWidth: "40px",
429
+ color: "#FF5C60",
430
+ minWidth: "50px",
427
431
  } }))))));
428
432
  };
429
433
  export default FeatureServiceUiMobile;
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -31,6 +31,7 @@ const HARDCODED_OPERATORS = [
31
31
  seatsAvailable: "3 disponibles",
32
32
  },
33
33
  ];
34
+ const expandedStateMap = {};
34
35
  const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
35
36
  var _a, _b, _c, _d, _e;
36
37
  console.log("🚀 ~ FeatureServiceUi ~ selectedTimeSlot:", selectedTimeSlot);
@@ -112,8 +113,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
112
113
  const currentWindowTo = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
113
114
  ? activeSlot.label.split(" - ")[1]
114
115
  : dealWindowTo;
115
- const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
116
- isFeatureDropDownExpand === true;
116
+ if (expandedStateMap[serviceItem.id] === undefined) {
117
+ expandedStateMap[serviceItem.id] = true;
118
+ }
119
+ const isItemExpanded = expandedStateMap[serviceItem.id];
117
120
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
118
121
  const canDecreaseTicketQuantity = ticketQuantity > 1;
119
122
  const availableSeats = (_c = selectedSlotService === null || selectedSlotService === void 0 ? void 0 : selectedSlotService.available_seats) !== null && _c !== void 0 ? _c : maxSeatsPerBooking;
@@ -403,18 +406,41 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
403
406
  animation: "feature-spin 0.7s linear infinite",
404
407
  flexShrink: 0,
405
408
  } })))),
406
- React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
409
+ React.createElement("div", { id: `feature-arrow-${serviceItem.id}`, className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: (e) => {
410
+ expandedStateMap[serviceItem.id] =
411
+ !expandedStateMap[serviceItem.id];
412
+ if (onToggleExpand)
413
+ onToggleExpand(e);
414
+ const contentNode = document.getElementById(`feature-content-${serviceItem.id}`);
415
+ const innerNode = document.getElementById(`feature-inner-content-${serviceItem.id}`);
416
+ const arrowNode = document.getElementById(`feature-arrow-${serviceItem.id}`);
417
+ if (contentNode && innerNode && arrowNode) {
418
+ const isExpanded = expandedStateMap[serviceItem.id];
419
+ if (isExpanded) {
420
+ contentNode.style.gridTemplateRows = "1fr";
421
+ contentNode.style.opacity = "1";
422
+ innerNode.className = `min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-[14px] pb-[6px]`;
423
+ arrowNode.className = `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out rotate-180`;
424
+ }
425
+ else {
426
+ contentNode.style.gridTemplateRows = "0fr";
427
+ contentNode.style.opacity = "0";
428
+ innerNode.className = `min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-0 pb-0`;
429
+ arrowNode.className = `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out `;
430
+ }
431
+ }
432
+ } },
407
433
  React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
408
434
  width: "14px",
409
435
  height: "8px",
410
436
  filter: "brightness(0) invert(1)",
411
437
  } })))),
412
- React.createElement("div", { className: "grid", style: {
413
- gridTemplateRows: "1fr",
414
- opacity: 1,
438
+ React.createElement("div", { id: `feature-content-${serviceItem.id}`, className: "grid", style: {
439
+ gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
440
+ opacity: isItemExpanded ? 1 : 0,
415
441
  transition: "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
416
442
  } },
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" } },
443
+ React.createElement("div", { id: `feature-inner-content-${serviceItem.id}`, className: `min-h-0 overflow-hidden px-[16px] text-[13.33px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "pt-0 pb-0"}`, style: { transition: "padding 300ms ease-in-out" } },
418
444
  React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
419
445
  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]" },
420
446
  React.createElement(FeatureStepIcon, { icon: step.icon }),
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -15,7 +15,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
15
15
  }),
16
16
  React.createElement("div", null, CommonService.capitalize(showTopLabel)))),
17
17
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
18
- backgroundColor: "#fff",
18
+ backgroundColor: colors.topLabelBgColor || "#fff",
19
19
  border: isSoldOut
20
20
  ? "1px solid #ccc"
21
21
  : `1px solid ${colors.topLabelColor}`,
@@ -24,7 +24,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
24
24
  renderIcon("connectingServiceIcon", "12px"),
25
25
  React.createElement("div", null, "Conexión"))),
26
26
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
27
- backgroundColor: "#fff",
27
+ backgroundColor: colors.topLabelBgColor || "#fff",
28
28
  border: isSoldOut
29
29
  ? "1px solid #ccc"
30
30
  : `1px solid ${colors.topLabelColor}`,
@@ -33,7 +33,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
33
33
  renderIcon("directo", "12px"),
34
34
  React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
35
35
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
36
- backgroundColor: "#fff",
36
+ backgroundColor: colors.topLabelBgColor || "#fff",
37
37
  border: isSoldOut
38
38
  ? "1px solid #ccc"
39
39
  : `1px solid ${colors.topLabelColor}`,
@@ -42,7 +42,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
42
42
  renderIcon("directo", "12px"),
43
43
  React.createElement("div", null, "Tren Express"))),
44
44
  boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
45
- backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
45
+ backgroundColor: colors.topLabelBgColor || "#fff",
46
46
  } },
47
47
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
48
48
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -14,7 +14,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
14
14
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
15
15
  } }, CommonService.capitalize(showTopLabel)))),
16
16
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
17
- backgroundColor: "#fff",
17
+ backgroundColor: colors.topLabelBgColor || "#fff",
18
18
  border: isSoldOut
19
19
  ? "1px solid #ccc"
20
20
  : `1px solid ${colors.topLabelColor}`,
@@ -32,7 +32,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
32
32
  renderIcon("airportIcon", "14px"),
33
33
  React.createElement("div", null, "Conexi\u00F3n"))),
34
34
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
35
- backgroundColor: "#fff",
35
+ backgroundColor: colors.topLabelBgColor || "#fff",
36
36
  border: isSoldOut
37
37
  ? "1px solid #ccc"
38
38
  : `1px solid ${colors.topLabelColor}`,
@@ -41,7 +41,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
41
41
  renderIcon("directo", "12px"),
42
42
  React.createElement("div", null, "Tren Express"))),
43
43
  boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
44
- backgroundColor: "#fff",
44
+ backgroundColor: colors.topLabelBgColor || "#fff",
45
45
  border: isSoldOut
46
46
  ? "1px solid #ccc"
47
47
  : `1px solid ${colors.topLabelColor}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.6",
3
+ "version": "10.4.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -156,6 +156,13 @@ const FeatureServiceUiMobile = ({
156
156
  activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`,
157
157
  );
158
158
 
159
+ const currentWindowFrom = activeSlot?.label
160
+ ? activeSlot.label.split(" - ")[0]
161
+ : dealWindowFrom;
162
+ const currentWindowTo = activeSlot?.label
163
+ ? activeSlot.label.split(" - ")[1]
164
+ : dealWindowTo;
165
+
159
166
  const isItemExpanded =
160
167
  serviceItem.id === isFeatureDropDownExpand ||
161
168
  isFeatureDropDownExpand === true;
@@ -170,7 +177,7 @@ const FeatureServiceUiMobile = ({
170
177
  {
171
178
  icon: "flexible",
172
179
  name: "Salida flexible",
173
- text: `Viajas en un horario entre las ${dealWindowFrom} y las ${dealWindowTo} del día elegido.`,
180
+ text: `Viajas en un horario entre las ${currentWindowFrom} y las ${currentWindowTo} del día elegido.`,
174
181
  },
175
182
  {
176
183
  icon: "bus",
@@ -709,7 +716,7 @@ const FeatureServiceUiMobile = ({
709
716
 
710
717
  {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
711
718
  <div className="absolute -top-[13px] left-0 w-full flex items-center justify-center gap-[12px] z-10 ">
712
- <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
719
+ {/* <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
713
720
  <span className="flex items-center">
714
721
  <div className="mb-[2px]">
715
722
  <LottiePlayer
@@ -735,6 +742,44 @@ const FeatureServiceUiMobile = ({
735
742
  }}
736
743
  />
737
744
  </span>
745
+ </div> */}
746
+ <div
747
+ className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] text-white whitespace-nowrap"
748
+ style={{ backgroundColor: "rgba(255, 222, 223, 0.93)" }}
749
+ >
750
+ <span className="flex items-center">
751
+ {serviceItem?.icons?.fireIcon ? (
752
+ <img
753
+ src={serviceItem.icons.fireIcon}
754
+ alt="discount"
755
+ className="h-[12px] w-[12px] object-contain mr-[5px]"
756
+ style={{ filter: isSoldOut ? "grayscale" : "" }}
757
+ />
758
+ ) : null}
759
+ {/* <div className="mb-[2px]">
760
+ <LottiePlayer
761
+ animationData={flameAnimation}
762
+ width="16px"
763
+ height="16px"
764
+ />
765
+ </div> */}
766
+ <span className="bold-text text-[#464647] ml-[3px]">
767
+ Remate&nbsp;
768
+ </span>{" "}
769
+ <span className="text-[#464647]">términa en&nbsp;</span>{" "}
770
+ <span
771
+ className="bold-text text-end"
772
+ ref={(node) =>
773
+ commonService.startDealCountdown(node, getCountdownSeconds())
774
+ }
775
+ style={{
776
+ fontVariantNumeric: "tabular-nums",
777
+ display: "inline-block",
778
+ color: "#FF5C60",
779
+ minWidth: "50px",
780
+ }}
781
+ />
782
+ </span>
738
783
  </div>
739
784
  </div>
740
785
  </div>
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -33,6 +33,7 @@ const HARDCODED_OPERATORS = [
33
33
  seatsAvailable: "3 disponibles",
34
34
  },
35
35
  ];
36
+ const expandedStateMap: Record<string, boolean> = {};
36
37
 
37
38
  const FeatureServiceUi = ({
38
39
  serviceItem,
@@ -155,9 +156,10 @@ const FeatureServiceUi = ({
155
156
  ? activeSlot.label.split(" - ")[1]
156
157
  : dealWindowTo;
157
158
 
158
- const isItemExpanded =
159
- serviceItem.id === isFeatureDropDownExpand ||
160
- isFeatureDropDownExpand === true;
159
+ if (expandedStateMap[serviceItem.id] === undefined) {
160
+ expandedStateMap[serviceItem.id] = true;
161
+ }
162
+ const isItemExpanded = expandedStateMap[serviceItem.id];
161
163
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
162
164
  const canDecreaseTicketQuantity = ticketQuantity > 1;
163
165
  const availableSeats =
@@ -698,8 +700,38 @@ const FeatureServiceUi = ({
698
700
  </div>
699
701
 
700
702
  <div
703
+ id={`feature-arrow-${serviceItem.id}`}
701
704
  className={`absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
702
- onClick={onToggleExpand}
705
+ onClick={(e) => {
706
+ expandedStateMap[serviceItem.id] =
707
+ !expandedStateMap[serviceItem.id];
708
+ if (onToggleExpand) onToggleExpand(e);
709
+
710
+ const contentNode = document.getElementById(
711
+ `feature-content-${serviceItem.id}`,
712
+ );
713
+ const innerNode = document.getElementById(
714
+ `feature-inner-content-${serviceItem.id}`,
715
+ );
716
+ const arrowNode = document.getElementById(
717
+ `feature-arrow-${serviceItem.id}`,
718
+ );
719
+
720
+ if (contentNode && innerNode && arrowNode) {
721
+ const isExpanded = expandedStateMap[serviceItem.id];
722
+ if (isExpanded) {
723
+ contentNode.style.gridTemplateRows = "1fr";
724
+ contentNode.style.opacity = "1";
725
+ innerNode.className = `min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-[14px] pb-[6px]`;
726
+ arrowNode.className = `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out rotate-180`;
727
+ } else {
728
+ contentNode.style.gridTemplateRows = "0fr";
729
+ contentNode.style.opacity = "0";
730
+ innerNode.className = `min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-0 pb-0`;
731
+ arrowNode.className = `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out `;
732
+ }
733
+ }
734
+ }}
703
735
  >
704
736
  <img
705
737
  src={serviceItem.icons?.downArrow}
@@ -714,16 +746,18 @@ const FeatureServiceUi = ({
714
746
  </div>
715
747
  </div>
716
748
  <div
749
+ id={`feature-content-${serviceItem.id}`}
717
750
  className="grid"
718
751
  style={{
719
- gridTemplateRows: "1fr",
720
- opacity: 1,
752
+ gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
753
+ opacity: isItemExpanded ? 1 : 0,
721
754
  transition:
722
755
  "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
723
756
  }}
724
757
  >
725
758
  <div
726
- className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] pt-[14px] pb-[6px]`}
759
+ id={`feature-inner-content-${serviceItem.id}`}
760
+ className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "pt-0 pb-0"}`}
727
761
  style={{ transition: "padding 300ms ease-in-out" }}
728
762
  >
729
763
  <span className="bold-text">¿Cómo funciona?</span>
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -56,7 +56,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
56
56
  <div
57
57
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
58
58
  style={{
59
- backgroundColor: "#fff",
59
+ backgroundColor: colors.topLabelBgColor || "#fff",
60
60
  border: isSoldOut
61
61
  ? "1px solid #ccc"
62
62
  : `1px solid ${colors.topLabelColor}`,
@@ -71,7 +71,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
71
71
  <div
72
72
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
73
73
  style={{
74
- backgroundColor: "#fff",
74
+ backgroundColor: colors.topLabelBgColor || "#fff",
75
75
  border: isSoldOut
76
76
  ? "1px solid #ccc"
77
77
  : `1px solid ${colors.topLabelColor}`,
@@ -86,7 +86,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
86
86
  <div
87
87
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
88
88
  style={{
89
- backgroundColor: "#fff",
89
+ backgroundColor: colors.topLabelBgColor || "#fff",
90
90
  border: isSoldOut
91
91
  ? "1px solid #ccc"
92
92
  : `1px solid ${colors.topLabelColor}`,
@@ -101,7 +101,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
101
101
  <div
102
102
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
103
103
  style={{
104
- backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
104
+ backgroundColor: colors.topLabelBgColor || "#fff",
105
105
  }}
106
106
  >
107
107
  <div className={isSoldOut ? "grayscale" : ""}>
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -61,7 +61,8 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
61
61
  <div
62
62
  className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
63
63
  style={{
64
- backgroundColor: "#fff",
64
+ backgroundColor: colors.topLabelBgColor || "#fff",
65
+
65
66
  border: isSoldOut
66
67
  ? "1px solid #ccc"
67
68
  : `1px solid ${colors.topLabelColor}`,
@@ -91,7 +92,8 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
91
92
  <div
92
93
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
93
94
  style={{
94
- backgroundColor: "#fff",
95
+ backgroundColor: colors.topLabelBgColor || "#fff",
96
+
95
97
  border: isSoldOut
96
98
  ? "1px solid #ccc"
97
99
  : `1px solid ${colors.topLabelColor}`,
@@ -106,7 +108,8 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
106
108
  <div
107
109
  className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
108
110
  style={{
109
- backgroundColor: "#fff",
111
+ backgroundColor: colors.topLabelBgColor || "#fff",
112
+
110
113
  border: isSoldOut
111
114
  ? "1px solid #ccc"
112
115
  : `1px solid ${colors.topLabelColor}`,