@bikdotai/bik-component-library 0.0.44-2.beta.link.1 → 0.0.44-2.beta.link.3

package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../template-preview/TemplatePreview.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const s=a(r).default.forwardRef((r=>{let{channel:a,template:s,showSampleValues:p,carouselCardIndex:i}=r;return e.jsx("div",Object.assign({style:{width:350}},{children:e.jsx(t.TemplatePreview,{showSampleValues:p,template:s,channel:a,size:"small",hideHeader:!0,carouselCardIndex:i,isWhatsappCarousel:!0})}))}));exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const l=s(t).default.forwardRef((t=>{let{channel:s,template:l,showSampleValues:p,carouselCardIndex:i}=t;const{cardWidth:u}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:null!=u?u:360}},{children:e.jsx(a.TemplatePreview,{showSampleValues:p,template:l,channel:s,size:"small",hideHeader:!0,carouselCardIndex:i,isWhatsappCarousel:!0})}))}));exports.default=l;

package/dist/cjs/components/helpers/FileUploaderHelper.d.ts

@@ -15,8 +15,4 @@ export declare class FileUploaderHelper {
             size: number;
         };
     }): string | undefined;
-    validateFileUlrUpload(inputData: {
-        type: string;
-        size: number;
-    }): void;
 }

package/dist/cjs/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../utils/bytesToMB.js");const t="File type no supported",i=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,r={image:5,video:16,application:100},s=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=i,exports.FILE_TYPE_NOT_SUPPORT=t,exports.FileUploaderHelper=class{validate(l){const{file:o,linkData:a}=l;let n=0,f="",d="";if(o)n=o.size,f=o.type.split("/")[0],d=o.type.split("/")[1];else{if(!a)return t;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!r[f])return t;if(e.bytesToMB(n)>r[f])return i(r[f]);if(!s.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}validateFileUlrUpload(e){}},exports.SIZE_LIMIT_MAP=r,exports.SUPPORTED_FILE_FORMAT=s,exports.getFileFormatErrorMessage=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../utils/bytesToMB.js");const t="File type no supported",p=e=>`Max file size of ${e}MB is allowed`,i=e=>`Only ${e.toUpperCase()} format allowed`,r={image:5,video:16,application:100},s=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=p,exports.FILE_TYPE_NOT_SUPPORT=t,exports.FileUploaderHelper=class{validate(o){const{file:l,linkData:a}=o;let n=0,f="",u="";if(l)n=l.size,f=l.type.split("/")[0],u=l.type.split("/")[1];else{if(!a)return t;n=a.size,f=a.type.split("/")[0],u=a.type.split("/")[1]}if(!r[f])return t;if(e.bytesToMB(n)>r[f])return p(r[f]);if(!s.includes(u.toLocaleLowerCase())){if("video"===f)return i("mp4");if("image"===f)return i("png, jpeg, jpg");if("application"===f)return i("pdf")}}},exports.SIZE_LIMIT_MAP=r,exports.SUPPORTED_FILE_FORMAT=s,exports.getFileFormatErrorMessage=i;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -44,5 +44,6 @@ export interface TemplateContextMapperProps {
     };
     selectedCarouselProducts?: CarouselProduct[];
     disableEditExpiry?: boolean;
+    cardWidth?: number;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),o=require("../modals/styledModal.js"),a=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),r=require("./modalElements/Footer.js"),i=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:v,htmlContent:C,templateVariables:m,onTemplateSelect:h,globalPlaceholders:x,showOnlyContent:b,whatsappSpecificPickerMeta:E,zIndex:S,showVariableModal:P,variableList:g,discountCode:T,setDiscountCode:j,onBackPress:M,enabledCustomText:f,variableListForImage:y,showSampleValues:L,disableEditVariable:I,pod:w,extras:A,pickerConf:N,selectedCarouselProducts:V,disableEditExpiry:k}=d;var q,H,_,D,O,F;t.useEffect((()=>{U(C)}),[C]);const Y=v===a.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(H=null===(q=u.components)||void 0===q?void 0:q[1])||void 0===H?void 0:H.type),[B,W]=t.useState(v===a.CHANNEL_TYPE.EMAIL||Y?"desktop":"mobile"),[z,U]=t.useState(C),[$,R]=t.useState(!1),[G,J]=t.useState([]),[K,Q]=t.useState(u),[X,Z]=t.useState(null!=m?m:[]),[ee,te]=t.useState(!1),[le,oe]=t.useState(-1),[ae,se]=t.useState([]);t.useEffect((()=>{V?se(V):u.isProductCarouselType&&se([])}),[V]);const re=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(x)),[x]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:K,setTemplate:Q,device:B,setDevice:W,display_content:z,setDisplayContent:U,originalVariableList:X,setOriginalVariableList:Z,isError:$,setIsError:R,channel:v,globalNormalizedPlaceholders:re,templateSelectionTriggered:ee,setTemplateSelectionTriggered:te,enabledCustomText:f,disableEditVariable:I,pod:w,extras:A,isWhatsappCarousel:Y,selectedCarouselIndex:le,setSelectedCarouselIndex:oe,isProductCarouselType:u.isProductCarouselType,cardCount:null===(D=null===(_=u.components)||void 0===_?void 0:_[1].cards)||void 0===D?void 0:D.length,errorIndexes:G,setErrorIndexes:J,pickerConf:N,carouselProducts:ae,setCarouselProducts:se,disableEditExpiry:k}},{children:b?e.jsx(i.default,{channel:a.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(o.StyledModal,Object.assign({zIndex:S,centralContainerStyles:{width:Y?900:v===a.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==K?void 0:K.label,headingSubtitle:v===a.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(O=null==K?void 0:K.category)&&void 0!==O?O:"")} • ${null!==(F=null==K?void 0:K.templateCategory)&&void 0!==F?F:""}`:"",onBackPress:()=>{null==M||M()}},{children:[e.jsx(i.default,{showSampleValues:L,showVariableMapping:p,channel:v,whatsappSpecificPickerMeta:E,showVariableModal:P,variableList:g,discountCode:T,setDiscountCode:j,variableListForImage:y&&(null==y?void 0:y.length)>0?y:g}),h?e.jsx(r.default,{isWhatsappCarousel:null!=Y&&Y,onSelect:function(){if((null==ae?void 0:ae.length)<1&&u.isProductCarouselType)return void R(!0);const e=null==h?void 0:h(K,X,null!=z?z:"",ae);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&J(e.errorIndexes),(null==e?void 0:e.error)&&R(!!(null==e?void 0:e.error))):te(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),o=require("../modals/styledModal.js"),a=require("../template-preview/models/Channels.js"),r=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),i=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:v,htmlContent:h,templateVariables:m,onTemplateSelect:C,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:S,zIndex:b,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,onBackPress:j,enabledCustomText:M,variableListForImage:I,showSampleValues:L,disableEditVariable:y,pod:A,extras:w,pickerConf:N,selectedCarouselProducts:V,disableEditExpiry:k,cardWidth:q}=d;var H,_,D,O,W,F;l.useEffect((()=>{$(h)}),[h]);const Y=v===a.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(_=null===(H=u.components)||void 0===H?void 0:H[1])||void 0===_?void 0:_.type),B=u.isProductCarouselType,[z,R]=l.useState(v===a.CHANNEL_TYPE.EMAIL||Y?"desktop":"mobile"),[U,$]=l.useState(h),[G,J]=l.useState(!1),[K,Q]=l.useState([]),[X,Z]=l.useState(u),[ee,le]=l.useState([]),[te,oe]=l.useState(!1),[ae,re]=l.useState(null!=m?m:[]),[se,ie]=l.useState(!1),[ne,de]=l.useState(-1),[ue,ce]=l.useState([]);l.useEffect((()=>{V?ce(V):B&&ce([])}),[V]),l.useEffect((()=>{var e;if(!te&&B){const l=null===(e=null==X?void 0:X.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),le(t),oe(!0)}}),[te]);const pe=l.useMemo((()=>n.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(r.TemplateModalContext.Provider,Object.assign({value:{template:X,setTemplate:Z,device:z,setDevice:R,display_content:U,setDisplayContent:$,originalVariableList:ae,setOriginalVariableList:re,isError:G,setIsError:J,channel:v,globalNormalizedPlaceholders:pe,templateSelectionTriggered:se,setTemplateSelectionTriggered:ie,enabledCustomText:M,disableEditVariable:y,pod:A,extras:w,isWhatsappCarousel:Y,selectedCarouselIndex:ne,setSelectedCarouselIndex:de,isProductCarouselType:B,cardCount:null===(O=null===(D=u.components)||void 0===D?void 0:D[1].cards)||void 0===O?void 0:O.length,errorIndexes:K,setErrorIndexes:Q,pickerConf:N,carouselProducts:ue,setCarouselProducts:ce,disableEditExpiry:k,cardWidth:q,cardImages:ee}},{children:x?e.jsx(i.default,{channel:a.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(o.StyledModal,Object.assign({zIndex:b,centralContainerStyles:{width:Y?p||B?900:480:v===a.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==X?void 0:X.label,headingSubtitle:v===a.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(W=null==X?void 0:X.category)&&void 0!==W?W:"")} • ${null!==(F=null==X?void 0:X.templateCategory)&&void 0!==F?F:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e.jsx(i.default,{showSampleValues:L,showVariableMapping:p,channel:v,whatsappSpecificPickerMeta:S,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,variableListForImage:I&&(null==I?void 0:I.length)>0?I:P}),C?e.jsx(s.default,{isWhatsappCarousel:null!=Y&&Y,onSelect:function(){if((null==ue?void 0:ue.length)<1&&B)return void J(!0);const e=null==C?void 0:C(X,ae,null!=U?U:"",ue);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&Q(e.errorIndexes),(null==e?void 0:e.error)&&J(!!(null==e?void 0:e.error))):ie(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -44,6 +44,8 @@ export declare const TemplateModalContext: React.Context<{
     carouselProducts?: CarouselProduct[] | undefined;
     setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
     disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -82,4 +84,6 @@ export declare const useTemplateModalContext: () => {
     carouselProducts?: CarouselProduct[] | undefined;
     setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
     disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
 };

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("lodash"),s=require("react"),r=require("styled-components"),o=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var a=require("../../button/Button.js"),l=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../../assets/icons/box.svg.js"),f=require("../../../assets/icons/delete.svg.js"),g=require("../../../assets/icons/edit.svg.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=t=>{const{cardBody:i,deleteItem:s,editItem:r}=t;return e.jsxs(y,Object.assign({width:"100%"},{children:[e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(h.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(d.TitleRegular,{children:i})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[r&&e.jsx(l.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(l.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=j(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("lodash"),s=require("react"),r=require("styled-components"),l=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var o=require("../../button/Button.js"),a=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../../assets/icons/box.svg.js"),f=require("../../../assets/icons/delete.svg.js"),g=require("../../../assets/icons/edit.svg.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=t=>{const{cardBody:i,deleteItem:s,editItem:r}=t;return e.jsxs(y,Object.assign({width:"100%"},{children:[e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(h.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(d.TitleRegular,{children:i})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[r&&e.jsx(a.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(a.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=j(r).default.div`
 	width: ${e=>e.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@
 			color: #000000;
 		}
 	}
-`;exports.default=r=>{let{template:l,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}=r;var b,I;const{selectedCarouselIndex:C,setTemplate:w,pickerConf:q,isProductCarouselType:O,pod:T,cardCount:P,carouselProducts:k,setCarouselProducts:S,isError:B}=u.useTemplateModalContext(),[V,A]=s.useState(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[M,L]=s.useState(!1),[E,_]=s.useState(!1),[F,W]=s.useState(!1);s.useEffect((()=>{A(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:V})),O&&(null!==(b=null==k?void 0:k.length)&&void 0!==b?b:0)>0&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(x,{editItem:()=>L(!M),cardBody:`${null==k?void 0:k.length} Products Selected`,deleteItem:()=>{null==S||S([])}}),e.jsx(a.Button,{disabled:(null!==(I=null==k?void 0:k.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{_(!0),L(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),O&&0===(null==k?void 0:k.length)&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:B?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:B?"tertiaryGray":"dashBold",LeadingIcon:t.default,onClick:e=>{L(!0)}}),T===m.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{W(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:l,onTemplateChange:e=>{null==w||w(e)},showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}),M&&q&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:E,limit:null!=P?P:1,storeId:q.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const i of e){const e=null==i?void 0:i.collectionId,s=i.productId,r=i.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),s in t[e].products||(t[e].products[s]={variants:{},name:(null==i?void 0:i.productName)||"",image:(null==i?void 0:i.productImage)||""}),t[e].products[s].variants[r]={name:(null==i?void 0:i.name)||"",price:"",image:(null==i?void 0:i.image)||"",quantity:i.quantity||0,displayOrder:i.displayOrder}}return t}return{}})(null!=k?k:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{_(!1);const s=[],r=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const o=i[e].variants;if(void 0!==o&&Object.keys(o).length)for(const a of Object.keys(o)){const{name:l,image:n,quantity:d,displayOrder:c}=o[a],u={name:l,image:n,quantity:d,variantId:a,productId:e,displayOrder:c,collectionId:t,productName:i[e].name,productImage:i[e].image};r.push(u),s.push(n)}}}const o=r.sort(((e,t)=>e.displayOrder-t.displayOrder)),a=i.cloneDeep(Object.assign({},l));s.forEach(((e,t)=>{e&&(a.components[1].cards[t].components[0].example.header_handle=[e])})),null==w||w(a),null==S||S(o),L(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:M,onClose:()=>{L(!1)}}),F&&e.jsx(o.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:F,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{}})]})};
+`;exports.default=r=>{let{template:a,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}=r;var b,I;const{selectedCarouselIndex:C,setTemplate:w,pickerConf:q,isProductCarouselType:O,pod:T,cardCount:P,carouselProducts:k,setCarouselProducts:S,isError:B,cardImages:V}=u.useTemplateModalContext(),[A,M]=s.useState(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[L,E]=s.useState(!1),[_,F]=s.useState(!1),[D,W]=s.useState(!1);s.useEffect((()=>{M(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:A})),O&&(null!==(b=null==k?void 0:k.length)&&void 0!==b?b:0)>0&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(x,{editItem:()=>E(!L),cardBody:`${null==k?void 0:k.length} Products Selected`,deleteItem:()=>{const e=i.cloneDeep(Object.assign({},a));e&&(null==V||V.forEach(((t,i)=>{var s;e.components[1].cards[i].components[0].example.header_handle=[null!==(s=V[i])&&void 0!==s?s:""]})),null==w||w(e)),null==S||S([])}}),e.jsx(o.Button,{disabled:(null!==(I=null==k?void 0:k.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{F(!0),E(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),O&&0===(null==k?void 0:k.length)&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:B?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:B?"tertiaryGray":"dashBold",LeadingIcon:t.default,onClick:e=>{E(!0)}}),T===m.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{W(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:a,onTemplateChange:e=>{null==w||w(e)},showVariableModal:f,variableList:g,variableListForImage:j,discountCode:y,setDiscountCode:v}),L&&q&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:_,limit:null!=P?P:1,storeId:q.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const i of e){const e=null==i?void 0:i.collectionId,s=i.productId,r=i.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),s in t[e].products||(t[e].products[s]={variants:{},name:(null==i?void 0:i.productName)||"",image:(null==i?void 0:i.productImage)||""}),t[e].products[s].variants[r]={name:(null==i?void 0:i.name)||"",price:"",image:(null==i?void 0:i.image)||"",quantity:i.quantity||0,displayOrder:i.displayOrder}}return t}return{}})(null!=k?k:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{F(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:o,image:a,quantity:n,displayOrder:d}=r[l],c={name:o,image:a,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};s.push(c)}}}const r=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=s.map((e=>e.image)),o=i.cloneDeep(Object.assign({},a));o&&(l.forEach(((e,t)=>{var i;o.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(i=null==V?void 0:V[t])&&void 0!==i?i:""]})),null==w||w(o)),null==S||S(r),E(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:L,onClose:()=>{E(!1)}}),D&&e.jsx(l.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:D,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),r=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);const u=e=>/^{{.*}}$/.test(e);exports.default=d=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableListForImage:E}=d;var g,h,j,b,_,M,y,x;const{disableEditVariable:A}=l.useTemplateModalContext(),[C,S]=i.useState(void 0),[T,I]=i.useState(),[q,R]=i.useState(),[D,w]=i.useState(!1),H=c.default.createRef(),[O,k]=i.useState(!1),[P,F]=i.useState(""),{template:U,setTemplate:Y}=l.useTemplateModalContext(),{uploadMediaFiles:L,uploadMediaLink:N}=f;let V;function G(){var e;(null===(e=null==H?void 0:H.current)||void 0===e?void 0:e.click)&&H.current.click()}function z(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate({file:t});if(a)F(a),k(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield L({file:t,fileName:C,isImage:e});if(a.success){const[e]=t.type.split("/");v(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}}else F("An unknown technical error occurred"),k(!1)}))}return V=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(r.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i,n;return e.__awaiter(this,void 0,void 0,(function*(){if(F(""),R(""),w(!1),t)if(t.startsWith("https"))try{if(k(!0),N){const e=yield N(t);console.log("73 response",e);const{type:n,size:l,success:r}=e;if(r){const t=(new a.FileUploaderHelper).validate({linkData:{type:n,size:l}});if(console.log("82 error",t),t)return F(t),void k(!1);const[r]=n.split("/");v(null!==(i=e.url)&&void 0!==i?i:"",o.HEADER_TYPES[r.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}else{const e=yield fetch(t),i=yield e.blob();yield z(i)}}catch(e){F("An unknown technical error occurred")}else if(u(t)){R(t);const e=Object.assign({},U);if(e.components){const i=null===(n=null==e?void 0:e.components)||void 0===n?void 0:n.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const a=Object.assign(Object.assign({},e.components[i]),{format:p.format,example:{header_handle:[t]}}),n=[...e.components];n[i]=a,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),k(!1),null==Y||Y(Object.assign({},e))}else k(!1),F("Invalid URL or variable");else G()}))},variableListForImage:E||[],setOpenEditMedia:w,openEditMedia:D}),!!T&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:T,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){k(!1),F("");const e=yield fetch(t);z(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I(""),H.current&&(H.current.value="")}}),t.jsx("input",{ref:H,style:{display:"none"},type:"file",onChange:function(e){var t;F(""),k(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),S(""),e.onload=()=>{I(e.result),S(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else z(i)},accept:V}),t.jsx(s.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)||void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:G,mediaType:null==p?void 0:p.format,error:P,isLoading:O,setOpenEditMedia:w,selectedVariable:u(null!==(M=null===(_=null===(b=null==p?void 0:p.example)||void 0===b?void 0:b.header_handle)||void 0===_?void 0:_[0])&&void 0!==M?M:"")?null===(x=null===(y=null==p?void 0:p.example)||void 0===y?void 0:y.header_handle)||void 0===x?void 0:x[0]:q,disableEditVariable:A})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),r=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(i);const c=e=>/^{{.*}}$/.test(e);exports.default=d=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableListForImage:E}=d;var g,h,j,b,_,M,y,x;const{disableEditVariable:A}=l.useTemplateModalContext(),[C,S]=i.useState(void 0),[T,I]=i.useState(),[q,R]=i.useState(),[D,w]=i.useState(!1),H=u.default.createRef(),[O,k]=i.useState(!1),[P,F]=i.useState(""),{template:U,setTemplate:Y}=l.useTemplateModalContext(),{uploadMediaFiles:L,uploadMediaLink:N}=f;let V;function G(){var e;(null===(e=null==H?void 0:H.current)||void 0===e?void 0:e.click)&&H.current.click()}function z(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate({file:t});if(a)F(a),k(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield L({file:t,fileName:C,isImage:e});if(a.success){const[e]=t.type.split("/");v(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}}else F("An unknown technical error occurred"),k(!1)}))}return V=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(r.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i,n;return e.__awaiter(this,void 0,void 0,(function*(){if(F(""),R(""),w(!1),t)if(t.startsWith("https"))try{if(k(!0),N){const e=yield N(t),{type:n,size:l,success:r}=e;if(r){const t=(new a.FileUploaderHelper).validate({linkData:{type:n,size:l}});if(t)return F(t),void k(!1);const[r]=n.split("/");v(null!==(i=e.url)&&void 0!==i?i:"",o.HEADER_TYPES[r.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}else{const e=yield fetch(t),i=yield e.blob();yield z(i)}}catch(e){F("An unknown technical error occurred")}else if(c(t)){R(t);const e=Object.assign({},U);if(e.components){const i=null===(n=null==e?void 0:e.components)||void 0===n?void 0:n.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const a=Object.assign(Object.assign({},e.components[i]),{format:p.format,example:{header_handle:[t]}}),n=[...e.components];n[i]=a,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),k(!1),null==Y||Y(Object.assign({},e))}else k(!1),F("Invalid URL or variable");else G()}))},variableListForImage:E||[],setOpenEditMedia:w,openEditMedia:D}),!!T&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:T,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){k(!1),F("");const e=yield fetch(t);z(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I(""),H.current&&(H.current.value="")}}),t.jsx("input",{ref:H,style:{display:"none"},type:"file",onChange:function(e){var t;F(""),k(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),S(""),e.onload=()=>{I(e.result),S(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else z(i)},accept:V}),t.jsx(s.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)||void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:G,mediaType:null==p?void 0:p.format,error:P,isLoading:O,setOpenEditMedia:w,selectedVariable:c(null!==(M=null===(_=null===(b=null==p?void 0:p.example)||void 0===b?void 0:b.header_handle)||void 0===_?void 0:_[0])&&void 0!==M?M:"")?null===(x=null===(y=null==p?void 0:p.example)||void 0===y?void 0:y.header_handle)||void 0===x?void 0:x[0]:q,disableEditVariable:A})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../context/templateModalContext.js"),i=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:C,whatsappSpecificPickerMeta:j,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,I,D,w,R,A,P,S;const N=f.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:Y,isProductCarouselType:F}=l.useTemplateModalContext(),{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=s.getAllDataFromTemplateComponent(f),[G,J]=n.useState(!1),[Z,ee]=n.useState(-1===Y?{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{});console.log("templateComponentData : ",Z);const[te,ne]=n.useState(!1);function oe(e,n,o){var l,i,s,a,d,r,p,c;const u=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Y&&Y>-1&&F){const e=Object.assign({},f).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,n,l;if("BUTTONS"===e.type){const i=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==i?void 0:i[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(l=e.buttons)||void 0===l?void 0:l.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==C||C(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const l="custom"===n&&"string"==typeof e,i=l?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[i]}),console.log("templateCopy test: ",o,s,n,e);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=l?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=u.components,e.mapping.cards[Y]=u.mapping,console.log("templateCopy: ",e),null==C||C(Object.assign({},e))}else null==C||C(u)}function le(e,n,o){var l,i,s,a,d,r;const p=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f);if(null!=Y&&Y>-1&&F){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,l,i;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(l=null==s?void 0:s[o])&&void 0!==l?l:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(i=t.buttons)||void 0===i?void 0:i.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),l=t.cloneDeep(f);return l.components=n,void(null==C||C(Object.assign({},l)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const l=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),i=Object.assign(Object.assign({},p.components[c]),{buttons:l}),s=[...p.components];s[c]=i,p.components=s}}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,console.log("templateCopy 2: ",e),null==C||C(Object.assign({},e))}else null==C||C(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(t=null==Q?void 0:Q.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",Z)}),[Z]),n.useEffect((()=>{var e,t,n,o;if(null!=Y&&Y>-1){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i}=s.getAllDataFromTemplateComponent(f);ee({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i})}}),[Y]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1&&te){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),ne(!1)}}),[te]);const ie=i.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!F&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:j,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,n){var o,l,i,s,a;let d;console.log("updateTemplateImageUrl: ",e,n),d=null!=Y&&Y>-1?{components:null===(l=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===l?void 0:l[Y].components,mapping:null===(s=null===(i=null==f?void 0:f.mapping)||void 0===i?void 0:i.cards)||void 0===s?void 0:s[Y]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==C||C(Object.assign({},e)),ne(!0)}else null==C||C(Object.assign({},d))},template:f,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.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===(V=Z.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?M.cards[Y]:M,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==j?void 0:j.CTAoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedURLTemplateBtn:oe,variableList:O},`${n}_${Y}`)})),(null===(q=null===(k=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(D=null==Q?void 0:Q.backTrackExtra)||void 0===D?void 0:D[1]})),null===(R=null===(w=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==j?void 0:j.QRBoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedQRBTemplateBtn:le},`${n}_${Y}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,l,i;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(l=t.buttonVariable)&&void 0!==l?l:"",type:"string",isEditableVariable:!0,index:null!==(i=t.index)&&void 0!==i?i:0},showVariableModal:!0,variableList:ie,componentType:"BUTTONS"},n)}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../context/templateModalContext.js"),i=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:C,whatsappSpecificPickerMeta:j,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,D,I,w,R,A,P,S;const N=f.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:Y,isProductCarouselType:F}=l.useTemplateModalContext(),{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=s.getAllDataFromTemplateComponent(f),[G,J]=n.useState(!1),[Z,ee]=n.useState(-1===Y?{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{});console.log("templateComponentData : ",Z);const[te,ne]=n.useState(!1);function oe(e,n,o){var l,i,s,a,d,r,p,c;const u=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Y&&Y>-1&&F){const e=Object.assign({},f).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,n,l;if("BUTTONS"===e.type){const i=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==i?void 0:i[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(l=e.buttons)||void 0===l?void 0:l.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==C||C(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const l="custom"===n&&"string"==typeof e,i=l?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[i]}),console.log("templateCopy test: ",o,s,n,e);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=l?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=u.components,e.mapping.cards[Y]=u.mapping,console.log("templateCopy: ",e),null==C||C(Object.assign({},e))}else null==C||C(u)}function le(e,n,o){var l,i,s,a,d,r;const p=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f);if(null!=Y&&Y>-1&&F){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,l,i;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(l=null==s?void 0:s[o])&&void 0!==l?l:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(i=t.buttons)||void 0===i?void 0:i.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),l=t.cloneDeep(f);return l.components=n,void(null==C||C(Object.assign({},l)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const l=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),i=Object.assign(Object.assign({},p.components[c]),{buttons:l}),s=[...p.components];s[c]=i,p.components=s}}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,console.log("templateCopy 2: ",e),null==C||C(Object.assign({},e))}else null==C||C(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(t=null==Q?void 0:Q.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",Z)}),[Z]),n.useEffect((()=>{var e,t,n,o;if(null!=Y&&Y>-1){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i}=s.getAllDataFromTemplateComponent(f);ee({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i})}}),[Y]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1&&te){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),ne(!1)}}),[te]);const ie=i.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!F&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:j,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,n){var o,l,i,s,a;let d;d=null!=Y&&Y>-1?{components:null===(l=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===l?void 0:l[Y].components,mapping:null===(s=null===(i=null==f?void 0:f.mapping)||void 0===i?void 0:i.cards)||void 0===s?void 0:s[Y]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==C||C(Object.assign({},e)),ne(!0)}else null==C||C(Object.assign({},d))},template:f,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.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===(V=Z.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?M.cards[Y]:M,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==j?void 0:j.CTAoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedURLTemplateBtn:oe,variableList:O},`${n}_${Y}`)})),(null===(q=null===(k=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(D=null==Q?void 0:Q.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==j?void 0:j.QRBoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedQRBTemplateBtn:le},`${n}_${Y}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,l,i;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(l=t.buttonVariable)&&void 0!==l?l:"",type:"string",isEditableVariable:!0,index:null!==(i=t.index)&&void 0!==i?i:0},showVariableModal:!0,variableList:ie,componentType:"BUTTONS"},n)}))]}))};

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

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

package/dist/esm/components/carousel-preview/CarouselPreviewCard.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import t from"react";import{TemplatePreview as a}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const p=t.forwardRef((t=>{let{channel:p,template:r,showSampleValues:s,carouselCardIndex:i}=t;return e("div",Object.assign({style:{width:350}},{children:e(a,{showSampleValues:s,template:r,channel:p,size:"small",hideHeader:!0,carouselCardIndex:i,isWhatsappCarousel:!0})}))}));export{p as default};
+import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}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"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,template:s,showSampleValues:m,carouselCardIndex:l}=t;const{cardWidth:i}=a();return e("div",Object.assign({style:{width:null!=i?i:360}},{children:e(p,{showSampleValues:m,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:l,isWhatsappCarousel:!0})}))}));export{r as default};

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -15,8 +15,4 @@ export declare class FileUploaderHelper {
             size: number;
         };
     }): string | undefined;
-    validateFileUlrUpload(inputData: {
-        type: string;
-        size: number;
-    }): void;
 }

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},a=["mp4","png","jpeg","jpg","pdf"];class o{validate(o){const{file:r,linkData:s}=o;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!s)return i;n=s.size,f=s.type.split("/")[0],d=s.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!a.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}validateFileUlrUpload(e){}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,o as FileUploaderHelper,l as SIZE_LIMIT_MAP,a as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},o=["mp4","png","jpeg","jpg","pdf"];class s{validate(s){const{file:r,linkData:a}=s;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!a)return i;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!o.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,s as FileUploaderHelper,l as SIZE_LIMIT_MAP,o as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};

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

@@ -44,5 +44,6 @@ export interface TemplateContextMapperProps {
     };
     selectedCarouselProducts?: CarouselProduct[];
     disableEditExpiry?: boolean;
+    cardWidth?: number;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as r,useMemo as i}from"react";import a from"../../utils/StringUtils.js";import{StyledModal as s}from"../modals/styledModal.js";import{CHANNEL_TYPE as n}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as u}from"./utils/convertPlaceholdersToBikDropdown.js";const m=m=>{let{selectedTemplate:v,closeDialog:h,showVariableMapping:C,channel:b,htmlContent:g,templateVariables:x,onTemplateSelect:P,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:f,zIndex:E,showVariableModal:I,variableList:y,discountCode:w,setDiscountCode:M,onBackPress:L,enabledCustomText:V,variableListForImage:j,showSampleValues:k,disableEditVariable:A,pod:D,extras:O,pickerConf:F,selectedCarouselProducts:W,disableEditExpiry:z}=m;var B,H,U,$,N,R;t((()=>{K(g)}),[g]);const _=b===n.WHATSAPP&&"CAROUSEL"===(null===(H=null===(B=v.components)||void 0===B?void 0:B[1])||void 0===H?void 0:H.type),[q,G]=r(b===n.EMAIL||_?"desktop":"mobile"),[J,K]=r(g),[Q,X]=r(!1),[Y,Z]=r([]),[ee,le]=r(v),[oe,te]=r(null!=x?x:[]),[re,ie]=r(!1),[ae,se]=r(-1),[ne,de]=r([]);t((()=>{W?de(W):v.isProductCarouselType&&de([])}),[W]);const ce=i((()=>u(S)),[S]);return e(d.Provider,Object.assign({value:{template:ee,setTemplate:le,device:q,setDevice:G,display_content:J,setDisplayContent:K,originalVariableList:oe,setOriginalVariableList:te,isError:Q,setIsError:X,channel:b,globalNormalizedPlaceholders:ce,templateSelectionTriggered:re,setTemplateSelectionTriggered:ie,enabledCustomText:V,disableEditVariable:A,pod:D,extras:O,isWhatsappCarousel:_,selectedCarouselIndex:ae,setSelectedCarouselIndex:se,isProductCarouselType:v.isProductCarouselType,cardCount:null===($=null===(U=v.components)||void 0===U?void 0:U[1].cards)||void 0===$?void 0:$.length,errorIndexes:Y,setErrorIndexes:Z,pickerConf:F,carouselProducts:ne,setCarouselProducts:de,disableEditExpiry:z}},{children:T?e(p,{channel:n.EMAIL,hideHeader:!0}):l(s,Object.assign({zIndex:E,centralContainerStyles:{width:_?900:b===n.EMAIL&&C?1e3:800},open:!0,onClose:()=>{null==h||h()},headingTitle:null==ee?void 0:ee.label,headingSubtitle:b===n.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(N=null==ee?void 0:ee.category)&&void 0!==N?N:"")} • ${null!==(R=null==ee?void 0:ee.templateCategory)&&void 0!==R?R:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(p,{showSampleValues:k,showVariableMapping:C,channel:b,whatsappSpecificPickerMeta:f,showVariableModal:I,variableList:y,discountCode:w,setDiscountCode:M,variableListForImage:j&&(null==j?void 0:j.length)>0?j:y}),P?e(c,{isWhatsappCarousel:null!=_&&_,onSelect:function(){if((null==ne?void 0:ne.length)<1&&v.isProductCarouselType)return void X(!0);const e=null==P?void 0:P(ee,oe,null!=J?J:"",ne);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&Z(e.errorIndexes),(null==e?void 0:e.error)&&X(!!(null==e?void 0:e.error))):ie(!0)}}):e(o,{})]}))}))};export{m as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as r,useMemo as i}from"react";import a from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import u from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const m=m=>{let{selectedTemplate:v,closeDialog:h,showVariableMapping:C,channel:b,htmlContent:g,templateVariables:x,onTemplateSelect:f,globalPlaceholders:E,showOnlyContent:P,whatsappSpecificPickerMeta:S,zIndex:I,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,onBackPress:L,enabledCustomText:V,variableListForImage:j,showSampleValues:A,disableEditVariable:k,pod:D,extras:O,pickerConf:W,selectedCarouselProducts:F,disableEditExpiry:H,cardWidth:z}=m;var B,R,U,$,_,N;t((()=>{X(g)}),[g]);const q=b===s.WHATSAPP&&"CAROUSEL"===(null===(R=null===(B=v.components)||void 0===B?void 0:B[1])||void 0===R?void 0:R.type),G=v.isProductCarouselType,[J,K]=r(b===s.EMAIL||q?"desktop":"mobile"),[Q,X]=r(g),[Y,Z]=r(!1),[ee,le]=r([]),[oe,te]=r(v),[re,ie]=r([]),[ae,ne]=r(!1),[se,de]=r(null!=x?x:[]),[ce,ue]=r(!1),[pe,me]=r(-1),[ve,he]=r([]);t((()=>{F?he(F):G&&he([])}),[F]),t((()=>{var e;if(!ae&&G){const l=null===(e=null==oe?void 0:oe.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),ie(o),ne(!0)}}),[ae]);const Ce=i((()=>p(E)),[E]);return e(d.Provider,Object.assign({value:{template:oe,setTemplate:te,device:J,setDevice:K,display_content:Q,setDisplayContent:X,originalVariableList:se,setOriginalVariableList:de,isError:Y,setIsError:Z,channel:b,globalNormalizedPlaceholders:Ce,templateSelectionTriggered:ce,setTemplateSelectionTriggered:ue,enabledCustomText:V,disableEditVariable:k,pod:D,extras:O,isWhatsappCarousel:q,selectedCarouselIndex:pe,setSelectedCarouselIndex:me,isProductCarouselType:G,cardCount:null===($=null===(U=v.components)||void 0===U?void 0:U[1].cards)||void 0===$?void 0:$.length,errorIndexes:ee,setErrorIndexes:le,pickerConf:W,carouselProducts:ve,setCarouselProducts:he,disableEditExpiry:H,cardWidth:z,cardImages:re}},{children:P?e(u,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:I,centralContainerStyles:{width:q?C||G?900:480:b===s.EMAIL&&C?1e3:800},open:!0,onClose:()=>{null==h||h()},headingTitle:null==oe?void 0:oe.label,headingSubtitle:b===s.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(_=null==oe?void 0:oe.category)&&void 0!==_?_:"")} • ${null!==(N=null==oe?void 0:oe.templateCategory)&&void 0!==N?N:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(u,{showSampleValues:A,showVariableMapping:C,channel:b,whatsappSpecificPickerMeta:S,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,variableListForImage:j&&(null==j?void 0:j.length)>0?j:y}),f?e(c,{isWhatsappCarousel:null!=q&&q,onSelect:function(){if((null==ve?void 0:ve.length)<1&&G)return void Z(!0);const e=null==f?void 0:f(oe,se,null!=Q?Q:"",ve);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&le(e.errorIndexes),(null==e?void 0:e.error)&&Z(!!(null==e?void 0:e.error))):ue(!0)}}):e(o,{})]}))}))};export{m as TemplateContextMapper};

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

@@ -44,6 +44,8 @@ export declare const TemplateModalContext: React.Context<{
     carouselProducts?: CarouselProduct[] | undefined;
     setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
     disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -82,4 +84,6 @@ export declare const useTemplateModalContext: () => {
     carouselProducts?: CarouselProduct[] | undefined;
     setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
     disableEditExpiry?: boolean | undefined;
+    cardWidth?: number | undefined;
+    cardImages?: string[] | undefined;
 };

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as r}from"lodash";import{useState as s,useEffect as l}from"react";import n from"styled-components";import{AddVariableV2SideModal as a}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as d}from"../../button/Button.js";import{IconButton as c}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as m,BodyCaption as u,TitleRegular as h}from"../../TypographyStyle.js";import{ProductPickerModal as f}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import y from"./EditWhatsAppTemplateV2.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 b}from"../../template-preview/models/WhatsAppTemplate.js";import v from"../../../assets/icons/box.svg.js";import j from"../../../assets/icons/delete.svg.js";import x from"../../../assets/icons/edit.svg.js";const I=n=>{let{template:c,whatsappSpecificPickerMeta:h,showVariableModal:v,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}=n;var O,T;const{selectedCarouselIndex:k,setTemplate:P,pickerConf:A,isProductCarouselType:S,pod:V,cardCount:B,carouselProducts:L,setCarouselProducts:E,isError:M}=g(),[_,F]=s(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[W,z]=s(!1),[D,q]=s(!1),[R,N]=s(!1);l((()=>{F(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[k]);return e("div",{children:[t(m,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:_})),S&&(null!==(O=null==L?void 0:L.length)&&void 0!==O?O:0)>0&&null!=k&&k>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(w,{editItem:()=>z(!W),cardBody:`${null==L?void 0:L.length} Products Selected`,deleteItem:()=>{null==E||E([])}}),t(d,{disabled:(null!==(T=null==L?void 0:L.length)&&void 0!==T?T:0)<=1,style:{alignSelf:"flex-end",background:p.surface.subdued},onClick:()=>{q(!0),z(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),S&&0===(null==L?void 0:L.length)&&null!=k&&k>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:M?`2px dashed ${p.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:M?"tertiaryGray":"dashBold",LeadingIcon:i,onClick:e=>{z(!0)}}),V===b.CHATBOT&&e(o,{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(u,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{N(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==P||P(e)},showVariableModal:v,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}),W&&A&&t(f,{zIndex:200,rearrangeEnabled:D,limit:null!=B?B:1,storeId:A.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(null!=L?L:[]),collectionFetcher:A.fetchCollections,productFetcher:A.fetchProducts,onAdd:(e,t)=>{q(!1);const o=[],i=[];delete e.isCustom;for(const t of Object.keys(e)){const r=e[t].products;if(void 0!==r&&Object.keys(r).length)for(const e of Object.keys(r)){const s=r[e].variants;if(void 0!==s&&Object.keys(s).length)for(const l of Object.keys(s)){const{name:n,image:a,quantity:d,displayOrder:c}=s[l],p={name:n,image:a,quantity:d,variantId:l,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(p),o.push(a)}}}const s=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=r(Object.assign({},c));o.forEach(((e,t)=>{e&&(l.components[1].cards[t].components[0].example.header_handle=[e])})),null==P||P(l),null==E||E(s),z(!1)},searchInCollectionFetcher:A.searchInCollection,searchFetcher:A.searchProducts,visible:W,onClose:()=>{z(!1)}}),R&&t(a,{zIndex:2e3,data:null!=j?j:[],showVariable:R,setShowVariable:N,placeholder:"Add a variable",customTrigger:e=>{}})]})},w=o=>{const{cardBody:i,deleteItem:r,editItem:s}=o;return e(C,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(v,{})})),t("div",Object.assign({className:"card-body"},{children:t(h,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[s&&t(c,{style:{display:"flex"},Icon:x,onClick:e=>{s(),e.stopPropagation()}}),t(c,{style:{display:"flex",color:"#919191"},Icon:j,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},C=n.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as r}from"lodash";import{useState as l,useEffect as s}from"react";import n from"styled-components";import{AddVariableV2SideModal as a}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as d}from"../../button/Button.js";import{IconButton as c}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as m,BodyCaption as u,TitleRegular as h}from"../../TypographyStyle.js";import{ProductPickerModal as f}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import y from"./EditWhatsAppTemplateV2.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 v}from"../../template-preview/models/WhatsAppTemplate.js";import b from"../../../assets/icons/box.svg.js";import j from"../../../assets/icons/delete.svg.js";import x from"../../../assets/icons/edit.svg.js";const I=n=>{let{template:c,whatsappSpecificPickerMeta:h,showVariableModal:b,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}=n;var O,T;const{selectedCarouselIndex:k,setTemplate:P,pickerConf:A,isProductCarouselType:S,pod:V,cardCount:B,carouselProducts:E,setCarouselProducts:L,isError:_,cardImages:M}=g(),[F,W]=l(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[z,D]=l(!1),[q,R]=l(!1),[N,$]=l(!1);s((()=>{W(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[k]);return e("div",{children:[t(m,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:F})),S&&(null!==(O=null==E?void 0:E.length)&&void 0!==O?O:0)>0&&null!=k&&k>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(w,{editItem:()=>D(!z),cardBody:`${null==E?void 0:E.length} Products Selected`,deleteItem:()=>{const e=r(Object.assign({},c));e&&(null==M||M.forEach(((t,o)=>{var i;e.components[1].cards[o].components[0].example.header_handle=[null!==(i=M[o])&&void 0!==i?i:""]})),null==P||P(e)),null==L||L([])}}),t(d,{disabled:(null!==(T=null==E?void 0:E.length)&&void 0!==T?T:0)<=1,style:{alignSelf:"flex-end",background:p.surface.subdued},onClick:()=>{R(!0),D(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),S&&0===(null==E?void 0:E.length)&&null!=k&&k>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:_?`2px dashed ${p.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:i,onClick:e=>{D(!0)}}),V===v.CHATBOT&&e(o,{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(u,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{$(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==P||P(e)},showVariableModal:b,variableList:j,variableListForImage:x,discountCode:I,setDiscountCode:C}),z&&A&&t(f,{zIndex:200,rearrangeEnabled:q,limit:null!=B?B:1,storeId:A.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(null!=E?E:[]),collectionFetcher:A.fetchCollections,productFetcher:A.fetchProducts,onAdd:(e,t)=>{R(!1);const o=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:s,image:n,quantity:a,displayOrder:d}=r[l],c={name:s,image:n,quantity:a,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};o.push(c)}}}const i=o.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=o.map((e=>e.image)),s=r(Object.assign({},c));s&&(l.forEach(((e,t)=>{var o;s.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(o=null==M?void 0:M[t])&&void 0!==o?o:""]})),null==P||P(s)),null==L||L(i),D(!1)},searchInCollectionFetcher:A.searchInCollection,searchFetcher:A.searchProducts,visible:z,onClose:()=>{D(!1)}}),N&&t(a,{zIndex:2e3,data:null!=j?j:[],showVariable:N,setShowVariable:$,placeholder:"Add a variable",customTrigger:e=>{}})]})},w=o=>{const{cardBody:i,deleteItem:r,editItem:l}=o;return e(C,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(b,{})})),t("div",Object.assign({className:"card-body"},{children:t(h,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[l&&t(c,{style:{display:"flex"},Icon:x,onClick:e=>{l(),e.stopPropagation()}}),t(c,{style:{display:"flex",color:"#919191"},Icon:j,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},C=n.div`
 	width: ${e=>e.width};
 	padding: 12px;
 	display: flex;

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as r}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import c from"./EditMediaModal.js";import p from"./EditMediaV2.js";const m=e=>/^{{.*}}$/.test(e),u=u=>{let{mediaComponent:f,template:v,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:h,variableListForImage:b}=u;var j,M,y,E,C,I,O,k;const{disableEditVariable:x}=d(),[A,w]=a(void 0),[T,U]=a(),[F,L]=a(),[R,_]=a(!1),D=n.createRef(),[N,V]=a(!1),[G,z]=a(""),{template:S,setTemplate:B}=d(),{uploadMediaFiles:H,uploadMediaLink:P}=h;let W;function X(){var e;(null===(e=null==D?void 0:D.current)||void 0===e?void 0:e.click)&&D.current.click()}function $(o){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){const t=e.validate({file:o});if(t)z(t),V(!1);else{const e=f.format===s.IMAGE,t=yield H({file:o,fileName:A,isImage:e});if(t.success){const[e]=o.type.split("/");g(null!==(i=t.url)&&void 0!==i?i:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else z("An unknown technical error occurred");V(!1)}}else z("An unknown technical error occurred"),V(!1)}))}return W=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",o(i,{children:[t(c,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(o){var i,t;return e(this,void 0,void 0,(function*(){if(z(""),L(""),_(!1),o)if(o.startsWith("https"))try{if(V(!0),P){const e=yield P(o);console.log("73 response",e);const{type:t,size:n,success:a}=e;if(a){const o=(new l).validate({linkData:{type:t,size:n}});if(console.log("82 error",o),o)return z(o),void V(!1);const[a]=t.split("/");g(null!==(i=e.url)&&void 0!==i?i:"",s[a.toUpperCase()])}else z("An unknown technical error occurred");V(!1)}else{const e=yield fetch(o),i=yield e.blob();yield $(i)}}catch(e){z("An unknown technical error occurred")}else if(m(o)){L(o);const e=Object.assign({},S);if(e.components){const i=null===(t=null==e?void 0:e.components)||void 0===t?void 0:t.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const t=Object.assign(Object.assign({},e.components[i]),{format:f.format,example:{header_handle:[o]}}),n=[...e.components];n[i]=t,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[o]})),V(!1),null==B||B(Object.assign({},e))}else V(!1),z("Invalid URL or variable");else X()}))},variableListForImage:b||[],setOpenEditMedia:_,openEditMedia:R}),!!T&&t(r,{aspectRatio:15/8,src:T,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){V(!1),z("");const e=yield fetch(o);$(yield e.blob()).then((()=>{U(void 0)}))}))},onCancel:()=>{V(!1),U(""),D.current&&(D.current.value="")}}),t("input",{ref:D,style:{display:"none"},type:"file",onChange:function(e){var o;z(""),V(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(f.format===s.IMAGE){const e=new FileReader;U(""),w(""),e.onload=()=>{U(e.result),w(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else $(i)},accept:W}),t(p,{imageName:null!==(y=null===(M=null==f?void 0:f.example)||void 0===M?void 0:M.header_handle)&&void 0!==y?y:[],handleImageChange:X,mediaType:null==f?void 0:f.format,error:G,isLoading:N,setOpenEditMedia:_,selectedVariable:m(null!==(I=null===(C=null===(E=null==f?void 0:f.example)||void 0===E?void 0:E.header_handle)||void 0===C?void 0:C[0])&&void 0!==I?I:"")?null===(k=null===(O=null==f?void 0:f.example)||void 0===O?void 0:O.header_handle)||void 0===k?void 0:k[0]:F,disableEditVariable:x})]})};export{u as default};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as i,Fragment as o,jsx as t}from"react/jsx-runtime";import n,{useState as a}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as r}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import c from"./EditMediaV2.js";const m=e=>/^{{.*}}$/.test(e),u=u=>{let{mediaComponent:f,template:v,updateTemplateImageUrl:h,whatsappSpecificPickerMeta:g,variableListForImage:b}=u;var j,M,y,E,C,I,O,k;const{disableEditVariable:x}=d(),[A,w]=a(void 0),[T,U]=a(),[F,L]=a(),[R,_]=a(!1),D=n.createRef(),[N,V]=a(!1),[G,z]=a(""),{template:S,setTemplate:B}=d(),{uploadMediaFiles:H,uploadMediaLink:P}=g;let W;function X(){var e;(null===(e=null==D?void 0:D.current)||void 0===e?void 0:e.click)&&D.current.click()}function $(i){var o;return e(this,void 0,void 0,(function*(){const e=new l;if(i instanceof Blob){const t=e.validate({file:i});if(t)z(t),V(!1);else{const e=f.format===s.IMAGE,t=yield H({file:i,fileName:A,isImage:e});if(t.success){const[e]=i.type.split("/");h(null!==(o=t.url)&&void 0!==o?o:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else z("An unknown technical error occurred");V(!1)}}else z("An unknown technical error occurred"),V(!1)}))}return W=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",i(o,{children:[t(p,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(i){var o,t;return e(this,void 0,void 0,(function*(){if(z(""),L(""),_(!1),i)if(i.startsWith("https"))try{if(V(!0),P){const e=yield P(i),{type:t,size:n,success:a}=e;if(a){const i=(new l).validate({linkData:{type:t,size:n}});if(i)return z(i),void V(!1);const[a]=t.split("/");h(null!==(o=e.url)&&void 0!==o?o:"",s[a.toUpperCase()])}else z("An unknown technical error occurred");V(!1)}else{const e=yield fetch(i),o=yield e.blob();yield $(o)}}catch(e){z("An unknown technical error occurred")}else if(m(i)){L(i);const e=Object.assign({},S);if(e.components){const o=null===(t=null==e?void 0:e.components)||void 0===t?void 0:t.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const t=Object.assign(Object.assign({},e.components[o]),{format:f.format,example:{header_handle:[i]}}),n=[...e.components];n[o]=t,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),V(!1),null==B||B(Object.assign({},e))}else V(!1),z("Invalid URL or variable");else X()}))},variableListForImage:b||[],setOpenEditMedia:_,openEditMedia:R}),!!T&&t(r,{aspectRatio:15/8,src:T,onCropComplete:function(i){return e(this,void 0,void 0,(function*(){V(!1),z("");const e=yield fetch(i);$(yield e.blob()).then((()=>{U(void 0)}))}))},onCancel:()=>{V(!1),U(""),D.current&&(D.current.value="")}}),t("input",{ref:D,style:{display:"none"},type:"file",onChange:function(e){var i;z(""),V(!0);const o=null===(i=e.target.files)||void 0===i?void 0:i[0];if(f.format===s.IMAGE){const e=new FileReader;U(""),w(""),e.onload=()=>{U(e.result),w(null==o?void 0:o.name)},o&&e.readAsDataURL(o)}else $(o)},accept:W}),t(c,{imageName:null!==(y=null===(M=null==f?void 0:f.example)||void 0===M?void 0:M.header_handle)&&void 0!==y?y:[],handleImageChange:X,mediaType:null==f?void 0:f.format,error:G,isLoading:N,setOpenEditMedia:_,selectedVariable:m(null!==(I=null===(C=null===(E=null==f?void 0:f.example)||void 0===E?void 0:E.header_handle)||void 0===C?void 0:C[0])&&void 0!==I?I:"")?null===(k=null===(O=null==f?void 0:f.example)||void 0===O?void 0:O.header_handle)||void 0===k?void 0:k[0]:F,disableEditVariable:x})]})};export{u as default};

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

@@ -1 +1 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,D,_,M;const Q=C.isCarouselType,{originalVariableList:q,pod:Y,extras:H,selectedCarouselIndex:K,isProductCarouselType:W}=s(),{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=d(C),[Z,oo]=e(!1),[no,to]=e(-1===K?{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{});console.log("templateComponentData : ",no);const[eo,io]=e(!1);function lo(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=K&&K>-1&&W){const o=Object.assign({},C).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 s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.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:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?oo(!0):(oo(!1),null==B||B(""))}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=u.components,o.mapping.cards[K]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function so(o,n,e){var i,l,s,a,d,r;const p=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C);if(null!=K&&K>-1&&W){const n=Object.assign({},C).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 s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].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!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].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({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=p.components,o.mapping.cards[K]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))oo(!0);else{oo(!1);const o=null===(n=null==H?void 0:H.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",no)}),[no]),i((()=>{var o,n,t,e;if(null!=K&&K>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=K&&-1===K){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);to({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[K]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",K),null!=K&&K>-1&&eo){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),io(!1)}}),[eo]);const ao=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!no.imageComponent&&!W&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:Q?no.imageComponent:z,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;console.log("updateTemplateImageUrl: ",o,n),d=null!=K&&K>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[K].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[K]}:Object.assign({},C);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=d.components,o.mapping.cards[K]=d.mapping,null==j||j(Object.assign({},o)),io(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(no.bodyVariables.length>0||no.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:no.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===(L=no.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=K&&K>-1?q.cards[K]:q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedURLTemplateBtn:lo,variableList:T},`${t}_${K}`)})),(null===(R=null===(w=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(Y!==l.CHATBOT?n(g,{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"}):n(r,{backTrackMessage:null===(N=null==H?void 0:H.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==H?void 0:H.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedQRBTemplateBtn:so},`${t}_${K}`)})),Y===l.CHATBOT&&Z&&n(p,{discountCode:null===(D=null==H?void 0:H.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(_=null==H?void 0:H.discountCodeExtra)||void 0===_?void 0:_[1],variableList:T}),null===(M=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===M?void 0:M.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ao,componentType:"BUTTONS"},t)}))]}))};export{h as default};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,D,_,M;const Q=C.isCarouselType,{originalVariableList:q,pod:Y,extras:H,selectedCarouselIndex:K,isProductCarouselType:W}=s(),{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=d(C),[Z,oo]=e(!1),[no,to]=e(-1===K?{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{});console.log("templateComponentData : ",no);const[eo,io]=e(!1);function lo(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=K&&K>-1&&W){const o=Object.assign({},C).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 s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.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:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?oo(!0):(oo(!1),null==B||B(""))}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=u.components,o.mapping.cards[K]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function so(o,n,e){var i,l,s,a,d,r;const p=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C);if(null!=K&&K>-1&&W){const n=Object.assign({},C).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 s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].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!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].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({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=p.components,o.mapping.cards[K]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))oo(!0);else{oo(!1);const o=null===(n=null==H?void 0:H.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",no)}),[no]),i((()=>{var o,n,t,e;if(null!=K&&K>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=K&&-1===K){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);to({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[K]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",K),null!=K&&K>-1&&eo){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),io(!1)}}),[eo]);const ao=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!no.imageComponent&&!W&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:Q?no.imageComponent:z,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=K&&K>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[K].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[K]}:Object.assign({},C);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=d.components,o.mapping.cards[K]=d.mapping,null==j||j(Object.assign({},o)),io(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(no.bodyVariables.length>0||no.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:no.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===(L=no.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=K&&K>-1?q.cards[K]:q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedURLTemplateBtn:lo,variableList:T},`${t}_${K}`)})),(null===(R=null===(w=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(Y!==l.CHATBOT?n(g,{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"}):n(r,{backTrackMessage:null===(N=null==H?void 0:H.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==H?void 0:H.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedQRBTemplateBtn:so},`${t}_${K}`)})),Y===l.CHATBOT&&Z&&n(p,{discountCode:null===(D=null==H?void 0:H.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(_=null==H?void 0:H.discountCodeExtra)||void 0===_?void 0:_[1],variableList:T}),null===(M=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===M?void 0:M.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ao,componentType:"BUTTONS"},t)}))]}))};export{h as default};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.442.beta.link.1",
+	"version": "0.0.442.beta.link.3",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",