@bikdotai/bik-component-library 0.0.388-beta.10 → 0.0.388-beta.12

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

@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
+`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n,showSampleValues:h}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{showSampleValues:h,template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};

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

@@ -12,6 +12,7 @@ export interface TemplateSelectModalContentProps {
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
 }
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, variableListForImage, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, variableListForImage, showSampleValues, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default TemplateSelectModalContent;

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

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

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

@@ -15,5 +15,6 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, }: 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 l,Fragment as t}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:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T}=p;var C,f;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:S,onlyTemplateContent:y,size:null!=b?b:"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: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})})):u===r.WHATSAPP?l("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!==(C=null==c?void 0:c.label)&&void 0!==C?C:"")})})):e(t,{}),e(d,{showSampleValues:T,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:c,size:h?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:h?0:1,borderTopWidth:1},null!==(f=null==v?void 0:v.containerStyle)&&void 0!==f?f:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName})]})):e(t,{})},m={WhatsAppWrapper:{backgroundColor:a.surface.standard,borderRadius:4,border:`1px solid ${a.background.inactive}`,marginTop:16}};export{p as TemplatePreview};

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

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

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

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

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

@@ -12,5 +12,10 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean, isV2?: boolean): Promise<CreateTemplateType>;
+    parseUITemplateFromDBFormat(data: {
+        dbFormattedTemplate: WhatsAppTemplate;
+        isDuplicate?: boolean;
+        showSampleValues?: boolean;
+        isV2?: boolean;
+    }): Promise<CreateTemplateType>;
 }

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,_,w,A,V,I,D,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},H=new g;let S=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!S&&(G(x.name),S=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=H.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!S&&(G(x.header),S=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!S&&(G(x.body),S=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!S&&(G(x.footer),S=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(w=null===(_=e.ctaBtn)||void 0===_?void 0:_.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(A=e.ctaBtn.websiteLinkBtn.btnText)||void 0===A?void 0:A.trim(),n=null===(V=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===V?void 0:V.trim(),i=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(D=Q.quickReply)||void 0===D?void 0:D.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!S&&(G(x.actionButtons),S=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var o,l,a,d,r;const v=[];let s="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(a=null===(l=u.example)||void 0===l?void 0:l.body_text)||void 0===a||a[0].forEach(((t,n)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[n];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(i);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:n,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=u.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==v?void 0:v[i]){const o=v[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var o;return e(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:u,quickReply:p,ctaBtn:c}=yield this.parseButtonComponent(t),m={quickReply:p,ctaBtn:c,meta:{name:n?`${t.label} Copy`:t.label,category:null===(o=t.category)||void 0===o?void 0:o.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:u,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:l,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:h}=this.validateState(m);return m.error=h,m}))}}export{C as TemplateCreatorHelper};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e){var t,n,i,o,l,a,d,r,v,s;const u={headerType:k.NONE,headerVariables:[]},p=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(p){u.headerType=p.format,u.headerText=p.text,u.headerAssetLink=null===(i=null===(n=p.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(l=null===(o=p.example)||void 0===o?void 0:o.header_text)||void 0===l?void 0:l[0],c=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.header)||void 0===d?void 0:d[0];if(t&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(c),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(v=null===(r=p.example)||void 0===r?void 0:r.header_text)||void 0===v?void 0:v.length)&&(u.headerText=null===(s=u.headerText)||void 0===s?void 0:s.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,i,o,C,L,E,R,w,_,V,A,D,I,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new g;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!H&&(G(x.name),H=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!H&&(G(x.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!H&&(G(x.body),H=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(x.footer),H=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(_=null===(w=e.ctaBtn)||void 0===w?void 0:w.websiteLinkBtn)||void 0===_?void 0:_.isChecked){const t=null===(V=e.ctaBtn.websiteLinkBtn.btnText)||void 0===V?void 0:V.trim(),n=null===(A=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===A?void 0:A.trim(),i=null===(D=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===D?void 0:D.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(I=Q.quickReply)||void 0===I?void 0:I.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(x.actionButtons),H=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let u="";const p=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return p&&(null===(d=null===(a=p.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),u=null==d?void 0:d.match(i);(null==u?void 0:u[2])&&(d=null==u?void 0:u[2]),s.push({idx:n,variableVal:o?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(r=p.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=p.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:u}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:u,bodyVariable:p}=yield this.parseBodyComponent(e,o,l),{actionsType:c,quickReply:m,ctaBtn:h}=yield this.parseButtonComponent(e),b={quickReply:m,ctaBtn:h,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:c,footerText:this.parseFooterComponent(e),bodyVariables:p,bodyText:u,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1},{errors:T}=this.validateState(b);return b.error=T,b}))}}export{C as TemplateCreatorHelper};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.388-beta.10",
+	"version": "0.0.388-beta.12",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",