Pricing

Pricing - Pricing component, There two variation of pricing card

Author

• @author Arunachalam R [email protected]

Link

Story Book Link pricing

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_pricing

Import component

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

Usage

<Pricing
 variation1={true}
 variation2={false} 
 pricing={pricingCard}
 onPricingChanges={onPricingChanges}
 onStartPlan={onSelectedPlan} />

Image

Variation One

Variation Two

SampleCode

<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 : {} |