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