@bikdotai/bik-component-library 0.0.513-beta.2 → 0.0.513

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

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

package/dist/esm/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/esm/components/states/StateComponent.styled.js

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

package/dist/esm/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/esm/components/states-modal/StateModalComponent.js

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

package/dist/esm/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/esm/components/stepper/Stepper.js

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

package/dist/esm/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/esm/components/stepper/Stepper.styled.js

@@ -1,10 +1,10 @@
-import e from"styled-components";import{getTheme as t}from"./themes.js";const o=e.div`
+import e from"styled-components";import{getTheme as t}from"./themes.js";const i=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	gap: 16px;
-`,i=e.div`
+`,o=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -26,9 +26,9 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const o=
 		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 {
@@ -80,4 +80,4 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const o=
 		align-items: center;
 		overflow-y: auto;
 	}
-`;export{i as SingleStepperChildContainer,o as StepperContainer};
+`;export{o as SingleStepperChildContainer,i as StepperContainer};

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

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

package/dist/esm/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/esm/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-import e,{useContext as l}from"react";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";const t=e.createContext({variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:a.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1}),i=()=>l(t);export{t as TemplateModalContext,i as useTemplateModalContext};
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:i.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1}),r=()=>t(l);export{l as TemplateModalContext,r as useTemplateModalContext};

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

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

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";const m=i.div`
 	background: ${o.surface.standard};
 	border: 1px solid ${o.stroke.primary};
 	border-radius: 8px;
@@ -17,4 +17,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(s,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(m,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

package/dist/esm/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/esm/components/template-context-mapper/modalElements/DiscountCodeComponent.js

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

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

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

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

@@ -26,7 +26,6 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-	height: 100%;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;

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

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

package/dist/esm/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/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import E from"./VariableEditorHeader.js";import V from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,setDiscountCode:w,fileName:N,setFileName:P}=s;var A,D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,me,ve,be;const ge=B.isCarouselType,{originalVariableList:fe,pod:he,extras:je,selectedCarouselIndex:Oe,isProductCarouselType:Ce}=u(),{descriptionComponents:Te,urlBtns:xe,qrbBtns:ye,imageComponent:Ee,bodyVariables:Ve,headerVariables:Be}=m(B),ke=i(null),Le=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Me,Ie]=l(!1),[Re,Ue]=l(-1===Oe?{descriptionComponents:Te,urlBtns:xe,qrbBtns:ye,imageComponent:Ee,bodyVariables:Ve,headerVariables:Be}:{}),{uploadMediaLink:we,uploadMediaFiles:Ne}=M,Pe=C({uploadMediaLink:we,uploadMediaFiles:Ne,updateTemplateImageUrl:function(e,o){var n,i,l,a,s,d,r,p;let u;u=null!=Oe&&Oe>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[Oe].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Oe]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.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==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=Oe&&Oe>-1){const e=t(B);e.components[1].cards[Oe].components=u.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[Oe]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},e)),De(!0)}else null==L||L(Object.assign({},u))},mediaComponent:ge?Re.imageComponent:Ee,fileRef:ke}),[Ae,De]=l(!1),[_e,He]=l(N),[Se,Fe]=l();function Qe(e,o,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=Oe&&Oe>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Oe].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Oe]}:Object.assign({},B),b=t(v),g="custom"===o&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Oe&&Oe>-1&&Ce){const o=Object.assign({},B).components.map((e=>{var o;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&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({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var n;return Object.assign(Object.assign({},o),{buttons:null===(n=null==o?void 0:o.buttons)||void 0===n?void 0:n.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=t(B);return l.components=o,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].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[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Ie(!0):(Ie(!1),null==w||w(""))}if(null!=Oe&&Oe>-1){const e=t(B);e.components[1].cards[Oe].components=b.components,e.mapping.cards[Oe]=b.mapping,null==L||L(Object.assign({},e))}else null==L||L(b)}function qe(e,o,n){var i,l,a,s,d,r;const p=null!=Oe&&Oe>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Oe].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Oe]}:Object.assign({},B);if(null!=Oe&&Oe>-1&&Ce){const o=Object.assign({},B).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=o.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({},o),{buttons:d})}return o}))})))}):o})),i=t(B);return i.components=o,void(null==L||L(Object.assign({},i)))}const u=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const o=null===(a=null==p?void 0:p.components[u].buttons)||void 0===a?void 0:a.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(s=p.components)||void 0===s?void 0:s[u])||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({},p.components[u]),{buttons:i}),a=[...p.components];a[u]=l,p.components=a}}if(null!=Oe&&Oe>-1){const e=t(B);e.components[1].cards[Oe].components=p.components,null==L||L(Object.assign({},e))}else null==L||L(p)}a((()=>{var e,o;if(null===(e=B.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Ie(!0);else{Ie(!1);const e=null===(o=null==je?void 0:je.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[B]),a((()=>{var e,o,n,t;if(null!=Oe&&Oe>-1){const i={components:null===(o=null===(e=B.components[1])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Oe].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Oe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);Ue({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Oe&&-1===Oe){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);Ue({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Oe]),a((()=>{var e,o,n,t;if(null!=Oe&&Oe>-1&&Ae){const i={components:null===(o=null===(e=B.components[1])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Oe].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Oe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);Ue({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),De(!1)}}),[Ae]);const Ye=ge?Re.imageComponent:Ee;return Pe.openEditMedia?e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:null!==(A=Ye.format)&&void 0!==A?A:r.IMAGE,uploadMedia:Pe.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:Pe,setOpenEditMedia:Pe.setOpenEditMedia,openEditMedia:Pe.openEditMedia,editIconRef:Pe.editIconRef,fileRef:ke})})):o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Re.imageComponent&&!Ce&&o(O,{children:[e(j,{imageName:null!==(_=null===(D=null==Ye?void 0:Ye.example)||void 0===D?void 0:D.header_handle)&&void 0!==_?_:[],handleImageChange:Pe.handleImageChange,mediaType:null==Ye?void 0:Ye.format,error:Pe.error,isLoading:Pe.loading,setOpenEditMedia:Pe.setOpenEditMedia,selectedVariable:v(null!==(F=null===(S=null===(H=null==Ye?void 0:Ye.example)||void 0===H?void 0:H.header_handle)||void 0===S?void 0:S[0])&&void 0!==F?F:"")?null===(q=null===(Q=null==Ye?void 0:Ye.example)||void 0===Q?void 0:Q.header_handle)||void 0===q?void 0:q[0]:(null===(K=null===(Y=null==B?void 0:B.mapping)||void 0===Y?void 0:Y.header)||void 0===K?void 0:K[0])?null===($=null===(W=null==B?void 0:B.mapping)||void 0===W?void 0:W.header)||void 0===$?void 0:$[0]:Pe.selectedVariable}),(null==Ee?void 0:Ee.format)==r.DOCUMENT?e(k,{children:e(d,{labelText:"PDF Name",placeholder:"Enter the name",value:_e,errorMessage:Se||void 0,onBlur:()=>{if(!_e)return null==P||P(""),void Fe("PDF name is Required");const e=b(_e);null==P||P(_e),Fe(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Fe(""),He(e)}})}):e(n,{})]}),Re.bodyVariables.length>0&&e(E,{containerStyle:{paddingTop:Re.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===(G=Re.descriptionComponents)||void 0===G?void 0:G.map(((o,n)=>e(y,{originalVariableList:null!=Oe&&Oe>-1?fe.cards[Oe]:fe,type:o.type,descriptionComponent:o.component,showVariableModal:I,variableList:R},n))),(null===(z=null===(X=null!=Oe&&Oe>-1?fe.cards[Oe].buttons:null==fe?void 0:fe.buttons)||void 0===X?void 0:X.filter((e=>"URL"===e.type)))||void 0===z?void 0:z.length)>0&&e(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Oe&&Oe>-1?fe.cards[Oe].buttons:null==fe?void 0:fe.buttons)||void 0===J?void 0:J.filter((e=>he===p.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((o,n)=>{if("URL"===o.type)return e(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:o,currentVariableList:null!=Oe&&Oe>-1?Object.assign({},fe.cards[Oe]):Object.assign({},fe),updateSelectedURLTemplateBtn:Qe,variableList:R},`${n}_${Oe}`)})),he===p.CHATBOT&&(null===(oe=null===(ee=ye[0])||void 0===ee?void 0:ee.component)||void 0===oe?void 0:oe.buttons)&&(null===(ie=null===(te=null===(ne=ye[0])||void 0===ne?void 0:ne.component)||void 0===te?void 0:te.buttons)||void 0===ie?void 0:ie.length)>0&&e(g,{backTrackMessage:null===(le=null==je?void 0:je.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==je?void 0:je.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(de=null===(se=null!=Oe&&Oe>-1?fe.cards[Oe].buttons:null==fe?void 0:fe.buttons)||void 0===se?void 0:se.filter((e=>"QUICK_REPLY"===e.type)))||void 0===de?void 0:de.length)>0&&(he!==p.CHATBOT?e(E,{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(g,{backTrackMessage:null===(re=null==je?void 0:je.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==je?void 0:je.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(ce=null===(ue=null!=Oe&&Oe>-1?fe.cards[Oe].buttons:null==fe?void 0:fe.buttons)||void 0===ue?void 0:ue.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ce?void 0:ce.map(((o,n)=>{if("QUICK_REPLY"===o.type&&he!==p.CHATBOT)return e(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:o,currentVariableList:null!=Oe&&Oe>-1?Object.assign({},fe.cards[Oe]):Object.assign({},fe),updateSelectedQRBTemplateBtn:qe},`${n}_${Oe}`)})),he===p.CHATBOT&&Me&&e(f,{discountCode:null===(me=null==je?void 0:je.discountCodeExtra)||void 0===me?void 0:me[0],setDiscountCode:null===(ve=null==je?void 0:je.discountCodeExtra)||void 0===ve?void 0:ve[1]}),null===(be=null!=Oe&&Oe>-1?fe.cards[Oe].buttons:null==fe?void 0:fe.buttons)||void 0===be?void 0:be.map(((o,n)=>{var t,i,l;if("COPY_CODE"===o.type)return e(T,{index:n,variable:{variableName:null!==(t=o.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Le,componentType:"BUTTONS"},n)}))]}))},k=s.div`
+import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import E from"./VariableEditorHeader.js";import V from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,discountCode:w,setDiscountCode:N,fileName:P,setFileName:A}=s;var D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,me,ve,be,ge;const fe=B.isCarouselType,{originalVariableList:he,pod:je,extras:Oe,selectedCarouselIndex:Ce,isProductCarouselType:Te}=u(),{descriptionComponents:xe,urlBtns:ye,qrbBtns:Ee,imageComponent:Ve,bodyVariables:Be,headerVariables:ke}=m(B),Le=i(null),Me=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ie,Re]=l(!1),[Ue,we]=l(-1===Ce?{descriptionComponents:xe,urlBtns:ye,qrbBtns:Ee,imageComponent:Ve,bodyVariables:Be,headerVariables:ke}:{}),{uploadMediaLink:Ne,uploadMediaFiles:Pe}=M,Ae=C({uploadMediaLink:Ne,uploadMediaFiles:Pe,updateTemplateImageUrl:function(e,o){var n,i,l,a,s,d,r,p;let u;u=null!=Ce&&Ce>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[Ce].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Ce]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.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==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=Ce&&Ce>-1){const e=t(B);e.components[1].cards[Ce].components=u.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[Ce]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},e)),_e(!0)}else null==L||L(Object.assign({},u))},mediaComponent:fe?Ue.imageComponent:Ve,fileRef:Le}),[De,_e]=l(!1),[He,Se]=l(P),[Fe,Qe]=l();function qe(e,o,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=Ce&&Ce>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Ce].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Ce]}:Object.assign({},B),b=t(v),g="custom"===o&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Ce&&Ce>-1&&Te){const o=Object.assign({},B).components.map((e=>{var o;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&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({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var n;return Object.assign(Object.assign({},o),{buttons:null===(n=null==o?void 0:o.buttons)||void 0===n?void 0:n.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=t(B);return l.components=o,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].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[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Re(!0):(Re(!1),null==N||N(""))}if(null!=Ce&&Ce>-1){const e=t(B);e.components[1].cards[Ce].components=b.components,e.mapping.cards[Ce]=b.mapping,null==L||L(Object.assign({},e))}else null==L||L(b)}function Ye(e,o,n){var i,l,a,s,d,r;const p=null!=Ce&&Ce>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Ce].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Ce]}:Object.assign({},B);if(null!=Ce&&Ce>-1&&Te){const o=Object.assign({},B).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=o.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({},o),{buttons:d})}return o}))})))}):o})),i=t(B);return i.components=o,void(null==L||L(Object.assign({},i)))}const u=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const o=null===(a=null==p?void 0:p.components[u].buttons)||void 0===a?void 0:a.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(s=p.components)||void 0===s?void 0:s[u])||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({},p.components[u]),{buttons:i}),a=[...p.components];a[u]=l,p.components=a}}if(null!=Ce&&Ce>-1){const e=t(B);e.components[1].cards[Ce].components=p.components,null==L||L(Object.assign({},e))}else null==L||L(p)}a((()=>{var e,o;if(null===(e=B.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Re(!0);else{Re(!1);const e=null===(o=null==Oe?void 0:Oe.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[B]),a((()=>{var e,o,n,t;if(null!=Ce&&Ce>-1){const i={components:null===(o=null===(e=B.components[1])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ce].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ce]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);we({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Ce&&-1===Ce){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);we({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Ce]),a((()=>{var e,o,n,t;if(null!=Ce&&Ce>-1&&De){const i={components:null===(o=null===(e=B.components[1])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ce].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ce]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);we({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),_e(!1)}}),[De]);const Ke=fe?Ue.imageComponent:Ve;return Ae.openEditMedia?e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:null!==(D=Ke.format)&&void 0!==D?D:r.IMAGE,uploadMedia:Ae.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:Ae,setOpenEditMedia:Ae.setOpenEditMedia,openEditMedia:Ae.openEditMedia,editIconRef:Ae.editIconRef,fileRef:Le})})):o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Ue.imageComponent&&!Te&&o(O,{children:[e(j,{imageName:null!==(H=null===(_=null==Ke?void 0:Ke.example)||void 0===_?void 0:_.header_handle)&&void 0!==H?H:[],handleImageChange:Ae.handleImageChange,mediaType:null==Ke?void 0:Ke.format,error:Ae.error,isLoading:Ae.loading,setOpenEditMedia:Ae.setOpenEditMedia,selectedVariable:v(null!==(Q=null===(F=null===(S=null==Ke?void 0:Ke.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(Y=null===(q=null==Ke?void 0:Ke.example)||void 0===q?void 0:q.header_handle)||void 0===Y?void 0:Y[0]:(null===(W=null===(K=null==B?void 0:B.mapping)||void 0===K?void 0:K.header)||void 0===W?void 0:W[0])?null===(G=null===($=null==B?void 0:B.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:Ae.selectedVariable}),(null==Ve?void 0:Ve.format)==r.DOCUMENT?e(k,{children:e(d,{labelText:"PDF Name",placeholder:"Enter the name",value:He,errorMessage:Fe||void 0,onBlur:()=>{if(!He)return null==A||A(""),void Qe("PDF name is Required");const e=b(He);null==A||A(He),Qe(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Qe(""),Se(e)}})}):e(n,{})]}),Ue.bodyVariables.length>0&&e(E,{containerStyle:{paddingTop:Ue.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===(X=Ue.descriptionComponents)||void 0===X?void 0:X.map(((o,n)=>e(y,{originalVariableList:null!=Ce&&Ce>-1?he.cards[Ce]:he,type:o.type,descriptionComponent:o.component,showVariableModal:I,variableList:R},n))),(null===(J=null===(z=null!=Ce&&Ce>-1?he.cards[Ce].buttons:null==he?void 0:he.buttons)||void 0===z?void 0:z.filter((e=>"URL"===e.type)))||void 0===J?void 0:J.length)>0&&e(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(ee=null===(Z=null!=Ce&&Ce>-1?he.cards[Ce].buttons:null==he?void 0:he.buttons)||void 0===Z?void 0:Z.filter((e=>je===p.CHATBOT||"URL"===e.type)))||void 0===ee?void 0:ee.map(((o,n)=>{if("URL"===o.type)return e(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:o,currentVariableList:null!=Ce&&Ce>-1?Object.assign({},he.cards[Ce]):Object.assign({},he),updateSelectedURLTemplateBtn:qe,variableList:R},`${n}_${Ce}`)})),je===p.CHATBOT&&(null===(ne=null===(oe=Ee[0])||void 0===oe?void 0:oe.component)||void 0===ne?void 0:ne.buttons)&&(null===(le=null===(ie=null===(te=Ee[0])||void 0===te?void 0:te.component)||void 0===ie?void 0:ie.buttons)||void 0===le?void 0:le.length)>0&&e(g,{backTrackMessage:null===(ae=null==Oe?void 0:Oe.backTrackExtra)||void 0===ae?void 0:ae[0],setBackTrackMessage:null===(se=null==Oe?void 0:Oe.backTrackExtra)||void 0===se?void 0:se[1]}),(null===(re=null===(de=null!=Ce&&Ce>-1?he.cards[Ce].buttons:null==he?void 0:he.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===re?void 0:re.length)>0&&(je!==p.CHATBOT?e(E,{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(g,{backTrackMessage:null===(pe=null==Oe?void 0:Oe.backTrackExtra)||void 0===pe?void 0:pe[0],setBackTrackMessage:null===(ue=null==Oe?void 0:Oe.backTrackExtra)||void 0===ue?void 0:ue[1]})),null===(me=null===(ce=null!=Ce&&Ce>-1?he.cards[Ce].buttons:null==he?void 0:he.buttons)||void 0===ce?void 0:ce.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((o,n)=>{if("QUICK_REPLY"===o.type&&je!==p.CHATBOT)return e(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:o,currentVariableList:null!=Ce&&Ce>-1?Object.assign({},he.cards[Ce]):Object.assign({},he),updateSelectedQRBTemplateBtn:Ye},`${n}_${Ce}`)})),je===p.CHATBOT&&Ie&&e(f,{discountCode:null===(ve=null==Oe?void 0:Oe.discountCodeExtra)||void 0===ve?void 0:ve[0],setDiscountCode:null===(be=null==Oe?void 0:Oe.discountCodeExtra)||void 0===be?void 0:be[1],variableList:R}),null===(ge=null!=Ce&&Ce>-1?he.cards[Ce].buttons:null==he?void 0:he.buttons)||void 0===ge?void 0:ge.map(((o,n)=>{var t,i,l;if("COPY_CODE"===o.type)return e(T,{index:n,variable:{variableName:null!==(t=o.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Me,componentType:"BUTTONS"},n)}))]}))},k=s.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const m=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,n=o.div`
+`,m=o.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,9 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:w,showSampleValues:b}=a;const{pod:f,hideDeviceContainerInPreview:v}=s(),g={showSampleValues:b,template:w,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:f!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e(h,{children:e(r,Object.assign({},g))}):e(t,{children:i(m,Object.assign({channel:d},{children:[e("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(d),height:443}}),e(n,Object.assign({ref:o},{children:e(r,Object.assign({},g))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
+`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{children:[e("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(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;export{c as default};