@bikdotai/bik-component-library 0.0.306-beta-sub → 0.0.307-beta-sub
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.
|
@@ -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"),
|
|
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=c=>{const l=c.showMonthlyOptions?c.monthlyPlan:c.yearlyPlan,r=!c.isDisabled&&c.isMostPopular;return e.jsxs(i.SubscriptionPlanStyled,Object.assign({isManifestPlan:!0,isSelected:c.isSelected||!1,style:{marginTop:r?0:24}},{children:[r&&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 ${c.isSelected?"selected":""} ${c.isDisabled?"disabled":""} ${r?"":"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:c.planName})),e.jsxs("div",Object.assign({className:"price-block"},{children:[e.jsxs(a.TitleMedium,Object.assign({style:{color:n.COLORS.content.primary}},{children:["$ ",l.price]})),e.jsxs(a.BodyPrimary,Object.assign({style:{color:n.COLORS.content.secondary,marginLeft:4}},{children:["/ ",c.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:c.planDescription})),e.jsx(a.BodyCaption,Object.assign({style:{color:n.COLORS.background.positive.vibrant,marginLeft:4}},{children:c.planDescriptionDiscount}))]})),c.showTrialOptions&&e.jsxs(a.Caption,Object.assign({className:"trial "+(c.isSelected?"selected":"")},{children:["7 day free trial with ",c.freeTrialMessages," messages"]})),c.extraBlockMessage&&e.jsx(a.Caption,Object.assign({className:"trial "+(c.isSelected?"selected":"")},{children:c.extraBlockMessage})),e.jsx("div",Object.assign({className:"features"},{children:c.features.map(((t,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx("div",{children:e.jsx(s.default,{height:12,width:12,color:n.COLORS.content.primary})}),e.jsx(a.BodyCaption,Object.assign({className:"feature-text"},{children:t.detail}),i)]}),t.detail)))}))]}),e.jsx("div",Object.assign({className:"button-box"},{children:c.isLoading?e.jsx(t.Button,{isLoading:!0,buttonType:"primary",buttonText:"Selected Plan",size:"medium",matchParentWidth:!0}):e.jsxs(e.Fragment,{children:[c.isSelected&&e.jsx(t.Button,{LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:"Selected Plan",disabled:!1}),c.isDisabled&&e.jsx(t.Button,{disabled:!0,buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Choose plan"}),!c.isSelected&&!c.isDisabled&&e.jsx(t.Button,{buttonType:"primary",size:"medium",onClick:()=>c.onPlanSelect(c.code),matchParentWidth:!0,buttonText:"Choose plan"})]})}))]})),c.bottomDescription&&e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${c.isDisabled?"disabled":""}\n\t\t\t\t\t${c.isSelected?"selected":""}\n\t\t\t\t`},{children:e.jsx(a.Caption,Object.assign({className:"text",style:{color:n.COLORS.background.inverse}},{children:c.bottomDescription}))}))]}))};
|
|
@@ -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{Button 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{Button as a}from"../button/Button.js";import{SubscriptionPlanStyled as n}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as l,TitleMedium 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.showMonthlyOptions?b.monthlyPlan:b.yearlyPlan,p=!b.isDisabled&&b.isMostPopular;return e(n,Object.assign({isManifestPlan:!0,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("div",{children:t(i,{height:12,width:12,color:m.content.primary})}),t(d,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"})]})}))]})),b.bottomDescription&&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};
|