@bikdotai/bik-component-library 0.0.170 → 0.0.171
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,6 +23,7 @@ export interface SubscriptionPlanProps {
|
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
25
|
extraBlockMessage?: string;
|
|
26
|
+
isLoading?: boolean;
|
|
26
27
|
}
|
|
27
28
|
type Props = SubscriptionPlanProps;
|
|
28
29
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),r.extraBlockMessage&&e.jsx(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:r.extraBlockMessage})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../button/Button.js"),i=require("./SubscriptionPlanStyled.js"),a=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.SubscriptionPlan=r=>{const c=r.showMonthly?r.monthlyPlan:r.yearlyPlan,l=!r.isDisabled&&r.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isSelected:r.isSelected||!1,style:{marginTop:l?0:24}},{children:[l&&e.jsx("div",Object.assign({className:"most-popular"},{children:e.jsx(a.Caption,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${r.isSelected?"selected":""} ${r.isDisabled?"disabled":""} ${l?"":"rounded-corners"}\n\t\t\t\t`},{children:[e.jsxs("div",{children:[e.jsx(a.TitleRegular,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:4}},{children:r.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleLarge,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",c.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",r.showMonthly?"month":"year"]}))]})),e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.content.secondary}},{children:r.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:r.planDescriptionDiscount}))]})),r.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:["7 day free trial with ",r.freeTrialMessages," messages"]})),r.extraBlockMessage&&e.jsx(a.Caption,Object.assign({className:"trial "+(r.isSelected?"selected":"")},{children:r.extraBlockMessage})),e.jsx("div",Object.assign({className:"features"},{children:r.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx(s.default,{height:16,width:16,color:n.COLORS.content.primary}),e.jsx(a.BodyPrimary,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsx("div",Object.assign({className:"button-box"},{children:r.isLoading?e.jsx(t.Button,{isLoading:!0,buttonType:"primary",buttonText:"Selected Plan",size:"medium",matchParentWidth:!0}):e.jsxs(e.Fragment,{children:[r.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),r.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!r.isSelected&&!r.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>r.onPlanSelect(r.code),matchParentWidth:!0,buttonText:"Choose plan"})]})}))]})),e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${r.isDisabled?"disabled":""}\n\t\t\t\t\t${r.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:r.bottomDescription}))}))]}))};
|
|
@@ -23,6 +23,7 @@ export interface SubscriptionPlanProps {
|
|
|
23
23
|
bottomDescription?: string;
|
|
24
24
|
freeTrialMessages?: string;
|
|
25
25
|
extraBlockMessage?: string;
|
|
26
|
+
isLoading?: boolean;
|
|
26
27
|
}
|
|
27
28
|
type Props = SubscriptionPlanProps;
|
|
28
29
|
export declare const SubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import{Button as a}from"../button/Button.js";import{SubscriptionPlanStyled as n}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as l,TitleLarge as r,BodyPrimary as o,BodyCaption as d}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const b=b=>{const h=b.showMonthly?b.monthlyPlan:b.yearlyPlan,p=!b.isDisabled&&b.isMostPopular;return e(n,Object.assign({isSelected:b.isSelected||!1,style:{marginTop:p?0:24}},{children:[p&&t("div",Object.assign({className:"most-popular"},{children:t(c,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e("div",Object.assign({className:`box ${b.isSelected?"selected":""} ${b.isDisabled?"disabled":""} ${p?"":"rounded-corners"}\n\t\t\t\t`},{children:[e("div",{children:[t(l,Object.assign({style:{color:m.content.secondary,marginBottom:4}},{children:b.planName})),e("div",Object.assign({className:"price-block"},{children:[e(r,Object.assign({style:{color:m.content.primary}},{children:["$ ",h.price]})),e(o,Object.assign({style:{color:m.content.secondary,marginLeft:4}},{children:["/ ",b.showMonthly?"month":"year"]}))]})),e("div",Object.assign({className:"per-message-price"},{children:[t(d,Object.assign({style:{color:m.content.secondary}},{children:b.planDescription})),t(d,Object.assign({style:{color:m.background.positive.vibrant,marginLeft:4}},{children:b.planDescriptionDiscount}))]})),b.showTrialOptions&&e(c,Object.assign({className:"trial "+(b.isSelected?"selected":"")},{children:["7 day free trial with ",b.freeTrialMessages," messages"]})),b.extraBlockMessage&&t(c,Object.assign({className:"trial "+(b.isSelected?"selected":"")},{children:b.extraBlockMessage})),t("div",Object.assign({className:"features"},{children:b.features.map(((s,a)=>e("div",Object.assign({className:"feature"},{children:[t(i,{height:16,width:16,color:m.content.primary}),t(o,Object.assign({className:"feature-text"},{children:s.detail}),a)]}),s.detail)))}))]}),t("div",Object.assign({className:"button-box"},{children:b.isLoading?t(a,{isLoading:!0,buttonType:"primary",buttonText:"Selected Plan",size:"medium",matchParentWidth:!0}):e(s,{children:[b.isSelected&&t(a,{LeadingIcon:i,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),b.isDisabled&&t(a,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!b.isSelected&&!b.isDisabled&&t(a,{buttonType:"primary",size:"medium",onClick:()=>b.onPlanSelect(b.code),matchParentWidth:!0,buttonText:"Choose plan"})]})}))]})),t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${b.isDisabled?"disabled":""}\n\t\t\t\t\t${b.isSelected?"selected":""}\n\t\t\t\t`},{children:t(c,Object.assign({className:"text",style:{color:m.background.inverse}},{children:b.bottomDescription}))}))]}))};export{b as SubscriptionPlan};
|