kupos-ui-components-lib 6.0.3 → 6.0.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 (8) hide show
  1. package/dist/components/FilterBar/ServiceFilter.js +28 -29
  2. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +3 -3
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +52 -48
  4. package/dist/styles.css +81 -18
  5. package/package.json +1 -1
  6. package/src/components/FilterBar/ServiceFilter.tsx +113 -106
  7. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +3 -3
  8. package/src/components/ServiceItem/ServiceItemDesktop.tsx +146 -16
package/dist/components/FilterBar/ServiceFilter.js CHANGED
@@ -123,19 +123,23 @@ class ServiceFilter extends React.Component {
123
123
  ((option === null || option === void 0 ? void 0 : option.type) === "tipo" && this.props.isTrain) ||
124
124
  !this.props.isTrain;
125
125
  return (React.createElement("div", { key: key },
126
- shouldShowHeader && (React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[16px]" },
126
+ shouldShowHeader && (React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[13px] mb-[5px]" },
127
127
  this.props.t("RESULTS_PAGE." + option.title),
128
128
  React.createElement("img", { src: this.props.icons.downArrow, alt: "downArrow", className: `${isOpen ? "rotate-180" : ""} w-[auto] h-[9px] transition-all duration-300 cursor-pointer` }))),
129
- (isOpen ||
130
- (!this.props.isTrain &&
131
- option.type !== "operator" &&
132
- option.type !== "time" &&
133
- option.type !== "seat_types" &&
134
- option.type !== "tipo" &&
135
- option.type !== "special_departure" &&
136
- option.type !== "train_type" &&
137
- option.type !== "amenities")) &&
138
- option.options.map((val, i) => {
129
+ React.createElement("div", { className: `grid transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out ${isOpen ||
130
+ (!this.props.isTrain &&
131
+ ![
132
+ "operator",
133
+ "time",
134
+ "seat_types",
135
+ "tipo",
136
+ "special_departure",
137
+ "train_type",
138
+ "amenities",
139
+ ].includes(option.type))
140
+ ? "grid-rows-[1fr] opacity-100"
141
+ : "grid-rows-[0fr] opacity-0 mt-0"}` },
142
+ React.createElement("div", { className: "overflow-hidden" }, option.options.map((val, i) => {
139
143
  var _a, _b, _c, _d, _e, _f, _g, _h;
140
144
  let iconKey = "";
141
145
  if (val.icon === "sunrise") {
@@ -200,32 +204,25 @@ class ServiceFilter extends React.Component {
200
204
  ? val.spText
201
205
  : val.label;
202
206
  }
203
- return (React.createElement("div", { key: i, onClick: () => onClick(i), style: {
204
- margin: "3px 0",
205
- backgroundColor: val.active
206
- ? this.props.colors.selectedColor
207
- : "",
208
- padding: "2px 6px",
209
- paddingLeft: val.active ? "11px" : "",
210
- marginLeft: val.active ? "-10px" : "",
211
- color: val.active ? this.props.colors.selectedTextColor : "",
212
- }, className: `flex items-center h-[24px] rounded-[15px] cursor-pointer pt-[4px] ${val.active ? "bold-text" : ""}` },
213
- val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px]" })),
214
- label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()));
215
- })));
207
+ return (React.createElement("div", { key: i, onClick: () => onClick(i), className: `group flex items-center h-[20px] rounded-[10px] cursor-pointer mt-[4px] transition-all duration-200 hover:bg-black/5 active:bg-black/10 ${val.active ? "bold-text text-[#ff8c00]" : ""}` },
208
+ val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[18px] h-[18px] mr-[10px] transition-transform duration-300 group-hover:scale-110" })),
209
+ React.createElement("span", { className: "truncate" }, label.charAt(0).toUpperCase() +
210
+ label.slice(1).toLowerCase())));
211
+ })))));
216
212
  }
217
213
  render() {
218
214
  var _a, _b;
219
215
  const { onFilterSelected } = this.props;
220
216
  const { sortedFilters } = this.state;
221
- return (React.createElement("div", null,
217
+ const hasActiveFilters = this.showClearFilter();
218
+ return (React.createElement("div", { className: "relative" },
222
219
  React.createElement("div", { style: {
223
220
  overflowY: "scroll",
224
221
  scrollbarWidth: "none",
225
222
  boxShadow: "none",
226
223
  border: "1px solid #ddd",
227
224
  zIndex: "9",
228
- }, className: "p-[16px_20px] relative mb-[30px] max-h-[66vh] rounded-[20px] bg-[#fff]" },
225
+ }, className: "p-[16px_20px] relative mb-[20px] max-h-[66vh] rounded-[20px] bg-[#fff]" },
229
226
  React.createElement("span", { className: "text-[17.33px] bold-text flex justify-center mt-[20px]" }, (_a = this.props.translation) === null || _a === void 0 ? void 0 : _a.filterHeader),
230
227
  React.createElement("div", { className: "text-[13.33px] pb-[10px]" }, sortedFilters === null || sortedFilters === void 0 ? void 0 : sortedFilters.map((val, key) => {
231
228
  var _a;
@@ -233,9 +230,11 @@ class ServiceFilter extends React.Component {
233
230
  ? this.renderFilterItem(val, (i) => onFilterSelected(key, i), key)
234
231
  : null;
235
232
  }))),
236
- this.showClearFilter() && (React.createElement("div", { onClick: this.clearFilter, className: "text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[1px] rounded-b-[10px]" },
237
- React.createElement("img", { src: this.props.icons.removeFilterIcon, alt: "removeFilterIcon", className: "w-[16px] h-[16px] mr-[10px]" }), (_b = this.props.translation) === null || _b === void 0 ? void 0 :
238
- _b.removeFilters))));
233
+ React.createElement("div", { onClick: this.clearFilter, className: `group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${hasActiveFilters
234
+ ? "translate-y-0 opacity-100"
235
+ : "translate-y-[-10px] opacity-0 pointer-events-none"}` },
236
+ React.createElement("img", { src: this.props.icons.removeFilterIcon, alt: "removeFilterIcon", className: "w-[16px] h-[16px] mr-[10px] transition-transform duration-300 group-hover:scale-110" }), (_b = this.props.translation) === null || _b === void 0 ? void 0 :
237
+ _b.removeFilters)));
239
238
  }
240
239
  }
241
240
  export default ServiceFilter;
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -112,7 +112,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
112
112
  return (React.createElement(React.Fragment, null,
113
113
  React.createElement("div", { className: "mt-3 border-b border-[#ccc] pb-3 text-[13.33px]" },
114
114
  React.createElement("div", { className: "summary-details-card" },
115
- React.createElement("div", { className: "" }, serviceName),
115
+ React.createElement("div", { className: "text-[14px] bold-text" }, serviceName),
116
116
  isTrain && (React.createElement("div", { className: "", style: { marginTop: 8 } }, trainType)),
117
117
  date && (React.createElement("div", { className: " mt-2 capitalize bold-text" }, DateService.getDayNameFromDate(date) +
118
118
  ", " +
@@ -126,7 +126,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
126
126
  React.createElement("div", { className: "w-5 h-5 rounded-full flex items-center justify-center mr-2" },
127
127
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.origin, className: "w-[16px] h-[16px] mr-[5px]" })),
128
128
  React.createElement("span", { className: "bold-text capitalize" }, source)),
129
- React.createElement("div", { className: "ml-7 text-xs mt-[5px]" },
129
+ React.createElement("div", { className: "ml-7 text-xs mt-[5px]", style: { lineHeight: 1.3 } },
130
130
  boardingStage,
131
131
  ". ",
132
132
  boardingTime && isLinatal ? (boardingTime.includes("AM") || boardingTime.includes("PM") ? (React.createElement("span", null,
@@ -150,7 +150,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
150
150
  React.createElement("div", { className: "w-5 h-5 rounded-full flex items-center justify-center mr-2" },
151
151
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.destination, className: "w-[16px] h-[16px] mr-[5px]" })),
152
152
  React.createElement("span", { className: "bold-text capitalize" }, dest)),
153
- React.createElement("div", { className: "ml-7 text-xs mt-[5px]" },
153
+ React.createElement("div", { className: "ml-7 text-xs mt-[5px]", style: { lineHeight: 1.3 } },
154
154
  droppingStage,
155
155
  ". ",
156
156
  droppingTime && isLinatal ? (droppingTime.includes("AM") || droppingTime.includes("PM") ? (React.createElement("span", null,
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -14,7 +14,8 @@ import petFriendlyAnimation from "../../assets/images/anims/service_list/pet_fri
14
14
  import priorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
15
15
  const SEAT_EXCEPTIONS = ["Asiento mascota"];
16
16
  function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, flexibleIcon, locationAnim, directoAnim, petFriendlyAnim, priorityStageAnim, promoAnim, t = (key) => key, }) {
17
- var _a, _b, _c, _d, _e, _f, _g;
17
+ var _a, _b, _c;
18
+ console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem, metaData);
18
19
  const getAnimationIcon = (icon) => {
19
20
  if (icon === "promoAnim") {
20
21
  return promoAnimation;
@@ -437,7 +438,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
437
438
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
438
439
  showTopLabel
439
440
  ? "mt-[24px]"
440
- : "mt-[14px]"} ` },
441
+ : "mt-[20px]"} ` },
441
442
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
442
443
  React.createElement("div", { className: "p-[15px] pt-[20px]" },
443
444
  React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_32%_0.5%_24%_13.5%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
@@ -521,7 +522,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
521
522
  React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 || removeDuplicateSeats
522
523
  ? { alignItems: "center" }
523
524
  : {} },
524
- React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
525
+ React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "15px" } }, getSeatNames()),
525
526
  React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
526
527
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
527
528
  top: 0,
@@ -532,6 +533,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
532
533
  justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
533
534
  ? "center"
534
535
  : "",
536
+ gap: "15px",
535
537
  } }, getSeatPrice()))),
536
538
  React.createElement("div", null,
537
539
  React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut
@@ -604,51 +606,53 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
604
606
  , {
605
607
  // animationData={serviceItem.icons.locationAnim}
606
608
  animationData: getAnimationIcon(locationAnim), width: "20px", height: "20px" }))))),
607
- React.createElement("div", null, metaData && serviceItem.operator_details[4] && (React.createElement("div", { className: "flex items-center gap-[6px]" },
608
- (((_d = serviceItem.operator_details[3]) === null || _d === void 0 ? void 0 : _d.includes("18"))
609
- ? [...serviceItem.operator_details[4], "18"]
610
- : serviceItem.operator_details[4]).map((val, key) => {
611
- var _a, _b, _c, _d;
612
- return (key < 3 &&
613
- ((_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER") ||
614
- val === "18" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
615
- React.createElement("div", { className: "group" },
616
- React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
617
- React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
618
- React.createElement("div", { className: "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-[13.33px]", style: {
619
- backgroundColor: colors.tooltipColor,
620
- zIndex: 21,
621
- padding: "12px",
622
- } },
623
- React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
624
- borderBottomColor: colors.tooltipColor,
625
- } }),
626
- getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
627
- }),
628
- ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
629
- React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold group", style: {
630
- alignItems: "flex-end",
631
- marginTop: "3px",
632
- } },
633
- React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
634
- "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
635
- React.createElement("div", { style: { zIndex: 100 }, className: "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-[13.33px]" },
636
- React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
637
- borderBottomColor: colors.tooltipColor,
638
- } }),
639
- React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
640
- backgroundColor: colors.tooltipColor,
641
- padding: "1rem",
642
- } }, metaData &&
643
- ((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
644
- var _a, _b, _c, _d, _e, _f, _g;
645
- // Show all amenities with index 3 or higher, excluding WATER
646
- return key >= 3 &&
647
- ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] whitespace-nowrap text-[13.33px]" },
648
- React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
649
- React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
650
- React.createElement("span", { className: "text-white text-xs" }, getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
651
- })))))))))))))),
609
+ React.createElement("div", null, metaData &&
610
+ serviceItem.operator_details[4] &&
611
+ (() => {
612
+ var _a;
613
+ const PRIORITY_IDS = ["2", "3", "13"];
614
+ const sortedAmenities = [
615
+ ...serviceItem.operator_details[4],
616
+ ].sort((a, b) => Number(PRIORITY_IDS.includes(b)) -
617
+ Number(PRIORITY_IDS.includes(a)));
618
+ return (React.createElement("div", { className: "flex items-center gap-[6px]" },
619
+ sortedAmenities.map((val, key) => {
620
+ var _a, _b, _c, _d, _e, _f, _g;
621
+ return key < 3 &&
622
+ ((_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
623
+ React.createElement("div", { className: "group" },
624
+ React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
625
+ React.createElement(SvgAmenities, { moreAnemities: false, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toLowerCase() })),
626
+ React.createElement("div", { className: "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-[13.33px]", style: {
627
+ backgroundColor: colors.tooltipColor,
628
+ zIndex: 21,
629
+ padding: "12px",
630
+ } },
631
+ React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
632
+ borderBottomColor: colors.tooltipColor,
633
+ } }),
634
+ getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))))) : null;
635
+ }),
636
+ sortedAmenities.length > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
637
+ React.createElement("div", { className: "group" },
638
+ React.createElement("img", { src: ((_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.plus) ||
639
+ "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
640
+ React.createElement("div", { style: { zIndex: 100 }, className: "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-[13.33px]" },
641
+ React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
642
+ borderBottomColor: colors.tooltipColor,
643
+ } }),
644
+ React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
645
+ backgroundColor: colors.tooltipColor,
646
+ padding: "1rem",
647
+ } }, sortedAmenities.map((val, key) => {
648
+ var _a, _b, _c, _d, _e, _f, _g;
649
+ return key >= 3 &&
650
+ ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
651
+ React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
652
+ React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
653
+ getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))) : null;
654
+ }))))))));
655
+ })()))))),
652
656
  children,
653
657
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
654
658
  backgroundColor: isSoldOut
package/dist/styles.css CHANGED
@@ -1,5 +1,8 @@
1
1
  /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
+ .pointer-events-none {
4
+ pointer-events: none;
5
+ }
3
6
  .absolute {
4
7
  position: absolute;
5
8
  }
@@ -54,15 +57,15 @@
54
57
  .top-\[88\%\] {
55
58
  top: 88%;
56
59
  }
57
- .-bottom-\[1px\] {
58
- bottom: calc(1px * -1);
59
- }
60
60
  .-bottom-\[9\%\] {
61
61
  bottom: calc(9% * -1);
62
62
  }
63
63
  .-bottom-\[10\%\] {
64
64
  bottom: calc(10% * -1);
65
65
  }
66
+ .-bottom-\[30px\] {
67
+ bottom: calc(30px * -1);
68
+ }
66
69
  .-bottom-\[35px\] {
67
70
  bottom: calc(35px * -1);
68
71
  }
@@ -150,21 +153,24 @@
150
153
  .mt-\[2px\] {
151
154
  margin-top: 2px;
152
155
  }
156
+ .mt-\[4px\] {
157
+ margin-top: 4px;
158
+ }
153
159
  .mt-\[5px\] {
154
160
  margin-top: 5px;
155
161
  }
156
162
  .mt-\[10px\] {
157
163
  margin-top: 10px;
158
164
  }
165
+ .mt-\[13px\] {
166
+ margin-top: 13px;
167
+ }
159
168
  .mt-\[14px\] {
160
169
  margin-top: 14px;
161
170
  }
162
171
  .mt-\[15px\] {
163
172
  margin-top: 15px;
164
173
  }
165
- .mt-\[16px\] {
166
- margin-top: 16px;
167
- }
168
174
  .mt-\[20px\] {
169
175
  margin-top: 20px;
170
176
  }
@@ -204,6 +210,9 @@
204
210
  .mb-\[4px\] {
205
211
  margin-bottom: 4px;
206
212
  }
213
+ .mb-\[5px\] {
214
+ margin-bottom: 5px;
215
+ }
207
216
  .mb-\[8px\] {
208
217
  margin-bottom: 8px;
209
218
  }
@@ -219,9 +228,6 @@
219
228
  .mb-\[20px\] {
220
229
  margin-bottom: 20px;
221
230
  }
222
- .mb-\[30px\] {
223
- margin-bottom: 30px;
224
- }
225
231
  .mb-\[50px\] {
226
232
  margin-bottom: 50px;
227
233
  }
@@ -297,9 +303,6 @@
297
303
  .h-\[20px\] {
298
304
  height: 20px;
299
305
  }
300
- .h-\[24px\] {
301
- height: 24px;
302
- }
303
306
  .h-\[100\%\] {
304
307
  height: 100%;
305
308
  }
@@ -391,6 +394,10 @@
391
394
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
392
395
  translate: var(--tw-translate-x) var(--tw-translate-y);
393
396
  }
397
+ .translate-y-\[-10px\] {
398
+ --tw-translate-y: -10px;
399
+ translate: var(--tw-translate-x) var(--tw-translate-y);
400
+ }
394
401
  .rotate-180 {
395
402
  rotate: 180deg;
396
403
  }
@@ -427,6 +434,12 @@
427
434
  .grid-cols-\[26px_auto_26\%_1fr\] {
428
435
  grid-template-columns: 26px auto 26% 1fr;
429
436
  }
437
+ .grid-rows-\[0fr\] {
438
+ grid-template-rows: 0fr;
439
+ }
440
+ .grid-rows-\[1fr\] {
441
+ grid-template-rows: 1fr;
442
+ }
430
443
  .flex-col {
431
444
  flex-direction: column;
432
445
  }
@@ -487,6 +500,11 @@
487
500
  -moz-column-gap: 7rem;
488
501
  column-gap: 7rem;
489
502
  }
503
+ .truncate {
504
+ overflow: hidden;
505
+ text-overflow: ellipsis;
506
+ white-space: nowrap;
507
+ }
490
508
  .overflow-hidden {
491
509
  overflow: hidden;
492
510
  }
@@ -502,9 +520,6 @@
502
520
  .rounded-\[14px\] {
503
521
  border-radius: 14px;
504
522
  }
505
- .rounded-\[15px\] {
506
- border-radius: 15px;
507
- }
508
523
  .rounded-\[20px\] {
509
524
  border-radius: 20px;
510
525
  }
@@ -658,9 +673,6 @@
658
673
  .py-\[12px\] {
659
674
  padding-block: 12px;
660
675
  }
661
- .pt-\[4px\] {
662
- padding-top: 4px;
663
- }
664
676
  .pt-\[5px\] {
665
677
  padding-top: 5px;
666
678
  }
@@ -770,6 +782,9 @@
770
782
  .text-\[\#ccc\] {
771
783
  color: #ccc;
772
784
  }
785
+ .text-\[\#ff8c00\] {
786
+ color: #ff8c00;
787
+ }
773
788
  .text-\[\#ff8f45\] {
774
789
  color: #ff8f45;
775
790
  }
@@ -785,6 +800,12 @@
785
800
  .uppercase {
786
801
  text-transform: uppercase;
787
802
  }
803
+ .opacity-0 {
804
+ opacity: 0%;
805
+ }
806
+ .opacity-100 {
807
+ opacity: 100%;
808
+ }
788
809
  .grayscale {
789
810
  --tw-grayscale: grayscale(100%);
790
811
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -792,6 +813,11 @@
792
813
  .filter {
793
814
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
794
815
  }
816
+ .transition-\[grid-template-rows\,opacity\,margin\] {
817
+ transition-property: grid-template-rows,opacity,margin;
818
+ transition-timing-function: var(--tw-ease, ease);
819
+ transition-duration: var(--tw-duration, 0s);
820
+ }
795
821
  .transition-all {
796
822
  transition-property: all;
797
823
  transition-timing-function: var(--tw-ease, ease);
@@ -802,6 +828,15 @@
802
828
  transition-timing-function: var(--tw-ease, ease);
803
829
  transition-duration: var(--tw-duration, 0s);
804
830
  }
831
+ .transition-transform {
832
+ transition-property: transform, translate, scale, rotate;
833
+ transition-timing-function: var(--tw-ease, ease);
834
+ transition-duration: var(--tw-duration, 0s);
835
+ }
836
+ .duration-200 {
837
+ --tw-duration: 200ms;
838
+ transition-duration: 200ms;
839
+ }
805
840
  .duration-300 {
806
841
  --tw-duration: 300ms;
807
842
  transition-duration: 300ms;
@@ -813,6 +848,16 @@
813
848
  }
814
849
  }
815
850
  }
851
+ .group-hover\:scale-110 {
852
+ &:is(:where(.group):hover *) {
853
+ @media (hover: hover) {
854
+ --tw-scale-x: 110%;
855
+ --tw-scale-y: 110%;
856
+ --tw-scale-z: 110%;
857
+ scale: var(--tw-scale-x) var(--tw-scale-y);
858
+ }
859
+ }
860
+ }
816
861
  .hover\:bg-\[\#FFE5E5\] {
817
862
  &:hover {
818
863
  @media (hover: hover) {
@@ -1042,6 +1087,21 @@
1042
1087
  syntax: "*";
1043
1088
  inherits: false;
1044
1089
  }
1090
+ @property --tw-scale-x {
1091
+ syntax: "*";
1092
+ inherits: false;
1093
+ initial-value: 1;
1094
+ }
1095
+ @property --tw-scale-y {
1096
+ syntax: "*";
1097
+ inherits: false;
1098
+ initial-value: 1;
1099
+ }
1100
+ @property --tw-scale-z {
1101
+ syntax: "*";
1102
+ inherits: false;
1103
+ initial-value: 1;
1104
+ }
1045
1105
  @layer properties {
1046
1106
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1047
1107
  *, ::before, ::after, ::backdrop {
@@ -1070,6 +1130,9 @@
1070
1130
  --tw-drop-shadow-alpha: 100%;
1071
1131
  --tw-drop-shadow-size: initial;
1072
1132
  --tw-duration: initial;
1133
+ --tw-scale-x: 1;
1134
+ --tw-scale-y: 1;
1135
+ --tw-scale-z: 1;
1073
1136
  }
1074
1137
  }
1075
1138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "6.0.3",
3
+ "version": "6.0.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/FilterBar/ServiceFilter.tsx CHANGED
@@ -194,7 +194,7 @@ class ServiceFilter extends React.Component<
194
194
  {shouldShowHeader && (
195
195
  <div
196
196
  onClick={() => this.toggleFilter(option.type)}
197
- className="bold-text flex items-center justify-between mt-[16px]"
197
+ className="bold-text flex items-center justify-between mt-[13px] mb-[5px]"
198
198
  >
199
199
  {this.props.t("RESULTS_PAGE." + option.title)}
200
200
  <img
@@ -206,99 +206,102 @@ class ServiceFilter extends React.Component<
206
206
  />
207
207
  </div>
208
208
  )}
209
- {(isOpen ||
210
- (!this.props.isTrain &&
211
- option.type !== "operator" &&
212
- option.type !== "time" &&
213
- option.type !== "seat_types" &&
214
- option.type !== "tipo" &&
215
- option.type !== "special_departure" &&
216
- option.type !== "train_type" &&
217
- option.type !== "amenities")) &&
218
- option.options.map((val: any, i: number) => {
219
- let iconKey = "";
220
- if (val.icon === "sunrise") {
221
- iconKey = val.active
222
- ? this.props.icons.iconSunriseOrange
223
- : this.props.icons.iconSunrise;
224
- } else if (val.icon === "morning") {
225
- iconKey = val.active
226
- ? this.props.icons.iconMorningOrange
227
- : this.props.icons.iconMorning;
228
- } else if (val.icon === "sunset") {
229
- iconKey = val.active
230
- ? this.props.icons.iconSunsetOrange
231
- : this.props.icons.iconSunset;
232
- } else if (val.icon === "night") {
233
- iconKey = val.active
234
- ? this.props.icons.iconNightOrange
235
- : this.props.icons.iconNight;
236
- }
237
-
238
- let label = "";
239
- if (val.icon === "night") {
240
- label = this.props.translation?.night;
241
- } else if (val.icon === "morning") {
242
- label = this.props.translation?.morning;
243
- } else if (val.icon === "sunset") {
244
- label = this.props.translation?.sunset;
245
- } else if (val.icon === "sunrise") {
246
- label = this.props.translation?.sunrise;
247
- } else if (val.label === "DIRECT_FILTER") {
248
- label = this.props.translation?.directService;
249
- } else if (val.label === "tipo") {
250
- label = this.props.translation?.tipo;
251
- } else if (val.label === "FLEXIBLE") {
252
- label = this.props.translation?.flexible;
253
- } else if (val.label === "Regular") {
254
- label = "Tren regular";
255
- } else if (val.label === "Expreso") {
256
- label = "Tren express";
257
- } else if (val.label === "PET_FRIENDLY") {
258
- label = this.props.translation?.petFriendly;
259
- } else if (val.label === "cortina divisoria") {
260
- label = "Cortina divisoria";
261
- } else {
262
- // Use translation if available, otherwise use the label
263
- label = val.trText
264
- ? val.trText
265
- : val.spText
266
- ? val.spText
267
- : val.label;
268
- }
209
+ <div
210
+ className={`grid transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out ${
211
+ isOpen ||
212
+ (!this.props.isTrain &&
213
+ ![
214
+ "operator",
215
+ "time",
216
+ "seat_types",
217
+ "tipo",
218
+ "special_departure",
219
+ "train_type",
220
+ "amenities",
221
+ ].includes(option.type))
222
+ ? "grid-rows-[1fr] opacity-100"
223
+ : "grid-rows-[0fr] opacity-0 mt-0"
224
+ }`}
225
+ >
226
+ <div className="overflow-hidden">
227
+ {option.options.map((val: any, i: number) => {
228
+ let iconKey = "";
229
+ if (val.icon === "sunrise") {
230
+ iconKey = val.active
231
+ ? this.props.icons.iconSunriseOrange
232
+ : this.props.icons.iconSunrise;
233
+ } else if (val.icon === "morning") {
234
+ iconKey = val.active
235
+ ? this.props.icons.iconMorningOrange
236
+ : this.props.icons.iconMorning;
237
+ } else if (val.icon === "sunset") {
238
+ iconKey = val.active
239
+ ? this.props.icons.iconSunsetOrange
240
+ : this.props.icons.iconSunset;
241
+ } else if (val.icon === "night") {
242
+ iconKey = val.active
243
+ ? this.props.icons.iconNightOrange
244
+ : this.props.icons.iconNight;
245
+ }
269
246
 
270
- return (
271
- <div
272
- key={i}
273
- onClick={() => onClick(i)}
274
- style={{
275
- margin: "3px 0",
276
- backgroundColor: val.active
277
- ? this.props.colors.selectedColor
278
- : "",
247
+ let label = "";
248
+ if (val.icon === "night") {
249
+ label = this.props.translation?.night;
250
+ } else if (val.icon === "morning") {
251
+ label = this.props.translation?.morning;
252
+ } else if (val.icon === "sunset") {
253
+ label = this.props.translation?.sunset;
254
+ } else if (val.icon === "sunrise") {
255
+ label = this.props.translation?.sunrise;
256
+ } else if (val.label === "DIRECT_FILTER") {
257
+ label = this.props.translation?.directService;
258
+ } else if (val.label === "tipo") {
259
+ label = this.props.translation?.tipo;
260
+ } else if (val.label === "FLEXIBLE") {
261
+ label = this.props.translation?.flexible;
262
+ } else if (val.label === "Regular") {
263
+ label = "Tren regular";
264
+ } else if (val.label === "Expreso") {
265
+ label = "Tren express";
266
+ } else if (val.label === "PET_FRIENDLY") {
267
+ label = this.props.translation?.petFriendly;
268
+ } else if (val.label === "cortina divisoria") {
269
+ label = "Cortina divisoria";
270
+ } else {
271
+ // Use translation if available, otherwise use the label
272
+ label = val.trText
273
+ ? val.trText
274
+ : val.spText
275
+ ? val.spText
276
+ : val.label;
277
+ }
279
278
 
280
- padding: "2px 6px",
281
- paddingLeft: val.active ? "11px" : "",
282
- marginLeft: val.active ? "-10px" : "",
283
- color: val.active ? this.props.colors.selectedTextColor : "",
284
- }}
285
- className={`flex items-center h-[24px] rounded-[15px] cursor-pointer pt-[4px] ${
286
- val.active ? "bold-text" : ""
287
- }`}
288
- >
289
- {val.icon && this.props.icons && (
290
- <img
291
- src={iconKey}
292
- alt={val.icon}
293
- className="w-[20px] h-[20px] mr-[10px]"
294
- />
295
- )}
296
- {/* {commonService.capitalize(label)} */}
279
+ return (
280
+ <div
281
+ key={i}
282
+ onClick={() => onClick(i)}
283
+ className={`group flex items-center h-[20px] rounded-[10px] cursor-pointer mt-[4px] transition-all duration-200 hover:bg-black/5 active:bg-black/10 ${
284
+ val.active ? "bold-text text-[#ff8c00]" : ""
285
+ }`}
286
+ >
287
+ {val.icon && this.props.icons && (
288
+ <img
289
+ src={iconKey}
290
+ alt={val.icon}
291
+ className="w-[18px] h-[18px] mr-[10px] transition-transform duration-300 group-hover:scale-110"
292
+ />
293
+ )}
294
+ {/* {commonService.capitalize(label)} */}
297
295
 
298
- {label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()}
299
- </div>
300
- );
301
- })}
296
+ <span className="truncate">
297
+ {label.charAt(0).toUpperCase() +
298
+ label.slice(1).toLowerCase()}
299
+ </span>
300
+ </div>
301
+ );
302
+ })}
303
+ </div>
304
+ </div>
302
305
  </div>
303
306
  );
304
307
  }
@@ -306,8 +309,9 @@ class ServiceFilter extends React.Component<
306
309
  render() {
307
310
  const { onFilterSelected } = this.props;
308
311
  const { sortedFilters } = this.state;
312
+ const hasActiveFilters = this.showClearFilter();
309
313
  return (
310
- <div>
314
+ <div className="relative">
311
315
  <div
312
316
  style={{
313
317
  overflowY: "scroll",
@@ -316,7 +320,7 @@ class ServiceFilter extends React.Component<
316
320
  border: "1px solid #ddd",
317
321
  zIndex: "9",
318
322
  }}
319
- className="p-[16px_20px] relative mb-[30px] max-h-[66vh] rounded-[20px] bg-[#fff]"
323
+ className="p-[16px_20px] relative mb-[20px] max-h-[66vh] rounded-[20px] bg-[#fff]"
320
324
  >
321
325
  <span className="text-[17.33px] bold-text flex justify-center mt-[20px]">
322
326
  {this.props.translation?.filterHeader}
@@ -333,19 +337,22 @@ class ServiceFilter extends React.Component<
333
337
  )}
334
338
  </div>
335
339
  </div>
336
- {this.showClearFilter() && (
337
- <div
338
- onClick={this.clearFilter}
339
- className="text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[1px] rounded-b-[10px]"
340
- >
341
- <img
342
- src={this.props.icons.removeFilterIcon}
343
- alt="removeFilterIcon"
344
- className="w-[16px] h-[16px] mr-[10px]"
345
- />
346
- {this.props.translation?.removeFilters}
347
- </div>
348
- )}
340
+
341
+ <div
342
+ onClick={this.clearFilter}
343
+ className={`group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${
344
+ hasActiveFilters
345
+ ? "translate-y-0 opacity-100"
346
+ : "translate-y-[-10px] opacity-0 pointer-events-none"
347
+ }`}
348
+ >
349
+ <img
350
+ src={this.props.icons.removeFilterIcon}
351
+ alt="removeFilterIcon"
352
+ className="w-[16px] h-[16px] mr-[10px] transition-transform duration-300 group-hover:scale-110"
353
+ />
354
+ {this.props.translation?.removeFilters}
355
+ </div>
349
356
  </div>
350
357
  );
351
358
  }
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -153,7 +153,7 @@ const renderSummaryDetailsCard = ({
153
153
  <div className="mt-3 border-b border-[#ccc] pb-3 text-[13.33px]">
154
154
  <div className="summary-details-card">
155
155
  {/* Service Name */}
156
- <div className="">{serviceName}</div>
156
+ <div className="text-[14px] bold-text">{serviceName}</div>
157
157
  {isTrain && (
158
158
  <div className="" style={{ marginTop: 8 }}>
159
159
  {trainType}
@@ -185,7 +185,7 @@ const renderSummaryDetailsCard = ({
185
185
  </div>
186
186
  <span className="bold-text capitalize">{source}</span>
187
187
  </div>
188
- <div className="ml-7 text-xs mt-[5px]">
188
+ <div className="ml-7 text-xs mt-[5px]" style={{ lineHeight: 1.3 }}>
189
189
  {boardingStage}. {/* {boardingTime && `. ${boardingTime}`} */}
190
190
  {boardingTime && isLinatal ? (
191
191
  boardingTime.includes("AM") || boardingTime.includes("PM") ? (
@@ -227,7 +227,7 @@ const renderSummaryDetailsCard = ({
227
227
  </div>
228
228
  <span className="bold-text capitalize">{dest}</span>
229
229
  </div>
230
- <div className="ml-7 text-xs mt-[5px]">
230
+ <div className="ml-7 text-xs mt-[5px]" style={{ lineHeight: 1.3 }}>
231
231
  {droppingStage}. {/* {droppingTime && `. ${droppingTime}`} */}
232
232
  {droppingTime && isLinatal ? (
233
233
  droppingTime.includes("AM") || droppingTime.includes("PM") ? (
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -47,6 +47,7 @@ function ServiceItemPB({
47
47
  promoAnim,
48
48
  t = (key: string) => key,
49
49
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
50
+ console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem, metaData);
50
51
  const getAnimationIcon = (icon: string) => {
51
52
  if (icon === "promoAnim") {
52
53
  return promoAnimation;
@@ -615,7 +616,7 @@ function ServiceItemPB({
615
616
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
616
617
  showTopLabel
617
618
  ? "mt-[24px]"
618
- : "mt-[14px]"
619
+ : "mt-[20px]"
619
620
  } `}
620
621
  >
621
622
  <div
@@ -939,7 +940,10 @@ function ServiceItemPB({
939
940
  : {}
940
941
  }
941
942
  >
942
- <div className="flex flex-col justify-between">
943
+ <div
944
+ className="flex flex-col justify-between"
945
+ style={{ gap: "15px" }}
946
+ >
943
947
  {getSeatNames()}
944
948
  </div>
945
949
  <div
@@ -955,6 +959,7 @@ function ServiceItemPB({
955
959
  getNumberOfSeats() < 2 || removeDuplicateSeats
956
960
  ? "center"
957
961
  : "",
962
+ gap: "15px",
958
963
  }}
959
964
  >
960
965
  {getSeatPrice()}
@@ -1163,9 +1168,145 @@ function ServiceItemPB({
1163
1168
  )}
1164
1169
  </div>
1165
1170
  <div>
1166
- {metaData && serviceItem.operator_details[4] && (
1171
+ {metaData &&
1172
+ serviceItem.operator_details[4] &&
1173
+ (() => {
1174
+ const PRIORITY_IDS = ["2", "3", "13"];
1175
+
1176
+ const sortedAmenities = [
1177
+ ...serviceItem.operator_details[4],
1178
+ ].sort(
1179
+ (a: string, b: string) =>
1180
+ Number(PRIORITY_IDS.includes(b)) -
1181
+ Number(PRIORITY_IDS.includes(a))
1182
+ );
1183
+
1184
+ return (
1185
+ <div className="flex items-center gap-[6px]">
1186
+ {/* Show first three amenities */}
1187
+ {sortedAmenities.map((val, key) => {
1188
+ return key < 3 &&
1189
+ metaData?.amenities[val]
1190
+ ?.split(".")[0]
1191
+ ?.toUpperCase() !== "WATER" ? (
1192
+ <div
1193
+ key={key}
1194
+ className="relative mr-2 cursor-pointer"
1195
+ >
1196
+ <div className="group">
1197
+ <div
1198
+ className={`${
1199
+ isSoldOut ? "grayscale" : ""
1200
+ }`}
1201
+ >
1202
+ <SvgAmenities
1203
+ moreAnemities={false}
1204
+ name={metaData.amenities[val]
1205
+ ?.split(".")[0]
1206
+ ?.toLowerCase()}
1207
+ />
1208
+ </div>
1209
+
1210
+ {/* Tooltip */}
1211
+ <div
1212
+ className="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-[13.33px]"
1213
+ style={{
1214
+ backgroundColor: colors.tooltipColor,
1215
+ zIndex: 21,
1216
+ padding: "12px",
1217
+ }}
1218
+ >
1219
+ <div
1220
+ className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
1221
+ style={{
1222
+ borderBottomColor:
1223
+ colors.tooltipColor,
1224
+ }}
1225
+ />
1226
+ {getAmenityName(
1227
+ metaData.amenities[val]
1228
+ ?.split(".")[0]
1229
+ ?.split("_")
1230
+ ?.join(" ")
1231
+ )}
1232
+ </div>
1233
+ </div>
1234
+ </div>
1235
+ ) : null;
1236
+ })}
1237
+
1238
+ {/* Plus icon for more amenities */}
1239
+ {sortedAmenities.length > 3 && (
1240
+ <div className="relative ml-1 cursor-pointer">
1241
+ <div className="group">
1242
+ <img
1243
+ src={
1244
+ serviceItem.icons?.plus ||
1245
+ "/images/icons/amenities/icon_plus.svg"
1246
+ }
1247
+ className="w-[16px] h-[16px]"
1248
+ alt="plus"
1249
+ />
1250
+
1251
+ <div
1252
+ style={{ zIndex: 100 }}
1253
+ className="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-[13.33px]"
1254
+ >
1255
+ <div
1256
+ className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
1257
+ style={{
1258
+ borderBottomColor: colors.tooltipColor,
1259
+ }}
1260
+ ></div>
1261
+ <div
1262
+ className="flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative"
1263
+ style={{
1264
+ backgroundColor: colors.tooltipColor,
1265
+ padding: "1rem",
1266
+ }}
1267
+ >
1268
+ {/* Remaining amenities */}
1269
+ {sortedAmenities.map((val, key) =>
1270
+ key >= 3 &&
1271
+ metaData.amenities[val]
1272
+ ?.split(".")[0]
1273
+ ?.toUpperCase() !== "WATER" ? (
1274
+ <div
1275
+ key={key}
1276
+ className="flex items-center gap-[5px] text-xs whitespace-nowrap"
1277
+ >
1278
+ <div
1279
+ className={`${
1280
+ isSoldOut ? "grayscale" : ""
1281
+ }`}
1282
+ >
1283
+ <SvgAmenities
1284
+ moreAnemities={true}
1285
+ name={metaData.amenities[val]
1286
+ ?.split(".")[0]
1287
+ ?.toUpperCase()}
1288
+ color="white"
1289
+ />
1290
+ </div>
1291
+ {getAmenityName(
1292
+ metaData.amenities[val]
1293
+ ?.split(".")[0]
1294
+ ?.split("_")
1295
+ ?.join(" ")
1296
+ )}
1297
+ </div>
1298
+ ) : null
1299
+ )}
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+ </div>
1304
+ )}
1305
+ </div>
1306
+ );
1307
+ })()}
1308
+ {/* {metaData && serviceItem.operator_details[4] && (
1167
1309
  <div className="flex items-center gap-[6px]">
1168
- {/* Show first three amenities */}
1169
1310
  {(serviceItem.operator_details[3]?.includes("18")
1170
1311
  ? [...serviceItem.operator_details[4], "18"]
1171
1312
  : serviceItem.operator_details[4]
@@ -1198,7 +1339,6 @@ function ServiceItemPB({
1198
1339
  padding: "12px",
1199
1340
  }}
1200
1341
  >
1201
- {/* Tooltip arrow */}
1202
1342
  <div
1203
1343
  className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
1204
1344
  style={{
@@ -1217,7 +1357,6 @@ function ServiceItemPB({
1217
1357
  ) : null;
1218
1358
  })}
1219
1359
 
1220
- {/* Plus icon for more amenities */}
1221
1360
  {serviceItem.operator_details[4]?.length > 3 && (
1222
1361
  <div className="relative ml-1 cursor-pointer">
1223
1362
  <div
@@ -1252,11 +1391,9 @@ function ServiceItemPB({
1252
1391
  padding: "1rem",
1253
1392
  }}
1254
1393
  >
1255
- {/* Additional amenities */}
1256
1394
  {metaData &&
1257
1395
  serviceItem.operator_details[4]?.map(
1258
1396
  (val, key) => {
1259
- // Show all amenities with index 3 or higher, excluding WATER
1260
1397
  return key >= 3 &&
1261
1398
  metaData.amenities[val]
1262
1399
  ?.split(".")[0]
@@ -1290,20 +1427,13 @@ function ServiceItemPB({
1290
1427
  ) : null;
1291
1428
  }
1292
1429
  )}
1293
- {/* Tooltip arrow */}
1294
- {/* <div
1295
- className="tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent "
1296
- style={{
1297
- borderRightColor: colors.tooltipColor,
1298
- }}
1299
- ></div> */}
1300
1430
  </div>
1301
1431
  </div>
1302
1432
  </div>
1303
1433
  </div>
1304
1434
  )}
1305
1435
  </div>
1306
- )}
1436
+ )} */}
1307
1437
  </div>
1308
1438
  {/* </div> */}
1309
1439
  </div>