@bikdotai/bik-component-library 0.0.44-4.beta-2 → 0.0.44

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

@@ -1,15 +1,9 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface BodyProps {
     showVariableMapping: boolean;
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
-    variableListForImage?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
-    showSampleValues?: boolean;
 }
-declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Body: (props: BodyProps) => JSX.Element;
 export default Body;

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

@@ -1,17 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),i=require("../../template-preview/models/Channels.js"),s=require("../../../constants/Theme.js"),n=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),d=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=m(a);const v=f.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),a=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),p=require("./VariableConnectorsPanel.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(l);const m=h.default.div`
 	display: flex;
 	//	height: 100%;
-`,C=f.default.div`
+`,f=h.default.div`
 	padding: 16px 14px;
-	max-width: 450px;
+	border-left-width: 1px;
+	border-left-color: ${o.COLORS.stroke.primary};
+	max-width: 350px;
 
-	height: ${e=>e.channel===i.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
-	overflow-y: auto;
+	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	overflow-y: 'auto';
 	padding-bottom: 24px;
-	border-left: ${s.COLORS.stroke.primary} 1px solid;
-`,x=f.default.div`
-	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
+`,x=h.default.div`
+	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
-	height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
+	height: 475px;
 	overflow-y: auto;
-`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:P,setDiscountCode:j,variableListForImage:E,showSampleValues:T}=a,A=t.useRef(),L=t.useRef(),{device:y,display_content:M,channel:N,template:S,setTemplate:_,isWhatsappCarousel:V,isProductCarouselType:q}=n.useTemplateModalContext();const W=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(v,{children:[e.jsx(x,Object.assign({showOnlyContent:f,showVariableMapping:m,isWhatsappCarousel:V},{children:"mobile"===y?e.jsx(c.default,{ref:L,display_content:null!=M?M:"",channel:N,template:S,showSampleValues:T}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.CarouselPreview,{ref:A,channel:N,template:S,showSampleValues:T,isPreview:!1}):N!==i.CHANNEL_TYPE.MESSAGE?e.jsx(d.default,{ref:A,channel:N,display_content:null!=M?M:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(q||m)&&e.jsx(C,Object.assign({channel:N},{children:N!==i.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:N===i.CHANNEL_TYPE.EMAIL?function(e){var t,a,l;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),n=r.getVariableNameForEmailByIndex(e+1),d=N===i.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),p=W(d),c=null==d?void 0:d.offsetLeft;"desktop"===y?p&&A.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y)):p&&L.current&&(null===(l=null==o?void 0:o.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y))}:void 0,showVariableModal:w,variableList:b,discountCode:P,setDiscountCode:j}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(o.default,{whatsappSpecificPickerMeta:g,template:S,showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:S,onTemplateChange:e=>{null==_||_(e)},showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j})}))]})};
+`;exports.default=l=>{const{showVariableMapping:c,showOnlyContent:h,whatsappSpecificPickerMeta:g}=l,v=t.useRef(),j=t.useRef(),{device:E,display_content:w,channel:b,template:y,setTemplate:C}=i.useTemplateModalContext();const P=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:c},{children:"mobile"===E?e.jsx(u.default,{ref:j,display_content:null!=w?w:"",channel:b,template:y}):b!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:v,channel:b,display_content:null!=w?w:""}):e.jsx(e.Fragment,{})})),c&&e.jsx(f,Object.assign({channel:b},{children:b!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(p.default,{onFocus:b===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),d=r.getVariableNameForEmailByIndex(e+1),u=b===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),p=P(u),c=null==u?void 0:u.offsetLeft;"desktop"===E?p&&v.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E)):p&&j.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E))}:void 0}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:y,onTemplateChange:e=>{null==C||C(e)}})}))]})};

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/document_pdf.svg.js"),t=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("styled-components"),n=require("../../shimmer-image/ShimmerImage.js"),l=require("../../spinner/Spinner.js"),o=require("../../template-preview/models/TemplateMeta.js"),a=require("../../TypographyStyle.js"),d=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),u=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const h=g(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),h=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(n).default.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	width: 44px;
 	height: 24px;
 	border-left: 1px solid ${c.COLORS.stroke.primary};
 	cursor: pointer;
-`;exports.default=r=>{const{imageName:g,error:j,isLoading:p,mediaType:m,disableEditVariable:x,selectedVariable:y,setOpenEditMedia:O}=r,f=null==g?void 0:g[0].split("/"),v=null==f?void 0:f[f.length-1];return e.jsxs(u.Container,{children:[e.jsx(u.ImageContainer,Object.assign({error:!!j,onClick:()=>null==O?void 0:O(!0)},{children:j?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(l.Spinner,{size:"small"}):m===o.HEADER_TYPES.IMAGE?e.jsx(n.ShimmerImage,{imageUrl:null==g?void 0:g[0],width:56,height:56}):m===o.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:g[0],style:{width:56,height:56}},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:g[0]})})):e.jsx(i.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(u.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:j?"unset":1}},{children:g&&j?e.jsx(e.Fragment,{}):p?e.jsx(a.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:y||d.default.toCapitilize(null==m?void 0:m.toLowerCase())||v}))})),!!j&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==m?void 0:m.toLowerCase(),". Retry"]})),e.jsx(a.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:j}))]})),!x&&!j&&!p&&e.jsx(h,Object.assign({onClick:()=>null==O?void 0:O(!0),onKeyDown:()=>null==O?void 0:O(!0),role:"presentation"},{children:e.jsx(t.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
+`;exports.default=n=>{const{imageName:g,error:u,isLoading:p,mediaType:x,handleImageChange:y}=n,O=null==g?void 0:g[0].split("/"),m=null==O?void 0:O[O.length-1];return e.jsxs(h.Container,{children:[e.jsx(h.ImageContainer,Object.assign({error:!!u,onClick:u?y:void 0},{children:u?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==g?void 0:g[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(h.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:g&&u?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||m}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:u}))]})),!u&&!p&&e.jsx(j,Object.assign({onClick:y,onKeyDown:y,role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { VariableListInterfaceV2 } from "../../add-variableV2";
 import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 declare const EditMediaTemplateMediaV2: React.FC<{
     mediaComponent: WhatsAppTemplate['components'][0];
     template: WhatsAppTemplate;
     whatsappSpecificPickerMeta: WhatsAppPickerMeta;
     updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
-    variableListForImage?: VariableListInterfaceV2[];
 }>;
 export default EditMediaTemplateMediaV2;

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 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})]})};
+"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"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("./EditMediaV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);exports.default=n=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:s,whatsappSpecificPickerMeta:c}=n;var p,f;const m=o.default.createRef(),[v,E]=i.useState(!1),[g,_]=i.useState("");let h;return h=u.format===r.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===r.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:m,style:{display:"none"},type:"file",onChange:function(t){var i,l;return e.__awaiter(this,void 0,void 0,(function*(){_(""),E(!0);const e=new a.FileUploaderHelper,n=null===(i=t.target.files)||void 0===i?void 0:i[0];if(n instanceof Blob){const t=e.validate(n);if(t)_(t),E(!1);else{const e=u.format===r.HEADER_TYPES.IMAGE,t=yield c.uploadMediaFiles({file:n,fileName:n.name,isImage:e});if(t.success){const[e]=n.type.split("/");s(null!==(l=t.url)&&void 0!==l?l:"","application"===e?r.HEADER_TYPES.DOCUMENT:r.HEADER_TYPES[e.toUpperCase()])}else _("An unknown technical error occured");E(!1)}}else _("An unknown technical error occured"),E(!1)}))},accept:h}),t.jsx(l.default,{imageName:null!==(f=null===(p=null==u?void 0:u.example)||void 0===p?void 0:p.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.click)&&m.current.click()},mediaType:null==u?void 0:u.format,error:g,isLoading:v})]})};

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

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

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,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)}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),n=require("../utils/getDataFromTemplateComponent.js"),o=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),s=require("./VariableConnectorWhatsApp.js"),a=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c}=r;var m,v,b,g,h,f,j,x,T,O,y,C;const{originalVariableList:E}=t.useTemplateModalContext(),{descriptionComponents:V,urlBtns:w,qrbBtns:B,imageComponent:I,bodyVariables:q,headerVariables:R}=n.getAllDataFromTemplateComponent(p);function A(e,t){var n,o,i,l;const s=Object.assign({},p),a=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==a&&a>-1){const d=null===(n=null==s?void 0:s.components[a].buttons)||void 0===n?void 0:n.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const n="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(o=s.components)||void 0===o?void 0:o[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[n?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[a]),{buttons:r}),u=Object.assign(Object.assign({},s.mapping),{buttons:n?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});s.mapping=u;const c=[...s.components];c[a]=p,s.components=c}}null==u||u(s)}function L(e,t,n){var o;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(o=null==i?void 0:i.components[l].buttons)||void 0===o?void 0:o.filter((e=>"QUICK_REPLY"===e.type));t&&(t[n]=Object.assign(Object.assign({},t[n]),{flowId:e.flowId,flowName:e.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:t}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!I&&e.jsx(o.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:I,updateTemplateImageUrl:function(e,t){var n;let o=Object.assign({},p);const i=null===(n=null==o?void 0:o.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==o?void 0:o.components[i])){const n=Object.assign(Object.assign({},o.components[i]),{format:t,example:{header_handle:[e]}}),l=[...o.components];l[i]=n,o=Object.assign(Object.assign({},o),{components:l})}null==u||u(o)},template:p})}),(q.length>0||R.length>0)&&e.jsx(a.default,{containerStyle:{paddingTop:I?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?void 0:V.map(((t,n)=>e.jsx(s.default,{originalVariableList:E,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body},n))),(null===(v=null===(m=w[0])||void 0===m?void 0:m.component)||void 0===v?void 0:v.buttons)&&(null===(h=null===(g=null===(b=w[0])||void 0===b?void 0:b.component)||void 0===g?void 0:g.buttons)||void 0===h?void 0:h.length)>0&&e.jsx(a.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(f=null==E?void 0:E.buttons)||void 0===f?void 0:f.map(((t,n)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:E,updateSelectedURLTemplateBtn:A},`${n}`)})),(null===(x=null===(j=B[0])||void 0===j?void 0:j.component)||void 0===x?void 0:x.buttons)&&(null===(y=null===(O=null===(T=B[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)||void 0===y?void 0:y.length)>0&&e.jsx(a.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"}),null===(C=null==E?void 0:E.buttons)||void 0===C?void 0:C.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:E,updateSelectedQRBTemplateBtn:L},`${n}`)}))]}))};

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

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

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("../../button/Button.js"),s=require("../../../constants/Theme.js"),a=require("../Badge/index.js"),n=require("../context/templateModalContext.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=l(r).default.div`
-	background: ${s.COLORS.surface.standard};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../button/Button.js"),o=require("../../../constants/Theme.js"),s=require("../Badge/index.js"),n=require("../context/templateModalContext.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(t).default.div`
+	background: ${o.COLORS.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${s.COLORS.stroke.primary};
+	border-top-color: ${o.COLORS.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 16px 24px;
@@ -10,4 +10,4 @@
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`;exports.default=r=>{let{isWhatsappCarousel:s,onSelect:l}=r;const{isError:d,selectedCarouselIndex:i,setSelectedCarouselIndex:c,setErrorIndexes:p}=n.useTemplateModalContext(),[x,b]=t.useState(s?"Next":"Select template");return t.useEffect((()=>{s&&-1===i?b("Next"):s&&null!=i&&i>-1&&b("Save & Select Template")}),[i]),e.jsxs(u,{children:[d&&e.jsx(a.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:x,size:s?"small":"large",onClick:function(){s&&-1===i&&c?c(0):(null==p||p([]),l())}})]})};
+`;exports.default=t=>{let{onSelect:o}=t;const{isError:a}=n.useTemplateModalContext();return e.jsxs(d,{children:[a&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(r.Button,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:o})]})};

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),s=require("./Body.js"),t=require("./Header.js");exports.default=i=>{let{channel:r,showVariableMapping:o,showOnlyContent:l,whatsappSpecificPickerMeta:n,showVariableModal:d,variableList:p,discountCode:u,setDiscountCode:c,variableListForImage:h,showSampleValues:w}=i;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[r===a.CHANNEL_TYPE.EMAIL&&e.jsx(t.default,{showOnlyContent:l}),e.jsx(s.default,{whatsappSpecificPickerMeta:n,showVariableMapping:!!o,showOnlyContent:l,showVariableModal:d,variableList:p,discountCode:u,setDiscountCode:c,variableListForImage:h,showSampleValues:w})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../template-preview/models/Channels.js"),r=require("./Body.js"),s=require("./Header.js");exports.default=a=>{let{channel:i,showVariableMapping:n,showOnlyContent:l,whatsappSpecificPickerMeta:o}=a;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[i===t.CHANNEL_TYPE.EMAIL&&e.jsx(s.default,{showOnlyContent:l}),e.jsx(r.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!n,showOnlyContent:l})]})}))};

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

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

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

@@ -1,16 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../custom-date-time/CustomDateTime.js"),u=require("../../dropdown/Dropdown.js"),d=require("../../input/Input.js"),r=require("../../product-picker-v2/collectionScreen.js"),c=require("../../template-preview/constants/regexPatterns.js"),p=require("../../template-preview/models/Channels.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),j=require("../context/templateModalContext.js"),O=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(n);const y=h.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),o=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),s=require("../../../utils/StringUtils.js"),d=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),c=require("../utils/getVariableNameEmail.js"),v=require("../utils/validateIsUrl.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=p(l).default.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===p.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===i.CHANNEL_TYPE.EMAIL?d.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,_=h.default.div`
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.1);
-	z-index: 1000;
-	cursor: not-allowed;
-`,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:N,variableList:C,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(N){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,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:N?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!=C?C:[],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"})}})]}))};
+`,b={value:"custom_link",label:"Custom URL"},g={value:"custom_text",label:"Custom text"};exports.Container=m,exports.default=l=>{let{onFocus:p,variable:E,index:_}=l;var x;const[j,A]=t.useState(!1),[P,N]=t.useState(""),[h,T]=t.useState([]),[y,L]=t.useState(),{device:f,channel:C,isError:O,originalVariableList:k,template:H,templateSelectionTriggered:S,setTemplate:Y,setDisplayContent:q,setOriginalVariableList:M,globalNormalizedPlaceholders:V}=r.useTemplateModalContext();function I(e,t){var l,n;const a="custom_link"===t?"link":"custom_text"===t?"string":t;if(C!==i.CHANNEL_TYPE.WHATSAPP){const n=c.getVariableNameForEmailByIndex(_+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===f?"template_html_mobile":"template_html_desktop"),u=C===i.CHANNEL_TYPE.EMAIL?null===(l=null==o?void 0:o.contentWindow)||void 0===l?void 0:l.document.getElementById(n):document.getElementById(n);u&&(u.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const s=k.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:a,updatedValue:e}):t));null==M||M(s)}if(C===i.CHANNEL_TYPE.WHATSAPP){const t=null===(n=k.body)||void 0===n?void 0:n.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:a,updatedValue:e}):t));null==M||M((e=>Object.assign(Object.assign({},e),{body:t,buttons:k.buttons})))}}function W(e,t){var l;const n=Object.assign({},H),a=null===(l=null==n?void 0:n.components)||void 0===l?void 0:l.map((l=>{var n,a,o,i,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(a=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===a?void 0:a[0])){const l=[...null!==(u=null===(i=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:n})}return l}));n.components=a,null==Y||Y(n)}return t.useEffect((()=>{j&&(null==p||p())}),[j]),t.useEffect((()=>{!function(){var e,t,l,n,a;const o="mobile"===f?"template_html_mobile":"template_html_desktop",u=document.getElementById(o),s=(null!==(n=null===(l=null===(t=null===(e=null==u?void 0:u.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==n?n:"")+(null===(a=null==u?void 0:u.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);C===i.CHANNEL_TYPE.EMAIL&&(null==q||q(s))}()}),[S]),t.useEffect((()=>{var e;const t=[];let l=[];if(C===i.CHANNEL_TYPE.MESSAGE){const e=null!=V?V:[];T([{label:"",options:[g,b]},...e]),l=[{label:"",options:[g,b]},...e]}else{"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[b,g]}),L(b)):(t.push({label:"",options:[b,g]}),L(g));const e=null!=V?V:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:s.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())})}))]),l=[...t,...e]}if((C===i.CHANNEL_TYPE.WHATSAPP||C===i.CHANNEL_TYPE.EMAIL||C===i.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(o.placeHolderNamePattern.test(E.updatedValue)&&C===i.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&C!==i.CHANNEL_TYPE.WHATSAPP){let e={label:"",value:""};const t=C===i.CHANNEL_TYPE.WHATSAPP?E.updatedValue.replace("[[","").replace("]]",""):E.updatedValue.replace("{{","").replace("}}","");l.map((l=>{l.options.map((l=>{var n;(null===(n=l.value)||void 0===n?void 0:n.replace("{{","").replace("}}",""))===t&&(e=l)}))})),e.value&&L(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(L(b),N(E.updatedValue.split("https://")[1])):(L(g),N(E.updatedValue))}),[]),e.jsxs(m,Object.assign({channel:C,focused:j,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(u.BodySecondary,Object.assign({style:{color:O&&!y?d.COLORS.content.negative:d.COLORS.content.primary}},{children:[null===(x=E.variableName)||void 0===x?void 0:x.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(n.Dropdown,{options:h,isSearchable:!1,onSelect:function(e,t){var l,n,a;const o=e;N(""),L(o),C===i.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(I(null!==(l=o.value)&&void 0!==l?l:"","string"),null==W||W(null!==(n=E.index)&&void 0!==n?n:0,`[[${o.value}]]`)):(null==W||W(null!==(a=E.index)&&void 0!==a?a:0,E.variableName),I("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?I(o.value,"url"===o.bikPlaceholderType?"link":"string"):(N(""),I("",o.value))},defaultOptions:y?[Object.assign(Object.assign({},y),{selected:!0})]:[]})})),("custom_text"===(null==y?void 0:y.value)||"custom_link"===(null==y?void 0:y.value))&&e.jsx(a.Input,{labelText:"custom_text"===(null==y?void 0:y.value)?"Custom text value":"custom_link"===(null==y?void 0:y.value)?"Custom URL value":"",id:`variable-value-${null==y?void 0:y.value}-${_}`,value:P,errorMessage:O?P?"custom_link"!==y.value||v.validateIsUrl(P)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==y?void 0:y.value)?void 0:30,prefixText:"custom_link"===(null==y?void 0:y.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===y.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;N(t);const n="custom_link"===(null==y?void 0:y.value)?`https://${t}`:t;I(n,e),C===i.CHANNEL_TYPE.WHATSAPP&&(null==W||W(null!==(l=E.index)&&void 0!==l?l:0,n))}(y.value,e)})]}))};

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

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

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

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

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

@@ -1,12 +1,7 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
-    showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
 }
-declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectors: ({ onFocus }: VariableConnectorsProps) => JSX.Element;
 export default VariableConnectors;
-export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -1,29 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),o=require("../../tooltips/Tooltip.js"),n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../template-preview/models/Channels.js"),n=require("../../tooltips/Tooltip.js"),l=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),a=require("../context/templateModalContext.js"),o=require("./VariableConnector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=c(i).default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,j=b.default.button`
-	padding: 2px 8px;
-	cursor: pointer;
-	color: white;
-	background-color: black;
-	width: fit-content;
-	float: right;
-	margin-top: 0px;
-	font-family: Inter;
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 20px;
-	align-self: flex-end;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-	margin-right: 1px;
-
-	.add {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-	}
-`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[q,S]=t.useState(!1),[w,C]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(o.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:n.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),C(!1))},noErrorHint:!0,validate:e=>[!0,""]}),q&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:w,setShowVariable:C,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};
+`;exports.Container=d,exports.default=i=>{let{onFocus:c}=i;const{originalVariableList:u,channel:j}=a.useTemplateModalContext();return e.jsxs(d,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:r.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:r.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==u?void 0:u.map(((t,i)=>j!==s.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(o.default,{index:i,variable:t,onFocus:()=>null==c?void 0:c(i)})}),i):e.jsx(e.Fragment,{})))]})};

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

@@ -5,5 +5,5 @@ export interface VariableEditorHeaderProps {
     toolTipInfo?: string;
     containerStyle?: CSSProperties;
 }
-declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => JSX.Element;
 export default VariableEditorHeader;

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

@@ -6,4 +6,4 @@
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=i=>{let{headerText:o,subText:l,toolTipInfo:c,containerStyle:p}=i;return e.jsxs(d,Object.assign({style:Object.assign({},p)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:o})),c&&e.jsx(s.Tooltip,Object.assign({body:c},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:l}))]}))};
+`;exports.default=i=>{let{headerText:o,subText:l,toolTipInfo:c,containerStyle:p}=i;return e.jsxs(d,Object.assign({style:Object.assign({},p)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:o})),c&&e.jsx(s.Tooltip,Object.assign({body:l},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:n.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:l}))]}))};