kupos-ui-components-lib 2.0.4 → 2.0.6

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 (7) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +11 -12
  3. package/dist/components/ServiceItem/types.d.ts +1 -0
  4. package/dist/styles.css +5 -5
  5. package/package.json +1 -1
  6. package/src/components/ServiceItem/ServiceItemDesktop.tsx +15 -14
  7. package/src/components/ServiceItem/types.ts +2 -1
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, t, }: ServiceItemProps & {
3
+ declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, originIconStyle, t, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -6,8 +6,9 @@ import ModalEventManager from "../../utils/ModalEventManager";
6
6
  import InternationalServicePopupBody from "../InternationalServicePopupBody";
7
7
  import LottiePlayer from "../../assets/LottiePlayer";
8
8
  const SEAT_EXCEPTIONS = ["Asiento mascota"];
9
- function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, t = (key) => key, }) {
9
+ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, originIconStyle, t = (key) => key, }) {
10
10
  var _a, _b, _c, _d, _e, _f, _g;
11
+ console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
11
12
  const SvgAmenities = ({ moreAnemities, name, color, }) => {
12
13
  const amenityKey = name.toLowerCase().replace(/\s/g, "_");
13
14
  const getIconPath = () => {
@@ -194,7 +195,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
194
195
  };
195
196
  const getSeatPrice = () => {
196
197
  const sortedSeatTypes = getSortedSeatTypes();
197
- return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px] bold-text" }, typeof val.price === "string"
198
+ return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof val.price === "string"
198
199
  ? CommonService.currency(val.price, currencySign)
199
200
  : typeof val.price === "number"
200
201
  ? CommonService.currency(val.price, currencySign)
@@ -282,30 +283,28 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
282
283
  const onBookButtonPressHandler = () => {
283
284
  onBookButtonPress();
284
285
  };
285
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip)
286
- ? "mb-[60px]"
287
- : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
286
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
288
287
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
289
288
  showTopLabel
290
289
  ? "mt-[24px]"
291
290
  : "mt-[14px]"} ` },
292
291
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
293
292
  React.createElement("div", { className: "p-[15px]" },
294
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_30%_minmax(0,0.2fr)_25%_15%] gap-x-[4%] items-center" },
293
+ 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" },
295
294
  React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
296
- React.createElement("div", { className: "w-[120px] " },
297
- React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[120px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
295
+ React.createElement("div", { className: " " },
296
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
298
297
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
299
298
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
300
299
  React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
301
300
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
302
301
  React.createElement("div", null,
303
302
  " ",
304
- orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
305
- 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" : ""}` })))),
303
+ orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: " h-auto mr-[8px]", style: { width: originIconStyle ? "16px" : "18px" } },
304
+ React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: ` h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { width: originIconStyle ? "16px" : "18px" } })))),
306
305
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
307
306
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
308
- React.createElement("div", { className: "absolute left-[53%]" }, "\u2022"),
307
+ React.createElement("div", { className: "absolute left-[48%]" }, "\u2022"),
309
308
  React.createElement("div", { className: "font-[900] bold-text group relative" },
310
309
  DateService.formatTime(serviceItem.dep_time),
311
310
  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,7 +316,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
317
316
  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 } })))),
318
317
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
319
318
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
320
- removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[53%]" }, "\u2022")) : null,
319
+ removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[48%]" }, "\u2022")) : null,
321
320
  React.createElement("div", { className: "font-[900] bold-text group relative" },
322
321
  removeArrivalTime
323
322
  ? null
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -158,4 +158,5 @@ export interface ServiceItemProps {
158
158
  showRating?: boolean;
159
159
  showLastSeats?: boolean;
160
160
  removeArrivalTime?: boolean;
161
+ originIconStyle?: boolean;
161
162
  }
package/dist/styles.css CHANGED
@@ -81,12 +81,12 @@
81
81
  .left-\[40px\] {
82
82
  left: 40px;
83
83
  }
84
+ .left-\[48\%\] {
85
+ left: 48%;
86
+ }
84
87
  .left-\[50\%\] {
85
88
  left: 50%;
86
89
  }
87
- .left-\[53\%\] {
88
- left: 53%;
89
- }
90
90
  .left-\[80px\] {
91
91
  left: 80px;
92
92
  }
@@ -388,8 +388,8 @@
388
388
  .cursor-pointer {
389
389
  cursor: pointer;
390
390
  }
391
- .\[grid-template-columns\:12\%_30\%_minmax\(0\,0\.2fr\)_25\%_15\%\] {
392
- grid-template-columns: 12% 30% minmax(0,0.2fr) 25% 15%;
391
+ .\[grid-template-columns\:12\%_28\%_minmax\(0\,0\.2fr\)_29\%_15\%\] {
392
+ grid-template-columns: 12% 28% minmax(0,0.2fr) 29% 15%;
393
393
  }
394
394
  .\[grid-template-columns\:minmax\(0\,1\.4fr\)_minmax\(0\,0\.2fr\)_minmax\(0\,1fr\)_auto\] {
395
395
  grid-template-columns: minmax(0,1.4fr) minmax(0,0.2fr) minmax(0,1fr) auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -27,8 +27,10 @@ function ServiceItemPB({
27
27
  showRating,
28
28
  showLastSeats,
29
29
  removeArrivalTime,
30
+ originIconStyle,
30
31
  t = (key: string) => key,
31
32
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
33
+ console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
32
34
  const SvgAmenities = ({
33
35
  moreAnemities,
34
36
  name,
@@ -295,10 +297,7 @@ function ServiceItemPB({
295
297
  const sortedSeatTypes = getSortedSeatTypes();
296
298
  return sortedSeatTypes.map((val, key: number) =>
297
299
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
298
- <span
299
- key={key}
300
- className="flex items-center justify-between text-[13.33px] bold-text"
301
- >
300
+ <span key={key} className="flex items-center text-[13.33px] bold-text">
302
301
  {typeof val.price === "string"
303
302
  ? CommonService.currency(val.price, currencySign)
304
303
  : typeof val.price === "number"
@@ -404,9 +403,7 @@ function ServiceItemPB({
404
403
  return (
405
404
  <div
406
405
  className={`relative ${
407
- serviceItem.offer_text || serviceItem?.is_direct_trip
408
- ? "mb-[60px]"
409
- : "mb-[20px]"
406
+ serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"
410
407
  } ${
411
408
  serviceItem?.is_direct_trip ||
412
409
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -446,14 +443,14 @@ function ServiceItemPB({
446
443
  </div> */}
447
444
 
448
445
  {/* <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]"> */}
449
- <div className="grid text-[#464647] w-full [grid-template-columns:12%_30%_minmax(0,0.2fr)_25%_15%] gap-x-[4%] items-center">
446
+ <div className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center">
450
447
  {/* OPERATOR LOGO */}
451
448
  <div className="flex items-center justify-center m-[auto]">
452
- <div className="w-[120px] ">
449
+ <div className=" ">
453
450
  <img
454
451
  src={serviceItem.operator_details[0]}
455
452
  alt="service logo"
456
- className={`w-[120px] h-auto object-contain ${
453
+ className={` h-auto object-contain ${
457
454
  isSoldOut ? "grayscale" : ""
458
455
  }`}
459
456
  />
@@ -481,13 +478,17 @@ function ServiceItemPB({
481
478
  {orignLabel ? (
482
479
  <div className="w-[60px]">{orignLabel}</div>
483
480
  ) : (
484
- <div className="w-[18px] h-auto mr-[8px]">
481
+ <div
482
+ className=" h-auto mr-[8px]"
483
+ style={{ width: originIconStyle ? "16px" : "18px" }}
484
+ >
485
485
  <img
486
486
  src={serviceItem.icons?.origin}
487
487
  alt="origin"
488
- className={`w-[18px] h-auto mr-[8px] ${
488
+ className={` h-auto mr-[8px] ${
489
489
  isSoldOut ? "grayscale" : ""
490
490
  }`}
491
+ style={{ width: originIconStyle ? "16px" : "18px" }}
491
492
  />
492
493
  </div>
493
494
  )}
@@ -501,7 +502,7 @@ function ServiceItemPB({
501
502
  {DateService.getServiceItemDate(serviceItem.travel_date)}
502
503
  </span>
503
504
 
504
- <div className="absolute left-[53%]">•</div>
505
+ <div className="absolute left-[48%]">•</div>
505
506
  <div className="font-[900] bold-text group relative">
506
507
  {DateService.formatTime(serviceItem.dep_time)}
507
508
 
@@ -608,7 +609,7 @@ function ServiceItemPB({
608
609
  </span>
609
610
 
610
611
  {removeArrivalTime ? null : serviceItem.arr_time ? (
611
- <div className="absolute left-[53%]">•</div>
612
+ <div className="absolute left-[48%]">•</div>
612
613
  ) : null}
613
614
  <div className="font-[900] bold-text group relative">
614
615
  {removeArrivalTime
package/src/components/ServiceItem/types.ts CHANGED
@@ -152,5 +152,6 @@ export interface ServiceItemProps {
152
152
  isCiva?: boolean;
153
153
  showRating?: boolean;
154
154
  showLastSeats?: boolean
155
- removeArrivalTime?: boolean
155
+ removeArrivalTime?: boolean;
156
+ originIconStyle?:boolean;
156
157
  }