kupos-ui-components-lib 4.0.8 → 4.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.
- package/dist/components/PaymentOptions/PaymentOptionsDesktop.d.ts +4 -0
- package/dist/components/PaymentOptions/PaymentOptionsDesktop.js +5 -0
- package/dist/components/PaymentOptions/PaymentOptionsMobile.d.ts +4 -0
- package/dist/components/PaymentOptions/PaymentOptionsMobile.js +5 -0
- package/dist/components/PaymentOptions/ResponsivePaymentOptions.d.ts +3 -0
- package/dist/components/PaymentOptions/ResponsivePaymentOptions.js +10 -0
- package/dist/components/PaymentOptions/index.d.ts +5 -0
- package/dist/components/PaymentOptions/index.js +4 -0
- package/dist/components/PaymentOptions/mobileTypes.d.ts +0 -0
- package/dist/components/PaymentOptions/mobileTypes.js +0 -0
- package/dist/components/PaymentOptions/type.d.ts +4 -0
- package/dist/components/PaymentOptions/type.js +1 -0
- package/dist/components/ServiceItem/ServiceItemDesktop.js +35 -22
- package/dist/styles.css +3 -0
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +31 -8
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PaymentOptionsDesktop from "./PaymentOptionsDesktop";
|
|
3
|
+
import PaymentOptionsMobile from "./PaymentOptionsMobile";
|
|
4
|
+
export default function ResponsivePaymentOptions(props) {
|
|
5
|
+
const { variant } = props;
|
|
6
|
+
if (variant === "mobile") {
|
|
7
|
+
return React.createElement(PaymentOptionsMobile, Object.assign({}, props));
|
|
8
|
+
}
|
|
9
|
+
return React.createElement(PaymentOptionsDesktop, Object.assign({}, props));
|
|
10
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import PaymentOptionsDesktop from "./PaymentOptionsDesktop";
|
|
2
|
+
import PaymentOptionsMobile from "./PaymentOptionsMobile";
|
|
3
|
+
import ResponsivePaymentOptions from "./ResponsivePaymentOptions";
|
|
4
|
+
export { PaymentOptionsDesktop, PaymentOptionsMobile, ResponsivePaymentOptions };
|
|
5
|
+
export type { PaymentOptionsProps } from "./type";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import PaymentOptionsDesktop from "./PaymentOptionsDesktop";
|
|
2
|
+
import PaymentOptionsMobile from "./PaymentOptionsMobile";
|
|
3
|
+
import ResponsivePaymentOptions from "./ResponsivePaymentOptions";
|
|
4
|
+
export { PaymentOptionsDesktop, PaymentOptionsMobile, ResponsivePaymentOptions };
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -409,12 +409,18 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
409
409
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
410
410
|
React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
411
411
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date)),
|
|
412
|
-
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: {
|
|
412
|
+
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: {
|
|
413
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
414
|
+
zIndex: 100,
|
|
415
|
+
} },
|
|
413
416
|
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 } }),
|
|
414
417
|
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))))))),
|
|
415
418
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
416
419
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
|
|
417
|
-
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: {
|
|
420
|
+
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: {
|
|
421
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
422
|
+
zIndex: 100,
|
|
423
|
+
} },
|
|
418
424
|
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: {
|
|
419
425
|
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
420
426
|
} }),
|
|
@@ -426,7 +432,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
426
432
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
427
433
|
React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
428
434
|
React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time)),
|
|
429
|
-
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: {
|
|
435
|
+
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: {
|
|
436
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
437
|
+
zIndex: 100,
|
|
438
|
+
} },
|
|
430
439
|
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 } }),
|
|
431
440
|
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))))))),
|
|
432
441
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
@@ -435,7 +444,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
435
444
|
: serviceItem.arr_time
|
|
436
445
|
? DateService.formatTime(serviceItem.arr_time)
|
|
437
446
|
: null),
|
|
438
|
-
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: {
|
|
447
|
+
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: {
|
|
448
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
449
|
+
zIndex: 100,
|
|
450
|
+
} },
|
|
439
451
|
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: {
|
|
440
452
|
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
441
453
|
} }),
|
|
@@ -527,9 +539,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
527
539
|
React.createElement("div", { className: "group" },
|
|
528
540
|
React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
|
|
529
541
|
React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
|
|
530
|
-
React.createElement("div", { className: "hidden group-hover:block absolute top-[
|
|
542
|
+
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: {
|
|
531
543
|
backgroundColor: colors.tooltipColor,
|
|
532
544
|
zIndex: 21,
|
|
545
|
+
padding: "12px",
|
|
533
546
|
} },
|
|
534
547
|
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: {
|
|
535
548
|
borderBottomColor: colors.tooltipColor,
|
|
@@ -543,25 +556,25 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
543
556
|
} },
|
|
544
557
|
React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
|
|
545
558
|
"/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
|
|
546
|
-
React.createElement("div", { className: "hidden group-hover:block absolute
|
|
559
|
+
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]" },
|
|
560
|
+
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: {
|
|
561
|
+
borderBottomColor: colors.tooltipColor,
|
|
562
|
+
} }),
|
|
547
563
|
React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
|
|
548
564
|
backgroundColor: colors.tooltipColor,
|
|
549
|
-
|
|
550
|
-
metaData &&
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
React.createElement("div", { 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 ", style: {
|
|
563
|
-
borderRightColor: colors.tooltipColor,
|
|
564
|
-
} }))))))))))))),
|
|
565
|
+
padding: "1rem",
|
|
566
|
+
} }, metaData &&
|
|
567
|
+
((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
|
|
568
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
569
|
+
const exceptions = [
|
|
570
|
+
1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
|
|
571
|
+
];
|
|
572
|
+
return exceptions.includes(key) ? null : key >= 3 &&
|
|
573
|
+
((_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]" },
|
|
574
|
+
React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
|
|
575
|
+
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" })),
|
|
576
|
+
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;
|
|
577
|
+
})))))))))))))),
|
|
565
578
|
children,
|
|
566
579
|
(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: {
|
|
567
580
|
backgroundColor: isSoldOut
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -676,7 +676,10 @@ function ServiceItemPB({
|
|
|
676
676
|
{serviceItem.boarding_stages && (
|
|
677
677
|
<div
|
|
678
678
|
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"
|
|
679
|
-
style={{
|
|
679
|
+
style={{
|
|
680
|
+
backgroundColor: colors?.tooltipColor,
|
|
681
|
+
zIndex: 100,
|
|
682
|
+
}}
|
|
680
683
|
>
|
|
681
684
|
<div
|
|
682
685
|
className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
|
|
@@ -712,7 +715,10 @@ function ServiceItemPB({
|
|
|
712
715
|
{serviceItem.dropoff_stages && (
|
|
713
716
|
<div
|
|
714
717
|
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"
|
|
715
|
-
style={{
|
|
718
|
+
style={{
|
|
719
|
+
backgroundColor: colors?.tooltipColor,
|
|
720
|
+
zIndex: 100,
|
|
721
|
+
}}
|
|
716
722
|
>
|
|
717
723
|
<div
|
|
718
724
|
className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
|
|
@@ -768,7 +774,10 @@ function ServiceItemPB({
|
|
|
768
774
|
{serviceItem.boarding_stages && (
|
|
769
775
|
<div
|
|
770
776
|
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"
|
|
771
|
-
style={{
|
|
777
|
+
style={{
|
|
778
|
+
backgroundColor: colors?.tooltipColor,
|
|
779
|
+
zIndex: 100,
|
|
780
|
+
}}
|
|
772
781
|
>
|
|
773
782
|
<div
|
|
774
783
|
className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
|
|
@@ -807,7 +816,10 @@ function ServiceItemPB({
|
|
|
807
816
|
{serviceItem.dropoff_stages && (
|
|
808
817
|
<div
|
|
809
818
|
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"
|
|
810
|
-
style={{
|
|
819
|
+
style={{
|
|
820
|
+
backgroundColor: colors?.tooltipColor,
|
|
821
|
+
zIndex: 100,
|
|
822
|
+
}}
|
|
811
823
|
>
|
|
812
824
|
<div
|
|
813
825
|
className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
|
|
@@ -1099,10 +1111,11 @@ function ServiceItemPB({
|
|
|
1099
1111
|
/>
|
|
1100
1112
|
</div>
|
|
1101
1113
|
<div
|
|
1102
|
-
className="hidden group-hover:block absolute top-[
|
|
1114
|
+
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]"
|
|
1103
1115
|
style={{
|
|
1104
1116
|
backgroundColor: colors.tooltipColor,
|
|
1105
1117
|
zIndex: 21,
|
|
1118
|
+
padding: "12px",
|
|
1106
1119
|
}}
|
|
1107
1120
|
>
|
|
1108
1121
|
{/* Tooltip arrow */}
|
|
@@ -1142,11 +1155,21 @@ function ServiceItemPB({
|
|
|
1142
1155
|
className="w-[16px] h-[16px]"
|
|
1143
1156
|
alt="plus"
|
|
1144
1157
|
/>
|
|
1145
|
-
<div
|
|
1158
|
+
<div
|
|
1159
|
+
style={{ zIndex: 100 }}
|
|
1160
|
+
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]"
|
|
1161
|
+
>
|
|
1162
|
+
<div
|
|
1163
|
+
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"
|
|
1164
|
+
style={{
|
|
1165
|
+
borderBottomColor: colors.tooltipColor,
|
|
1166
|
+
}}
|
|
1167
|
+
></div>
|
|
1146
1168
|
<div
|
|
1147
1169
|
className="flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative"
|
|
1148
1170
|
style={{
|
|
1149
1171
|
backgroundColor: colors.tooltipColor,
|
|
1172
|
+
padding: "1rem",
|
|
1150
1173
|
}}
|
|
1151
1174
|
>
|
|
1152
1175
|
{/* Additional amenities */}
|
|
@@ -1192,12 +1215,12 @@ function ServiceItemPB({
|
|
|
1192
1215
|
}
|
|
1193
1216
|
)}
|
|
1194
1217
|
{/* Tooltip arrow */}
|
|
1195
|
-
<div
|
|
1218
|
+
{/* <div
|
|
1196
1219
|
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 "
|
|
1197
1220
|
style={{
|
|
1198
1221
|
borderRightColor: colors.tooltipColor,
|
|
1199
1222
|
}}
|
|
1200
|
-
></div>
|
|
1223
|
+
></div> */}
|
|
1201
1224
|
</div>
|
|
1202
1225
|
</div>
|
|
1203
1226
|
</div>
|