@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { HEADER_TYPES } from "../../template-preview";
+import { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
+interface EditMediaModalProps {
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    openEditMedia: boolean;
+    mediaComponentFormat: HEADER_TYPES;
+    variableListForImage: VariableListInterfaceV2[];
+    uploadMedia: (urlOrVariable?: string) => void;
+    editIconRef: React.MutableRefObject<HTMLDivElement | null>;
+    fileRef: React.MutableRefObject<HTMLInputElement | null>;
+    useEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;
+    skipAddVariable?: boolean;
+}
+declare const EditMediaModal: React.FC<EditMediaModalProps>;
+export default EditMediaModal;

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
+export interface EditMediaV2Props {
+    imageName: string[];
+    selectedVariable?: string;
+    errorSecondaryText?: string;
+    error?: string;
+    isLoading?: boolean;
+    mediaType?: HEADER_TYPES;
+    handleImageChange?: () => void;
+    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditMediaV2;

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

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

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

@@ -0,0 +1,6 @@
+export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    error: boolean;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,10 @@
+import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWebpushTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WebpushTemplateType;
+    onTemplateChange?: (template: WebpushTemplateType) => void;
+    showVariableModal?: boolean;
+}
+declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWebpushTemplate;

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWhatsAppTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppTemplate | WhatsAppCarouselTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
+    showVariableModal?: boolean;
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+}
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppTemplateV2;

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

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

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

@@ -0,0 +1,8 @@
+export interface FooterProps {
+    isWhatsappCarousel: boolean;
+    onSelect: () => void;
+    footerButtonText?: string;
+    footerInfoText?: string;
+}
+declare const Footer: ({ isWhatsappCarousel, onSelect, footerButtonText, footerInfoText, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

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

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

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

@@ -0,0 +1,5 @@
+export interface HeaderProps {
+    showOnlyContent?: boolean;
+}
+declare const Header: ({ showOnlyContent }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { AllTemplateTypes } from "../../template-preview/models/types";
+declare const MobilePreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+    template: AllTemplateTypes;
+    showSampleValues?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default MobilePreview;

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

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

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

@@ -0,0 +1,8 @@
+interface ProductBoxProps {
+    cardBody: string;
+    deleteItem: any;
+    editItem?: any;
+    hideIcon?: boolean;
+}
+export declare const ProductBox: (props: ProductBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TEMPLATE_QUALITY } from "../../template-preview";
+interface QualityWarningModalProps {
+    quality: TEMPLATE_QUALITY;
+    onClose?: () => void;
+    onProceed?: () => void;
+    onCancel?: () => void;
+    headingTitle?: string;
+    headingSubtitle?: string;
+}
+declare const QualityWarningModal: React.FC<QualityWarningModalProps>;
+export default QualityWarningModal;

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

@@ -0,0 +1,12 @@
+export declare const QueryParamsComponent: (props: {
+    params: {
+        key: string;
+        value: string;
+    }[];
+    onChange: (params: {
+        key: string;
+        value: string;
+    }[]) => void;
+    isError: boolean;
+    variableValue?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;