kupos-ui-components-lib 9.1.3 → 9.1.5

package/README copy.md

@@ -1,7 +1,6 @@
-# Service Item Package
+# Kupos UI Components
 
-A reusable React component for displaying service items in transportation and
-booking applications.
+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.
 
 ## Installation
 
@@ -11,104 +10,240 @@ npm install kupos-ui-components-lib
 yarn add kupos-ui-components-lib
 ```
 
+**Peer dependencies:** `react` (>=17), `react-dom` (>=17)
+
+After installing, import the compiled CSS in your app entry point:
+
+```js
+import "kupos-ui-components-lib/dist/styles.css";
+```
+
+---
+
+## Components Overview
+
+| Component             | Description                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------- |
+| **ServiceItem**       | Displays a bus/train service with operator info, schedule, pricing, amenities, and booking action |
+| **PaymentSideBar**    | Order summary sidebar with seat details, pricing breakdown, promo codes, and countdown timer      |
+| **ServiceList**       | Renders a filterable, sortable list of services                                                   |
+| **FilterBar**         | Time-of-day, operator, and terminal filters for service schedules                                 |
+| **CuponeraFilterBar** | Specialized filter bar for cuponera (coupon) seat selection                                       |
+
+Each component ships in three variants:
+
+- **Desktop** — e.g. `ServiceItemDesktop`
+- **Mobile** — e.g. `ServiceItemMobile`
+- **Responsive** — e.g. `ResponsiveServiceItem` (auto-selects based on the `variant` prop)
+
+---
+
 ## Usage
 
-### Using the KuposUIComponent
+### Option 1: Unified `KuposUIComponent`
 
-The `KuposUIComponent` is a versatile component that can render different UI components based on the `typeOfComponent` prop:
+A single entry-point component that renders the correct component based on `typeOfComponent`:
 
-```jsx
+```tsx
 import { KuposUIComponent } from "kupos-ui-components-lib";
-import "kupos-ui-components-lib/dist/styles.css"; // If you add CSS in the future
-
-// Sample data
-const serviceItem = {
-  id: "12345",
-  operator_details: [
-    "https://example.com/logo.png", // logo URL
-    "4.5", // rating
-    "Operator Name", // operator name
-  ],
-  travel_date: "2025-08-01T09:00:00Z",
-  arrival_date: "2025-08-01T12:00:00Z",
-  dep_time: "09:00",
-  arr_time: "12:00",
-  available_seats: 5,
-  seat_types: [
-    { label: "Salon Cama", fare: 50 },
-    { label: "Premium", fare: 75 },
-    { label: "Economy", fare: 40 },
-  ],
-  offer_text: "Limited time offer: 20% off!",
-  is_direct_trip: true,
-};
+import "kupos-ui-components-lib/dist/styles.css";
 
 function App() {
   return (
-    <div>
-      {/* Render Service Item */}
+    <>
+      {/* Service Item */}
       <KuposUIComponent
         typeOfComponent="serviceitem"
         variant="desktop"
         serviceItem={serviceItem}
-        onBookButtonPress={() => console.log("Book pressed!")}
+        colors={colors}
+        onBookButtonPress={() => console.log("Booked!")}
       />
-      
-      {/* Render Payment Sidebar */}
+
+      {/* Payment Sidebar */}
       <KuposUIComponent
         typeOfComponent="paymentsidebar"
-        variant="desktop"
-        // Add payment sidebar specific props here
+        variant="mobile"
+        serviceNameOnward="Bus Santiago → Valparaíso"
+        selectSeatOnward={selectedSeats}
+        colors={colors}
       />
-      
-      {/* Render Service List */}
+
+      {/* Filter Bar */}
       <KuposUIComponent
-        typeOfComponent="servicelist"
-        variant="mobile"
-        // Add service list specific props here
+        typeOfComponent="filterbar"
+        variant="desktop"
+        allSchedules={schedules}
+        colors={colors}
       />
-    </div>
+    </>
   );
 }
 ```
 
-### Using Individual Components
+**Supported `typeOfComponent` values:** `"serviceitem"` | `"paymentsidebar"` | `"servicelist"` | `"filterbar"` | `"cuponerafilterbar"`
 
-You can also use the individual components directly:
+### Option 2: Individual Component Imports
 
-```jsx
-import { ServiceItemPB } from "kupos-ui-components-lib";
+Import only what you need for smaller bundles and full TypeScript type safety:
+
+```tsx
+import {
+  ServiceItemDesktop,
+  ServiceItemMobile,
+  ResponsiveServiceItem,
+  PaymentSideBarDesktop,
+  FilterBarMobile,
+} from "kupos-ui-components-lib";
+import "kupos-ui-components-lib/dist/styles.css";
 
 function App() {
   return (
-    <div>
-      <ServiceItemPB
-        serviceItem={serviceItem}
-        onBookButtonPress={() => console.log("Book pressed!")}
-      />
-    </div>
+    <ResponsiveServiceItem
+      variant="desktop"
+      serviceItem={serviceItem}
+      colors={colors}
+      onBookButtonPress={() => console.log("Booked!")}
+    />
   );
 }
 ```
 
-## Props
+**All available exports:**
+
+| Export                     | Type      |
+| -------------------------- | --------- |
+| `ServiceItemDesktop`       | Component |
+| `ServiceItemMobile`        | Component |
+| `ResponsiveServiceItem`    | Component |
+| `PaymentSideBarDesktop`    | Component |
+| `PaymentSideBarMobile`     | Component |
+| `ResponsivePaymentSideBar` | Component |
+| `ServiceListDesktop`       | Component |
+| `ServiceListMobile`        | Component |
+| `ResponsiveServiceList`    | Component |
+| `FilterBarDesktop`         | Component |
+| `FilterBarMobile`          | Component |
+| `ResponsiveFilterBar`      | Component |
+| `KuposUIComponent`         | Component |
+| `ServiceItemProps`         | Type      |
+| `MobileServiceItemProps`   | Type      |
+| `PaymentSideBarProps`      | Type      |
+| `ServiceListProps`         | Type      |
+| `FilterBarProps`           | Type      |
+
+---
+
+## Props Reference
+
+### `KuposUIComponent`
+
+| Prop              | Type     | Required | Description                                                                                        |
+| ----------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `typeOfComponent` | `string` | Yes      | `"serviceitem"` \| `"paymentsidebar"` \| `"servicelist"` \| `"filterbar"` \| `"cuponerafilterbar"` |
+| `variant`         | `string` | No       | `"mobile"` \| `"desktop"` — controls which layout renders                                          |
+| `...rest`         | various  | —        | All remaining props are forwarded to the underlying component                                      |
+
+### ServiceItem
+
+| Prop                    | Type       | Required | Description                                                |
+| ----------------------- | ---------- | -------- | ---------------------------------------------------------- |
+| `serviceItem`           | `object`   | Yes      | Service data (operator details, times, seats, fares, etc.) |
+| `colors`                | `object`   | Yes      | Theme colors (button, rating, price, labels, etc.)         |
+| `variant`               | `string`   | No       | `"desktop"` \| `"mobile"` \| `"auto"`                      |
+| `onBookButtonPress`     | `function` | No       | Callback when the book button is pressed                   |
+| `t`                     | `function` | No       | Translation function `(key: string) => string`             |
+| `translation`           | `object`   | No       | Key-value translation map                                  |
+| `orignLabel`            | `string`   | No       | Custom origin city label                                   |
+| `destinationLabel`      | `string`   | No       | Custom destination city label                              |
+| `serviceDetailsLoading` | `boolean`  | No       | Shows a loading state on the service card                  |
+
+### PaymentSideBar
+
+| Prop                | Type       | Required | Description                          |
+| ------------------- | ---------- | -------- | ------------------------------------ |
+| `serviceNameOnward` | `string`   | Yes      | Name of the outbound service         |
+| `serviceNameReturn` | `string`   | Yes      | Name of the return service           |
+| `selectSeatOnward`  | `any`      | Yes      | Selected seat data for outbound trip |
+| `selectSeatReturn`  | `any`      | Yes      | Selected seat data for return trip   |
+| `colors`            | `object`   | Yes      | Theme colors                         |
+| `variant`           | `string`   | No       | `"desktop"` \| `"mobile"`            |
+| `netFare`           | `number`   | No       | Net fare amount                      |
+| `discountAmount`    | `number`   | No       | Applied discount                     |
+| `promoCode`         | `any`      | No       | Applied promo code info              |
+| `countdown`         | `string`   | No       | Countdown timer value                |
+| `onButtonOneClick`  | `function` | No       | Primary action callback              |
+| `t`                 | `function` | No       | Translation function                 |
+
+### FilterBar
+
+| Prop             | Type       | Required | Description                                             |
+| ---------------- | ---------- | -------- | ------------------------------------------------------- |
+| `allSchedules`   | `any`      | No       | Full schedule data to filter                            |
+| `serviceList`    | `any`      | No       | Current filtered service list                           |
+| `setServiceList` | `function` | No       | Setter for updating filtered results                    |
+| `colors`         | `object`   | Yes      | `{ selectedColor, selectedTextColor }`                  |
+| `icons`          | `object`   | No       | Time-of-day icon URLs (sunrise, morning, sunset, night) |
+| `variant`        | `string`   | No       | `"desktop"` \| `"mobile"`                               |
+| `t`              | `function` | No       | Translation function                                    |
+
+### CuponeraFilterBar
+
+| Prop                 | Type       | Required | Description                                                 |
+| -------------------- | ---------- | -------- | ----------------------------------------------------------- |
+| `seats`              | `any`      | Yes      | Available seat data                                         |
+| `filters`            | `any`      | Yes      | Current filter state                                        |
+| `setFilters`         | `function` | Yes      | Setter to update filters                                    |
+| `expandedFilters`    | `any`      | Yes      | Expanded/collapsed state of filter groups                   |
+| `setExpandedFilters` | `function` | Yes      | Setter for expanded filter state                            |
+| `colors`             | `object`   | Yes      | `{ fontColor, selectedFontColor, selectedBackgroundColor }` |
+| `icons`              | `object`   | No       | `{ iconUp, iconDown, crossIcon }`                           |
+| `variant`            | `string`   | No       | `"desktop"` \| `"mobile"`                                   |
+
+---
+
+## Theming
+
+All components accept a `colors` object for theming. Common color keys include:
+
+```ts
+{
+  kuposButtonColor: "#FF6600",
+  topLabelColor: "#333",
+  priceColor: "#1A1A1A",
+  ratingBorderColor: "#E53935",
+  ratingBottomColor: "#FEF1EC",
+  secondaryBgColor: "#F5F5F5",
+  secondaryTextColor: "#666",
+  primaryButtonTextColor: "#FFFFFF",
+  bottomStripColor: "#FF6600",
+}
+```
+
+Components also accept an `icons` object to supply custom icon/image URLs and a `translation` object (or `t` function) for i18n.
 
-### KuposUIComponent Props
+---
 
-| Prop            | Type     | Description                                                |
-| --------------- | -------- | ---------------------------------------------------------- |
-| typeOfComponent | string   | Type of component to render: "serviceitem", "paymentsidebar", or "servicelist" |
-| variant         | string   | "mobile" or "desktop" to specify the variant               |
-| ...other props  | various  | All props required by the specific component type          |
+## Project Structure
 
-### ServiceItem Props
+```
+src/
+├── KuposUIComponent.tsx        # Unified entry-point component
+├── index.ts                    # Public exports
+├── types.ts                    # Shared ServiceItem types
+├── styles.css                  # Tailwind CSS + custom styles
+├── components/
+│   ├── ServiceItem/            # Desktop, Mobile, Responsive variants
+│   ├── PaymentSideBar/         # Desktop, Mobile, Responsive variants
+│   ├── ServiceList/            # Desktop, Mobile, Responsive variants
+│   ├── FilterBar/              # Desktop, Mobile, Responsive variants
+│   └── CuponeraFilterBar/      # Desktop, Mobile, Responsive variants
+├── ui/                         # Shared sub-components (Rating, Amenities, Duration, etc.)
+├── utils/                      # Helpers (CommonService, DateService, ModalEventManager)
+└── assets/                     # Static images and icons
+```
 
-| Prop                  | Type     | Description                                  |
-| --------------------- | -------- | -------------------------------------------- |
-| serviceItem           | Object   | The service item data object                 |
-| onBookButtonPress     | Function | Callback for when the book button is pressed |
-| serviceDetailsLoading | boolean  | Whether service details are loading          |
-| t                     | Function | Optional translation function                |
+---
 
 ## Development
 
@@ -116,10 +251,31 @@ function App() {
 # Install dependencies
 npm install
 
-# Build package
+# Build the package (TypeScript + Tailwind CSS + asset copy)
 npm run build
+
+# Watch mode (auto-rebuild on file changes)
+npm run watch
+```
+
+### Build Pipeline
+
+1. **TypeScript** — `tsc` compiles `src/` to `dist/`
+2. **Tailwind CSS** — `build-css.js` processes `src/styles.css` through PostCSS + Tailwind and outputs `dist/styles.css`
+3. **Assets** — `copy-assets.js` copies static assets into `dist/`
+
+### Publishing
+
+```bash
+# Bumps version, builds, and publishes to npm
+npm version patch   # or minor / major
+npm publish
 ```
 
+The `prepublishOnly` script automatically runs `npm run build` before publishing.
+
+---
+
 ## License
 
 MIT

package/dist/assets/images/anims/service_list/directo.json

@@ -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}]}]}
+{"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":[]}

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -316,7 +316,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "rating",
             width: "30%",
-            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",

package/dist/components/ServiceItem/RatingHover.js

@@ -1,8 +1,7 @@
 import React from "react";
 import RatingItem from "./RatingItem";
 const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, isPeru, }) => {
-    const handleRating = isPeru ? 7 : 6;
-    const handleBottomRating = isPeru ? 6 : 5;
+    const ratingIndex = isPeru ? 7 : 6;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
             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
                     if (tooltip)
                         tooltip.style.display = "none";
                 } }),
-            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: {
+            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: {
                     borderColor: isSoldOut ? "#c0c0c0" : colors.ratingBorderColor,
                     color: isSoldOut ? "#c0c0c0" : "",
                 } },
@@ -24,42 +23,42 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
                     React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
                     React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
                 React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
-                            serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[0]] &&
-                            parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[0]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[0]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
-                            serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[1]] &&
-                            parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[1]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[1]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
-                            serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[2]] &&
-                            parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[2]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[2]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[handleRating] &&
-                            serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[3]] &&
-                            parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[3]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[handleRating][Object.keys(serviceItem.operator_details[handleRating] &&
-                                serviceItem.operator_details[handleRating])[3]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
-                React.createElement("div", { className: "px-3 py-2 text-center text-[12px] font9 text-wrap", style: {
+                React.createElement("div", { className: "px-1 py-2 text-center text-[12px]  font9", style: {
                         backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
                         color: isSoldOut ? "#c0c0c1" : "#ff8f45",
-                    } }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[handleBottomRating]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
+                    } }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[5]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
         React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
             ? serviceItem.operator_details[1].toFixed(1)
             : serviceItem.operator_details[1])));

package/dist/components/ServiceItem/ServiceItemDesktop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-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 & {
+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 & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;