@tripadd/components

Component library to be used to display TripAdd products

💁 Getting started

installing

npm install @tripadd/components

import CardBundle, ListBundle or DetailedListBundle (all 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, BundleOnChangeParams, Product } from '@tripadd/components';

Bundle UI example:

Simple usage example - Bundle:

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

// Functional Component
export const ExampleBundle = () => {
    // Construct products and bundle offer
    const products: Product[] = [
        {
            id: '1',
            age_categories: ['ADULT'],
            category: 'ACTIVITIES',
            description: 'Surfing on sand dunes ',
            name: 'Surfing',
            pricing_type: 'PASSENGER',
            short_description: 'Surfing on sand dunes',
            bundled_pricing: {
                fee: '2',
                price: '200',
                total: '202',
            },
            pricing: {
                fee: '3',
                price: '300',
                total: '302',
            },
        },
        {
            id: '2',
            age_categories: ['ADULT'],
            category: 'LUGGAGE_PROTECTION',
            description: 'Your luggage protection service',
            name: 'Luggage Protection',
            pricing_type: 'PASSENGER',
            short_description: 'Protected your luggage',
            bundled_pricing: {
                fee: '1',
                price: '100',
                total: '101',
            },
            pricing: {
                fee: '4',
                price: '400',
                total: '404',
            },
        },
    ];

    const bundle: Bundle = {
        id: '1',
        currency: 'USD',
        products: products,
        language: 'en',
        passengers: [
            {
                age_category: 'ADULT',
            },
        ],
    };

    // the handler gets called with updated data every time the user interacts with the bundle offer
    const onChangeHandler = ({ passengerPurchases, price, retailPrice }: BundleOnChangeParams) => {
        // 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 { Product, ProductCard } from '@tripadd/components';
import * as React from 'react';

// Functional Component
export const ExampleProducts = () => {
    const products: Product[] = [
        {
            id: '1',
            age_categories: ['ADULT'],
            category: 'ACTIVITIES',
            description: 'Surfing on sand dunes ',
            name: 'Surfing',
            pricing_type: 'PASSENGER',
            short_description: 'Surfing on sand dunes',
            bundled_pricing: {
                total: '202',
            },
            pricing: {
                total: '302',
            },
        },
        {
            id: '2',
            age_categories: ['ADULT'],
            category: 'LUGGAGE_PROTECTION',
            description: 'Your luggage protection service',
            name: 'Luggage Protection',
            pricing_type: 'PASSENGER',
            short_description: 'Protected your luggage',
            bundled_pricing: {
                total: '101',
            },
            pricing: {
                total: '404',
            },
        },
    ];

    // 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.

You can customize component font-weight's by passing fontWeights object props to CardBundle / ListBundle / DetailedListBundle / ProductCard components. fontWeights prop supports three weights - normal, medium, bold. Example:

    return (
        <CardBundle fontWeights={{normal: "400", medium: "500", bold: "600" }} bundle={...} onChange={...} preSelectedProducts={...} />
    );

Translations

The language in UI components depends on the language set in the bundle object. These languages are included with the components:

Arabic ("ar")
German ("de")
English ("en")
Spanish ("es")
French ("fr")
Hungarian ("hu")
Italian ("it")
Lithuanian ("lt")
Portugese ("pt")
Chinese ("zh_CN", "zh_TW")

You can customize translations to add more languages following this example:

const bundle: Bundle = {
    id: '1',
    currency: 'USD',
    products: products,
    language: 'de',
};

const translations = {
    "de": {
        selectAll: 'Im Paket kaufen',
        off: 'Rabatt',
        for: 'für',
        totalPrice: 'Gesamtpreis',
        moreInformation: 'Weitere Informationen',
        close: 'Schließen',
        passenger: 'Passagier',
        passengers: 'Passagiere',
        refundPolicy: 'Erstattungsrichtlinien',
        nonRefundable: 'Das Produkt ist nicht erstattungsfähig.',
        termsAndConditions: 'AGB von TripAdd',
        refundUntil: (date: string) => {
            return `Eine komplette Rückerstattung ist bis ${date} möglich`;
        },
    }
}

return (<CardBundle  bundle={bundle} translations={translations} />);