kupos-ui-components-lib 3.0.7 → 3.0.9

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 (14) hide show
  1. package/dist/components/FilterBar/FilterBarDesktop.js +0 -1
  2. package/dist/components/FilterBar/ServiceFilter.js +4 -1
  3. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +1 -1
  4. package/dist/components/ServiceItem/RatingHover.js +1 -1
  5. package/dist/components/ServiceItem/ServiceItemDesktop.js +61 -50
  6. package/dist/components/ServiceItem/types.d.ts +1 -0
  7. package/dist/styles.css +17 -8
  8. package/package.json +1 -1
  9. package/src/components/FilterBar/FilterBarDesktop.tsx +0 -1
  10. package/src/components/FilterBar/ServiceFilter.tsx +2 -0
  11. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +1 -0
  12. package/src/components/ServiceItem/RatingHover.tsx +1 -1
  13. package/src/components/ServiceItem/ServiceItemDesktop.tsx +232 -186
  14. package/src/components/ServiceItem/types.ts +1 -0
package/dist/components/FilterBar/FilterBarDesktop.js CHANGED
@@ -396,7 +396,6 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
396
396
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
397
397
  if (activeOptions && activeOptions.length)
398
398
  for (let f of activeOptions) {
399
- console.log("🚀 ~ filterBy ~ f:", f);
400
399
  if (f.active) {
401
400
  if (f.value.toLowerCase().indexOf("salon cama low") > -1) {
402
401
  for (let bt of it.seat_types) {
package/dist/components/FilterBar/ServiceFilter.js CHANGED
@@ -135,7 +135,7 @@ class ServiceFilter extends React.Component {
135
135
  option.type !== "special_departure" &&
136
136
  option.type !== "train_type")) &&
137
137
  option.options.map((val, i) => {
138
- var _a, _b, _c, _d, _e, _f, _g;
138
+ var _a, _b, _c, _d, _e, _f, _g, _h;
139
139
  let iconKey = "";
140
140
  if (val.icon === "sunrise") {
141
141
  iconKey = val.active
@@ -185,6 +185,9 @@ class ServiceFilter extends React.Component {
185
185
  else if (val.label === "Expreso") {
186
186
  label = "Tren express";
187
187
  }
188
+ else if (val.label === "PET_FRIENDLY") {
189
+ label = (_h = this.props.translation) === null || _h === void 0 ? void 0 : _h.petFriendly;
190
+ }
188
191
  else {
189
192
  // Use translation if available, otherwise use the label
190
193
  label = val.trText
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -166,7 +166,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
166
166
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
167
167
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
168
168
  isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: CommonService.currency(agencyFee ? agencyFee : 0, currencySign), currency: "", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.agencyFeePriceColor } })),
169
- walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign) })) : null,
169
+ walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), currency: "" })) : null,
170
170
  virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text " }, `${creditosLabel}(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
171
171
  showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), className: "text-[13.33px]", amount: CommonService.currency(isAgency ? netFareInUsd + agencyFee : netFareInUsd, currencySign), currency: "USD", customStyle: { color: "var(--secondary-color)" } })) : null),
172
172
  React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[9%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
package/dist/components/ServiceItem/RatingHover.js CHANGED
@@ -55,7 +55,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
55
55
  React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45] font9", style: {
56
56
  backgroundColor: colors.ratingBottomColor,
57
57
  } }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[5]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
58
- React.createElement("span", { className: "text-[#464647] bold-text text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
58
+ React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
59
59
  ? serviceItem.operator_details[1].toFixed(1)
60
60
  : serviceItem.operator_details[1])));
61
61
  };
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -143,7 +143,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
143
143
  const sortedStages = hideTime
144
144
  ? [...formattedStages].sort()
145
145
  : [...formattedStages].sort(compareTimings);
146
- return (React.createElement("div", { className: "flex flex-col space-y-3 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key }, hideTime
146
+ return (React.createElement("div", { className: "flex flex-col space-y-3 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key, className: "font-normal", style: { fontWeight: 400 } }, hideTime
147
147
  ? item === null || item === void 0 ? void 0 : item.split("|")[0]
148
148
  : item
149
149
  .replace(/false/g, "")
@@ -294,47 +294,58 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
294
294
  ? "mt-[24px]"
295
295
  : "mt-[14px]"} ` },
296
296
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
297
- React.createElement("div", { className: "p-[15px]" },
298
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
297
+ React.createElement("div", { className: "p-[15px] pt-[20px]" },
298
+ 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" : "" } },
299
299
  React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
300
300
  React.createElement("div", { className: " " },
301
301
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
302
302
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
303
- React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
304
- React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
305
- React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
306
- " ",
307
- orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", null,
308
- React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
309
- React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
310
- React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
311
- React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
312
- React.createElement("div", null, "\u2022"),
313
- React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
314
- DateService.formatTime(serviceItem.dep_time),
315
- serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
316
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
317
- React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))),
318
- isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
319
- React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
320
- destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", null,
321
- React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))),
322
- React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
323
- React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
324
- React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
325
- removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null,
326
- React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
327
- removeArrivalTime
328
- ? null
329
- : serviceItem.arr_time
330
- ? DateService.formatTime(serviceItem.arr_time)
331
- : null,
332
- serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
333
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
334
- borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
335
- } }),
336
- React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) ||
337
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))))),
303
+ React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
304
+ // gridTemplateRows: isCiva ? "1fr" : "1fr 1fr",
305
+ gridTemplateRows: "1fr",
306
+ // gap: isCiva ? "0" : "10px 16px"
307
+ } },
308
+ React.createElement("div", { className: "flex flex-col gap-[10px]" },
309
+ orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
310
+ React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
311
+ !isCiva && (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
312
+ React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
313
+ React.createElement("div", { className: "flex flex-col gap-[10px]" },
314
+ React.createElement("div", { className: "h-[20px] flex items-center group relative" },
315
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date)),
316
+ serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
317
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
318
+ React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
319
+ !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
320
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
321
+ serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
322
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
323
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
324
+ } }),
325
+ React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) ||
326
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))),
327
+ React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
328
+ React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
329
+ React.createElement("div", null, "\u2022")),
330
+ !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
331
+ React.createElement("div", { className: "flex flex-col gap-[10px]" },
332
+ React.createElement("div", { className: "h-[20px] flex items-center group relative" },
333
+ React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time)),
334
+ serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
335
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
336
+ React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
337
+ !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
338
+ React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
339
+ ? null
340
+ : serviceItem.arr_time
341
+ ? DateService.formatTime(serviceItem.arr_time)
342
+ : null),
343
+ serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
344
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
345
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
346
+ } }),
347
+ React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) ||
348
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),
338
349
  React.createElement("div", { style: {
339
350
  width: "1px",
340
351
  height: "2.5rem",
@@ -348,7 +359,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
348
359
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
349
360
  top: 0,
350
361
  bottom: 0,
351
- left: "70%",
362
+ left: "68%",
352
363
  right: 0,
353
364
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
354
365
  } }, getSeatPrice()))),
@@ -361,7 +372,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
361
372
  ? "not-allowed"
362
373
  : "pointer",
363
374
  } },
364
- React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text" },
375
+ React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
365
376
  isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
366
377
  serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
367
378
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
@@ -370,7 +381,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
370
381
  React.createElement("div", { className: "flex items-center " },
371
382
  React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
372
383
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
373
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px] bold-text", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2]))),
384
+ React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2]))),
374
385
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
375
386
  React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
376
387
  React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -459,27 +470,27 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
459
470
  } },
460
471
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
461
472
  React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
462
- React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
463
- showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
473
+ React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
474
+ showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
464
475
  backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
465
476
  } },
466
477
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
467
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "16px", height: "16px" })),
478
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "14px", height: "14px" })),
468
479
  React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
469
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
480
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
470
481
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
471
482
  } },
472
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "16px", height: "16px" }),
483
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
473
484
  React.createElement("div", null, "Conexión"))),
474
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
485
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
475
486
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
476
487
  } },
477
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
488
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "14px", height: "14px" }),
478
489
  React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
479
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
490
+ (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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
480
491
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
481
492
  } },
482
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
493
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "14px", height: "14px" }),
483
494
  React.createElement("div", null, "Tren Express"))))));
484
495
  }
485
496
  export default ServiceItemPB;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -159,4 +159,5 @@ export interface ServiceItemProps {
159
159
  showLastSeats?: boolean;
160
160
  removeArrivalTime?: boolean;
161
161
  originIconStyle?: boolean;
162
+ removeDuplicateSeats?: boolean;
162
163
  }
package/dist/styles.css CHANGED
@@ -18,6 +18,9 @@
18
18
  .-top-\[8px\] {
19
19
  top: calc(8px * -1);
20
20
  }
21
+ .-top-\[11px\] {
22
+ top: calc(11px * -1);
23
+ }
21
24
  .-top-\[13px\] {
22
25
  top: calc(13px * -1);
23
26
  }
@@ -78,9 +81,6 @@
78
81
  .left-\[36\%\] {
79
82
  left: 36%;
80
83
  }
81
- .left-\[40\%\] {
82
- left: 40%;
83
- }
84
84
  .left-\[40px\] {
85
85
  left: 40px;
86
86
  }
@@ -231,9 +231,6 @@
231
231
  .ml-\[10px\] {
232
232
  margin-left: 10px;
233
233
  }
234
- .ml-\[20\%\] {
235
- margin-left: 20%;
236
- }
237
234
  .ml-\[25px\] {
238
235
  margin-left: 25px;
239
236
  }
@@ -394,8 +391,8 @@
394
391
  .cursor-pointer {
395
392
  cursor: pointer;
396
393
  }
397
- .\[grid-template-columns\:12\%_28\%_minmax\(0\,0\.2fr\)_29\%_15\%\] {
398
- grid-template-columns: 12% 28% minmax(0,0.2fr) 29% 15%;
394
+ .\[grid-template-columns\:14\%_32\%_0\.5\%_24\%_13\.5\%\] {
395
+ grid-template-columns: 14% 32% 0.5% 24% 13.5%;
399
396
  }
400
397
  .\[grid-template-columns\:minmax\(0\,1\.4fr\)_minmax\(0\,0\.2fr\)_minmax\(0\,1fr\)_auto\] {
401
398
  grid-template-columns: minmax(0,1.4fr) minmax(0,0.2fr) minmax(0,1fr) auto;
@@ -409,6 +406,9 @@
409
406
  .grid-cols-\[3\.17fr_4\.8fr\] {
410
407
  grid-template-columns: 3.17fr 4.8fr;
411
408
  }
409
+ .grid-cols-\[26px_auto_26\%_1fr\] {
410
+ grid-template-columns: 26px auto 26% 1fr;
411
+ }
412
412
  .flex-col {
413
413
  flex-direction: column;
414
414
  }
@@ -621,6 +621,9 @@
621
621
  .px-\[20px\] {
622
622
  padding-inline: 20px;
623
623
  }
624
+ .py-\[4px\] {
625
+ padding-block: 4px;
626
+ }
624
627
  .py-\[5px\] {
625
628
  padding-block: 5px;
626
629
  }
@@ -690,6 +693,9 @@
690
693
  .text-\[11px\] {
691
694
  font-size: 11px;
692
695
  }
696
+ .text-\[12\.5px\] {
697
+ font-size: 12.5px;
698
+ }
693
699
  .text-\[12px\] {
694
700
  font-size: 12px;
695
701
  }
@@ -754,6 +760,9 @@
754
760
  .capitalize {
755
761
  text-transform: capitalize;
756
762
  }
763
+ .uppercase {
764
+ text-transform: uppercase;
765
+ }
757
766
  .grayscale {
758
767
  --tw-grayscale: grayscale(100%);
759
768
  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,);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "3.0.7",
3
+ "version": "3.0.9",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/FilterBar/FilterBarDesktop.tsx CHANGED
@@ -454,7 +454,6 @@ const FilterBarDesktop = ({
454
454
  filteredRoutes = filteredRoutes.filter((it) => {
455
455
  if (activeOptions && activeOptions.length)
456
456
  for (let f of activeOptions) {
457
- console.log("🚀 ~ filterBy ~ f:", f);
458
457
  if (f.active) {
459
458
  if (f.value.toLowerCase().indexOf("salon cama low") > -1) {
460
459
  for (let bt of it.seat_types) {
package/src/components/FilterBar/ServiceFilter.tsx CHANGED
@@ -254,6 +254,8 @@ class ServiceFilter extends React.Component<
254
254
  label = "Tren regular";
255
255
  } else if (val.label === "Expreso") {
256
256
  label = "Tren express";
257
+ } else if (val.label === "PET_FRIENDLY") {
258
+ label = this.props.translation?.petFriendly;
257
259
  } else {
258
260
  // Use translation if available, otherwise use the label
259
261
  label = val.trText
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -429,6 +429,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
429
429
  <PaymentItem
430
430
  label={walletLabel}
431
431
  amount={CommonService.currency(walletMoney, currencySign)}
432
+ currency=""
432
433
  />
433
434
  ) : null}
434
435
 
package/src/components/ServiceItem/RatingHover.tsx CHANGED
@@ -183,7 +183,7 @@ const RatingHover: React.FC<RatingHoverProps> = ({
183
183
  </div>
184
184
  </div>
185
185
  </div>
186
- <span className="text-[#464647] bold-text text-[13.33px]">
186
+ <span className="text-[#464647] text-[13.33px]">
187
187
  {typeof serviceItem.operator_details[1] === "number"
188
188
  ? serviceItem.operator_details[1].toFixed(1)
189
189
  : serviceItem.operator_details[1]}
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -61,9 +61,8 @@ function ServiceItemPB({
61
61
  style={{
62
62
  filter: color === "white" ? "brightness(0) invert(1)" : "",
63
63
  }}
64
- className={`object-contain ${
65
- moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
66
- }`}
64
+ className={`object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
65
+ }`}
67
66
  />
68
67
  );
69
68
  };
@@ -208,14 +207,14 @@ function ServiceItemPB({
208
207
  return (
209
208
  <div className="flex flex-col space-y-3 text-justify gap-[4px]">
210
209
  {sortedStages.map((item, key) => (
211
- <div key={key}>
210
+ <div key={key} className="font-normal" style={{ fontWeight: 400 }}>
212
211
  {hideTime
213
212
  ? item?.split("|")[0]
214
213
  : item
215
- .replace(/false/g, "")
216
- .replace("true", "")
217
- .replace("|", " |")
218
- .replace("||", " |")}
214
+ .replace(/false/g, "")
215
+ .replace("true", "")
216
+ .replace("|", " |")
217
+ .replace("||", " |")}
219
218
  </div>
220
219
  ))}
221
220
  </div>
@@ -280,9 +279,8 @@ function ServiceItemPB({
280
279
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
281
280
  <span
282
281
  key={key}
283
- className={`flex items-center justify-between text-[13.33px] ${
284
- isSoldOut ? "text-[#c0c0c0]" : ""
285
- }`}
282
+ className={`flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
283
+ }`}
286
284
  >
287
285
  {typeof val.label === "string" || typeof val.label === "number"
288
286
  ? val.label
@@ -302,10 +300,10 @@ function ServiceItemPB({
302
300
  ? CommonService.currency(0, currencySign)
303
301
  : CommonService.currency(val.price, currencySign)
304
302
  : typeof val.price === "number"
305
- ? serviceItem?.available_seats <= 0
306
- ? CommonService.currency(0, currencySign)
307
- : CommonService.currency(val.price, currencySign)
308
- : null}
303
+ ? serviceItem?.available_seats <= 0
304
+ ? CommonService.currency(0, currencySign)
305
+ : CommonService.currency(val.price, currencySign)
306
+ : null}
309
307
  </span>
310
308
  );
311
309
  });
@@ -405,20 +403,18 @@ function ServiceItemPB({
405
403
 
406
404
  return (
407
405
  <div
408
- className={`relative ${
409
- serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
410
- } ${
411
- serviceItem?.is_direct_trip ||
412
- serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
413
- showTopLabel
406
+ className={`relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
407
+ } ${serviceItem?.is_direct_trip ||
408
+ serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
409
+ showTopLabel
414
410
  ? "mt-[24px]"
415
411
  : "mt-[14px]"
416
- } `}
412
+ } `}
417
413
  >
418
414
  <div
419
415
  className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
420
416
  >
421
- <div className="p-[15px]">
417
+ <div className="p-[15px] pt-[20px]">
422
418
  {/* Header with operator info and favorite */}
423
419
  {/* <div className="flex justify-between items-center mb-[15px]">
424
420
  <div className="flex items-center justify-between w-[250px]">
@@ -445,7 +441,7 @@ function ServiceItemPB({
445
441
 
446
442
  {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
447
443
  <div
448
- className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center"
444
+ className="grid text-[#464647] w-full [grid-template-columns:14%_32%_0.5%_24%_13.5%] gap-x-[4%] items-center"
449
445
  style={{ marginTop: showTopLabel ? "8px" : "" }}
450
446
  >
451
447
  {/* OPERATOR LOGO */}
@@ -454,9 +450,8 @@ function ServiceItemPB({
454
450
  <img
455
451
  src={serviceItem.operator_details[0]}
456
452
  alt="service logo"
457
- className={` h-auto object-contain ${
458
- isSoldOut ? "grayscale" : ""
459
- }`}
453
+ className={` h-auto object-contain ${isSoldOut ? "grayscale" : ""
454
+ }`}
460
455
  />
461
456
  </div>
462
457
  {isCiva ? (
@@ -466,148 +461,206 @@ function ServiceItemPB({
466
461
  ) : null}
467
462
  </div>
468
463
 
469
- {/* DATE AND TIME */}
464
+ {/* DATE AND TIME - Grid Layout */}
470
465
  <div
471
- className="min-h-[2.5rem] flex flex-col gap-[10px]"
472
- style={{ justifyContent: isCiva ? "center" : "space-between" }}
473
- >
474
- <div
475
- className={`flex items-center text-[13.33px] justify-between relative ${
476
- isSoldOut ? "text-[#c0c0c0]" : ""
466
+ className={`min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
477
467
  }`}
478
- >
479
- <div className="flex items-center" style={{ flex: 1 }}>
480
- {" "}
481
- {orignLabel ? (
482
- <div className="w-[60px]">{orignLabel}</div>
468
+ style={{
469
+ // gridTemplateRows: isCiva ? "1fr" : "1fr 1fr",
470
+ gridTemplateRows: "1fr",
471
+ // gap: isCiva ? "0" : "10px 16px"
472
+ }}
473
+ >
474
+ {/* ICONS COLUMN */}
475
+ <div className="flex flex-col gap-[10px]">
476
+ {/* Origin Icon */}
477
+ {orignLabel ? (
478
+ <div className="w-[60px] h-[20px] flex items-center">{orignLabel}</div>
479
+ ) : (
480
+ <div className="h-[20px] flex items-center">
481
+ <img
482
+ src={serviceItem.icons?.origin}
483
+ alt="origin"
484
+ className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
485
+ }`}
486
+ />
487
+ </div>
488
+ )}
489
+
490
+ {/* Destination Icon */}
491
+ {!isCiva && (
492
+ destinationLabel ? (
493
+ <div className="w-[60px] h-[20px] flex items-center">{destinationLabel}</div>
483
494
  ) : (
484
- <div>
495
+ <div className="h-[20px] flex items-center">
485
496
  <img
486
- src={serviceItem.icons?.origin}
487
- alt="origin"
488
- className={`w-[18px] h-auto mr-[8px] ${
489
- isSoldOut ? "grayscale" : ""
490
- }`}
491
- // style={{ width: originIconStyle ? "16px" : "18px" }}
497
+ src={serviceItem.icons?.destination}
498
+ className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
499
+ }`}
500
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
492
501
  />
493
502
  </div>
494
- )}
495
- <div
496
- className="flex items-center capitalize relative group items-center justify-between "
497
- style={{ flex: 1 }}
498
- >
499
- <span className="cursor-pointer bold-text">
500
- {DateService.getServiceItemDate(serviceItem.travel_date)}
501
- </span>
502
-
503
- <div className="absolute left-[40%] flex items-center w-[60%]">
504
- <div>•</div>
505
- <div className="font-[900] bold-text group relative ml-[20%]">
506
- {DateService.formatTime(serviceItem.dep_time)}
503
+ )
504
+ )}
505
+ </div>
507
506
 
508
- {serviceItem.boarding_stages && (
509
- <div
510
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
511
- style={{ backgroundColor: colors?.tooltipColor }}
512
- >
513
- <div
514
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
515
- border-t-8 border-b-8 border-r-8
516
- border-t-transparent border-b-transparent"
517
- style={{ borderRightColor: colors?.tooltipColor }}
518
- ></div>
519
- <div className="text-center text-[14px]">
520
- {renderStages(
521
- serviceItem.boarding_stages,
522
- 1,
523
- busStage,
524
- hideBoardingTime(
525
- serviceItem?.api_type || serviceItem?.apiType
526
- )
527
- )}
528
- </div>
529
- </div>
507
+ {/* DATES COLUMN */}
508
+ <div className="flex flex-col gap-[10px]">
509
+ {/* Departure Date */}
510
+ <div className="h-[20px] flex items-center group relative">
511
+ <span className="cursor-pointer bold-text capitalize">
512
+ {DateService.getServiceItemDate(serviceItem.travel_date)}
513
+ </span>
514
+ {serviceItem.boarding_stages && (
515
+ <div
516
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
517
+ style={{ backgroundColor: colors?.tooltipColor }}
518
+ >
519
+ <div
520
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
521
+ border-t-8 border-b-8 border-r-8
522
+ border-t-transparent border-b-transparent"
523
+ style={{ borderRightColor: colors?.tooltipColor }}
524
+ ></div>
525
+ <div className="text-center text-[14px] font-normal" style={{ fontWeight: 400 }}>
526
+ {renderStages(
527
+ serviceItem.boarding_stages,
528
+ 1,
529
+ busStage,
530
+ hideBoardingTime(
531
+ serviceItem?.api_type || serviceItem?.apiType
532
+ )
530
533
  )}
531
534
  </div>
532
535
  </div>
533
- </div>
536
+ )}
534
537
  </div>
535
- </div>
536
- {isCiva ? null : (
537
- <div
538
- className={`flex items-center text-[13.33px] justify-between relative ${
539
- isSoldOut ? "text-[#c0c0c0]" : ""
540
- }`}
541
- >
542
- <div className="flex items-center" style={{ flex: 1 }}>
543
- {destinationLabel ? (
544
- <div className="w-[60px]">{destinationLabel}</div>
545
- ) : (
546
- <div>
547
- <img
548
- src={serviceItem.icons?.destination}
549
- className={`w-[18px] h-auto mr-[8px] ${
550
- isSoldOut ? "grayscale" : ""
551
- }`}
552
- style={{ opacity: isSoldOut ? 0.5 : 1 }}
553
- />
538
+
539
+ {/* Arrival Date */}
540
+ {!isCiva && (
541
+ <div className="h-[20px] flex items-center group relative">
542
+ <span className="cursor-pointer bold-text capitalize">
543
+ {DateService.getServiceItemDate(serviceItem.arrival_date)}
544
+ </span>
545
+ {serviceItem.dropoff_stages && (
546
+ <div
547
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
548
+ style={{ backgroundColor: colors?.tooltipColor }}
549
+ >
550
+ <div
551
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
552
+ border-t-8 border-b-8 border-r-8
553
+ border-t-transparent border-b-transparent"
554
+ style={{
555
+ borderRightColor: colors?.tooltipColor,
556
+ }}
557
+ ></div>
558
+ <div className="text-center text-[14px] font-normal" style={{ fontWeight: 400 }}>
559
+ {renderStages(
560
+ serviceItem.dropoff_stages,
561
+ 2,
562
+ busStage,
563
+ hideBoardingTime(
564
+ serviceItem?.api_type ||
565
+ serviceItem?.apiType
566
+ )
567
+ )}
568
+ </div>
554
569
  </div>
555
570
  )}
571
+ </div>
572
+ )}
573
+ </div>
574
+
575
+ {/* DOTS COLUMN */}
576
+ <div className="flex flex-col gap-[10px] items-center">
577
+ {/* Departure Dot */}
578
+ <div className="h-[20px] flex items-center justify-center">
579
+ <div>•</div>
580
+ </div>
581
+
582
+ {/* Arrival Dot */}
583
+ {!isCiva && (
584
+ <div className="h-[20px] flex items-center justify-center">
585
+ {removeArrivalTime ? null : serviceItem.arr_time ? (
586
+ <div>•</div>
587
+ ) : null}
588
+ </div>
589
+ )}
590
+ </div>
591
+
592
+ {/* TIMES COLUMN */}
593
+ <div className="flex flex-col gap-[10px]">
594
+ {/* Departure Time */}
595
+ <div className="h-[20px] flex items-center group relative">
596
+ <div className="font-[900] bold-text">
597
+ {DateService.formatTime(serviceItem.dep_time)}
598
+ </div>
599
+ {serviceItem.boarding_stages && (
556
600
  <div
557
- className="flex items-center capitalize relative group items-center justify-between "
558
- style={{ flex: 1 }}
601
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
602
+ style={{ backgroundColor: colors?.tooltipColor }}
559
603
  >
560
- <span className="cursor-pointer bold-text">
561
- {DateService.getServiceItemDate(
562
- serviceItem.arrival_date
604
+ <div
605
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
606
+ border-t-8 border-b-8 border-r-8
607
+ border-t-transparent border-b-transparent"
608
+ style={{ borderRightColor: colors?.tooltipColor }}
609
+ ></div>
610
+ <div className="text-center text-[14px] font-normal" style={{ fontWeight: 400 }}>
611
+ {renderStages(
612
+ serviceItem.boarding_stages,
613
+ 1,
614
+ busStage,
615
+ hideBoardingTime(
616
+ serviceItem?.api_type || serviceItem?.apiType
617
+ )
563
618
  )}
564
- </span>
565
-
566
- <div className="absolute left-[40%] flex items-center w-[60%]">
567
- {removeArrivalTime ? null : serviceItem.arr_time ? (
568
- <div>•</div>
569
- ) : null}
570
- <div className="font-[900] bold-text group relative ml-[20%]">
571
- {removeArrivalTime
572
- ? null
573
- : serviceItem.arr_time
574
- ? DateService.formatTime(serviceItem.arr_time)
575
- : null}
619
+ </div>
620
+ </div>
621
+ )}
622
+ </div>
576
623
 
577
- {/* Dropping stage tooltip */}
578
- {serviceItem.dropoff_stages && (
579
- <div
580
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
581
- style={{ backgroundColor: colors?.tooltipColor }}
582
- >
583
- {/* Tooltip arrow */}
584
- <div
585
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
586
- border-t-8 border-b-8 border-r-8
587
- border-t-transparent border-b-transparent"
588
- style={{
589
- borderRightColor: colors?.tooltipColor,
590
- }}
591
- ></div>
592
- <div className="text-center text-[14px]">
593
- {renderStages(
594
- serviceItem.dropoff_stages,
595
- 2,
596
- busStage,
597
- hideBoardingTime(
598
- serviceItem?.api_type ||
599
- serviceItem?.apiType
600
- )
601
- )}
602
- </div>
603
- </div>
624
+ {/* Arrival Time */}
625
+ {!isCiva && (
626
+ <div className="h-[20px] flex items-center group relative">
627
+ <div className="font-[900] bold-text">
628
+ {removeArrivalTime
629
+ ? null
630
+ : serviceItem.arr_time
631
+ ? DateService.formatTime(serviceItem.arr_time)
632
+ : null}
633
+ </div>
634
+ {/* Dropping stage tooltip */}
635
+ {serviceItem.dropoff_stages && (
636
+ <div
637
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
638
+ style={{ backgroundColor: colors?.tooltipColor }}
639
+ >
640
+ <div
641
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
642
+ border-t-8 border-b-8 border-r-8
643
+ border-t-transparent border-b-transparent"
644
+ style={{
645
+ borderRightColor: colors?.tooltipColor,
646
+ }}
647
+ ></div>
648
+ <div className="text-center text-[14px] font-normal" style={{ fontWeight: 400 }}>
649
+ {renderStages(
650
+ serviceItem.dropoff_stages,
651
+ 2,
652
+ busStage,
653
+ hideBoardingTime(
654
+ serviceItem?.api_type ||
655
+ serviceItem?.apiType
656
+ )
604
657
  )}
605
658
  </div>
606
659
  </div>
607
- </div>
660
+ )}
608
661
  </div>
609
- </div>
610
- )}
662
+ )}
663
+ </div>
611
664
  </div>
612
665
  <div
613
666
  style={{
@@ -620,9 +673,8 @@ function ServiceItemPB({
620
673
  {/* SEATS */}
621
674
  <div className="content-center">
622
675
  <div
623
- className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
624
- getNumberOfSeats() < 3 ? "" : ""
625
- }`}
676
+ className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""
677
+ }`}
626
678
  style={getNumberOfSeats() < 2 ? { alignItems: "center" } : {}}
627
679
  >
628
680
  <div className="flex flex-col justify-between">
@@ -634,7 +686,7 @@ function ServiceItemPB({
634
686
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
635
687
  top: 0,
636
688
  bottom: 0,
637
- left: "70%",
689
+ left: "68%",
638
690
  right: 0,
639
691
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
640
692
  }}
@@ -649,9 +701,8 @@ function ServiceItemPB({
649
701
  <button
650
702
  onClick={() => (!isSoldOut ? checkMidnight() : null)}
651
703
  disabled={serviceDetailsLoading}
652
- className={`w-full ${
653
- serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
654
- } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
704
+ className={`w-full ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
705
+ } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
655
706
  style={{
656
707
  backgroundColor:
657
708
  serviceDetailsLoading || isSoldOut
@@ -663,7 +714,7 @@ function ServiceItemPB({
663
714
  : "pointer",
664
715
  }}
665
716
  >
666
- <span className="min-w-[75px] flex justify-center items-center bold-text">
717
+ <span className="min-w-[75px] flex justify-center items-center bold-text uppercase">
667
718
  {isSoldOut ? renderIcon("soldOutIcon", "14px") : null}
668
719
 
669
720
  {serviceDetailsLoading ? (
@@ -694,9 +745,8 @@ function ServiceItemPB({
694
745
  {/* Rating */}
695
746
  <div className="flex items-center ">
696
747
  <div
697
- className={`flex items-center ${isSoldOut ? "grayscale" : ""} ${
698
- showRating ? "cursor-pointer" : ""
699
- }`}
748
+ className={`flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""
749
+ }`}
700
750
  style={{ color: isSoldOut ? "#c0c0c0" : "" }}
701
751
  >
702
752
  {showRating ? (
@@ -709,7 +759,7 @@ function ServiceItemPB({
709
759
  />
710
760
  ) : null}
711
761
  <span
712
- className="ml-[10px] text-[#464647] text-[13.33px] bold-text"
762
+ className="ml-[10px] text-[#464647] text-[13.33px]"
713
763
  style={{ marginLeft: showRating ? "10px" : "0" }}
714
764
  >
715
765
  {serviceItem.operator_details[2]}
@@ -723,16 +773,14 @@ function ServiceItemPB({
723
773
  <div className="flex items-baseline relative text-[#464647]">
724
774
  {/* {renderIcon("duration", "14px")} */}
725
775
  <div
726
- className={`w-[18px] h-auto mr-[4px] ${
727
- isSoldOut ? "grayscale" : ""
728
- }`}
776
+ className={`w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""
777
+ }`}
729
778
  >
730
779
  {renderIcon("hours", "14px")}
731
780
  </div>
732
781
  <div
733
- className={`cursor-default group text-[13.33px] ${
734
- isSoldOut ? "text-[#c0c0c0]" : ""
735
- }`}
782
+ className={`cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
783
+ }`}
736
784
  >
737
785
  {serviceItem.duration} {translation.hours}
738
786
  <div
@@ -751,7 +799,7 @@ function ServiceItemPB({
751
799
  )}
752
800
 
753
801
  {serviceItem.pet_seat_info &&
754
- Object.keys(serviceItem.pet_seat_info).length > 0 ? (
802
+ Object.keys(serviceItem.pet_seat_info).length > 0 ? (
755
803
  <div className="flex items-center text-[13.33px]">
756
804
  <div className={`relative group cursor-default `}>
757
805
  <div className="flex items-center">
@@ -822,9 +870,8 @@ function ServiceItemPB({
822
870
  {serviceItem?.is_tracking_enabled && (
823
871
  <div className="flex items-center mr-[10px]">
824
872
  <div
825
- className={`h-auto mr-[4px] text-[13px] text-[#464647] ${
826
- isSoldOut ? "grayscale" : ""
827
- }`}
873
+ className={`h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""
874
+ }`}
828
875
  >
829
876
  <LottiePlayer
830
877
  animationData={serviceItem.icons.locationAnim}
@@ -922,9 +969,8 @@ function ServiceItemPB({
922
969
  className="flex items-center gap-[5px] whitespace-nowrap text-[13.33px]"
923
970
  >
924
971
  <div
925
- className={`${
926
- isSoldOut ? "grayscale" : ""
927
- }`}
972
+ className={`${isSoldOut ? "grayscale" : ""
973
+ }`}
928
974
  >
929
975
  <SvgAmenities
930
976
  moreAnemities={true}
@@ -988,10 +1034,10 @@ function ServiceItemPB({
988
1034
  </div>
989
1035
  )}
990
1036
 
991
- <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
1037
+ <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
992
1038
  {showTopLabel && (
993
1039
  <div
994
- className={`flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`}
1040
+ className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
995
1041
  style={{
996
1042
  backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
997
1043
  }}
@@ -999,8 +1045,8 @@ function ServiceItemPB({
999
1045
  <div className={isSoldOut ? "grayscale" : ""}>
1000
1046
  <LottiePlayer
1001
1047
  animationData={serviceItem.icons.priorityStageAnim}
1002
- width="16px"
1003
- height="16px"
1048
+ width="14px"
1049
+ height="14px"
1004
1050
  />
1005
1051
  </div>
1006
1052
  <div
@@ -1014,45 +1060,45 @@ function ServiceItemPB({
1014
1060
  )}
1015
1061
  {serviceItem?.is_transpordo && (
1016
1062
  <div
1017
- className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`}
1063
+ className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`}
1018
1064
  style={{
1019
1065
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1020
1066
  }}
1021
1067
  >
1022
1068
  <LottiePlayer
1023
1069
  animationData={serviceItem.icons.connectingServiceIcon}
1024
- width="16px"
1025
- height="16px"
1070
+ width="14px"
1071
+ height="14px"
1026
1072
  />
1027
1073
  <div>{"Conexión"}</div>
1028
1074
  </div>
1029
1075
  )}
1030
1076
  {serviceItem?.is_direct_trip && (
1031
1077
  <div
1032
- className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1078
+ className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
1033
1079
  style={{
1034
1080
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1035
1081
  }}
1036
1082
  >
1037
1083
  <LottiePlayer
1038
1084
  animationData={serviceItem.icons.directoAnim}
1039
- width="16px"
1040
- height="16px"
1085
+ width="14px"
1086
+ height="14px"
1041
1087
  />
1042
1088
  <div>{translation?.directService}</div>
1043
1089
  </div>
1044
1090
  )}
1045
1091
  {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
1046
1092
  <div
1047
- className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1093
+ className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
1048
1094
  style={{
1049
1095
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1050
1096
  }}
1051
1097
  >
1052
1098
  <LottiePlayer
1053
1099
  animationData={serviceItem.icons.directoAnim}
1054
- width="16px"
1055
- height="16px"
1100
+ width="14px"
1101
+ height="14px"
1056
1102
  />
1057
1103
  <div>{"Tren Express"}</div>
1058
1104
  </div>
package/src/components/ServiceItem/types.ts CHANGED
@@ -154,4 +154,5 @@ export interface ServiceItemProps {
154
154
  showLastSeats?: boolean
155
155
  removeArrivalTime?: boolean;
156
156
  originIconStyle?:boolean;
157
+ removeDuplicateSeats?: boolean
157
158
  }