@bikdotai/bik-component-library 0.0.3202-beta.1 → 0.0.5581-tooltip-beta

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

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

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

@@ -3,5 +3,6 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 declare const DesktopPreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
+    showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default DesktopPreview;

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 p}from"../../spinner/Spinner.js";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
-	background: ${a.surface.standard};
-	border: 1px solid ${a.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"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,d=i.div`
+`,l=i.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${a.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:a}=r;return e(s,Object.assign({ref:i},{children:[e(d,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:a?t(o,{channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:a,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(s,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:m.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,4 @@
+export declare const DiscountCodeComponent: (props: {
+    discountCode?: string | undefined;
+    setDiscountCode?: ((code: string) => void) | 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 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{TitleSmall as c}from"../../TypographyStyle.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{AddVariableStyled as d}from"./VariableConnectorsPanel.js";import{Input as m}from"../../input/Input.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}=l(),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(c,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),j&&e("div",Object.assign({ref:V,style:{margin:10}},{children:[o(m,{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(d,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,16 @@
+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;
+}
+declare const EditMediaModal: React.FC<EditMediaModalProps>;
+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 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 n}from"react";import{Button as l}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{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:T,openEditMedia:V,uploadMedia:B,fileRef:D,useEditWhatsappTemplateMediaResponse:P}=E;const{pod:U,setHideCrossButton:L,setHideFooterButton:G}=w(),[W,R]=s(""),[S,H]=s(void 0),[$,F]=s(!1),[_,z]=s("");let N;if(n((()=>(G(!0),()=>{G(!1)})),[]),n((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&H(e)}),[P.loading]),N=A===h.IMAGE?"image/png, image/jpeg":A===h.VIDEO?"video/mp4":"application/pdf",!V)return e(t,{});const q=()=>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),R("")},style:{cursor:"pointer"},width:16,height:16}),e(f,{children:"Update Media"})]})),i("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:$?`1px dashed ${c.colorsV2.stroke.negative.vibrant}`:`1px dashed ${c.colorsV2.stroke.primary}`,backgroundColor:c.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:P.loading?"flex":"initial"}},{children:[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:`${q()} URL`,onPickerToggle:e=>{L(!!e)},pickerType:r.EMBEDDED,portalElement:null!=S?S:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{z(e.actualValue),F(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:W,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:"Enter URL/Add variable",showAddButton:U!==u.CAMPAIGN||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(l,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{B(),F(!1)},size:"medium"})}))]}),$&&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 ${q()}`}))]}))]})),!P.loading&&e("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e(l,{buttonText:`Add ${q()}`,onClick:()=>{_?y(_)||k(_)?(B(_),O(!1),R(""),F(!1)):R("Enter valid URL"):F(!0)}})})),e("input",{ref:D,style:{display:"none"},type:"file",onChange:P.handleImageUpload,accept:N}),!!P.selectedImage&&e(p,{aspectRatio:15/8,src:P.selectedImage,onCropComplete:P.onCropComplete,onCancel:()=>{P.setLoading(!1),P.setSelectedImage(""),D.current&&(D.current.value="")}})]})};export{E as default};

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

@@ -1,11 +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,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 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;
-	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: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.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,24 @@
+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

@@ -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{Button as c}from"../../button/Button.js";import{IconButton as u}from"../../icon-button/IconButton.js";import{ProductPickerModal as p,ScreenName as m}from"../../product-picker-v2/modal.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{TitleMedium as j,TitleRegular as x,BodySecondary as C,BodyCaption as I}from"../../TypographyStyle.js";const w=w=>{let{template:k,whatsappSpecificPickerMeta:O,showVariableModal:P,variableListForImage:T,discountCode:S,setDiscountCode:L}=w;var E,B,A,V,D,F,M,R;const{selectedCarouselIndex:W,setTemplate:$,pickerConf:q,isProductCarouselType:N,pod:_,cardCount:z,carouselProducts:G,setCarouselProducts:H,isError:J,cardImages:K,disableEditVariable:Q,onDeleteSelectedProducts:U,setSelectedCarouselIndex:X,setVariableCallback:Y,setShowVariablePicker:Z,sliderRef:ee}=h(),[te,le]=d(-1==W?"First Message (Step 1/2)":N?"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===(V=null===(A=null==k?void 0:k.mapping)||void 0===A?void 0:A.body)||void 0===V?void 0:V.length)?"(Step 2/2)":"")),[oe,ie]=d(!1),[ne,re]=d(!1),ae=W===(null!=z?z:-1)-1,de=(null!=W?W:-1)<1;s((()=>{var e,t,l,o;le(-1==W?"First Message (Step 1/2)":N?"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)":""))}),[W]);const se=e=>{null==H||H([{name:"variable",productName:e.actualValue}])};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!=W&&W>=0&&!!(null===(F=null===(D=null==k?void 0:k.mapping)||void 0===D?void 0:D.body)||void 0===F?void 0:F.length)&&t(u,{Icon:o,onClick:()=>{null==X||X(-1)}}),t(j,Object.assign({style:{marginLeft:10}},{children:te}))]})),N&&(null!==(M=null==G?void 0:G.length)&&void 0!==M?M:0)>0&&null!=W&&W>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(f,{editItem:()=>{1===(null==G?void 0:G.length)&&"variable"===G[0].name?(Y((()=>se)),Z(!0)):ie(!oe)},cardBody:1===(null==G?void 0:G.length)&&"variable"===G[0].name?`${G[0].productName}`:`${null==G?void 0:G.length} Products Selected`,hideIcon:1===(null==G?void 0:G.length)&&"variable"===G[0].name,deleteItem:()=>{var e;if(1===(null==G?void 0:G.length)&&"variable"===G[0].name)return void(null==H||H([]));const t=a(Object.assign({},k));t&&(K&&K.length>0?null==K||K.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=K[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==$||$(t)),null==H||H([]),null==U||U()}}),G&&(null==G?void 0:G.length)>0&&"variable"!=G[0].name&&t(c,{disabled:(null!==(R=null==G?void 0:G.length)&&void 0!==R?R:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{re(!0),ie(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!Q&&N&&0===(null==G?void 0:G.length)&&null!=W&&W>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(x,{children:"Product(s)"}),t(C,{children:`Select ${null!=z?z:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:J?16:12,marginRight:J?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:J?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:J?"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=>{ie(!0)}}),_===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(I,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:J?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:J?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:18,height:18,color:y.content.secondary})})),onClick:e=>{Y((()=>se)),Z(!0)}})]})]})),J&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(v,{padding:"8px",errorText:"Please add products"})}))]}),!N&&(null!=W?W:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:y.surface.hovered,alignItems:"center"}},{children:[t(u,{Icon:i,disabled:de,width:8,height:14,svgStyle:de?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickPrev(),(null!=W?W:-1)<1||null==X||X((e=>e-1))}}),t(x,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:y.content.secondary},{children:`Card ${(null!=W?W:0)+1}/${z}`})),t(u,{Icon:n,width:8,height:14,disabled:ae,svgStyle:ae?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickNext(),(null!=W?W:-1)>=(null!=z?z:-1)-1||null==X||X((e=>e+1))}})]})),t(g,{whatsappSpecificPickerMeta:O,template:k,onTemplateChange:e=>{null==$||$(e)},showVariableModal:P,variableListForImage:T,discountCode:S,setDiscountCode:L}),oe&&q&&t(p,{zIndex:200,startupScreen:ne?m.RearrangeProducts:m.Collections,rearrangeEnabled:!0,storeId:q.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=G?G:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,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==K?void 0:K[t])&&void 0!==l?l:""]})),null==$||$(p)),null==H||H(c),ie(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:oe,onClose:()=>{ie(!1)},exactLimit:null!=z?z:1})]}))};export{w as default};

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

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

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

@@ -1,5 +1,6 @@
 export interface FooterProps {
+    isWhatsappCarousel: boolean;
     onSelect: () => void;
 }
-declare const Footer: ({ onSelect }: FooterProps) => import("react/jsx-runtime").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,15 @@
-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 i from"styled-components";import{Button as l}from"../../button/Button.js";import{TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{Badge as a}from"../Badge/index.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const p=i.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;
+	padding: 0 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};
+	height: ${e=>e.isWhatsappCarousel?64:80}px;
+`,c=i=>{let{isWhatsappCarousel:c,onSelect:m}=i;var u,x,b,h;const{isError:f,selectedCarouselIndex:g,setSelectedCarouselIndex:v,setErrorIndexes:y,template:j,showVariablePicker:C,hideFooterButton:S}=d(),[w,k]=o(c?"Next":"Select template");return r((()=>{c&&-1===g?k("Next"):c&&null!=g&&g>-1&&k("Save & Select Template")}),[g]),e(p,Object.assign({isWhatsappCarousel:c,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!=g&&g>=-1&&!!(null===(h=null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.body)||void 0===h?void 0:h.length)&&t(n,Object.assign({color:s.text.secondary},{children:`Step ${-1===g?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[f&&t(a,{errorText:"Some inputs are missing or incorrect. Please check"}),!S&&t(l,{disabled:C,id:"select-template-btn",buttonText:w,size:c?"small":"large",onClick:function(){c&&-1===g&&v?v(0):(null==y||y([]),m())}})]}))]}))};export{c as default};

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"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.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"../../variable-picker-v3/model.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 m=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>e.channel===r.WHATSAPP?"236px":"300px"};
+	width: ${e=>l(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,l=a.div`
+`,n=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:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,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%",width:"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:v}=s(),g={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 v?e(h,{children:e(r,Object.assign({},g))}):e(t,{children:i(m,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(n,Object.assign({ref:o},{children:e(r,Object.assign({},g))}))]}))})}));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/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;

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

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

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

@@ -8,9 +8,13 @@ export interface TemplateSelectModalContentProps {
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, 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 o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import a from"./Header.js";const s=s=>{let{channel:n,showVariableMapping:r,showOnlyContent:l,whatsappSpecificPickerMeta:d,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:t("div",{children:[n===o.EMAIL&&e(a,{showOnlyContent:l}),e(i,{whatsappSpecificPickerMeta:d,showVariableMapping:!!r,showOnlyContent:l,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m})]})}))};export{s as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import t from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:m,whatsappSpecificPickerMeta:p,showVariableModal: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:[r===o.EMAIL&&e(t,{showOnlyContent:m}),e(i,{variableListFromProps:n,whatsappSpecificPickerMeta:p,showVariableMapping:!!l,showOnlyContent:m,showVariableModal: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 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 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";
+import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -11,8 +12,10 @@ export interface VariableConnectorProps {
     variable: CUSTOM_VARIABLE;
     index: number;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     setShowDiscountCheckBox?: any;
+    buttonType?: BUTTON_TYPE;
+    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
+    CTAoptions?: ButtonPlaceHolderOptions[];
 }
-declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnector: React.FC<VariableConnectorProps>;
 export default VariableConnector;