@bikdotai/bik-component-library 0.0.734-beta.0 → 0.0.734-beta.1

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

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

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

@@ -1,20 +1,20 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"react";import r from"styled-components";import{Spinner as i}from"../../spinner/Spinner.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as s}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 o}from"../../template-preview/models/Channels.js";const a=r.div`
-	background: ${s.surface.standard};
-	border: 1px solid ${s.stroke.primary};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import r from"react";import t from"styled-components";import{Spinner as i}from"../../spinner/Spinner.js";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";const d=t.div`
+	background: ${a.surface.standard};
+	border: 1px solid ${a.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,m=r.div`
+`,p=t.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${s.stroke.primary};
-`,l=r.div`
+	border-bottom-color: ${a.stroke.primary};
+`,l=t.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,d=t.forwardRef(((t,r)=>{let{display_content:s,showSampleValues:d}=t;return e.jsxs(a,Object.assign({ref:r},{children:[e.jsxs(m,{children:[e.jsx(l,{}),e.jsx(l,{}),e.jsx(l,{})]}),e.jsx("div",{children:s?e.jsx(p,{showSampleValues:d,channel:o.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i,{size:"small"})}))})]}))}));d.displayName="DesktopPreview";export{d as default};
+`,m=r.forwardRef(((r,t)=>{let{display_content:a,showSampleValues:m}=r;return e.jsxs(d,Object.assign({ref:t},{children:[e.jsxs(p,{children:[e.jsx(l,{}),e.jsx(l,{}),e.jsx(l,{})]}),e.jsx("div",{children:a?e.jsx(o,{showSampleValues:m,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:a,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i,{size:"small"})}))})]}))}));m.displayName="DesktopPreview";export{m as default};

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { VariableListInterfaceV2 } from "../../add-variableV2";
-import { HEADER_TYPES } from "../../template-preview";
-import { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
+import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
+import type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
 interface EditMediaModalProps {
     setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
     openEditMedia: boolean;

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

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

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

@@ -1,5 +1,5 @@
-import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
-import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+import { type WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
+import type { 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{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};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../node_modules/lodash/cloneDeep.js";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:_,titleVariables:K}=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==_?void 0:_.length)||(null==K?void 0:K.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 { VariableListInterfaceV2 } from "../../add-variableV2";
-import { WhatsAppPickerMeta } from "../../template-preview";
-import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import type { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+import { type WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface EditWhatsAppCarouselTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppCarouselTemplate;
@@ -9,16 +9,5 @@ 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{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};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{ApplicationType as l}from"@bikdotai/bik-models/growth/models/bik-store";import t from"../../../assets/icons/arrow_back.svg.js";import o from"../../../assets/icons/chevronLeft.svg.js";import n from"../../../assets/icons/chevronRight.svg.js";import i from"../../../assets/icons/PlusIcon.js";import s from"../../../node_modules/lodash/cloneDeep.js";import{useState as r,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 m}from"../../product-picker-v2/type.js";import{Badge as p}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{isRCSChannel as f}from"../../template-preview/helpers/templateMiscHelper.js";import{POD as y}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as x,TitleRegular as j,BodySecondary as b,BodyCaption as C}from"../../TypographyStyle.js";import{COLORS as I}from"../../../constants/Theme.js";const k=k=>{let{template:O,whatsappSpecificPickerMeta:w,showVariableModal:P,variableListForImage:T,discountCode:S,setDiscountCode:B}=k;var E,L,F,D,M,R,V,$;const{selectedCarouselIndex:q,setTemplate:A,pickerConf:_,isProductCarouselType:N,pod:W,cardCount:z,carouselProducts:G,setCarouselProducts:H,isError:K,cardImages:J,disableEditVariable:Q,onDeleteSelectedProducts:U,setSelectedCarouselIndex:X,setVariableCallback:Y,setShowVariablePicker:Z,sliderRef:ee}=v(),[le,te]=r(f(null==O?void 0:O.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":N?"Product Carousel "+((null===(L=null===(E=null==O?void 0:O.mapping)||void 0===E?void 0:E.body)||void 0===L?void 0:L.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(F=null==O?void 0:O.mapping)||void 0===F?void 0:F.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[oe,ne]=r(!1),[ie,se]=r(!1),re=q===(null!=z?z:-1)-1,ae=(null!=q?q:-1)<1;a((()=>{var e,l,t,o;te(f(null==O?void 0:O.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":N?"Product Carousel "+((null===(l=null===(e=null==O?void 0:O.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==O?void 0:O.mapping)||void 0===t?void 0:t.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[q]);const de=e=>{null==H||H([{name:"variable",productName:e.actualValue}])};return a((()=>{-1===q&&f(null==O?void 0:O.channel)&&(null==X||X(0))}),[q,null==O?void 0:O.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:[!f(null==O?void 0:O.channel)&&null!=q&&q>=0&&!!(null===(R=null===(M=null==O?void 0:O.mapping)||void 0===M?void 0:M.body)||void 0===R?void 0:R.length)&&e.jsx(c,{Icon:t,onClick:()=>{null==X||X(-1)}}),e.jsx(x,Object.assign({style:{marginLeft:10}},{children:le}))]})),N&&(null!==(V=null==G?void 0:G.length)&&void 0!==V?V:0)>0&&null!=q&&q>=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)):ne(!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 l=s(Object.assign({},O));l&&(J&&J.length>0?null==J||J.forEach(((e,t)=>{var o;l.components[1].cards[t].components[0].example.header_handle=[null!==(o=J[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==A||A(l)),null==H||H([]),null==U||U()}}),G&&(null==G?void 0:G.length)>0&&"variable"!=G[0].name&&e.jsx(d,{disabled:(null!==($=null==G?void 0:G.length)&&void 0!==$?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{se(!0),ne(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!Q&&N&&0===(null==G?void 0:G.length)&&null!=q&&q>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(j,{children:"Product(s)"}),e.jsx(b,{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 ${I.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(i,{width:18,height:18,color:I.content.secondary})})),onClick:e=>{ne(!0)}}),W===y.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(C,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 ${I.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(i,{width:18,height:18,color:I.content.secondary})})),onClick:e=>{Y((()=>de)),Z(!0)}})]})]})),K&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(p,{padding:"8px",errorText:"Please add products"})}))]}),!N&&(null!=q?q:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:I.surface.hovered,alignItems:"center"}},{children:[e.jsx(c,{Icon:o,disabled:ae,width:8,height:14,svgStyle:ae?{}:{color:I.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickPrev(),(null!=q?q:-1)<1||null==X||X((e=>e-1))}}),e.jsx(j,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:I.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${z}`})),e.jsx(c,{Icon:n,width:8,height:14,disabled:re,svgStyle:re?{}:{color:I.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickNext(),(null!=q?q:-1)>=(null!=z?z:-1)-1||null==X||X((e=>e+1))}})]})),e.jsx(h,{whatsappSpecificPickerMeta:w,template:O,onTemplateChange:e=>{null==A||A(e)},showVariableModal:P,variableListForImage:T,discountCode:S,setDiscountCode:B}),oe&&_&&e.jsx(u,{zIndex:200,startupScreen:ie?m.RearrangeProducts:m.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!=G?G:[]),collectionFetcher:_.fetchCollections,productFetcher:_.fetchProducts,onAdd:(e,l)=>{var t,o,n,i,r,a;se(!1);const d=[];delete e.isCustom;for(const l of Object.keys(e)){const s=e[l].products;if(void 0!==s&&Object.keys(s).length)for(const e of Object.keys(s)){const c=s[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:m,image:p,quantity:v,displayOrder:h}=c[u],g={name:m,image:null!==(o=null!=p?p:null===(t=s[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=s[e])||void 0===n?void 0:n.name)&&void 0!==i?i:"",productImage:null!==(a=null===(r=s[e])||void 0===r?void 0:r.image)&&void 0!==a?a:""};d.push(g)}}}const c=d.sort(((e,l)=>e.displayOrder-l.displayOrder)),u=d.map((e=>e.image)),m=s(Object.assign({},O));m&&(u.forEach(((e,l)=>{var t;m.components[1].cards[l].components[0].example.header_handle=e?[e]:[null!==(t=null==J?void 0:J[l])&&void 0!==t?t:""]})),null==A||A(m)),null==H||H(c),ne(!1)},searchInCollectionFetcher:_.searchInCollection,searchFetcher:_.searchProducts,visible:oe,onClose:()=>{ne(!1)},exactLimit:null!=z?z:1,appType:_.appType||l.BIK})]}))};export{k as default};

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

@@ -1,8 +1,8 @@
-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";
+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";
 export interface EditWhatsAppTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppTemplate | WhatsAppCarouselTemplate;

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

@@ -1,4 +1,4 @@
-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`
+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 n from"../../../node_modules/lodash/cloneDeep.js";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 m}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as v,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:D,setDiscountCode:H,fileName:N,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,me,ve,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}=m(),{descriptionComponents:Ue,urlBtns:Pe,qrbBtns:De,imageComponent:He,bodyVariables:Ne,headerVariables:Ae,titleVariables:_e}=g(w),Fe=t(null),[qe,Qe]=i(!1),[Se,Ye]=i(-1===ke?{descriptionComponents:Ue,urlBtns:Pe,qrbBtns:De,imageComponent:He,bodyVariables:Ne,headerVariables:Ae,titleVariables:_e}:{}),{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:He,fileRef:Fe}),[Xe,ze]=i(!1),[Je,Ze]=i(N),[eo,oo]=i();function no(e,o,t){var i,l,a,s,d,r,u,c,m,v;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===(m=g.mapping)||void 0===m?void 0:m.buttons;p&&p.length>0&&(p[t]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=Object.assign(Object.assign({},g.mapping),{buttons:p});g.mapping=v;const b=[...g.components];b[j]=d,g.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Qe(!0):(Qe(!1),null==H||H(""))}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 m=null==c?void 0:c.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==m&&m>-1){const o=null===(s=null===(a=null==c?void 0:c.components[m])||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[m])||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[m]),{buttons:i}),a=[...c.components];a[m]=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(!N)return void oo("PDF name is Required");const e=j(N);null==A||A(null!=N?N:""),oo(e?"Please enter a valid PDF name":void 0)})()}),[Le]);const io=Ve?Se.imageComponent:He;return Ge.openEditMedia?e.jsx(B,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(O,{mediaComponentFormat:null!==(_=io.format)&&void 0!==_?_:u.IMAGE,uploadMedia:Ge.uploadMedia,variableListForImage:D||[],useEditWhatsappTemplateMediaResponse:Ge,setOpenEditMedia:Ge.setOpenEditMedia,openEditMedia:Ge.openEditMedia,editIconRef:Ge.editIconRef,fileRef:Fe})})):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===(F=null==io?void 0:io.example)||void 0===F?void 0:F.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==He?void 0:He.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!=N?N:"",variableType:"string"},variablesList:D,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===v,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=De[0])||void 0===ae?void 0:ae.component)||void 0===se?void 0:se.buttons)&&(null===(pe=null===(re=null===(de=De[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===(ve=null!=ke&&ke>-1?null===(me=Ee.cards[ke])||void 0===me?void 0:me.buttons:null==Ee?void 0:Ee.buttons)||void 0===ve?void 0:ve.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;

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

@@ -1,4 +1,4 @@
-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`
+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 n}from"../../tag/Tag.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{isRCSChannel as a}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as d}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{Badge as m}from"../Badge/index.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";const x=s.div`
 	background: ${p.surface.standard};
 	border-top-width: 1px;
 	border-top-color: ${p.stroke.primary};
@@ -12,4 +12,4 @@ import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,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};
+`,u=s=>{let{isWhatsappCarousel:u,onSelect:g,footerButtonText:j,footerInfoText:f}=s;var h,b,v,y;const{isError:C,selectedCarouselIndex:T,setSelectedCarouselIndex:S,setErrorIndexes:w,template:I,showVariablePicker:k,hideFooterButton:$}=c(),[B,O]=o(u?"Next":"Select template");return r((()=>{j?O(j):u&&-1===T?O("Next"):u&&null!=T&&T>-1&&O("Save & Select Template")}),[T]),e.jsxs(x,Object.assign({isWhatsappCarousel:u,justifyContent:u&&(null===(b=null===(h=null==I?void 0:I.mapping)||void 0===h?void 0:h.body)||void 0===b?void 0:b.length)?"space-between":"end"},{children:[a((null==I?void 0:I.channel)||l.WHATSAPP)?e.jsx(d,{}):u&&null!=T&&T>=-1&&!!(null===(y=null===(v=null==I?void 0:I.mapping)||void 0===v?void 0:v.body)||void 0===y?void 0:y.length)&&e.jsx(d,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:[C&&e.jsx(m,{errorText:"Some inputs are missing or incorrect. Please check"}),!C&&f&&e.jsx("div",Object.assign({style:{marginRight:12}},{children:e.jsx(n,{tagText:f,LeadingIcon:t})})),!$&&e.jsx(i,{disabled:k,id:"select-template-btn",buttonText:B,size:u?"small":"large",onClick:function(){u&&-1===T&&S?S(0):(null==w||w([]),g())}})]}))]}))};export{u 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 { AllTemplateTypes } from "../../template-preview/models/types";
+import type { 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,12 +1,12 @@
-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`
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"react";import i from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=i.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>p(e.channel)}px;
+	width: ${e=>l(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,n=i.div`
+`,p=i.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,7 @@ import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"rea
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,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`
+`,m=t.forwardRef(((t,i)=>{let{display_content:m,channel:d,template:h,showSampleValues:f}=t;const{pod:b,hideDeviceContainerInPreview:g}=r(),w={showSampleValues:f,template:h,channel:d,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==s.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:d==a.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 g?e.jsx(c,{children:e.jsx(o,Object.assign({},w))}):e.jsx(e.Fragment,{children:e.jsxs(n,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:l(d),height:443}}),e.jsx(p,Object.assign({ref:i},{children:e.jsx(o,Object.assign({},w))}))]}))})}));m.displayName="MobilePreview";const c=i.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

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

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

@@ -1,4 +1,4 @@
-import { TEMPLATE_QUALITY, TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
+import { TEMPLATE_QUALITY, type TemplateAnalyticsComponentI, type 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/TemplateSelectModalContent.d.ts

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

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 './VariableConnectorWhatsApp';
+import { ComponentType } from './modal';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;

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

@@ -1,4 +1,4 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/edit.svg.js";import l from"../../../assets/icons/info.svg.js";import{format as i}from"date-fns";import{cloneDeep as a}from"lodash";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{Alert as d}from"../../alerts/Alert.js";import{ALERT_TYPES as u}from"../../alerts/AlertHelper.js";import{CustomDateTime as r}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as c}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as b}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as g}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as j}from"../../template-preview/models/WebpushTemplate.js";import{POD as O,BUTTON_TYPE as x}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as y,BodyPrimary as h}from"../../TypographyStyle.js";import f from"../../../utils/StringUtils.js";import{COLORS as T}from"../../../constants/Theme.js";import{useTemplateModalContext as _}from"../context/templateModalContext.js";import{updateVariables as E}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as C}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as V}from"./QueryParamsComponent.js";const S=s.div`
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/edit.svg.js";import l from"../../../assets/icons/info.svg.js";import{format as i}from"date-fns";import a from"../../../node_modules/lodash/cloneDeep.js";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{Alert as d}from"../../alerts/Alert.js";import{ALERT_TYPES as u}from"../../alerts/AlertHelper.js";import{CustomDateTime as r}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as c}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as b}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as g}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as j}from"../../template-preview/models/WebpushTemplate.js";import{POD as O,BUTTON_TYPE as x}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as y,BodyPrimary as h}from"../../TypographyStyle.js";import f from"../../../utils/StringUtils.js";import{COLORS as T}from"../../../constants/Theme.js";import{useTemplateModalContext as _}from"../context/templateModalContext.js";import{updateVariables as E}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as C}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as V}from"./QueryParamsComponent.js";const S=s.div`
 	/* surface/$color-background-warning-light */
 
 	background: ${e=>e.focused&&e.channel===g.EMAIL?T.background.warning.light:"transparent"};

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

@@ -1,7 +1,8 @@
-import { AllTemplateVariables, CHANNEL_TYPE } from "../../template-preview";
-import { WEB_PUSH_COMPONENT_TYPE, WebpushComponentKeyType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
-import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
-export type ComponentType = WhatsAppTemplate['components'][0];
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import type { AllTemplateVariables } from "../../template-preview/models/types";
+import { WEB_PUSH_COMPONENT_TYPE, type WebpushComponentKeyType, type WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import type { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { ComponentType } from './modal';
 export interface VariableConnectorWhatsAppProps {
     originalVariableList: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
     descriptionComponent: ComponentType | WebpushComponentKeyType;

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Input as i}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as t}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{BodySecondary as l}from"../../TypographyStyle.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import o from"./VariableConnector.js";const s=s=>{var n,p,d,m,v,c,x;const{descriptionComponent:j,type:b,showVariableModal:u,originalList:h,channel:f}=s,{originalVariableList:y,disableEditVariable:T,selectedCarouselIndex:w,initialExpiryDateTime:E}=r();let g=y;f&&(f==a.WHATSAPP||f==a.RCS)&&h&&(g=h);const C=j.type;if("BODY"===C||"TITLE"===C.toLocaleUpperCase())return e.jsx("div",{children:null===(p=null!=w&&w>-1?"TITLE"===C.toLocaleUpperCase()?null===(n=g.cards[w])||void 0===n?void 0:n.title:g.cards[w].body:"TITLE"===C.toLocaleUpperCase()?(a.RCS,null==g?void 0:g.title):null==g?void 0:g.body)||void 0===p?void 0:p.map(((a,r)=>T||!a.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l,Object.assign({style:{color:t.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",r+1]})),e.jsx(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),r):e.jsx(o,{index:r,variable:a,showVariableModal:u,componentType:C},`${r}-${a.index}`)))});if("HEADER"===C)return e.jsx("div",{children:null===(d=null!=w&&w>-1?g.cards[w].header:null==g?void 0:g.header)||void 0===d?void 0:d.map(((a,r)=>a.isEditableVariable?e.jsx(o,{index:r,variable:a,showVariableModal:u,componentType:C},`${r}-${a.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l,Object.assign({style:{color:t.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",r+1]})),e.jsx(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),r)))});if("limited_time_offer"===C){let i=null!==(v=null===(m=j.example)||void 0===m?void 0:m.limited_time_offer)&&void 0!==v?v:(new Date).toISOString();return E&&(i=new Date(E).toISOString()),e.jsx("div",{children:e.jsx(o,{index:0,variable:{variableName:null!==(x=null===(c=null==j?void 0:j.limited_time_offer)||void 0===c?void 0:c.text)&&void 0!==x?x:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:u,componentType:C},`${C}`)})}return e.jsx(e.Fragment,{})};export{s as default};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Input as i}from"../../input/Input.js";import{CHANNEL_TYPE as a}from"../../template-preview/models/Channels.js";import{BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as t}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import r from"./VariableConnector.js";const n=n=>{var d,s,p,m,c,x,v;const{descriptionComponent:b,type:j,showVariableModal:u,originalList:h,channel:f}=n,{originalVariableList:y,disableEditVariable:E,selectedCarouselIndex:T,initialExpiryDateTime:g}=o();let C=y;f&&(f==a.WHATSAPP||f==a.RCS)&&h&&(C=h);const V=b.type;if("BODY"===V||"TITLE"===V.toLocaleUpperCase())return e.jsx("div",{children:null===(s=null!=T&&T>-1?"TITLE"===V.toLocaleUpperCase()?null===(d=C.cards[T])||void 0===d?void 0:d.title:C.cards[T].body:"TITLE"===V.toLocaleUpperCase()?(a.RCS,null==C?void 0:C.title):null==C?void 0:C.body)||void 0===s?void 0:s.map(((a,o)=>E||!a.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l,Object.assign({style:{color:t.content.primary}},{children:["HEADER"===j?"Header":""," Locked variable ",o+1]})),e.jsx(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o):e.jsx(r,{index:o,variable:a,showVariableModal:u,componentType:V},`${o}-${a.index}`)))});if("HEADER"===V)return e.jsx("div",{children:null===(p=null!=T&&T>-1?C.cards[T].header:null==C?void 0:C.header)||void 0===p?void 0:p.map(((a,o)=>a.isEditableVariable?e.jsx(r,{index:o,variable:a,showVariableModal:u,componentType:V},`${o}-${a.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(l,Object.assign({style:{color:t.content.primary}},{children:["HEADER"===j?"Header":""," Locked variable ",o+1]})),e.jsx(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o)))});if("limited_time_offer"===V){let i=null!==(c=null===(m=b.example)||void 0===m?void 0:m.limited_time_offer)&&void 0!==c?c:(new Date).toISOString();return g&&(i=new Date(g).toISOString()),e.jsx("div",{children:e.jsx(r,{index:0,variable:{variableName:null!==(v=null===(x=null==b?void 0:b.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==v?v:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:u,componentType:V},`${V}`)})}return e.jsx(e.Fragment,{})};export{n as default};

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 export interface VariableEditorHeaderProps {
     headerText: string;
     subText: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
-import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
-import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+import { type CTABtnValType, type QRBBtnValType, type TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
+import type { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export interface WhatsAppTemplateCardButtonV2Props {