@tripadd/components

Component library to be used to display TripAdd products

💁 Getting started

installing

npm install @tripadd/components

import CardBundle or ListBundle (both accept same parameters)

import { CardBundle } from '@tripadd/components';

Since we are using typescript, we are also importing required types (JS users can skip adding type information)

import type { Bundle, Product } from '@tripadd/components';

Simple usage example - Bundle:

import * as React from 'react';
import { CardBundle } from '@tripadd/components';
import type { Bundle, Product } from '@tripadd/components';

// Functional Component
export const ExampleBundle = () => {
    // Construct products and bundle offer
    const products: Product[] = [
        {
            id: '1',
            category: 'ACTIVITIES',
            description: 'Surfing on sand dunes',
            price: '222',
            retail_price: '244',
            name: 'Surfing',
            pricing_type: 'PASSENGER',
            quantity: 1,
            short_description: 'Surfing on sand dunes',
            icon_url: 'https://linkto.com/iconurl.png',
        },
        {
            id: '2',
            category: 'LUGGAGE_PROTECTION',
            description: 'Your luggage protection service',
            price: '10',
            retail_price: '20',
            name: 'Luggage Protection',
            pricing_type: 'PASSENGER',
            quantity: 1,
            short_description: 'Protected your luggage',
            icon_url: 'https://linkto.com/iconurl.png',
        },
    ];

    const bundle: Bundle = {
        id: '1',
        currency: 'USD',
        price: '200',
        products: products,
        retail_price: '264',
        fee: {
            minimum: 5,
            percent: 10,
        },
        passengers_count: 1,
    };

    // the handler gets called with updated data every time the user interacts with the bundle offer
    const onChangeHandler = (selectedProducts: Product[], price: number) => {
        // pass to your back-end for ordering
    };

    // pass data for rendering
    return <CardBundle bundle={bundle} onChange={onChangeHandler} preSelectedProducts={products} />;
};

You can also render products separately:

import * as React from 'react';
import { ProductCard, Product } from '@tripadd/components';

// Functional Component
export const ExampleProducts = () => {
    const products: Product[] = [
        {
            id: '1',
            category: 'ACTIVITIES',
            description: 'Surfing on sand dunes',
            price: '222',
            retail_price: '244',
            name: 'Surfing',
            pricing_type: 'PASSENGER',
            quantity: 1,
            short_description: 'Surfing on sand dunes',
            icon_url: 'https://linkto.com/iconurl.png',
        },
        {
            id: '2',
            category: 'LUGGAGE_PROTECTION',
            description: 'Your luggage protection service',
            price: '10',
            retail_price: '20',
            name: 'Luggage Protection',
            pricing_type: 'PASSENGER',
            quantity: 1,
            short_description: 'Protected your luggage',
            icon_url: 'https://linkto.com/iconurl.png',
        },
    ];

    // the handler gets called with updated data every time the user interacts with the bundle offer
    const onClickHandler = (product: Product, price: number) => {
        // handling product directly instead of rendering the bundle gives you more flexibility from the UI side,
        // but then you need to manage the state of selected products yourself
    };

    // pass data for rendering
    return (
        <>
            {products.map((product) => (
                <ProductCard product={product} onClick={onClickHandler} key={product.id} />
            ))}
        </>
    );
};

Component styling

Colors

You can customize component color scheme by passing primaryColor and secondaryColor props to CardBundle / ListBundle / ProductCard components. Example:

    return (
        <CardBundle primaryColor="#0060BB" secondaryColor="#FBB321" bundle={...} onChange={...} preSelectedProducts={...} />
    );

Fonts

The components inherit font styles from the page to match it. You can customize the font by changing it on the container rendering the components.

License

MIT © TripAdd