kupos-ui-components-lib 9.1.4 → 9.1.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.
- package/README copy.md +223 -67
- package/dist/assets/images/anims/service_list/directo.json +1 -1
- package/dist/components/FilterBar/FilterBarDesktop.d.ts +1 -1
- package/dist/components/FilterBar/FilterBarDesktop.js +3 -38
- package/dist/components/FilterBar/tyoes.d.ts +0 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +1 -1
- package/dist/components/ServiceItem/RatingHover.js +32 -33
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +173 -266
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +114 -279
- package/dist/components/ServiceItem/mobileTypes.d.ts +13 -0
- package/dist/components/ServiceItem/types.d.ts +15 -0
- package/dist/styles.css +131 -32
- package/dist/ui/AmenitiesBlock.js +24 -31
- package/dist/ui/DurationBlock.js +4 -4
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +4 -3
- package/dist/ui/FlexibleBlock.js +5 -6
- package/dist/ui/PetBlock.js +1 -3
- package/dist/ui/RatingBlock.d.ts +9 -1
- package/dist/ui/RatingBlock.js +7 -3
- package/dist/ui/SeatSection/SeatSection.js +5 -0
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +4 -3
- package/dist/utils/CommonService.d.ts +1 -1
- package/dist/utils/CommonService.js +2 -0
- package/package.json +2 -1
- package/src/assets/images/anims/service_list/bomb.json +1 -0
- package/src/assets/images/anims/service_list/directo.json +1 -1
- package/src/components/FilterBar/FilterBarDesktop.tsx +3 -46
- package/src/components/FilterBar/tyoes.ts +0 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +1 -0
- package/src/components/ServiceItem/RatingHover.tsx +44 -45
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +354 -540
- package/src/components/ServiceItem/ServiceItemMobile.tsx +255 -535
- package/src/components/ServiceItem/mobileTypes.ts +13 -0
- package/src/components/ServiceItem/types.ts +15 -0
- package/src/ui/AmenitiesBlock.tsx +51 -30
- package/src/ui/BottomAmenities/BottomAmenities.tsx +110 -0
- package/src/ui/DateTimeSection/DateTimeSection.tsx +207 -0
- package/src/ui/DirectoBlock.tsx +31 -0
- package/src/ui/DurationBlock.tsx +4 -4
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +103 -0
- package/src/ui/FlexibleBlock.tsx +6 -5
- package/src/ui/KuposButton/KuposButton.tsx +48 -0
- package/src/ui/PetBlock.tsx +2 -2
- package/src/ui/RatingBlock.tsx +18 -6
- package/src/ui/SeatSection/SeatSection.tsx +217 -0
- package/src/ui/TopAmenities/TopAmenities.tsx +127 -0
- package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +169 -0
- package/src/ui/mobileweb/DateTimeSectionMobile.tsx +192 -0
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +56 -0
- package/src/ui/mobileweb/SeatSectionMobile.tsx +256 -0
- package/src/ui/mobileweb/TopAmenitieMobile.tsx +126 -0
- package/src/utils/CommonService.ts +2 -0
package/README copy.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Kupos UI Components
|
|
2
2
|
|
|
3
|
-
A reusable React component for
|
|
4
|
-
booking applications.
|
|
3
|
+
A reusable React component library for transportation and booking applications. Provides responsive, variant-aware UI components for service items, payment sidebars, service lists, and filter bars — with built-in desktop and mobile layouts.
|
|
5
4
|
|
|
6
5
|
## Installation
|
|
7
6
|
|
|
@@ -11,104 +10,240 @@ npm install kupos-ui-components-lib
|
|
|
11
10
|
yarn add kupos-ui-components-lib
|
|
12
11
|
```
|
|
13
12
|
|
|
13
|
+
**Peer dependencies:** `react` (>=17), `react-dom` (>=17)
|
|
14
|
+
|
|
15
|
+
After installing, import the compiled CSS in your app entry point:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import "kupos-ui-components-lib/dist/styles.css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Components Overview
|
|
24
|
+
|
|
25
|
+
| Component | Description |
|
|
26
|
+
| --------------------- | ------------------------------------------------------------------------------------------------- |
|
|
27
|
+
| **ServiceItem** | Displays a bus/train service with operator info, schedule, pricing, amenities, and booking action |
|
|
28
|
+
| **PaymentSideBar** | Order summary sidebar with seat details, pricing breakdown, promo codes, and countdown timer |
|
|
29
|
+
| **ServiceList** | Renders a filterable, sortable list of services |
|
|
30
|
+
| **FilterBar** | Time-of-day, operator, and terminal filters for service schedules |
|
|
31
|
+
| **CuponeraFilterBar** | Specialized filter bar for cuponera (coupon) seat selection |
|
|
32
|
+
|
|
33
|
+
Each component ships in three variants:
|
|
34
|
+
|
|
35
|
+
- **Desktop** — e.g. `ServiceItemDesktop`
|
|
36
|
+
- **Mobile** — e.g. `ServiceItemMobile`
|
|
37
|
+
- **Responsive** — e.g. `ResponsiveServiceItem` (auto-selects based on the `variant` prop)
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
14
41
|
## Usage
|
|
15
42
|
|
|
16
|
-
###
|
|
43
|
+
### Option 1: Unified `KuposUIComponent`
|
|
17
44
|
|
|
18
|
-
|
|
45
|
+
A single entry-point component that renders the correct component based on `typeOfComponent`:
|
|
19
46
|
|
|
20
|
-
```
|
|
47
|
+
```tsx
|
|
21
48
|
import { KuposUIComponent } from "kupos-ui-components-lib";
|
|
22
|
-
import "kupos-ui-components-lib/dist/styles.css";
|
|
23
|
-
|
|
24
|
-
// Sample data
|
|
25
|
-
const serviceItem = {
|
|
26
|
-
id: "12345",
|
|
27
|
-
operator_details: [
|
|
28
|
-
"https://example.com/logo.png", // logo URL
|
|
29
|
-
"4.5", // rating
|
|
30
|
-
"Operator Name", // operator name
|
|
31
|
-
],
|
|
32
|
-
travel_date: "2025-08-01T09:00:00Z",
|
|
33
|
-
arrival_date: "2025-08-01T12:00:00Z",
|
|
34
|
-
dep_time: "09:00",
|
|
35
|
-
arr_time: "12:00",
|
|
36
|
-
available_seats: 5,
|
|
37
|
-
seat_types: [
|
|
38
|
-
{ label: "Salon Cama", fare: 50 },
|
|
39
|
-
{ label: "Premium", fare: 75 },
|
|
40
|
-
{ label: "Economy", fare: 40 },
|
|
41
|
-
],
|
|
42
|
-
offer_text: "Limited time offer: 20% off!",
|
|
43
|
-
is_direct_trip: true,
|
|
44
|
-
};
|
|
49
|
+
import "kupos-ui-components-lib/dist/styles.css";
|
|
45
50
|
|
|
46
51
|
function App() {
|
|
47
52
|
return (
|
|
48
|
-
|
|
49
|
-
{/*
|
|
53
|
+
<>
|
|
54
|
+
{/* Service Item */}
|
|
50
55
|
<KuposUIComponent
|
|
51
56
|
typeOfComponent="serviceitem"
|
|
52
57
|
variant="desktop"
|
|
53
58
|
serviceItem={serviceItem}
|
|
54
|
-
|
|
59
|
+
colors={colors}
|
|
60
|
+
onBookButtonPress={() => console.log("Booked!")}
|
|
55
61
|
/>
|
|
56
|
-
|
|
57
|
-
{/*
|
|
62
|
+
|
|
63
|
+
{/* Payment Sidebar */}
|
|
58
64
|
<KuposUIComponent
|
|
59
65
|
typeOfComponent="paymentsidebar"
|
|
60
|
-
variant="
|
|
61
|
-
|
|
66
|
+
variant="mobile"
|
|
67
|
+
serviceNameOnward="Bus Santiago → Valparaíso"
|
|
68
|
+
selectSeatOnward={selectedSeats}
|
|
69
|
+
colors={colors}
|
|
62
70
|
/>
|
|
63
|
-
|
|
64
|
-
{/*
|
|
71
|
+
|
|
72
|
+
{/* Filter Bar */}
|
|
65
73
|
<KuposUIComponent
|
|
66
|
-
typeOfComponent="
|
|
67
|
-
variant="
|
|
68
|
-
|
|
74
|
+
typeOfComponent="filterbar"
|
|
75
|
+
variant="desktop"
|
|
76
|
+
allSchedules={schedules}
|
|
77
|
+
colors={colors}
|
|
69
78
|
/>
|
|
70
|
-
|
|
79
|
+
</>
|
|
71
80
|
);
|
|
72
81
|
}
|
|
73
82
|
```
|
|
74
83
|
|
|
75
|
-
|
|
84
|
+
**Supported `typeOfComponent` values:** `"serviceitem"` | `"paymentsidebar"` | `"servicelist"` | `"filterbar"` | `"cuponerafilterbar"`
|
|
76
85
|
|
|
77
|
-
|
|
86
|
+
### Option 2: Individual Component Imports
|
|
78
87
|
|
|
79
|
-
|
|
80
|
-
|
|
88
|
+
Import only what you need for smaller bundles and full TypeScript type safety:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import {
|
|
92
|
+
ServiceItemDesktop,
|
|
93
|
+
ServiceItemMobile,
|
|
94
|
+
ResponsiveServiceItem,
|
|
95
|
+
PaymentSideBarDesktop,
|
|
96
|
+
FilterBarMobile,
|
|
97
|
+
} from "kupos-ui-components-lib";
|
|
98
|
+
import "kupos-ui-components-lib/dist/styles.css";
|
|
81
99
|
|
|
82
100
|
function App() {
|
|
83
101
|
return (
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
102
|
+
<ResponsiveServiceItem
|
|
103
|
+
variant="desktop"
|
|
104
|
+
serviceItem={serviceItem}
|
|
105
|
+
colors={colors}
|
|
106
|
+
onBookButtonPress={() => console.log("Booked!")}
|
|
107
|
+
/>
|
|
90
108
|
);
|
|
91
109
|
}
|
|
92
110
|
```
|
|
93
111
|
|
|
94
|
-
|
|
112
|
+
**All available exports:**
|
|
113
|
+
|
|
114
|
+
| Export | Type |
|
|
115
|
+
| -------------------------- | --------- |
|
|
116
|
+
| `ServiceItemDesktop` | Component |
|
|
117
|
+
| `ServiceItemMobile` | Component |
|
|
118
|
+
| `ResponsiveServiceItem` | Component |
|
|
119
|
+
| `PaymentSideBarDesktop` | Component |
|
|
120
|
+
| `PaymentSideBarMobile` | Component |
|
|
121
|
+
| `ResponsivePaymentSideBar` | Component |
|
|
122
|
+
| `ServiceListDesktop` | Component |
|
|
123
|
+
| `ServiceListMobile` | Component |
|
|
124
|
+
| `ResponsiveServiceList` | Component |
|
|
125
|
+
| `FilterBarDesktop` | Component |
|
|
126
|
+
| `FilterBarMobile` | Component |
|
|
127
|
+
| `ResponsiveFilterBar` | Component |
|
|
128
|
+
| `KuposUIComponent` | Component |
|
|
129
|
+
| `ServiceItemProps` | Type |
|
|
130
|
+
| `MobileServiceItemProps` | Type |
|
|
131
|
+
| `PaymentSideBarProps` | Type |
|
|
132
|
+
| `ServiceListProps` | Type |
|
|
133
|
+
| `FilterBarProps` | Type |
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## Props Reference
|
|
138
|
+
|
|
139
|
+
### `KuposUIComponent`
|
|
140
|
+
|
|
141
|
+
| Prop | Type | Required | Description |
|
|
142
|
+
| ----------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
|
|
143
|
+
| `typeOfComponent` | `string` | Yes | `"serviceitem"` \| `"paymentsidebar"` \| `"servicelist"` \| `"filterbar"` \| `"cuponerafilterbar"` |
|
|
144
|
+
| `variant` | `string` | No | `"mobile"` \| `"desktop"` — controls which layout renders |
|
|
145
|
+
| `...rest` | various | — | All remaining props are forwarded to the underlying component |
|
|
146
|
+
|
|
147
|
+
### ServiceItem
|
|
148
|
+
|
|
149
|
+
| Prop | Type | Required | Description |
|
|
150
|
+
| ----------------------- | ---------- | -------- | ---------------------------------------------------------- |
|
|
151
|
+
| `serviceItem` | `object` | Yes | Service data (operator details, times, seats, fares, etc.) |
|
|
152
|
+
| `colors` | `object` | Yes | Theme colors (button, rating, price, labels, etc.) |
|
|
153
|
+
| `variant` | `string` | No | `"desktop"` \| `"mobile"` \| `"auto"` |
|
|
154
|
+
| `onBookButtonPress` | `function` | No | Callback when the book button is pressed |
|
|
155
|
+
| `t` | `function` | No | Translation function `(key: string) => string` |
|
|
156
|
+
| `translation` | `object` | No | Key-value translation map |
|
|
157
|
+
| `orignLabel` | `string` | No | Custom origin city label |
|
|
158
|
+
| `destinationLabel` | `string` | No | Custom destination city label |
|
|
159
|
+
| `serviceDetailsLoading` | `boolean` | No | Shows a loading state on the service card |
|
|
160
|
+
|
|
161
|
+
### PaymentSideBar
|
|
162
|
+
|
|
163
|
+
| Prop | Type | Required | Description |
|
|
164
|
+
| ------------------- | ---------- | -------- | ------------------------------------ |
|
|
165
|
+
| `serviceNameOnward` | `string` | Yes | Name of the outbound service |
|
|
166
|
+
| `serviceNameReturn` | `string` | Yes | Name of the return service |
|
|
167
|
+
| `selectSeatOnward` | `any` | Yes | Selected seat data for outbound trip |
|
|
168
|
+
| `selectSeatReturn` | `any` | Yes | Selected seat data for return trip |
|
|
169
|
+
| `colors` | `object` | Yes | Theme colors |
|
|
170
|
+
| `variant` | `string` | No | `"desktop"` \| `"mobile"` |
|
|
171
|
+
| `netFare` | `number` | No | Net fare amount |
|
|
172
|
+
| `discountAmount` | `number` | No | Applied discount |
|
|
173
|
+
| `promoCode` | `any` | No | Applied promo code info |
|
|
174
|
+
| `countdown` | `string` | No | Countdown timer value |
|
|
175
|
+
| `onButtonOneClick` | `function` | No | Primary action callback |
|
|
176
|
+
| `t` | `function` | No | Translation function |
|
|
177
|
+
|
|
178
|
+
### FilterBar
|
|
179
|
+
|
|
180
|
+
| Prop | Type | Required | Description |
|
|
181
|
+
| ---------------- | ---------- | -------- | ------------------------------------------------------- |
|
|
182
|
+
| `allSchedules` | `any` | No | Full schedule data to filter |
|
|
183
|
+
| `serviceList` | `any` | No | Current filtered service list |
|
|
184
|
+
| `setServiceList` | `function` | No | Setter for updating filtered results |
|
|
185
|
+
| `colors` | `object` | Yes | `{ selectedColor, selectedTextColor }` |
|
|
186
|
+
| `icons` | `object` | No | Time-of-day icon URLs (sunrise, morning, sunset, night) |
|
|
187
|
+
| `variant` | `string` | No | `"desktop"` \| `"mobile"` |
|
|
188
|
+
| `t` | `function` | No | Translation function |
|
|
189
|
+
|
|
190
|
+
### CuponeraFilterBar
|
|
191
|
+
|
|
192
|
+
| Prop | Type | Required | Description |
|
|
193
|
+
| -------------------- | ---------- | -------- | ----------------------------------------------------------- |
|
|
194
|
+
| `seats` | `any` | Yes | Available seat data |
|
|
195
|
+
| `filters` | `any` | Yes | Current filter state |
|
|
196
|
+
| `setFilters` | `function` | Yes | Setter to update filters |
|
|
197
|
+
| `expandedFilters` | `any` | Yes | Expanded/collapsed state of filter groups |
|
|
198
|
+
| `setExpandedFilters` | `function` | Yes | Setter for expanded filter state |
|
|
199
|
+
| `colors` | `object` | Yes | `{ fontColor, selectedFontColor, selectedBackgroundColor }` |
|
|
200
|
+
| `icons` | `object` | No | `{ iconUp, iconDown, crossIcon }` |
|
|
201
|
+
| `variant` | `string` | No | `"desktop"` \| `"mobile"` |
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## Theming
|
|
206
|
+
|
|
207
|
+
All components accept a `colors` object for theming. Common color keys include:
|
|
208
|
+
|
|
209
|
+
```ts
|
|
210
|
+
{
|
|
211
|
+
kuposButtonColor: "#FF6600",
|
|
212
|
+
topLabelColor: "#333",
|
|
213
|
+
priceColor: "#1A1A1A",
|
|
214
|
+
ratingBorderColor: "#E53935",
|
|
215
|
+
ratingBottomColor: "#FEF1EC",
|
|
216
|
+
secondaryBgColor: "#F5F5F5",
|
|
217
|
+
secondaryTextColor: "#666",
|
|
218
|
+
primaryButtonTextColor: "#FFFFFF",
|
|
219
|
+
bottomStripColor: "#FF6600",
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
Components also accept an `icons` object to supply custom icon/image URLs and a `translation` object (or `t` function) for i18n.
|
|
95
224
|
|
|
96
|
-
|
|
225
|
+
---
|
|
97
226
|
|
|
98
|
-
|
|
99
|
-
| --------------- | -------- | ---------------------------------------------------------- |
|
|
100
|
-
| typeOfComponent | string | Type of component to render: "serviceitem", "paymentsidebar", or "servicelist" |
|
|
101
|
-
| variant | string | "mobile" or "desktop" to specify the variant |
|
|
102
|
-
| ...other props | various | All props required by the specific component type |
|
|
227
|
+
## Project Structure
|
|
103
228
|
|
|
104
|
-
|
|
229
|
+
```
|
|
230
|
+
src/
|
|
231
|
+
├── KuposUIComponent.tsx # Unified entry-point component
|
|
232
|
+
├── index.ts # Public exports
|
|
233
|
+
├── types.ts # Shared ServiceItem types
|
|
234
|
+
├── styles.css # Tailwind CSS + custom styles
|
|
235
|
+
├── components/
|
|
236
|
+
│ ├── ServiceItem/ # Desktop, Mobile, Responsive variants
|
|
237
|
+
│ ├── PaymentSideBar/ # Desktop, Mobile, Responsive variants
|
|
238
|
+
│ ├── ServiceList/ # Desktop, Mobile, Responsive variants
|
|
239
|
+
│ ├── FilterBar/ # Desktop, Mobile, Responsive variants
|
|
240
|
+
│ └── CuponeraFilterBar/ # Desktop, Mobile, Responsive variants
|
|
241
|
+
├── ui/ # Shared sub-components (Rating, Amenities, Duration, etc.)
|
|
242
|
+
├── utils/ # Helpers (CommonService, DateService, ModalEventManager)
|
|
243
|
+
└── assets/ # Static images and icons
|
|
244
|
+
```
|
|
105
245
|
|
|
106
|
-
|
|
107
|
-
| --------------------- | -------- | -------------------------------------------- |
|
|
108
|
-
| serviceItem | Object | The service item data object |
|
|
109
|
-
| onBookButtonPress | Function | Callback for when the book button is pressed |
|
|
110
|
-
| serviceDetailsLoading | boolean | Whether service details are loading |
|
|
111
|
-
| t | Function | Optional translation function |
|
|
246
|
+
---
|
|
112
247
|
|
|
113
248
|
## Development
|
|
114
249
|
|
|
@@ -116,10 +251,31 @@ function App() {
|
|
|
116
251
|
# Install dependencies
|
|
117
252
|
npm install
|
|
118
253
|
|
|
119
|
-
# Build package
|
|
254
|
+
# Build the package (TypeScript + Tailwind CSS + asset copy)
|
|
120
255
|
npm run build
|
|
256
|
+
|
|
257
|
+
# Watch mode (auto-rebuild on file changes)
|
|
258
|
+
npm run watch
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Build Pipeline
|
|
262
|
+
|
|
263
|
+
1. **TypeScript** — `tsc` compiles `src/` to `dist/`
|
|
264
|
+
2. **Tailwind CSS** — `build-css.js` processes `src/styles.css` through PostCSS + Tailwind and outputs `dist/styles.css`
|
|
265
|
+
3. **Assets** — `copy-assets.js` copies static assets into `dist/`
|
|
266
|
+
|
|
267
|
+
### Publishing
|
|
268
|
+
|
|
269
|
+
```bash
|
|
270
|
+
# Bumps version, builds, and publishes to npm
|
|
271
|
+
npm version patch # or minor / major
|
|
272
|
+
npm publish
|
|
121
273
|
```
|
|
122
274
|
|
|
275
|
+
The `prepublishOnly` script automatically runs `npm run build` before publishing.
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
123
279
|
## License
|
|
124
280
|
|
|
125
281
|
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.
|
|
1
|
+
{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.86.1"},"layers":[{"ty":4,"nm":"Shape Layer - SVG","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[38.5,32.5]},"s":{"a":0,"k":[596.2908,596.2908]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[103.191,249.995],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[103.191,249.995],"t":24},{"s":[221.8237,249.9635],"t":39}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24},{"s":[100],"t":30}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.2699999999999996,0.37000000000000455],[-0.5899999999999999,0.759999999999998],[0,0],[0,0],[0,0.5100000000000002],[-0.2700000000000031,0.3600000000000001],[-0.39000000000000057,0],[-0.2699999999999996,-0.37000000000000005],[0,0],[0.5700000000000003,-0.759999999999998],[0,0],[0.39000000000000057,0]],"o":[[-0.39000000000000057,0],[-0.5700000000000003,-0.75],[0,0],[0,0],[-0.28000000000000114,-0.33999999999999986],[0,-0.5100000000000002],[0.28000000000000114,-0.36],[0.39000000000000057,0],[0,0],[0.5700000000000003,0.75],[0,0],[-0.28000000000000114,0.35999999999999943],[0,0]],"v":[[26.98,65],[25.96,64.44],[25.96,61.71],[48.010000000000005,32.269999999999996],[25.94,3.28],[25.52,1.9299999999999997],[25.94,0.5599999999999996],[26.98,-4.440892098500626e-16],[28,0.5599999999999996],[51.07,30.88],[51.07,33.61],[28.01,64.43],[26.970000000000002,65.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":0.87},"c":{"a":0,"k":[0.2745,0.2745,0.2784]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.2745,0.2745,0.2784]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"Shape Layer - SVG 1","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[38.5,32.5]},"s":{"a":0,"k":[596.2908,596.2908]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80.0835,249.995],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80.0835,249.995],"t":2},{"s":[395.1269,249.9635],"t":24}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[100],"t":4}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.2699999999999996,0.37000000000000455],[-0.5899999999999999,0.759999999999998],[0,0],[0,0],[0,0.5100000000000002],[-0.2700000000000031,0.3600000000000001],[-0.39000000000000057,0],[-0.2699999999999996,-0.37000000000000005],[0,0],[0.5700000000000003,-0.759999999999998],[0,0],[0.39000000000000057,0]],"o":[[-0.39000000000000057,0],[-0.5700000000000003,-0.75],[0,0],[0,0],[-0.28000000000000114,-0.33999999999999986],[0,-0.5100000000000002],[0.28000000000000114,-0.36],[0.39000000000000057,0],[0,0],[0.5700000000000003,0.75],[0,0],[-0.28000000000000114,0.35999999999999943],[0,0]],"v":[[26.98,65],[25.96,64.44],[25.96,61.71],[48.010000000000005,32.269999999999996],[25.94,3.28],[25.52,1.9299999999999997],[25.94,0.5599999999999996],[26.98,-4.440892098500626e-16],[28,0.5599999999999996],[51.07,30.88],[51.07,33.61],[28.01,64.43],[26.970000000000002,65.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":0.87},"c":{"a":0,"k":[0.2745,0.2745,0.2784]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.2745,0.2745,0.2784]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2}],"v":"5.7.0","fr":30,"op":90,"ip":0,"assets":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FilterBarProps } from "./tyoes";
|
|
3
|
-
declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey,
|
|
3
|
+
declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, }: FilterBarProps) => React.JSX.Element;
|
|
4
4
|
export default FilterBarDesktop;
|
|
@@ -1,42 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import commonService from "../../utils/CommonService";
|
|
3
3
|
import ServiceFilter from "./ServiceFilter";
|
|
4
|
-
const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey,
|
|
5
|
-
const getEnrichedFilters = () => {
|
|
6
|
-
if (!isAllinBus || !(allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length))
|
|
7
|
-
return filtersArray;
|
|
8
|
-
const hasSpecialDeparture = filtersArray.some((f) => { var _a; return f.type === "special_departure" && ((_a = f.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
|
|
9
|
-
if (hasSpecialDeparture)
|
|
10
|
-
return filtersArray;
|
|
11
|
-
const stageMap = new Map();
|
|
12
|
-
allSchedules.forEach((schedule) => {
|
|
13
|
-
var _a, _b, _c;
|
|
14
|
-
if ((_a = schedule.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length) {
|
|
15
|
-
const stageObj = schedule.stage_details_arr[0];
|
|
16
|
-
const stageId = Object.keys(stageObj)[0];
|
|
17
|
-
const stageName = (_c = (_b = stageObj[stageId]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.split(", ")[0];
|
|
18
|
-
if (stageId && stageName) {
|
|
19
|
-
stageMap.set(stageId, stageName);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
if (stageMap.size === 0)
|
|
24
|
-
return filtersArray;
|
|
25
|
-
const specialDeptOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
|
|
26
|
-
label: name,
|
|
27
|
-
value: id,
|
|
28
|
-
active: false,
|
|
29
|
-
}));
|
|
30
|
-
return [
|
|
31
|
-
...filtersArray,
|
|
32
|
-
{
|
|
33
|
-
type: "special_departure",
|
|
34
|
-
title: "SPECIAL_DEPARTURE",
|
|
35
|
-
options: specialDeptOptions,
|
|
36
|
-
},
|
|
37
|
-
];
|
|
38
|
-
};
|
|
39
|
-
const enrichedFilters = getEnrichedFilters();
|
|
4
|
+
const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, }) => {
|
|
40
5
|
const filterBy = (filters) => {
|
|
41
6
|
try {
|
|
42
7
|
let routes = allSchedules;
|
|
@@ -214,12 +179,12 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
|
|
|
214
179
|
const onFilterSelected = (key, i) => {
|
|
215
180
|
setCoachLoading(null);
|
|
216
181
|
setCoachKey(null);
|
|
217
|
-
let filters = commonService.copyObject(
|
|
182
|
+
let filters = commonService.copyObject(filtersArray);
|
|
218
183
|
filters[key].options[i].active = !filters[key].options[i].active;
|
|
219
184
|
filterBy(filters);
|
|
220
185
|
setFiltersArray(filters);
|
|
221
186
|
};
|
|
222
|
-
return (React.createElement(ServiceFilter, { filtersArray:
|
|
187
|
+
return (React.createElement(ServiceFilter, { filtersArray: filtersArray, onFilterSelected: onFilterSelected, onFilterClear: (val) => {
|
|
223
188
|
setFiltersArray(val);
|
|
224
189
|
filterBy(val);
|
|
225
190
|
}, showReturnTripModal: showReturnTripModal, initialOpenFilters: isBlankTicket ? ["operator"] : [], colors: colors, icons: icons, translation: translation, isTrain: isTrain, hideOperator: hideOperator, t: t }));
|
|
@@ -316,7 +316,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
316
316
|
{
|
|
317
317
|
key: "rating",
|
|
318
318
|
width: "30%",
|
|
319
|
-
render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
|
|
319
|
+
render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
|
|
320
320
|
},
|
|
321
321
|
{
|
|
322
322
|
key: "duration",
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import RatingItem from "./RatingItem";
|
|
3
3
|
const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, isPeru, }) => {
|
|
4
|
-
const
|
|
5
|
-
const handleBottomRating = isPeru ? 6 : 5;
|
|
4
|
+
const ratingIndex = isPeru ? 7 : 6;
|
|
6
5
|
return (React.createElement("div", { className: "flex items-center" },
|
|
7
6
|
React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
|
|
8
7
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
|
|
@@ -14,7 +13,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
|
|
|
14
13
|
if (tooltip)
|
|
15
14
|
tooltip.style.display = "none";
|
|
16
15
|
} }),
|
|
17
|
-
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[
|
|
16
|
+
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]", style: {
|
|
18
17
|
borderColor: isSoldOut ? "#c0c0c0" : colors.ratingBorderColor,
|
|
19
18
|
color: isSoldOut ? "#c0c0c0" : "",
|
|
20
19
|
} },
|
|
@@ -24,42 +23,42 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
|
|
|
24
23
|
React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
|
|
25
24
|
React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
|
|
26
25
|
React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
|
|
27
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
28
|
-
serviceItem.operator_details[
|
|
29
|
-
serviceItem.operator_details[
|
|
30
|
-
parseFloat(serviceItem.operator_details[
|
|
31
|
-
serviceItem.operator_details[
|
|
32
|
-
? +parseFloat(serviceItem.operator_details[
|
|
33
|
-
serviceItem.operator_details[
|
|
26
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
|
|
27
|
+
serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
28
|
+
serviceItem.operator_details[ratingIndex])[0]] &&
|
|
29
|
+
parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
30
|
+
serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
|
|
31
|
+
? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
32
|
+
serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
|
|
34
33
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
|
|
35
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
36
|
-
serviceItem.operator_details[
|
|
37
|
-
serviceItem.operator_details[
|
|
38
|
-
parseFloat(serviceItem.operator_details[
|
|
39
|
-
serviceItem.operator_details[
|
|
40
|
-
? +parseFloat(serviceItem.operator_details[
|
|
41
|
-
serviceItem.operator_details[
|
|
34
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
|
|
35
|
+
serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
36
|
+
serviceItem.operator_details[ratingIndex])[1]] &&
|
|
37
|
+
parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
38
|
+
serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
|
|
39
|
+
? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
40
|
+
serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
|
|
42
41
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
|
|
43
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
44
|
-
serviceItem.operator_details[
|
|
45
|
-
serviceItem.operator_details[
|
|
46
|
-
parseFloat(serviceItem.operator_details[
|
|
47
|
-
serviceItem.operator_details[
|
|
48
|
-
? +parseFloat(serviceItem.operator_details[
|
|
49
|
-
serviceItem.operator_details[
|
|
42
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
|
|
43
|
+
serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
44
|
+
serviceItem.operator_details[ratingIndex])[2]] &&
|
|
45
|
+
parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
46
|
+
serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
|
|
47
|
+
? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
48
|
+
serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
|
|
50
49
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
|
|
51
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
52
|
-
serviceItem.operator_details[
|
|
53
|
-
serviceItem.operator_details[
|
|
54
|
-
parseFloat(serviceItem.operator_details[
|
|
55
|
-
serviceItem.operator_details[
|
|
56
|
-
? +parseFloat(serviceItem.operator_details[
|
|
57
|
-
serviceItem.operator_details[
|
|
50
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
|
|
51
|
+
serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
52
|
+
serviceItem.operator_details[ratingIndex])[3]] &&
|
|
53
|
+
parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
54
|
+
serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
|
|
55
|
+
? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
56
|
+
serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
|
|
58
57
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
|
|
59
|
-
React.createElement("div", { className: "px-
|
|
58
|
+
React.createElement("div", { className: "px-1 py-2 text-center text-[12px] font9", style: {
|
|
60
59
|
backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
|
|
61
60
|
color: isSoldOut ? "#c0c0c1" : "#ff8f45",
|
|
62
|
-
} }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[
|
|
61
|
+
} }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[5]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
|
|
63
62
|
React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
|
|
64
63
|
? serviceItem.operator_details[1].toFixed(1)
|
|
65
64
|
: serviceItem.operator_details[1])));
|
|
@@ -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, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, }: ServiceItemProps & {
|
|
3
|
+
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|