@bikdotai/bik-component-library 0.0.441 → 0.0.442-beta.1

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

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

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"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../template-preview/models/TemplateMeta.js");var p=require("../../template-preview/models/Channels.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=d(r),o=d(t);const n=o.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;
@@ -12,9 +12,9 @@
 	gap: 4px;
 	border-bottom-width: 1px;
 	border-bottom-color: ${s.COLORS.stroke.primary};
-`,m=o.default.div`
+`,h=o.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;
+`,m=l.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: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"})}))})]}))}));m.displayName="DesktopPreview",exports.default=m;

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

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

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

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

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

@@ -7,6 +7,5 @@ declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
     template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
-    showSampleValues?: boolean | undefined;
 } & 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"),o=require("../context/templateModalContext.js"),s=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("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../template-preview/models/TemplateMeta.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 p=l.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>s.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`
+`,n=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}=o.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:s.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%"}}})}))]}))})}));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(p,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(n,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

@@ -9,10 +9,8 @@ export interface TemplateSelectModalContentProps {
     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, showVariableModal, variableList, discountCode, setDiscountCode, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").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"),s=require("./Body.js"),a=require("./Header.js");exports.default=i=>{let{channel:r,showVariableMapping:o,showOnlyContent:n,whatsappSpecificPickerMeta:l,showVariableModal:d,variableList:c,discountCode:p,setDiscountCode:u}=i;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[r===t.CHANNEL_TYPE.EMAIL&&e.jsx(a.default,{showOnlyContent:n}),e.jsx(s.default,{whatsappSpecificPickerMeta:l,showVariableMapping:!!o,showOnlyContent:n,showVariableModal:d,variableList:c,discountCode:p,setDiscountCode:u})]})}))};

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;
@@ -14,8 +13,6 @@ export interface VariableConnectorProps {
     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, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnector;

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

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

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

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

@@ -1,9 +1,9 @@
-"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"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js"),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"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),x=require("./VariableConnector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=p(i);const j=b.default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,j=b.default.button`
+`,g=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -24,6 +24,5 @@
 	.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.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,T]=t.useState(!1),[k,L]=t.useState(""),[B,E]=t.useState(!1),A=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&E&&E(!0))}))}),[m]),e.jsxs(j,{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:o.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",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{E(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(A.current&&A.current.focus(),q(!0)):(q(!1),T(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),T(!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!=f?f:[],showVariable:w,setShowVariable:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};

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}))]}))};

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

@@ -1,4 +1,3 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
 import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
 import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
@@ -11,8 +10,6 @@ export interface WhatsAppTemplateCardButtonV2Props {
     button: TEMPLATE_BUTTON;
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
-    variableList?: VariableListInterfaceV2[];
-    variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../dropdown/Dropdown.js"),l=require("../../input/Input.js"),i=require("../../template-preview/constants/regexPatterns.js"),s=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{variableListIndex:m,button:j,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:x,originalVariableList:y,CTAoptions:g,QRBoptions:O,variableList:h}=c;var f,L,T,V;const[U,R]=t.useState(""),[q,C]=t.useState(),w=u.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{setOriginalVariableList:B,isError:N,disableEditVariable:S,pod:I}=d.useTemplateModalContext();function E(e){R(e);const t=[Object.assign(Object.assign({},y.buttons[0]),{type:o.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==B||B((e=>Object.assign(Object.assign({},e),{body:[...y.body],buttons:[...t]}))),null==v||v(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(j.buttonVariable&&i.editableVarPattern.test(j.buttonVariable))C(s.CUSTOM_URL_NAME),R((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?g:O;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&C(t[e])}}),[]),I!==o.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:[j.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(a.Dropdown,{disabled:S,options:"URL"===j.type?g:O,isSearchable:!1,onSelect:function(e,t){const a=e;C(a);const l=("URL"===j.type?g:O).find((e=>e.placeHolder===a.placeHolder));if(l)if("custom_link"!==l.value){let e;"URL"===j.type?(e=[Object.assign(Object.assign({},y.buttons[0]),{type:"URL",buttonVariable:a.placeHolder,example:["https://bik.ai/"]})],null==v||v({defaultValue:l.value,placeHolder:l.placeHolder},"placeholder")):(e=y.buttons.map(((e,t)=>t===j.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:a.label,flowId:a.value}):e)),null==x||x({flowName:a.label,flowId:a.value},"placeholder",j.index)),null==B||B((t=>Object.assign(Object.assign({},t),{body:[...y.body],buttons:[...e]})))}else E("")},defaultOptions:q?[Object.assign(Object.assign({},q),{selected:!0})]:[]})})),"custom_link"===(null==q?void 0:q.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(l.Input,{state:S?"disabled":"none",errorMessage:N?U?b.validateIsUrl(U)?"":"Enter valid URL":"Required field":"",value:U,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:E,maxCharLimit:2e3})}))]}):e.jsx(p.default,{index:m,variable:{variableName:null!==(f=j.text)&&void 0!==f?f:"",updatedValue:"((customPlaceholderName))"===j.buttonVariable?`${null===(L=j.example)||void 0===L?void 0:L[0]}`:null!==(T=j.buttonVariable)&&void 0!==T?T:"",type:"link",isEditableVariable:!0,index:null!==(V=j.index)&&void 0!==V?V:0},showVariableModal:!0,componentType:"BUTTONS",variableList:w,CTAoptions:g})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),r=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{button:b,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:j,originalVariableList:x,CTAoptions:v,QRBoptions:y}=c;const[f,g]=t.useState(""),[h,O]=t.useState(),{setOriginalVariableList:R,isError:U}=u.useTemplateModalContext();function L(e){g(e);const t=[Object.assign(Object.assign({},x.buttons[0]),{type:r.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==R||R({body:[...x.body],buttons:[...t]}),null==m||m(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(b.buttonVariable&&s.editableVarPattern.test(b.buttonVariable))O(n.CUSTOM_URL_NAME),g((null===(e=b.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===b.type?v:y;e="URL"===b.type?t.findIndex((e=>e.placeHolder===b.buttonVariable)):t.findIndex((e=>e.label===b.flowName)),e>-1&&O(t[e])}}),[]),e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:i.COLORS.content.primary}},{children:[b.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{options:"URL"===b.type?v:y,isSearchable:!1,onSelect:function(e,t){const l=e;O(l);const a=("URL"===b.type?v:y).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===b.type?(e=[Object.assign(Object.assign({},x.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=x.buttons.map(((e,t)=>t===b.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==j||j({flowName:l.label,flowId:l.value},"placeholder",b.index)),null==R||R({body:[...x.body],buttons:[...e]})}else L("")},defaultOptions:h?[Object.assign(Object.assign({},h),{selected:!0})]:[]})})),"custom_link"===(null==h?void 0:h.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{errorMessage:U?f?d.validateIsUrl(f)?"":"Enter valid URL":"Required field":"",value:f,prefixText:"custom_link"===(null==h?void 0:h.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:L})}))]})};

package/dist/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=e=>{var t,o;const n=[],i=[],p=[],l=[],s=[];let a=null;return e.components.forEach(((e,t)=>{var o,l,s,r,d,u;if("BODY"===e.type&&e.text&&n.push({component:e,i:t,type:"BODY"}),"HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format&&(null===(l=null===(o=e.example)||void 0===o?void 0:o.header_handle)||void 0===l?void 0:l[0])&&(a=e),"HEADER"===e.type&&"TEXT"===e.format&&n.push({component:e,i:t,type:"HEADER"}),"BUTTONS"===e.type){const o=null===(r=null===(s=e.buttons)||void 0===s?void 0:s.filter)||void 0===r?void 0:r.call(s,(e=>"URL"===e.type));i.push({component:Object.assign(Object.assign({},e),{buttons:o}),i:t});const n=null===(u=null===(d=e.buttons)||void 0===d?void 0:d.filter)||void 0===u?void 0:u.call(d,(e=>"QUICK_REPLY"===e.type));p.push({component:Object.assign(Object.assign({},e),{buttons:n}),i:t})}"limited_time_offer"===e.type&&n.push({component:e,i:t,type:"limited_time_offer"})})),e.mapping&&(null===(t=e.mapping.body)||void 0===t||t.forEach((e=>{l.push(e)}))),e.mapping&&(null===(o=e.mapping.header)||void 0===o||o.forEach((e=>{s.push(e)}))),{imageComponent:a,descriptionComponents:n,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getAllDataFromTemplateComponent=t=>{var e,o;const n=[],p=[],i=[],l=[],s=[];let a=null;return t.components.forEach(((t,e)=>{var o,l,s,r,u,d;if("BODY"===t.type&&t.text&&n.push({component:t,i:e,type:"BODY"}),"HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format&&(null===(l=null===(o=t.example)||void 0===o?void 0:o.header_handle)||void 0===l?void 0:l[0])&&(a=t),"HEADER"===t.type&&"TEXT"===t.format&&n.push({component:t,i:e,type:"HEADER"}),"BUTTONS"===t.type){const o=null===(r=null===(s=t.buttons)||void 0===s?void 0:s.filter)||void 0===r?void 0:r.call(s,(t=>"URL"===t.type));p.push({component:Object.assign(Object.assign({},t),{buttons:o}),i:e});const n=null===(d=null===(u=t.buttons)||void 0===u?void 0:u.filter)||void 0===d?void 0:d.call(u,(t=>"QUICK_REPLY"===t.type));i.push({component:Object.assign(Object.assign({},t),{buttons:n}),i:e}),i.push}})),t.mapping&&(null===(e=t.mapping.body)||void 0===e||e.forEach((t=>{l.push(t)}))),t.mapping&&(null===(o=t.mapping.header)||void 0===o||o.forEach((t=>{s.push(t)}))),{imageComponent:a,descriptionComponents:n,urlBtns:p,qrbBtns:i,bodyVariables:l,headerVariables:s}};

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

@@ -1 +1 @@
-export declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+export declare const validateIsUrl: (recievedMediaLink: string) => boolean;

package/dist/cjs/components/template-context-mapper/utils/validateIsUrl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(e);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=/-]*)?(\\#[-a-z\\d_]*)?$","i").test(e);

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:u,hideHeader:j,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!j&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=null==c?void 0:c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=u?u:[])})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:j,hideHeader:u,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!u&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=j?j:[])})}))]})};

package/dist/cjs/components/template-preview/TemplatePreview.d.ts

@@ -15,6 +15,5 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
-    showSampleValues?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../utils/StringUtils.js"),t=require("../../constants/Theme.js"),a=require("../TypographyStyle.js"),i=require("./EmailTemplateThumbnailPreview.js"),n=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),s=require("./WhatsAppTemplatePreview.js");const o={WhatsAppWrapper:{backgroundColor:t.COLORS.surface.standard,borderRadius:4,border:`1px solid ${t.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=d=>{let{template:p,channel:u,whatsAppSpecificMeta:m,templateCreationsInfo:c,hideHeader:v,size:h,onlyTemplateContent:j,emailSpecificMeta:S,smsSpecificMeta:b,showSampleValues:g}=d;var y,C;return u===n.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:c?16:0,border:c?`1px solid ${t.COLORS.stroke.primary}`:"none",borderRadius:4},null==b?void 0:b.templateContainerStyles)},{children:e.jsx(r.default,{template:p,hideHeader:v,onlyTemplateContent:j,size:null!=h?h:"large",variableStore:null==b?void 0:b.smsVariableStore,display_content:null==b?void 0:b.smsDisplayContent})})):u===n.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:c?16:0},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(i.default,{template:p,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:v,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId})})):u===n.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==m?void 0:m.templateContainerStyles),c?o.WhatsAppWrapper:{})},{children:[c?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(a.TitleRegular,{children:l.default.convertToTitleCase(null!==(y=null==p?void 0:p.label)&&void 0!==y?y:"")})})):e.jsx(e.Fragment,{}),e.jsx(s.default,{showSampleValues:g,showHeader:null==m?void 0:m.showWhatsAppHeader,extras:null==m?void 0:m.whatsAppExtras,template:p,size:c?"small":null!=h?h:"large",containerStyle:Object.assign({borderWidth:c?0:1,borderTopWidth:1},null!==(C=null==m?void 0:m.containerStyle)&&void 0!==C?C:{}),zeroStateComponent:null==m?void 0:m.zeroStateComponent,usePlaceHolderName:null==m?void 0:m.usePlaceHolderName})]})):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../utils/StringUtils.js"),t=require("../../constants/Theme.js"),a=require("../TypographyStyle.js"),i=require("./EmailTemplateThumbnailPreview.js"),n=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),s=require("./WhatsAppTemplatePreview.js");const o={WhatsAppWrapper:{backgroundColor:t.COLORS.surface.standard,borderRadius:4,border:`1px solid ${t.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=d=>{let{template:p,channel:u,whatsAppSpecificMeta:m,templateCreationsInfo:c,hideHeader:v,size:j,onlyTemplateContent:h,emailSpecificMeta:S,smsSpecificMeta:b}=d;var g,y;return u===n.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:c?16:0,border:c?`1px solid ${t.COLORS.stroke.primary}`:"none",borderRadius:4},null==b?void 0:b.templateContainerStyles)},{children:e.jsx(r.default,{template:p,hideHeader:v,onlyTemplateContent:h,size:null!=j?j:"large",variableStore:null==b?void 0:b.smsVariableStore,display_content:null==b?void 0:b.smsDisplayContent})})):u===n.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:c?16:0},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(i.default,{template:p,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:v,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId})})):u===n.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==m?void 0:m.templateContainerStyles),c?o.WhatsAppWrapper:{})},{children:[c?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(a.TitleRegular,{children:l.default.convertToTitleCase(null!==(g=null==p?void 0:p.label)&&void 0!==g?g:"")})})):e.jsx(e.Fragment,{}),e.jsx(s.default,{showHeader:null==m?void 0:m.showWhatsAppHeader,extras:null==m?void 0:m.whatsAppExtras,template:p,size:c?"small":null!=j?j:"large",containerStyle:Object.assign({borderWidth:c?0:1,borderTopWidth:1},null!==(y=null==m?void 0:m.containerStyle)&&void 0!==y?y:{}),zeroStateComponent:null==m?void 0:m.zeroStateComponent,usePlaceHolderName:null==m?void 0:m.usePlaceHolderName})]})):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -7,14 +7,13 @@
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,p=i.default(t.Caption)`
+`,d=i.default(t.Caption)`
 	color: ${r.COLORS.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-	text-wrap: wrap;
-`,d=i.default.div`
+`,n=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -23,7 +22,7 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,n=i.default.div`
+`,p=i.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
@@ -32,6 +31,7 @@
 	border-top: 1px solid ${r.COLORS.stroke.primary};
 `,s=i.default.div`
 	display: flex;
+
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
@@ -53,4 +53,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=p;
+`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;