Product Card Component

The ProductCard component is a versatile React component designed to display product information, coverages, add-ons, and buttons for actions.

Installation

To use the ProductCard component, you need to install the required dependencies:

npm install @bolttech/molecules-product-card

or

yarn add @bolttech/molecules-product-card

Usage

You can utilize the ProductCard component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import {ProductCard} from '@bolttech/molecules-product-card';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // Adjust the path to your component

function App() {
  // Sample data
  const productInfo = {
    productName: 'Product Name',
    productDescription: 'Product Description',
    productValue: '100.00',
    productCurrencyValue: '$',
    productDuration: '1 year',
    compareLabel: 'Compare',
    compareAction: () => console.log('Compare button clicked'),
    productImg: 'image-url.png',
  };

  const coverages = [
    {name: 'Coverage 1', value: 'Value 1'},
    {name: 'Coverage 2', value: 'Value 2'},
  ];

  const addOns = {
    additionalValue: '20.00',
    additionalValueCurrency: '$',
    checkboxLabel: 'Optional',
    checkboxId: 'optional-checkbox',
    specialDetails: [
      {label: 'Special Detail 1', icon: 'icon_name_1'},
      {label: 'Special Detail 2', icon: 'icon_name_2'},
    ],
  };

  const [isOpen, setIsOpen] = useState(false);

  const buttons = {
    showMoreButtonLabel: 'Show More',
    hideProductDetailsLabel: 'Hide Details',
    buyButtonLabel: 'Buy Now',
    buyButtonAction: () => console.log('Buy button clicked'),
    showMoreAction: (isOpenParam: boolean) => setIsOpen(isOpenParam),
  };

  const productDetails = {
    coveragesContainer: [
      {
        titleContainer: 'Coverage Details',
        coverages: [
          {name: 'Coverage 1', value: 'Value 1'},
          {name: 'Coverage 2', value: 'Value 2'},
        ],
      },
    ],
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      {/* Product Card component */}
      <ProductCard
        productInfo={productInfo}
        coverages={coverages}
        addOns={addOns}
        buttons={buttons}
        productDetails={productDetails}
        dataTestId="product-card"
      >
      <div>Dynamic Content (Top)</div>
      <div>Dynamic Content (Bottom)</div>
      <div>...rest</div>
      </ProductCard>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The ProductCard component accepts the following props:

| Prop | Type | Description | | ------------------ | --------------- | -------------------------------------------------------------- | | productInfo | object | Object containing information about the product. | | coverages | array | Array of coverages to display. | | addOns | object | Object containing information about add-ons. | | buttons | object | Object containing information about action buttons. | | productDetails | object | Object containing detailed information about the product. | | dataTestId | string | The data-testid attribute for testing purposes. | | isOpen | boolean | Boolean prop that controls if plan card is open or not. | | isCompareActive | boolean | Boolean prop that controls if compare is active or not. | | children | React.ReactNode | React.ReactNode[] | Content that will appear in details area, the first item will be above of coveragesContainer and the rest will be bellow.

The productInfo object should have the following properties:

• productName: The name of the product.
• productDescription: Description of the product (optional).
• productValue: The product's value.
• productCurrencyValue: Currency symbol for the product value.
• productDuration: Duration of the product (optional).
• compareLabel: Text for the compare button (optional).
• compareAction: Callback function for the compare button (optional).
• productImg: URL or React component for the product image (optional).

The coverages array should contain objects with name and value properties.

The addOns object should have the following properties:

• additionalValue: Additional value for add-ons.
• additionalValueCurrency: Currency symbol for the additional value.
• checkboxLabel: Label for the optional checkbox.
• checkboxId: ID for the optional checkbox.
• specialDetails: Array of special details for add-ons.

The buttons object should have the following properties:

• showMoreButtonLabel: Label for the "Show More" button.
• hideProductDetailsLabel: Label for the "Hide Details" button.
• buyButtonLabel: Label for the "Buy Now" button.
• buyButtonAction: Callback function for the "Buy Now" button.
• showMoreAction: The callback function for control if details section is open or not.

The productDetails object should have the following properties:

• coveragesContainer: Array of objects with title and coverages.

Functionality

The ProductCard component provides the following functionality:

• Display: Renders product information, coverages, add-ons, and buttons.
• Price Calculation: Calculates the current product price based on selected options.
• Toggling: Toggles product details and compare state.
• Action Buttons: Triggers actions for compare and buy buttons.

Contribution

Contributions to the ProductCard component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.