@tripadd/components
Component library to be used to display TripAdd products
💁 Getting started
installing
npm install @tripadd/components
import CardBundlem, 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, Product, BundleOnChangeParams } 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',
category: 'ACTIVITIES',
description: 'Surfing on sand dunes ',
name: 'Surfing',
pricing_type: 'PASSENGER',
quantity: 1,
short_description: 'Surfing on sand dunes',
bundled_pricing: {
fee: '2',
price: '200',
total: '202',
},
pricing: {
fee: '3',
price: '300',
total: '302',
},
},
{
id: '2',
category: 'LUGGAGE_PROTECTION',
description: 'Your luggage protection service',
name: 'Luggage Protection',
pricing_type: 'PASSENGER',
quantity: 1,
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,
passengers_count: 1,
language: 'en',
};
// the handler gets called with updated data every time the user interacts with the bundle offer
const onChangeHandler = ({selectedProducts, 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',
category: 'ACTIVITIES',
description: 'Surfing on sand dunes ',
name: 'Surfing',
pricing_type: 'PASSENGER',
quantity: 1,
short_description: 'Surfing on sand dunes',
bundled_pricing: {
total: '202',
},
pricing: {
total: '302',
},
},
{
id: '2',
category: 'LUGGAGE_PROTECTION',
description: 'Your luggage protection service',
name: 'Luggage Protection',
pricing_type: 'PASSENGER',
quantity: 1,
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: "en", "lt", "hu", "es" and "pt". You can customize translations to add more languages following this example:
const bundle: Bundle = {
id: '1',
currency: 'USD',
products: products,
passengers_count: 1,
language: 'de',
};
const translations = {
"de": {
"selectAll": "Alles auswählen, um zu erhalten",
"off": "RABATT",
"for": "für",
"totalPrice": "Gesamtpreis",
"moreInformation": "Weitere Informationen",
"close": "Schließen",
"passenger": "Passagier",
"passengers": "Passagiere",
"refundPolicy": "Rückgabebedingungen",
"nonRefundable": "Das Produkt ist nicht erstattungsfähig.",
"refundUntil": (date: string) => { return `Eine vollständige Rückerstattung ist möglich bis: ${date}` },
"termsAndConditions": "TripAdd Geschäftsbedingungen"
}
}
return (<CardBundle bundle={bundle} translations={translations} />);
License
MIT © TripAdd