kupos-ui-components-lib 2.0.3 → 2.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 (7) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +10 -10
  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 +14 -11
  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,7 +6,7 @@ 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
11
  const SvgAmenities = ({ moreAnemities, name, color, }) => {
12
12
  const amenityKey = name.toLowerCase().replace(/\s/g, "_");
@@ -194,7 +194,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
194
194
  };
195
195
  const getSeatPrice = () => {
196
196
  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"
197
+ 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
198
  ? CommonService.currency(val.price, currencySign)
199
199
  : typeof val.price === "number"
200
200
  ? CommonService.currency(val.price, currencySign)
@@ -291,21 +291,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
291
291
  : "mt-[14px]"} ` },
292
292
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
293
293
  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" },
294
+ 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
295
  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" : ""}` })),
296
+ React.createElement("div", { className: " " },
297
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
298
298
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
299
299
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
300
300
  React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
301
301
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
302
302
  React.createElement("div", null,
303
303
  " ",
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" : ""}` })))),
304
+ orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: " h-auto mr-[8px]", style: { width: originIconStyle ? "16px" : "18px" } },
305
+ 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
306
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
307
307
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
308
- React.createElement("div", { className: "absolute left-[53%]" }, "\u2022"),
308
+ React.createElement("div", { className: "absolute left-[48%]" }, "\u2022"),
309
309
  React.createElement("div", { className: "font-[900] bold-text group relative" },
310
310
  DateService.formatTime(serviceItem.dep_time),
311
311
  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 } },
@@ -314,10 +314,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
314
314
  isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
315
315
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
316
316
  React.createElement("div", null, destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
317
- React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
317
+ 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
318
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
319
319
  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,
320
+ removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[48%]" }, "\u2022")) : null,
321
321
  React.createElement("div", { className: "font-[900] bold-text group relative" },
322
322
  removeArrivalTime
323
323
  ? 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.3",
3
+ "version": "2.0.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -27,6 +27,7 @@ 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 {
32
33
  const SvgAmenities = ({
@@ -295,10 +296,7 @@ function ServiceItemPB({
295
296
  const sortedSeatTypes = getSortedSeatTypes();
296
297
  return sortedSeatTypes.map((val, key: number) =>
297
298
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
298
- <span
299
- key={key}
300
- className="flex items-center justify-between text-[13.33px] bold-text"
301
- >
299
+ <span key={key} className="flex items-center text-[13.33px] bold-text">
302
300
  {typeof val.price === "string"
303
301
  ? CommonService.currency(val.price, currencySign)
304
302
  : typeof val.price === "number"
@@ -446,14 +444,14 @@ function ServiceItemPB({
446
444
  </div> */}
447
445
 
448
446
  {/* <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">
447
+ <div className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center">
450
448
  {/* OPERATOR LOGO */}
451
449
  <div className="flex items-center justify-center m-[auto]">
452
- <div className="w-[120px] ">
450
+ <div className=" ">
453
451
  <img
454
452
  src={serviceItem.operator_details[0]}
455
453
  alt="service logo"
456
- className={`w-[120px] h-auto object-contain ${
454
+ className={` h-auto object-contain ${
457
455
  isSoldOut ? "grayscale" : ""
458
456
  }`}
459
457
  />
@@ -481,13 +479,17 @@ function ServiceItemPB({
481
479
  {orignLabel ? (
482
480
  <div className="w-[60px]">{orignLabel}</div>
483
481
  ) : (
484
- <div className="w-[18px] h-auto mr-[8px]">
482
+ <div
483
+ className=" h-auto mr-[8px]"
484
+ style={{ width: originIconStyle ? "16px" : "18px" }}
485
+ >
485
486
  <img
486
487
  src={serviceItem.icons?.origin}
487
488
  alt="origin"
488
- className={`w-[18px] h-auto mr-[8px] ${
489
+ className={` h-auto mr-[8px] ${
489
490
  isSoldOut ? "grayscale" : ""
490
491
  }`}
492
+ style={{ width: originIconStyle ? "16px" : "18px" }}
491
493
  />
492
494
  </div>
493
495
  )}
@@ -501,7 +503,7 @@ function ServiceItemPB({
501
503
  {DateService.getServiceItemDate(serviceItem.travel_date)}
502
504
  </span>
503
505
 
504
- <div className="absolute left-[53%]">•</div>
506
+ <div className="absolute left-[48%]">•</div>
505
507
  <div className="font-[900] bold-text group relative">
506
508
  {DateService.formatTime(serviceItem.dep_time)}
507
509
 
@@ -592,6 +594,7 @@ function ServiceItemPB({
592
594
  className={`w-[18px] h-auto mr-[8px] ${
593
595
  isSoldOut ? "grayscale" : ""
594
596
  }`}
597
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
595
598
  />
596
599
  </div>
597
600
  )}
@@ -607,7 +610,7 @@ function ServiceItemPB({
607
610
  </span>
608
611
 
609
612
  {removeArrivalTime ? null : serviceItem.arr_time ? (
610
- <div className="absolute left-[53%]">•</div>
613
+ <div className="absolute left-[48%]">•</div>
611
614
  ) : null}
612
615
  <div className="font-[900] bold-text group relative">
613
616
  {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
  }