@bikdotai/bik-component-library 0.0.50 → 0.0.51-5.beta-2

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
+export declare const useEditWhatsappTemplateMedia: (props: {
+    uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];
+    uploadMediaFiles: WhatsAppPickerMeta['uploadMediaFiles'];
+    updateTemplateImageUrl: (url: string, format: WhatsAppTemplate['components'][0]['format']) => void;
+    fileRef: React.RefObject<HTMLInputElement | null>;
+    mediaComponent: any;
+}) => {
+    uploadMedia: (urlOrVariable?: string) => Promise<void>;
+    processImageUpload: (file?: Blob | File) => Promise<void>;
+    handleImageUpload: ($event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageChange: () => void;
+    onCropComplete: (base64: string) => Promise<void>;
+    editIconRef: React.MutableRefObject<null>;
+    fileName: string | undefined;
+    setFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedVariable: string | undefined;
+    setSelectedVariable: React.Dispatch<React.SetStateAction<string | undefined>>;
+    openEditMedia: boolean;
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedImage: string | undefined;
+    setSelectedImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    loading: boolean;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+};

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

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

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

@@ -0,0 +1 @@
+export declare const BACKGROUND_PREVIEW_IMAGE = "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";

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

@@ -0,0 +1 @@
+const b="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";export{b as BACKGROUND_PREVIEW_IMAGE};

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

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

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

@@ -0,0 +1 @@
+export declare function getFormattedMonthDate(date: Date): string;

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

@@ -0,0 +1,2 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 240 | 300 | 360;

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

@@ -0,0 +1 @@
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 240;case e.SMS:return 300;case e.EMAIL:return 360;default:return 300}};export{r as getPreviewWidth};

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

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

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

@@ -1 +1 @@
-const d=d=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(d);export{d as validateIsUrl};
+const t=t=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(t),e=t=>/^{{.*}}$/.test(t);export{e as isVariable,t as validateIsUrl};

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

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

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

@@ -0,0 +1 @@
+const t=t=>!!/[^a-zA-Z0-9._ ]/.test(t);export{t as validateInputName};

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

@@ -2,6 +2,10 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;
 }, never>;
+export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+}, never>;
+export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {}, 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;

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

@@ -1,29 +1,45 @@
-import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t=r.div`
+import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../constants/Theme.js";const t=r.div`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${o.stroke.primary};
-`,d=r.div`
+	border: 1px solid ${e.stroke.primary};
+`,i=r.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-left: 1px solid ${o.stroke.primary};
-	border-right: 1px solid ${o.stroke.primary};
-	border-top-color: ${o.stroke.primary};
+	border-left: 1px solid ${e.stroke.primary};
+	border-right: 1px solid ${e.stroke.primary};
+	border-top-color: ${e.stroke.primary};
 	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
 	overflow: scroll;
-`,e=r.div`
+`,d=r.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${o.grayscale[100]};
+`,s=r.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	min-height: 180px;
+	border-left: 1px solid ${e.stroke.primary};
+	border-right: 1px solid ${e.stroke.primary};
+`,p=r.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${o.surface.standard};
+	background: ${e.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${o.stroke.primary};
-`,i=r.div`
+	border: 1px solid ${e.stroke.primary};
+`,a=r.div`
 	border-radius: 4px;
-	background-color: ${o.surface.standard};
+	background-color: ${e.surface.standard};
 	margin-top: ${r=>r.hideHeader?0:16};
-`;export{i as EmailContainer,t as Header,d as ImageContainer,e as ViewButton};
+	display: flex;
+	flex-direction: column;
+`;export{d as CardLoadingContainer,a as EmailContainer,t as Header,s as IframeContainer,i as ImageContainer,p as ViewButton};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CSSProperties } from 'styled-components';
 import { EmailTemplateType } from './models/EmailTemplate';
+export declare const DEFAULT_IMAGE = "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";
 declare const EmailTemplateThumbnailPreview: React.FC<{
     template: EmailTemplateType;
     hideHeader?: boolean;

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

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

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

@@ -1,9 +1,8 @@
-/// <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;
+declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;
 export default SMSBubble;

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

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

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import { WhatsAppCarouselTemplate } from "./models/WhatsappCarouselTemplate";
 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;
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType | WhatsAppCarouselTemplate;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -15,5 +16,9 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/esm/components/template-preview/WhatsApp/ChatHeader.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const ChatHeader: () => JSX.Element;
+declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
 export default ChatHeader;

package/dist/esm/components/template-preview/WhatsApp/ChatUI.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-declare const ChatUI: (props: WhatsappLikePreviewTypes) => JSX.Element;
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
 export default ChatUI;

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

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

@@ -1,5 +1,18 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
+export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
 export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,19 +1,29 @@
-import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
+import r from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const t=r.div`
 	background: ${o.surface.standard};
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: 0px;
+	border-top-left-radius: ${r=>r.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,i=t(e)`
+	border: ${r=>r.hasError||r.showBorder?2:1}px solid
+		${r=>r.hasError?`${o.content.negative}`:r.showBorder?`${o.stroke.brand}`:`${o.stroke.primary}`};
+	:hover {
+		border: 2px
+			${r=>r.isPreview?"unset":r.isWhatsappCarousel?r.hasError?"dashed":r.showBorder?"solid":"dashed":"solid"}
+			${o.stroke.brand};
+		box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
+	}
+`,i=r(e)`
 	color: ${o.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-`,p=t.div`
+	text-wrap: wrap;
+`,d=r(i)`
+	max-width: 200px;
+`,s=r.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -22,20 +32,19 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,d=t.div`
+`,p=r.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${o.stroke.primary};
-`,n=t.div`
+`,a=r.div`
 	display: flex;
-
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;t.div`
+`;r.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -49,8 +58,8 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
 	background: ${o.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,t.div`
+`,r.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;export{d as ChatBtnContainer,r as Container,n as FooterWrapper,p as MediaContainer,i as TimeStamp};
+`;export{p as ChatBtnContainer,t as Container,d as FooterText,a as FooterWrapper,s as MediaContainer,i as TimeStamp};

package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.d.ts

@@ -0,0 +1,2 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,9 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,21 @@
+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=i.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,a=i.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;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{jsx as e,Fragment as s,jsxs as t}from"react/jsx-runtime";import r from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{BodySecondary as a}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HEADER_TYPES as c}from"../models/TemplateMeta.js";import{MediaContainer as m}from"./ChatUI.style.js";const d=s=>{let{headerAssetName:d,mediaType:l}=s;const p=l===c.IMAGE?i:l===c.VIDEO?o:r;return t(m,{children:[e(p,{height:40,width:40,color:n.icon.placeholder}),!!d&&e(a,Object.assign({style:{color:n.content.secondary,marginTop:8}},{children:d}))]})},l=t=>{let{headerAssetLink:r,headerAssetName:i,mediaType:o,imagePreviewStyles:a}=t;if(!r||o===c.DOCUMENT)return e(d,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:o}));const n={width:"100%",minHeight:"156px",borderRadius:8};return e(m,{children:o===c.IMAGE?e("img",{alt:"Header displays here",style:Object.assign(Object.assign({},n),a),src:r}):o===c.VIDEO?e("video",Object.assign({src:r,style:n,controls:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e(s,{})})};export{l 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{BodySecondary as m}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{MediaContainer as d}from"./ChatUI.style.js";import{ShimmerImage as c}from"../../shimmer-image/ShimmerImage.js";const h=s=>{let{headerAssetName:c,mediaType:h}=s;const l=h===n.IMAGE?i:h===n.VIDEO?o:t;return r(d,{children:[e(l,{height:40,width:40,color:a.icon.placeholder}),!!c&&e(m,Object.assign({style:{color:a.content.secondary,marginTop:8}},{children:c}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:m}=r;if(!t||o===n.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(d,{children:o===n.IMAGE?e(c,{imageUrl:t,alt:t,width:"100%",height:240,borderRadius:8}):o===n.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!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.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export interface RenderTemplateWithVariableInterface {
     text?: string;
     bold?: boolean;
 }
-declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => JSX.Element;
+declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
 export default RenderTemplateWithVariable;

package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreviewV2: React.FC<WhatsappLikePreviewTypes>;

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

@@ -0,0 +1,10 @@
+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{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const d=o.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a})`};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,l=o(i)`
+	color: ${p.content.primary};
+`,h=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===n(o)?e(t,{children:o.zeroStateComponent}):a?e(c,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(d,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(m,{}),r("div",Object.assign({style:{padding:"small"===o.size?"12px 32px 12px 12px":`16px ${o.isWhatsappCarousel?"0px":"56px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(l,{children:"Preview"})})),e(c,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{h as WhatsappLikePreviewV2};

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

@@ -9,5 +9,9 @@ declare const WhatsappTemplatePreview: React.FC<{
     showHeader?: boolean;
     zeroStateComponent?: ReactElement;
     size?: 'small' | 'large';
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
 }>;
 export default WhatsappTemplatePreview;

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as l,useEffect as o}from"react";import{TemplateCreatorHelper as n}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as i}from"./models/TemplateMeta.js";import{TemplateHelperUtils as a}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as r}from"./WhatsApp/WhatsAppLikePreview.js";const d=d=>{let{template:p,extras:s,containerStyle:u,usePlaceHolderName:v,showHeader:m,zeroStateComponent:h,size:c}=d;var x,b,T,y,B,w,k,f,N,j,L,A,V,C,H,P;const[S,g]=l(),F=new n,O=new a,z=[];return(null===(b=null===(x=null==S?void 0:S.ctaBtn)||void 0===x?void 0:x.phoneNumber)||void 0===b?void 0:b.isChecked)&&z.push({type:"phoneNumber",text:null!==(T=S.ctaBtn.phoneNumber.btnText)&&void 0!==T?T:"",extra:null!==(y=S.ctaBtn.phoneNumber.phoneNumber)&&void 0!==y?y:""}),(null===(w=null===(B=null==S?void 0:S.ctaBtn)||void 0===B?void 0:B.websiteLinkBtn)||void 0===w?void 0:w.isChecked)&&z.push({type:"website",text:null!==(k=S.ctaBtn.websiteLinkBtn.btnText)&&void 0!==k?k:"",extra:null!==(N=null===(f=S.ctaBtn.websiteLinkBtn)||void 0===f?void 0:f.linkOpens)&&void 0!==N?N:"",placeholder:null!==(j=S.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==j?j:""}),o((()=>{p&&F.parseUITemplateFromDBFormat(p).then((e=>{g(Object.assign({},e))}))}),[p]),p?e(r,{showHeader:m,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:O.whatsappOnlyFillVariablesValueInBodyText(null!==(L=null==S?void 0:S.bodyText)&&void 0!==L?L:"",null!==(A=null==S?void 0:S.bodyVariables)&&void 0!==A?A:[],v),footerText:null==S?void 0:S.footerText,headerMediaType:(null==S?void 0:S.headerType)||i.NONE,headerText:O.fillVariablesValInBodyText(null!==(V=null==S?void 0:S.headerText)&&void 0!==V?V:"",null!==(C=null==S?void 0:S.headerVariables)&&void 0!==C?C:[],v),headerAssetLink:null!==(H=null==S?void 0:S.headerAssetLink)&&void 0!==H?H:"",headerAssetName:null!==(P=null==S?void 0:S.headerAssetName)&&void 0!==P?P:"",quickReplybtn:null==S?void 0:S.quickReply,ctaBtn:z,actionTypes:null==S?void 0:S.actionsType,extras:s,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=h?h:e(t,{children:" "})}):e(t,{children:h})};export{d as default};
+import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as s}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y,isWhatsappCarousel:w,isPreview:f}=p;var B,N,V,k,C,A,L,P,j,S,F,g,O,I,H,U,W,q,z,D,M,R;const{selectedCarouselIndex:E}=i(),[G,J]=t(),K=new o,Q=new r,X=[];return(null===(N=null===(B=null==G?void 0:G.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.isChecked)&&X.push({type:"phoneNumber",text:null!==(V=G.ctaBtn.phoneNumber.btnText)&&void 0!==V?V:"",extra:null!==(k=G.ctaBtn.phoneNumber.phoneNumber)&&void 0!==k?k:""}),(null===(A=null===(C=null==G?void 0:G.ctaBtn)||void 0===C?void 0:C.websiteLinkBtn)||void 0===A?void 0:A.isChecked)&&X.push({type:"website",text:null!==(L=G.ctaBtn.websiteLinkBtn.btnText)&&void 0!==L?L:"",extra:null!==(j=null===(P=G.ctaBtn.websiteLinkBtn)||void 0===P?void 0:P.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=G.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[u,T]),a((()=>{u&&K.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{J(Object.assign({},e))}))}),[E]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:Q.whatsappOnlyFillVariablesValueInBodyText(null!==(W=null==G?void 0:G.bodyText)&&void 0!==W?W:"",null!==(q=null==G?void 0:G.bodyVariables)&&void 0!==q?q:[],h),footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:Q.fillVariablesValInBodyText(null!==(z=null==G?void 0:G.headerText)&&void 0!==z?z:"",null!==(D=null==G?void 0:G.headerVariables)&&void 0!==D?D:[],h),headerAssetLink:null!==(M=null==G?void 0:G.headerAssetLink)&&void 0!==M?M:"",headerAssetName:null!==(R=null==G?void 0:G.headerAssetName)&&void 0!==R?R:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "}),isPreview:f}):e(s,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==G?void 0:G.bodyText,footerText:null==G?void 0:G.footerText,headerMediaType:(null==G?void 0:G.headerType)||n.NONE,headerText:null==G?void 0:G.headerText,headerAssetLink:null!==(F=null==G?void 0:G.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(g=null==G?void 0:G.headerAssetName)&&void 0!==g?g:"",quickReplybtn:null==G?void 0:G.quickReply,ctaBtn:X,actionTypes:null==G?void 0:G.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(I=null===(O=null==G?void 0:G.bodyVariables)||void 0===O?void 0:O.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==I?I:[],headerVariableList:null!==(U=null===(H=null==G?void 0:G.headerVariables)||void 0===H?void 0:H.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==U?U:[],buttons:null==G?void 0:G.allButtons,limitedTimeOfferComponent:null==G?void 0:G.limitedTimeOfferComponent,isWhatsappCarousel:w,isPreview:f}):e(l,{children:c})};export{p as default};

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

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

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -12,5 +12,17 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean): Promise<CreateTemplateType>;
+    /**
+     * Parses LTO component to a format preview can understand.
+     * Points to Note -
+     * 1. Takes the Copy Code from previously parsed buttons.
+     * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.
+     */
+    private parseLimitedTimeOfferComponent;
+    parseUITemplateFromDBFormat(data: {
+        dbFormattedTemplate: WhatsAppTemplate;
+        isDuplicate?: boolean;
+        showSampleValues?: boolean;
+        isV2?: boolean;
+    }): Promise<CreateTemplateType>;
 }