npm - @bikdotai/bik-component-library - Versions diffs - 0.0.858-beta.1 → 0.0.858 - Mend

@bikdotai/bik-component-library 0.0.858-beta.1 → 0.0.858

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.

Files changed (77) hide show

package/dist/esm/components/plans/SubscriptionPlanSelector.js CHANGED Viewed

@@ -1,24 +1,25 @@
-import { jsxs as o, jsx as t, Fragment as p } from "react/jsx-runtime";
-import { useState as u, createElement as m } from "react";
-import h from "../../assets/icons/check.svg.js";
-import g from "../../assets/icons/info.svg.js";
-import x from "../../assets/icons/phone.svg.js";
+import { jsxs as o, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { useState as m, createElement as h } from "react";
+import g from "../../assets/icons/check.svg.js";
+import x from "../../assets/icons/info.svg.js";
+import b from "../../assets/icons/phone.svg.js";
+import { stripHtmlTags as y } from "../../helpers/sanitize.js";
 import r from "styled-components";
-import { SubscriptionPlan as b } from "./SubscriptionPlan.js";
+import { SubscriptionPlan as f } from "./SubscriptionPlan.js";
 import { COLORS as n } from "../../constants/Theme.js";
-import { TitleMedium as y, BodyPrimary as a, BodyCaption as d } from "../TypographyStyle.js";
-import { StyledModal as f } from "../modals/styledModal.js";
-import { Tabs as v } from "../tabs/Tabs.js";
-import { Button as w } from "../button/Button.js";
-const P = r.div`
+import { TitleMedium as v, BodyPrimary as a, BodyCaption as d } from "../TypographyStyle.js";
+import { StyledModal as w } from "../modals/styledModal.js";
+import { Tabs as P } from "../tabs/Tabs.js";
+import { Button as k } from "../button/Button.js";
+const C = r.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
 	padding: 24px;
-`, k = r.div`
+`, I = r.div`
 	color: ${n.content.negative};
 	padding: 0px 24px;
-`, C = r.div`
+`, S = r.div`
 	padding: 24px 24px 0px 24px;
 	display: flex;
 	align-items: center;
@@ -27,7 +28,7 @@ const P = r.div`
 		margin-top: 8px;
 		color: ${n.content.secondary} !important;
 	}
-`, I = r.div`
+`, T = r.div`
 	padding: 0px 24px 24px 24px;
 	display: flex;
 	align-items: center;
@@ -110,40 +111,40 @@ const P = r.div`
 		justify-content: flex-start;
 		gap: 8px;
 	}
-`, S = [
+`, N = [
   { key: "Monthly", title: "Monthly" },
   { key: "yearly", title: "Yearly" }
-], R = (e) => {
-  const [s, c] = u(
+], q = (e) => {
+  const [l, c] = m(
     e.discountInputProperties?.defaultValue
-  ), l = e.staticWidthMultiplier ? e.staticWidthMultiplier : 275;
+  ), p = e.staticWidthMultiplier ? e.staticWidthMultiplier : 275;
   return /* @__PURE__ */ o(
-    f,
+    w,
     {
       centralContainerStyles: {
-        width: e.plans.length * l
+        width: e.plans.length * p
       },
       open: !0,
       closeOnOutsideClick: !0,
       onClose: e.onClose,
       children: [
-        /* @__PURE__ */ o(C, { children: [
+        /* @__PURE__ */ o(S, { children: [
           /* @__PURE__ */ o("div", { children: [
-            /* @__PURE__ */ t(y, { children: e.header || "Select a plan to proceed" }),
+            /* @__PURE__ */ t(v, { children: e.header || "Select a plan to proceed" }),
             /* @__PURE__ */ t(a, { className: "sub--header", children: e.subHeader || "" })
           ] }),
           e.showMonthlyTabs ? /* @__PURE__ */ t(
-            v,
+            P,
             {
-              tabs: e.tabProperties && e.tabProperties.tabs ? e.tabProperties.tabs : S,
+              tabs: e.tabProperties && e.tabProperties.tabs ? e.tabProperties.tabs : N,
               onTabSelected: (i) => e.tabProperties?.onTabSelected ? e.tabProperties?.onTabSelected(i) : "",
               isSquared: !0
             }
-          ) : /* @__PURE__ */ t(p, {})
+          ) : /* @__PURE__ */ t(u, {})
         ] }),
-        e.warningDescription && /* @__PURE__ */ t(k, { children: e.warningDescription }),
-        /* @__PURE__ */ t(P, { children: e.plans.map((i) => /* @__PURE__ */ m(
-          b,
+        e.warningDescription && /* @__PURE__ */ t(I, { children: e.warningDescription }),
+        /* @__PURE__ */ t(C, { children: e.plans.map((i) => /* @__PURE__ */ h(
+          f,
           {
             ...i,
             showMonthly: !0,
@@ -153,7 +154,7 @@ const P = r.div`
             key: i.planName
           }
         )) }),
-        (e.showCouponApplicationCode || e.showBookAdemo) && /* @__PURE__ */ o(I, { children: [
+        (e.showCouponApplicationCode || e.showBookAdemo) && /* @__PURE__ */ o(T, { children: [
           /* @__PURE__ */ t("div", { children: e.showCouponApplicationCode && /* @__PURE__ */ o("div", { className: "coupon-code", children: [
             /* @__PURE__ */ o("div", { className: "coupon-input", children: [
               /* @__PURE__ */ t(
@@ -176,18 +177,19 @@ const P = r.div`
                         {
                           className: "input--class",
                           onChange: (i) => {
-                            c(i.target.value), e.discountInputProperties?.onChangeText(
-                              i.target.value
+                            const s = y(i.target.value);
+                            c(s), e.discountInputProperties?.onChangeText(
+                              s
                             );
                           },
-                          value: s,
+                          value: l,
                           placeholder: "eg:PLAN20",
                           disabled: e.discountInputProperties?.isLoading
                         }
                       ),
                       e.discountInputProperties?.successText && /* @__PURE__ */ o("div", { className: "success--inside--chip", children: [
                         /* @__PURE__ */ t(
-                          h,
+                          g,
                           {
                             height: 16,
                             width: 16,
@@ -206,7 +208,7 @@ const P = r.div`
                   }
                 ),
                 !e.discountInputProperties?.successText && /* @__PURE__ */ t(
-                  w,
+                  k,
                   {
                     buttonText: "Apply",
                     buttonType: "primary",
@@ -217,7 +219,7 @@ const P = r.div`
               ] }),
               e.discountInputProperties?.errorMessage && /* @__PURE__ */ o("div", { className: "d-flex", style: { gap: 8 }, children: [
                 /* @__PURE__ */ t(
-                  g,
+                  x,
                   {
                     height: 16,
                     width: 16,
@@ -241,7 +243,7 @@ const P = r.div`
           ] }) }),
           e.showBookAdemo && /* @__PURE__ */ o("div", { className: "demo--wrapper", children: [
             /* @__PURE__ */ t("div", { className: "demo--phone", children: /* @__PURE__ */ t(
-              x,
+              b,
               {
                 height: 16,
                 width: 16,
@@ -263,9 +265,9 @@ const P = r.div`
   );
 };
 export {
-  I as BottomWrapper,
-  C as HeaderWrapper,
-  R as SubscriptionPlanSelector,
-  S as defaultTabs
+  T as BottomWrapper,
+  S as HeaderWrapper,
+  q as SubscriptionPlanSelector,
+  N as defaultTabs
 };
 //# sourceMappingURL=SubscriptionPlanSelector.js.map

package/dist/esm/components/plans/SubscriptionPlanSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext.target.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { stripHtmlTags } from '@src/helpers/sanitize';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst sanitized = stripHtmlTags(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(sanitized);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsanitized,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","sanitized","stripHtmlTags","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}