@bikdotai/bik-component-library 0.0.736-beta.10 → 0.0.736-beta.2

package/dist/esm/components/star-rating/StarRating.js

@@ -1,7 +1,7 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as r,useEffect as l}from"react";import t from"styled-components";import{Star as i}from"./Star.js";const n=t.div`
+import{jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as l,useEffect as r}from"react";import t from"styled-components";import{Star as i}from"./Star.js";const n=t.div`
 	display: flex;
 	flex-direction: row;
 	gap: 12px;
 	justify-content: start;
 	align-items: center;
-`,m=({emptyColor:t,filledColor:m,onChange:a,value:s,maxValue:d,starSize:p,mode:c,version:f="v1"})=>{const[u,v]=o(null!=s?s:0),[x,y]=o(!1),[C,g]=o(0),j=r(()=>Array(null!=d?d:5).fill(null).map((e,o)=>o+1),[d]);return l(()=>{x&&a(u)},[u]),l(()=>{y(!0)},[]),e(n,{children:j.map(o=>e(i,{asHovered:!!C&&o<=C,size:null!=p?p:24,filled:C?void 0:o<=u,emptyColor:t,filledColor:m,onClick:e=>{v("de-select"===e?o<u?o:o-1:o)},onHover:e=>{g(e?o:0)},mode:c,version:f},o))})};export{m as StarRating};
+`,m=t=>{let{emptyColor:m,filledColor:a,onChange:s,value:d,maxValue:p,starSize:c,mode:f,version:u="v1"}=t;const[v,x]=o(null!=d?d:0),[y,C]=o(!1),[g,j]=o(0),h=l((()=>Array(null!=p?p:5).fill(null).map(((e,o)=>o+1))),[p]);return r((()=>{y&&s(v)}),[v]),r((()=>{C(!0)}),[]),e(n,{children:h.map((o=>e(i,{asHovered:!!g&&o<=g,size:null!=c?c:24,filled:g?void 0:o<=v,emptyColor:m,filledColor:a,onClick:e=>{x("de-select"===e?o<v?o:o-1:o)},onHover:e=>{j(e?o:0)},mode:f,version:u},o)))})};export{m as StarRating};

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as i,Fragment as t}from"react/jsx-runtime";import s,{useCallback as o,useEffect as n}from"react";import{StateComponent as r,StateInterface as a}from"./StateComponent.js";const c=c=>{const[l,m]=s.useState(!1),[u,p]=s.useState(!1),[h,d]=s.useState(""),b=o(()=>c.permissions.join("-")+"-hasPermission",[c.permissions]),g=o(()=>{const e=b(),i=localStorage.getItem(e);return!!i&&"true"===i},[b]),f=o(e=>{const i=b();localStorage.setItem(i,e.toString())},[b]),k=o(()=>{h?window.open(h,"_blank"):c.onPermissionClickCallback&&c.onPermissionClickCallback()},[c,h]);return n(()=>{e(void 0,void 0,void 0,function*(){if(c.cacheInLocal&&g())return void m(!0);const{hasPermission:e,urlForPermissions:i}=yield c.permissionEvaluationFunction(c.permissions);m(e),d(i),p(!0),c.cacheInLocal&&e&&f(e)}).then().catch()},[g,c,f]),u?l?i(t,{children:c.children}):i(r,{states:a.WARNING,heading:c.permissionRequestTitle,subline:c.permissionRequestSubTitle,width:400,isButtonEnabled:!0,buttonText:"Grant permissions",onButtonClick:k}):i(r,{states:a.LOADING,heading:"Checking permissions",subline:"Checking if we have the right shopify scopes approved to access this page.",width:400,isButtonEnabled:!1})};export{c as ShopifyScopeWrapper};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as i,Fragment as t}from"react/jsx-runtime";import s,{useCallback as o,useEffect as n}from"react";import{StateComponent as r,StateInterface as a}from"./StateComponent.js";const c=c=>{const[l,m]=s.useState(!1),[u,p]=s.useState(!1),[h,d]=s.useState(""),b=o((()=>c.permissions.join("-")+"-hasPermission"),[c.permissions]),g=o((()=>{const e=b(),i=localStorage.getItem(e);return!!i&&"true"===i}),[b]),f=o((e=>{const i=b();localStorage.setItem(i,e.toString())}),[b]),k=o((()=>{h?window.open(h,"_blank"):c.onPermissionClickCallback&&c.onPermissionClickCallback()}),[c,h]);return n((()=>{e(void 0,void 0,void 0,(function*(){if(c.cacheInLocal&&g())return void m(!0);const{hasPermission:e,urlForPermissions:i}=yield c.permissionEvaluationFunction(c.permissions);m(e),d(i),p(!0),c.cacheInLocal&&e&&f(e)})).then().catch()}),[g,c,f]),u?l?i(t,{children:c.children}):i(r,{states:a.WARNING,heading:c.permissionRequestTitle,subline:c.permissionRequestSubTitle,width:400,isButtonEnabled:!0,buttonText:"Grant permissions",onButtonClick:k}):i(r,{states:a.LOADING,heading:"Checking permissions",subline:"Checking if we have the right shopify scopes approved to access this page.",width:400,isButtonEnabled:!1})};export{c as ShopifyScopeWrapper};

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

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

package/dist/esm/components/switch/Switch.js

@@ -1,4 +1,4 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,useState as l,useEffect as i}from"react";import a from"styled-components";import{COLORS as n,DEFAULT_THEME as d}from"../../constants/Theme.js";const u=t(({customThumbColor:t,trackColor:a,trackHeight:n,trackLength:u,disabled:b,value:g,onValueChange:v,duration:f,containerStyle:h,type:k,isLoading:m,"data-test":x})=>{var y,C,$,w;const{colorsV2:L}=d,[j,A]=l(g),[H,S]=l(null!=m&&m),T=null!=f?f:200;i(()=>{"boolean"==typeof m&&S(m)},[m]),i(()=>{A(g)},[g]);const V=b?{false:L.background.inactive,true:L.background.inactive}:{false:(null!==(y=null==a?void 0:a.false)&&void 0!==y?y:"greenred"===k)?L.background.negative.light:L.background.base,true:(null!==(C=null==a?void 0:a.true)&&void 0!==C?C:"greenred"===k)?L.background.positive.vibrant:L.background.brand},_={false:"greenred"===k?L.stroke.negative.lightAlt:L.stroke.primary,true:"greenred"===k?L.background.positive.vibrant:L.background.brand},N=b?{false:L.content.inactive,true:L.content.inactive}:{false:(null!==($=null==t?void 0:t.false)&&void 0!==$?$:"greenred"===k)?L.content.negative:L.text.primary,true:null!==(w=null==t?void 0:t.true)&&void 0!==w?w:L.surface.standard},q=k?{false:"greenred"===k?L.stroke.negative.lightAlt:L.stroke.primary,true:"greenred"===k?L.stroke.positive.lightAlt:L.background.brandLight}:{false:L.stroke.primary,true:L.stroke.primary};return r(o,{children:r(s,{"data-test":x,trackLength:null!=u?u:40,trackHeight:null!=n?n:20,onClick:()=>function(){return e(this,void 0,void 0,function*(){if(!b){"boolean"!=typeof m&&S(!0);try{yield null==v?void 0:v(!j),A(!j)}catch(e){console.log(e)}"boolean"!=typeof m&&S(!1)}})}(),trackColor:V,value:j,style:h,borderColor:_,duration:T,disabled:b,outlineColor:q,children:H?r(p,{value:j,trackColor:V}):r(c,{value:j,duration:T,thumbColor:N})})})});u.displayName="Switch";const s=a.div`
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,useState as l,useEffect as i}from"react";import a from"styled-components";import{COLORS as n,DEFAULT_THEME as d}from"../../constants/Theme.js";const u=t((t=>{let{customThumbColor:a,trackColor:n,trackHeight:u,trackLength:b,disabled:g,value:v,onValueChange:f,duration:h,containerStyle:k,type:m,isLoading:x,"data-test":y}=t;var C,$,w,L;const{colorsV2:j}=d,[A,H]=l(v),[S,T]=l(null!=x&&x),V=null!=h?h:200;i((()=>{"boolean"==typeof x&&T(x)}),[x]),i((()=>{H(v)}),[v]);const _=g?{false:j.background.inactive,true:j.background.inactive}:{false:(null!==(C=null==n?void 0:n.false)&&void 0!==C?C:"greenred"===m)?j.background.negative.light:j.background.base,true:(null!==($=null==n?void 0:n.true)&&void 0!==$?$:"greenred"===m)?j.background.positive.vibrant:j.background.brand},N={false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.background.positive.vibrant:j.background.brand},q=g?{false:j.content.inactive,true:j.content.inactive}:{false:(null!==(w=null==a?void 0:a.false)&&void 0!==w?w:"greenred"===m)?j.content.negative:j.text.primary,true:null!==(L=null==a?void 0:a.true)&&void 0!==L?L:j.surface.standard},z=m?{false:"greenred"===m?j.stroke.negative.lightAlt:j.stroke.primary,true:"greenred"===m?j.stroke.positive.lightAlt:j.background.brandLight}:{false:j.stroke.primary,true:j.stroke.primary};return r(o,{children:r(s,{"data-test":y,trackLength:null!=b?b:40,trackHeight:null!=u?u:20,onClick:()=>function(){return e(this,void 0,void 0,(function*(){if(!g){"boolean"!=typeof x&&T(!0);try{yield null==f?void 0:f(!A),H(!A)}catch(e){console.log(e)}"boolean"!=typeof x&&T(!1)}}))}(),trackColor:_,value:A,style:k,borderColor:N,duration:V,disabled:g,outlineColor:z,children:S?r(p,{value:A,trackColor:_}):r(c,{value:A,duration:V,thumbColor:q})})})}));u.displayName="Switch";const s=a.div`
 	display: flex;
 	flex-direction: row;
 	margin-top: 5px;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as n}from"react";import{DEFAULT_THEME as l}from"../../constants/Theme.js";import{Tag as a}from"../tag/Tag.js";import{TabHeader as i,EmptyTab as s,RightComponent as d,TabItem as c,TrailingNumberContainer as u,TabItemText as m}from"./Tabs.styles.js";const b=n=>{var a,c;const{tabs:u,initialTab:m,onTabSelected:b,TabItemStyledProps:g,selectedTab:T,extendedBorder:y,rightComponent:x,size:C="default",isSquared:h=!1,containerStyles:v}=n,[S,f]=r(m||u[0].key),{colorsV2:k}=l;o(()=>{T&&T!==S&&f(T)},[T,S]);const q=n.backgroundColor,I=null!==(a=n.selectedTextColor)&&void 0!==a?a:k.background.brand,N=null!==(c=n.textColor)&&void 0!==c?c:k.content.secondary;return e(i,{style:null!=v?v:{},bgColor:q,"data-test":n["data-test"],children:[u.map((e,r)=>{var o;return t(p,{hasEqualSpacing:n.hasEqualSpacing,selectedTextColor:I,textColor:N,tab:e,currentTab:S,TabItemStyledProps:g,IconComponent:e.icon,size:C,setCurrentTab:e=>{f(e),b&&b(e)},isSquared:h,isFirstlement:0==r,isLastElement:r==u.length-1,iconPosition:null!==(o=e.iconPosition)&&void 0!==o?o:"left"},e.key)}),y&&t(s,{}),t(d,{children:x})]})},p=r=>{var o,i;const{tab:s,currentTab:d,setCurrentTab:b,TabItemStyledProps:p,IconComponent:g,iconPosition:T="left",size:y="default",isSquared:x=!1,isFirstlement:C,isLastElement:h}=r,v=s.key===d,{colorsV2:S}=l,f=n(()=>Object.assign(Object.assign({},p),{borderRadius:r.isSquared?C?"4px 0px 0px 4px":h?"0px 4px 4px 0px":"":""}),[]);return e(c,{style:f(),selected:v,hasEqualSpacing:r.hasEqualSpacing,onClick:()=>b(r.tab.key),selectedTextColor:r.selectedTextColor,isSquared:x,"data-test":r["data-test"],children:[g&&"left"===T&&t(g,{selected:v?S.background.brand:S.content.secondary}),void 0!==s.leadingNumber&&null!==s.leadingNumber&&t(u,{selected:v,children:t(a,{tagText:null!==(o=null==s?void 0:s.leadingNumber)&&void 0!==o?o:0,theme:"dark",type:s.numberTagType,variant:"circle",color:S.content.primaryInverse})}),t(m,{style:"small"===y?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:r.textColor,selectedTextColor:r.selectedTextColor,selected:v,children:s.title}),void 0!==s.trailingNumber&&null!==s.trailingNumber&&t(u,{selected:v,children:t(a,{tagText:null!==(i=null==s?void 0:s.trailingNumber)&&void 0!==i?i:0,theme:"dark",type:s.numberTagType,variant:"circle",color:S.content.primaryInverse})}),g&&"right"===T&&t(g,{selected:v?S.background.brand:S.content.secondary})]})};b.displayName="Tabs",p.displayName="TabItemComponent";export{p as TabItemComponent,b as Tabs};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as n}from"react";import{DEFAULT_THEME as l}from"../../constants/Theme.js";import{Tag as a}from"../tag/Tag.js";import{TabHeader as i,EmptyTab as s,RightComponent as d,TabItem as c,TrailingNumberContainer as u,TabItemText as m}from"./Tabs.styles.js";const b=n=>{var a,c;const{tabs:u,initialTab:m,onTabSelected:b,TabItemStyledProps:g,selectedTab:T,extendedBorder:y,rightComponent:x,size:C="default",isSquared:h=!1,containerStyles:v}=n,[S,f]=r(m||u[0].key),{colorsV2:k}=l;o((()=>{T&&T!==S&&f(T)}),[T,S]);const q=n.backgroundColor,I=null!==(a=n.selectedTextColor)&&void 0!==a?a:k.background.brand,N=null!==(c=n.textColor)&&void 0!==c?c:k.content.secondary;return e(i,{style:null!=v?v:{},bgColor:q,"data-test":n["data-test"],children:[u.map(((e,r)=>{var o;return t(p,{hasEqualSpacing:n.hasEqualSpacing,selectedTextColor:I,textColor:N,tab:e,currentTab:S,TabItemStyledProps:g,IconComponent:e.icon,size:C,setCurrentTab:e=>{f(e),b&&b(e)},isSquared:h,isFirstlement:0==r,isLastElement:r==u.length-1,iconPosition:null!==(o=e.iconPosition)&&void 0!==o?o:"left"},e.key)})),y&&t(s,{}),t(d,{children:x})]})},p=r=>{var o,i;const{tab:s,currentTab:d,setCurrentTab:b,TabItemStyledProps:p,IconComponent:g,iconPosition:T="left",size:y="default",isSquared:x=!1,isFirstlement:C,isLastElement:h}=r,v=s.key===d,{colorsV2:S}=l,f=n((()=>Object.assign(Object.assign({},p),{borderRadius:r.isSquared?C?"4px 0px 0px 4px":h?"0px 4px 4px 0px":"":""})),[]);return e(c,{style:f(),selected:v,hasEqualSpacing:r.hasEqualSpacing,onClick:()=>b(r.tab.key),selectedTextColor:r.selectedTextColor,isSquared:x,"data-test":r["data-test"],children:[g&&"left"===T&&t(g,{selected:v?S.background.brand:S.content.secondary}),void 0!==s.leadingNumber&&null!==s.leadingNumber&&t(u,{selected:v,children:t(a,{tagText:null!==(o=null==s?void 0:s.leadingNumber)&&void 0!==o?o:0,theme:"dark",type:s.numberTagType,variant:"circle",color:S.content.primaryInverse})}),t(m,{style:"small"===y?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:r.textColor,selectedTextColor:r.selectedTextColor,selected:v,children:s.title}),void 0!==s.trailingNumber&&null!==s.trailingNumber&&t(u,{selected:v,children:t(a,{tagText:null!==(i=null==s?void 0:s.trailingNumber)&&void 0!==i?i:0,theme:"dark",type:s.numberTagType,variant:"circle",color:S.content.primaryInverse})}),g&&"right"===T&&t(g,{selected:v?S.background.brand:S.content.secondary})]})};b.displayName="Tabs",p.displayName="TabItemComponent";export{p as TabItemComponent,b as Tabs};

package/dist/esm/components/tag/Tag.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as r}from"../tooltips/Tooltip.js";import{AiBodyCaption as t,BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as c}from"./Tag.styled.js";import{getTagIconColor as l}from"./themes.js";const s=({tagText:s,LeadingIcon:d,TrailingIcon:g,onLeadingIconClicked:m,leadingIconId:p,trailingIconId:h,onTrailingIconClicked:b,theme:u="light",type:j="neutral",variant:O="regular",version:f,cursor:I,alignIcon:T,noBorder:y,tagHtmlText:w,contentPadding:N,leadingIconTooltip:k,trailingIconTooltip:C,tagColor:L,numberOfLines:x})=>{let v=s;const E=u;let $=j;o[O][j]||($="neutral"),"circle"===O&&"number"==typeof v&&v>99&&(v="99+");const B={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:l(u,$),style:{display:"block"}};return e(c,{cursor:I,theme:E,type:j,variant:O,version:f,alignIcon:T,noBorder:y,contentPadding:N,children:i("div",{className:"container",children:[d&&(k?e(r,Object.assign({},k,{children:e("button",{className:"icon-leading",onClick:m,id:`${p}-wrapper`||"leading-icon-wrapper",children:n.createElement(d,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))})})):e("button",{className:"icon-leading",onClick:m,id:`${p}-wrapper`||"leading-icon-wrapper",children:n.createElement(d,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))})),w&&("ai"===j&&"light"===u?e(t,{numberOfLines:x,children:w}):e(a,{className:"text",numberOfLines:x,children:w})),!w&&""!==v&&("ai"===j&&"light"===u?e(t,{numberOfLines:x,children:v}):e(a,{className:"text",color:L,numberOfLines:x,children:v})),g&&(C?e(r,Object.assign({},C,{children:e("button",{className:"icon-trailing",onClick:b,id:`${h}-wrapper`||"trailing-icon-wrapper",children:n.createElement(g,Object.assign(Object.assign({},B),{id:h||"trailing-icon"}))})})):e("button",{className:"icon-trailing",onClick:b,id:`${h}-wrapper`||"trailing-icon-wrapper",children:n.createElement(g,Object.assign(Object.assign({},B),{id:h||"trailing-icon"}))}))]})})};s.displayName="Tag";export{s as Tag};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import n from"react";import{Tooltip as r}from"../tooltips/Tooltip.js";import{AiBodyCaption as t,BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as o}from"./model.js";import{Tag as c}from"./Tag.styled.js";import{getTagIconColor as l}from"./themes.js";const s=s=>{let{tagText:d,LeadingIcon:g,TrailingIcon:m,onLeadingIconClicked:p,leadingIconId:h,trailingIconId:b,onTrailingIconClicked:u,theme:j="light",type:O="neutral",variant:f="regular",version:I,cursor:T,alignIcon:y,noBorder:w,tagHtmlText:N,contentPadding:k,leadingIconTooltip:C,trailingIconTooltip:L,tagColor:x,numberOfLines:v}=s,E=d;const $=j;let B=O;o[f][O]||(B="neutral"),"circle"===f&&"number"==typeof E&&E>99&&(E="99+");const P={height:"compressed"===f?12:16,width:"compressed"===f?12:16,color:l(j,B),style:{display:"block"}};return e(c,{cursor:T,theme:$,type:O,variant:f,version:I,alignIcon:y,noBorder:w,contentPadding:k,children:i("div",{className:"container",children:[g&&(C?e(r,Object.assign({},C,{children:e("button",{className:"icon-leading",onClick:p,id:`${h}-wrapper`||"leading-icon-wrapper",children:n.createElement(g,Object.assign(Object.assign({},P),{id:h||"leading-icon"}))})})):e("button",{className:"icon-leading",onClick:p,id:`${h}-wrapper`||"leading-icon-wrapper",children:n.createElement(g,Object.assign(Object.assign({},P),{id:h||"leading-icon"}))})),N&&("ai"===O&&"light"===j?e(t,{numberOfLines:v,children:N}):e(a,{className:"text",numberOfLines:v,children:N})),!N&&""!==E&&("ai"===O&&"light"===j?e(t,{numberOfLines:v,children:E}):e(a,{className:"text",color:x,numberOfLines:v,children:E})),m&&(L?e(r,Object.assign({},L,{children:e("button",{className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper",children:n.createElement(m,Object.assign(Object.assign({},P),{id:b||"trailing-icon"}))})})):e("button",{className:"icon-trailing",onClick:u,id:`${b}-wrapper`||"trailing-icon-wrapper",children:n.createElement(m,Object.assign(Object.assign({},P),{id:b||"trailing-icon"}))}))]})})};s.displayName="Tag";export{s as Tag};

package/dist/esm/components/tag/Tag.stories.d.ts

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Tag } from './Tag';
+declare const _default: ComponentMeta<typeof Tag>;
+export default _default;
+export declare const Default: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const WithIcons: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const WithIconTooltips: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export declare const DarkTheme: ComponentStory<{
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{cloneDeep as o}from"lodash";import{useEffect as i,useState as a,useRef as r,useMemo as n}from"react";import s from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{determineCardIndex as p,isItCarousal as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as v}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as h,POD as C}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as b}from"./context/templateModalContext.js";import f from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as x}from"./modalElements/TemplateAnalyticsComponent.js";import g from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as y}from"./utils/convertPlaceholdersToBikDropdown.js";const P=P=>{var E,I,T,S,w,D,V,k;const{selectedTemplate:L,closeDialog:j,showVariableMapping:A,channel:B,htmlContent:M,templateVariables:H,onTemplateSelect:F,globalPlaceholders:O,showOnlyContent:W,whatsappSpecificPickerMeta:N,zIndex:$,showVariableModal:z,variableList:Q,discountCode:R,setDiscountCode:U,onBackPress:_,enabledCustomText:q,variableListForImage:G,showSampleValues:J,disableEditVariable:K,pod:X,extras:Y,pickerConf:Z,selectedCarouselProducts:ee,disableEditExpiry:le,cardWidth:te,onDeleteSelectedProducts:oe,fileName:ie,setFileName:ae,hideDeviceContainerInPreview:re,maxCharLimit:ne,onDefaultVariableSelect:se,skipDefaultVariableContent:de,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,footerButtonText:ve,footerInfoText:he,templateAnalytics:Ce}=P;i(()=>{Te(M)},[M]);const be=p(B),fe=c(B,L),xe=null==L?void 0:L.isProductCarouselType,[ge,ye]=a(B===v.EMAIL||B==v.WEBPUSH||fe?"desktop":"mobile"),[Pe,Ee]=a(!1),[Ie,Te]=a(M),[Se,we]=a(!1),[De,Ve]=a([]),[ke,Le]=a({}),[je,Ae]=a(L),[Be,Me]=a([]),[He,Fe]=a(null),[Oe,We]=a(!1),[Ne,$e]=a(null!=H?H:[]),[ze,Qe]=a(!1),[Re,Ue]=a(fe?(null===(I=null===(E=null==je?void 0:je.mapping)||void 0===E?void 0:E.body)||void 0===I?void 0:I.length)?-1:0:-1),[_e,qe]=a([]),[Ge,Je]=a(void 0),Ke=r(null),[Xe,Ye]=a(!1),[Ze,el]=a(!1),[ll,tl]=a(!1),[ol,il]=a(!0),[al,rl]=a(!0),[nl,sl]=a({});i(()=>{ee?qe(ee):xe&&qe([])},[ee]),i(()=>{var e;if(!Oe&&xe&&(!ee||0===qe.length)){const l=null===(e=null==je?void 0:je.components)||void 0===e?void 0:e[be].cards,t=[];null==l||l.forEach(e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach(e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")})}),Me(t),We(!0)}},[Oe]);const dl=n(()=>y(O),[O]);return i(()=>{Je(o(Q))},[Q]),(null==Ce?void 0:Ce.show)&&ol&&Ce.templateQuality&&Object.values(h).find(e=>e===String(Ce.templateQuality))?e(x,{headingTitle:null==je?void 0:je.label,headingSubtitle:B===v.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(T=null==je?void 0:je.category)&&void 0!==T?T:"")} • ${null!==(S=null==je?void 0:je.templateCategory)&&void 0!==S?S:""}`:"",templateAnalytics:Ce,analyticsData:Ce.data,onClose:()=>{null==j||j(),il(!1),rl(!1)},onCancel:()=>{il(!1),rl(!1)},onProceed:()=>{il(!1),rl(!0)},templateId:(null==je?void 0:je.templateId)||""}):e(b.Provider,{value:{hideFooterButton:ll,setHideFooterButton:tl,hideCrossButton:Ze,setHideCrossButton:el,variableList:Ge,setVariableList:Je,variableCallback:He,setVariableCallback:Fe,showVariablePicker:Pe,setShowVariablePicker:Ee,template:je,setTemplate:Ae,device:ge,setDevice:ye,display_content:Ie,setDisplayContent:Te,originalVariableList:Ne,setOriginalVariableList:$e,isError:Se,setIsError:we,channel:B,globalNormalizedPlaceholders:dl,templateSelectionTriggered:ze,setTemplateSelectionTriggered:Qe,enabledCustomText:q,disableEditVariable:K,pod:X,extras:Y,isWhatsappCarousel:fe,selectedCarouselIndex:Re,setSelectedCarouselIndex:Ue,isProductCarouselType:xe,templateErrorIndexes:ke,cardCount:fe?null===(D=null===(w=L.components)||void 0===w?void 0:w[be].cards)||void 0===D?void 0:D.length:void 0,errorIndexes:De,setErrorIndexes:Ve,pickerConf:Z,carouselProducts:_e,setCarouselProducts:qe,disableEditExpiry:le,cardWidth:te,cardImages:Be,onDeleteSelectedProducts:oe,hideDeviceContainerInPreview:re,sliderRef:Ke,isCarouselHovered:Xe,setIsCarouselHovered:Ye,maxCharLimit:ne,ctaOptionsErrors:nl,setCtaOptionsErrors:sl,onDefaultVariableSelect:se,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,cardIndex:be},children:W?e(g,{variableListFromProps:Q,channel:v.EMAIL,hideHeader:!0}):l(u,{hideCrossButton:Ze,zIndex:$,centralContainerStyles:{width:fe?900:B===v.EMAIL&&A?1e3:800},open:al,onClose:()=>{rl(!1),null==j||j()},headingTitle:null==je?void 0:je.label,headingSubtitle:B===v.WHATSAPP||m(B)?`${s.capitaliseFirstLetterOfString(null!==(V=null==je?void 0:je.category)&&void 0!==V?V:"")} • ${null!==(k=null==je?void 0:je.templateCategory)&&void 0!==k?k:""}`:"",onBackPress:()=>{if(null==Ce?void 0:Ce.show)return il(!0),void rl(!1);null==_||_()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`},children:[e(g,{variableListFromProps:Q,showSampleValues:J,showVariableMapping:A,channel:B,whatsappSpecificPickerMeta:N,showVariableModal:z,discountCode:R,setDiscountCode:U,variableListForImage:G&&(null==G?void 0:G.length)>0?G:Ge,fileName:ie,setFileName:e=>{null==ae||ae(e)},skipDefaultVariableContent:de}),F?e(f,{isWhatsappCarousel:null!=fe&&fe,onSelect:function(){var e;if((null==_e?void 0:_e.length)<1&&xe)return void we(!0);if(Object.keys(nl).length>0&&X!==C.CHATBOT)return void we(!0);const l=null==F?void 0:F(je,Ne,null!=Ie?Ie:"",_e);Le(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)&&Ve(l.errorIndexes),(null==l?void 0:l.error)&&we(!!(null==l?void 0:l.error))):Qe(!0)},footerButtonText:ve,footerInfoText:he}):e(t,{})]})})};export{P as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{cloneDeep as o}from"lodash";import{useEffect as i,useState as a,useRef as r,useMemo as n}from"react";import s from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{determineCardIndex as p,isItCarousal as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as v}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as h,POD as C}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as b}from"./context/templateModalContext.js";import f from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as x}from"./modalElements/TemplateAnalyticsComponent.js";import g from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as y}from"./utils/convertPlaceholdersToBikDropdown.js";const P=P=>{var E,I,T,S,w,D,V,k;const{selectedTemplate:L,closeDialog:j,showVariableMapping:A,channel:B,htmlContent:M,templateVariables:H,onTemplateSelect:F,globalPlaceholders:O,showOnlyContent:W,whatsappSpecificPickerMeta:N,zIndex:$,showVariableModal:z,variableList:Q,discountCode:R,setDiscountCode:U,onBackPress:_,enabledCustomText:q,variableListForImage:G,showSampleValues:J,disableEditVariable:K,pod:X,extras:Y,pickerConf:Z,selectedCarouselProducts:ee,disableEditExpiry:le,cardWidth:te,onDeleteSelectedProducts:oe,fileName:ie,setFileName:ae,hideDeviceContainerInPreview:re,maxCharLimit:ne,onDefaultVariableSelect:se,skipDefaultVariableContent:de,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,footerButtonText:ve,footerInfoText:he,templateAnalytics:Ce}=P;i((()=>{Te(M)}),[M]);const be=p(B),fe=c(B,L),xe=null==L?void 0:L.isProductCarouselType,[ge,ye]=a(B===v.EMAIL||B==v.WEBPUSH||fe?"desktop":"mobile"),[Pe,Ee]=a(!1),[Ie,Te]=a(M),[Se,we]=a(!1),[De,Ve]=a([]),[ke,Le]=a({}),[je,Ae]=a(L),[Be,Me]=a([]),[He,Fe]=a(null),[Oe,We]=a(!1),[Ne,$e]=a(null!=H?H:[]),[ze,Qe]=a(!1),[Re,Ue]=a(fe?(null===(I=null===(E=null==je?void 0:je.mapping)||void 0===E?void 0:E.body)||void 0===I?void 0:I.length)?-1:0:-1),[_e,qe]=a([]),[Ge,Je]=a(void 0),Ke=r(null),[Xe,Ye]=a(!1),[Ze,el]=a(!1),[ll,tl]=a(!1),[ol,il]=a(!0),[al,rl]=a(!0),[nl,sl]=a({});i((()=>{ee?qe(ee):xe&&qe([])}),[ee]),i((()=>{var e;if(!Oe&&xe&&(!ee||0===qe.length)){const l=null===(e=null==je?void 0:je.components)||void 0===e?void 0:e[be].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")}))})),Me(t),We(!0)}}),[Oe]);const dl=n((()=>y(O)),[O]);return i((()=>{Je(o(Q))}),[Q]),(null==Ce?void 0:Ce.show)&&ol&&Ce.templateQuality&&Object.values(h).find((e=>e===String(Ce.templateQuality)))?e(x,{headingTitle:null==je?void 0:je.label,headingSubtitle:B===v.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(T=null==je?void 0:je.category)&&void 0!==T?T:"")} • ${null!==(S=null==je?void 0:je.templateCategory)&&void 0!==S?S:""}`:"",templateAnalytics:Ce,analyticsData:Ce.data,onClose:()=>{null==j||j(),il(!1),rl(!1)},onCancel:()=>{il(!1),rl(!1)},onProceed:()=>{il(!1),rl(!0)},templateId:(null==je?void 0:je.templateId)||""}):e(b.Provider,{value:{hideFooterButton:ll,setHideFooterButton:tl,hideCrossButton:Ze,setHideCrossButton:el,variableList:Ge,setVariableList:Je,variableCallback:He,setVariableCallback:Fe,showVariablePicker:Pe,setShowVariablePicker:Ee,template:je,setTemplate:Ae,device:ge,setDevice:ye,display_content:Ie,setDisplayContent:Te,originalVariableList:Ne,setOriginalVariableList:$e,isError:Se,setIsError:we,channel:B,globalNormalizedPlaceholders:dl,templateSelectionTriggered:ze,setTemplateSelectionTriggered:Qe,enabledCustomText:q,disableEditVariable:K,pod:X,extras:Y,isWhatsappCarousel:fe,selectedCarouselIndex:Re,setSelectedCarouselIndex:Ue,isProductCarouselType:xe,templateErrorIndexes:ke,cardCount:fe?null===(D=null===(w=L.components)||void 0===w?void 0:w[be].cards)||void 0===D?void 0:D.length:void 0,errorIndexes:De,setErrorIndexes:Ve,pickerConf:Z,carouselProducts:_e,setCarouselProducts:qe,disableEditExpiry:le,cardWidth:te,cardImages:Be,onDeleteSelectedProducts:oe,hideDeviceContainerInPreview:re,sliderRef:Ke,isCarouselHovered:Xe,setIsCarouselHovered:Ye,maxCharLimit:ne,ctaOptionsErrors:nl,setCtaOptionsErrors:sl,onDefaultVariableSelect:se,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,cardIndex:be},children:W?e(g,{variableListFromProps:Q,channel:v.EMAIL,hideHeader:!0}):l(u,{hideCrossButton:Ze,zIndex:$,centralContainerStyles:{width:fe?900:B===v.EMAIL&&A?1e3:800},open:al,onClose:()=>{rl(!1),null==j||j()},headingTitle:null==je?void 0:je.label,headingSubtitle:B===v.WHATSAPP||m(B)?`${s.capitaliseFirstLetterOfString(null!==(V=null==je?void 0:je.category)&&void 0!==V?V:"")} • ${null!==(k=null==je?void 0:je.templateCategory)&&void 0!==k?k:""}`:"",onBackPress:()=>{if(null==Ce?void 0:Ce.show)return il(!0),void rl(!1);null==_||_()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`},children:[e(g,{variableListFromProps:Q,showSampleValues:J,showVariableMapping:A,channel:B,whatsappSpecificPickerMeta:N,showVariableModal:z,discountCode:R,setDiscountCode:U,variableListForImage:G&&(null==G?void 0:G.length)>0?G:Ge,fileName:ie,setFileName:e=>{null==ae||ae(e)},skipDefaultVariableContent:de}),F?e(f,{isWhatsappCarousel:null!=fe&&fe,onSelect:function(){var e;if((null==_e?void 0:_e.length)<1&&xe)return void we(!0);if(Object.keys(nl).length>0&&X!==C.CHATBOT)return void we(!0);const l=null==F?void 0:F(je,Ne,null!=Ie?Ie:"",_e);Le(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)&&Ve(l.errorIndexes),(null==l?void 0:l.error)&&we(!!(null==l?void 0:l.error))):Qe(!0)},footerButtonText:ve,footerInfoText:he}):e(t,{})]})})};export{P as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -1 +1 @@
-const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:s,variableValue:l}=a;if(!e)return e;if(e.some(a=>a.variables&&Object.values(a.variables).some(a=>a.actualValue===l)))return e;const r=e.findIndex(a=>a.displayName===i);if(-1!==r){const a=[...e];return a[r]=Object.assign(Object.assign({},a[r]),{variables:Object.assign(Object.assign({},a[r].variables),{[s]:{description:void 0,displayName:s,actualValue:l,variableType:"any",isAvailable:!0}})}),a}return[{description:i,displayName:i,orderId:1,variables:{[s]:{description:void 0,displayName:s,actualValue:l,variableType:"any",isAvailable:!0}}},...e]};export{a as updateVariables};
+const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:s,variableValue:l}=a;if(!e)return e;if(e.some((a=>a.variables&&Object.values(a.variables).some((a=>a.actualValue===l)))))return e;const r=e.findIndex((a=>a.displayName===i));if(-1!==r){const a=[...e];return a[r]=Object.assign(Object.assign({},a[r]),{variables:Object.assign(Object.assign({},a[r].variables),{[s]:{description:void 0,displayName:s,actualValue:l,variableType:"any",isAvailable:!0}})}),a}return[{description:i,displayName:i,orderId:1,variables:{[s]:{description:void 0,displayName:s,actualValue:l,variableType:"any",isAvailable:!0}}},...e]};export{a as updateVariables};

package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.js

@@ -1 +1 @@
-import{__awaiter as t}from"../../../_virtual/_tslib.js";import"../../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{BUTTON_TYPE as e}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{CUSTOM_URL_PLACEHOLDER as i,CUSTOM_URL_PLACEHOLDER_VAR as l}from"../../template-preview/constants/TemplateConstants.js";import{extractVariables as n}from"../../../utils/variableUtils.js";const o=()=>{function o(t,e,i,l){const o=e.map((e,o)=>{const r=a(e);if(l)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const u=function(t,e,i){const l=i&&i.length?i:n(t);if(!l||!l.length)return[];const o=[];return l.forEach((t,i)=>{const l=s(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e}=l,n="{{custom.text}}"===t||"{{custom.url}}"===t;o.push({editable:n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}}),o}(r?e:i,t);if(u.length>0){const t=u[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:(null==t?void 0:t.updatedValue)?null==t?void 0:t.updatedValue:r?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null}).filter(t=>null!==t);return o}const a=t=>t.includes("{{")&&t.includes("}}"),r=(t,e)=>t&&t.length?t.flatMap((t,i)=>{var l;return a(t)?t.includes("editableVariable")?(null===(l=null==e?void 0:e[i])||void 0===l?void 0:l.value)||t:n(t).map(t=>`{{${t}}}`)||[]:t}):[];const s=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e||e.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(s,u,d,p){return t(this,void 0,void 0,function*(){var t,b,v,c,m,f,h,g;const w=Object.assign({},s);w.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(w.components);const{components:{title:V,body:y,buttons:W,icon:k,image:L},webpushBroadcastConfig:j}=w;let x={title:r(null!==(t=null==j?void 0:j.title)&&void 0!==t?t:[]),body:r(null!==(b=null==j?void 0:j.body)&&void 0!==b?b:[],null==y?void 0:y.variables),buttonsW:null!==(v=null==j?void 0:j.buttons)&&void 0!==v?v:[]};if(!w.webpushBroadcastConfig){const t=null!==(c=null==y?void 0:y.text)&&void 0!==c?c:"string"==typeof y?y:"",e=W&&(null==W?void 0:W.length)?W.map(t=>(null==t?void 0:t.websiteLink)==i?null==t?void 0:t.redirectionLink:null==t?void 0:t.websiteLink).filter(t=>void 0!==t):[],l=n(t).map((t,e)=>{var i,l;return t.includes("editableVariable")?(null===(l=null===(i=null==y?void 0:y.variables)||void 0===i?void 0:i[e])||void 0===l?void 0:l.value)||t:`{{${t}}}`});x={title:n(V).map(t=>`{{${t}}}`),body:l,buttonsW:[]};const o={title:null!==(m=x.title)&&void 0!==m?m:[],body:null!==(f=x.body)&&void 0!==f?f:[],buttons:e,icon:k?[k]:void 0,image:L?[L]:void 0,redirectionLink:(null==y?void 0:y.redirectionLink)?[null==y?void 0:y.redirectionLink]:[]};w.webpushBroadcastConfig=o}const C=W&&W.length?W.map((t,n)=>({type:e.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?[""]:[x.buttonsW[n]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?x.buttonsW[n]:l:t.websiteLink?t.websiteLink==i?l:t.websiteLink:l,index:n})):[],N={title:o(u,x.title,V,p),body:o(u,x.body,(null==y?void 0:y.text)||"",p),buttons:C};return{templateVariableMapping:{title:(null===(h=null==d?void 0:d.title)||void 0===h?void 0:h.length)?d.title:N.title,body:(null===(g=null==d?void 0:d.body)||void 0===g?void 0:g.length)?d.body:N.body,buttons:N.buttons,icon:[],header:[]},webpushBroadcastConfig:w.webpushBroadcastConfig,template:w}})},isValidUrl:t=>{try{return new URL(t),!0}catch(t){return!1}}}};export{o as default};
+import{__awaiter as t}from"../../../_virtual/_tslib.js";import"../../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{BUTTON_TYPE as e}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{CUSTOM_URL_PLACEHOLDER as i,CUSTOM_URL_PLACEHOLDER_VAR as l}from"../../template-preview/constants/TemplateConstants.js";import{extractVariables as n}from"../../../utils/variableUtils.js";const o=()=>{function o(t,e,i,l){const o=e.map(((e,o)=>{const r=a(e);if(l)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const u=function(t,e,i){const l=i&&i.length?i:n(t);if(!l||!l.length)return[];const o=[];return l.forEach(((t,i)=>{const l=s(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e}=l,n="{{custom.text}}"===t||"{{custom.url}}"===t;o.push({editable:n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),o}(r?e:i,t);if(u.length>0){const t=u[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:(null==t?void 0:t.updatedValue)?null==t?void 0:t.updatedValue:r?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return o}const a=t=>t.includes("{{")&&t.includes("}}"),r=(t,e)=>t&&t.length?t.flatMap(((t,i)=>{var l;return a(t)?t.includes("editableVariable")?(null===(l=null==e?void 0:e[i])||void 0===l?void 0:l.value)||t:n(t).map((t=>`{{${t}}}`))||[]:t})):[];const s=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e||e.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(s,u,d,p){return t(this,void 0,void 0,(function*(){var t,b,v,c,m,f,h,g;const w=Object.assign({},s);w.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(w.components);const{components:{title:V,body:y,buttons:W,icon:k,image:L},webpushBroadcastConfig:j}=w;let x={title:r(null!==(t=null==j?void 0:j.title)&&void 0!==t?t:[]),body:r(null!==(b=null==j?void 0:j.body)&&void 0!==b?b:[],null==y?void 0:y.variables),buttonsW:null!==(v=null==j?void 0:j.buttons)&&void 0!==v?v:[]};if(!w.webpushBroadcastConfig){const t=null!==(c=null==y?void 0:y.text)&&void 0!==c?c:"string"==typeof y?y:"",e=W&&(null==W?void 0:W.length)?W.map((t=>(null==t?void 0:t.websiteLink)==i?null==t?void 0:t.redirectionLink:null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[],l=n(t).map(((t,e)=>{var i,l;return t.includes("editableVariable")?(null===(l=null===(i=null==y?void 0:y.variables)||void 0===i?void 0:i[e])||void 0===l?void 0:l.value)||t:`{{${t}}}`}));x={title:n(V).map((t=>`{{${t}}}`)),body:l,buttonsW:[]};const o={title:null!==(m=x.title)&&void 0!==m?m:[],body:null!==(f=x.body)&&void 0!==f?f:[],buttons:e,icon:k?[k]:void 0,image:L?[L]:void 0,redirectionLink:(null==y?void 0:y.redirectionLink)?[null==y?void 0:y.redirectionLink]:[]};w.webpushBroadcastConfig=o}const C=W&&W.length?W.map(((t,n)=>({type:e.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?[""]:[x.buttonsW[n]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?x.buttonsW[n]:l:t.websiteLink?t.websiteLink==i?l:t.websiteLink:l,index:n}))):[],N={title:o(u,x.title,V,p),body:o(u,x.body,(null==y?void 0:y.text)||"",p),buttons:C};return{templateVariableMapping:{title:(null===(h=null==d?void 0:d.title)||void 0===h?void 0:h.length)?d.title:N.title,body:(null===(g=null==d?void 0:d.body)||void 0===g?void 0:g.length)?d.body:N.body,buttons:N.buttons,icon:[],header:[]},webpushBroadcastConfig:w.webpushBroadcastConfig,template:w}}))},isValidUrl:t=>{try{return new URL(t),!0}catch(t){return!1}}}};export{o 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 o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}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 o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}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 l=i.div`
 	background: ${a.surface.standard};
 	border: 1px solid ${a.stroke.primary};
 	border-radius: 8px;
@@ -6,7 +6,7 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,l=i.div`
+`,s=i.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
@@ -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(({display_content:r,showSampleValues:i},a)=>e(s,{ref:a,children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:r?t(o,{showSampleValues:i,channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:r,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):t("div",{style:{padding:20},children:t(p,{size:"small"})})})]}));n.displayName="DesktopPreview";export{n as default};
+`,n=r.forwardRef(((r,i)=>{let{display_content:a,showSampleValues:n}=r;return e(l,{ref:i,children:[e(s,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:a?t(o,{showSampleValues:n,channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:a,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):t("div",{style:{padding:20},children:t(p,{size:"small"})})})]})}));n.displayName="DesktopPreview";export{n as default};

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 l}from"../../checkBox/CheckBox.js";import{Input as c}from"../../input/Input.js";import{TitleSmall as d}from"../../TypographyStyle.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{AddVariableStyled as m}from"./VariableConnectorsPanel.js";const u=u=>{const{discountCode:h,setDiscountCode:p}=u,[f,v]=i(""),[g,C]=i(!!h),[x,y]=i(!1),{setVariableCallback:j,setShowVariablePicker:V}=s(),b=a(),k=a();n(()=>{p&&f&&p(h+f)},[f]);const w=e=>{v(e.actualValue)};return e(r,{children:[e("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[o(l,{isChecked:g,onValueChange:()=>{g&&p&&(p(""),v("")),C(!g)}}),o(d,{style:{marginLeft:8},children:"Add discount code"})]}),g&&e("div",{ref:b,style:{margin:10},children:[o(c,{placeholder:"Enter your discount code",onChangeText:e=>{p&&p(e)},value:h,onFocus:()=>{y(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(b.current&&b.current.focus(),y(!0)):y(!1)},noErrorHint:!0,validate:e=>[!0,""]}),x&&o(m,{ref:k,id:"addVar",onClick:e=>{e.stopPropagation(),j(()=>w),V(!0)},children:e("div",{className:"add",children:[o(t,{width:14,height:14,color:"white"}),o("div",{className:"variable",children:"Add variable"})]})})]})]})};export{u as DiscountCodeComponent};
+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 l}from"../../checkBox/CheckBox.js";import{Input as c}from"../../input/Input.js";import{TitleSmall as d}from"../../TypographyStyle.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{AddVariableStyled as m}from"./VariableConnectorsPanel.js";const u=u=>{const{discountCode:h,setDiscountCode:p}=u,[f,v]=i(""),[g,C]=i(!!h),[x,y]=i(!1),{setVariableCallback:j,setShowVariablePicker:V}=s(),b=a(),k=a();n((()=>{p&&f&&p(h+f)}),[f]);const w=e=>{v(e.actualValue)};return e(r,{children:[e("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[o(l,{isChecked:g,onValueChange:()=>{g&&p&&(p(""),v("")),C(!g)}}),o(d,{style:{marginLeft:8},children:"Add discount code"})]}),g&&e("div",{ref:b,style:{margin:10},children:[o(c,{placeholder:"Enter your discount code",onChangeText:e=>{p&&p(e)},value:h,onFocus:()=>{y(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(b.current&&b.current.focus(),y(!0)):y(!1)},noErrorHint:!0,validate:e=>[!0,""]}),x&&o(m,{ref:k,id:"addVar",onClick:e=>{e.stopPropagation(),j((()=>w)),V(!0)},children:e("div",{className:"add",children:[o(t,{width:14,height:14,color:"white"}),o("div",{className:"variable",children:"Add variable"})]})})]})]})};export{u as DiscountCodeComponent};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import i from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as l}from"react";import{Button as n}from"../../button/Button.js";import{BikImageCropper as p}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 d}from"../../spinner/Spinner.js";import{InputWithVariables as m}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 c,COLORS as g}from"../../../constants/Theme.js";import{HEADER_TYPES as h}from"../../template-preview/models/TemplateMeta.js";import{POD as u}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{TitleRegular as f,TitleMedium as v,BodySecondary as y,BodyCaption as x}from"../../TypographyStyle.js";import{validateURL as b}from"../../../utils/validator.js";import j from"../../../assets/icons/file.svg.js";import C from"../../../assets/icons/filePdf.svg.js";import I from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as w}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const E=({setOpenEditMedia:E,mediaComponentFormat:A,variableListForImage:V,openEditMedia:T,uploadMedia:B,fileRef:D,useEditWhatsappTemplateMediaResponse:P,skipAddVariable:U})=>{const{pod:L,setHideCrossButton:G,setHideFooterButton:R}=w(),[W,O]=s(""),[S,H]=s(void 0),[$,F]=s(!1),[_,z]=s("");let N;if(l(()=>(R(!0),()=>{R(!1)}),[]),l(()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&H(e)},[P.loading]),N=A===h.IMAGE?"image/png, image/jpeg":A===h.VIDEO?"video/mp4":"application/pdf",!T)return e(t,{});const q=()=>A===h.IMAGE?"Image":A===h.VIDEO?"Video":"Document";return o(t,{children:[o("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e(i,{onClick:e=>{e.stopPropagation(),E(!1),O("")},style:{cursor:"pointer"},width:16,height:16}),e(f,{children:"Update Media"})]}),o("div",{style:{position:"relative",padding:16,borderRadius:4,border:$?`1px dashed ${c.colorsV2.stroke.negative.vibrant}`:`1px dashed ${c.colorsV2.stroke.primary}`,backgroundColor:c.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:P.loading?"flex":"initial"},children:[o("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[P.loading?e(d,{width:"40px",height:"40px",color:g.content.brand}):e("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:c.colorsV2.background.base},children:A===h.IMAGE?e(I,{width:40,height:40}):A===h.VIDEO?e(j,{width:40,height:40}):e(C,{width:40,height:40})}),e(v,{children:P.loading?"Upload in progress...":A===h.IMAGE?"Upload an image":A===h.VIDEO?"Upload a video":"Upload a document"}),e(y,{color:g.content.secondary,children:P.loading?`Your ${A.toLowerCase()} is getting loaded. This may take a couple of minutes.`:A===h.IMAGE?"JPEG/ PNG format • Max 5MB":A===h.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"})]}),!P.loading&&o(t,{children:[e("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e(m,{labelText:`${q()} URL`,onPickerToggle:e=>{G(!!e)},pickerType:r.EMBEDDED,portalElement:null!=S?S:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{z(e.actualValue),F(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:W,prevVariable:{actualValue:"",variableType:"string"},variablesList:V,placeHolder:U?"Enter URL":"Enter URL/Add variable",showAddButton:L!==u.CAMPAIGN||!U&&A===h.IMAGE})}),o("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(x,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]}),e("div",{style:{display:"flex",width:"100%"},children:e(n,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{B(),F(!1)},size:"medium"})})]}),$&&o("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e(a,{width:16,height:16,color:g.content.negative}),e(x,{style:{color:g.content.negative},children:`Select ${q()}`})]})]}),!P.loading&&e("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e(n,{buttonText:`Add ${q()}`,onClick:()=>{_?b(_)||k(_)?(B(_),E(!1),O(""),F(!1)):O("Enter valid URL"):F(!0)}})}),e("input",{ref:D,style:{display:"none"},type:"file",onChange:P.handleImageUpload,accept:N}),!!P.selectedImage&&e(p,{aspectRatio:15/8,src:P.selectedImage,onCropComplete:P.onCropComplete,onCancel:()=>{P.setLoading(!1),P.setSelectedImage(""),D.current&&(D.current.value="")}})]})};export{E as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import i from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as l}from"react";import{Button as n}from"../../button/Button.js";import{BikImageCropper as p}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 d}from"../../spinner/Spinner.js";import{InputWithVariables as m}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 c,COLORS as g}from"../../../constants/Theme.js";import{HEADER_TYPES as h}from"../../template-preview/models/TemplateMeta.js";import{POD as u}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{TitleRegular as f,TitleMedium as v,BodySecondary as y,BodyCaption as x}from"../../TypographyStyle.js";import{validateURL as b}from"../../../utils/validator.js";import j from"../../../assets/icons/file.svg.js";import C from"../../../assets/icons/filePdf.svg.js";import I from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as w}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const E=E=>{let{setOpenEditMedia:A,mediaComponentFormat:V,variableListForImage:T,openEditMedia:B,uploadMedia:D,fileRef:P,useEditWhatsappTemplateMediaResponse:U,skipAddVariable:L}=E;const{pod:G,setHideCrossButton:R,setHideFooterButton:W}=w(),[O,S]=s(""),[H,$]=s(void 0),[F,_]=s(!1),[z,N]=s("");let q;if(l((()=>(W(!0),()=>{W(!1)})),[]),l((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&$(e)}),[U.loading]),q=V===h.IMAGE?"image/png, image/jpeg":V===h.VIDEO?"video/mp4":"application/pdf",!B)return e(t,{});const J=()=>V===h.IMAGE?"Image":V===h.VIDEO?"Video":"Document";return o(t,{children:[o("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e(i,{onClick:e=>{e.stopPropagation(),A(!1),S("")},style:{cursor:"pointer"},width:16,height:16}),e(f,{children:"Update Media"})]}),o("div",{style:{position:"relative",padding:16,borderRadius:4,border:F?`1px dashed ${c.colorsV2.stroke.negative.vibrant}`:`1px dashed ${c.colorsV2.stroke.primary}`,backgroundColor:c.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:U.loading?"flex":"initial"},children:[o("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[U.loading?e(d,{width:"40px",height:"40px",color:g.content.brand}):e("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:c.colorsV2.background.base},children:V===h.IMAGE?e(I,{width:40,height:40}):V===h.VIDEO?e(j,{width:40,height:40}):e(C,{width:40,height:40})}),e(v,{children:U.loading?"Upload in progress...":V===h.IMAGE?"Upload an image":V===h.VIDEO?"Upload a video":"Upload a document"}),e(y,{color:g.content.secondary,children:U.loading?`Your ${V.toLowerCase()} is getting loaded. This may take a couple of minutes.`:V===h.IMAGE?"JPEG/ PNG format • Max 5MB":V===h.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"})]}),!U.loading&&o(t,{children:[e("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e(m,{labelText:`${J()} URL`,onPickerToggle:e=>{R(!!e)},pickerType:r.EMBEDDED,portalElement:null!=H?H:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{N(e.actualValue),_(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:O,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:L?"Enter URL":"Enter URL/Add variable",showAddButton:G!==u.CAMPAIGN||!L&&V===h.IMAGE})}),o("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(x,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]}),e("div",{style:{display:"flex",width:"100%"},children:e(n,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{D(),_(!1)},size:"medium"})})]}),F&&o("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e(a,{width:16,height:16,color:g.content.negative}),e(x,{style:{color:g.content.negative},children:`Select ${J()}`})]})]}),!U.loading&&e("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e(n,{buttonText:`Add ${J()}`,onClick:()=>{z?b(z)||k(z)?(D(z),A(!1),S(""),_(!1)):S("Enter valid URL"):_(!0)}})}),e("input",{ref:P,style:{display:"none"},type:"file",onChange:U.handleImageUpload,accept:q}),!!U.selectedImage&&e(p,{aspectRatio:15/8,src:U.selectedImage,onCropComplete:U.onCropComplete,onCancel:()=>{U.setLoading(!1),U.setSelectedImage(""),P.current&&(P.current.value="")}})]})};export{E as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{cloneDeep as a}from"lodash";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as d}from"../../input/Input.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=({template:E,onTemplateChange:V,whatsappSpecificPickerMeta:j,showVariableModal:x})=>{var L,y,w;const[I,O]=n(null),[k,B]=n(null),{variableList:R,disableEditVariable:A,originalVariableList:U,setOriginalVariableList:W}=m(),{processWebpushTemplate:F,isValidUrl:H}=u(),[D,P]=n(null),[S,G]=n(null),[N,$]=n(null);o(()=>{R&&F(E,R,U,A).then(({templateVariableMapping:e,template:i,webpushBroadcastConfig:t})=>{O(e),null==W||W(e),null==V||V(Object.assign({},i)),B(t)})},[R,A]);const{descriptionComponents:K,bodyVariables:q,titleVariables:z}=l(()=>{if(I&&k){const e=c(k,I);return D||P(e.iconImage),S||G(e.bannerImage),N||$(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}},[I,k]),{uploadMediaLink:J,uploadMediaFiles:Q,validateMimeType:X}=j,Y=r(null),Z=f({uploadMediaLink:J,uploadMediaFiles:Q,updateTemplateImageUrl:e=>ee(e,"icon"),validateMimeType:X,mediaComponent:D,fileRef:Y}),_=f({uploadMediaLink:J,uploadMediaFiles:Q,updateTemplateImageUrl:e=>ee(e,"image"),validateMimeType:X,mediaComponent:S,fileRef:Y});function ee(e,i){const t=Object.assign({},E),n=a(t);"icon"===i?(n.webpushBroadcastConfig.icon=[e],P([e])):"image"===i&&(n.webpushBroadcastConfig.image=[e],G([e])),null==V||V(Object.assign({},n))}function ie(e,i,t){var n;const o=Object.assign({},E),l=a(o),r="custom"===i&&"string"==typeof e,d=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(d&&d.length>0){d[t]=r?e:"string"!=typeof e?e.placeHolder:"";const i=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:d});l.webpushBroadcastConfig=i}null==V||V(l)}const te=Z.openEditMedia?Z:_.openEditMedia?_:null;if(te)return e(M,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:te.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:te,setOpenEditMedia:te.setOpenEditMedia,openEditMedia:te.openEditMedia,editIconRef:te.editIconRef,fileRef:Y,skipAddVariable:!0})});return i(M,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"},children:[D&&D.length?e(g,{children:e(b,{imageName:D,handleImageChange:Z.handleImageChange,mediaType:p.IMAGE,error:Z.error,isLoading:Z.loading,setOpenEditMedia:Z.setOpenEditMedia})}):null,S&&S.length?e(g,{children:e(b,{imageName:S,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,(null==q?void 0:q.length)||(null==z?void 0:z.length)?e(C,{containerStyle:{paddingTop: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,null==K?void 0:K.map((i,t)=>e(v,{originalVariableList:I,originalList:U,channel:s.WEBPUSH,type:i.type,descriptionComponent:i.component,showVariableModal:x},t)),N&&N.length?e("div",{style:{padding:"16px 14px"},children:e(d,{labelText:"Redirection Link",id:"redirection-link",value:N[0].replace("https://",""),errorMessage:H(N[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:A?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var i;const t=`https://${e}`;$([t]);const n=a(E);(null===(i=n.webpushBroadcastConfig)||void 0===i?void 0:i.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[t]),null==V||V(Object.assign({},n))}(e)}})}):e(t,{}),(null===(y=null===(L=null==I?void 0:I.buttons)||void 0===L?void 0:L.filter(e=>"URL"===e.type))||void 0===y?void 0:y.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(w=null==I?void 0:I.buttons)||void 0===w?void 0:w.map((i,t)=>e(T,{variableListIndex:t,CTAoptions:null==j?void 0:j.CTAoptions,button:i,currentVariableList:I,updateSelectedURLTemplateBtn:ie},`${t}`))]})};export{E as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{cloneDeep as a}from"lodash";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as d}from"../../input/Input.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=E=>{let{template:V,onTemplateChange:j,whatsappSpecificPickerMeta:x,showVariableModal:L}=E;var y,w,I;const[O,k]=n(null),[B,R]=n(null),{variableList:A,disableEditVariable:U,originalVariableList:W,setOriginalVariableList:F}=m(),{processWebpushTemplate:H,isValidUrl:D}=u(),[P,S]=n(null),[G,N]=n(null),[$,K]=n(null);o((()=>{A&&H(V,A,W,U).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;k(t),null==F||F(t),null==j||j(Object.assign({},i)),R(a)}))}),[A,U]);const{descriptionComponents:q,bodyVariables:z,titleVariables:J}=l((()=>{if(O&&B){const e=c(B,O);return P||S(e.iconImage),G||N(e.bannerImage),$||K(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[O,B]),{uploadMediaLink:Q,uploadMediaFiles:X,validateMimeType:Y}=x,Z=r(null),_=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"icon"),validateMimeType:Y,mediaComponent:P,fileRef:Z}),ee=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"image"),validateMimeType:Y,mediaComponent:G,fileRef:Z});function te(e,t){const i=Object.assign({},V),n=a(i);"icon"===t?(n.webpushBroadcastConfig.icon=[e],S([e])):"image"===t&&(n.webpushBroadcastConfig.image=[e],N([e])),null==j||j(Object.assign({},n))}function ie(e,t,i){var n;const o=Object.assign({},V),l=a(o),r="custom"===t&&"string"==typeof e,d=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(d&&d.length>0){d[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:d});l.webpushBroadcastConfig=t}null==j||j(l)}const ae=_.openEditMedia?_:ee.openEditMedia?ee:null;if(ae)return e(M,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:ae.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:ae,setOpenEditMedia:ae.setOpenEditMedia,openEditMedia:ae.openEditMedia,editIconRef:ae.editIconRef,fileRef:Z,skipAddVariable:!0})});return t(M,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"},children:[P&&P.length?e(g,{children:e(b,{imageName:P,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,G&&G.length?e(g,{children:e(b,{imageName:G,handleImageChange:ee.handleImageChange,mediaType:p.IMAGE,error:ee.error,isLoading:ee.loading,setOpenEditMedia:ee.setOpenEditMedia})}):null,(null==z?void 0:z.length)||(null==J?void 0:J.length)?e(C,{containerStyle:{paddingTop: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,null==q?void 0:q.map(((t,i)=>e(v,{originalVariableList:O,originalList:W,channel:s.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:L},i))),$&&$.length?e("div",{style:{padding:"16px 14px"},children:e(d,{labelText:"Redirection Link",id:"redirection-link",value:$[0].replace("https://",""),errorMessage:D($[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:U?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;K([i]);const n=a(V);(null===(t=n.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==j||j(Object.assign({},n))}(e)}})}):e(i,{}),(null===(w=null===(y=null==O?void 0:O.buttons)||void 0===y?void 0:y.filter((e=>"URL"===e.type)))||void 0===w?void 0:w.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==O?void 0:O.buttons)||void 0===I?void 0:I.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==x?void 0:x.CTAoptions,button:t,currentVariableList:O,updateSelectedURLTemplateBtn:ie},`${i}`)))]})};export{E as default};

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

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

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"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import{cloneDeep as i}from"lodash";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as T}from"../utils/validateName.js";import{BackTrackComponent as O}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=({template:d,onTemplateChange:R,whatsappSpecificPickerMeta:P,showVariableModal:H,variableListForImage:N,setDiscountCode:D,fileName:A,setFileName:_})=>{var F,q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Te,Oe,xe,ye,Ve;const Ee=d.isCarouselType,{originalVariableList:Be,pod:Me,extras:ke,selectedCarouselIndex:Ie,isProductCarouselType:we,disableCopyCode:Le,isError:Re,cardIndex:Ue}=b(),{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}=f(d),qe=l(null),[Qe,Se]=a(!1),[Ye,Ke]=a(-1===Ie?{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}:{}),{uploadMediaLink:We,uploadMediaFiles:$e,validateMimeType:Ge}=P,Xe=B({uploadMediaLink:We,uploadMediaFiles:$e,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,r,p,u;let c;c=null!=Ie&&Ie>-1?{components:null===(t=null===(n=d.components[Ue])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie].components,mapping:null===(a=null===(l=null==d?void 0:d.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Ie]}:Object.assign({},d);const v=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.findIndex(e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0});if(void 0!==v&&v>-1&&(null==c?void 0:c.components[v])){const n=Object.assign(Object.assign({},c.components[v]),{format:o,example:{header_handle:[e]}}),t=[...c.components];t[v]=n,c=Object.assign(Object.assign({},c),{components:t})}c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0}));if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=c.components,(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards)&&(null===(p=null==e?void 0:e.mapping)||void 0===p?void 0:p.cards.length)>0&&(e.mapping.cards[Ie]=null!==(u=c.mapping)&&void 0!==u?u:{}),null==R||R(Object.assign({},e)),Je(!0)}else null==R||R(Object.assign({},c))},validateMimeType:Ge,mediaComponent:Ee?Ye.imageComponent:De,fileRef:qe}),[ze,Je]=a(!1),[Ze,eo]=a(A),[oo,no]=a();function to(e,o,n){var t,l,a,s,r,p,u,v,m,b;const g=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d),h=i(g),f="custom"===o&&"string"==typeof e,j=f?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map(e=>{var o;return c(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:[j]});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}),t=null===(s=null===(a=Object.assign({},d).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map(o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o,t)=>t===n?f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o)})}),l=i(d);return l.components=o,l.mapping.cards=t,void(null==R||R(Object.assign({},l)))}const C=null==h?void 0:h.components.findIndex(e=>"BUTTONS"===e.type);if(void 0!==C&&C>-1){const t=null===(r=null==h?void 0:h.components[C].buttons)||void 0===r?void 0:r.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!==(v=null===(u=null===(p=h.components)||void 0===p?void 0:p[C])||void 0===u?void 0:u.buttons)&&void 0!==v?v:[]].map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e),d=Object.assign(Object.assign({},h.components[C]),{buttons:s}),r=null===(m=h.mapping)||void 0===m?void 0:m.buttons;r&&r.length>0&&(r[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const c=Object.assign(Object.assign({},h.mapping),{buttons:r});h.mapping=c;const b=[...h.components];b[C]=d,h.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(b=e.placeHolder)||void 0===b?void 0:b.slice(2,-2))?Se(!0):(Se(!1),null==D||D(""))}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=h.components,e.mapping.cards[Ie]=h.mapping,null==R||R(Object.assign({},e))}else null==R||R(h)}function io(e,o,n){var t,l,a,s,r,p,u;const v=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d);if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map(o=>{var t;return c(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=null==o?void 0: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=null==o?void 0: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}),t=i(d);return t.components=o,void(null==R||R(Object.assign({},t)))}const m=null==v?void 0:v.components.findIndex(e=>"BUTTONS"===e.type);if(void 0!==m&&m>-1){const o=null===(s=null===(a=null==v?void 0:v.components[m])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.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!==(u=null===(p=null===(r=v.components)||void 0===r?void 0:r[m])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].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({},v.components[m]),{buttons:i}),a=[...v.components];a[m]=l,v.components=a}}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=v.components,null==R||R(Object.assign({},e))}else null==R||R(v)}s(()=>{var e,o;if(null===(e=d.mapping.buttons)||void 0===e?void 0:e.find(e=>"checkout.checkoutUrl"===e.slice(2,-2)))Se(!0);else{Se(!1);const e=null===(o=null==ke?void 0:ke.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}},[d]),s(()=>{var e,o,n,t;if(null!=Ie&&Ie>-1){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c})}else if(null!=Ie&&-1===Ie){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(d);Ke({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}},[Ie]),s(()=>{var e,o,n,t;if(null!=Ie&&Ie>-1&&ze){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}),Je(!1)}},[ze]);s(()=>{Re&&Me===m.CHATBOT&&(()=>{if(!A)return void no("PDF name is Required");const e=T(A);null==_||_(null!=A?A:""),no(e?"Please enter a valid PDF name":void 0)})()},[Re]);const lo=Ee?Ye.imageComponent:De;return Xe.openEditMedia?e(k,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(y,{mediaComponentFormat:null!==(F=lo.format)&&void 0!==F?F:v.IMAGE,uploadMedia:Xe.uploadMedia,variableListForImage:N||[],useEditWhatsappTemplateMediaResponse:Xe,setOpenEditMedia:Xe.setOpenEditMedia,openEditMedia:Xe.openEditMedia,editIconRef:Xe.editIconRef,fileRef:qe})}):o(k,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:we?"420px":"auto"},children:[!!Ye.imageComponent&&!we&&!u(null==d?void 0:d.channel)&&o(E,{children:[e(V,{imageName:null!==(Q=null===(q=null==lo?void 0:lo.example)||void 0===q?void 0:q.header_handle)&&void 0!==Q?Q:[],handleImageChange:Xe.handleImageChange,mediaType:null==lo?void 0:lo.format,error:Xe.error,isLoading:Xe.loading,setOpenEditMedia:Xe.setOpenEditMedia,selectedVariable:j(null!==(K=null===(Y=null===(S=null==lo?void 0:lo.example)||void 0===S?void 0:S.header_handle)||void 0===Y?void 0:Y[0])&&void 0!==K?K:"")?null===($=null===(W=null==lo?void 0:lo.example)||void 0===W?void 0:W.header_handle)||void 0===$?void 0:$[0]:(null===(X=null===(G=null==d?void 0:d.mapping)||void 0===G?void 0:G.header)||void 0===X?void 0:X[0])?null===(J=null===(z=null==d?void 0:d.mapping)||void 0===z?void 0:z.header)||void 0===J?void 0:J[0]:Xe.selectedVariable}),(null==De?void 0:De.format)==v.DOCUMENT?e(U,{children:Me===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:oo||void 0,onChange:e=>{var o;no(""),null==_||_(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=A?A:"",variableType:"string"},variablesList:N,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:Ze,errorMessage:oo||void 0,onBlur:()=>{if(!Ze)return null==_||_(""),void no("PDF name is Required");const e=C(Ze);null==_||_(Ze),no(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{no(""),eo(e)}})}):e(n,{})]}),(null===(Z=Ye.bodyVariables)||void 0===Z?void 0:Z.length)>0&&e(w,{containerStyle:{paddingTop:Ye.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===(ee=Ye.descriptionComponents)||void 0===ee?void 0:ee.map((o,n)=>e(I,{originalVariableList:null!=Ie&&Ie>-1?Be.cards[Ie]:Be,type:o.type,descriptionComponent:o.component,showVariableModal:H},n)),(null===(te=null===(ne=null!=Ie&&Ie>-1?null===(oe=Be.cards[Ie])||void 0===oe?void 0:oe.buttons:null==Be?void 0:Be.buttons)||void 0===ne?void 0:ne.filter(e=>"URL"===e.type))||void 0===te?void 0:te.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(ae=null===(le=null!=Ie&&Ie>-1?null===(ie=Be.cards[Ie])||void 0===ie?void 0:ie.buttons:null==Be?void 0:Be.buttons)||void 0===le?void 0:le.filter(e=>Me===m.CHATBOT||"URL"===e.type))||void 0===ae?void 0:ae.map((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==P?void 0:P.CTAoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedURLTemplateBtn:to},`${n}_${Ie}`)}),Me===m.CHATBOT&&(null===(de=null===(se=Ne[0])||void 0===se?void 0:se.component)||void 0===de?void 0:de.buttons)&&(null===(ue=null===(pe=null===(re=Ne[0])||void 0===re?void 0:re.component)||void 0===pe?void 0:pe.buttons)||void 0===ue?void 0:ue.length)>0&&e(O,{backTrackMessage:null===(ce=null==ke?void 0:ke.backTrackExtra)||void 0===ce?void 0:ce[0],setBackTrackMessage:null===(ve=null==ke?void 0:ke.backTrackExtra)||void 0===ve?void 0:ve[1]}),!u(null==d?void 0:d.channel)&&(null===(ge=null===(be=null!=Ie&&Ie>-1?null===(me=Be.cards[Ie])||void 0===me?void 0:me.buttons:null==Be?void 0:Be.buttons)||void 0===be?void 0:be.filter(e=>"QUICK_REPLY"===e.type))||void 0===ge?void 0:ge.length)>0&&(Me!==m.CHATBOT?e(w,{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(O,{backTrackMessage:null===(he=null==ke?void 0:ke.backTrackExtra)||void 0===he?void 0:he[0],setBackTrackMessage:null===(fe=null==ke?void 0:ke.backTrackExtra)||void 0===fe?void 0:fe[1]})),!u(null==d?void 0:d.channel)&&(null===(Te=null===(Ce=null!=Ie&&Ie>-1?null===(je=Be.cards[Ie])||void 0===je?void 0:je.buttons:null==Be?void 0:Be.buttons)||void 0===Ce?void 0:Ce.filter(e=>"QUICK_REPLY"===e.type))||void 0===Te?void 0:Te.map((o,n)=>{if("QUICK_REPLY"===o.type&&Me!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==P?void 0:P.QRBoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedQRBTemplateBtn:io},`${n}_${Ie}`)})),Me===m.CHATBOT&&Qe&&e(x,{discountCode:null===(Oe=null==ke?void 0:ke.discountCodeExtra)||void 0===Oe?void 0:Oe[0],setDiscountCode:null===(xe=null==ke?void 0:ke.discountCodeExtra)||void 0===xe?void 0:xe[1]}),null===(Ve=null!=Ie&&Ie>-1?null===(ye=Be.cards[Ie])||void 0===ye?void 0:ye.buttons:null==Be?void 0:Be.buttons)||void 0===Ve?void 0:Ve.map((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Le?e("div",{style:{marginBottom:20,borderRadius:4,padding:"8px 10px"},children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})}):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})})]})},U=d.div`
+import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import{cloneDeep as i}from"lodash";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as T}from"../utils/validateName.js";import{BackTrackComponent as O}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=d=>{let{template:R,onTemplateChange:P,whatsappSpecificPickerMeta:H,showVariableModal:N,variableListForImage:D,setDiscountCode:A,fileName:_,setFileName:F}=d;var q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Te,Oe,xe,ye,Ve,Ee;const Be=R.isCarouselType,{originalVariableList:Me,pod:ke,extras:Ie,selectedCarouselIndex:we,isProductCarouselType:Le,disableCopyCode:Re,isError:Ue,cardIndex:Pe}=b(),{descriptionComponents:He,urlBtns:Ne,qrbBtns:De,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}=f(R),Qe=l(null),[Se,Ye]=a(!1),[Ke,We]=a(-1===we?{descriptionComponents:He,urlBtns:Ne,qrbBtns:De,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}:{}),{uploadMediaLink:$e,uploadMediaFiles:Ge,validateMimeType:Xe}=H,ze=B({uploadMediaLink:$e,uploadMediaFiles:Ge,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,d,r,p;let u;u=null!=we&&we>-1?{components:null===(t=null===(n=R.components[Pe])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we].components,mapping:null===(a=null===(l=null==R?void 0:R.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[we]}:Object.assign({},R);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!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].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[we]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==P||P(Object.assign({},e)),Ze(!0)}else null==P||P(Object.assign({},u))},validateMimeType:Xe,mediaComponent:Be?Ke.imageComponent:Ae,fileRef:Qe}),[Je,Ze]=a(!1),[eo,oo]=a(_),[no,to]=a();function io(e,o,n){var t,l,a,s,d,r,p,u,v,m;const b=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R),g=i(b),h="custom"===o&&"string"==typeof e,f=h?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((e=>{var o;return c(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})),t=null===(s=null===(a=Object.assign({},R).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map(((o,t)=>t===n?h?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o))})})),l=i(R);return l.components=o,l.mapping.cards=t,void(null==P||P(Object.assign({},l)))}const j=null==g?void 0:g.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==g?void 0:g.components[j].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=g.components)||void 0===r?void 0:r[j])||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({},g.components[j]),{buttons:s}),c=null===(v=g.mapping)||void 0===v?void 0:v.buttons;c&&c.length>0&&(c[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},g.mapping),{buttons:c});g.mapping=m;const b=[...g.components];b[j]=d,g.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Ye(!0):(Ye(!1),null==A||A(""))}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=g.components,e.mapping.cards[we]=g.mapping,null==P||P(Object.assign({},e))}else null==P||P(g)}function lo(e,o,n){var t,l,a,s,d,r,p;const u=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R);if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((o=>{var t;return c(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=null==o?void 0: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=null==o?void 0: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})),t=i(R);return t.components=o,void(null==P||P(Object.assign({},t)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const o=null===(s=null===(a=null==u?void 0:u.components[v])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.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!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[v])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[v]),{buttons:i}),a=[...u.components];a[v]=l,u.components=a}}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=u.components,null==P||P(Object.assign({},e))}else null==P||P(u)}s((()=>{var e,o;if(null===(e=R.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Ye(!0);else{Ye(!1);const e=null===(o=null==Ie?void 0:Ie.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[R]),s((()=>{var e,o,n,t;if(null!=we&&we>-1){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u})}else if(null!=we&&-1===we){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(R);We({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}}),[we]),s((()=>{var e,o,n,t;if(null!=we&&we>-1&&Je){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}),Ze(!1)}}),[Je]);s((()=>{Ue&&ke===m.CHATBOT&&(()=>{if(!_)return void to("PDF name is Required");const e=T(_);null==F||F(null!=_?_:""),to(e?"Please enter a valid PDF name":void 0)})()}),[Ue]);const ao=Be?Ke.imageComponent:Ae;return ze.openEditMedia?e(k,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(y,{mediaComponentFormat:null!==(q=ao.format)&&void 0!==q?q:v.IMAGE,uploadMedia:ze.uploadMedia,variableListForImage:D||[],useEditWhatsappTemplateMediaResponse:ze,setOpenEditMedia:ze.setOpenEditMedia,openEditMedia:ze.openEditMedia,editIconRef:ze.editIconRef,fileRef:Qe})}):o(k,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Le?"420px":"auto"},children:[!!Ke.imageComponent&&!Le&&!u(null==R?void 0:R.channel)&&o(E,{children:[e(V,{imageName:null!==(S=null===(Q=null==ao?void 0:ao.example)||void 0===Q?void 0:Q.header_handle)&&void 0!==S?S:[],handleImageChange:ze.handleImageChange,mediaType:null==ao?void 0:ao.format,error:ze.error,isLoading:ze.loading,setOpenEditMedia:ze.setOpenEditMedia,selectedVariable:j(null!==(W=null===(K=null===(Y=null==ao?void 0:ao.example)||void 0===Y?void 0:Y.header_handle)||void 0===K?void 0:K[0])&&void 0!==W?W:"")?null===(G=null===($=null==ao?void 0:ao.example)||void 0===$?void 0:$.header_handle)||void 0===G?void 0:G[0]:(null===(z=null===(X=null==R?void 0:R.mapping)||void 0===X?void 0:X.header)||void 0===z?void 0:z[0])?null===(Z=null===(J=null==R?void 0:R.mapping)||void 0===J?void 0:J.header)||void 0===Z?void 0:Z[0]:ze.selectedVariable}),(null==Ae?void 0:Ae.format)==v.DOCUMENT?e(U,{children:ke===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:no||void 0,onChange:e=>{var o;to(""),null==F||F(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=_?_:"",variableType:"string"},variablesList:D,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:eo,errorMessage:no||void 0,onBlur:()=>{if(!eo)return null==F||F(""),void to("PDF name is Required");const e=C(eo);null==F||F(eo),to(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{to(""),oo(e)}})}):e(n,{})]}),(null===(ee=Ke.bodyVariables)||void 0===ee?void 0:ee.length)>0&&e(w,{containerStyle:{paddingTop:Ke.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(oe=Ke.descriptionComponents)||void 0===oe?void 0:oe.map(((o,n)=>e(I,{originalVariableList:null!=we&&we>-1?Me.cards[we]:Me,type:o.type,descriptionComponent:o.component,showVariableModal:N},n))),(null===(ie=null===(te=null!=we&&we>-1?null===(ne=Me.cards[we])||void 0===ne?void 0:ne.buttons:null==Me?void 0:Me.buttons)||void 0===te?void 0:te.filter((e=>"URL"===e.type)))||void 0===ie?void 0:ie.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(se=null===(ae=null!=we&&we>-1?null===(le=Me.cards[we])||void 0===le?void 0:le.buttons:null==Me?void 0:Me.buttons)||void 0===ae?void 0:ae.filter((e=>ke===m.CHATBOT||"URL"===e.type)))||void 0===se?void 0:se.map(((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==H?void 0:H.CTAoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedURLTemplateBtn:io},`${n}_${we}`)})),ke===m.CHATBOT&&(null===(re=null===(de=De[0])||void 0===de?void 0:de.component)||void 0===re?void 0:re.buttons)&&(null===(ce=null===(ue=null===(pe=De[0])||void 0===pe?void 0:pe.component)||void 0===ue?void 0:ue.buttons)||void 0===ce?void 0:ce.length)>0&&e(O,{backTrackMessage:null===(ve=null==Ie?void 0:Ie.backTrackExtra)||void 0===ve?void 0:ve[0],setBackTrackMessage:null===(me=null==Ie?void 0:Ie.backTrackExtra)||void 0===me?void 0:me[1]}),!u(null==R?void 0:R.channel)&&(null===(he=null===(ge=null!=we&&we>-1?null===(be=Me.cards[we])||void 0===be?void 0:be.buttons:null==Me?void 0:Me.buttons)||void 0===ge?void 0:ge.filter((e=>"QUICK_REPLY"===e.type)))||void 0===he?void 0:he.length)>0&&(ke!==m.CHATBOT?e(w,{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(O,{backTrackMessage:null===(fe=null==Ie?void 0:Ie.backTrackExtra)||void 0===fe?void 0:fe[0],setBackTrackMessage:null===(je=null==Ie?void 0:Ie.backTrackExtra)||void 0===je?void 0:je[1]})),!u(null==R?void 0:R.channel)&&(null===(Oe=null===(Te=null!=we&&we>-1?null===(Ce=Me.cards[we])||void 0===Ce?void 0:Ce.buttons:null==Me?void 0:Me.buttons)||void 0===Te?void 0:Te.filter((e=>"QUICK_REPLY"===e.type)))||void 0===Oe?void 0:Oe.map(((o,n)=>{if("QUICK_REPLY"===o.type&&ke!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==H?void 0:H.QRBoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedQRBTemplateBtn:lo},`${n}_${we}`)}))),ke===m.CHATBOT&&Se&&e(x,{discountCode:null===(xe=null==Ie?void 0:Ie.discountCodeExtra)||void 0===xe?void 0:xe[0],setDiscountCode:null===(ye=null==Ie?void 0:Ie.discountCodeExtra)||void 0===ye?void 0:ye[1]}),null===(Ee=null!=we&&we>-1?null===(Ve=Me.cards[we])||void 0===Ve?void 0:Ve.buttons:null==Me?void 0:Me.buttons)||void 0===Ee?void 0:Ee.map(((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Re?e("div",{style:{marginBottom:20,borderRadius:4,padding:"8px 10px"},children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})}):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})}))]})},U=d.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;

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

@@ -12,4 +12,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,h=({isWhatsappCarousel:l,onSelect:h,footerButtonText:x,footerInfoText:f})=>{var g,j,b,w;const{isError:y,selectedCarouselIndex:T,setSelectedCarouselIndex:C,setErrorIndexes:S,template:W,showVariablePicker:k,hideFooterButton:A}=u(),[P,I]=r(l?"Next":"Select template");return i(()=>{x?I(x):l&&-1===T?I("Next"):l&&null!=T&&T>-1&&I("Save & Select Template")},[T]),e(v,{isWhatsappCarousel:l,justifyContent:l&&(null===(j=null===(g=null==W?void 0:W.mapping)||void 0===g?void 0:g.body)||void 0===j?void 0:j.length)?"space-between":"end",children:[m((null==W?void 0:W.channel)||n.WHATSAPP)?t(d,{}):l&&null!=T&&T>=-1&&!!(null===(w=null===(b=null==W?void 0:W.mapping)||void 0===b?void 0:b.body)||void 0===w?void 0:w.length)&&t(d,{color:s.text.secondary,children:`Step ${-1===T?1:2}/2`}),e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[y&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!y&&f&&t("div",{style:{marginRight:12},children:t(a,{tagText:f,LeadingIcon:o})}),!A&&t(p,{disabled:k,id:"select-template-btn",buttonText:P,size:l?"small":"large",onClick:function(){l&&-1===T&&C?C(0):(null==S||S([]),h())}})]})]})};export{h as default};
+`,h=l=>{let{isWhatsappCarousel:h,onSelect:x,footerButtonText:f,footerInfoText:g}=l;var j,b,w,y;const{isError:T,selectedCarouselIndex:C,setSelectedCarouselIndex:S,setErrorIndexes:W,template:k,showVariablePicker:A,hideFooterButton:P}=u(),[I,$]=r(h?"Next":"Select template");return i((()=>{f?$(f):h&&-1===C?$("Next"):h&&null!=C&&C>-1&&$("Save & Select Template")}),[C]),e(v,{isWhatsappCarousel:h,justifyContent:h&&(null===(b=null===(j=null==k?void 0:k.mapping)||void 0===j?void 0:j.body)||void 0===b?void 0:b.length)?"space-between":"end",children:[m((null==k?void 0:k.channel)||n.WHATSAPP)?t(d,{}):h&&null!=C&&C>=-1&&!!(null===(y=null===(w=null==k?void 0:k.mapping)||void 0===w?void 0:w.body)||void 0===y?void 0:y.length)&&t(d,{color:s.text.secondary,children:`Step ${-1===C?1:2}/2`}),e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[T&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!T&&g&&t("div",{style:{marginRight:12},children:t(a,{tagText:g,LeadingIcon:o})}),!P&&t(p,{disabled:A,id:"select-template-btn",buttonText:I,size:h?"small":"large",onClick:function(){h&&-1===C&&S?S(0):(null==W||W([]),x())}})]})]})};export{h as default};

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

@@ -20,4 +20,4 @@ import{jsxs as o,jsx as e}from"react/jsx-runtime";import t from"../../../assets/
 	align-items: center;
 `,a=i(p)`
 	border-left: 1px solid ${d.stroke.primary};
-`,m=({showOnlyContent:i})=>{const{device:m,setDevice:b}=s();return o(c,{showOnlyContent:i,children:[o(l,{children:[e(p,{active:"mobile"===m,onClick:()=>null==b?void 0:b("mobile"),children:e(n,{color:"mobile"===m?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===m,onClick:()=>null==b?void 0:b("desktop"),children:e(t,{color:"desktop"===m?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===m?"Mobile":"Web"," view"]})]})};export{m as default};
+`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:h}=s();return o(c,{showOnlyContent:m,children:[o(l,{children:[e(p,{active:"mobile"===b,onClick:()=>null==h?void 0:h("mobile"),children:e(n,{color:"mobile"===b?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===b,onClick:()=>null==h?void 0:h("desktop"),children:e(t,{color:"desktop"===b?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===b?"Mobile":"Web"," view"]})]})};export{m as default};

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

@@ -17,7 +17,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=o.forwardRef(({display_content:o,channel:a,template:h,showSampleValues:f},w)=>{const{pod:v,hideDeviceContainerInPreview:b}=l(),g={showSampleValues:f,template:h,channel:a,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:a==s.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return b?e(d,{children:e(r,Object.assign({},g))}):e(t,{children:i(n,{channel:a,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:m(a),height:443}}),e(c,{ref:w,children:e(r,Object.assign({},g))})]})})});h.displayName="MobilePreview";const d=a.div`
+`,h=o.forwardRef(((o,a)=>{let{display_content:h,channel:f,template:w,showSampleValues:v}=o;const{pod:b,hideDeviceContainerInPreview:g}=l(),u={showSampleValues:v,template:w,channel:f,smsSpecificMeta:{smsDisplayContent:h},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:f==s.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:h,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return g?e(d,{children:e(r,Object.assign({},u))}):e(t,{children:i(n,{channel:f,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:m(f),height:443}}),e(c,{ref:a,children:e(r,Object.assign({},u))})]})})}));h.displayName="MobilePreview";const d=a.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:y,isError:g,variableValue:f}=a,[x,j]=s(h.length>0),[v,C]=s(h);return i(()=>{C(h)},[f]),e(u,{children:[e("div",{style:{display:"flex"},children:[t(l,{isChecked:x,onValueChange:e=>{C([]),y([]),j(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),x&&v.map((o,s)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=v.map((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t);C(t),y(t)},state:g&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=v.map((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t);C(t),y(t)},state:g&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=v.filter((e,t)=>t!=s);C(e),y(e)}})]},s)),x&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(o,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...v,{key:"",value:""}];C(e),y(e)}})]})},u=a.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:y,isError:g,variableValue:f}=a,[x,j]=s(h.length>0),[v,C]=s(h);return i((()=>{C(h)}),[f]),e(u,{children:[e("div",{style:{display:"flex"},children:[t(l,{isChecked:x,onValueChange:e=>{C([]),y([]),j(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),x&&v.map(((o,s)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=v.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t));C(t),y(t)},state:g&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=v.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t));C(t),y(t)},state:g&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=v.filter(((e,t)=>t!=s));C(e),y(e)}})]},s))),x&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(o,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...v,{key:"",value:""}];C(e),y(e)}})]})},u=a.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/click.svg.js";import a from"../../../assets/icons/speedometer.svg.js";import{useState as l,useEffect as r,useMemo as c}from"react";import{LineChart as o}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as d}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as m}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as u,TitleSmall as h,Caption as p}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as g,LeftPanelContainer as v,RightPanelContainer as f,CustomTitleMedium as N}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as b,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const w=n=>{const{templateAnalytics:i,onClose:a,onProceed:o,onCancel:d,headingTitle:h,headingSubtitle:f,templateId:N}=n,{templateQuality:k=m.GREEN,fetchAnalytics:w}=i||{},{Icon:C,title:E,subline:j,sublineTextType:L,sublineColor:A}=b[k||m.GREEN],[R,W]=l((null==n?void 0:n.analyticsData)||{}),[B,S]=l(!0);r(()=>{(null==n?void 0:n.analyticsData)?S(!1):null==w||w(N||"").then(e=>{e.analytics&&W(e.analytics),S(!1)})},[]);const D=c(()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:o,disabled:B},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==a||a(),null==d||d()},disabled:B}}),[k,B,o,a,d]),O=L||p;return e(s,{open:!0,headingTitle:h,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==a||a()},headingSubtitle:f,footerShadow:!0,primaryButton:D.primaryButton,secondaryButton:D.secondaryButton,onClose:()=>{null==a||a()},width:"700px",children:t(g,{children:[k!==m.UNKNOWN&&e(v,{children:t("div",{className:"inside--container",children:[e("div",{className:"icon--container",style:{background:k===m.GREEN?y.background.positive.light:y.background.warning.light},children:e(C,{width:40,height:40,color:k===m.GREEN?y.content.positive:y.content.warning})}),E&&e(u,{style:{textAlign:"center"},children:E}),e(O,{style:{textAlign:"center",color:A||y.content.primary},children:j})]})}),B?e(T,{fullWidth:k===m.UNKNOWN}):e(x,{analyticsData:R,fullWidth:k===m.UNKNOWN})]})})},x=a=>{var l;const{analyticsData:r,skipTitle:c,fullWidth:o}=a;return t(f,{fullWidth:o,children:[c?e(n,{}):e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:k.map((t,n)=>e(C,{icon:t.icon,title:t.title,value:r[t.valName]||0,percentValue:t.percentValName?r[t.percentValName]:null},n))}),(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics).length?t(n,{children:[e(h,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(r.clickAnalytics).map(([t,n],a)=>e(C,{icon:i,title:t,value:n.totalClicks||0,percentValue:n.clickPercentage},a))})]}):e(n,{}),(null===(l=null==r?void 0:r.performance)||void 0===l?void 0:l.qualityTimeLine)&&r.performance.qualityTimeLine.length>0?t(n,{children:[e(h,{color:y.content.secondary,children:"Performance"}),e("div",{className:"mt-3",children:e(E,{qualityTimeLine:r.performance.qualityTimeLine})})]}):e(n,{})]})},C=i=>{const{icon:a,title:l,value:r,percentValue:c}=i;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(a,{width:"16px",height:"16px",color:y.background.brand})}),e(p,{children:l})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(d,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(N,{children:r})]})]})},E=n=>{const{qualityTimeLine:i}=n,l=i.map(e=>{switch(e){case m.GREEN:return 2;case m.YELLOW:return 1;case m.RED:return.2;default:return 0}}),r=i.map((e,t)=>`T${t+1}`),c=i.map(e=>(e=>{switch(e){case m.GREEN:return y.content.positive;case m.YELLOW:return y.content.warning;case m.RED:return y.content.negative;default:return y.content.secondary}})(e));return t("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${y.background.inactive}`},children:[t("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e("div",{className:"each--icon--container",children:e(a,{width:16,height:16,color:y.content.secondary})}),e(p,{children:"Quality timeline"})]}),e("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e(o,{datas:[{data:l,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:c}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})})]})};export{C as AnalyticsItem,E as QualityTimelineChart,x as RightPanelTemplateAnalytics,w as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/click.svg.js";import a from"../../../assets/icons/speedometer.svg.js";import{useState as l,useEffect as r,useMemo as c}from"react";import{LineChart as o}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as d}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as m}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as u,TitleSmall as h,Caption as p}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as g,LeftPanelContainer as v,RightPanelContainer as f,CustomTitleMedium as N}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as b,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const w=n=>{const{templateAnalytics:i,onClose:a,onProceed:o,onCancel:d,headingTitle:h,headingSubtitle:f,templateId:N}=n,{templateQuality:k=m.GREEN,fetchAnalytics:w}=i||{},{Icon:C,title:E,subline:j,sublineTextType:L,sublineColor:A}=b[k||m.GREEN],[R,W]=l((null==n?void 0:n.analyticsData)||{}),[B,S]=l(!0);r((()=>{(null==n?void 0:n.analyticsData)?S(!1):null==w||w(N||"").then((e=>{e.analytics&&W(e.analytics),S(!1)}))}),[]);const D=c((()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:o,disabled:B},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==a||a(),null==d||d()},disabled:B}})),[k,B,o,a,d]),O=L||p;return e(s,{open:!0,headingTitle:h,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==a||a()},headingSubtitle:f,footerShadow:!0,primaryButton:D.primaryButton,secondaryButton:D.secondaryButton,onClose:()=>{null==a||a()},width:"700px",children:t(g,{children:[k!==m.UNKNOWN&&e(v,{children:t("div",{className:"inside--container",children:[e("div",{className:"icon--container",style:{background:k===m.GREEN?y.background.positive.light:y.background.warning.light},children:e(C,{width:40,height:40,color:k===m.GREEN?y.content.positive:y.content.warning})}),E&&e(u,{style:{textAlign:"center"},children:E}),e(O,{style:{textAlign:"center",color:A||y.content.primary},children:j})]})}),B?e(T,{fullWidth:k===m.UNKNOWN}):e(x,{analyticsData:R,fullWidth:k===m.UNKNOWN})]})})},x=a=>{var l;const{analyticsData:r,skipTitle:c,fullWidth:o}=a;return t(f,{fullWidth:o,children:[c?e(n,{}):e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:k.map(((t,n)=>e(C,{icon:t.icon,title:t.title,value:r[t.valName]||0,percentValue:t.percentValName?r[t.percentValName]:null},n)))}),(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics).length?t(n,{children:[e(h,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(r.clickAnalytics).map(((t,n)=>{let[a,l]=t;return e(C,{icon:i,title:a,value:l.totalClicks||0,percentValue:l.clickPercentage},n)}))})]}):e(n,{}),(null===(l=null==r?void 0:r.performance)||void 0===l?void 0:l.qualityTimeLine)&&r.performance.qualityTimeLine.length>0?t(n,{children:[e(h,{color:y.content.secondary,children:"Performance"}),e("div",{className:"mt-3",children:e(E,{qualityTimeLine:r.performance.qualityTimeLine})})]}):e(n,{})]})},C=i=>{const{icon:a,title:l,value:r,percentValue:c}=i;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(a,{width:"16px",height:"16px",color:y.background.brand})}),e(p,{children:l})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(d,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(N,{children:r})]})]})},E=n=>{const{qualityTimeLine:i}=n,l=i.map((e=>{switch(e){case m.GREEN:return 2;case m.YELLOW:return 1;case m.RED:return.2;default:return 0}})),r=i.map(((e,t)=>`T${t+1}`)),c=i.map((e=>(e=>{switch(e){case m.GREEN:return y.content.positive;case m.YELLOW:return y.content.warning;case m.RED:return y.content.negative;default:return y.content.secondary}})(e)));return t("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${y.background.inactive}`},children:[t("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e("div",{className:"each--icon--container",children:e(a,{width:16,height:16,color:y.content.secondary})}),e(p,{children:"Quality timeline"})]}),e("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e(o,{datas:[{data:l,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:c}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})})]})};export{C as AnalyticsItem,E as QualityTimelineChart,x as RightPanelTemplateAnalytics,w as TemplateAnalyticsComponent};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as l}from"../styles/TemplateAnalyticsStyles.js";const s=s=>{const{skipTitleShimmer:d,fullWidth:m}=s;return e(l,{fullWidth:m,children:[i("div",{children:d?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map(e=>i(r,{},e))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(r,{})})]})]})},r=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{s as TemplateAnalyticsSkeleton};
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as l}from"../styles/TemplateAnalyticsStyles.js";const s=s=>{const{skipTitleShimmer:d,fullWidth:m}=s;return e(l,{fullWidth:m,children:[i("div",{children:d?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map((e=>i(r,{},e)))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(r,{})})]})]})},r=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{s as TemplateAnalyticsSkeleton};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import t from"./Header.js";const s=({channel:s,showVariableMapping:l,variableListFromProps:r,showOnlyContent:n,whatsappSpecificPickerMeta:p,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})=>e("div",{style:{paddingBottom:0},children:a("div",{children:[s===o.EMAIL&&e(t,{showOnlyContent:n}),e(i,{variableListFromProps:r,whatsappSpecificPickerMeta:p,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})]})});export{s as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import t from"./Body.js";import i from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C}=s;return e("div",{style:{paddingBottom:0},children:a("div",{children:[r===o.EMAIL&&e(i,{showOnlyContent:p}),e(t,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C})]})})};export{s as default};