@bikdotai/bik-component-library 0.0.357-beta-plans → 0.0.358-beta-plans
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.
- package/dist/cjs/components/plans/NewSubscriptionPlan.d.ts +1 -0
- package/dist/cjs/components/plans/NewSubscriptionPlan.js +1 -1
- package/dist/cjs/components/plans/SubscriptionPlansCollected.js +1 -1
- package/dist/esm/components/plans/NewSubscriptionPlan.d.ts +1 -0
- package/dist/esm/components/plans/NewSubscriptionPlan.js +1 -1
- package/dist/esm/components/plans/SubscriptionPlansCollected.js +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
|
|
|
9
9
|
businessDescription?: string[];
|
|
10
10
|
yearlyCode?: string;
|
|
11
11
|
isPlanSelected?: boolean;
|
|
12
|
+
onClickShowAllFeatures?: () => void;
|
|
12
13
|
}
|
|
13
14
|
type Props = NewSubscriptionPlanProps;
|
|
14
15
|
export declare const NewSubscriptionPlan: 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("../../assets/icons/checkCircle.svg.js"),i=require("../../assets/icons/quotes.svg.js"),a=require("../button/Button.js"),n=require("./SubscriptionPlanStyled.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../../assets/icons/checkCircle.svg.js"),i=require("../../assets/icons/quotes.svg.js"),a=require("../button/Button.js"),n=require("./SubscriptionPlanStyled.js"),o=require("../TypographyStyle.js"),r=require("../../hooks/useCurreny.js"),l=require("../../constants/Theme.js");exports.NewSubscriptionPlan=c=>{var d;const{formatCurrency:u}=r.useCurrency(),h=c.showMonthlyOptions?c.features:c.annualFeatures||[],j=c.showMonthlyOptions?c.monthlyPlan:c.yearlyPlan,p=!c.isDisabled&&c.isMostPopular,m=c.showMonthlyOptions?c.code:null!==(d=c.yearlyCode)&&void 0!==d?d:c.code,g=e=>0==e?"$0":u(e,"USD"),{planName:b,isSelected:y=!1,isDisabled:x=!1,onPlanSelect:O,oldPrice:C,hideMonthYearTag:S,planDescription:v,planDescriptionDiscount:N,showTrialOptions:T,freeTrialMessages:f,extraBlockMessage:L,isLoading:P,buttonText:B,bottomDescription:k,showMonthlyOptions:w,popularTestimony:M,skipRadioSelection:q=!1,includeText:R,height:D,showFeaturesButton:F,businessDescription:_,isPlanSelected:z=!1,onClickShowAllFeatures:$}=c;return e.jsxs(n.NewSubscriptionStyled,Object.assign({height:D,showMostPopularChip:p||!1,onClick:()=>O(m)},{children:[p&&e.jsx("div",Object.assign({className:"most-popular-chip"},{children:e.jsx(o.Caption,Object.assign({className:"popular-text"},{children:"Most popular ⭐️"}))})),e.jsxs("div",Object.assign({className:`box ${x?"disabled":""} \n\t\t\t\t`},{children:[e.jsxs("div",Object.assign({className:"radio-flex"},{children:[!q&&e.jsx("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=x&&x,onChange:()=>O(m),className:"radio-button",checked:z}),e.jsx(o.TitleRegular,Object.assign({style:{color:l.COLORS.content.secondary,marginBottom:4}},{children:b}))]})),e.jsxs("div",Object.assign({className:"price-block"},{children:[C?e.jsx(o.BodyCaption,Object.assign({className:"old--price"},{children:g(j.price)})):e.jsx(e.Fragment,{}),e.jsx(o.TitleLarge,Object.assign({style:{color:l.COLORS.content.primary}},{children:g(C||j.price)})),e.jsx(o.BodyPrimary,Object.assign({style:{color:l.COLORS.content.secondary,marginLeft:4}},{children:S?"":"/ "+(w?"month":"year")}))]})),v&&e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(o.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:v})),N&&e.jsx(o.BodyCaption,Object.assign({style:{color:l.COLORS.background.positive.vibrant,marginLeft:4}},{children:N}))]})),_&&_.length&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:_.map(((s,t)=>e.jsx(o.BodySecondary,{style:{color:l.COLORS.content.secondary},dangerouslySetInnerHTML:{__html:s}},t)))})),T&&e.jsxs(o.Caption,Object.assign({className:"trial "+(y?"selected":"")},{children:["7 day free trial with ",f," messages"]})),L&&e.jsx(o.Caption,Object.assign({className:"trial "+(y?"selected":"")},{children:L})),R&&e.jsx(o.TitleSmall,Object.assign({className:"extra-include-margin"},{children:R})),e.jsx("div",Object.assign({className:"features"},{children:h.map(((s,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx("div",{children:e.jsx(t.default,{height:20,width:20,color:l.COLORS.content.primary})}),e.jsx(o.BodySecondary,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),F&&e.jsx(a.Button,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),$&&$()}}),q&&e.jsx("div",Object.assign({className:"button-box"},{children:P?e.jsx(a.Button,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e.jsxs(e.Fragment,{children:[y&&e.jsx(a.Button,{disabled:x,LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:B||"Selected Plan"}),!y&&!x&&e.jsx(a.Button,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),O(m)},matchParentWidth:!0,buttonText:B||"Choose plan"})]})})),M&&e.jsxs("div",Object.assign({className:"popular-testimony"},{children:[e.jsx(i.default,{height:26,width:70}),e.jsx("div",Object.assign({className:"testimony-text"},{children:M}))]}))]})),k&&e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${x?"disabled":""}\n\t\t\t\t\t${y?"selected":""}\n\t\t\t\t`},{children:e.jsx(o.Caption,Object.assign({className:"text",style:{color:l.COLORS.background.inverse}},{children:k}))}))]}))};
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
column-gap: 22px;
|
|
4
4
|
align-items: stretch;
|
|
5
5
|
overflow-x: auto;
|
|
6
|
-
`;exports.SubscriptionPlansCollected=n=>{var s;const[o,r]=t.useState(null!==(s=n.selectedPlan)&&void 0!==s?s:"");return e.jsx(i,Object.assign({style:{padding:"
|
|
6
|
+
`;exports.SubscriptionPlansCollected=n=>{var s;const[o,r]=t.useState(null!==(s=n.selectedPlan)&&void 0!==s?s:"");return e.jsx(i,Object.assign({style:{padding:"28px 0px"}},{children:n.plans.map(((s,i)=>{var a,c;return e.jsx("div",Object.assign({style:{width:null!==(a=n.staticWidth)&&void 0!==a?a:308}},{children:t.createElement(l.NewSubscriptionPlan,Object.assign({},s,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==n.selectedTab)&&void 0!==c&&c,showTrialOptions:n.showTrialOptions||!1,onPlanSelect:e=>{n.onPlanSelect(e),r(e)},key:s.planName,isPlanSelected:o==s.code}))}),i)}))}))};
|
|
@@ -9,6 +9,7 @@ export interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
|
|
|
9
9
|
businessDescription?: string[];
|
|
10
10
|
yearlyCode?: string;
|
|
11
11
|
isPlanSelected?: boolean;
|
|
12
|
+
onClickShowAllFeatures?: () => void;
|
|
12
13
|
}
|
|
13
14
|
type Props = NewSubscriptionPlanProps;
|
|
14
15
|
export declare const NewSubscriptionPlan: FunctionComponent<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import a from"../../assets/icons/checkCircle.svg.js";import n from"../../assets/icons/quotes.svg.js";import{Button as o}from"../button/Button.js";import{NewSubscriptionStyled as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import a from"../../assets/icons/checkCircle.svg.js";import n from"../../assets/icons/quotes.svg.js";import{Button as o}from"../button/Button.js";import{NewSubscriptionStyled as r}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as l,BodyCaption as d,TitleLarge as m,BodyPrimary as h,BodySecondary as p,TitleSmall as g}from"../TypographyStyle.js";import{useCurrency as b}from"../../hooks/useCurreny.js";import{COLORS as u}from"../../constants/Theme.js";const y=y=>{var j;const{formatCurrency:O}=b(),v=y.showMonthlyOptions?y.features:y.annualFeatures||[],f=y.showMonthlyOptions?y.monthlyPlan:y.yearlyPlan,N=!y.isDisabled&&y.isMostPopular,T=y.showMonthlyOptions?y.code:null!==(j=y.yearlyCode)&&void 0!==j?j:y.code,x=e=>0==e?"$0":O(e,"USD"),{planName:P,isSelected:k=!1,isDisabled:C=!1,onPlanSelect:M,oldPrice:S,hideMonthYearTag:w,planDescription:D,planDescriptionDiscount:L,showTrialOptions:z,freeTrialMessages:B,extraBlockMessage:$,isLoading:F,buttonText:W,bottomDescription:_,showMonthlyOptions:H,popularTestimony:I,skipRadioSelection:q=!1,includeText:A,height:R,showFeaturesButton:U,businessDescription:Y,isPlanSelected:E=!1,onClickShowAllFeatures:G}=y;return e(r,Object.assign({height:R,showMostPopularChip:N||!1,onClick:()=>M(T)},{children:[N&&t("div",Object.assign({className:"most-popular-chip"},{children:t(c,Object.assign({className:"popular-text"},{children:"Most popular ⭐️"}))})),e("div",Object.assign({className:`box ${C?"disabled":""} \n\t\t\t\t`},{children:[e("div",Object.assign({className:"radio-flex"},{children:[!q&&t("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=C&&C,onChange:()=>M(T),className:"radio-button",checked:E}),t(l,Object.assign({style:{color:u.content.secondary,marginBottom:4}},{children:P}))]})),e("div",Object.assign({className:"price-block"},{children:[S?t(d,Object.assign({className:"old--price"},{children:x(f.price)})):t(s,{}),t(m,Object.assign({style:{color:u.content.primary}},{children:x(S||f.price)})),t(h,Object.assign({style:{color:u.content.secondary,marginLeft:4}},{children:w?"":"/ "+(H?"month":"year")}))]})),D&&e("div",Object.assign({className:"per-message-price"},{children:[t(d,Object.assign({style:{color:u.content.secondary}},{children:D})),L&&t(d,Object.assign({style:{color:u.background.positive.vibrant,marginLeft:4}},{children:L}))]})),Y&&Y.length&&t("div",Object.assign({style:{marginTop:4}},{children:Y.map(((e,s)=>t(p,{style:{color:u.content.secondary},dangerouslySetInnerHTML:{__html:e}},s)))})),z&&e(c,Object.assign({className:"trial "+(k?"selected":"")},{children:["7 day free trial with ",B," messages"]})),$&&t(c,Object.assign({className:"trial "+(k?"selected":"")},{children:$})),A&&t(g,Object.assign({className:"extra-include-margin"},{children:A})),t("div",Object.assign({className:"features"},{children:v.map(((s,i)=>e("div",Object.assign({className:"feature"},{children:[t("div",{children:t(a,{height:20,width:20,color:u.content.primary})}),t(p,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),U&&t(o,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),G&&G()}}),q&&t("div",Object.assign({className:"button-box"},{children:F?t(o,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e(s,{children:[k&&t(o,{disabled:C,LeadingIcon:i,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:W||"Selected Plan"}),!k&&!C&&t(o,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),M(T)},matchParentWidth:!0,buttonText:W||"Choose plan"})]})})),I&&e("div",Object.assign({className:"popular-testimony"},{children:[t(n,{height:26,width:70}),t("div",Object.assign({className:"testimony-text"},{children:I}))]}))]})),_&&t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${C?"disabled":""}\n\t\t\t\t\t${k?"selected":""}\n\t\t\t\t`},{children:t(c,Object.assign({className:"text",style:{color:u.background.inverse}},{children:_}))}))]}))};export{y as NewSubscriptionPlan};
|
|
@@ -3,4 +3,4 @@ import{jsx as t}from"react/jsx-runtime";import{useState as e,createElement as n}
|
|
|
3
3
|
column-gap: 22px;
|
|
4
4
|
align-items: stretch;
|
|
5
5
|
overflow-x: auto;
|
|
6
|
-
`,s=o=>{var s;const[a,r]=e(null!==(s=o.selectedPlan)&&void 0!==s?s:"");return t(i,Object.assign({style:{padding:"
|
|
6
|
+
`,s=o=>{var s;const[a,r]=e(null!==(s=o.selectedPlan)&&void 0!==s?s:"");return t(i,Object.assign({style:{padding:"28px 0px"}},{children:o.plans.map(((e,i)=>{var s,c;return t("div",Object.assign({style:{width:null!==(s=o.staticWidth)&&void 0!==s?s:308}},{children:n(l,Object.assign({},e,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==o.selectedTab)&&void 0!==c&&c,showTrialOptions:o.showTrialOptions||!1,onPlanSelect:t=>{o.onPlanSelect(t),r(t)},key:e.planName,isPlanSelected:a==e.code}))}),i)}))}))};export{s as SubscriptionPlansCollected};
|