Service Item Package

A reusable React component for displaying service items in transportation and booking applications.

Installation

npm install kupos-ui-components-lib
# or
yarn add kupos-ui-components-lib

Usage

Using the KuposUIComponent

The KuposUIComponent is a versatile component that can render different UI components based on the typeOfComponent prop:

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,
};

function App() {
  return (
    <div>
      {/* Render Service Item */}
      <KuposUIComponent
        typeOfComponent="serviceitem"
        variant="desktop"
        serviceItem={serviceItem}
        onBookButtonPress={() => console.log("Book pressed!")}
      />
      
      {/* Render Payment Sidebar */}
      <KuposUIComponent
        typeOfComponent="paymentsidebar"
        variant="desktop"
        // Add payment sidebar specific props here
      />
      
      {/* Render Service List */}
      <KuposUIComponent
        typeOfComponent="servicelist"
        variant="mobile"
        // Add service list specific props here
      />
    </div>
  );
}

Using Individual Components

You can also use the individual components directly:

import { ServiceItemPB } from "kupos-ui-components-lib";

function App() {
  return (
    <div>
      <ServiceItemPB
        serviceItem={serviceItem}
        onBookButtonPress={() => console.log("Book pressed!")}
      />
    </div>
  );
}

Props

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

ServiceItem Props

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

# Install dependencies
npm install

# Build package
npm run build

License

MIT