@bikdotai/bik-component-library 0.0.21 → 0.0.22-beta.1

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

@@ -0,0 +1,30 @@
+import e from"styled-components";import{COLORS as r}from"../../../constants/Theme.js";const t=e.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	/* justify-content: center; */
+	flex: 1;
+`,o=e.div`
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+	background-color: ${r.surface.hovered};
+	border-radius: 4px;
+	border: 1px solid ${r.stroke.primary};
+	box-sizing: content-box;
+	cursor: ${e=>e.error?"pointer":"default"};
+`,i=e.div`
+	padding: 8px;
+	flex-direction: row;
+	display: flex;
+	justify-content: space-between;
+	background: ${r.surface.subdued};
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
+	margin-left: 8px;
+`,n=e.div`
+	padding-bottom: 0px;
+`;export{i as Container,n as EditTemplateMediaContainer,o as ImageContainer,t as RightComponent};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+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;
+}>;
+export default EditMediaTemplateMediaV2;

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWhatsAppTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
+}
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
+export default EditWhatsAppTemplateV2;

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

@@ -0,0 +1 @@
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as s}from"./VariableConnectorsPanel.js";import a from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m}=r;var b,v,g,h,f,j,T,O,x,y,E,C;const{originalVariableList:V}=e(),{descriptionComponents:w,urlBtns:B,qrbBtns:I,imageComponent:R,bodyVariables:L,headerVariables:A}=n(c);function U(t,o){var e,n,i,l;const s=Object.assign({},c),a=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const d=null===(e=null==s?void 0:s.components[a].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},s.components[a]),{buttons:p}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[a]=r,s.components=u}}null==u||u(s)}function S(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:o}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return t(s,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!R&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:R,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(L.length>0||A.length>0)&&o(d,{containerStyle:{paddingTop:R?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==w?void 0:w.map(((t,e)=>o(a,{originalVariableList:V,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body},e))),(null===(v=null===(b=B[0])||void 0===b?void 0:b.component)||void 0===v?void 0:v.buttons)&&(null===(f=null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)||void 0===f?void 0:f.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(j=null==V?void 0:V.buttons)||void 0===j?void 0:j.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:V,updateSelectedURLTemplateBtn:U},`${e}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(y=null===(x=I[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)||void 0===E?void 0:E.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(C=null==V?void 0:V.buttons)||void 0===C?void 0:C.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:V,updateSelectedQRBTemplateBtn:S},`${e}`)}))]}))};export{r as default};

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

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

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

@@ -0,0 +1,13 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
+	background: ${i.surface.standard};
+	border-top-width: 1px;
+	border-top-color: ${i.stroke.primary};
+	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
+	width: 100%;
+	padding: 16px 24px;
+	display: flex;
+	justify-content: end;
+	gap: 12;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};

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

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

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

@@ -0,0 +1,23 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
+	padding-top: 12px;
+	padding-bottom: 12px;
+	padding-left: 30px;
+	padding-right: 30px;
+	background-color: ${s.surface.subdued};
+	align-items: center;
+	display: flex;
+	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
+`,a=i.div`
+	display: flex;
+	border: 1px solid ${s.stroke.primary};
+	border-radius: 4px;
+	overflow: hidden;
+	width: min-content;
+`,l=i.div`
+	background: ${e=>e.active?s.background.brandLight:s.background.base};
+	padding: 6px 8px;
+	justify-content: center;
+	align-items: center;
+`,p=i(l)`
+	border-left: 1px solid ${s.stroke.primary};
+`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+declare const MobilePreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+} & React.RefAttributes<HTMLDivElement>>;
+export default MobilePreview;

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

@@ -0,0 +1,20 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../../constants/Theme.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
+	position: relative;
+	height: 100%;
+	border-radius: 31px;
+	width: ${e=>e.channel===r.WHATSAPP?"236px":"213px"};
+	background-color: white;
+	margin: auto;
+	overflow-y: auto;
+`,l=a.div`
+	position: absolute;
+	flex: 1;
+	background-color: white;
+	scroll-behavior: smooth;
+	left: 12px;
+	top: 8px;
+	width: calc(100% - 25px);
+	height: calc(100% - 17px);
+	border-radius: 16px;
+	overflow-y: auto;
+`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:n,template:m}=i;return e("div",{children:t(p,Object.assign({channel:n},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n===r.WHATSAPP?236:213,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:m,channel:n,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface TemplateSelectModalContentProps {
+    channel: CHANNEL_TYPE;
+    showVariableMapping?: boolean;
+    hideHeader?: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+}
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateSelectModalContentProps) => JSX.Element;
+export default TemplateSelectModalContent;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import n from"./Body.js";import o from"./Header.js";const a=a=>{let{channel:r,showVariableMapping:p,showOnlyContent:s,whatsappSpecificPickerMeta:l}=a;return e("div",Object.assign({style:{paddingBottom:0}},{children:t("div",{children:[r===i.EMAIL&&e(o,{showOnlyContent:s}),e(n,{whatsappSpecificPickerMeta:l,showVariableMapping:!!p,showOnlyContent:s})]})}))};export{a as default};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+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;
+}, never>;
+/** COMPONENT BELOW */
+export interface VariableConnectorProps {
+    onFocus?: () => void;
+    variable: CUSTOM_VARIABLE;
+    index: number;
+}
+declare const VariableConnector: ({ onFocus, variable, index, }: VariableConnectorProps) => JSX.Element;
+export default VariableConnector;

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

@@ -0,0 +1,7 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as o}from"react";import n from"styled-components";import{Dropdown as i}from"../../dropdown/Dropdown.js";import{Input as a}from"../../input/Input.js";import{placeHolderNamePattern as u}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as m}from"../utils/getVariableNameEmail.js";import{toCapitilize as v}from"../utils/toCapitilize.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";const b=n.div`
+	/* surface/$color-background-warning-light */
+
+	background: ${e=>e.focused&&e.channel!==s.WHATSAPP?r.background.warning.light:"transparent"};
+	border-radius: 4px;
+	padding: 8px 10px;
+`,g={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"},h=n=>{let{onFocus:h,variable:f,index:j}=n;var _;const[k,y]=l(!1),[A,O]=l(""),[P,E]=l([]),[T,S]=l(),{device:L,channel:W,isError:C,originalVariableList:M,template:V,setTemplate:H,setDisplayContent:w,setOriginalVariableList:I,globalNormalizedPlaceholders:B}=c();function $(e,t){var l,o;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(W!==s.WHATSAPP){const o=m(j+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),a=W===s.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(o):document.getElementById(o);a&&("custom_text"===t&&!e||"custom_link"===t&&W===s.EMAIL||"custom_link"===t&&W===s.MESSAGE&&!e?a.textContent=f.variableName:a.textContent=e);const u=M.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==I||I(u)}if(W===s.WHATSAPP){const t=null===(o=M.body)||void 0===o?void 0:o.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==I||I((e=>Object.assign(Object.assign({},e),{body:t,buttons:M.buttons})))}}function N(e,t){var l;const o=Object.assign({},V),n=null===(l=null==o?void 0:o.components)||void 0===l?void 0:l.map((l=>{var o,n,i,a,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(o=l.example)||void 0===o?void 0:o.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(u=null===(a=null===(i=s.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:o})}return l}));o.components=n,null==H||H(o)}return o((()=>{k&&(null==h||h())}),[k]),o((()=>{var e;const t=[];let l=[];if(W===s.MESSAGE){const e=null!=B?B:[];E([{label:"",options:[x,g]},...e]),l=[{label:"",options:[x,g]},...e]}else{"link"===(null==f?void 0:f.type)?(t.push({label:"",options:[g,x]}),S(g)):(t.push({label:"",options:[g,x]}),S(x));const e=null!=B?B:[];E([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v(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===s.WHATSAPP||W===s.EMAIL||W===s.MESSAGE)&&f.updatedValue)if(u.test(f.updatedValue)&&W===s.WHATSAPP||f.updatedValue.startsWith("{{")&&W!==s.WHATSAPP){let e={label:"",value:""};const t=W===s.WHATSAPP?f.updatedValue.replace("[[","").replace("]]",""):f.updatedValue.replace("{{","").replace("}}","");l.map((l=>{l.options.map((l=>{var o;(null===(o=l.value)||void 0===o?void 0:o.replace("{{","").replace("}}",""))===t&&(e=l)}))})),e.value&&S(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(S(g),O(f.updatedValue.split("https://")[1])):(S(x),O(f.updatedValue))}),[]),e(b,Object.assign({channel:W,focused:k,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:C&&!T?r.content.negative:r.content.primary}},{children:[null===(_=f.variableName)||void 0===_?void 0:_.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(i,{options:P,isSearchable:!1,onSelect:function(e,t){var l,o,n;const i=e;O(""),S(i),W===s.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?($(null!==(l=i.value)&&void 0!==l?l:"","string"),null==N||N(null!==(o=f.index)&&void 0!==o?o:0,`[[${i.value}]]`)):(null==N||N(null!==(n=f.index)&&void 0!==n?n:0,f.variableName),$("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?$(i.value,"url"===i.bikPlaceholderType?"link":"string"):(O(""),$("",i.value))},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[]})})),("custom_text"===(null==T?void 0:T.value)||"custom_link"===(null==T?void 0:T.value))&&t(a,{labelText:"custom_text"===(null==T?void 0:T.value)?"Custom text value":"custom_link"===(null==T?void 0:T.value)?"Custom URL value":"",id:`variable-value-${null==T?void 0:T.value}-${j}`,value:A,errorMessage:C?A?"custom_link"!==T.value||p(A)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==T?void 0:T.value)?void 0:30,prefixText:"custom_link"===(null==T?void 0:T.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===T.value?"Enter custom URL here":"Enter custom text here",onBlur:e=>function(e){var t,l,o,n,i;const a="mobile"===L?"template_html_mobile":"template_html_desktop",u=document.getElementById(a),d=(null!==(n=null===(o=null===(l=null===(t=null==u?void 0:u.contentWindow)||void 0===t?void 0:t.document)||void 0===l?void 0:l.body)||void 0===o?void 0:o.innerHTML)&&void 0!==n?n:"")+(null===(i=null==u?void 0:u.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);W===s.EMAIL&&(null==w||w(d))}(e.target.value),onChangeText:e=>function(e,t){var l;O(t);const o="custom_link"===(null==T?void 0:T.value)?`https://${t}`:t;$(o,e),W===s.WHATSAPP&&(null==N||N(null!==(l=f.index)&&void 0!==l?l:0,o))}(T.value,e)})]}))};export{b as Container,h as default};

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

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

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import l from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:d}=s;var m;const{originalVariableList:c}=n();return"BODY"===p.type?e("div",{children:null===(m=null==c?void 0:c.body)||void 0===m?void 0:m.map(((r,n)=>r.isEditableVariable?e(l,{index:n,variable:r},`${n}-${r.index}`):t("div",Object.assign({style:{margin:"16px 8px"}},{children:[t(o,Object.assign({style:{color:a.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",n+1]})),e(i,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),n)))}):e(r,{})};export{s as default};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface VariableConnectorsProps {
+    onFocus?: (variableIndex: number) => void;
+}
+declare const VariableConnectors: ({ onFocus }: VariableConnectorsProps) => JSX.Element;
+export default VariableConnectors;

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

@@ -0,0 +1,6 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/info.svg.js";import n from"styled-components";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{Tooltip as r}from"../../tooltips/Tooltip.js";import"../../tooltips/CustomisedTooltip.js";import{TitleRegular as s,BodySecondary as a}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import m from"./VariableConnector.js";const p=n.div`
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+`,h=n=>{let{onFocus:h}=n;const{originalVariableList:b,channel:f}=d();return e(p,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[t(s,Object.assign({style:{color:c.content.primary}},{children:"Edit variables and links"})),t(r,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:t(i,{width:20,height:20,color:c.content.placeholder})}))]})),t(a,Object.assign({style:{color:c.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==b?void 0:b.map(((e,i)=>f!==l.EMAIL||e.isEditableVariable?t("div",Object.assign({style:{marginTop:16}},{children:t(m,{index:i,variable:e,onFocus:()=>null==h?void 0:h(i)})}),i):t(o,{})))]})};export{p as Container,h as default};

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface VariableEditorHeaderProps {
+    headerText: string;
+    subText: string;
+    toolTipInfo?: string;
+    containerStyle?: CSSProperties;
+}
+declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => JSX.Element;
+export default VariableEditorHeader;

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

@@ -0,0 +1,3 @@
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/info.svg.js";import i from"styled-components";import{Tooltip as s}from"../../tooltips/Tooltip.js";import"../../tooltips/CustomisedTooltip.js";import{BodySecondary as n,TitleRegular as r}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const a=i(n)`
+	line-height: 1.5 !important;
+`,c=i=>{let{headerText:n,subText:c,toolTipInfo:p,containerStyle:m}=i;return t("div",Object.assign({style:Object.assign({paddingTop:24,paddingLeft:10,paddingRight:10,marginBottom:8,lineHeight:"normal"},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[o(r,Object.assign({style:{color:l.content.primary}},{children:n})),p&&o(s,Object.assign({body:c},{children:o(e,{width:20,height:20,color:l.content.placeholder})}))]})),o(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:c}))]}))};export{c as default};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
+import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
+import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export interface WhatsAppTemplateCardButtonV2Props {
+    originalVariableList: WhatsAppTemplateVariables;
+    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
+    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
+    button: TEMPLATE_BUTTON;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+    QRBoptions?: ButtonPlaceHolderOptions[];
+}
+declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => JSX.Element;
+export default WhatsAppTemplateCardButtonV2;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as o}from"react";import{Dropdown as a}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as s}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as i}from"../../template-preview/models/TemplateMeta.js";import{BUTTON_TYPE as r}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{validateIsUrl as d}from"../utils/validateIsUrl.js";import{Container as u}from"./VariableConnector.js";const b=b=>{let{button:f,updateSelectedURLTemplateBtn:j,updateSelectedQRBTemplateBtn:g,originalVariableList:h,CTAoptions:v,QRBoptions:y}=b;const[x,O]=l(""),[R,L]=l(),{setOriginalVariableList:U,isError:w}=c();function T(e){O(e);const t=[Object.assign(Object.assign({},h.buttons[0]),{type:r.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==U||U({body:[...h.body],buttons:[...t]}),null==j||j(`https://${e}`,"custom")}return o((()=>{var e;if(f.buttonVariable&&s.test(f.buttonVariable))L(i),O((null===(e=f.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===f.type?v:y;e="URL"===f.type?t.findIndex((e=>e.placeHolder===f.buttonVariable)):t.findIndex((e=>e.label===f.flowName)),e>-1&&L(t[e])}}),[]),e(u,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(p,Object.assign({style:{color:m.content.primary}},{children:[f.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(a,{options:"URL"===f.type?v:y,isSearchable:!1,onSelect:function(e,t){const l=e;L(l);const o=("URL"===f.type?v:y)[null!=t?t:0];if(o)if("custom_link"!==o.value){let e;"URL"===f.type?(e=[Object.assign(Object.assign({},h.buttons[0]),{type:"URL",buttonVariable:l.placeholder,example:["https://bik.ai/"]})],null==j||j({defaultValue:o.value,placeHolder:o.placeHolder},"placeholder")):(e=h.buttons.map(((e,t)=>t===f.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==g||g({flowName:l.label,flowId:l.value},"placeholder",f.index)),null==U||U({body:[...h.body],buttons:[...e]})}else T("")},defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),"custom_link"===(null==R?void 0:R.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(n,{errorMessage:w?x?d(x)?"":"Enter valid URL":"Required field":"",value:x,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:T})}))]})};export{b as default};

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

@@ -0,0 +1,6 @@
+import { SingleOption } from "../../dropdown/type";
+import { GlobalPlaceholderType } from "../../template-preview/models/TemplateMeta";
+export declare const convertPlaceholdersToBikDropdown: (data?: GlobalPlaceholderType) => {
+    label: string;
+    options: SingleOption[];
+}[];

package/dist/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.js

@@ -0,0 +1 @@
+const l=l=>{const e=[];return l&&Object.keys(l).forEach((o=>{var t;const r=l[o],n=null!==(t=null==r?void 0:r.map((l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!==(e=l.type)&&void 0!==e?e:"string"}})))&&void 0!==t?t:[];e.push({label:o,options:n})})),e};export{l as convertPlaceholdersToBikDropdown};

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

@@ -0,0 +1,21 @@
+import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+type ComponentType = WhatsAppTemplate['components'][0];
+export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
+    imageComponent: null;
+    descriptionComponents: {
+        component: ComponentType;
+        i: number;
+        type: ComponentType['type'];
+    }[];
+    urlBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    qrbBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    bodyVariables: string[];
+    headerVariables: string[];
+};
+export {};

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

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

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

@@ -0,0 +1,2 @@
+export declare const SMS_TEMPLATE_VAR_PATTERN: RegExp;
+export declare const getVariableNameForEmailByIndex: (index: number) => string;

package/dist/esm/components/template-context-mapper/utils/getVariableNameEmail.js

@@ -0,0 +1 @@
+const o=o=>"connectors_variable_"+o;export{o as getVariableNameForEmailByIndex};

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

@@ -0,0 +1 @@
+export declare function highlightFor(id: string, color: string, seconds: number): void;

package/dist/esm/components/template-context-mapper/utils/highlightFor.js

@@ -0,0 +1 @@
+function o(o,t,e){const n=document.getElementById(o);if(n){const o=n.style.backgroundColor;n.style.backgroundColor=t,setTimeout((function(){n.style.backgroundColor=o}),1e3*e)}}export{o as highlightFor};

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

@@ -0,0 +1 @@
+export declare function toCapitilize(string?: string): string;

package/dist/esm/components/template-context-mapper/utils/toCapitilize.js

@@ -0,0 +1 @@
+function e(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}export{e as toCapitilize};

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

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

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

@@ -0,0 +1 @@
+const d=d=>!!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(d);export{d as validateIsUrl};

package/dist/esm/components/template-preview/EmailTemplateHTMLPreview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const EmailTemplateHTMLPreview: React.FC<{
+    display_content: string;
+    containerId: string;
+}>;

package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as l}from"../TypographyStyle.js";import{EmailContainer as n,Header as r,ImageContainer as a,ViewButton as m}from"./EmailTemplatePreview.styled.js";const o=o=>{let{template:s,handleViewTemplate:d,hideHeader:c,hideViewButton:h,containerStyle:p,emailHtmlContainerId:u,emailDisplayContent:y}=o;return e(n,Object.assign({hideHeader:c,style:Object.assign({},null!=p?p:{})},{children:[!c&&t(r,{children:t(l,Object.assign({style:{maxWidth:"100%"}},{children:s.name}))}),y?t("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:y,height:"100%",style:{pointerEvents:"none"}}):t(a,Object.assign({hideHeader:c},{children:t("img",{alt:"Email thumbnail",src:s.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!h&&t(m,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{d&&d()}})})]}))};export{o as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as l,Header as r,ImageContainer as a,ViewButton as o}from"./EmailTemplatePreview.styled.js";const m=m=>{let{template:s,handleViewTemplate:d,hideHeader:c,hideViewButton:h,containerStyle:p,emailHtmlContainerId:y,emailDisplayContent:u}=m;return e(l,Object.assign({hideHeader:c,style:Object.assign({},null!=p?p:{})},{children:[!c&&t(r,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:s.name}))}),u?t("iframe",{title:"Email template preview",id:null!=y?y:"",width:"100%",srcDoc:u,height:"100%",style:{pointerEvents:"none"}}):t(a,Object.assign({hideHeader:c},{children:t("img",{alt:"",src:s.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!h&&t(o,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{d&&d()}})})]}))};export{m as default};

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

@@ -3,8 +3,8 @@ import { CHANNEL_TYPE } from './models/Channels';
 import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
 import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
 import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
-export declare const TemplatePreview: React.FC<{
-    template: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
+export interface TemplatePreviewProps {
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -15,4 +15,5 @@ export declare const TemplatePreview: React.FC<{
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
-}>;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => JSX.Element;

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

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

package/dist/esm/components/template-preview/constants/TemplateConstants.d.ts

@@ -5,6 +5,8 @@ export declare const CREATE_TEMPLATE_DOM_IDS: {
     actionButtons: string;
     footer: string;
 };
+export declare const NAME_NOT_FOUND = "Please enter template name";
+export declare const BODY_TEXT_EMPTY = "Template body text cant be empty";
 export declare const REQUIRED_FIELD = "Required field";
 export declare const HEADER_LEN_ERROR = "Maximum 60 characters are allowed";
 export declare const NAME_LEN_ERROR = "Maximum 512 characters allowed";
@@ -12,12 +14,19 @@ export declare const NO_SPECIAL_CHAR = "No special characters allowed";
 export declare const BODY_LEN_ERROR = "Maximum 1,024 characters are allowed";
 export declare const QUICK_REPLY_LEN_ERROR = "Maximum 20 characters are allowed";
 export declare const QUICK_REPLY_NAME_ERROR = "Buttons with same name are not allowed";
+export declare const CUSTOM_LIM_LEN_ERROR = "Maximum characters allowed is 2000 characters";
+export declare const ONE_VAR_ERROR = "Only one variable allowed in text header";
 export declare const VALID_PHONE_NUMBER = "Please enter a valid 10-digit phone number";
+export declare const FOOTER_EMOJI_ERROR = "Emojis are not allowed in footer";
+export declare const HEADER_EMOJI_ERROR = "Emojis are not allowed in header";
 export declare const BUTTON_EMOJI_ERROR = "Emojis are not allowed in button";
 export declare const HEADER_ASSET_LINK_ERROR = "Please attach the required media";
+export declare const TCS_DEFAULT_INPUT_ERROR = "Some input(s) are missing";
 export declare const ONE_VAR_ALLOWED = "Only one variable allowed in text header";
 export declare const HEADER_TEXT_LEN_LIMIT = 60;
 export declare const NAME_LEN_LIMIT = 512;
 export declare const BODY_TEXT_LEN_LIMIT = 1024;
 export declare const QUICK_REPLY_BTN_TEXT_LIMIT = 25;
+export declare const CUSTOM_LINK_LIMIT = 2000;
 export declare const QUICK_REPLY_NAME_LEN_LIMIT = 20;
+export declare const QRB_NONE = "None";

package/dist/esm/components/template-preview/constants/regexPatterns.d.ts

@@ -2,10 +2,10 @@ export declare const lockedVarPattern: RegExp;
 export declare const editableVarPattern: RegExp;
 export declare const placeHolderNamePattern: RegExp;
 export declare const globalVariablePattern: RegExp;
-export declare const templateVariablePattern: RegExp;
 export declare const globalHalfVariablePattern: RegExp;
 export declare const specialCharPattern: RegExp;
 export declare const variablePattern: RegExp;
 export declare const variablePatternGlobal: RegExp;
+export declare const templateVariablePattern: RegExp;
 export declare const previewLinkMDFormatPattern: RegExp;
 export declare const editableBracketPattern: RegExp;

package/dist/esm/components/template-preview/constants/regexPatterns.js

@@ -1 +1 @@
-const a=/\[\[[A-Za-z0-9 ]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\(\()(.*)(\)\)|\]\])/,Z=/\{\{[A-Za-z0-9 ]+\}\}/g,g=Z,_=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,o=/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]+/,t=/\{\{[A-Za-z0-9 _]+\}\}/,c=/\{\{[A-Za-z0-9 _]+\}\}/g,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,_ as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,o as specialCharPattern,g as templateVariablePattern,t as variablePattern,c as variablePatternGlobal};
+const a=/\[\[[A-Za-z0-9 ]+\]\]/,z=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,A=/(\[\[|\(\()(.*)(\)\)|\]\])/,Z=/\{\{[A-Za-z0-9 ]+\}\}/g,g=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,_=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,o=/\{\{[A-Za-z0-9 _]+\}\}/,t=/\{\{[A-Za-z0-9 _]+\}\}/g,c=Z,e=/\[([^[]+)\](\(.*\))/,n=/[((|))]/;export{n as editableBracketPattern,z as editableVarPattern,g as globalHalfVariablePattern,Z as globalVariablePattern,a as lockedVarPattern,A as placeHolderNamePattern,e as previewLinkMDFormatPattern,_ as specialCharPattern,c as templateVariablePattern,o as variablePattern,t as variablePatternGlobal};

package/dist/esm/components/template-preview/models/Channels.d.ts

@@ -4,5 +4,6 @@ export declare enum CHANNEL_TYPE {
     TIKTOK = "tiktok",
     EMAIL = "email",
     SMS = "message",
-    WEBPUSH = "webpush"
+    WEBPUSH = "webpush",
+    MESSAGE = "message"
 }

package/dist/esm/components/template-preview/models/Channels.js

@@ -1 +1 @@
-var a;!function(a){a.WHATSAPP="whatsapp",a.INSTAGRAM="instagram",a.TIKTOK="tiktok",a.EMAIL="email",a.SMS="message",a.WEBPUSH="webpush"}(a||(a={}));export{a as CHANNEL_TYPE};
+var a;!function(a){a.WHATSAPP="whatsapp",a.INSTAGRAM="instagram",a.TIKTOK="tiktok",a.EMAIL="email",a.SMS="message",a.WEBPUSH="webpush",a.MESSAGE="message"}(a||(a={}));export{a as CHANNEL_TYPE};

package/dist/esm/components/template-preview/models/TemplateMeta.d.ts

@@ -1,3 +1,4 @@
+import { SingleOption } from "../../dropdown/type";
 export type CUSTOM_VARIABLE = {
     variableName: string;
     type: 'string' | 'link' | 'image';
@@ -40,3 +41,37 @@ export interface QUICK_REPLY_BUTTON {
     flowId: string;
     flowName: string;
 }
+export declare const CUSTOM_URL_NAME: {
+    value: string;
+    label: string;
+    placeHolder: string;
+};
+export type GlobalPlaceholderType = {
+    MARKETING: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+    TRANSACTIONAL: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+};
+export type baseAPITemplateVariableType = {
+    title: string;
+    default_value: string;
+    placeHolder: string;
+    type?: 'string' | 'url';
+};
+export type globalNormalizedPlaceholdersType = {
+    label: string;
+    options: SingleOption[];
+};
+export interface ButtonPlaceHolderOptions {
+    value: string;
+    label: string;
+    placeHolder: string;
+}

package/dist/esm/components/template-preview/models/TemplateMeta.js

@@ -1 +1 @@
-var E,D,N,I;!function(E){E.SEND_GRID="sendgrid",E.BEE="bee"}(E||(E={})),function(E){E.APPROVED="APPROVED",E.DISABLED="DISABLED",E.FLAGGED="FLAGGED",E.PENDING="PENDING",E.DRAFT="DRAFT",E.REJECTED="REJECTED",E.PENDING_DELETION="PENDING_DELETION",E.IN_REVIEW="IN REVIEW",E.PAUSED="PAUSED",E.ACTIVE="ACTIVE",E.LIBRARY="LIBRARY"}(D||(D={})),function(E){E.NONE="NONE",E.TEXT="TEXT",E.IMAGE="IMAGE",E.VIDEO="VIDEO",E.DOCUMENT="DOCUMENT"}(N||(N={})),function(E){E.NONE="NONE",E.CTA_BTN="CTA_BTN",E.QUICK_REPLY="QUICK_REPLY"}(I||(I={}));export{I as ACTIONS_TYPES,N as HEADER_TYPES,E as TEMPLATE_EDITOR,D as TEMPLATE_STATUS};
+var E,D,N,I;!function(E){E.SEND_GRID="sendgrid",E.BEE="bee"}(E||(E={})),function(E){E.APPROVED="APPROVED",E.DISABLED="DISABLED",E.FLAGGED="FLAGGED",E.PENDING="PENDING",E.DRAFT="DRAFT",E.REJECTED="REJECTED",E.PENDING_DELETION="PENDING_DELETION",E.IN_REVIEW="IN REVIEW",E.PAUSED="PAUSED",E.ACTIVE="ACTIVE",E.LIBRARY="LIBRARY"}(D||(D={})),function(E){E.NONE="NONE",E.TEXT="TEXT",E.IMAGE="IMAGE",E.VIDEO="VIDEO",E.DOCUMENT="DOCUMENT"}(N||(N={})),function(E){E.NONE="NONE",E.CTA_BTN="CTA_BTN",E.QUICK_REPLY="QUICK_REPLY"}(I||(I={}));const A={value:"custom_link",label:"Custom URL",placeHolder:"custom placeholder"};export{I as ACTIONS_TYPES,A as CUSTOM_URL_NAME,N as HEADER_TYPES,E as TEMPLATE_EDITOR,D as TEMPLATE_STATUS};

package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { CHANNEL_TYPE } from './Channels';
-import { ACTIONS_TYPES, HEADER_TYPES, QUICK_REPLY_BUTTON, TEMPLATE_STATUS } from './TemplateMeta';
+import { ACTIONS_TYPES, ButtonPlaceHolderOptions, CUSTOM_VARIABLE, HEADER_TYPES, QUICK_REPLY_BUTTON, TEMPLATE_STATUS } from './TemplateMeta';
 export type WhatsAppTemplate = {
     name: string;
     label: string;
@@ -11,7 +11,7 @@ export type WhatsAppTemplate = {
     type?: 'email' | 'whatsapp';
     components: {
         type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
-        format?: 'TEXT' | 'IMAGE' | 'VIDEO' | 'DOCUMENT' | 'NONE';
+        format?: HEADER_TYPES;
         text?: string;
         buttons?: {
             type: 'QUICK_REPLY' | 'URL' | 'PHONE_NUMBER';
@@ -178,3 +178,46 @@ export type WhatsappMeta = {
     zeroStateComponent?: ReactElement;
     usePlaceHolderName?: boolean;
 };
+export type WhatsAppPickerMeta = {
+    uploadMediaFiles: (params: WhatsAppMediaUploadRequest) => Promise<WhatsAppMediaUploadResponse>;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+    QRBoptions?: ButtonPlaceHolderOptions[];
+};
+export type WhatsAppMediaUploadResponse = {
+    success: boolean;
+    url?: string;
+};
+export type WhatsAppMediaUploadRequest = {
+    file: File;
+    fileName: string;
+    isImage: boolean;
+};
+export interface WhatsAppTemplateVariables {
+    body: CUSTOM_VARIABLE[];
+    buttons: TEMPLATE_BUTTON[];
+}
+export type CTABtnValType = {
+    defaultValue: string;
+    placeHolder: string;
+} | string;
+export type QRBBtnValType = {
+    flowId?: string;
+    flowName?: string;
+};
+export type TEMPLATE_BUTTON = {
+    type: BUTTON_TYPE;
+    text?: string;
+    url?: string;
+    example?: string[];
+    linkMode?: 'custom' | 'home';
+    phone_number?: string;
+    buttonVariable?: string;
+    index?: number;
+    flowId?: string;
+    flowName?: string;
+};
+export declare enum BUTTON_TYPE {
+    QUICK_REPLY = "QUICK_REPLY",
+    URL = "URL",
+    PHONE_NUMBER = "PHONE_NUMBER"
+}

package/dist/esm/components/template-preview/models/WhatsAppTemplate.js

@@ -0,0 +1 @@
+var E;!function(E){E.QUICK_REPLY="QUICK_REPLY",E.URL="URL",E.PHONE_NUMBER="PHONE_NUMBER"}(E||(E={}));export{E as BUTTON_TYPE};