@bikdotai/bik-component-library 0.0.50 → 0.0.51--beta.ai-1

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

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

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

@@ -0,0 +1,6 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+export declare const DiscountCodeComponent: (props: {
+    discountCode?: string | undefined;
+    setDiscountCode?: ((code: string) => void) | undefined;
+    variableList?: VariableListInterfaceV2[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { HEADER_TYPES } from "../../template-preview";
+import { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
+declare const EditMediaModal: React.FC<{
+    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;
+}>;
+export default EditMediaModal;

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

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

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

@@ -2,11 +2,13 @@
 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) => JSX.Element;
+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,8 +1,9 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
+import{jsxs as e,jsx as i,Fragment as t}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 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 j}from"../context/templateModalContext.js";import{Container as y,ImageContainer as u,RightComponent as v}from"./EditMediaV2.style.js";const b=l.div`
 	padding-left: 14px;
 	padding-right: 6px;
-	width: 44px;
-	height: 24px;
-	border-left: 1px solid ${g.stroke.primary};
+	height: 100%;
+	border-left: 1px solid ${f.stroke.primary};
 	cursor: pointer;
-`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O}=l,C=null==u?void 0:u[0].split("/"),L=null==C?void 0:C[C.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(c,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||L}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};
+	display: flex;
+	align-items: center;
+`,x=l=>{const{imageName:x,error:O,isLoading:w,mediaType:L,selectedVariable:k,setOpenEditMedia:C}=l,E=null==x?void 0:x[0].split("/"),M=null==E?void 0:E[E.length-1],{disableEditVariable:S}=j();return e(y,{children:[i(u,Object.assign({error:!!O,onClick:()=>null==C?void 0:C(!0)},{children:O?i(r,{width:56,height:56}):w?i(d,{size:"small"}):L===c.IMAGE?i(a,{imageUrl:null==x?void 0:x[0],width:56,height:56}):L===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(o,{width:18,height:22,color:f.content.placeholder})})),e(v,{children:[i("div",Object.assign({style:{flex:O?"unset":1}},{children:x&&O?i(t,{}):w?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:k||h.toCapitilize(null==L?void 0:L.toLowerCase())||M}))})),!!O&&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==L?void 0:L.toLowerCase(),". Retry"]})),i(g,Object.assign({style:{color:f.content.secondary}},{children:O}))]}))]}),!S&&!w&&i(b,Object.assign({onClick:()=>null==C?void 0:C(!0),onKeyDown:()=>null==C?void 0:C(!0),role:"presentation"},{children:O?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.js

@@ -25,7 +25,9 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border: 1px solid ${r.stroke.primary};
 	border-radius: 4px;
 	margin-left: 8px;
+	align-items: center;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;
+	margin-bottom: 16px;
 `;export{o as Container,n as EditTemplateMediaContainer,i as ImageContainer,t as RightComponent};

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

@@ -0,0 +1,25 @@
+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;
+    variableList?: VariableListInterfaceV2[];
+    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, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppCarouselTemplateV2;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";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{AddVariableV2SideModal as c}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as v,TitleRegular as h,BodySecondary as g,BodyCaption as f}from"../../TypographyStyle.js";import{ProductPickerModal as y,ScreenName as b}from"../../product-picker-v2/modal.js";import{Badge as j}from"../Badge/index.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import C from"./EditWhatsAppTemplateV2.js";import{ProductBox as I}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as w}from"../../template-preview/models/WhatsAppTemplate.js";const O=O=>{let{template:k,whatsappSpecificPickerMeta:P,showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}=O;var E,B,M,D,F,R,W,$;const{selectedCarouselIndex:q,setTemplate:_,pickerConf:N,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:J,setCarouselProducts:K,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,sliderRef:ee}=x(),[te,le]=d(-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(B=null===(E=null==k?void 0:k.mapping)||void 0===E?void 0:E.body)||void 0===B?void 0:B.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(M=null==k?void 0:k.mapping)||void 0===M?void 0:M.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[oe,ie]=d(!1),[ne,re]=d(!1),[ae,de]=d(!1),se=q===(null!=H?H:-1)-1,ce=(null!=q?q:-1)<1;s((()=>{var e,t,l,o;le(-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==k?void 0:k.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==k?void 0:k.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[q]);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=q&&q>=0&&(null===(R=null===(F=null==k?void 0:k.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(v,Object.assign({style:{marginLeft:10}},{children:te}))]})),z&&(null!==(W=null==J?void 0:J.length)&&void 0!==W?W:0)>0&&null!=q&&q>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(I,{editItem:()=>{1===(null==J?void 0:J.length)&&"variable"===J[0].name?de(!0):ie(!oe)},cardBody:1===(null==J?void 0:J.length)&&"variable"===J[0].name?`${J[0].productName}`:`${null==J?void 0:J.length} Products Selected`,hideIcon:1===(null==J?void 0:J.length)&&"variable"===J[0].name,deleteItem:()=>{var e;if(1===(null==J?void 0:J.length)&&"variable"===J[0].name)return void(null==K||K([]));const t=a(Object.assign({},k));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==_||_(t)),null==K||K([]),null==Y||Y()}}),J&&(null==J?void 0:J.length)>0&&"variable"!=J[0].name&&t(u,{disabled:(null!==($=null==J?void 0:J.length)&&void 0!==$?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{re(!0),ie(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==J?void 0:J.length)&&null!=q&&q>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(h,{children:"Product(s)"}),t(g,{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(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${m.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:m.content.secondary})})),onClick:e=>{ie(!0)}}),G===w.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(f,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${m.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:m.content.secondary})})),onClick:e=>{de(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(j,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=q?q:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:m.surface.hovered,alignItems:"center"}},{children:[t(p,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:m.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickPrev(),(null!=q?q:-1)<1||null==Z||Z((e=>e-1))}}),t(h,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${H}`})),t(p,{Icon:n,width:8,height:14,disabled:se,svgStyle:se?{}:{color:m.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickNext(),(null!=q?q:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(C,{whatsappSpecificPickerMeta:P,template:k,onTemplateChange:e=>{null==_||_(e)},showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}),oe&&N&&t(y,{zIndex:200,startupScreen:ne?b.RearrangeProducts:b.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!=J?J:[]),collectionFetcher:N.fetchCollections,productFetcher:N.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,d;re(!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 u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=a[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=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)),u=s.map((e=>e.image)),p=a(Object.assign({},k));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==_||_(p)),null==K||K(c),ie(!1)},searchInCollectionFetcher:N.searchInCollection,searchFetcher:N.searchProducts,visible:oe,onClose:()=>{ie(!1)},exactLimit:null!=H?H:1}),ae&&t(c,{zIndex:2e3,data:null!=S?S:[],showVariable:ae,setShowVariable:de,placeholder:"Add a variable",customTrigger:e=>{null==K||K([{name:"variable",productName:e.actualValue}])}})]}))};export{O as default};

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

@@ -1,11 +1,19 @@
-/// <reference types="react" />
+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;
-    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
+    template: WhatsAppTemplate | WhatsAppCarouselTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    fileName?: string;
+    setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

@@ -1 +1,7 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as s}from"./VariableConnectorsPanel.js";import a from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m}=r;var b,v,g,h,f,j,T,O,x,y,E,C;const{originalVariableList:V}=e(),{descriptionComponents:w,urlBtns:B,qrbBtns:I,imageComponent:R,bodyVariables:L,headerVariables:A}=n(c);function U(t,o){var e,n,i,l;const s=Object.assign({},c),a=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const d=null===(e=null==s?void 0:s.components[a].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},s.components[a]),{buttons:p}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[a]=r,s.components=u}}null==u||u(s)}function S(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:o}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return t(s,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!R&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:R,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(L.length>0||A.length>0)&&o(d,{containerStyle:{paddingTop:R?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==w?void 0:w.map(((t,e)=>o(a,{originalVariableList:V,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body},e))),(null===(v=null===(b=B[0])||void 0===b?void 0:b.component)||void 0===v?void 0:v.buttons)&&(null===(f=null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)||void 0===f?void 0:f.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(j=null==V?void 0:V.buttons)||void 0===j?void 0:j.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:V,updateSelectedURLTemplateBtn:U},`${e}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(y=null===(x=I[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)||void 0===E?void 0:E.length)>0&&o(d,{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"}),null===(C=null==V?void 0:V.buttons)||void 0===C?void 0:C.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:V,updateSelectedQRBTemplateBtn:S},`${e}`)}))]}))};export{r as default};
+import{jsx as o,jsxs as e,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import E from"./VariableEditorHeader.js";import V from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,discountCode:w,setDiscountCode:N,fileName:P,setFileName:A}=s;var D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,mo,vo,bo,go,fo,ho,jo,Oo,Co,To,xo;const yo=B.isCarouselType,{originalVariableList:Eo,pod:Vo,extras:Bo,selectedCarouselIndex:ko,isProductCarouselType:Lo}=u(),{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}=m(B),Po=i(null),Ao=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Do,_o]=l(!1),[Ho,So]=l(-1===ko?{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}:{}),{uploadMediaLink:Fo,uploadMediaFiles:Qo}=M,qo=C({uploadMediaLink:Fo,uploadMediaFiles:Qo,updateTemplateImageUrl:function(o,e){var n,i,l,a,s,d,r,p;let u;u=null!=ko&&ko>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[ko].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[ko]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.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:e,example:{header_handle:[o]}}),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!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[ko]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),Ko(!0)}else null==L||L(Object.assign({},u))},mediaComponent:yo?Ho.imageComponent:Uo,fileRef:Po}),[Yo,Ko]=l(!1),[Wo,$o]=l(P),[Go,Xo]=l();function zo(o,e,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B),b=t(v),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.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=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),i=null===(s=null===(a=Object.assign({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(B);return l.components=e,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?_o(!0):(_o(!1),null==N||N(""))}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=b.components,o.mapping.cards[ko]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Jo(o,e,n){var i,l,a,s,d,r,p;const u=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B);if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=null==e?void 0:e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==e?void 0:e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),i=t(B);return i.components=e,void(null==L||L(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,null==L||L(Object.assign({},o))}else null==L||L(u)}a((()=>{var o,e;if(null===(o=B.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))_o(!0);else{_o(!1);const o=null===(e=null==Bo?void 0:Bo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[B]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=ko&&-1===ko){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);So({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[ko]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1&&Yo){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Ko(!1)}}),[Yo]);const Zo=yo?Ho.imageComponent:Uo;return qo.openEditMedia?o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(h,{mediaComponentFormat:null!==(D=Zo.format)&&void 0!==D?D:r.IMAGE,uploadMedia:qo.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:qo,setOpenEditMedia:qo.setOpenEditMedia,openEditMedia:qo.openEditMedia,editIconRef:qo.editIconRef,fileRef:Po})})):e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Lo?"420px":"auto"}},{children:[!!Ho.imageComponent&&!Lo&&e(O,{children:[o(j,{imageName:null!==(H=null===(_=null==Zo?void 0:Zo.example)||void 0===_?void 0:_.header_handle)&&void 0!==H?H:[],handleImageChange:qo.handleImageChange,mediaType:null==Zo?void 0:Zo.format,error:qo.error,isLoading:qo.loading,setOpenEditMedia:qo.setOpenEditMedia,selectedVariable:v(null!==(Q=null===(F=null===(S=null==Zo?void 0:Zo.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(Y=null===(q=null==Zo?void 0:Zo.example)||void 0===q?void 0:q.header_handle)||void 0===Y?void 0:Y[0]:(null===(W=null===(K=null==B?void 0:B.mapping)||void 0===K?void 0:K.header)||void 0===W?void 0:W[0])?null===(G=null===($=null==B?void 0:B.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:qo.selectedVariable}),(null==Uo?void 0:Uo.format)==r.DOCUMENT?o(k,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Wo,errorMessage:Go||void 0,onBlur:()=>{if(!Wo)return null==A||A(""),void Xo("PDF name is Required");const o=b(Wo);null==A||A(Wo),Xo(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Xo(""),$o(o)}})}):o(n,{})]}),(null===(X=Ho.bodyVariables)||void 0===X?void 0:X.length)>0&&o(E,{containerStyle:{paddingTop:Ho.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(z=Ho.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(y,{originalVariableList:null!=ko&&ko>-1?Eo.cards[ko]:Eo,type:e.type,descriptionComponent:e.component,showVariableModal:I,variableList:R},n))),(null===(oo=null===(Z=null!=ko&&ko>-1?null===(J=Eo.cards[ko])||void 0===J?void 0:J.buttons:null==Eo?void 0:Eo.buttons)||void 0===Z?void 0:Z.filter((o=>"URL"===o.type)))||void 0===oo?void 0:oo.length)>0&&o(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(to=null===(no=null!=ko&&ko>-1?null===(eo=Eo.cards[ko])||void 0===eo?void 0:eo.buttons:null==Eo?void 0:Eo.buttons)||void 0===no?void 0:no.filter((o=>Vo===p.CHATBOT||"URL"===o.type)))||void 0===to?void 0:to.map(((e,n)=>{if("URL"===e.type)return o(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedURLTemplateBtn:zo,variableList:R},`${n}_${ko}`)})),Vo===p.CHATBOT&&(null===(lo=null===(io=Ro[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)&&(null===(ro=null===(so=null===(ao=Ro[0])||void 0===ao?void 0:ao.component)||void 0===so?void 0:so.buttons)||void 0===ro?void 0:ro.length)>0&&o(g,{backTrackMessage:null===(po=null==Bo?void 0:Bo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Bo?void 0:Bo.backTrackExtra)||void 0===uo?void 0:uo[1]}),(null===(vo=null===(mo=null!=ko&&ko>-1?null===(co=Eo.cards[ko])||void 0===co?void 0:co.buttons:null==Eo?void 0:Eo.buttons)||void 0===mo?void 0:mo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===vo?void 0:vo.length)>0&&(Vo!==p.CHATBOT?o(E,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(g,{backTrackMessage:null===(bo=null==Bo?void 0:Bo.backTrackExtra)||void 0===bo?void 0:bo[0],setBackTrackMessage:null===(go=null==Bo?void 0:Bo.backTrackExtra)||void 0===go?void 0:go[1]})),null===(jo=null===(ho=null!=ko&&ko>-1?null===(fo=Eo.cards[ko])||void 0===fo?void 0:fo.buttons:null==Eo?void 0:Eo.buttons)||void 0===ho?void 0:ho.filter((o=>"QUICK_REPLY"===o.type)))||void 0===jo?void 0:jo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Vo!==p.CHATBOT)return o(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedQRBTemplateBtn:Jo},`${n}_${ko}`)})),Vo===p.CHATBOT&&Do&&o(f,{discountCode:null===(Oo=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Oo?void 0:Oo[0],setDiscountCode:null===(Co=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Co?void 0:Co[1],variableList:R}),null===(xo=null!=ko&&ko>-1?null===(To=Eo.cards[ko])||void 0===To?void 0:To.buttons:null==Eo?void 0:Eo.buttons)||void 0===xo?void 0:xo.map(((e,n)=>{var t,i,l;if("COPY_CODE"===e.type)return o(T,{index:n,variable:{variableName:null!==(t=e.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=e.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=e.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Ao,componentType:"BUTTONS"},n)}))]}))},k=s.div`
+	padding-top: 24px;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin-bottom: 8px;
+	line-height: normal;
+`;export{B as default};

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 export interface FooterProps {
+    isWhatsappCarousel: boolean;
     onSelect: () => void;
 }
-declare const Footer: ({ onSelect }: FooterProps) => JSX.Element;
+declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export default Footer;

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

@@ -1,13 +1,14 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
-	background: ${i.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import n from"styled-components";import{Button as l}from"../../button/Button.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{Badge as d}from"../Badge/index.js";import{useTemplateModalContext as a}from"../context/templateModalContext.js";const p=n.div`
+	background: ${s.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${i.stroke.primary};
+	border-top-color: ${s.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 16px 24px;
 	display: flex;
-	justify-content: 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;
-`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};
+`,c=n=>{let{isWhatsappCarousel:c,onSelect:m}=n;var u,x,b,f;const{isError:g,selectedCarouselIndex:v,setSelectedCarouselIndex:y,setErrorIndexes:h,template:j}=a(),[S,C]=o(c?"Next":"Select template");return r((()=>{c&&-1===v?C("Next"):c&&null!=v&&v>-1&&C("Save & Select Template")}),[v]),e(p,Object.assign({justifyContent:c&&(null===(x=null===(u=null==j?void 0:j.mapping)||void 0===u?void 0:u.body)||void 0===x?void 0:x.length)?"space-between":"end"},{children:[c&&null!=v&&v>=-1&&(null===(f=null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.body)||void 0===f?void 0:f.length)&&t(i,Object.assign({color:s.text.secondary},{children:`Step ${-1===v?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&t(d,{errorText:"Some inputs are missing or incorrect. Please check"}),t(l,{id:"select-template-btn",buttonText:S,size:c?"small":"large",onClick:function(){c&&-1===v&&y?y(0):(null==h||h([]),m())}})]}))]}))};export{c as default};

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

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

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

@@ -2,10 +2,12 @@ import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default MobilePreview;

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

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

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

@@ -0,0 +1,47 @@
+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;
+	flex-direction: row;
+	column-gap: 14px;
+	justify-content: center;
+	align-items: center;
+	background: #ffffff;
+
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+
+	.card-body {
+		width: 256px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		&__dynamic {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #731dcf;
+
+			&__desc {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 12px;
+				line-height: 16px;
+				color: #616161;
+			}
+		}
+
+		&__simple {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #000000;
+		}
+	}
+`,a=s=>{const{cardBody:a,deleteItem:f,editItem:p,hideIcon:m}=s;return t(d,Object.assign({width:"100%"},{children:[!m&&e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,Object.assign({color:c.content.secondary},{children:a}))})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[p&&e(r,{style:{display:"flex"},Icon:()=>e(n,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{p(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:()=>e(i,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{a as ProductBox};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface TemplateSelectModalContentProps {
@@ -7,6 +7,14 @@ export interface TemplateSelectModalContentProps {
     hideHeader?: boolean;
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
+    fileName?: string;
+    setFileName?: (name: string) => void;
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateSelectModalContentProps) => JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default TemplateSelectModalContent;

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

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
+import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -10,6 +11,11 @@ export interface VariableConnectorProps {
     onFocus?: () => void;
     variable: CUSTOM_VARIABLE;
     index: number;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    setShowDiscountCheckBox?: any;
+    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
+    CTAoptions?: ButtonPlaceHolderOptions[];
 }
-declare const VariableConnector: ({ onFocus, variable, index, }: VariableConnectorProps) => JSX.Element;
+declare const VariableConnector: React.FC<VariableConnectorProps>;
 export default VariableConnector;

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

@@ -1,7 +1,16 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as o}from"react";import n from"styled-components";import{Dropdown as i}from"../../dropdown/Dropdown.js";import{Input as a}from"../../input/Input.js";import{placeHolderNamePattern as s}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{BodySecondary as d}from"../../TypographyStyle.js";import r from"../../../utils/StringUtils.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as v}from"../utils/getVariableNameEmail.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";const b=n.div`
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as n}from"date-fns";import{cloneDeep as i}from"lodash";import{useState as o,useEffect as s}from"react";import u from"styled-components";import{AddVariableV2SideModal as d}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as c}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{POD as g}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as O,BodyPrimary as j}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as x}from"../../../constants/Theme.js";import{useTemplateModalContext as y}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";const _=u.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===u.EMAIL?c.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===b.EMAIL?x.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,g={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"},h=n=>{let{onFocus:h,variable:f,index:j}=n;var _;const[y,k]=l(!1),[A,O]=l(""),[P,T]=l([]),[E,S]=l(),{device:L,channel:V,isError:W,originalVariableList:C,template:M,templateSelectionTriggered:w,setTemplate:H,setDisplayContent:I,setOriginalVariableList:B,globalNormalizedPlaceholders:$}=m();function U(e,t){var l,o;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(V!==u.WHATSAPP){const o=v(j+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),a=V===u.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(o):document.getElementById(o);a&&(a.textContent="custom_text"!==t&&"custom_link"!==t||e?e:f.variableName);const s=C.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==B||B(s)}if(V===u.WHATSAPP){const t=null===(o=C.body)||void 0===o?void 0:o.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==B||B((e=>Object.assign(Object.assign({},e),{body:t,buttons:C.buttons})))}}function N(e,t){var l;const o=Object.assign({},M),n=null===(l=null==o?void 0:o.components)||void 0===l?void 0:l.map((l=>{var o,n,i,a,s;const u=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(o=l.example)||void 0===o?void 0:o.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(s=null===(a=null===(i=u.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},u.example),{body_text:[l]});return Object.assign(Object.assign({},u),{example:o})}return l}));o.components=n,null==H||H(o)}return o((()=>{y&&(null==h||h())}),[y]),o((()=>{!function(){var e,t,l,o,n;const i="mobile"===L?"template_html_mobile":"template_html_desktop",a=document.getElementById(i),s=(null!==(o=null===(l=null===(t=null===(e=null==a?void 0:a.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==o?o:"")+(null===(n=null==a?void 0:a.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);V===u.EMAIL&&(null==I||I(s))}()}),[w]),o((()=>{var e;const t=[];let l=[];if(V===u.MESSAGE){const e=null!=$?$:[];T([{label:"",options:[x,g]},...e]),l=[{label:"",options:[x,g]},...e]}else{"link"===(null==f?void 0:f.type)?(t.push({label:"",options:[g,x]}),S(g)):(t.push({label:"",options:[g,x]}),S(x));const e=null!=$?$:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:r.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((V===u.WHATSAPP||V===u.EMAIL||V===u.MESSAGE)&&f.updatedValue)if(s.test(f.updatedValue)&&V===u.WHATSAPP||f.updatedValue.startsWith("{{")&&V!==u.WHATSAPP){let e={label:"",value:""};const t=V===u.WHATSAPP?f.updatedValue.replace("[[","").replace("]]",""):f.updatedValue.replace("{{","").replace("}}","");l.map((l=>{l.options.map((l=>{var o;(null===(o=l.value)||void 0===o?void 0:o.replace("{{","").replace("}}",""))===t&&(e=l)}))})),e.value&&S(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(S(g),O(f.updatedValue.split("https://")[1])):(S(x),O(f.updatedValue))}),[]),e(b,Object.assign({channel:V,focused:y,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:W&&!E?c.content.negative:c.content.primary}},{children:[null===(_=f.variableName)||void 0===_?void 0:_.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(i,{options:P,isSearchable:!1,onSelect:function(e,t){var l,o,n;const i=e;O(""),S(i),V===u.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(U(null!==(l=i.value)&&void 0!==l?l:"","string"),null==N||N(null!==(o=f.index)&&void 0!==o?o:0,`[[${i.value}]]`)):(null==N||N(null!==(n=f.index)&&void 0!==n?n:0,f.variableName),U("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?U(i.value,"url"===i.bikPlaceholderType?"link":"string"):(O(""),U("",i.value))},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[]})})),("custom_text"===(null==E?void 0:E.value)||"custom_link"===(null==E?void 0:E.value))&&t(a,{labelText:"custom_text"===(null==E?void 0:E.value)?"Custom text value":"custom_link"===(null==E?void 0:E.value)?"Custom URL value":"",id:`variable-value-${null==E?void 0:E.value}-${j}`,value:A,errorMessage:W?A?"custom_link"!==E.value||p(A)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==E?void 0:E.value)?void 0:30,prefixText:"custom_link"===(null==E?void 0:E.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===E.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;O(t);const o="custom_link"===(null==E?void 0:E.value)?`https://${t}`:t;U(o,e),V===u.WHATSAPP&&(null==N||N(null!==(l=f.index)&&void 0!==l?l:0,o))}(E.value,e)})]}))};export{b as Container,h as default};
+`,T=u.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+	cursor: not-allowed;
+`,E={value:"custom_link",label:"Custom URL"},k={value:"custom_text",label:"Custom text"},V={value:"static_expiry",label:"Static Expiry"},S=u=>{let{onFocus:S,variable:A,index:C,showVariableModal:B,variableList:P,setShowDiscountCheckBox:w,componentType:D,CTAoptions:N}=u;var L,U,H,R,M;const[W,I]=o(!1),[$,Y]=o(""),[z,Z]=o([]),[G,q]=o(),[F,K]=o(!1),[J,Q]=o(!1),{device:X,channel:ee,isError:te,originalVariableList:le,template:ae,templateSelectionTriggered:ne,setTemplate:ie,setDisplayContent:oe,setOriginalVariableList:se,globalNormalizedPlaceholders:ue,enabledCustomText:de,pod:ce,selectedCarouselIndex:re,isProductCarouselType:pe,disableEditVariable:me,disableEditExpiry:ve,templateErrorIndexes:be}=y();function ge(){var e,t;const l=[];let a=[];if(ee!==b.MESSAGE||de){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[E,k]}),q(E)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[E,k]}),q(V)):(l.push({label:"",options:[E,k,V]}),q(k));const e=null!=ue?ue:[];Z([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ue?ue:[];Z([{label:"",options:[k,E]},...e]),a=[{label:"",options:[k,E]},...e]}if((ee===b.WHATSAPP||ee===b.EMAIL||ee===b.MESSAGE)&&A.updatedValue)if(v.test(A.updatedValue)&&ee===b.WHATSAPP||A.updatedValue.startsWith("{{")&&ee!==b.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===b.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(B){let t=e.updatedValue;if(ce===g.CHATBOT&&"BUTTONS"===D){const l=null==N?void 0:N.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(A,a,ee);e.value&&q(e)}else"date_time"===A.type?(q(V),Y(A.updatedValue),xe(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(q(E),Y(A.updatedValue.split("https://")[1])):(q(k),Y(A.updatedValue))}function Oe(e,t){var l,a,n;const i=e;Y(""),q(i),ee===b.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(he(null!==(l=i.value)&&void 0!==l?l:"","string"),null==xe||xe(null!==(a=A.index)&&void 0!==a?a:0,i.value,!0)):(null==xe||xe(null!==(n=A.index)&&void 0!==n?n:0,"",!0,i.value),he("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?he(i.value,"url"===i.bikPlaceholderType?"link":"string"):(Y(""),he("",i.value))}function je(e,t){var l;Y(t);const a="custom_link"===(null==G?void 0:G.value)&&t?t.includes("https")?t:`https://${t}`:t;he(a,"static_expiry"===e?"string":e),ee===b.WHATSAPP&&(null==xe||xe(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function he(e,t){var l,a,n,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(ee!==b.WHATSAPP){const a=f(C+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===X?"template_html_mobile":"template_html_desktop"),i=ee===b.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=le.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==se||se(o)}if(ee===b.WHATSAPP){if(null!=re&&re>-1&&pe){const l=Object.assign({},le).cards.map(((l,a)=>{var n,i;return"BODY"===D?Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>C===l?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t))}):"BUTTONS"===D?Object.assign(Object.assign({},l),{buttons:null===(i=l.buttons)||void 0===i?void 0:i.map(((l,a)=>a===C?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==se||se((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=re&&re>-1?le.cards[re]:le;let u=l.body,d=l.header,c=l.buttons;if("BODY"===D?u=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===D?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===D&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===C?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=re&&re>-1){const e=i(le.cards);e[re]={header:d,body:u,buttons:c},null==se||se((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==se||se((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function xe(e,t,l,a){var n,o,s,u,d,c,r;if(null!=re&&re>-1&&pe){const o=Object.assign({},ae).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,o,s,u;if("BODY"===l.type&&"BODY"===D){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(s=null===(o=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}return l}if("BUTTONS"===l.type&&"BUTTONS"===D){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=i(ae);if(l){const l=null===(n=Object.assign({},ae).mapping.cards)||void 0===n?void 0:n.map(((l,n)=>{var i,o,s;if("BODY"===D)return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))});if("BUTTONS"===D&&(null==l?void 0:l.buttons)){let i=-1,u=-1;return null===(o=ae.components[1].cards)||void 0===o||o[n].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(i++,l===e&&"URL"==t.type&&(u=i))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==ie||ie(s))}const p=null!=re&&re>-1?{components:null===(o=Object.assign({},ae).components[1].cards)||void 0===o?void 0:o[re].components,mapping:null===(s=Object.assign({},ae).mapping.cards)||void 0===s?void 0:s[re]}:Object.assign({},ae),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,o,s,u,d,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===D){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(s=null===(o=null===(i=p.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===D){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===D){const a=null===(r=l.buttons)||void 0===r?void 0:r.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===D)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===D&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))});else if("HEADER"===D&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:t:l))});else if("BUTTONS"===D&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,n=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(n=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===n?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=re&&re>-1&&ae){const e=i(ae);e.components[1].cards[re].components=p.components,e.mapping.cards[re]=p.mapping,null==ie||ie(e)}else null==ie||ie(Object.assign({},p))}return s((()=>{W&&(null==S||S())}),[W]),s((()=>{!function(){var e,t,l,a,n;const i="mobile"===X?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);ee===b.EMAIL&&(null==oe||oe(s))}()}),[ne]),s((()=>{ge()}),[]),s((()=>{ge()}),[re]),s((()=>{X&&G&&$&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&$?$.includes("https")?$:`https://${$}`:$,G.value)}),100)}),[X]),s((()=>{!J&&G&&A.updatedValue&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,G.value),Q(!0)}),100)}),[G]),e(_,Object.assign({channel:ee,focused:W,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:te&&!G?x.content.negative:x.content.primary}},{children:[null===(L=A.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:B?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==G?void 0:G.label)?"space-between":"flex-end"}},{children:[t(j,Object.assign({numberOfLines:1},{children:ce===g.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(U=null==G?void 0:G.value)&&void 0!==U?U:"")?null==G?void 0:G.label:null==G?void 0:G.value:m(null!==(H=null==G?void 0:G.label)&&void 0!==H?H:"",20,!0)})),me||"date_time"===(null==A?void 0:A.type)&&ve?t(l,{}):t(a,{onClick:()=>{K(!F)},width:24,height:24,color:x.content.primary})]})):t(r,{disabled:me,options:z,isSearchable:!1,onSelect:Oe,defaultOptions:G?[Object.assign(Object.assign({},G),{selected:!0})]:[]})})),("custom_text"===(null==G?void 0:G.value)||"custom_link"===(null==G?void 0:G.value))&&t(p,{state:me?"disabled":"none",labelText:"custom_text"===(null==G?void 0:G.value)?"Custom text value":"custom_link"===(null==G?void 0:G.value)?"Custom URL value":"",id:`variable-value-${null==G?void 0:G.value}-${C}`,value:$,errorMessage:te&&(null===(R=null==be?void 0:be.buttons)||void 0===R?void 0:R.includes(null!==(M=null==A?void 0:A.index)&&void 0!==M?M:-1))?$&&0!==$.trim().length?"custom_link"!==G.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${$.trim()}`)&&0!==$.trim().length?"custom_link"!==G.value&&$.length>30?"Length cannot be more than 30":"BUTTONS"===D&&"custom_link"!==G.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==G?void 0:G.value)?2e3:"BUTTONS"===D?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==G?void 0:G.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===G.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{je(G.value,e)}}),"static_expiry"===(null==G?void 0:G.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[me&&t(T,{onClick:e=>e.preventDefault()}),t(c,{placement:"auto",time:n($?new Date($):new Date,"hh:mm a"),date:$?new Date($):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{je("static_expiry",e.toISOString())}})]})),F&&t(d,{zIndex:2e3,data:null!=P?P:[],showVariable:F,setShowVariable:K,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?Oe({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Oe({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Oe({label:e.displayName,selected:!0,value:"static_expiry"}):Oe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{_ as Container,S as default};

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

@@ -1,11 +1,12 @@
-/// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
     originalVariableList: WhatsAppTemplateVariables;
     descriptionComponent: ComponentType;
-    variableMapping: string[] | undefined;
     type: ComponentType['type'];
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, }: VariableConnectorWhatsAppProps) => JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectorWhatsApp;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import l from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:d}=s;var m;const{originalVariableList:c}=n();return"BODY"===p.type?e("div",{children:null===(m=null==c?void 0:c.body)||void 0===m?void 0:m.map(((r,n)=>r.isEditableVariable?e(l,{index:n,variable:r},`${n}-${r.index}`):t("div",Object.assign({style:{margin:"16px 8px"}},{children:[t(o,Object.assign({style:{color:a.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",n+1]})),e(i,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),n)))}):e(r,{})};export{s as default};
+import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:m,showVariableModal:b,variableList:c}=s;var v,y,u,x,h,f;const{originalVariableList:V,disableEditVariable:g,selectedCarouselIndex:E}=o(),j=d({variableList:c,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===p.type?e("div",{children:null===(v=null!=E&&E>-1?V.cards[E].body:null==V?void 0:V.body)||void 0===v?void 0:v.map(((a,o)=>g||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`)))}):"HEADER"===p.type?e("div",{children:null===(y=null!=E&&E>-1?V.cards[E].header:null==V?void 0:V.header)||void 0===y?void 0:y.map(((a,o)=>a.isEditableVariable?e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o)))}):"limited_time_offer"===p.type?e("div",{children:e(n,{index:0,variable:{variableName:null!==(x=null===(u=null==p?void 0:p.limited_time_offer)||void 0===u?void 0:u.text)&&void 0!==x?x:"Expires after",updatedValue:null!==(f=null===(h=p.example)||void 0===h?void 0:h.limited_time_offer)&&void 0!==f?f:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:b,variableList:j,componentType:p.type},`${p.type}`)}):e(a,{})};export{s as default};