@bikdotai/bik-component-library 0.0.13-beta.37 → 0.0.13-beta.4

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

@@ -1,31 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.div`
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	/* justify-content: center; */
-	flex: 1;
-`,n=i.default.div`
-	width: 56px;
-	height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	align-self: center;
-	background-color: ${t.COLORS.surface.hovered};
-	border-radius: 4px;
-	border: 1px solid ${t.COLORS.stroke.primary};
-	box-sizing: content-box;
-	cursor: ${e=>e.error?"pointer":"default"};
-`,d=i.default.div`
-	padding: 8px;
-	flex-direction: row;
-	display: flex;
-	justify-content: space-between;
-	background: ${t.COLORS.surface.subdued};
-	border: 1px solid ${t.COLORS.stroke.primary};
-	border-radius: 4px;
-	margin-left: 8px;
-`,a=i.default.div`
-	padding-bottom: 0px;
-	min-width: 285px;
-`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=n,exports.RightComponent=o;

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

@@ -1,9 +0,0 @@
-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/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js

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

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

@@ -1,11 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

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

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

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

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

@@ -1,13 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../button/Button.js"),o=require("../../../constants/Theme.js"),s=require("../Badge/index.js"),n=require("../context/templateModalContext.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(t).default.div`
-	background: ${o.COLORS.surface.standard};
-	border-top-width: 1px;
-	border-top-color: ${o.COLORS.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;
-`;exports.default=t=>{let{onSelect:o}=t;const{isError:a}=n.useTemplateModalContext();return e.jsxs(d,{children:[a&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(r.Button,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:o})]})};

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

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

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

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

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

@@ -1,11 +0,0 @@
-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/cjs/components/template-context-mapper/modalElements/MobilePreview.js

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

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

@@ -1,12 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js

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

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

@@ -1,15 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/VariableConnector.js

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

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

@@ -1,11 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js

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

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

@@ -1,7 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../template-preview/models/Channels.js"),r=require("../../tooltips/Tooltip.js");require("../../tooltips/CustomisedTooltip.js");var l=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),a=require("./VariableConnector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=d(i).default.div`
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-`;exports.Container=c,exports.default=i=>{let{onFocus:d}=i;const{originalVariableList:u,channel:j}=o.useTemplateModalContext();return e.jsxs(c,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(r.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==u?void 0:u.map(((t,i)=>j!==s.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(a.default,{index:i,variable:t,onFocus:()=>null==d?void 0:d(i)})}),i):e.jsx(e.Fragment,{})))]})};

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

@@ -1,9 +0,0 @@
-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/cjs/components/template-context-mapper/modalElements/VariableEditorHeader.js

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../tooltips/Tooltip.js");require("../../tooltips/CustomisedTooltip.js");var o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(i);const a=l.default(o.BodySecondary)`
-	line-height: 1.5 !important;
-`,d=l.default.div`
-	padding-top: 24px;
-	padding-left: 10px;
-	padding-right: 10px;
-	margin-bottom: 8px;
-	line-height: normal;
-`;exports.default=i=>{let{headerText:n,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(o.TitleRegular,Object.assign({style:{color:r.COLORS.content.primary}},{children:n})),c&&e.jsx(s.Tooltip,Object.assign({body:l},{children:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:r.COLORS.content.placeholder})})}))]})),e.jsx(a,Object.assign({style:{color:r.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:l}))]}))};

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

@@ -1,16 +0,0 @@
-/// <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/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +0,0 @@
-"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/convertPlaceholdersToBikDropdown.d.ts

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

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

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

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

@@ -1,21 +0,0 @@
-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/cjs/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +0,0 @@
-"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/getVariableNameEmail.d.ts

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

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getVariableNameForEmailByIndex=e=>"connectors_variable_"+e;

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

@@ -1,3 +0,0 @@
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { DEVICE_TYPES } from '../context/templateModalContext';
-export declare function highlightFor(id: string, color: string, seconds: number, channel: CHANNEL_TYPE, device: DEVICE_TYPES): void;

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../template-preview/models/Channels.js");exports.highlightFor=function(t,o,l,n,d){var i;const u=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),m=n===e.CHANNEL_TYPE.EMAIL?null===(i=null==u?void 0:u.contentWindow)||void 0===i?void 0:i.document.getElementById(t):document.getElementById(t);if(m){const e=m.style.backgroundColor;m.style.backgroundColor=o,setTimeout((function(){m.style.backgroundColor=e}),1e3*l)}};

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

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

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

@@ -1 +0,0 @@
-"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/EmailTemplateHTMLPreview.d.ts

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

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.d.ts

@@ -1,8 +0,0 @@
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;
-export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,29 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
-	padding: 16px;
-	padding-bottom: 12px;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,i=o.default.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-left: 1px solid ${e.COLORS.stroke.primary};
-	border-right: 1px solid ${e.COLORS.stroke.primary};
-	border-top-color: ${e.COLORS.stroke.primary};
-	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
-	overflow: scroll;
-`,a=o.default.div`
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	background: ${e.COLORS.surface.standard};
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,s=o.default.div`
-	border-radius: 4px;
-	background-color: ${e.COLORS.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-`;exports.EmailContainer=s,exports.Header=d,exports.ImageContainer=i,exports.ViewButton=a;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { EmailTemplateType } from './models/EmailTemplate';
-declare const EmailTemplateThumbnailPreview: React.FC<{
-    template: EmailTemplateType;
-    hideHeader?: boolean;
-    handleViewTemplate: () => void;
-    hideViewButton?: boolean;
-    containerStyle?: CSSProperties;
-    emailHtmlContainerId?: string;
-    emailDisplayContent?: string;
-}>;
-export default EmailTemplateThumbnailPreview;

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

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

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type SMSBubbleProps = {
-    content: string;
-    size?: 'small' | 'large';
-};
-declare const SMSBubble: (props: SMSBubbleProps) => JSX.Element;
-export default SMSBubble;

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/union.svg.js"),r=require("styled-components"),s=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(r);const i=n.default.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,a=n.default.div`
-	padding: 12px;
-	background: ${s.COLORS.background.base};
-	border-radius: 16px;
-	position: relative;
-`;exports.SMSContainer=a,exports.SideCaret=i,exports.default=r=>{const{content:o,size:n}=r;return e.jsxs(a,{children:[e.jsx(i,{children:e.jsx(t.default,{color:s.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:"small"===n?12:14},dangerouslySetInnerHTML:{__html:o}})]})};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { SMSTemplateType } from './models/SmsTemplate';
-import { CUSTOM_VARIABLE } from './models/TemplateMeta';
-declare const SmsTemplatePreview: React.FC<{
-    template: SMSTemplateType;
-    variableStore?: CUSTOM_VARIABLE[];
-    hideHeader?: boolean;
-    onlyTemplateContent?: boolean;
-    display_content?: string;
-    size?: 'small' | 'large';
-}>;
-export default SmsTemplatePreview;

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

@@ -1 +0,0 @@
-"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/SmsTemplatePreview.styled.d.ts

@@ -1,13 +0,0 @@
-export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: "small" | "large" | undefined;
-}, never>;
-export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-    outsidePreview?: boolean | undefined;
-}, never>;
-export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,46 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=d(e);t.default.div`
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	left: -5px;
-	bottom: 2px;
-`;const o=t.default.div`
-	padding: ${e=>"small"===e.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
-	background: ${r.COLORS.surface.standard};
-	border-radius: 4px;
-`,a=t.default.div`
-	padding: 16px;
-	background: ${r.COLORS.surface.standard};
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
-`;t.default.div`
-	border: 1px solid ${r.COLORS.stroke.primary};
-	height: 100%;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-`,t.default.div`
-	margin-top: ${e=>e.hideHeader?0:"16px"};
-	border-radius: 4px;
-	border-color: ${r.COLORS.stroke.primary};
-	border-width: ${e=>e.outsidePreview?0:"1px"};
-`,t.default.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,t.default.div`
-	padding: 12px;
-	background: ${r.COLORS.background.base};
-	border-radius: 16px;
-`;const p=t.default.div`
-	padding: 10px;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	background: ${r.COLORS.surface.standard};
-	display: flex;
-	justify-content: space-between;
-	border-bottom: 1px solid ${r.COLORS.background.base};
-`;exports.SMSBubbleContainer=o,exports.SMSCardHeader=a,exports.SMSHeader=p;

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

@@ -1,19 +0,0 @@
-import React from 'react';
-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 interface TemplatePreviewProps {
-    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
-    channel: CHANNEL_TYPE;
-    onlyTemplateContent?: boolean;
-    outsidePreview?: boolean;
-    templateCreationsInfo?: boolean;
-    whatsAppSpecificMeta?: WhatsappMeta;
-    emailSpecificMeta?: EmailMeta;
-    smsSpecificMeta?: SMSMeta;
-    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/cjs/components/template-preview/TemplatePreview.js

@@ -1 +0,0 @@
-"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/ChatBtn.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const ChatBtn: React.FC<{
-    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
-    text: string;
-    extraContent?: string;
-    placeholder?: string;
-    textTypography?: React.FC;
-    size?: 'small' | 'large';
-}>;

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=s=>{let{Icon:i,text:c,extraContent:a,placeholder:l,textTypography:o,size:p}=s;const d=o||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[i&&e.jsx(i,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14}},{children:c}))]})),!!a&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder}},{children:l?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(l):a}))]}))})};