kupos-ui-components-lib 9.2.3 → 9.2.5

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 (10) hide show
  1. package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
  2. package/dist/ui/AmenitiesBlock.js +27 -20
  3. package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts +2 -1
  4. package/dist/ui/mobileweb/BottomAmenitiesMobile.js +3 -3
  5. package/dist/ui/mobileweb/ExpandedDropdownMobile.js +12 -14
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/ServiceItemMobile.tsx +1 -0
  8. package/src/ui/AmenitiesBlock.tsx +23 -37
  9. package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +15 -13
  10. package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +27 -22
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -153,7 +153,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
153
153
  // }}
154
154
  onDropdownToggle: () => {
155
155
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
156
- } })),
156
+ }, isPeru: isPeru })),
157
157
  React.createElement("div", { className: "absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
158
158
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
159
159
  backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
package/dist/ui/AmenitiesBlock.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
3
- const TOOLTIP_CLASS = "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[12px]";
3
+ const TOOLTIP_CLASS = "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[8px] whitespace-nowrap mt-2.5 text-center shadow-service text-[12px]";
4
4
  const getAmenityBaseName = (amenityStr) => {
5
5
  var _a;
6
6
  return (_a = amenityStr === null || amenityStr === void 0 ? void 0 : amenityStr.split(".")[0]) !== null && _a !== void 0 ? _a : "";
@@ -29,7 +29,7 @@ const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
29
29
  };
30
30
  };
31
31
  const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
32
- var _a, _b;
32
+ var _a, _b, _c;
33
33
  if (!metaData ||
34
34
  !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
35
35
  !serviceItem.operator_details[4].length) {
@@ -47,30 +47,37 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
47
47
  });
48
48
  const shouldShowPlus = plusAmenities.length > 0;
49
49
  const grayscaleClass = isSoldOut ? "grayscale" : "";
50
- return (React.createElement("div", { className: "relative flex items-center gap-[6px] group cursor-pointer" },
50
+ return (React.createElement("div", { className: "relative flex items-center gap-[6px]" },
51
51
  visibleAmenities.map((val, key) => {
52
52
  const raw = metaData.amenities[val];
53
53
  if (isWater(raw))
54
54
  return null;
55
55
  const baseName = getAmenityBaseName(raw);
56
- return (React.createElement("div", { key: key, style: { opacity: isSoldOut ? 0.5 : 1 } },
56
+ return (React.createElement("div", { key: key, className: "relative group cursor-pointer", style: { opacity: isSoldOut ? 0.5 : 1 } },
57
57
  React.createElement("div", { className: grayscaleClass },
58
- React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() }))));
58
+ React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
59
+ React.createElement("div", { className: TOOLTIP_CLASS, style: {
60
+ backgroundColor: colors.bottomStripColor,
61
+ zIndex: 21,
62
+ padding: "16px",
63
+ } },
64
+ React.createElement(TooltipArrow, { color: colors.tooltipColor }),
65
+ React.createElement("div", { className: "text-xs whitespace-nowrap" }, getAmenityName(baseName.split("_").join(" "))))));
59
66
  }),
60
- React.createElement("div", { className: TOOLTIP_CLASS, style: {
61
- backgroundColor: colors.bottomStripColor,
62
- zIndex: 21,
63
- padding: "12px",
64
- } },
65
- React.createElement(TooltipArrow, { color: colors.tooltipColor }),
66
- React.createElement("div", { className: "flex flex-col gap-[10px]" }, amenities.map((id, i) => {
67
- const rawItem = metaData.amenities[id];
68
- if (isWater(rawItem))
69
- return null;
70
- const name = getAmenityBaseName(rawItem);
71
- return (React.createElement("div", { key: i, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
72
- React.createElement(SvgAmenities, { moreAnemities: true, name: name.toUpperCase(), color: "white" }),
73
- getAmenityName(name.split("_").join(" "))));
74
- })))));
67
+ shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
68
+ React.createElement("div", { className: "group" },
69
+ React.createElement("img", { src: ((_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.plus) ||
70
+ "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
71
+ React.createElement("div", { style: { zIndex: 100 }, className: TOOLTIP_CLASS },
72
+ React.createElement(TooltipArrow, { color: colors.tooltipColor }),
73
+ React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: { backgroundColor: colors.tooltipColor } }, plusAmenities.map((val, key) => {
74
+ const raw = metaData.amenities[val];
75
+ if (isWater(raw))
76
+ return null;
77
+ const baseName = getAmenityBaseName(raw);
78
+ return (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
79
+ React.createElement(SvgAmenities, { moreAnemities: true, name: baseName.toUpperCase(), color: "white" }),
80
+ getAmenityName(baseName.split("_").join(" "))));
81
+ }))))))));
75
82
  };
76
83
  export default AmenitiesBlock;
package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts CHANGED
@@ -19,6 +19,7 @@ interface BottomAmenitiesMobileProps {
19
19
  setShowDropdown: (val: boolean) => void;
20
20
  onDropdownToggle: () => void;
21
21
  isItemExpanded?: boolean;
22
+ isPeru?: boolean;
22
23
  }
23
- declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, }: BottomAmenitiesMobileProps): React.ReactElement;
24
+ declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, }: BottomAmenitiesMobileProps): React.ReactElement;
24
25
  export default BottomAmenitiesMobile;
package/dist/ui/mobileweb/BottomAmenitiesMobile.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
- function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, }) {
3
+ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, }) {
4
4
  return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
5
5
  React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
6
6
  React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
@@ -25,7 +25,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
25
25
  isTrackingEnabled && (React.createElement("div", { className: "flex items-center mr-[10px]" },
26
26
  React.createElement("div", { className: `h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
27
27
  React.createElement(LottiePlayer, { animationData: locationAnim, width: "16px", height: "16px" }))))))),
28
- React.createElement("div", { onClick: onDropdownToggle },
29
- React.createElement("img", { src: downArrowIcon, alt: "icon", width: 14, height: 14, className: `${showDropdown ? "rotate-180" : ""} transition-transform duration-300` })))));
28
+ isPeru ? null : (React.createElement("div", { onClick: onDropdownToggle },
29
+ React.createElement("img", { src: downArrowIcon, alt: "icon", width: 14, height: 14, className: `${showDropdown ? "rotate-180" : ""} transition-transform duration-300` }))))));
30
30
  }
31
31
  export default BottomAmenitiesMobile;
package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED
@@ -23,26 +23,24 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
23
23
  React.createElement("span", null,
24
24
  React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
25
25
  " Tu pasaje puede ser anulado de forma online",
26
+ React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
27
+ " antes de la salida del bus.")),
28
+ isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
29
+ React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
30
+ React.createElement("span", null,
31
+ React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
32
+ " Tu pasaje puede ser cambiado de manera online",
26
33
  " ",
27
34
  React.createElement("span", { className: "bold-text" },
28
35
  "hasta ",
29
36
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
30
37
  " horas antes"),
31
38
  " ",
32
- "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
33
- isPeru
34
- ? null
35
- : isChangeTicket && (React.createElement("div", { className: "flex gap-[6px]" },
36
- React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
39
+ "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
40
+ React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
41
+ React.createElement("span", null,
37
42
  React.createElement("span", null,
38
- React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
39
- " Tu pasaje puede ser cambiado de manera online",
40
- " ",
41
- React.createElement("span", { className: "bold-text" },
42
- "hasta ",
43
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
44
- " horas antes"),
45
- " ",
46
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
43
+ React.createElement("span", { className: "bold-text" }, "Pol\u00EDtica de cambios:"),
44
+ " Esta empresa no permite cambios de pasajes")))))));
47
45
  }
48
46
  export default ExpandedDropdownMobile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.2.3",
3
+ "version": "9.2.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -327,6 +327,7 @@ function ServiceItemMobile({
327
327
  onDropdownToggle={() => {
328
328
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
329
329
  }}
330
+ isPeru={isPeru}
330
331
  />
331
332
  </div>
332
333
 
package/src/ui/AmenitiesBlock.tsx CHANGED
@@ -4,7 +4,7 @@ import LottiePlayer from "../assets/LottiePlayer";
4
4
  const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
5
5
 
6
6
  const TOOLTIP_CLASS =
7
- "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[12px]";
7
+ "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[8px] whitespace-nowrap mt-2.5 text-center shadow-service text-[12px]";
8
8
 
9
9
  const getAmenityBaseName = (amenityStr) => {
10
10
  return amenityStr?.split(".")[0] ?? "";
@@ -83,7 +83,7 @@ const AmenitiesBlock = ({
83
83
  const grayscaleClass = isSoldOut ? "grayscale" : "";
84
84
 
85
85
  return (
86
- <div className="relative flex items-center gap-[6px] group cursor-pointer">
86
+ <div className="relative flex items-center gap-[6px]">
87
87
  {/* AMENITIES */}
88
88
  {visibleAmenities.map((val, key) => {
89
89
  const raw = metaData.amenities[val];
@@ -91,51 +91,37 @@ const AmenitiesBlock = ({
91
91
  const baseName = getAmenityBaseName(raw);
92
92
 
93
93
  return (
94
- <div key={key} style={{ opacity: isSoldOut ? 0.5 : 1 }}>
94
+ <div
95
+ key={key}
96
+ className="relative group cursor-pointer"
97
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
98
+ >
95
99
  <div className={grayscaleClass}>
96
100
  <SvgAmenities
97
101
  moreAnemities={false}
98
102
  name={baseName.toLowerCase()}
99
103
  />
100
104
  </div>
105
+ {/* Tooltip – show individual amenity label on hover */}
106
+ <div
107
+ className={TOOLTIP_CLASS}
108
+ style={{
109
+ backgroundColor: colors.bottomStripColor,
110
+ zIndex: 21,
111
+ padding: "16px",
112
+ }}
113
+ >
114
+ <TooltipArrow color={colors.tooltipColor} />
115
+ <div className="text-xs whitespace-nowrap">
116
+ {getAmenityName(baseName.split("_").join(" "))}
117
+ </div>
118
+ </div>
101
119
  </div>
102
120
  );
103
121
  })}
104
122
 
105
- {/* Tooltip – show ALL amenities on container hover */}
106
- <div
107
- className={TOOLTIP_CLASS}
108
- style={{
109
- backgroundColor: colors.bottomStripColor,
110
- zIndex: 21,
111
- padding: "12px",
112
- }}
113
- >
114
- <TooltipArrow color={colors.tooltipColor} />
115
- <div className="flex flex-col gap-[10px]">
116
- {amenities.map((id, i) => {
117
- const rawItem = metaData.amenities[id];
118
- if (isWater(rawItem)) return null;
119
- const name = getAmenityBaseName(rawItem);
120
- return (
121
- <div
122
- key={i}
123
- className="flex items-center gap-[5px] text-xs whitespace-nowrap"
124
- >
125
- <SvgAmenities
126
- moreAnemities={true}
127
- name={name.toUpperCase()}
128
- color="white"
129
- />
130
- {getAmenityName(name.split("_").join(" "))}
131
- </div>
132
- );
133
- })}
134
- </div>
135
- </div>
136
-
137
123
  {/* PLUS ICON */}
138
- {/* {shouldShowPlus && (
124
+ {shouldShowPlus && (
139
125
  <div className="relative ml-1 cursor-pointer">
140
126
  <div className="group">
141
127
  <img
@@ -177,7 +163,7 @@ const AmenitiesBlock = ({
177
163
  </div>
178
164
  </div>
179
165
  </div>
180
- )} */}
166
+ )}
181
167
 
182
168
  {/* GPS */}
183
169
  {/* {serviceItem?.is_tracking_enabled && (
package/src/ui/mobileweb/BottomAmenitiesMobile.tsx CHANGED
@@ -21,6 +21,7 @@ interface BottomAmenitiesMobileProps {
21
21
  setShowDropdown: (val: boolean) => void;
22
22
  onDropdownToggle: () => void;
23
23
  isItemExpanded?: boolean;
24
+ isPeru?: boolean;
24
25
  }
25
26
 
26
27
  function BottomAmenitiesMobile({
@@ -43,6 +44,7 @@ function BottomAmenitiesMobile({
43
44
  setShowDropdown,
44
45
  onDropdownToggle,
45
46
  isItemExpanded,
47
+ isPeru,
46
48
  }: BottomAmenitiesMobileProps): React.ReactElement {
47
49
  return (
48
50
  <div className={`${"flex justify-between items-center items-center "}`}>
@@ -148,19 +150,19 @@ function BottomAmenitiesMobile({
148
150
  </div>
149
151
  )}
150
152
  </div>
151
- <div onClick={onDropdownToggle}>
152
- {/* {(isChangeTicket || isPetSeat) && ( */}
153
- <img
154
- src={downArrowIcon}
155
- alt="icon"
156
- width={14}
157
- height={14}
158
- className={`${
159
- showDropdown ? "rotate-180" : ""
160
- } transition-transform duration-300`}
161
- />
162
- {/* )} */}
163
- </div>
153
+ {isPeru ? null : (
154
+ <div onClick={onDropdownToggle}>
155
+ <img
156
+ src={downArrowIcon}
157
+ alt="icon"
158
+ width={14}
159
+ height={14}
160
+ className={`${
161
+ showDropdown ? "rotate-180" : ""
162
+ } transition-transform duration-300`}
163
+ />
164
+ </div>
165
+ )}
164
166
  </div>
165
167
  </div>
166
168
  );
package/src/ui/mobileweb/ExpandedDropdownMobile.tsx CHANGED
@@ -67,30 +67,35 @@ function ExpandedDropdownMobile({
67
67
  <span style={{ marginTop: "2px" }}>•</span>
68
68
  <span>
69
69
  <span className="bold-text">Políticas de anulación:</span> Tu pasaje
70
- puede ser anulado de forma online{" "}
71
- <span className="bold-text">
72
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
73
- </span>{" "}
74
- de la salida del bus. Al anular tu pasaje recibirás una devolución
75
- del 85% del monto de tu compra.
70
+ puede ser anulado de forma online
71
+ <span className="bold-text"> hasta 4 horas antes</span> antes de la
72
+ salida del bus.
76
73
  </span>
77
74
  </div>
78
- {isPeru
79
- ? null
80
- : isChangeTicket && (
81
- <div className="flex gap-[6px]">
82
- <span style={{ marginTop: "2px" }}>•</span>
83
- <span>
84
- <span className="bold-text">Políticas de cambios:</span> Tu
85
- pasaje puede ser cambiado de manera online{" "}
86
- <span className="bold-text">
87
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
88
- </span>{" "}
89
- de la salida del bus. El monto será reembolsado a tu billetera
90
- kupospay.
91
- </span>
92
- </div>
93
- )}
75
+ {isPeru ? null : isChangeTicket ? (
76
+ <div className="flex gap-[6px]">
77
+ <span style={{ marginTop: "2px" }}>•</span>
78
+ <span>
79
+ <span className="bold-text">Políticas de cambios:</span> Tu pasaje
80
+ puede ser cambiado de manera online{" "}
81
+ <span className="bold-text">
82
+ hasta {serviceItem?.change_ticket_hours || 6} horas antes
83
+ </span>{" "}
84
+ de la salida del bus. El monto será reembolsado a tu billetera
85
+ kupospay.
86
+ </span>
87
+ </div>
88
+ ) : (
89
+ <div className="flex gap-[8px] ">
90
+ <span style={{ marginTop: "2px" }}>•</span>
91
+ <span>
92
+ <span>
93
+ <span className="bold-text">Política de cambios:</span> Esta
94
+ empresa no permite cambios de pasajes
95
+ </span>
96
+ </span>
97
+ </div>
98
+ )}
94
99
  </div>
95
100
  </div>
96
101
  );