npm package: @licuido-ui/ui_billing-payment
Description: The BillingAndPayment component is designed to provide a user interface for entering billing and payment details. It consists of sections with various input fields like credit/debit card information, billing details, etc.
Latest version: 0.0.2

# BillingAndPayment

The BillingAndPayment component is designed to provide a user interface for entering billing and payment details. It consists of sections with various input fields like credit/debit card information, billing details, etc.

### Author

- @author Akila K <akila@crayond.co>

---

## Link

[Story Book Link EmptyPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_billing-payment
```

## Import component

```jsx
import { BillingAndPayment } from '@licuido-ui/ui_billing-payment';
```

## Usage

```jsx
<BillingAndPayment
  title='Secure Payment'
  description='Please provide the following details for payment processing:'
  section={[
      {
        subTitle: 'Card Details',
        items: [
          {
            breakpoints: {
              sm: 8,
              md: 8,
              lg: 8,
              xs: 6,
            },
            label: 'Credit /debit card Number',
            cardImage: true,
            fullWidth: true,
            inputType: 'input',
            type: 'text',
            value: '',
            maxNumber: 19,
            errorMessage: 'please Enter card Number',
            required: true,
            validationType: 'cardNumber',
          },
          {
            breakpoints: {
              sm: 4,
              md: 4,
              lg: 4,
              xs: 6,
            },
            label: 'Account holder Name',
            fullWidth: true,
            inputType: 'input',
            value: '',
            errorMessage: 'please Enter Name',
            required: true,
          },
          {
            breakpoints: {
              sm: 4,
              md: 5,
              lg: 4,
              xs: 6,
            },
            label: 'Month / Year',
            fullWidth: true,
            inputType: 'date',
            dateFormat: 'MM-YYYY',
            value: '',
            error: false,
            errorMessage: 'please select any value',
            required: true,
          },
          {
            breakpoints: {
              sm: 4,
              md: 3,
              lg: 4,
              xs: 6,
            },
            label: 'Cvv',
            fullWidth: true,
            inputType: 'input',
            value: '',
            maxNumber: 3,
            errorMessage: 'please Enter Valid Cvv',
            type: 'number',
            required: true,
          },
        ],
      },
      {
        subTitle: 'Billing Details',
        items: [
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'First Name',
            inputType: 'input',
            value: '',
            fullWidth: true,
            errorMessage: 'Please enter First Name',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'Last Name',
            inputType: 'input',
            value: '',
            fullWidth: true,
            errorMessage: 'Please enter Last Name',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'Address Line 1',
            inputType: 'input',
            value: '',
            fullWidth: true,
            errorMessage: 'Please enter Address',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'Address Line 2',
            inputType: 'input',
            value: '',
            fullWidth: true,
            errorMessage: 'Please enter Address',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'City',
            inputType: 'dropdown',
            fullWidth: true,
            selectOption: [{ label: 'chennai', value: 'chennai' }],
            value: '',
            errorMessage: 'Please select a value',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'Zip code/ Postal code',
            fullWidth: true,
            type: 'number',
            value: '',
            inputType: 'input',
            errorMessage: 'Please enter Zip code/ Postal code',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'State',
            inputType: 'dropdown',
            fullWidth: true,
            value: '',
            selectOption: [{ label: 'New York', value: 'New York' }],
            errorMessage: 'Please select a value',
          },
          {
            breakpoints: {
              sm: 6,
              md: 6,
              lg: 6,
              xs: 6,
            },
            label: 'Country',
            inputType: 'dropdown',
            fullWidth: true,
            value: '',
            selectOption: [
              { label: 'US', value: 'US' },
              { label: 'IN', value: 'US' },
            ],
            errorMessage: 'Please select a value',
          },
        ],
      },
    ],}
  buttons={actionButtons}
/>
```

1.  `section` array represents a section with `subTitle` and `items` .
2.  `items` array represents an input field with `inputStyle` , `labelStyle` ,`label` ,`inputType` and etc.(kindly refer props table)

## Image

![billingAndPayment](./billingAndPayment.png)

## Props

| Prop                   | Type   | Default                                 | Description                                                                            |
| ---------------------- | ------ | --------------------------------------- | -------------------------------------------------------------------------------------- |
| `title`                | string | 'Payment'                               | The main title of the billing and payment section.                                     |
| `description`          | string | 'Please provide the following details:' | A brief description of the purpose of entering billing and payment details.            |
| `section`              | array  | See example below                       | An array of objects representing different sections within the component.              |
| `buttons`              | array  | []                                      | An array of button configurations for different actions associated with the component. |
| `className`            | string | ''                                      | Custom class name for the root element of the component.                               |
| `sx`                   | object | {}                                      | Custom style prop using MUI's styling system.                                          |
| `gridContainerProps`   | object | {}                                      | Additional props for the `Grid` component that wraps input fields.                     |
| `titleStyle`           | object | {}                                      | Custom styles for the title element.                                                   |
| `descStyle`            | object | {}                                      | Custom styles for the description element.                                             |
| `subTitleStyle`        | object | {}                                      | Custom styles for the subtitle element.                                                |
| `rootStyle`            | object | {}                                      | Custom styles for the root element of the component.                                   |
| `buttonContainerStyle` | object | {}                                      | Custom styles for the container of action buttons.                                     |

Each object within the `section` array represents a section with the following props:

| Prop       | Type   | Default | Description                                                |
| ---------- | ------ | ------- | ---------------------------------------------------------- |
| `subTitle` | string | ''      | The subtitle for the section.                              |
| `items`    | array  | []      | An array of input field configurations within the section. |

Each object within the `items` array represents an input field with the following props:

| Prop             | Type          | Default   | Description                                                                            |
| ---------------- | ------------- | --------- | -------------------------------------------------------------------------------------- |
| `inputType`      | string        | 'input'   | Type of input: 'dropdown', 'date', or 'input'.                                         |
| `label`          | string        | ''        | Label for the input field.                                                             |
| `labelStyle`     | object        | {}        | Custom styles for the label element.                                                   |
| `inputStyle`     | object        | {}        | Custom styles for the input element.                                                   |
| `selectOption`   | array         | []        | An array of objects for dropdown options (only for 'dropdown' inputType).              |
| `value`          | string/number | ''        | Initial value for the input field.                                                     |
| `error`          | boolean       | false     | Whether the input field has an error.                                                  |
| `placeholder`    | string        | ''        | Placeholder text for the input field.                                                  |
| `onChange`       | function      | () => {}  | Event handler for input change.                                                        |
| `errorMessage`   | string        | ''        | Error message to display on validation failure.                                        |
| `required`       | boolean       | false     | Whether the input is required.                                                         |
| `breakpoints`    | object        | {}        | Custom breakpoints for the input field layout within a section.                        |
| `fullWidth`      | boolean       | false     | Whether the input field should take full width.                                        |
| `endAdornment`   | node          | null      | JSX node to place at the end of the input field.                                       |
| `type`           | string        | 'text'    | Type of input: 'number' or 'text'.                                                     |
| `dateType`       | string        | 'date'    | Type of date input: 'date' or 'dateAndTime' (only for 'date' inputType).               |
| `maxNumber`      | number/string | undefined | Maximum number of characters for input (only for 'input' inputType).                   |
| `dateFormat`     | string        | 'MM/yyyy' | Format of the date to display (only for 'date' inputType with 'dateAndTime' dateType). |
| `cardImage`      | boolean       | false     | Whether to display the card image (only for card number input).                        |
| `validationType` | string        | 'text'    | Validation type: 'cardNumber', 'cvv', 'text', or 'postalCode'.                         |

Each object within the `buttons` array represents an action button with the following props:

| Prop          | Type     | Default  | Description                                      |
| ------------- | -------- | -------- | ------------------------------------------------ |
| `buttonText`  | string   | ''       | Text to display on the action button.            |
| `onClick`     | function | () => {} | Event handler for button click.                  |
| `styles`      | object   | {}       | Custom styles for the action button.             |
| `breakpoints` | object   | {}       | Custom breakpoints for the action button layout. |