@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',
      currency: 'USD',
      bundled_price: '202',
      standalone_price: '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',
      currency: 'USD',
      bundled_price: '101',
      standalone_price: '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} onSelectedProductsChange={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',
      currency: 'USD',
      bundled_price: '202',
      standalone_price: '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',
      currency: 'USD',
      bundled_price: '101',
      standalone_price: '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 and font weights by passing a theme prop to CardBundle / ListBundle components. Example:

    return (
        <CardBundle
            theme={{
                primaryColor: "#0060BB",
                secondaryColor: "#FBB321",
                fontWeights: { normal: "400", medium: "500", bold: "600" },
            }}
            bundle={...}
            onSelectedProductsChange={...}
            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.

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',
    add: 'Hinzufügen',
    remove: 'Entfernen',
    edit: 'Bearbeiten',
    from: 'ab',
    forAllPassengers: 'für alle Passagiere',
    refundUntil: (date: string) => {
      return `Eine komplette Rückerstattung ist bis ${date} möglich`;
    },
  },
};

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

License

MIT © TripAdd