@bikdotai/bik-component-library 0.0.519-beta.0 → 0.0.519

package/dist/cjs/components/spinner/Spinner.d.ts

@@ -3,3 +3,9 @@ export declare const Spinner: {
     ({ size, color, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export declare const PureSpinner: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    height: string;
+    color?: string | undefined;
+    backgroundColor?: string | undefined;
+}, never>;

package/dist/cjs/components/spinner/Spinner.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-lottie"),r=require("../../constants/Theme.js"),s=require("./lotties/black.json.js"),i=require("./lotties/brand.json.js"),n=require("./lotties/red.json.js"),o=require("./lotties/white.json.js"),a=require("./themes.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t);const u={[r.COLORS.stroke.brand]:i,[r.COLORS.content.primary]:s,[r.COLORS.content.primaryInverse]:o,[r.COLORS.content.negative]:n},d=t=>{let{size:s,color:i,className:n}=t;const o={loop:!0,autoplay:!0,animationData:u[null!=i?i:r.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsx("div",Object.assign({className:`spinner-container ${n}`},{children:e.jsx(c.default,{options:o,width:a.SizeMap[s],isStopped:!1,isPaused:!1})}))};d.displayName="Spinner",exports.Spinner=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-lottie"),t=require("styled-components"),n=require("../../constants/Theme.js"),i=require("./lotties/black.json.js"),o=require("./lotties/brand.json.js"),s=require("./lotties/red.json.js"),a=require("./lotties/white.json.js"),l=require("./themes.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r),c=d(t);const p={[n.COLORS.stroke.brand]:o,[n.COLORS.content.primary]:i,[n.COLORS.content.primaryInverse]:a,[n.COLORS.content.negative]:s},j=r=>{let{size:t,color:i,className:o}=r;const s={loop:!0,autoplay:!0,animationData:p[null!=i?i:n.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsx("div",Object.assign({className:`spinner-container ${o}`},{children:e.jsx(u.default,{options:s,width:l.SizeMap[t],isStopped:!1,isPaused:!1})}))};j.displayName="Spinner";const m=c.default.div`
+	width: ${e=>e.width};
+	height: ${e=>e.height};
+	border: 5px solid ${e=>{var r;return null!==(r=e.backgroundColor)&&void 0!==r?r:"transparent"}};
+	border-bottom-color: ${e=>{var r;return null!==(r=e.color)&&void 0!==r?r:n.COLORS.stroke.brand}};
+	border-radius: 50%;
+	display: inline-block;
+	animation: rotation 1s linear infinite;
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;exports.PureSpinner=m,exports.Spinner=j;

package/dist/cjs/components/states/StateComponent.d.ts

@@ -30,5 +30,7 @@ export type StateComponentProps = {
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width: number;
     size?: 'DEFAULT' | 'SMALL';
+    iconHeight?: number;
+    iconWidth?: number;
 };
 export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;

package/dist/cjs/components/states/StateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),d=require("../TypographyStyle.js"),l=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(o.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:h,type:g,buttonText:y,buttonType:B,onButtonClick:I,leadingIcon:L,width:C,headerImage:O}=e;return s.jsxs(l.StateComponentContainer,Object.assign({width:C},{children:[s.jsx(l.StateIcon,{children:O?s.jsx("img",{src:O,width:"100%",height:"auto",alt:""}):S}),s.jsxs(l.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(d.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(d.TitleMedium,{children:p})]})),s.jsxs(l.StateSubline,{children:["SMALL"!==e.size&&s.jsx(d.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(d.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(l.ButtonContainer,Object.assign({size:e.size},{children:[g==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:L,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),o=require("../../constants/Theme.js"),r=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),d=require("../TypographyStyle.js"),l=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(r.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:h,type:g,buttonText:y,buttonType:B,onButtonClick:I,leadingIcon:L,width:O,headerImage:C,iconWidth:b,iconHeight:T}=e;return s.jsxs(l.StateComponentContainer,Object.assign({width:O},{children:[s.jsx(l.StateIcon,Object.assign({iconWidth:b,iconHeight:T},{children:C?s.jsx("img",{src:C,width:"100%",height:"auto",alt:""}):S})),s.jsxs(l.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(d.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(d.TitleMedium,{children:p})]})),s.jsxs(l.StateSubline,{children:["SMALL"!==e.size&&s.jsx(d.BodyPrimary,Object.assign({color:o.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(d.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(l.ButtonContainer,Object.assign({size:e.size},{children:[g==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:L,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};

package/dist/cjs/components/states/StateComponent.styled.d.ts

@@ -1,7 +1,10 @@
 export declare const StateComponentContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {
+    iconWidth?: number | undefined;
+    iconHeight?: number | undefined;
+}, never>;
 export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {
     size?: "SMALL" | "DEFAULT" | undefined;
 }, never>;

package/dist/cjs/components/states/StateComponent.styled.js

@@ -7,23 +7,23 @@
 	flex-direction: column;
 	align-items: center;
 `,n=e.default.div`
-	width: 64px;
-	height: 64px;
+	width: ${t=>t.iconWidth?t.iconWidth:64}px;
+	height: ${t=>t.iconHeight?t.iconHeight:64}px;
 	display: flex;
 	justify-content: center;
 	align-items: end;
-`,a=e.default.div`
+`,d=e.default.div`
 	margin-top: ${t=>"SMALL"===t.size?8:16}px;
 	text-align: center;
 	max-width: 100%;
-`,d=e.default.div`
+`,a=e.default.div`
 	display: flex;
 	margin-top: ${t=>"SMALL"===t.size?8:24}px;
 	gap: 12px;
 	width: 100%;
-`,p=e.default.div`
+`,o=e.default.div`
 	margin-top: 4px;
 	max-width: 100%;
 	text-align: center;
 	max-width: 100%;
-`;exports.ButtonContainer=d,exports.StateComponentContainer=i,exports.StateHeading=a,exports.StateIcon=n,exports.StateSubline=p;
+`;exports.ButtonContainer=a,exports.StateComponentContainer=i,exports.StateHeading=d,exports.StateIcon=n,exports.StateSubline=o;

package/dist/cjs/components/states-modal/StateModalComponent.d.ts

@@ -16,5 +16,7 @@ export type StateModalComponentProps = {
     onClose?: () => void;
     zIndex?: number;
     headerImage?: string;
+    iconWidth?: number;
+    iconHeight?: number;
 };
 export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;

package/dist/cjs/components/states-modal/StateModalComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),r=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),i=require("../modals/styledModal.js"),o=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(r.default,{}):u==c.StateInterface.WARNING?e.jsx(a.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(o.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:j,icon:S=l(),isButtonEnabled:x,type:C,buttonText:g,onButtonClick:p,leadingIcon:f,width:h,zIndex:O,headerImage:b}=d,[m,q]=t.useState(!0);return e.jsx(i.StyledModal,Object.assign({open:m,onClose:function(){d.onClose&&d.onClose(),q(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:h},hideCrossButton:u===c.StateInterface.LOADING,zIndex:O||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:I,subline:j,isButtonEnabled:x,leadingIcon:f,type:C,buttonText:g,onButtonClick:p,icon:S,width:h||400,headerImage:b},{children:d.children}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),o=require("../../assets/icons/warningIcon.svg.js"),r=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(i.default,{}):u==c.StateInterface.WARNING?e.jsx(o.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(a.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:j,icon:S=l(),isButtonEnabled:g,type:x,buttonText:h,onButtonClick:C,leadingIcon:p,width:f,zIndex:O,headerImage:b,iconHeight:m,iconWidth:q}=d,[y,v]=t.useState(!0);return e.jsx(r.StyledModal,Object.assign({open:y,onClose:function(){d.onClose&&d.onClose(),v(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:f},hideCrossButton:u===c.StateInterface.LOADING,zIndex:O||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:I,subline:j,isButtonEnabled:g,leadingIcon:p,type:x,buttonText:h,onButtonClick:C,icon:S,width:f||400,headerImage:b,iconHeight:m,iconWidth:q},{children:d.children}))}))};

package/dist/cjs/components/stepper/Stepper.d.ts

@@ -3,6 +3,7 @@ export interface StepperProps {
     steps: EachStep[];
     activeStep: EachStep;
     onClickingEachStep: (step: EachStep) => void;
+    hideHoverState?: boolean;
 }
 export interface EachStep {
     stepKey: string;
@@ -18,5 +19,6 @@ export interface SingleStepperProps {
     isActive: boolean;
     onClickingStep: (step: EachStep) => void;
     stepsCount: number;
+    hideHoverState?: boolean;
 }
 export declare const Stepper: (stepperDetails: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/stepper/Stepper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/check.svg.js"),i=require("../../assets/icons/errorInfo.svg.js"),r=require("../TypographyStyle.js"),n=require("./Stepper.styled.js");const c=c=>{const{eachStep:a,isLastElement:o,index:l,isActive:d,onClickingStep:p}=c,{stepName:h,isCompleted:j,isError:u,isInActive:g}=a,v=()=>d?"active":j?"completed":u?"error":g?"inactive":"default";return e.jsxs(n.SingleStepperChildContainer,Object.assign({stepsCount:c.stepsCount,onClick:()=>{!g&&p(a)},selectedState:v()},{children:[e.jsxs("div",Object.assign({className:`hover-container ${g?"blocked":"pointer"} `},{children:[e.jsx("div",Object.assign({className:"badge"},{children:"completed"==v()?e.jsx(s.default,{height:16,width:16,color:t.COLORS.content.positive}):"error"==v()?e.jsx(i.default,{height:16,width:16}):e.jsx(r.BodySecondary,Object.assign({className:"badge-text"},{children:l+1}))})),e.jsx(r.BodyPrimary,Object.assign({className:"step-text",title:h},{children:h}))]})),e.jsx("div",{className:o?"":"horizontal-divider"})]}))};exports.Stepper=t=>{const{steps:s,activeStep:i,onClickingEachStep:r}=t;return e.jsx(n.StepperContainer,{children:s.map(((t,n)=>e.jsx(c,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{r(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:n==s.length-1,index:n},n)))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/check.svg.js"),i=require("../../assets/icons/errorInfo.svg.js"),r=require("../TypographyStyle.js"),n=require("./Stepper.styled.js");const c=c=>{const{eachStep:a,isLastElement:o,index:l,isActive:d,onClickingStep:p,hideHoverState:h}=c,{stepName:j,isCompleted:v,isError:u,isInActive:g}=a,S=()=>d?"active":v?"completed":u?"error":g?"inactive":"default";return e.jsxs(n.SingleStepperChildContainer,Object.assign({stepsCount:c.stepsCount,onClick:()=>{!g&&p(a)},selectedState:S(),isInActive:g||h},{children:[e.jsxs("div",Object.assign({className:`hover-container ${g?"blocked":"pointer"} `},{children:[e.jsx("div",Object.assign({className:"badge"},{children:"completed"==S()?e.jsx(s.default,{height:16,width:16,color:t.COLORS.content.positive}):"error"==S()?e.jsx(i.default,{height:16,width:16}):e.jsx(r.BodySecondary,Object.assign({className:"badge-text"},{children:l+1}))})),e.jsx(r.BodyPrimary,Object.assign({className:"step-text",title:j},{children:j}))]})),e.jsx("div",{className:o?"":"horizontal-divider"})]}))};exports.Stepper=t=>{const{steps:s,activeStep:i,onClickingEachStep:r,hideHoverState:a}=t;return e.jsx(n.StepperContainer,{children:s.map(((t,n)=>e.jsx(c,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{r(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:n==s.length-1,index:n,hideHoverState:a},n)))})};

package/dist/cjs/components/stepper/Stepper.styled.d.ts

@@ -3,5 +3,6 @@ export declare const StepperContainer: import("styled-components").StyledCompone
 export declare const SingleStepperChildContainer: import("styled-components").StyledComponent<"div", any, {
     selectedState: StepperStates;
     stepsCount: number;
+    isInActive?: boolean | undefined;
 }, never>;
 export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/stepper/Stepper.styled.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e);const i=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const o=n.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	gap: 16px;
-`,r=o.default.div`
+`,r=n.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -26,9 +26,9 @@
 		align-items: center;
 		gap: 8px;
 		&:hover {
-			padding: 6px 8px 6px 6px;
-			background: #f0f0f0;
-			border-radius: 30px;
+			padding: ${e=>e.isInActive?void 0:"6px 8px 6px 6px"};
+			background: ${e=>e.isInActive?void 0:"#f0f0f0"};
+			border-radius: ${e=>e.isInActive?void 0:"30px"};
 		}
 	}
 	.badge {
@@ -63,7 +63,7 @@
 		background: ${e=>t.getTheme(e.selectedState).dividerBackground};
 		margin-left: 8px;
 	}
-`;o.default.div`
+`;n.default.div`
 	.top-bar {
 		position: sticky;
 		top: 0px;
@@ -80,4 +80,4 @@
 		align-items: center;
 		overflow-y: auto;
 	}
-`,exports.SingleStepperChildContainer=r,exports.StepperContainer=i;
+`,exports.SingleStepperChildContainer=r,exports.StepperContainer=o;

package/dist/cjs/components/tabs/Tabs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1}=r,[g,C]=t.useState(c||i[0].key),{colorsV2:y}=s.DEFAULT_THEME;t.useEffect((()=>{u&&C(u)}),[u]);const j=r.backgroundColor,S=null!==(n=r.selectedTextColor)&&void 0!==n?n:y.background.brand,h=null!==(l=r.textColor)&&void 0!==l?l:y.content.secondary;return e.jsxs(a.TabHeader,Object.assign({bgColor:j},{children:[i.map(((t,s)=>e.jsx(o,{hasEqualSpacing:r.hasEqualSpacing,selectedTextColor:S,textColor:h,tab:t,currentTab:g,TabItemStyledProps:b,IconComponent:t.icon,size:T,setCurrentTab:e=>{d(e),C(e)},isSquared:m,isFirstlement:0==s,isLastElement:s==i.length-1},t.key))),p&&e.jsx(a.EmptyTab,{}),e.jsx(a.RightComponent,{children:x})]}))},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:b="default",isSquared:u=!1,isFirstlement:p,isLastElement:x}=n,T=o.key===l,{colorsV2:m}=s.DEFAULT_THEME,g=t.useCallback((()=>Object.assign(Object.assign({},c),{borderRadius:n.isSquared?p?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(a.TabItem,Object.assign({style:g(),selected:T,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:u},{children:[d&&e.jsx(d,{selected:T?m.background.brand:m.content.secondary}),e.jsx(a.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:T},{children:o.title})),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(a.TrailingNumberContainer,Object.assign({selected:T},{children:e.jsx(r.BodyCaption,Object.assign({color:m.content.primaryInverse},{children:o.trailingNumber}))}))]}))};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1,containerStyles:g}=r,[y,C]=t.useState(c||i[0].key),{colorsV2:j}=s.DEFAULT_THEME;t.useEffect((()=>{u&&C(u)}),[u]);const S=r.backgroundColor,h=null!==(n=r.selectedTextColor)&&void 0!==n?n:j.background.brand,q=null!==(l=r.textColor)&&void 0!==l?l:j.content.secondary;return e.jsxs(a.TabHeader,Object.assign({style:null!=g?g:{},bgColor:S},{children:[i.map(((t,s)=>e.jsx(o,{hasEqualSpacing:r.hasEqualSpacing,selectedTextColor:h,textColor:q,tab:t,currentTab:y,TabItemStyledProps:b,IconComponent:t.icon,size:T,setCurrentTab:e=>{d(e),C(e)},isSquared:m,isFirstlement:0==s,isLastElement:s==i.length-1},t.key))),p&&e.jsx(a.EmptyTab,{}),e.jsx(a.RightComponent,{children:x})]}))},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:b="default",isSquared:u=!1,isFirstlement:p,isLastElement:x}=n,T=o.key===l,{colorsV2:m}=s.DEFAULT_THEME,g=t.useCallback((()=>Object.assign(Object.assign({},c),{borderRadius:n.isSquared?p?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(a.TabItem,Object.assign({style:g(),selected:T,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:u},{children:[d&&e.jsx(d,{selected:T?m.background.brand:m.content.secondary}),e.jsx(a.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:T},{children:o.title})),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(a.TrailingNumberContainer,Object.assign({selected:T},{children:e.jsx(r.BodyCaption,Object.assign({color:m.content.primaryInverse},{children:o.trailingNumber}))}))]}))};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;

package/dist/cjs/components/tabs/Tabs.model.d.ts

@@ -36,6 +36,7 @@ export interface TabViewHeaderProps {
     rightComponent?: JSX.Element;
     size?: 'small' | 'default';
     isSquared?: boolean;
+    containerStyles?: React.CSSProperties;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),o=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),d=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=u=>{let{selectedTemplate:c,closeDialog:p,showVariableMapping:v,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:S,globalPlaceholders:b,showOnlyContent:E,whatsappSpecificPickerMeta:x,zIndex:P,showVariableModal:g,variableList:T,discountCode:f,setDiscountCode:I,onBackPress:j,enabledCustomText:y,variableListForImage:w,showSampleValues:L,disableEditVariable:M,pod:N,extras:k,pickerConf:A,selectedCarouselProducts:V,disableEditExpiry:D,cardWidth:q,onDeleteSelectedProducts:H,fileName:O,setFileName:_,hideDeviceContainerInPreview:F}=u;var W,B,Y,z,R,$;l.useEffect((()=>{ee(h)}),[h]);const U=m===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(B=null===(W=null==c?void 0:c.components)||void 0===W?void 0:W[1])||void 0===B?void 0:B.type),G=null==c?void 0:c.isProductCarouselType,[J,K]=l.useState(m===r.CHANNEL_TYPE.EMAIL||U?"desktop":"mobile"),[Q,X]=l.useState(!1),[Z,ee]=l.useState(h),[le,te]=l.useState(!1),[ae,oe]=l.useState([]),[re,se]=l.useState({}),[ie,ne]=l.useState(c),[de,ue]=l.useState([]),[ce,pe]=l.useState(null),[ve,me]=l.useState(!1),[he,Ce]=l.useState(null!=C?C:[]),[Se,be]=l.useState(!1),[Ee,xe]=l.useState(-1),[Pe,ge]=l.useState([]);l.useEffect((()=>{V?ge(V):G&&ge([])}),[V]),l.useEffect((()=>{var e;if(!ve&&G&&(!V||0===ge.length)){const l=null===(e=null==ie?void 0:ie.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,a,o;"HEADER"===e.type&&t.push(null!==(o=null===(a=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===a?void 0:a[0])&&void 0!==o?o:"")}))})),ue(t),me(!0)}}),[ve]);const Te=l.useMemo((()=>d.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{variableCallback:ce,setVariableCallback:pe,showVariablePicker:Q,setShowVariablePicker:X,template:ie,setTemplate:ne,device:J,setDevice:K,display_content:Z,setDisplayContent:ee,originalVariableList:he,setOriginalVariableList:Ce,isError:le,setIsError:te,channel:m,globalNormalizedPlaceholders:Te,templateSelectionTriggered:Se,setTemplateSelectionTriggered:be,enabledCustomText:y,disableEditVariable:M,pod:N,extras:k,isWhatsappCarousel:U,selectedCarouselIndex:Ee,setSelectedCarouselIndex:xe,isProductCarouselType:G,templateErrorIndexes:re,cardCount:U?null===(z=null===(Y=c.components)||void 0===Y?void 0:Y[1].cards)||void 0===z?void 0:z.length:void 0,errorIndexes:ae,setErrorIndexes:oe,pickerConf:A,carouselProducts:Pe,setCarouselProducts:ge,disableEditExpiry:D,cardWidth:q,cardImages:de,onDeleteSelectedProducts:H,hideDeviceContainerInPreview:F}},{children:E?e.jsx(n.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(o.StyledModal,Object.assign({zIndex:P,centralContainerStyles:{width:U?900:m===r.CHANNEL_TYPE.EMAIL&&v?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==ie?void 0:ie.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(R=null==ie?void 0:ie.category)&&void 0!==R?R:"")} • ${null!==($=null==ie?void 0:ie.templateCategory)&&void 0!==$?$:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(n.default,{showSampleValues:L,showVariableMapping:v,channel:m,whatsappSpecificPickerMeta:x,showVariableModal:g,variableList:T,discountCode:f,setDiscountCode:I,variableListForImage:w&&(null==w?void 0:w.length)>0?w:T,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(i.default,{isWhatsappCarousel:null!=U&&U,onSelect:function(){var e;if((null==Pe?void 0:Pe.length)<1&&G)return void te(!0);const l=null==S?void 0:S(ie,he,null!=Z?Z:"",Pe);se(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&oe(l.errorIndexes),(null==l?void 0:l.error)&&te(!!(null==l?void 0:l.error))):be(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),o=require("../../constants/Theme.js"),a=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),d=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=u=>{let{selectedTemplate:c,closeDialog:p,showVariableMapping:v,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:E,globalPlaceholders:S,showOnlyContent:x,whatsappSpecificPickerMeta:b,zIndex:P,showVariableModal:g,variableList:T,discountCode:f,setDiscountCode:I,onBackPress:j,enabledCustomText:y,variableListForImage:L,showSampleValues:M,disableEditVariable:w,pod:N,extras:A,pickerConf:D,selectedCarouselProducts:V,disableEditExpiry:k,cardWidth:q,onDeleteSelectedProducts:H,fileName:O,setFileName:_,hideDeviceContainerInPreview:F}=u;var W,B,Y,z,R,$;l.useEffect((()=>{X(h)}),[h]);const U=m===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(B=null===(W=null==c?void 0:c.components)||void 0===W?void 0:W[1])||void 0===B?void 0:B.type),G=null==c?void 0:c.isProductCarouselType,[J,K]=l.useState(m===r.CHANNEL_TYPE.EMAIL||U?"desktop":"mobile"),[Q,X]=l.useState(h),[Z,ee]=l.useState(!1),[le,te]=l.useState([]),[oe,ae]=l.useState({}),[re,se]=l.useState(c),[ie,ne]=l.useState([]),[de,ue]=l.useState(!1),[ce,pe]=l.useState(null!=C?C:[]),[ve,me]=l.useState(!1),[he,Ce]=l.useState(-1),[Ee,Se]=l.useState([]);l.useEffect((()=>{V?Se(V):G&&Se([])}),[V]),l.useEffect((()=>{var e;if(!de&&G&&(!V||0===Se.length)){const l=null===(e=null==re?void 0:re.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),ne(t),ue(!0)}}),[de]);const xe=l.useMemo((()=>d.convertPlaceholdersToBikDropdown(S)),[S]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:re,setTemplate:se,device:J,setDevice:K,display_content:Q,setDisplayContent:X,originalVariableList:ce,setOriginalVariableList:pe,isError:Z,setIsError:ee,channel:m,globalNormalizedPlaceholders:xe,templateSelectionTriggered:ve,setTemplateSelectionTriggered:me,enabledCustomText:y,disableEditVariable:w,pod:N,extras:A,isWhatsappCarousel:U,selectedCarouselIndex:he,setSelectedCarouselIndex:Ce,isProductCarouselType:G,templateErrorIndexes:oe,cardCount:U?null===(z=null===(Y=c.components)||void 0===Y?void 0:Y[1].cards)||void 0===z?void 0:z.length:void 0,errorIndexes:le,setErrorIndexes:te,pickerConf:D,carouselProducts:Ee,setCarouselProducts:Se,disableEditExpiry:k,cardWidth:q,cardImages:ie,onDeleteSelectedProducts:H,hideDeviceContainerInPreview:F}},{children:x?e.jsx(n.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:P,centralContainerStyles:{width:U?900:m===r.CHANNEL_TYPE.EMAIL&&v?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==re?void 0:re.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(R=null==re?void 0:re.category)&&void 0!==R?R:"")} • ${null!==($=null==re?void 0:re.templateCategory)&&void 0!==$?$:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${o.COLORS.stroke.primary}`}},{children:[e.jsx(n.default,{showSampleValues:M,showVariableMapping:v,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:g,variableList:T,discountCode:f,setDiscountCode:I,variableListForImage:L&&(null==L?void 0:L.length)>0?L:T,fileName:O,setFileName:e=>{null==_||_(e)}}),E?e.jsx(i.default,{isWhatsappCarousel:null!=U&&U,onSelect:function(){var e;if((null==Ee?void 0:Ee.length)<1&&G)return void ee(!0);const l=null==E?void 0:E(re,ce,null!=Q?Q:"",Ee);ae(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&te(l.errorIndexes),(null==l?void 0:l.error)&&ee(!!(null==l?void 0:l.error))):me(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -8,10 +8,6 @@ import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../
 import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
-    variableCallback: any;
-    setVariableCallback: any;
-    showVariablePicker: boolean;
-    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
@@ -58,10 +54,6 @@ export declare const TemplateModalContext: React.Context<{
     } | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
-    variableCallback: any;
-    setVariableCallback: any;
-    showVariablePicker: boolean;
-    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;

package/dist/cjs/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);

package/dist/cjs/components/template-context-mapper/modalElements/Body.js

@@ -1,18 +1,21 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),t=require("react"),i=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),r=require("../../template-preview/models/Channels.js"),s=require("../../variable-picker-v3/VariablePicker.js"),n=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../utils/getVariableNameEmail.js"),p=require("../utils/highlightFor.js"),c=require("./DesktopPreview.js"),h=require("./EditWhatsAppTemplateV2.js"),b=require("./MobilePreview.js"),v=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=m(i);const f=C.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),d=require("../utils/constants.js"),p=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),c=require("./DesktopPreview.js"),h=require("./EditWhatsAppTemplateV2.js"),m=require("./MobilePreview.js"),C=require("./VariableConnectorsPanel.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var P=v(i);const f=P.default.div`
 	display: flex;
 	//	height: 100%;
-`,g=C.default.div`
-	max-width: 450px;
+`,w=P.default.div`
+	padding: 16px 14px;
+	max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===r.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${n.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${n.COLORS.stroke.primary} 1px solid`:void 0};
-`,w=C.default.div`
+	border-left: ${s.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
+	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
+`,x=P.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
-`;exports.default=i=>{const{showVariableMapping:m,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k,variableListForImage:y,showSampleValues:T}=i,L=t.useRef(),A=t.useRef(),{variableCallback:S,showVariablePicker:V,setShowVariablePicker:q,device:M,display_content:N,channel:O,template:_,setTemplate:W,isWhatsappCarousel:H,isProductCarouselType:I,hideDeviceContainerInPreview:D}=d.useTemplateModalContext();const F=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(f,{children:[e.jsx(w,Object.assign({showOnlyContent:C,showVariableMapping:m,isWhatsappCarousel:H,hideDeviceContainerInPreview:D},{children:"mobile"===M?e.jsx(b.default,{ref:A,display_content:null!=N?N:"",channel:O,template:_,showSampleValues:T}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(l.CarouselPreview,{ref:L,channel:O,template:_,showSampleValues:T,isPreview:!1}):O!==r.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:O,display_content:null!=N?N:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(I||m)&&e.jsxs(g,Object.assign({channel:O,isWhatsappCarousel:H},{children:[e.jsx("div",Object.assign({style:{width:428,display:V?"block":"none"}},{children:e.jsx(s.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>q(!1),onSelect:e=>{S(e),q(!1)},onClose:()=>{q(!1)},type:a.PickerType.EMBEDDED,data:null!=j?j:[]})})),e.jsx("div",Object.assign({style:{padding:"16px 14px",display:V?"none":"block"}},{children:O!==r.CHANNEL_TYPE.WHATSAPP?e.jsx(v.default,{onFocus:O===r.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===M?"template_html_mobile":"template_html_desktop"),o=u.getVariableNameForEmailByIndex(e+1),s=O===r.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(o):document.getElementById(o),d=F(s),c=null==s?void 0:s.offsetLeft;"desktop"===M?d&&L.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M)):d&&A.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M))}:void 0,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(o.default,{whatsappSpecificPickerMeta:x,template:_,showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k}):e.jsx(h.default,{whatsappSpecificPickerMeta:x,template:_,onTemplateChange:e=>{null==W||W(e)},showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k})}))]}))]})};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?`url(${d.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
+`;exports.default=i=>{const{showVariableMapping:d,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:g,variableList:E,discountCode:b,setDiscountCode:A,variableListForImage:j,showSampleValues:N,fileName:T,setFileName:y}=i,L=t.useRef(),S=t.useRef(),{device:_,display_content:M,channel:W,template:H,setTemplate:O,isWhatsappCarousel:V,isProductCarouselType:I,hideDeviceContainerInPreview:q}=r.useTemplateModalContext();const k=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(f,{children:[e.jsx(x,Object.assign({showOnlyContent:v,showVariableMapping:d,isWhatsappCarousel:V,hideDeviceContainerInPreview:q,channel:W},{children:"mobile"===_?e.jsx(m.default,{ref:S,display_content:null!=M?M:"",channel:W,template:H,showSampleValues:N}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(a.CarouselPreview,{ref:L,channel:W,template:H,showSampleValues:N,isPreview:!1}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:W,display_content:null!=M?M:"",showSampleValues:N}):e.jsx(e.Fragment,{})})),(I||d)&&e.jsx(w,Object.assign({channel:W,isWhatsappCarousel:V,showVariableMapping:!0},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(C.default,{onFocus:W===o.CHANNEL_TYPE.EMAIL?function(e){var t,i,a;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===_?"template_html_mobile":"template_html_desktop"),n=p.getVariableNameForEmailByIndex(e+1),r=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),d=k(r),c=null==r?void 0:r.offsetLeft;"desktop"===_?d&&L.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_)):d&&S.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_))}:void 0,showVariableModal:g,variableList:E,discountCode:b,setDiscountCode:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A}):e.jsx(h.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==O||O(e)},showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A,fileName:T,setFileName:y})})),W===o.CHANNEL_TYPE.WHATSAPP&&!d&&!I&&e.jsx(w,{children:e.jsx(n.BodySecondary,Object.assign({color:s.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};

package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;

package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.d.ts

@@ -1,4 +1,6 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
 export declare const DiscountCodeComponent: (props: {
     discountCode?: string | undefined;
     setDiscountCode?: ((code: string) => void) | undefined;
+    variableList?: VariableListInterfaceV2[] | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/PlusIcon.js"),t=require("react"),r=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),i=require("../context/templateModalContext.js"),n=require("./VariableConnectorsPanel.js"),o=require("../../input/Input.js");exports.DiscountCodeComponent=l=>{const{discountCode:c,setDiscountCode:d}=l,[u,j]=t.useState(""),[x,h]=t.useState(!!c),[g,p]=t.useState(!1),{setVariableCallback:b,setShowVariablePicker:C}=i.useTemplateModalContext(),f=t.useRef(),v=t.useRef();t.useEffect((()=>{d&&u&&d(c+u)}),[u]);const m=e=>{j(e.actualValue)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(r.CheckBox,{isChecked:x,onValueChange:()=>{x&&d&&(d(""),j("")),h(!x)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),x&&e.jsxs("div",Object.assign({ref:f,style:{margin:10}},{children:[e.jsx(o.Input,{placeholder:"Enter your discount code",onChangeText:e=>{d&&d(e)},value:c,onFocus:()=>{p(!0)},onBlur:e=>{var s;"addVar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(f.current&&f.current.focus(),p(!0)):p(!1)},noErrorHint:!0,validate:e=>[!0,""]}),g&&e.jsx(n.AddVariableStyled,Object.assign({ref:v,id:"addVar",onClick:e=>{e.stopPropagation(),b((()=>m)),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/PlusIcon.js"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var i=require("../../input/Input.js");require("../../tooltips/Tooltip.js"),require("../../../constants/Theme.js"),require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var t=require("../../TypographyStyle.js"),l=require("../../checkBox/CheckBox.js"),d=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=o=>{const{discountCode:n,setDiscountCode:u,variableList:c}=o,[j,b]=a.useState(""),[h,v]=a.useState(!!n),[x,g]=a.useState(!1),[V,p]=a.useState(!1),q=a.useRef(),m=a.useRef();return a.useEffect((()=>{u&&j&&u(n+j)}),[j]),e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(l.CheckBox,{isChecked:h,onValueChange:()=>{h&&u&&(u(""),b("")),v(!h)}}),e.jsx(t.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),h&&e.jsxs("div",Object.assign({ref:q,style:{margin:10}},{children:[e.jsx(i.Input,{placeholder:"Enter your discount code",onChangeText:e=>{u&&u(e)},value:n,onFocus:()=>{g(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(q.current&&q.current.focus(),g(!0)):(g(!1),p(!1))},noErrorHint:!0,validate:e=>[!0,""]}),x&&e.jsx(d.AddVariableStyled,Object.assign({ref:m,id:"addVar",onClick:e=>{e.stopPropagation(),p(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),V&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=c?c:[],showVariable:V,setShowVariable:p,variableValue:j,setVariableValue:b,placeholder:"Add a variable",customTrigger:e=>{b(e.actualValue),g(!1)}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:q}=E;const{pod:I}=h.useTemplateModalContext(),[T,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:q.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[q.loading?e.jsx(s.Spinner,{size:"large"}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:q.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:q.loading?"Your image is getting loaded. This may take a couple of minutes.":b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!q.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:T,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,placeHolder:"Enter URL/Add variable",showAddButton:I!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:q.handleImageUpload,accept:P}),!!q.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:q.selectedImage,onCropComplete:q.onCropComplete,onCancel:()=>{q.setLoading(!1),q.setSelectedImage(""),M.current&&(M.current.value="")}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:I}=E;const{pod:T}=h.useTemplateModalContext(),[q,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(s.PureSpinner,{width:"40px",height:"40px",color:n.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:I.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:I.loading?`Your ${b.toLowerCase()} is getting loaded. This may take a couple of minutes.`:b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:q,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:P}),!!I.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),M.current&&(M.current.value="")}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.style.js

@@ -26,7 +26,6 @@
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-	height: 100%;
 `,a=i.default.div`
 	padding-bottom: 0px;
 	min-width: 285px;

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),r=require("../../../assets/icons/PlusIcon.js"),l=require("lodash"),a=require("react"),i=require("../../button/Button.js"),n=require("../../icon-button/IconButton.js"),o=require("../../product-picker-v2/modal.js"),s=require("../Badge/index.js"),d=require("../context/templateModalContext.js"),c=require("./EditWhatsAppTemplateV2.js"),u=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var p=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../TypographyStyle.js");exports.default=g=>{let{template:v,whatsappSpecificPickerMeta:x,showVariableModal:j,variableList:y,variableListForImage:f,discountCode:b,setDiscountCode:C}=g;var O,I;const{selectedCarouselIndex:P,setTemplate:q,pickerConf:w,isProductCarouselType:S,pod:k,cardCount:T,carouselProducts:B,setCarouselProducts:L,isError:E,cardImages:M,disableEditVariable:R,onDeleteSelectedProducts:A,setSelectedCarouselIndex:D,setVariableCallback:F,setShowVariablePicker:V}=d.useTemplateModalContext(),[W,N]=a.useState(-1==P?"First Message (Step 1/2)":S?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[_,$]=a.useState(!1),[z,G]=a.useState(!1);a.useEffect((()=>{N(-1==P?"First Message (Step 1/2)":S?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[P]);const H=e=>{null==L||L([{name:"variable",productName:e.actualValue}])};return e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",marginBottom:24}},{children:[null!=P&&P>=0&&e.jsx(n.IconButton,{Icon:t.default,onClick:()=>{null==D||D(-1)}}),e.jsx(h.TitleMedium,Object.assign({style:{marginLeft:10}},{children:W}))]})),S&&(null!==(O=null==B?void 0:B.length)&&void 0!==O?O:0)>0&&null!=P&&P>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(u.ProductBox,{editItem:()=>{1===(null==B?void 0:B.length)&&"variable"===B[0].name?(F((()=>H)),V(!0)):$(!_)},cardBody:1===(null==B?void 0:B.length)&&"variable"===B[0].name?`${B[0].productName}`:`${null==B?void 0:B.length} Products Selected`,hideIcon:1===(null==B?void 0:B.length)&&"variable"===B[0].name,deleteItem:()=>{var e;if(1===(null==B?void 0:B.length)&&"variable"===B[0].name)return void(null==L||L([]));const t=l.cloneDeep(Object.assign({},v));t&&(M&&M.length>0?null==M||M.forEach(((e,r)=>{var l;t.components[1].cards[r].components[0].example.header_handle=[null!==(l=M[r])&&void 0!==l?l:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,r)=>{t.components[1].cards[r].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==q||q(t)),null==L||L([]),null==A||A()}}),B&&(null==B?void 0:B.length)>0&&"variable"!=B[0].name&&e.jsx(i.Button,{disabled:(null!==(I=null==B?void 0:B.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{G(!0),$(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!R&&S&&0===(null==B?void 0:B.length)&&null!=P&&P>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(h.TitleRegular,{children:"Product(s)"}),e.jsx(h.BodySecondary,{children:`Select ${null!=T?T:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:E?16:12,marginRight:E?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(i.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:E?`2px dashed ${p.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:E?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(r.default,{width:18,height:18,color:p.COLORS.content.secondary})})),onClick:e=>{$(!0)}}),k===m.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(h.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(i.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:E?`2px dashed ${p.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:E?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(r.default,{width:18,height:18,color:p.COLORS.content.secondary})})),onClick:e=>{F((()=>H)),V(!0)}})]})]})),E&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(s.Badge,{padding:"8px",errorText:"Please add products"})}))]}),e.jsx(c.default,{whatsappSpecificPickerMeta:x,template:v,onTemplateChange:e=>{null==q||q(e)},showVariableModal:j,variableList:y,variableListForImage:f,discountCode:b,setDiscountCode:C}),_&&w&&e.jsx(o.ProductPickerModal,{zIndex:200,startupScreen:z?o.ScreenName.RearrangeProducts:o.ScreenName.Collections,rearrangeEnabled:!0,storeId:w.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const r of e){const e=null==r?void 0:r.collectionId,l=r.productId,a=r.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),l in t[e].products||(t[e].products[l]={variants:{},name:(null==r?void 0:r.productName)||"",image:(null==r?void 0:r.productImage)||""}),t[e].products[l].variants[a]={name:(null==r?void 0:r.name)||"",price:"",image:(null==r?void 0:r.image)||"",quantity:r.quantity||0,displayOrder:r.displayOrder}}return t}return{}})(null!=B?B:[]),collectionFetcher:w.fetchCollections,productFetcher:w.fetchProducts,onAdd:(e,t)=>{var r,a,i,n,o,s;G(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const l=e[t].products;if(void 0!==l&&Object.keys(l).length)for(const e of Object.keys(l)){const c=l[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:h,displayOrder:g}=c[u],v={name:p,image:null!==(a=null!=m?m:null===(r=l[e])||void 0===r?void 0:r.image)&&void 0!==a?a:"",quantity:h,variantId:u,productId:e,displayOrder:g,collectionId:t,productName:null!==(n=null===(i=l[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(s=null===(o=l[e])||void 0===o?void 0:o.image)&&void 0!==s?s:""};d.push(v)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=l.cloneDeep(Object.assign({},v));p&&(u.forEach(((e,t)=>{var r;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(r=null==M?void 0:M[t])&&void 0!==r?r:""]})),null==q||q(p)),null==L||L(c),$(!1)},searchInCollectionFetcher:w.searchInCollection,searchFetcher:w.searchProducts,visible:_,onClose:()=>{$(!1)},exactLimit:null!=T?T:1})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),r=require("../../../assets/icons/PlusIcon.js"),l=require("lodash"),a=require("react"),i=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var o=require("../../button/Button.js"),s=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../Badge/index.js"),p=require("../context/templateModalContext.js"),m=require("./EditWhatsAppTemplateV2.js"),h=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var g=require("../../template-preview/models/WhatsAppTemplate.js");exports.default=v=>{let{template:j,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:b,variableListForImage:f,discountCode:C,setDiscountCode:O}=v;var q,I;const{selectedCarouselIndex:S,setTemplate:w,pickerConf:P,isProductCarouselType:T,pod:k,cardCount:B,carouselProducts:L,setCarouselProducts:V,isError:A,cardImages:E,disableEditVariable:M,onDeleteSelectedProducts:R,setSelectedCarouselIndex:D}=p.useTemplateModalContext(),[F,W]=a.useState(-1==S?"First Message (Step 1/2)":T?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[_,N]=a.useState(!1),[$,z]=a.useState(!1),[G,H]=a.useState(!1);a.useEffect((()=>{W(-1==S?"First Message (Step 1/2)":T?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[S]);return e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",marginBottom:24}},{children:[null!=S&&S>=0&&e.jsx(s.IconButton,{Icon:t.default,onClick:()=>{null==D||D(-1)}}),e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10}},{children:F}))]})),T&&(null!==(q=null==L?void 0:L.length)&&void 0!==q?q:0)>0&&null!=S&&S>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(h.ProductBox,{editItem:()=>{1===(null==L?void 0:L.length)&&"variable"===L[0].name?H(!0):N(!_)},cardBody:1===(null==L?void 0:L.length)&&"variable"===L[0].name?`${L[0].productName}`:`${null==L?void 0:L.length} Products Selected`,hideIcon:1===(null==L?void 0:L.length)&&"variable"===L[0].name,deleteItem:()=>{var e;if(1===(null==L?void 0:L.length)&&"variable"===L[0].name)return void(null==V||V([]));const t=l.cloneDeep(Object.assign({},j));t&&(E&&E.length>0?null==E||E.forEach(((e,r)=>{var l;t.components[1].cards[r].components[0].example.header_handle=[null!==(l=E[r])&&void 0!==l?l:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,r)=>{t.components[1].cards[r].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==w||w(t)),null==V||V([]),null==R||R()}}),L&&(null==L?void 0:L.length)>0&&"variable"!=L[0].name&&e.jsx(o.Button,{disabled:(null!==(I=null==L?void 0:L.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{z(!0),N(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!M&&T&&0===(null==L?void 0:L.length)&&null!=S&&S>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(d.TitleRegular,{children:"Product(s)"}),e.jsx(d.BodySecondary,{children:`Select ${null!=B?B:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:A?16:12,marginRight:A?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:A?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:A?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(r.default,{width:18,height:18,color:n.COLORS.content.secondary})})),onClick:e=>{N(!0)}}),k===g.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:A?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:A?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(r.default,{width:18,height:18,color:n.COLORS.content.secondary})})),onClick:e=>{H(!0)}})]})]})),A&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(u.Badge,{padding:"8px",errorText:"Please add products"})}))]}),e.jsx(m.default,{whatsappSpecificPickerMeta:x,template:j,onTemplateChange:e=>{null==w||w(e)},showVariableModal:y,variableList:b,variableListForImage:f,discountCode:C,setDiscountCode:O}),_&&P&&e.jsx(c.ProductPickerModal,{zIndex:200,startupScreen:$?c.ScreenName.RearrangeProducts:c.ScreenName.Collections,rearrangeEnabled:!0,storeId:P.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const r of e){const e=null==r?void 0:r.collectionId,l=r.productId,a=r.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),l in t[e].products||(t[e].products[l]={variants:{},name:(null==r?void 0:r.productName)||"",image:(null==r?void 0:r.productImage)||""}),t[e].products[l].variants[a]={name:(null==r?void 0:r.name)||"",price:"",image:(null==r?void 0:r.image)||"",quantity:r.quantity||0,displayOrder:r.displayOrder}}return t}return{}})(null!=L?L:[]),collectionFetcher:P.fetchCollections,productFetcher:P.fetchProducts,onAdd:(e,t)=>{var r,a,i,o,s,n;z(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const l=e[t].products;if(void 0!==l&&Object.keys(l).length)for(const e of Object.keys(l)){const c=l[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:h,displayOrder:g}=c[u],v={name:p,image:null!==(a=null!=m?m:null===(r=l[e])||void 0===r?void 0:r.image)&&void 0!==a?a:"",quantity:h,variantId:u,productId:e,displayOrder:g,collectionId:t,productName:null!==(o=null===(i=l[e])||void 0===i?void 0:i.name)&&void 0!==o?o:"",productImage:null!==(n=null===(s=l[e])||void 0===s?void 0:s.image)&&void 0!==n?n:""};d.push(v)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=l.cloneDeep(Object.assign({},j));p&&(u.forEach(((e,t)=>{var r;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(r=null==E?void 0:E[t])&&void 0!==r?r:""]})),null==w||w(p)),null==V||V(c),N(!1)},searchInCollectionFetcher:P.searchInCollection,searchFetcher:P.searchProducts,visible:_,onClose:()=>{N(!1)},exactLimit:null!=B?B:1}),G&&e.jsx(i.AddVariableV2SideModal,{zIndex:2e3,data:null!=b?b:[],showVariable:G,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{null==V||V([{name:"variable",productName:e.actualValue}])}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts

@@ -15,5 +15,5 @@ export interface EditWhatsAppTemplateV2Props {
     fileName?: string;
     setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -4,4 +4,4 @@
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,setDiscountCode:L,fileName:q,setFileName:D}=o;var I,R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,re,ue,pe;const ce=T.isCarouselType,{originalVariableList:ve,pod:me,extras:be,selectedCarouselIndex:ge,isProductCarouselType:fe}=s.useTemplateModalContext(),{descriptionComponents:je,urlBtns:he,qrbBtns:Ce,imageComponent:Oe,bodyVariables:xe,headerVariables:Te}=r.getAllDataFromTemplateComponent(T),ye=t.useRef(null),Ee=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ve,Be]=t.useState(!1),[ke,Me]=t.useState(-1===ge?{descriptionComponents:je,urlBtns:he,qrbBtns:Ce,imageComponent:Oe,bodyVariables:xe,headerVariables:Te}:{}),{uploadMediaLink:Le,uploadMediaFiles:qe}=V,De=f.useEditWhatsappTemplateMedia({uploadMediaLink:Le,uploadMediaFiles:qe,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,r,u;let p;p=null!=ge&&ge>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ge].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[ge]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[ge]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==E||E(Object.assign({},e)),Re(!0)}else null==E||E(Object.assign({},p))},mediaComponent:ce?ke.imageComponent:Oe,fileRef:ye}),[Ie,Re]=t.useState(!1),[Ue,Pe]=t.useState(q),[Ae,we]=t.useState();function Ne(e,t,o){var i,l,a,s,d,r,u,p,c,v;const m=null!=ge&&ge>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ge].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ge]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ge&&ge>-1&&fe){const t=Object.assign({},T).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const n=null===(d=null==b?void 0:b.components[j].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[j]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Be(!0):(Be(!1),null==L||L(""))}if(null!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=b.components,e.mapping.cards[ge]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function Se(e,t,o){var i,l,a,s,d,r;const u=null!=ge&&ge>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ge].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ge]}:Object.assign({},T);if(null!=ge&&ge>-1&&fe){const t=Object.assign({},T).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const a=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(a=null==u?void 0:u.components[p].buttons)||void 0===a?void 0:a.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(s=u.components)||void 0===s?void 0:s[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[p]),{buttons:i}),a=[...u.components];a[p]=l,u.components=a}}if(null!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=u.components,null==E||E(Object.assign({},e))}else null==E||E(u)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Be(!0);else{Be(!1);const e=null===(n=null==be?void 0:be.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=ge&&ge>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ge].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ge]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Me({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p})}else if(null!=ge&&-1===ge){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=r.getAllDataFromTemplateComponent(T);Me({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ge]),t.useEffect((()=>{var e,n,t,o;if(null!=ge&&ge>-1&&Ie){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ge].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ge]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Me({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}),Re(!1)}}),[Ie]);const _e=ce?ke.imageComponent:Oe;return De.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(I=_e.format)&&void 0!==I?I:l.HEADER_TYPES.IMAGE,uploadMedia:De.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:De,setOpenEditMedia:De.setOpenEditMedia,openEditMedia:De.openEditMedia,editIconRef:De.editIconRef,fileRef:ye})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ke.imageComponent&&!fe&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(U=null===(R=null==_e?void 0:_e.example)||void 0===R?void 0:R.header_handle)&&void 0!==U?U:[],handleImageChange:De.handleImageChange,mediaType:null==_e?void 0:_e.format,error:De.error,isLoading:De.loading,setOpenEditMedia:De.setOpenEditMedia,selectedVariable:u.isVariable(null!==(w=null===(A=null===(P=null==_e?void 0:_e.example)||void 0===P?void 0:P.header_handle)||void 0===A?void 0:A[0])&&void 0!==w?w:"")?null===(S=null===(N=null==_e?void 0:_e.example)||void 0===N?void 0:N.header_handle)||void 0===S?void 0:S[0]:(null===(F=null===(_=null==T?void 0:T.mapping)||void 0===_?void 0:_.header)||void 0===F?void 0:F[0])?null===(Q=null===(H=null==T?void 0:T.mapping)||void 0===H?void 0:H.header)||void 0===Q?void 0:Q[0]:De.selectedVariable}),(null==Oe?void 0:Oe.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Ue,errorMessage:Ae||void 0,onBlur:()=>{if(!Ue)return null==D||D(""),void we("PDF name is Required");const e=p.validateInputName(Ue);null==D||D(Ue),we(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{we(""),Pe(e)}})}):e.jsx(e.Fragment,{})]}),ke.bodyVariables.length>0&&e.jsx(O.default,{containerStyle:{paddingTop:ke.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(Y=ke.descriptionComponents)||void 0===Y?void 0:Y.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=ge&&ge>-1?ve.cards[ge]:ve,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===(W=null===(K=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===K?void 0:K.filter((e=>"URL"===e.type)))||void 0===W?void 0:W.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(G=null===($=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===$?void 0:$.filter((e=>me===a.POD.CHATBOT||"URL"===e.type)))||void 0===G?void 0:G.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=ge&&ge>-1?Object.assign({},ve.cards[ge]):Object.assign({},ve),updateSelectedURLTemplateBtn:Ne,variableList:k},`${t}_${ge}`)})),me===a.POD.CHATBOT&&(null===(z=null===(X=Ce[0])||void 0===X?void 0:X.component)||void 0===z?void 0:z.buttons)&&(null===(ee=null===(Z=null===(J=Ce[0])||void 0===J?void 0:J.component)||void 0===Z?void 0:Z.buttons)||void 0===ee?void 0:ee.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(ne=null==be?void 0:be.backTrackExtra)||void 0===ne?void 0:ne[0],setBackTrackMessage:null===(te=null==be?void 0:be.backTrackExtra)||void 0===te?void 0:te[1]}),(null===(ie=null===(oe=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===oe?void 0:oe.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ie?void 0:ie.length)>0&&(me!==a.POD.CHATBOT?e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(c.BackTrackComponent,{backTrackMessage:null===(le=null==be?void 0:be.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==be?void 0:be.backTrackExtra)||void 0===ae?void 0:ae[1]})),null===(de=null===(se=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===se?void 0:se.filter((e=>"QUICK_REPLY"===e.type)))||void 0===de?void 0:de.map(((n,t)=>{if("QUICK_REPLY"===n.type&&me!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=ge&&ge>-1?Object.assign({},ve.cards[ge]):Object.assign({},ve),updateSelectedQRBTemplateBtn:Se},`${t}_${ge}`)})),me===a.POD.CHATBOT&&Ve&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(re=null==be?void 0:be.discountCodeExtra)||void 0===re?void 0:re[0],setDiscountCode:null===(ue=null==be?void 0:be.discountCodeExtra)||void 0===ue?void 0:ue[1]}),null===(pe=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===pe?void 0:pe.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(j.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Ee,componentType:"BUTTONS"},t)}))]}))};
+`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,re,ue,pe,ce;const ve=T.isCarouselType,{originalVariableList:me,pod:be,extras:ge,selectedCarouselIndex:fe,isProductCarouselType:je}=s.useTemplateModalContext(),{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}=r.getAllDataFromTemplateComponent(T),Ee=t.useRef(null),Ve=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Be,ke]=t.useState(!1),[Me,Le]=t.useState(-1===fe?{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}:{}),{uploadMediaLink:qe,uploadMediaFiles:De}=V,Ie=f.useEditWhatsappTemplateMedia({uploadMediaLink:qe,uploadMediaFiles:De,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,r,u;let p;p=null!=fe&&fe>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[fe].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[fe]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[fe]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==E||E(Object.assign({},e)),Ue(!0)}else null==E||E(Object.assign({},p))},mediaComponent:ve?Me.imageComponent:xe,fileRef:Ee}),[Re,Ue]=t.useState(!1),[Pe,Ae]=t.useState(D),[we,Ne]=t.useState();function Se(e,t,o){var i,l,a,s,d,r,u,p,c,v;const m=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=fe&&fe>-1&&je){const t=Object.assign({},T).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const n=null===(d=null==b?void 0:b.components[j].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[j]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?ke(!0):(ke(!1),null==q||q(""))}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=b.components,e.mapping.cards[fe]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function _e(e,t,o){var i,l,a,s,d,r;const u=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T);if(null!=fe&&fe>-1&&je){const t=Object.assign({},T).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const a=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(a=null==u?void 0:u.components[p].buttons)||void 0===a?void 0:a.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(s=u.components)||void 0===s?void 0:s[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[p]),{buttons:i}),a=[...u.components];a[p]=l,u.components=a}}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=u.components,null==E||E(Object.assign({},e))}else null==E||E(u)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ke(!0);else{ke(!1);const e=null===(n=null==ge?void 0:ge.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p})}else if(null!=fe&&-1===fe){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=r.getAllDataFromTemplateComponent(T);Le({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[fe]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1&&Re){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}),Ue(!1)}}),[Re]);const Fe=ve?Me.imageComponent:xe;return Ie.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=Fe.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ie.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ie,setOpenEditMedia:Ie.setOpenEditMedia,openEditMedia:Ie.openEditMedia,editIconRef:Ie.editIconRef,fileRef:Ee})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Me.imageComponent&&!je&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==Fe?void 0:Fe.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ie.handleImageChange,mediaType:null==Fe?void 0:Fe.format,error:Ie.error,isLoading:Ie.loading,setOpenEditMedia:Ie.setOpenEditMedia,selectedVariable:u.isVariable(null!==(N=null===(w=null===(A=null==Fe?void 0:Fe.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==Fe?void 0:Fe.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ie.selectedVariable}),(null==xe?void 0:xe.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Pe,errorMessage:we||void 0,onBlur:()=>{if(!Pe)return null==I||I(""),void Ne("PDF name is Required");const e=p.validateInputName(Pe);null==I||I(Pe),Ne(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ne(""),Ae(e)}})}):e.jsx(e.Fragment,{})]}),Me.bodyVariables.length>0&&e.jsx(O.default,{containerStyle:{paddingTop:Me.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(K=Me.descriptionComponents)||void 0===K?void 0:K.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=fe&&fe>-1?me.cards[fe]:me,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===($=null===(W=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===W?void 0:W.filter((e=>"URL"===e.type)))||void 0===$?void 0:$.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(X=null===(G=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===G?void 0:G.filter((e=>be===a.POD.CHATBOT||"URL"===e.type)))||void 0===X?void 0:X.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedURLTemplateBtn:Se,variableList:k},`${t}_${fe}`)})),be===a.POD.CHATBOT&&(null===(J=null===(z=Oe[0])||void 0===z?void 0:z.component)||void 0===J?void 0:J.buttons)&&(null===(ne=null===(ee=null===(Z=Oe[0])||void 0===Z?void 0:Z.component)||void 0===ee?void 0:ee.buttons)||void 0===ne?void 0:ne.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(te=null==ge?void 0:ge.backTrackExtra)||void 0===te?void 0:te[0],setBackTrackMessage:null===(oe=null==ge?void 0:ge.backTrackExtra)||void 0===oe?void 0:oe[1]}),(null===(le=null===(ie=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ie?void 0:ie.filter((e=>"QUICK_REPLY"===e.type)))||void 0===le?void 0:le.length)>0&&(be!==a.POD.CHATBOT?e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(c.BackTrackComponent,{backTrackMessage:null===(ae=null==ge?void 0:ge.backTrackExtra)||void 0===ae?void 0:ae[0],setBackTrackMessage:null===(se=null==ge?void 0:ge.backTrackExtra)||void 0===se?void 0:se[1]})),null===(re=null===(de=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===re?void 0:re.map(((n,t)=>{if("QUICK_REPLY"===n.type&&be!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedQRBTemplateBtn:_e},`${t}_${fe}`)})),be===a.POD.CHATBOT&&Be&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(ue=null==ge?void 0:ge.discountCodeExtra)||void 0===ue?void 0:ue[0],setDiscountCode:null===(pe=null==ge?void 0:ge.discountCodeExtra)||void 0===pe?void 0:pe[1],variableList:k}),null===(ce=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ce?void 0:ce.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(j.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Ve,componentType:"BUTTONS"},t)}))]}))};

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=o(t),n=o(i);const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const c=p.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,c=n.default.div`
+`,d=p.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,9 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=p.default.forwardRef(((t,i)=>{let{display_content:o,channel:p,template:n,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:v}=s.useTemplateModalContext(),w={showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},w))}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(p),height:443}}),e.jsx(c,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},w))}))]}))})}));h.displayName="MobilePreview";const m=n.default.div`
+`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;exports.default=h;