npm package: @licuido-ui/ui_pricing
Description: Pricing - Pricing component, There two variation of pricing card
Latest version: 0.0.2

# Pricing
Pricing - Pricing component, There two variation of pricing card

### Author

- @author Arunachalam R <arunachalam@crayond.co>

## Link

[Story Book Link pricing](http://216.48.182.148:3333/?path=/docs/components-pricing--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_pricing
```

## Import component

```jsx
import { Pricing } from '@licuido-ui/ui_pricing';
```

## Usage

```jsx
<Pricing
 variation1={true}
 variation2={false} 
 pricing={pricingCard}
 onPricingChanges={onPricingChanges}
 onStartPlan={onSelectedPlan} />
```
## Image
 Variation One

![alt text](./assets/pricingone.png)

 Variation Two

![alt text](./assets/pricingtwo.png)

## SampleCode

```jsx
<Pricing
 variation1={true}
 variation2={false} 
 pricing={  
        title: 'Free',
        description: ' More advanced AI.',
        pricingList: [
          {
            icon: icon,
            isCancel: false,
            listPoints: '30 days history',
          },
          {
            icon: icon,
            isCancel: false,
            listPoints: 'Up to 1000 message/mo',
          },
          {
            icon: icon,
            isCancel: false,
            listPoints: 'Limited AI',
          },
        ],

        subcriptionAmountMonthly: '0',
        subcriptionAmountYearly: '0',
        offerYouSave: '',
        subscriptionDue: 'month',
        totalAmount: '',
        getStartedbtn: '',
        currencySymbol: '$',
        }
 onPricingChanges={onPricingChanges}
 onStartPlan={onSelectedPlan} />
 variation2TotalLeftBoxStyle={{}}
 pricingDetailsListStyle={{}}
 ccvsSx={{}}
 billAmountStyle={{}}
 cardBoxShadow={''}
 footerSubPara={ 'By clicking "Strat Brainwave Enterprise    Plan", you agree to be charged $399 every month, unless you cancel.'}
 applyPromoCode={ 'Apply promo code'}
 getStartedPaymentplan={' Start Brainwave Enterprise plan'}
 billPaymentAmount={ 'Billed now'}
 emailHeader={ ' Billing email'}
 cardNumberTitle={ 'Billing email'},
 commonTextColor={ '#3B3B3B'},
 activeColor={'#665CD7'},
 VerfiyIcon= <AcceptIcon />,
 promoCodeSx={promoCodeStyle},
 onPricingChanges={()=>{}}
 onStartPlan={()=>{}}
 onGetStartPlan={()=>{}}
```

### Props
 | **Name**                           | **Description** | **Default** | **Control**                                                                                                  |
 | ---------------------------------- | --------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
 | **variation1**                     |                 | \-          | FalseTrue                                                                                                    |
 | **variation2**                     |                 | \-          | FalseTrue                                                                                                    |
 | **pricingCardVariationOne**        |                 | \-          | pricingCardVariationOne : \[0 : \{\.\.\.\} 7 keys1 : \{\.\.\.\} 7 keys2 : \{\.\.\.\} 7 keys\]                |
 | **pricingCardVariationTwo**        |                 | \-          | pricingCardVariationTwo : \[0 : \{\.\.\.\} 10 keys1 : \{\.\.\.\} 10 keys\]                                   |
 | **onStartPlan**                    |                 | \-          | \-                                                                                                           |
 | **onGetStartPlan**                 |                 | \-          | \-                                                                                                           |
 | **activeColor**                    |                 | \-          | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);                                              |
 | **footerSubPara**                  |                 | \-          | By clicking "Strat Brainwave Enterprise Plan", you agree to be charged $399 every month, unless you cancel\. |
 | **applyPromoCode**                 |                 | \-          | Apply promo code                                                                                             |
 | **getStartedPaymentplan**          |                 | \-          | Start Brainwave Enterprise plan                                                                              |
 | **billPaymentAmount**              |                 | \-          | Billed now                                                                                                   |
 | **emailHeader**                    |                 | \-          | Billing email                                                                                                |
 | **cardNumberTitle**                |                 | \-          | Billing email                                                                                                |
 | **variationPositionStyle**         |                 | \-          | variationPositionStyle : \{\}                                                                                |
 | **billAmountStyle**                |                 | \-          | billAmountStyle : \{\}                                                                                       |
 | **Variation2RigthBoxStyle**        |                 | \-          | Variation2RigthBoxStyle : \{\}                                                                               |
 | **paymentSelectedCardSx**          |                 | \-          | paymentSelectedCardSx : \{\}                                                                                 |
 | **onPricingChanges**               |                 | \-          | \-                                                                                                           |
 | **emailInputSx**                   |                 | \-          | emailInputSx : \{\}                                                                                          |
 | **pricing**                        |                 | \-          | Set object                                                                                                   |
 | **variation1TotalPricingBoxStyle** |                 | \-          | variation1TotalPricingBoxStyle : \{\}                                                                        |
 | **pricingCardOneSx**               |                 | \-          | pricingCardOneSx : \{\}                                                                                      |
 | **variation2TotalLeftBoxStyle**    |                 | \-          | variation2TotalLeftBoxStyle : \{\}                                                                           |
 | **ccvsSx**                         |                 | \-          | ccvsSx : \{\}                                                                                                |
 | **promoCodeSx**                    |                 | \-          | promoCodeSx : \{\}                                                                                           |
 | **commonTextColor**                |                 | \-          | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);                                              |
 | **onVariationOneTestBddId**        |                 | \-          |
 | **pricingCardSx**                  |                 | \-          | pricingCardSx : \{\}                                                                                         |
 | **onVariationOneBddId**            |                 | \-          |
 | **pricinglistbddId**               |                 | \-          |
 | **cardBoxShadow**                  |                 | \-          |
 | **pricingtestId**                  |                 | \-          |
 | **startPlanBtnStyle**              |                 | \-          | startPlanBtnStyle : \{\}                                                                                     |