@bikdotai/bik-component-library 0.0.734-beta.3 → 0.0.734

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

@@ -1,9 +1,9 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import o from"../../../assets/icons/broken_media_image.svg.js";import r from"../../../assets/icons/document_pdf.svg.js";import s from"../../../assets/icons/edit.svg.js";import n from"../../../assets/icons/refresh.svg.js";import l from"styled-components";import{ShimmerImage as a}from"../../shimmer-image/ShimmerImage.js";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as c}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as m,BodySecondary as p,Caption as g}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as f}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{Container as j,ImageContainer as y,RightComponent as u}from"./EditMediaV2.style.js";const v=l.div`
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import i from"../../../assets/icons/broken_media_image.svg.js";import t from"../../../assets/icons/document_pdf.svg.js";import s from"../../../assets/icons/edit.svg.js";import o from"../../../assets/icons/refresh.svg.js";import r from"styled-components";import{ShimmerImage as n}from"../../shimmer-image/ShimmerImage.js";import{Spinner as l}from"../../spinner/Spinner.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as d,BodySecondary as m,Caption as c}from"../../TypographyStyle.js";import p from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{useTemplateModalContext as h}from"../context/templateModalContext.js";import{Container as j,ImageContainer as f,RightComponent as x}from"./EditMediaV2.style.js";const b=r.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	height: 100%;
-	border-left: 1px solid ${f.stroke.primary};
+	border-left: 1px solid ${g.stroke.primary};
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-`,x=l=>{const{imageName:x,error:w,isLoading:O,mediaType:k,selectedVariable:L,setOpenEditMedia:C}=l,E=null==x?void 0:x[0].split("/"),M=null==E?void 0:E[E.length-1],{disableEditVariable:S}=b();return e(j,{children:[i(y,Object.assign({error:!!w,onClick:()=>null==C?void 0:C(!0)},{children:w?i(o,{width:56,height:56}):O?i(d,{size:"small"}):L?i(a,{imageUrl:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",width:56,height:56}):k===c.IMAGE?i(a,{imageUrl:null==x?void 0:x[0],width:56,height:56}):k===c.VIDEO?i("video",Object.assign({src:x[0],style:{width:56,height:56}},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:x[0]})})):i(r,{width:18,height:22,color:f.content.placeholder})})),e(u,{children:[i("div",Object.assign({style:{flex:w?"unset":1}},{children:x&&w?i(t,{}):O?i(m,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):i(p,Object.assign({style:{color:f.content.primary,marginLeft:8}},{children:L||h.toCapitilize(null==k?void 0:k.toLowerCase())||M}))})),!!w&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"}},{children:[e(p,Object.assign({style:{color:f.content.negative}},{children:["Error loading this ",null==k?void 0:k.toLowerCase(),". Retry"]})),i(g,Object.assign({style:{color:f.content.secondary}},{children:w}))]}))]}),!S&&!O&&i(v,Object.assign({onClick:()=>null==C?void 0:C(!0),onKeyDown:()=>null==C?void 0:C(!0),role:"presentation"},{children:w?i(n,{color:f.content.brand,width:24,height:24}):i(s,{width:24,height:24,color:f.content.placeholder})}))]})};export{x as default};
+`,y=r=>{const{imageName:y,error:u,isLoading:v,mediaType:w,selectedVariable:O,setOpenEditMedia:k}=r,L=null==y?void 0:y[0].split("/"),C=null==L?void 0:L[L.length-1],{disableEditVariable:E}=h();return e.jsxs(j,{children:[e.jsx(f,Object.assign({error:!!u,onClick:()=>null==k?void 0:k(!0)},{children:u?e.jsx(i,{width:56,height:56}):v?e.jsx(l,{size:"small"}):O?e.jsx(n,{imageUrl:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",width:56,height:56}):w===a.IMAGE?e.jsx(n,{imageUrl:null==y?void 0:y[0],width:56,height:56}):w===a.VIDEO?e.jsx("video",Object.assign({src:y[0],style:{width:56,height:56}},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:y[0]})})):e.jsx(t,{width:18,height:22,color:g.content.placeholder})})),e.jsxs(x,{children:[e.jsx("div",Object.assign({style:{flex:u?"unset":1}},{children:y&&u?e.jsx(e.Fragment,{}):v?e.jsx(d,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:O||p.toCapitilize(null==w?void 0:w.toLowerCase())||C}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"}},{children:[e.jsxs(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),e.jsx(c,Object.assign({style:{color:g.content.secondary}},{children:u}))]}))]}),!E&&!v&&e.jsx(b,Object.assign({onClick:()=>null==k?void 0:k(!0),onKeyDown:()=>null==k?void 0:k(!0),role:"presentation"},{children:u?e.jsx(o,{color:g.content.brand,width:24,height:24}):e.jsx(s,{width:24,height:24,color:g.content.placeholder})}))]})};export{y as default};

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

@@ -1,5 +1,5 @@
-import { type WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
-import type { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface EditWebpushTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WebpushTemplateType;

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

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

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

@@ -1,6 +1,6 @@
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import type { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { type WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { WhatsAppPickerMeta } from "../../template-preview";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
 export interface EditWhatsAppCarouselTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppCarouselTemplate;
@@ -9,5 +9,16 @@ export interface EditWhatsAppCarouselTemplateV2Props {
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
 }
+export interface CarouselProduct {
+    name: string;
+    image: string;
+    quantity: number;
+    variantId: string;
+    productId: string;
+    displayOrder: number;
+    collectionId: string;
+    productName: string;
+    productImage: string;
+}
 declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppCarouselTemplateV2;

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

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

@@ -1,8 +1,8 @@
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import type { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
-import type { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
-import type { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { type WhatsAppPickerMeta, type WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 export interface EditWhatsAppTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppTemplate | WhatsAppCarouselTemplate;

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

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

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import{useState as r,useEffect as i}from"react";import n from"styled-components";import{Button as l}from"../../button/Button.js";import{Tag as s}from"../../tag/Tag.js";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";import{isRCSChannel as d}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as p}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{Badge as c}from"../Badge/index.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";const x=n.div`
-	background: ${m.surface.standard};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/info.svg.js";import{useState as o,useEffect as r}from"react";import s from"styled-components";import{Button as i}from"../../button/Button.js";import{Tag as l}from"../../tag/Tag.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as p}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 a}from"../../template-preview/models/Channels.js";import{isRCSChannel as n}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as m}from"../../TypographyStyle.js";import{Badge as d}from"../Badge/index.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";const u=s.div`
+	background: ${p.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${m.stroke.primary};
+	border-top-color: ${p.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 0 24px;
@@ -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;
-`,g=n=>{let{isWhatsappCarousel:g,onSelect:f,footerButtonText:h,footerInfoText:b}=n;var v,j,y,C;const{isError:T,selectedCarouselIndex:S,setSelectedCarouselIndex:w,setErrorIndexes:I,template:k,showVariablePicker:$,hideFooterButton:B}=u(),[O,P]=r(g?"Next":"Select template");return i((()=>{h?P(h):g&&-1===S?P("Next"):g&&null!=S&&S>-1&&P("Save & Select Template")}),[S]),e(x,Object.assign({isWhatsappCarousel:g,justifyContent:g&&(null===(j=null===(v=null==k?void 0:k.mapping)||void 0===v?void 0:v.body)||void 0===j?void 0:j.length)?"space-between":"end"},{children:[d((null==k?void 0:k.channel)||a.WHATSAPP)?t(p,{}):g&&null!=S&&S>=-1&&!!(null===(C=null===(y=null==k?void 0:k.mapping)||void 0===y?void 0:y.body)||void 0===C?void 0:C.length)&&t(p,Object.assign({color:m.text.secondary},{children:`Step ${-1===S?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[T&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!T&&b&&t("div",Object.assign({style:{marginRight:12}},{children:t(s,{tagText:b,LeadingIcon:o})})),!B&&t(l,{disabled:$,id:"select-template-btn",buttonText:O,size:g?"small":"large",onClick:function(){g&&-1===S&&w?w(0):(null==I||I([]),f())}})]}))]}))};export{g as default};
+`,x=s=>{let{isWhatsappCarousel:x,onSelect:j,footerButtonText:v,footerInfoText:h}=s;var g,f,b,w;const{isError:y,selectedCarouselIndex:T,setSelectedCarouselIndex:C,setErrorIndexes:S,template:W,showVariablePicker:k,hideFooterButton:A}=c(),[P,I]=o(x?"Next":"Select template");return r((()=>{v?I(v):x&&-1===T?I("Next"):x&&null!=T&&T>-1&&I("Save & Select Template")}),[T]),e.jsxs(u,Object.assign({isWhatsappCarousel:x,justifyContent:x&&(null===(f=null===(g=null==W?void 0:W.mapping)||void 0===g?void 0:g.body)||void 0===f?void 0:f.length)?"space-between":"end"},{children:[n((null==W?void 0:W.channel)||a.WHATSAPP)?e.jsx(m,{}):x&&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)&&e.jsx(m,Object.assign({color:p.text.secondary},{children:`Step ${-1===T?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[y&&e.jsx(d,{errorText:"Some inputs are missing or incorrect. Please check"}),!y&&h&&e.jsx("div",Object.assign({style:{marginRight:12}},{children:e.jsx(l,{tagText:h,LeadingIcon:t})})),!A&&e.jsx(i,{disabled:k,id:"select-template-btn",buttonText:P,size:x?"small":"large",onClick:function(){x&&-1===T&&C?C(0):(null==S||S([]),j())}})]}))]}))};export{x as default};

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

@@ -1,23 +1,23 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import o from"../../../assets/icons/desktop_custom.svg.js";import t from"../../../assets/icons/mobile_custom.svg.js";import n from"styled-components";import{BodyPrimary as s}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";const d=n.div`
 	padding-top: 12px;
 	padding-bottom: 12px;
 	padding-left: 30px;
 	padding-right: 30px;
-	background-color: ${s.surface.subdued};
+	background-color: ${i.surface.subdued};
 	align-items: center;
 	display: flex;
 	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
-`,a=i.div`
+`,c=n.div`
 	display: flex;
-	border: 1px solid ${s.stroke.primary};
+	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
 	overflow: hidden;
 	width: min-content;
-`,l=i.div`
-	background: ${e=>e.active?s.background.brandLight:s.background.base};
+`,a=n.div`
+	background: ${e=>e.active?i.background.brandLight:i.background.base};
 	padding: 6px 8px;
 	justify-content: center;
 	align-items: center;
-`,p=i(l)`
-	border-left: 1px solid ${s.stroke.primary};
-`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};
+`,l=n(a)`
+	border-left: 1px solid ${i.stroke.primary};
+`,p=n=>{let{showOnlyContent:p}=n;const{device:m,setDevice:b}=r();return e.jsxs(d,Object.assign({showOnlyContent:p},{children:[e.jsxs(c,{children:[e.jsx(a,Object.assign({active:"mobile"===m,onClick:()=>null==b?void 0:b("mobile")},{children:e.jsx(t,{color:"mobile"===m?i.content.brand:i.content.secondary,height:20,width:20})})),e.jsx(l,Object.assign({active:"desktop"===m,onClick:()=>null==b?void 0:b("desktop")},{children:e.jsx(o,{color:"desktop"===m?i.content.brand:i.content.secondary,height:20,width:20})}))]}),e.jsxs(s,Object.assign({style:{color:i.content.primary,marginLeft:16}},{children:["mobile"===m?"Mobile":"Web"," view"]}))]}))};export{p as default};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import type { AllTemplateTypes } from "../../template-preview/models/types";
+import { AllTemplateTypes } from "../../template-preview/models/types";
 declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;

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

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

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

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleSmall as l}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";const d=s.div`
+import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../../../assets/icons/box.svg.js";import o from"../../../assets/icons/delete.svg.js";import s from"../../../assets/icons/edit.svg.js";import i from"styled-components";import{IconButton as n}from"../../icon-button/IconButton.js";import{TitleSmall as r}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const c=i.div`
 	width: ${t=>t.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
 			color: #000000;
 		}
 	}
-`,a=s=>{const{cardBody:a,deleteItem:f,editItem:p,hideIcon:m}=s;return t(d,Object.assign({width:"100%"},{children:[!m&&e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,Object.assign({color:c.content.secondary},{children:a}))})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[p&&e(r,{style:{display:"flex"},Icon:()=>e(n,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{p(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:()=>e(i,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{a as ProductBox};
+`,d=i=>{const{cardBody:d,deleteItem:a,editItem:f,hideIcon:p}=i;return t.jsxs(c,Object.assign({width:"100%"},{children:[!p&&t.jsx("div",Object.assign({style:{width:36,height:36}},{children:t.jsx(e,{})})),t.jsx("div",Object.assign({className:"card-body"},{children:t.jsx(r,Object.assign({color:l.content.secondary},{children:d}))})),t.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[f&&t.jsx(n,{style:{display:"flex"},Icon:()=>t.jsx(s,{width:24,height:24,color:l.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}}),t.jsx(n,{style:{display:"flex",color:"#919191"},Icon:()=>t.jsx(o,{width:24,height:24,color:l.content.placeholder}),onClick:t=>{a(),t.stopPropagation()}})]}))]}))};export{d as ProductBox};

package/dist/esm/components/template-context-mapper/modalElements/QualityWarningModal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TEMPLATE_QUALITY } from "../../template-preview/models/WhatsAppTemplate";
+import { TEMPLATE_QUALITY } from "../../template-preview";
 interface QualityWarningModalProps {
     quality: TEMPLATE_QUALITY;
     onClose?: () => void;

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

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

@@ -1,4 +1,4 @@
-import { TEMPLATE_QUALITY, type TemplateAnalyticsComponentI, type TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
+import { TEMPLATE_QUALITY, TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
 export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
 export declare const RightPanelTemplateAnalytics: (props: {
     analyticsData: TemplateAnalyticsDataI;

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

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

@@ -1,6 +1,6 @@
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import type { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface TemplateSelectModalContentProps {
     channel: CHANNEL_TYPE;
     showVariableMapping?: boolean;

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

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts

@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
 import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
 import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
-import { ComponentType } from './modal';
+import { ComponentType } from './VariableConnectorWhatsApp';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;