kupos-ui-components-lib 9.1.2 → 9.1.3
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 +67 -223
- package/dist/assets/images/anims/service_list/directo.json +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +1 -1
- package/dist/components/ServiceItem/RatingHover.js +33 -32
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +267 -147
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +278 -87
- package/dist/components/ServiceItem/mobileTypes.d.ts +0 -5
- package/dist/components/ServiceItem/types.d.ts +0 -7
- package/dist/styles.css +32 -131
- package/dist/ui/AmenitiesBlock.js +30 -23
- package/dist/ui/DurationBlock.js +4 -4
- package/dist/ui/FlexibleBlock.js +6 -5
- package/dist/ui/PetBlock.js +3 -1
- package/dist/ui/RatingBlock.d.ts +1 -9
- package/dist/ui/RatingBlock.js +3 -7
- package/dist/utils/CommonService.d.ts +1 -1
- package/dist/utils/CommonService.js +0 -2
- package/package.json +1 -2
- package/src/assets/images/anims/service_list/directo.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +0 -1
- package/src/components/ServiceItem/RatingHover.tsx +45 -44
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +537 -313
- package/src/components/ServiceItem/ServiceItemMobile.tsx +530 -213
- package/src/components/ServiceItem/mobileTypes.ts +0 -5
- package/src/components/ServiceItem/types.ts +0 -7
- package/src/ui/AmenitiesBlock.tsx +29 -50
- package/src/ui/DurationBlock.tsx +4 -4
- package/src/ui/FlexibleBlock.tsx +5 -6
- package/src/ui/PetBlock.tsx +2 -2
- package/src/ui/RatingBlock.tsx +6 -18
- package/src/utils/CommonService.ts +0 -2
- package/src/assets/images/anims/service_list/bomb.json +0 -1
- package/src/ui/BottomAmenities/BottomAmenities.tsx +0 -110
- package/src/ui/DateTimeSection/DateTimeSection.tsx +0 -207
- package/src/ui/DirectoBlock.tsx +0 -31
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +0 -103
- package/src/ui/KuposButton/KuposButton.tsx +0 -48
- package/src/ui/SeatSection/SeatSection.tsx +0 -207
- package/src/ui/TopAmenities/TopAmenities.tsx +0 -127
- package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +0 -169
- package/src/ui/mobileweb/DateTimeSectionMobile.tsx +0 -192
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +0 -56
- package/src/ui/mobileweb/SeatSectionMobile.tsx +0 -256
- package/src/ui/mobileweb/TopAmenitieMobile.tsx +0 -126
package/README copy.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Service Item Package
|
|
2
2
|
|
|
3
|
-
A reusable React component
|
|
3
|
+
A reusable React component for displaying service items in transportation and
|
|
4
|
+
booking applications.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
@@ -10,240 +11,104 @@ npm install kupos-ui-components-lib
|
|
|
10
11
|
yarn add kupos-ui-components-lib
|
|
11
12
|
```
|
|
12
13
|
|
|
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
|
-
|
|
41
14
|
## Usage
|
|
42
15
|
|
|
43
|
-
###
|
|
16
|
+
### Using the KuposUIComponent
|
|
44
17
|
|
|
45
|
-
|
|
18
|
+
The `KuposUIComponent` is a versatile component that can render different UI components based on the `typeOfComponent` prop:
|
|
46
19
|
|
|
47
|
-
```
|
|
20
|
+
```jsx
|
|
48
21
|
import { KuposUIComponent } from "kupos-ui-components-lib";
|
|
49
|
-
import "kupos-ui-components-lib/dist/styles.css";
|
|
22
|
+
import "kupos-ui-components-lib/dist/styles.css"; // If you add CSS in the future
|
|
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
|
+
};
|
|
50
45
|
|
|
51
46
|
function App() {
|
|
52
47
|
return (
|
|
53
|
-
|
|
54
|
-
{/* Service Item */}
|
|
48
|
+
<div>
|
|
49
|
+
{/* Render Service Item */}
|
|
55
50
|
<KuposUIComponent
|
|
56
51
|
typeOfComponent="serviceitem"
|
|
57
52
|
variant="desktop"
|
|
58
53
|
serviceItem={serviceItem}
|
|
59
|
-
|
|
60
|
-
onBookButtonPress={() => console.log("Booked!")}
|
|
54
|
+
onBookButtonPress={() => console.log("Book pressed!")}
|
|
61
55
|
/>
|
|
62
|
-
|
|
63
|
-
{/* Payment Sidebar */}
|
|
56
|
+
|
|
57
|
+
{/* Render Payment Sidebar */}
|
|
64
58
|
<KuposUIComponent
|
|
65
59
|
typeOfComponent="paymentsidebar"
|
|
66
|
-
variant="
|
|
67
|
-
|
|
68
|
-
selectSeatOnward={selectedSeats}
|
|
69
|
-
colors={colors}
|
|
60
|
+
variant="desktop"
|
|
61
|
+
// Add payment sidebar specific props here
|
|
70
62
|
/>
|
|
71
|
-
|
|
72
|
-
{/*
|
|
63
|
+
|
|
64
|
+
{/* Render Service List */}
|
|
73
65
|
<KuposUIComponent
|
|
74
|
-
typeOfComponent="
|
|
75
|
-
variant="
|
|
76
|
-
|
|
77
|
-
colors={colors}
|
|
66
|
+
typeOfComponent="servicelist"
|
|
67
|
+
variant="mobile"
|
|
68
|
+
// Add service list specific props here
|
|
78
69
|
/>
|
|
79
|
-
|
|
70
|
+
</div>
|
|
80
71
|
);
|
|
81
72
|
}
|
|
82
73
|
```
|
|
83
74
|
|
|
84
|
-
|
|
75
|
+
### Using Individual Components
|
|
85
76
|
|
|
86
|
-
|
|
77
|
+
You can also use the individual components directly:
|
|
87
78
|
|
|
88
|
-
|
|
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";
|
|
79
|
+
```jsx
|
|
80
|
+
import { ServiceItemPB } from "kupos-ui-components-lib";
|
|
99
81
|
|
|
100
82
|
function App() {
|
|
101
83
|
return (
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
84
|
+
<div>
|
|
85
|
+
<ServiceItemPB
|
|
86
|
+
serviceItem={serviceItem}
|
|
87
|
+
onBookButtonPress={() => console.log("Book pressed!")}
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
108
90
|
);
|
|
109
91
|
}
|
|
110
92
|
```
|
|
111
93
|
|
|
112
|
-
|
|
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.
|
|
94
|
+
## Props
|
|
224
95
|
|
|
225
|
-
|
|
96
|
+
### KuposUIComponent Props
|
|
226
97
|
|
|
227
|
-
|
|
98
|
+
| Prop | Type | Description |
|
|
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 |
|
|
228
103
|
|
|
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
|
-
```
|
|
104
|
+
### ServiceItem Props
|
|
245
105
|
|
|
246
|
-
|
|
106
|
+
| Prop | Type | Description |
|
|
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 |
|
|
247
112
|
|
|
248
113
|
## Development
|
|
249
114
|
|
|
@@ -251,31 +116,10 @@ src/
|
|
|
251
116
|
# Install dependencies
|
|
252
117
|
npm install
|
|
253
118
|
|
|
254
|
-
# Build
|
|
119
|
+
# Build package
|
|
255
120
|
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
|
|
273
121
|
```
|
|
274
122
|
|
|
275
|
-
The `prepublishOnly` script automatically runs `npm run build` before publishing.
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
123
|
## License
|
|
280
124
|
|
|
281
125
|
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.25.0"},"layers":[{"ty":0,"nm":" Main Scene","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,250]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","ind":1}],"v":"5.7.0","fr":30,"op":90,"ip":0,"assets":[{"nm":"Main Scene","id":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","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":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":[1,1,1]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"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":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":[1,1,1]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"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}]}]}
|
|
@@ -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 })),
|
|
320
320
|
},
|
|
321
321
|
{
|
|
322
322
|
key: "duration",
|
|
@@ -1,7 +1,8 @@
|
|
|
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
|
|
4
|
+
const handleRating = isPeru ? 7 : 6;
|
|
5
|
+
const handleBottomRating = isPeru ? 6 : 5;
|
|
5
6
|
return (React.createElement("div", { className: "flex items-center" },
|
|
6
7
|
React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
|
|
7
8
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
|
|
@@ -13,7 +14,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
|
|
|
13
14
|
if (tooltip)
|
|
14
15
|
tooltip.style.display = "none";
|
|
15
16
|
} }),
|
|
16
|
-
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[
|
|
17
|
+
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[320px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]", style: {
|
|
17
18
|
borderColor: isSoldOut ? "#c0c0c0" : colors.ratingBorderColor,
|
|
18
19
|
color: isSoldOut ? "#c0c0c0" : "",
|
|
19
20
|
} },
|
|
@@ -23,42 +24,42 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
|
|
|
23
24
|
React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
|
|
24
25
|
React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
|
|
25
26
|
React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
|
|
26
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
27
|
-
serviceItem.operator_details[
|
|
28
|
-
serviceItem.operator_details[
|
|
29
|
-
parseFloat(serviceItem.operator_details[
|
|
30
|
-
serviceItem.operator_details[
|
|
31
|
-
? +parseFloat(serviceItem.operator_details[
|
|
32
|
-
serviceItem.operator_details[
|
|
27
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
|
|
28
|
+
serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
29
|
+
serviceItem.operator_details[handleRating])[0]] &&
|
|
30
|
+
parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
31
|
+
serviceItem.operator_details[handleRating])[0]]).toFixed(1)
|
|
32
|
+
? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
33
|
+
serviceItem.operator_details[handleRating])[0]]).toFixed(1)
|
|
33
34
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
|
|
34
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
35
|
-
serviceItem.operator_details[
|
|
36
|
-
serviceItem.operator_details[
|
|
37
|
-
parseFloat(serviceItem.operator_details[
|
|
38
|
-
serviceItem.operator_details[
|
|
39
|
-
? +parseFloat(serviceItem.operator_details[
|
|
40
|
-
serviceItem.operator_details[
|
|
35
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
|
|
36
|
+
serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
37
|
+
serviceItem.operator_details[handleRating])[1]] &&
|
|
38
|
+
parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
39
|
+
serviceItem.operator_details[handleRating])[1]]).toFixed(1)
|
|
40
|
+
? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
41
|
+
serviceItem.operator_details[handleRating])[1]]).toFixed(1)
|
|
41
42
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
|
|
42
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
43
|
-
serviceItem.operator_details[
|
|
44
|
-
serviceItem.operator_details[
|
|
45
|
-
parseFloat(serviceItem.operator_details[
|
|
46
|
-
serviceItem.operator_details[
|
|
47
|
-
? +parseFloat(serviceItem.operator_details[
|
|
48
|
-
serviceItem.operator_details[
|
|
43
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
|
|
44
|
+
serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
45
|
+
serviceItem.operator_details[handleRating])[2]] &&
|
|
46
|
+
parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
47
|
+
serviceItem.operator_details[handleRating])[2]]).toFixed(1)
|
|
48
|
+
? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
49
|
+
serviceItem.operator_details[handleRating])[2]]).toFixed(1)
|
|
49
50
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
|
|
50
|
-
React.createElement(RatingItem, { rating: serviceItem.operator_details[
|
|
51
|
-
serviceItem.operator_details[
|
|
52
|
-
serviceItem.operator_details[
|
|
53
|
-
parseFloat(serviceItem.operator_details[
|
|
54
|
-
serviceItem.operator_details[
|
|
55
|
-
? +parseFloat(serviceItem.operator_details[
|
|
56
|
-
serviceItem.operator_details[
|
|
51
|
+
React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
|
|
52
|
+
serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
53
|
+
serviceItem.operator_details[handleRating])[3]] &&
|
|
54
|
+
parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
55
|
+
serviceItem.operator_details[handleRating])[3]]).toFixed(1)
|
|
56
|
+
? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
|
|
57
|
+
serviceItem.operator_details[handleRating])[3]]).toFixed(1)
|
|
57
58
|
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
|
|
58
|
-
React.createElement("div", { className: "px-
|
|
59
|
+
React.createElement("div", { className: "px-3 py-2 text-center text-[12px] font9 text-wrap", style: {
|
|
59
60
|
backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
|
|
60
61
|
color: isSoldOut ? "#c0c0c1" : "#ff8f45",
|
|
61
|
-
} }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[
|
|
62
|
+
} }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[handleBottomRating]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
|
|
62
63
|
React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
|
|
63
64
|
? serviceItem.operator_details[1].toFixed(1)
|
|
64
65
|
: 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,
|
|
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 & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|