@bikdotai/bik-component-library 0.0.738-0 → 0.0.738-5

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

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

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

@@ -1,7 +1,7 @@
 /// <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";
+import { type CTABtnValType, type QRBBtnValType, type TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
+import type { 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 {

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{cloneDeep as t}from"lodash";import{useState as l,useEffect as s}from"react";import{Dropdown as a}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{UNSUBSCRIBE_URL_OPTION as o,STATIC_URL_CTA_OPTION as r,CUSTOM_URL_NAME as u}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{UNSUBSCRIBE_URL_VARIABLE as m,STATIC_URL_VARIABLE_NAME as j}from"../utils/constants.js";import{validateIsUrl as v}from"../utils/validateIsUrl.js";import g,{Container as f}from"./VariableConnector.js";const O=O=>{let{variableListIndex:x,button:y,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:L,currentVariableList:R,CTAoptions:U,QRBoptions:V,disableEdit:T}=O;var w,C,I,E,P;const[H,N]=l(""),[_,B]=l(),Q=null==U?void 0:U.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value&&_.label===e.label}))),k=null==V?void 0:V.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value}))),{isError:S,disableEditVariable:K,pod:Y,selectedCarouselIndex:$,originalVariableList:q,setOriginalVariableList:A,isProductCarouselType:M,ctaOptionsErrors:D,setCtaOptionsErrors:W}=p();function z(e){if(N(e),null!=$&&$>-1&&M){const l=t(q);if("URL"===y.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[x];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==A||A((e=>Object.assign(Object.assign({},e),{cards:t}))),null==h||h(`https://${e}`,"custom",x)}return}let l=R.buttons.filter((e=>"URL"===e.type))[x];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=R.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=$&&$>-1?q.cards[$]:q);if(a.buttons=s,null!=$&&$>-1){const e=[...q.cards];e[$]=a,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==h||h(`https://${e}`,"custom",x)}return s((()=>{var e,t;if(y.buttonVariable===m)return B(o),void N((null===(e=y.example)||void 0===e?void 0:e[0].split("https://")[1])||"");if(y.buttonVariable&&i.test(y.buttonVariable))y.buttonVariable===j?B(r):B(u),N((null===(t=y.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let e=-1;const t="URL"===y.type?U:V;e="URL"===y.type?t.findIndex((e=>e.placeHolder===y.buttonVariable)):t.findIndex((e=>e.label===y.flowName)),e>-1?B(t[e]):null==W||W((e=>Object.assign(Object.assign({},e),{[x]:"Required field!"})))}}),[]),Y!==c.CHATBOT?e.jsxs(f,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(d,Object.assign({style:{color:b.content.primary}},{children:[y.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(a,{disabled:K||T,truncatedText:!1,options:"URL"===y.type?"static_link"===(null==_?void 0:_.value)?[r]:Q:k,isSearchable:!0,onSelect:function(e,l){null==W||W((e=>(delete e[x],Object.assign({},e))));const s=e;B(s);const a=("URL"===y.type?U:V).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=$&&$>-1&&M){const e=t(q);if("URL"===y.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[x];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==h||h({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",x),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===y.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[x];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==L||L({flowName:s.label,flowId:s.value},"placeholder",x),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===y.type){let t=R.buttons.filter((e=>"URL"===e.type))[x];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder,example:[(null==s?void 0:s.value)||"https://d.bik.ai/"]}),e=R.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==h||h({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",x)}else{let t=R.buttons.filter((e=>"QUICK_REPLY"===e.type))[x];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=R.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==L||L({flowName:s.label,flowId:s.value},"placeholder",x)}const l=Object.assign({},null!=$&&$>-1?q.cards[$]:q);if(l.buttons=e,null!=$&&$>-1){const e=[...q.cards];e[$]=l,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else z("")},defaultOptions:_?[Object.assign(Object.assign({},_),{selected:!0})]:[],error:S?null==D?void 0:D[x]:void 0})})),("custom_link"===(null==_?void 0:_.value)||"static_link"===(null==_?void 0:_.value))&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(n,{state:K||T?"disabled":"none",errorMessage:S?H?v(H)?"":"Enter valid URL":"Required field":"",value:H,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:z,maxCharLimit:2e3})}))]}):e.jsx(g,{index:x,variable:{variableName:null!==(w=y.text)&&void 0!==w?w:"",updatedValue:"((customPlaceholderName))"===y.buttonVariable?`${null===(C=y.example)||void 0===C?void 0:C[0]}`:null!==(I=y.buttonVariable)&&void 0!==I?I:"",type:"link",isEditableVariable:!0,index:null!==(E=y.index)&&void 0!==E?E:0,queryParams:null!==(P=y.queryParams)&&void 0!==P?P:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:y.type,CTAoptions:U})};export{O as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"lodash/cloneDeep";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{UNSUBSCRIBE_URL_OPTION as r,STATIC_URL_CTA_OPTION as u,CUSTOM_URL_NAME as c}from"../../template-preview/models/TemplateMeta.js";import{POD as d}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as b}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{UNSUBSCRIBE_URL_VARIABLE as v,STATIC_URL_VARIABLE_NAME as j}from"../utils/constants.js";import{validateIsUrl as g}from"../utils/validateIsUrl.js";import f,{Container as O}from"./VariableConnector.js";const x=x=>{let{variableListIndex:y,button:h,updateSelectedURLTemplateBtn:L,updateSelectedQRBTemplateBtn:R,currentVariableList:U,CTAoptions:V,QRBoptions:T,disableEdit:w}=x;var C,I,E,P,H;const[N,B]=s(""),[_,Q]=s(),k=null==V?void 0:V.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value&&_.label===e.label}))),S=null==T?void 0:T.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value}))),{isError:K,disableEditVariable:Y,pod:$,selectedCarouselIndex:q,originalVariableList:A,setOriginalVariableList:M,isProductCarouselType:D,ctaOptionsErrors:W,setCtaOptionsErrors:z}=m();function F(e){if(B(e),null!=q&&q>-1&&D){const t=l(A);if("URL"===h.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[y];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==M||M((e=>Object.assign(Object.assign({},e),{cards:l}))),null==L||L(`https://${e}`,"custom",y)}return}let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),a=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(a.buttons=s,null!=q&&q>-1){const e=[...A.cards];e[q]=a,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==L||L(`https://${e}`,"custom",y)}return a((()=>{var e,t;if(h.buttonVariable===v)return Q(r),void B((null===(e=h.example)||void 0===e?void 0:e[0].split("https://")[1])||"");if(h.buttonVariable&&o.test(h.buttonVariable))h.buttonVariable===j?Q(u):Q(c),B((null===(t=h.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let e=-1;const t="URL"===h.type?V:T;e="URL"===h.type?t.findIndex((e=>e.placeHolder===h.buttonVariable)):t.findIndex((e=>e.label===h.flowName)),e>-1?Q(t[e]):null==z||z((e=>Object.assign(Object.assign({},e),{[y]:"Required field!"})))}}),[]),$!==d.CHATBOT?e(O,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:p.content.primary}},{children:[h.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(n,{disabled:Y||w,truncatedText:!1,options:"URL"===h.type?"static_link"===(null==_?void 0:_.value)?[u]:k:S,isSearchable:!0,onSelect:function(e,t){null==z||z((e=>(delete e[y],Object.assign({},e))));const s=e;Q(s);const a=("URL"===h.type?V:T).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=q&&q>-1&&D){const e=l(A);if("URL"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==L||L({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==R||R({flowName:s.label,flowId:s.value},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===h.type){let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder,example:[(null==s?void 0:s.value)||"https://d.bik.ai/"]}),e=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==L||L({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",y)}else{let t=U.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=U.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==R||R({flowName:s.label,flowId:s.value},"placeholder",y)}const t=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(t.buttons=e,null!=q&&q>-1){const e=[...A.cards];e[q]=t,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else F("")},defaultOptions:_?[Object.assign(Object.assign({},_),{selected:!0})]:[],error:K?null==W?void 0:W[y]:void 0})})),("custom_link"===(null==_?void 0:_.value)||"static_link"===(null==_?void 0:_.value))&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:Y||w?"disabled":"none",errorMessage:K?N?g(N)?"":"Enter valid URL":"Required field":"",value:N,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:F,maxCharLimit:2e3})}))]}):t(f,{index:y,variable:{variableName:null!==(C=h.text)&&void 0!==C?C:"",updatedValue:"((customPlaceholderName))"===h.buttonVariable?`${null===(I=h.example)||void 0===I?void 0:I[0]}`:null!==(E=h.buttonVariable)&&void 0!==E?E:"",type:"link",isEditableVariable:!0,index:null!==(P=h.index)&&void 0!==P?P:0,queryParams:null!==(H=h.queryParams)&&void 0!==H?H:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:h.type,CTAoptions:V})};export{x as default};

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

@@ -0,0 +1,13 @@
+import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export interface CarouselProduct {
+    name: string;
+    image: string;
+    quantity: number;
+    variantId: string;
+    productId: string;
+    displayOrder: number;
+    collectionId: string;
+    productName: string;
+    productImage: string;
+}
+export type ComponentType = WhatsAppTemplate['components'][0];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+import type { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
 interface UseEditWhatsappTemplateMediaProps {
     uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=e.validate({file:o});if(n)C(n),k(!1),O(!1);else{const e=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:e});if(n.success){const[e]=o.type.split("/");p(null!==(i=n.url)&&void 0!==i?i:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function R(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")}),[h]),{uploadMedia:function(i){var n,t,s,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const e=yield c(i),{type:o,size:t,success:s}=e;if(s){const i=(new l).validate({linkData:{type:o,size:t}});if(i)return C(i),void k(!1);const[s]=o.split("/");p(null!==(n=e.url)&&void 0!==n?n:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(s=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else R()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:R,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import o from"lodash/cloneDeep";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=e.validate({file:o});if(n)C(n),k(!1),O(!1);else{const e=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:e});if(n.success){const[e]=o.type.split("/");p(null!==(i=n.url)&&void 0!==i?i:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function D(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")}),[h]),{uploadMedia:function(i){var n,t,s,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const e=yield c(i),{type:o,size:t,success:s}=e;if(s){const i=(new l).validate({linkData:{type:o,size:t}});if(i)return C(i),void k(!1);const[s]=o.split("/");p(null!==(n=e.url)&&void 0!==n?n:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(s=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else D()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:D,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};

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

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

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

@@ -1,5 +1,5 @@
-import { WebpushTemplateType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
-import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+import type { WebpushTemplateType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import type { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 type ComponentType = WhatsAppTemplate['components'][0];
 export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
     imageComponent: null;

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

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

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{Button as t}from"../button/Button.js";import{TitleRegular as a}from"../TypographyStyle.js";import{EmailContainer as s,Header as n,IframeContainer as r,ImageContainer as o,CardLoadingContainer as i,ViewButton as p}from"./EmailTemplatePreview.styled.js";const l="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",d=d=>{let{template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:h,containerStyle:j,emailHtmlContainerId:y,emailDisplayContent:b,applyBorderBottom:x,hidePointerEvents:g}=d;return e.jsxs(s,Object.assign({hideHeader:u,style:Object.assign({},null!=j?j:{})},{children:[!u&&e.jsx(n,{children:e.jsx(a,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),e.jsx(r,Object.assign({applyBorderBottom:x},{children:b?e.jsx("iframe",{title:"Email template preview",id:null!=y?y:"",width:"100%",srcDoc:(f=b,f.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${l}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:g?void 0:"none"}}):e.jsx(o,Object.assign({hideHeader:u},{children:e.jsx(i,{})}))})),!h&&e.jsx(p,{children:e.jsx(t,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]}));var f};export{l as DEFAULT_IMAGE,d as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as s,Header as r,IframeContainer as o,ImageContainer as i,CardLoadingContainer as p,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",c=c=>{let{template:m,handleViewTemplate:u,hideHeader:h,hideViewButton:y,containerStyle:b,emailHtmlContainerId:g,emailDisplayContent:f,applyBorderBottom:C,hidePointerEvents:j}=c;return e(s,Object.assign({hideHeader:h,style:Object.assign({},null!=b?b:{})},{children:[!h&&t(r,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:m.name}))}),t(o,Object.assign({applyBorderBottom:C},{children:f?t("iframe",{title:"Email template preview",id:null!=g?g:"",width:"100%",srcDoc:(x=f,x.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${d}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:j?void 0:"none"}}):t(i,Object.assign({hideHeader:h},{children:t(p,{})}))})),!y&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{u&&u()}})})]}));var x};export{d as DEFAULT_IMAGE,c as default};

package/dist/esm/components/template-preview/RCS/RCSButtons.js

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Caption as t,BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";const i=i=>{let{Icon:s,text:o,extraContent:l,placeholder:c,textTypography:a,size:p}=i;const d=a||r;return e.jsx(e.Fragment,{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:[s&&e.jsx(s,{color:n.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx("div",Object.assign({style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"}},{children:e.jsx(d,Object.assign({style:{color:n.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:o}))}))]})),!!l&&e.jsx(t,Object.assign({style:{marginTop:2,color:n.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:c?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(c):l}))]}))})};export{i as RCSButtons};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{Caption as i,BodySecondary as n}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const l=l=>{let{Icon:c,text:s,extraContent:a,placeholder:p,textTypography:d,size:h}=l;const g=d||n;return e(t,{children:r("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[r("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[c&&e(c,{color:o.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e("div",Object.assign({style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"}},{children:e(g,Object.assign({style:{color:o.special.brand.facebook,textAlign:"center",fontSize:"small"===h?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s}))}))]})),!!a&&e(i,Object.assign({style:{marginTop:2,color:o.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:p?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(p):a}))]}))})};export{l as RCSButtons};

package/dist/esm/components/template-preview/RCS/RCSChatHeader.js

@@ -1 +1 @@
-import{j as s}from"../../../node_modules/react/jsx-runtime.js";import o from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import t from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as r}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as i,LeftContainer as c,IconContainer as a,TitleContainer as j,SubTitle as m}from"./RCSPreview.styled.js";const d=()=>s.jsxs(i,{children:[s.jsxs(c,{children:[s.jsx(o,{height:16,width:16,color:n.content.secondary}),s.jsx(a,{children:s.jsx(e,{height:14,width:14,color:n.content.primaryInverse})}),s.jsxs(j,{children:[s.jsx(r,Object.assign({color:n.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),s.jsx(m,{children:"Business account"})]})]}),s.jsx(t,{height:16,width:16,color:n.content.secondary})]});export{d as default};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import r from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import s from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as a,IconContainer as h,TitleContainer as m,SubTitle as d}from"./RCSPreview.styled.js";const l=()=>o(c,{children:[o(a,{children:[t(r,{height:16,width:16,color:i.content.secondary}),t(h,{children:t(e,{height:14,width:14,color:i.content.primaryInverse})}),o(m,{children:[t(n,Object.assign({color:i.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),t(d,{children:"Business account"})]})]}),t(s,{height:16,width:16,color:i.content.secondary})]});export{l as default};

package/dist/esm/components/template-preview/RCS/RCSChatPreview.js

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{useMemo as t}from"react";import{useTemplateModalContext as r}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as s}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as l}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{ChatBtn as i}from"../WhatsApp/ChatBtn.js";import{RCSButtons as o}from"./RCSButtons.js";import{RCSMediaCard as n,PdfMediaCard as d}from"./RCSMediaCard.js";import{RCSPreviewContainer as m,HeaderTextContainer as p,TitleTextContainer as u,RcsHtmlContainer as h,RCSChatBtnContainer as x}from"./RCSPreview.styled.js";const j=new l,c=l=>{const{bodyText:c,titleText:g,headerMediaType:T,headerText:y,headerAssetLink:C,headerAssetName:v,imagePreviewStyles:f,size:M,bodyVariableList:N,headerVariableList:A,buttons:O,carouselCardIndex:b,isWhatsappCarousel:L,isPreview:w,titleVariableList:E,templateConfiguration:H}=l,I=j.format(null==c?void 0:c.replace(/</g,"&lt;").replace(/>/g,"&gt;"),N),S=j.format(null==y?void 0:y.replace(/</g,"&lt;").replace(/>/g,"&gt;"),A),P=j.format(null==g?void 0:g.replace(/</g,"&lt;").replace(/>/g,"&gt;"),E),{selectedCarouselIndex:_,isProductCarouselType:z,errorIndexes:B,isCarouselHovered:F}=r(),k=t((()=>s(null==H?void 0:H.templateType)),[null==H?void 0:H.templateType]),D=t((()=>"HORIZONTAL"==(null==H?void 0:H.orientation)),[H]);return e.jsxs(m,Object.assign({isCarouselCard:null!=b&&b>-1,showBorder:null!=b&&b===_||z&&null!=b&&b>-1&&null!=_&&_>-1,hasError:null==B?void 0:B.includes(null!=b?b:-2),isWhatsappCarousel:L,isPreview:w,showDashedBorder:z&&F&&(null!=_?_:-1)<0&&(null!=b?b:-1)>-1,needBorder:k,isHorizontalOrientation:D},{children:[!D&&e.jsx(e.Fragment,{children:T===a.TEXT?e.jsx(p,{dangerouslySetInnerHTML:{__html:S}}):T!==a.NONE&&C&&T!==a.DOCUMENT?e.jsx(n,{headerAssetLink:C,headerAssetName:v,mediaType:T,imagePreviewStyles:T===a.IMAGE?f:{}}):null}),e.jsxs("div",Object.assign({style:{width:D?"50%":""}},{children:[e.jsxs("div",Object.assign({className:k?"":"text--template"},{children:[!!g&&e.jsx(e.Fragment,{children:e.jsx(u,{dangerouslySetInnerHTML:{__html:P}})}),!!c&&e.jsx(e.Fragment,{children:e.jsx(h,{dangerouslySetInnerHTML:{__html:I},style:{paddingTop:g?0:12}})}),T===a.DOCUMENT?e.jsx(d,Object.assign({},{headerAssetLink:C,headerAssetName:v})):e.jsx(e.Fragment,{})]})),O&&O.length>0?s(null==H?void 0:H.templateType)?e.jsx(e.Fragment,{children:O.map(((t,r)=>e.jsx(i,{text:t.text,size:M},r)))}):e.jsx(x,{children:O.map(((t,r)=>e.jsx(o,{text:t.text,size:M},r)))}):null]})),D&&T!==a.NONE&&C&&T!==a.DOCUMENT&&e.jsx(n,{headerAssetLink:C,headerAssetName:v,mediaType:T,imagePreviewStyles:T===a.IMAGE?f:{},isHorizontal:D})]}))};export{c as RCSChatPreview};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as l}from"react";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as i}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as s}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as o}from"../models/TemplateMeta.js";import{ChatBtn as n}from"../WhatsApp/ChatBtn.js";import{RCSButtons as d}from"./RCSButtons.js";import{RCSMediaCard as m,PdfMediaCard as p}from"./RCSMediaCard.js";import{RCSPreviewContainer as h,HeaderTextContainer as u,TitleTextContainer as c,RcsHtmlContainer as g,RCSChatBtnContainer as T}from"./RCSPreview.styled.js";const y=new s,C=s=>{const{bodyText:C,titleText:v,headerMediaType:x,headerText:f,headerAssetLink:j,headerAssetName:M,imagePreviewStyles:N,size:A,bodyVariableList:O,headerVariableList:b,buttons:L,carouselCardIndex:w,isWhatsappCarousel:E,isPreview:H,titleVariableList:I,templateConfiguration:S}=s,P=y.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),O),_=y.format(null==f?void 0:f.replace(/</g,"&lt;").replace(/>/g,"&gt;"),b),z=y.format(null==v?void 0:v.replace(/</g,"&lt;").replace(/>/g,"&gt;"),I),{selectedCarouselIndex:B,isProductCarouselType:k,errorIndexes:D,isCarouselHovered:R}=a(),V=l((()=>i(null==S?void 0:S.templateType)),[null==S?void 0:S.templateType]),U=l((()=>"HORIZONTAL"==(null==S?void 0:S.orientation)),[S]);return e(h,Object.assign({isCarouselCard:null!=w&&w>-1,showBorder:null!=w&&w===B||k&&null!=w&&w>-1&&null!=B&&B>-1,hasError:null==D?void 0:D.includes(null!=w?w:-2),isWhatsappCarousel:E,isPreview:H,showDashedBorder:k&&R&&(null!=B?B:-1)<0&&(null!=w?w:-1)>-1,needBorder:V,isHorizontalOrientation:U},{children:[!U&&t(r,{children:x===o.TEXT?t(u,{dangerouslySetInnerHTML:{__html:_}}):x!==o.NONE&&j&&x!==o.DOCUMENT?t(m,{headerAssetLink:j,headerAssetName:M,mediaType:x,imagePreviewStyles:x===o.IMAGE?N:{}}):null}),e("div",Object.assign({style:{width:U?"50%":""}},{children:[e("div",Object.assign({className:V?"":"text--template"},{children:[!!v&&t(r,{children:t(c,{dangerouslySetInnerHTML:{__html:z}})}),!!C&&t(r,{children:t(g,{dangerouslySetInnerHTML:{__html:P},style:{paddingTop:v?0:12}})}),x===o.DOCUMENT?t(p,Object.assign({},{headerAssetLink:j,headerAssetName:M})):t(r,{})]})),L&&L.length>0?i(null==S?void 0:S.templateType)?t(r,{children:L.map(((e,r)=>t(n,{text:e.text,size:A},r)))}):t(T,{children:L.map(((e,r)=>t(d,{text:e.text,size:A},r)))}):null]})),U&&x!==o.NONE&&j&&x!==o.DOCUMENT&&t(m,{headerAssetLink:j,headerAssetName:M,mediaType:x,imagePreviewStyles:x===o.IMAGE?N:{},isHorizontal:U})]}))};export{C as RCSChatPreview};

package/dist/esm/components/template-preview/RCS/RCSMediaCard.js

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as i}from"../../shimmer-image/ShimmerImage.js";import{COLORS as r}from"../../../constants/Theme.js";import{HEADER_TYPES as t}from"../models/TemplateMeta.js";import{RCSPdfContainer as o,PdfComineText as a,PdfText as d,RCSMediaContainer as n}from"./RCSPreview.styled.js";const m=i=>{let{headerAssetLink:t,headerAssetName:n}=i;var m;const l=s,c=n||(null===(m=null==t?void 0:t.split("/").pop())||void 0===m?void 0:m.replace(".pdf",""))||"xxxxxxxx";return e.jsxs(o,{children:[e.jsx(l,{height:24,width:24,color:r.icon.placeholder}),!!c&&e.jsxs(a,{children:[e.jsx(d,{children:c}),e.jsx(d,{children:".pdf"})]})]})},l=s=>{let{headerAssetLink:r,headerAssetName:o,mediaType:a,imagePreviewStyles:d,isHorizontal:m}=s;const l={width:"100%",minHeight:m?"100%":"240px",height:m?"100%":"240px",objectFit:"cover",borderRadius:m?"8px":""};return e.jsx(n,Object.assign({isHorizontal:!!m},{children:a===t.IMAGE?e.jsx(i,{imageUrl:r,alt:r,width:"100%",height:m?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},d),{borderTopRightRadius:8,borderTopLeftRadius:8})}):a===t.VIDEO?e.jsx("video",Object.assign({src:r,style:l,controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})}))};export{m as PdfMediaCard,l as RCSMediaCard};
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as s}from"../../shimmer-image/ShimmerImage.js";import{COLORS as o}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as d,PdfComineText as n,PdfText as m,RCSMediaContainer as l}from"./RCSPreview.styled.js";const c=r=>{let{headerAssetLink:s,headerAssetName:a}=r;var l;const c=t,h=a||(null===(l=null==s?void 0:s.split("/").pop())||void 0===l?void 0:l.replace(".pdf",""))||"xxxxxxxx";return e(d,{children:[i(c,{height:24,width:24,color:o.icon.placeholder}),!!h&&e(n,{children:[i(m,{children:h}),i(m,{children:".pdf"})]})]})},h=e=>{let{headerAssetLink:t,headerAssetName:o,mediaType:d,imagePreviewStyles:n,isHorizontal:m}=e;const c={width:"100%",minHeight:m?"100%":"240px",height:m?"100%":"240px",objectFit:"cover",borderRadius:m?"8px":""};return i(l,Object.assign({isHorizontal:!!m},{children:d===a.IMAGE?i(s,{imageUrl:t,alt:t,width:"100%",height:m?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},n),{borderTopRightRadius:8,borderTopLeftRadius:8})}):d===a.VIDEO?i("video",Object.assign({src:t,style:c,controls:!0,muted:!0},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):i(r,{})}))};export{c as PdfMediaCard,h as RCSMediaCard};

package/dist/esm/components/template-preview/RCS/RCSTemplateLikePreview.js

@@ -1,8 +1,8 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import s from"styled-components";import{useTemplateModalContext as t}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{getPreviewPropLen as a}from"../utils/getPreviewPropLen.js";import i from"./RCSChatHeader.js";import{RCSChatPreview as p}from"./RCSChatPreview.js";const n=s.div`
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{getPreviewPropLen as p}from"../utils/getPreviewPropLen.js";import n from"./RCSChatHeader.js";import{RCSChatPreview as h}from"./RCSChatPreview.js";const l=o.div`
 	background-color: white;
 	border-radius: 4px;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,h=s(r)`
-	color: ${o.content.primary};
-`,m=s=>{const{hideDeviceContainerInPreview:r}=t();return 3===a(s)?e.jsx(e.Fragment,{children:s.zeroStateComponent}):r?e.jsx(p,Object.assign({showHeader:s.showHeader},s)):e.jsx(e.Fragment,{children:e.jsxs(n,Object.assign({style:s.containerStyle,showHeader:s.showHeader,isWhatsappCarousel:s.isWhatsappCarousel},{children:[s.showHeader&&e.jsx(i,{}),e.jsxs("div",Object.assign({style:{padding:"small"===s.size?"10px 32px 10px 10px":`10px ${s.isWhatsappCarousel?"0px":"12px"} ${s.isWhatsappCarousel?"2px":"16px"} 16px`,height:s.isWhatsappCarousel?"100%":"auto"}},{children:[!s.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(h,{children:"Preview"})})),e.jsx(p,Object.assign({showHeader:s.showHeader},s))]}))]}))})};export{m as RCSTemplateLikePreview};
+`,m=o(a)`
+	color: ${i.content.primary};
+`,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===p(o)?e(t,{children:o.zeroStateComponent}):a?e(h,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(l,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(n,{}),r("div",Object.assign({style:{padding:"small"===o.size?"10px 32px 10px 10px":`10px ${o.isWhatsappCarousel?"0px":"12px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(h,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{d as RCSTemplateLikePreview};

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

@@ -1,12 +1,12 @@
-import{j as o}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/union.svg.js";import t from"styled-components";import{COLORS as e}from"../../../constants/Theme.js";const n=t.div`
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import i from"styled-components";import{COLORS as n}from"../../../constants/Theme.js";const r=i.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`,i=t.div`
+`,s=i.div`
 	padding: 12px;
-	background: ${e.background.base};
+	background: ${n.background.base};
 	border-radius: 16px;
 	position: relative;
-`,r=t=>{const{content:r,size:d}=t;return o.jsxs(i,{children:[o.jsx(n,{children:o.jsx(s,{color:e.background.base,height:27,width:27})}),o.jsx("div",{style:{fontSize:"small"===d?12:14},dangerouslySetInnerHTML:{__html:r}})]})};export{i as SMSContainer,n as SideCaret,r as default};
+`,d=i=>{const{content:d,size:a}=i;return t(s,{children:[o(r,{children:o(e,{color:n.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===a?12:14},dangerouslySetInnerHTML:{__html:d}})]})};export{s as SMSContainer,r as SideCaret,d as default};

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

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

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useTemplateModalContext as t}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as l}from"../../constants/Theme.js";import n from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as a}from"../TypographyStyle.js";import o from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import r from"./SmsTemplatePreview.js";import d from"./webpush/WebpushPreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:c,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:g,size:C,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:T,applyBorderBottom:O,webPushSpecificMeta:P,hidePointerEvents:I}=m;var W,H;const{setSelectedCarouselIndex:A}=t();return v===s.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${l.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(r,{template:c,hideHeader:g,onlyTemplateContent:b,size:null!=C?C:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===s.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(o,{template:c,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:g,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:O,hidePointerEvents:I})})):v===s.WHATSAPP||v===s.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?u.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(A&&w){if(-1===f&&!(null===(t=null===(e=null==c?void 0:c.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;A(null!=f?f:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(a,{children:i.convertToTitleCase(null!==(W=null==c?void 0:c.label)&&void 0!==W?W:"")})})):e.jsx(e.Fragment,{}),e.jsx(p,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:c,size:j?"small":null!=C?C:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(H=null==h?void 0:h.containerStyle)&&void 0!==H?H:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:T,channel:v}),!!(null==c?void 0:c.aiContentConfigId)&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e.jsx(n,{width:48,height:48})}))]})):v==s.WEBPUSH?e.jsx("div",Object.assign({style:Object.assign({},null==P?void 0:P.containerStyle)},{children:e.jsx(d,{template:c,extraContainerCss:null==P?void 0:P.extraContainerCss})})):e.jsx(e.Fragment,{})},u={WhatsAppWrapper:{backgroundColor:l.surface.standard,borderRadius:4,border:`1px solid ${l.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as s}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import c from"./WhatsAppTemplatePreview.js";const u=u=>{let{template:h,channel:g,whatsAppSpecificMeta:C,templateCreationsInfo:b,hideHeader:y,size:S,onlyTemplateContent:j,emailSpecificMeta:f,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,applyBorderBottom:I,webPushSpecificMeta:W,hidePointerEvents:H}=u;var A,B;const{setSelectedCarouselIndex:E}=l();return g===d.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles)},{children:e(p,{template:h,hideHeader:y,onlyTemplateContent:j,size:null!=S?S:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})})):g===d.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:b?16:0},null==f?void 0:f.templateContainerStyles)},{children:e(r,{template:h,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:y,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:I,hidePointerEvents:H})})):g===d.WHATSAPP||g===d.RCS?t("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),b?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&O){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(s,{children:n.convertToTitleCase(null!==(A=null==h?void 0:h.label)&&void 0!==A?A:"")})})):e(i,{}),e(c,{showSampleValues:T,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:h,size:b?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?0:1,borderTopWidth:1},null!==(B=null==C?void 0:C.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,channel:g}),!!(null==h?void 0:h.aiContentConfigId)&&e("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e(a,{width:48,height:48})}))]})):g==d.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==W?void 0:W.containerStyle)},{children:e(m,{template:h,extraContainerCss:null==W?void 0:W.extraContainerCss})})):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{u as TemplatePreview};

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import{Caption as t,BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{ChatBtnContainer as i}from"./ChatUI.style.js";const n=n=>{let{Icon:s,text:l,extraContent:c,placeholder:a,textTypography:p,size:h,iconPosition:d="left"}=n;const f=p||r;return e.jsx(i,{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:[s&&"left"===d&&e.jsx(s,{color:o.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(f,Object.assign({style:{color:o.special.brand.facebook,textAlign:"center",fontSize:"small"===h?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:l})),s&&"right"===d&&e.jsx(s,{color:o.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]})),!!c&&e.jsx(t,Object.assign({style:{marginTop:2,color:o.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):c}))]}))})};export{n as ChatBtn};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Caption as r,BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{ChatBtnContainer as n}from"./ChatUI.style.js";const l=l=>{let{Icon:c,text:a,extraContent:s,placeholder:p,textTypography:h,size:d,iconPosition:f="left"}=l;const g=h||o;return e(n,{children:t("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[c&&"left"===f&&e(c,{color:i.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e(g,Object.assign({style:{color:i.special.brand.facebook,textAlign:"center",fontSize:"small"===d?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a})),c&&"right"===f&&e(c,{color:i.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]})),!!s&&e(r,Object.assign({style:{marginTop:2,color:i.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:p?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(p):s}))]}))})};export{l as ChatBtn};

package/dist/esm/components/template-preview/WhatsApp/ChatHeader.js

@@ -1 +1 @@
-import{j as s}from"../../../node_modules/react/jsx-runtime.js";import r from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as t}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as i,LeftContainer as c,IconContainer as m,TitleContainer as a,SubTitle as j}from"./ChatHeader.style.js";const h=()=>s.jsxs(i,{children:[s.jsxs(c,{children:[s.jsx(r,{height:16,width:16,color:n.content.primaryInverse}),s.jsx(m,{children:s.jsx(e,{height:14,width:14,color:n.content.primaryInverse})}),s.jsxs(a,{children:[s.jsx(t,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),s.jsx(j,{children:"Business account"})]})]}),s.jsx(o,{height:16,width:16,color:n.content.primaryInverse})]});export{h as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/arrow_left.svg.js";import s from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as m,IconContainer as a,TitleContainer as h,SubTitle as l}from"./ChatHeader.style.js";const p=()=>r(c,{children:[r(m,{children:[e(t,{height:16,width:16,color:n.content.primaryInverse}),e(a,{children:e(s,{height:14,width:14,color:n.content.primaryInverse})}),r(h,{children:[e(i,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),e(l,{children:"Business account"})]})]}),e(o,{height:16,width:16,color:n.content.primaryInverse})]});export{p as default};

package/dist/esm/components/template-preview/WhatsApp/ChatUI.js

@@ -1,7 +1,7 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/halfRectangle.svg.js";import r from"../../../assets/icons/phone.svg.js";import o from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as s}from"react";import i from"styled-components";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{BodySecondary as n,Caption as l}from"../../TypographyStyle.js";import{COLORS as m,FONTS as p}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as d}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as c,ACTIONS_TYPES as h}from"../models/TemplateMeta.js";import{ChatBtn as x}from"./ChatBtn.js";import{Container as j,FooterWrapper as g,FooterText as f,TimeStamp as y}from"./ChatUI.style.js";import{MediaCard as T}from"./MediaCard.js";import v from"./RenderTemplateWithVariable.js";const w=i.div`
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as l}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as m}from"../../TypographyStyle.js";import{COLORS as d,FONTS as c}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as h}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{ChatBtn as y}from"./ChatBtn.js";import{Container as T,FooterWrapper as x,FooterText as v,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as w}from"./MediaCard.js";import b from"./RenderTemplateWithVariable.js";const u=n.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -7.7px;
 	top: -8px;
-`,b=i=>{const{bodyText:b,footerText:u,headerMediaType:S,headerText:N,headerAssetLink:A,headerAssetName:M,quickReplybtn:C,ctaBtn:F,actionTypes:L,textType:k,extras:z,showHeader:B,imagePreviewStyles:E,size:I,children:P,isPreview:R}=i,W=new d,_=s((()=>({color:m.content.primary,margin:12,fontSize:B?p.caption.fontSize:p.bodySecondary.fontSize,fontWeight:p.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(j,Object.assign({isPreview:R},{children:[e.jsx(w,{children:e.jsx(t,{color:"white",height:8,width:8})}),S===c.TEXT?e.jsx(v,{bold:!0,text:null==N?void 0:N.replace(/</g,"&lt;").replace(/>/g,"&gt;")}):S!==c.NONE?e.jsx(T,{headerAssetLink:A,headerAssetName:M,mediaType:S,imagePreviewStyles:S===c.IMAGE?E:{}}):e.jsx(e.Fragment,{}),!!b&&e.jsx(e.Fragment,{children:P?e.jsx(e.Fragment,{children:P}):e.jsx(e.Fragment,{children:"html"===k?e.jsx("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:W.convertToHTML(b)}}):e.jsx(n,{children:null==b?void 0:b.replace(/</g,"&lt;").replace(/>/g,"&gt;")})})}),e.jsxs(g,{children:[e.jsx(a,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(f,Object.assign({style:{flex:1}},{children:u}))})),e.jsx(y,{children:"16:48"})]}),L===h.QUICK_REPLY?e.jsx("div",{children:null==C?void 0:C.map(((t,r)=>e.jsx(x,{text:t.text},r)))}):L===h.CTA_BTN?e.jsx("div",{children:null==F?void 0:F.map(((t,s)=>e.jsx(x,{textTypography:B?l:n,extraContent:z?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r:o,size:I},s)))}):e.jsx(e.Fragment,{})]}))};export{b as default};
+`,S=n=>{const{bodyText:S,footerText:N,headerMediaType:A,headerText:M,headerAssetLink:C,headerAssetName:L,quickReplybtn:k,ctaBtn:z,actionTypes:B,textType:E,extras:I,showHeader:P,imagePreviewStyles:R,size:W,children:H,isPreview:O}=n,_=new h,U=a((()=>({color:d.content.primary,margin:12,fontSize:P?c.caption.fontSize:c.bodySecondary.fontSize,fontWeight:c.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(T,Object.assign({isPreview:O},{children:[t(u,{children:t(o,{color:"white",height:8,width:8})}),A===f.TEXT?t(b,{bold:!0,text:null==M?void 0:M.replace(/</g,"&lt;").replace(/>/g,"&gt;")}):A!==f.NONE?t(w,{headerAssetLink:C,headerAssetName:L,mediaType:A,imagePreviewStyles:A===f.IMAGE?R:{}}):t(r,{}),!!S&&t(r,{children:t(r,H?{children:H}:{children:"html"===E?t("div",{className:"richTextEditor",style:U,dangerouslySetInnerHTML:{__html:_.convertToHTML(S)}}):t(p,{children:null==S?void 0:S.replace(/</g,"&lt;").replace(/>/g,"&gt;")})})}),e(x,{children:[t(l,Object.assign({body:null!=N?N:"",placement:"top"},{children:t(v,Object.assign({style:{flex:1}},{children:N}))})),t(j,{children:"16:48"})]}),B===g.QUICK_REPLY?t("div",{children:null==k?void 0:k.map(((e,r)=>t(y,{text:e.text},r)))}):B===g.CTA_BTN?t("div",{children:null==z?void 0:z.map(((e,r)=>t(y,{textTypography:P?m:p,extraContent:I?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},r)))}):t(r,{})]}))};export{S as default};

package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,19 +1,19 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/chevronDownOutline.svg.js";import o from"../../../assets/icons/copy-code-icon.svg.js";import s from"../../../assets/icons/halfRectangle.svg.js";import r from"../../../assets/icons/phone.svg.js";import i from"../../../assets/icons/qrb.svg.js";import l from"../../../assets/icons/RedirectToNew.svg.js";import n from"styled-components";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{TitleSmall as d,Caption as m,BodySecondary as x}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{VariableEditorHelper as h}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as j,ACTIONS_TYPES as f}from"../models/TemplateMeta.js";import{ChatBtn as g}from"./ChatBtn.js";import{Container as u,FooterWrapper as y,FooterText as C,TimeStamp as T}from"./ChatUI.style.js";import{LimitedTimeOffer as v}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as I}from"./MediaCard.js";const L=n.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/chevronDownOutline.svg.js";import i from"../../../assets/icons/copy-code-icon.svg.js";import s from"../../../assets/icons/halfRectangle.svg.js";import l from"../../../assets/icons/phone.svg.js";import n from"../../../assets/icons/qrb.svg.js";import a from"../../../assets/icons/RedirectToNew.svg.js";import p from"styled-components";import{useTemplateModalContext as d}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{TitleSmall as c,Caption as h,BodySecondary as f}from"../../TypographyStyle.js";import{COLORS as x}from"../../../constants/Theme.js";import{VariableEditorHelper as y}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as g,ACTIONS_TYPES as u}from"../models/TemplateMeta.js";import{ChatBtn as C}from"./ChatBtn.js";import{Container as T,FooterWrapper as v,FooterText as j,TimeStamp as I}from"./ChatUI.style.js";import{LimitedTimeOffer as L}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as w}from"./MediaCard.js";const O=p.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -7.7px;
 	top: -8px;
-`,w=n.div`
+`,b=p.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${c.content.primary};
+	color: ${x.content.primary};
 	word-wrap: break-word;
-`,O=n(w)`
+`,E=p(b)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,b=new h,E=n=>{const{bodyText:c,footerText:h,headerMediaType:E,headerText:_,headerAssetLink:P,headerAssetName:N,quickReplybtn:M,ctaBtn:S,actionTypes:A,extras:R,showHeader:B,imagePreviewStyles:H,size:F,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:D,carouselCardIndex:V,isWhatsappCarousel:Y,isPreview:q,children:K,hideFooter:Q=!1}=n,W=b.format(null==c?void 0:c.replace(/</g,"&lt;").replace(/>/g,"&gt;"),U),G=b.format(null==_?void 0:_.replace(/</g,"&lt;").replace(/>/g,"&gt;"),k),{selectedCarouselIndex:X,isProductCarouselType:$,errorIndexes:J,isCarouselHovered:Z}=a(),ee={COPY_CODE:o,PHONE_NUMBER:r,URL:l,QUICK_REPLY:i,VOICE_CALL:r,CALL_PERMISSION:t};return e.jsxs(u,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===X||$&&null!=V&&V>-1&&null!=X&&X>-1,hasError:null==J?void 0:J.includes(null!=V?V:-2),isWhatsappCarousel:Y,isPreview:q,showDashedBorder:$&&Z&&(null!=X?X:-1)<0&&(null!=V?V:-1)>-1},{children:[!Y&&e.jsx(L,{children:e.jsx(s,{color:"white",height:8,width:8})}),E===j.TEXT?e.jsx(O,{dangerouslySetInnerHTML:{__html:G}}):E!==j.NONE?e.jsx(I,{headerAssetLink:P,headerAssetName:N,mediaType:E,imagePreviewStyles:E===j.IMAGE?H:{}}):e.jsx(e.Fragment,{}),(null==D?void 0:D.dateTime)?e.jsx(v,{text:D.text,dateTime:D.dateTime,code:D.code}):e.jsx(e.Fragment,{}),!!c&&e.jsx(e.Fragment,{children:e.jsx(w,{dangerouslySetInnerHTML:{__html:W},style:{flex:1}})}),K,!Q&&e.jsxs(y,{children:[e.jsx(p,Object.assign({body:null!=h?h:"",placement:"top"},{children:e.jsx(C,Object.assign({style:{flex:1}},{children:h}))})),e.jsx(T,{children:"16:48"})]}),z&&z.length>0?z.map(((t,o)=>e.jsx(g,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:ee[t.type],size:F,iconPosition:"CALL_PERMISSION"===t.type?"right":"left",textTypography:"CALL_PERMISSION"===t.type?d:void 0},o))):A===f.QUICK_REPLY?e.jsx("div",{children:null==M?void 0:M.map(((t,o)=>e.jsx(g,{text:t.text},o)))}):A===f.CTA_BTN?e.jsx("div",{children:null==S?void 0:S.map(((t,o)=>e.jsx(g,{textTypography:B?m:x,extraContent:R?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r:l,size:F},o)))}):e.jsx(e.Fragment,{})]}))};export{E as ChatUIV2,w as HtmlContainer};
+`,P=new y,_=p=>{const{bodyText:x,footerText:y,headerMediaType:_,headerText:N,headerAssetLink:M,headerAssetName:S,quickReplybtn:A,ctaBtn:R,actionTypes:B,extras:H,showHeader:U,imagePreviewStyles:k,size:z,bodyVariableList:D,headerVariableList:V,buttons:Y,limitedTimeOfferComponent:q,carouselCardIndex:K,isWhatsappCarousel:Q,isPreview:W,children:F,hideFooter:G=!1}=p,X=P.format(null==x?void 0:x.replace(/</g,"&lt;").replace(/>/g,"&gt;"),D),$=P.format(null==N?void 0:N.replace(/</g,"&lt;").replace(/>/g,"&gt;"),V),{selectedCarouselIndex:J,isProductCarouselType:Z,errorIndexes:ee,isCarouselHovered:te}=d(),oe={COPY_CODE:i,PHONE_NUMBER:l,URL:a,QUICK_REPLY:n,VOICE_CALL:l,CALL_PERMISSION:r};return e(T,Object.assign({isCarouselCard:null!=K&&K>-1,showBorder:null!=K&&K===J||Z&&null!=K&&K>-1&&null!=J&&J>-1,hasError:null==ee?void 0:ee.includes(null!=K?K:-2),isWhatsappCarousel:Q,isPreview:W,showDashedBorder:Z&&te&&(null!=J?J:-1)<0&&(null!=K?K:-1)>-1},{children:[!Q&&t(O,{children:t(s,{color:"white",height:8,width:8})}),_===g.TEXT?t(E,{dangerouslySetInnerHTML:{__html:$}}):_!==g.NONE?t(w,{headerAssetLink:M,headerAssetName:S,mediaType:_,imagePreviewStyles:_===g.IMAGE?k:{}}):t(o,{}),(null==q?void 0:q.dateTime)?t(L,{text:q.text,dateTime:q.dateTime,code:q.code}):t(o,{}),!!x&&t(o,{children:t(b,{dangerouslySetInnerHTML:{__html:X},style:{flex:1}})}),F,!G&&e(v,{children:[t(m,Object.assign({body:null!=y?y:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:y}))})),t(I,{children:"16:48"})]}),Y&&Y.length>0?Y.map(((e,o)=>t(C,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:oe[e.type],size:z,iconPosition:"CALL_PERMISSION"===e.type?"right":"left",textTypography:"CALL_PERMISSION"===e.type?c:void 0},o))):B===u.QUICK_REPLY?t("div",{children:null==A?void 0:A.map(((e,o)=>t(C,{text:e.text},o)))}):B===u.CTA_BTN?t("div",{children:null==R?void 0:R.map(((e,o)=>t(C,{textTypography:U?h:f,extraContent:H?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?l:a,size:z},o)))}):t(o,{})]}))};export{_ as ChatUIV2,b as HtmlContainer};

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -1,11 +1,11 @@
-import{j as e}from"../../../../node_modules/react/jsx-runtime.js";import n from"../../../../assets/icons/lto_icon.svg.js";import r from"styled-components";import{BodySecondary as s,BodyTiny as o}from"../../../TypographyStyle.js";import{COLORS as i}from"../../../../constants/Theme.js";const t=r=>{const{text:t,dateTime:a,code:f}=r;return e.jsxs(c,{children:[e.jsx(d,{children:e.jsx(n,{width:24,height:24,style:{display:"flex"}})}),e.jsxs(l,{children:[e.jsx(s,Object.assign({numberOfLines:2,color:i.content.primary},{children:t})),e.jsxs(o,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:i.content.secondary},{children:["Offer Ends on ",a]})),e.jsxs(o,Object.assign({numberOfLines:2,color:i.content.placeholder},{children:["Code ",f]}))]})]})},c=r.div`
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import i from"styled-components";import{BodySecondary as o,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=i=>{const{text:c,dateTime:f,code:m}=i;return e(l,{children:[n(d,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(o,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Offer Ends on ",f]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",m]}))]})]})},l=i.div`
 	display: flex;
 	flex-direction: row;
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
 	align-items: center;
-`,d=r.div`
+`,d=i.div`
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,8 +14,8 @@ import{j as e}from"../../../../node_modules/react/jsx-runtime.js";import n from"
 	border-radius: 24px;
 	background: #d8f0e7;
 	margin: 5px;
-`,l=r.div`
+`,a=i.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-`;export{t as LimitedTimeOffer,c as StyledLimitedOfferTime,d as StyledLtoIcon,l as StyledLtoText};
+`;export{c as LimitedTimeOffer,l as StyledLimitedOfferTime,d as StyledLtoIcon,a as StyledLtoText};

package/dist/esm/components/template-preview/WhatsApp/MediaCard.js

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/filePdf.svg.js";import r from"../../../assets/icons/image.svg.js";import t from"../../../assets/icons/videoRecorder.svg.js";import{ShimmerImage as i}from"../../shimmer-image/ShimmerImage.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{MediaContainer as n}from"./ChatUI.style.js";const d=i=>{let{headerAssetName:d,mediaType:c}=i;const h=c===a.IMAGE?r:c===a.VIDEO?t:s;return e.jsxs(n,{children:[e.jsx(h,{height:40,width:40,color:m.icon.placeholder}),!!d&&e.jsx(o,Object.assign({style:{color:m.content.secondary,marginTop:8}},{children:d}))]})},c=s=>{let{headerAssetLink:r,headerAssetName:t,mediaType:o,imagePreviewStyles:m}=s;if(!r||o===a.DOCUMENT)return e.jsx(d,Object.assign({},{headerAssetLink:r,headerAssetName:t,mediaType:o}));return e.jsx(n,{children:o===a.IMAGE?e.jsx(i,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):o===a.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})};export{c as MediaCard,d as NoMediaCard};
+import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import t from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{ShimmerImage as m}from"../../shimmer-image/ShimmerImage.js";import{BodySecondary as a}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HEADER_TYPES as d}from"../models/TemplateMeta.js";import{MediaContainer as c}from"./ChatUI.style.js";const h=s=>{let{headerAssetName:m,mediaType:h}=s;const l=h===d.IMAGE?i:h===d.VIDEO?o:t;return r(c,{children:[e(l,{height:40,width:40,color:n.icon.placeholder}),!!m&&e(a,Object.assign({style:{color:n.content.secondary,marginTop:8}},{children:m}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:a}=r;if(!t||o===d.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(c,{children:o===d.IMAGE?e(m,{imageUrl:t,alt:t,width:"100%",height:240,borderRadius:8}):o===d.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):e(s,{})})};export{l as MediaCard,h as NoMediaCard};

package/dist/esm/components/template-preview/WhatsApp/RenderTemplateWithVariable.js

@@ -1,4 +1,4 @@
-import{j as t}from"../../../node_modules/react/jsx-runtime.js";import s from"styled-components";import{BodyRegular as n}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";import{templateVariablePattern as o}from"../constants/regexPatterns.js";const r=s.div`
+import{jsx as t,Fragment as n,jsxs as e}from"react/jsx-runtime";import o from"styled-components";import{BodyRegular as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{templateVariablePattern as i}from"../constants/regexPatterns.js";const l=o.div`
 	padding: 8px 12px 0px;
 	/* display: inline; */
-`,i=s=>{const{text:i,bold:l}=s,a=null==i?void 0:i.match(o),m=l?{fontWeight:"600"}:{};return i?t.jsx(r,{children:i.split(o).map(((s,o)=>t.jsxs(t.Fragment,{children:[t.jsx(n,Object.assign({style:m},{children:s})),!!(null==a?void 0:a[o])&&t.jsx(n,Object.assign({style:Object.assign({color:e.content.brand},m)},{children:null==a?void 0:a[o]}))]})))}):t.jsx(t.Fragment,{})};export{i as default};
+`,c=o=>{const{text:c,bold:p}=o,a=null==c?void 0:c.match(i),d=p?{fontWeight:"600"}:{};return c?t(l,{children:c.split(i).map(((o,i)=>e(n,{children:[t(r,Object.assign({style:d},{children:o})),!!(null==a?void 0:a[i])&&t(r,Object.assign({style:Object.assign({color:s.content.brand},d)},{children:null==a?void 0:a[i]}))]})))}):t(n,{})};export{c as default};

package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreview.js

@@ -1,12 +1,12 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import r from"styled-components";import{TitleRegular as o}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{getPreviewPropLen as t}from"../utils/getPreviewPropLen.js";import i from"./ChatHeader.js";import a from"./ChatUI.js";const d=r.div`
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import d from"./ChatUI.js";const p=t.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
 	border: ${e=>e.showHeader?0:1}px solid
-		${s.stroke.primary};
+		${a.stroke.primary};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,n=r(o)`
-	color: ${s.content.primary};
-`,p=r=>3===t(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(n,{children:"Preview"})})),e.jsx(a,Object.assign({showHeader:r.showHeader},r))]}))]}))});export{p as WhatsappLikePreview};
+`,m=t(i)`
+	color: ${a.content.primary};
+`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(p,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(d,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{c as WhatsappLikePreview};

package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js

@@ -1,21 +1,21 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import s from"../../../assets/icons/phone_round.svg.js";import t from"styled-components";import{useTemplateModalContext as r}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as o}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as a,TitleSmall as i}from"../../TypographyStyle.js";import{COLORS as n,BASE_COLORS as p}from"../../../constants/Theme.js";import{HEADER_TYPES as l}from"../models/TemplateMeta.js";import{getPreviewPropLen as m}from"../utils/getPreviewPropLen.js";import c from"./ChatHeader.js";import{FooterWrapper as d,FooterText as x,TimeStamp as h}from"./ChatUI.style.js";import{ChatUIV2 as j,HtmlContainer as g}from"./ChatUiV2.js";const u=t.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${o})`};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"../../../assets/icons/phone_round.svg.js";import a from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as i}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as n,TitleSmall as p}from"../../TypographyStyle.js";import{COLORS as l,BASE_COLORS as c}from"../../../constants/Theme.js";import{HEADER_TYPES as m}from"../models/TemplateMeta.js";import{getPreviewPropLen as d}from"../utils/getPreviewPropLen.js";import h from"./ChatHeader.js";import{FooterWrapper as g,FooterText as x,TimeStamp as u}from"./ChatUI.style.js";import{ChatUIV2 as f,HtmlContainer as j}from"./ChatUiV2.js";const w=a.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${i})`};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,f=t(a)`
-	color: ${n.content.primary};
-`,w=t.div`
+`,y=a(n)`
+	color: ${l.content.primary};
+`,C=a.div`
 	margin: 4px;
 	margin-top: -4px;
-	background-color: ${p.grayscale[50]};
+	background-color: ${c.grayscale[50]};
 	border-radius: 6px;
 	.flex-align-center-gap {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
-`,y=t=>{const{hideDeviceContainerInPreview:o}=r();return 3===m(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):o?e.jsx(j,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(u,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(c,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(f,{children:"Preview"})})),e.jsx(j,Object.assign({showHeader:t.showHeader},t)),t.showCallPermissionCard&&e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(j,Object.assign({hideFooter:!0,headerMediaType:l.NONE,textType:"html",isPreview:t.isPreview,zeroStateComponent:e.jsx(e.Fragment,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}]},{children:e.jsxs(w,{children:[e.jsxs(g,Object.assign({className:"flex-align-center-gap"},{children:[e.jsx(s,{width:30,height:30}),e.jsx(i,{children:t.callPermissionText?`${t.callPermissionText}`:'Can Make "Merchant Name" call you?'})]})),e.jsxs(d,{children:[e.jsx(x,{style:{flex:1}}),e.jsx(h,{children:"16:48"})]})]})}))}))]}))]}))})};export{y as WhatsappLikePreviewV2};
+`,b=a=>{const{hideDeviceContainerInPreview:i}=s();return 3===d(a)?e(t,{children:a.zeroStateComponent}):i?e(f,Object.assign({showHeader:a.showHeader},a)):e(t,{children:r(w,Object.assign({style:a.containerStyle,showHeader:a.showHeader,isWhatsappCarousel:a.isWhatsappCarousel},{children:[a.showHeader&&e(h,{}),r("div",Object.assign({style:{padding:"small"===a.size?"12px 32px 12px 12px":`16px ${a.isWhatsappCarousel?"0px":"56px"} ${a.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"}},{children:[!a.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(y,{children:"Preview"})})),e(f,Object.assign({showHeader:a.showHeader},a)),a.showCallPermissionCard&&e("div",Object.assign({style:{marginTop:16}},{children:e(f,Object.assign({hideFooter:!0,headerMediaType:m.NONE,textType:"html",isPreview:a.isPreview,zeroStateComponent:e(t,{}),buttons:[{text:"Choose preference",type:"CALL_PERMISSION",flowId:"",flowName:""}]},{children:r(C,{children:[r(j,Object.assign({className:"flex-align-center-gap"},{children:[e(o,{width:30,height:30}),e(p,{children:a.callPermissionText?`${a.callPermissionText}`:'Can Make "Merchant Name" call you?'})]})),r(g,{children:[e(x,{style:{flex:1}}),e(u,{children:"16:48"})]})]})}))}))]}))]}))})};export{b as WhatsappLikePreviewV2};