@bikdotai/bik-component-library 0.0.711-beta.1 → 0.0.711-beta.3

package/dist/esm/components/feature-announcements/useFeatureAnnouncements.d.ts

@@ -0,0 +1,24 @@
+import { FeatureAnnouncement } from './FeatureAnnouncement.types';
+export interface FeatureAnnouncementRepoInjected {
+    fetchVisibleFeatures: (module?: string) => Promise<[any, FeatureAnnouncement[] | null]>;
+    getStoreFeatureProgress: (storeId: string) => Promise<[any, any | null]>;
+    fetchFeatureById: (featureId: string) => Promise<[any, FeatureAnnouncement | null]>;
+    markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[any]>;
+    isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
+    module?: string;
+}
+export interface RouterProps {
+    pathname: string;
+    query: Record<string, string | string[] | undefined>;
+}
+export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepoInjected & {
+    router?: RouterProps | undefined;
+}) => {
+    features: FeatureAnnouncement[];
+    majorUpdateFeatures: FeatureAnnouncement[];
+    minorUpdateFeatures: FeatureAnnouncement[];
+    isLoading: boolean;
+    error: string | null;
+    markFeatureAsViewed: (featureId: string) => Promise<void>;
+    refetch: () => Promise<void>;
+};

package/dist/esm/components/feature-announcements/useFeatureAnnouncements.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{useState as t,useCallback as r,useEffect as o}from"react";const a=a=>{let{fetchVisibleFeatures:n,getStoreFeatureProgress:i,fetchFeatureById:l,markFeatureAsViewedForStore:u,isFeatureApplicableToCurrentPage:s,module:d,router:c}=a;const f=(()=>{const[e,r]=t(null);return o((()=>{if("undefined"!=typeof window){let e=null;try{if(e=localStorage.getItem("storeId")||localStorage.getItem("Bik/StoreId")||localStorage.getItem("currentStore")||localStorage.getItem("store"),!e){const t=localStorage.getItem("Bik/CurrentUser");t&&(e=JSON.parse(t).storeId)}e||(e=new URLSearchParams(window.location.search).get("storeId"))}catch(e){console.error("FeatureAnnouncements: Failed to get store ID",e)}r(e)}}),[]),e})(),[p,g]=t([]),[y,m]=t([]),[v,w]=t([]),[F,h]=t(!1),[D,U]=t(null),x=r((()=>e(void 0,void 0,void 0,(function*(){if(f){h(!0),U(null);try{const[e,t]=yield n(d);if(e||!t)return console.error("FeatureAnnouncements: Failed to fetch features",e),void U("Failed to fetch features");const[r,o]=yield i(f);r&&console.warn("FeatureAnnouncements: Progress fetch failed, treating all features as new",r);const a=new Date,l="undefined"!=typeof window?window.location.pathname:"",u=e=>{if(!e.expirationDate)return!0;let t;return"object"==typeof e.expirationDate&&null!==e.expirationDate&&("seconds"in e.expirationDate||"nanoseconds"in e.expirationDate)?t=new Date(1e3*e.expirationDate.seconds):"string"==typeof e.expirationDate?t=new Date(e.expirationDate):e.expirationDate instanceof Date&&(t=e.expirationDate),!(!t||isNaN(t.getTime()))&&a<t},c=e=>{if("Major"===e.featureUpdateType){let t=[];return Array.isArray(e.pageUrls)?t=e.pageUrls:"object"==typeof e.pageUrls&&null!==e.pageUrls&&"length"in e.pageUrls&&(t=Array.from(e.pageUrls)),t.includes(l)}return!0},p=t.filter((e=>{var t;return!((null===(t=null==o?void 0:o.viewedFeatures)||void 0===t?void 0:t[e.id])||!1)&&s(e)&&u(e)&&c(e)})),y=p.filter((e=>"Major"===e.featureUpdateType)),v=p.filter((e=>"Minor"===e.featureUpdateType));g(p),m(y),setTimeout((()=>{w(v)}),2e3)}catch(e){console.error("FeatureAnnouncements: Unexpected error in fetchFeatures",e),U("An unexpected error occurred")}finally{h(!1)}}}))),[f,n,i,s,d]),I=r((t=>e(void 0,void 0,void 0,(function*(){h(!0),U(null);try{const[e,r]=yield l(t);if(e||!r)return void U("Failed to fetch feature by ID");"Major"===r.featureUpdateType?m([r]):w([r]),g([r])}catch(e){U("An unexpected error occurred while fetching by ID")}finally{h(!1)}}))),[l]),A=r((t=>e(void 0,void 0,void 0,(function*(){if(!f)return;const[e]=yield u(f,t);e?(console.warn("FeatureAnnouncements: Failed to mark feature as viewed, removing from local state anyway",e),g((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t)))),w((e=>e.filter((e=>e.id!==t))))):(g((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t)))),w((e=>e.filter((e=>e.id!==t)))))}))),[f,u]);return o((()=>{if(!c)return void x();const e=c.query.featureId;e?I(e):x()}),[null==c?void 0:c.query,x,I]),{features:p,majorUpdateFeatures:y,minorUpdateFeatures:v,isLoading:F,error:D,markFeatureAsViewed:A,refetch:x}};export{a as useFeatureAnnouncements};

package/dist/esm/components/tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { TagProps } from './model';
 export declare const Tag: {
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/esm/components/tag/Tag.js

@@ -1 +1 @@
-import{j as i}from"../../node_modules/react/jsx-runtime.js";import e from"react";import{Tooltip as n}from"../tooltips/Tooltip.js";import{AiBodyCaption as t,BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as s}from"./model.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as c}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:g,TrailingIcon:d,onLeadingIconClicked:j,leadingIconId:p,trailingIconId:m,onTrailingIconClicked:b,theme:h="light",type:x="neutral",variant:O="regular",version:u,cursor:I,alignIcon:T,noBorder:y,tagHtmlText:w,contentPadding:f,leadingIconTooltip:N,trailingIconTooltip:k,tagColor:C}=o,v=l;const E=h;let $=x;s[O][x]||($="neutral"),"circle"===O&&"number"==typeof v&&v>99&&(v="99+");const B={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:c(h,$),style:{display:"block"}};return i.jsx(r,Object.assign({cursor:I,theme:E,type:x,variant:O,version:u,alignIcon:T,noBorder:y,contentPadding:f},{children:i.jsxs("div",Object.assign({className:"container"},{children:[g&&(N?i.jsx(n,Object.assign({},N,{children:i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},B),{id:p||"leading-icon"}))}))),w&&("ai"===x&&"light"===h?i.jsx(t,{children:w}):i.jsx(a,Object.assign({className:"text"},{children:w}))),!w&&""!==v&&("ai"===x&&"light"===h?i.jsx(t,{children:v}):i.jsx(a,Object.assign({className:"text",color:C},{children:v}))),d&&(k?i.jsx(n,Object.assign({},k,{children:i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},B),{id:m||"trailing-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},B),{id:m||"trailing-icon"}))})))]}))}))};o.displayName="Tag";export{o as Tag};
+import{j as i}from"../../node_modules/react/jsx-runtime.js";import e from"react";import{Tooltip as n}from"../tooltips/Tooltip.js";import{AiBodyCaption as t,BodyCaption as a}from"../TypographyStyle.js";import{ValidTagTypeMap as s}from"./model.js";import{Tag as c}from"./Tag.styled.js";import{getTagIconColor as r}from"./themes.js";const o=o=>{let{tagText:l,LeadingIcon:g,TrailingIcon:d,onLeadingIconClicked:j,leadingIconId:p,trailingIconId:m,onTrailingIconClicked:b,theme:h="light",type:x="neutral",variant:O="regular",version:u,cursor:I,alignIcon:T,noBorder:y,tagHtmlText:w,contentPadding:f,leadingIconTooltip:N,trailingIconTooltip:k}=o,C=l;const v=h;let E=x;s[O][x]||(E="neutral"),"circle"===O&&"number"==typeof C&&C>99&&(C="99+");const $={height:"compressed"===O?12:16,width:"compressed"===O?12:16,color:r(h,E),style:{display:"block"}};return i.jsx(c,Object.assign({cursor:I,theme:v,type:x,variant:O,version:u,alignIcon:T,noBorder:y,contentPadding:f},{children:i.jsxs("div",Object.assign({className:"container"},{children:[g&&(N?i.jsx(n,Object.assign({},N,{children:i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},$),{id:p||"leading-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-leading",onClick:j,id:`${p}-wrapper`||"leading-icon-wrapper"},{children:e.createElement(g,Object.assign(Object.assign({},$),{id:p||"leading-icon"}))}))),w&&("ai"===x&&"light"===h?i.jsx(t,{children:w}):i.jsx(a,Object.assign({className:"text"},{children:w}))),!w&&""!==C&&("ai"===x&&"light"===h?i.jsx(t,{children:C}):i.jsx(a,Object.assign({className:"text"},{children:C}))),d&&(k?i.jsx(n,Object.assign({},k,{children:i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},$),{id:m||"trailing-icon"}))}))})):i.jsx("button",Object.assign({className:"icon-trailing",onClick:b,id:`${m}-wrapper`||"trailing-icon-wrapper"},{children:e.createElement(d,Object.assign(Object.assign({},$),{id:m||"trailing-icon"}))})))]}))}))};o.displayName="Tag";export{o as Tag};

package/dist/esm/components/tag/Tag.stories.d.ts

@@ -1,22 +1,22 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const _default: ComponentMeta<{
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export default _default;
 export declare const Default: ComponentStory<{
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export declare const WithIcons: ComponentStory<{
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export declare const WithIconTooltips: ComponentStory<{
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export declare const DarkTheme: ComponentStory<{
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, tagColor, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: import("./model").TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;

package/dist/esm/components/tag/model.d.ts

@@ -98,5 +98,4 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
     noBorder?: boolean;
     tagHtmlText?: JSX.Element;
     contentPadding?: number;
-    tagColor?: string;
 }

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{cloneDeep as l}from"lodash";import{useEffect as t,useState as o,useRef as i,useMemo as a}from"react";import r from"../../utils/StringUtils.js";import{COLORS as s}from"../../constants/Theme.js";import{StyledModal as n}from"../modals/styledModal.js";import{determineCardIndex as d,isItCarousal as u,isRCSChannel as p}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as c}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as m,POD as v}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as h}from"./context/templateModalContext.js";import b from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as C}from"./modalElements/TemplateAnalyticsComponent.js";import f from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as x}from"./utils/convertPlaceholdersToBikDropdown.js";const g=g=>{var y,P,E,I,T,S,j,w;const{selectedTemplate:D,closeDialog:V,showVariableMapping:k,channel:L,htmlContent:A,templateVariables:B,onTemplateSelect:M,globalPlaceholders:F,showOnlyContent:H,whatsappSpecificPickerMeta:O,zIndex:W,showVariableModal:N,variableList:$,discountCode:z,setDiscountCode:_,onBackPress:Q,enabledCustomText:R,variableListForImage:U,showSampleValues:q,disableEditVariable:G,pod:J,extras:K,pickerConf:X,selectedCarouselProducts:Y,disableEditExpiry:Z,cardWidth:ee,onDeleteSelectedProducts:le,fileName:te,setFileName:oe,hideDeviceContainerInPreview:ie,maxCharLimit:ae,onDefaultVariableSelect:re,skipDefaultVariableContent:se,disableDatePicker:ne,disableCopyCode:de,initialExpiryDateTime:ue,showDiscountCodeExpiryInfo:pe,footerButtonText:ce,footerInfoText:me,templateAnalytics:ve}=g;t((()=>{Ee(A)}),[A]);const he=d(L),be=u(L,D),Ce=null==D?void 0:D.isProductCarouselType,[fe,xe]=o(L===c.EMAIL||L==c.WEBPUSH||be?"desktop":"mobile"),[ge,ye]=o(!1),[Pe,Ee]=o(A),[Ie,Te]=o(!1),[Se,je]=o([]),[we,De]=o({}),[Ve,ke]=o(D),[Le,Ae]=o([]),[Be,Me]=o(null),[Fe,He]=o(!1),[Oe,We]=o(null!=B?B:[]),[Ne,$e]=o(!1),[ze,_e]=o(be?(null===(P=null===(y=null==Ve?void 0:Ve.mapping)||void 0===y?void 0:y.body)||void 0===P?void 0:P.length)?-1:0:-1),[Qe,Re]=o([]),[Ue,qe]=o(void 0),Ge=i(null),[Je,Ke]=o(!1),[Xe,Ye]=o(!1),[Ze,el]=o(!1),[ll,tl]=o(!0),[ol,il]=o(!0),[al,rl]=o({});t((()=>{Y?Re(Y):Ce&&Re([])}),[Y]),t((()=>{var e;if(!Fe&&Ce&&(!Y||0===Re.length)){const l=null===(e=null==Ve?void 0:Ve.components)||void 0===e?void 0:e[he].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")}))})),Ae(t),He(!0)}}),[Fe]);const sl=a((()=>x(F)),[F]);return t((()=>{qe(l($))}),[$]),(null==ve?void 0:ve.show)&&ll&&ve.templateQuality&&Object.values(m).find((e=>e===String(ve.templateQuality)))?e.jsx(C,{headingTitle:null==Ve?void 0:Ve.label,headingSubtitle:L===c.WHATSAPP?`${r.capitaliseFirstLetterOfString(null!==(E=null==Ve?void 0:Ve.category)&&void 0!==E?E:"")} • ${null!==(I=null==Ve?void 0:Ve.templateCategory)&&void 0!==I?I:""}`:"",templateAnalytics:ve,analyticsData:ve.data,onClose:()=>{null==V||V(),tl(!1),il(!1)},onCancel:()=>{tl(!1),il(!1)},onProceed:()=>{tl(!1),il(!0)},templateId:(null==Ve?void 0:Ve.templateId)||""}):e.jsx(h.Provider,Object.assign({value:{hideFooterButton:Ze,setHideFooterButton:el,hideCrossButton:Xe,setHideCrossButton:Ye,variableList:Ue,setVariableList:qe,variableCallback:Be,setVariableCallback:Me,showVariablePicker:ge,setShowVariablePicker:ye,template:Ve,setTemplate:ke,device:fe,setDevice:xe,display_content:Pe,setDisplayContent:Ee,originalVariableList:Oe,setOriginalVariableList:We,isError:Ie,setIsError:Te,channel:L,globalNormalizedPlaceholders:sl,templateSelectionTriggered:Ne,setTemplateSelectionTriggered:$e,enabledCustomText:R,disableEditVariable:G,pod:J,extras:K,isWhatsappCarousel:be,selectedCarouselIndex:ze,setSelectedCarouselIndex:_e,isProductCarouselType:Ce,templateErrorIndexes:we,cardCount:be?null===(S=null===(T=D.components)||void 0===T?void 0:T[he].cards)||void 0===S?void 0:S.length:void 0,errorIndexes:Se,setErrorIndexes:je,pickerConf:X,carouselProducts:Qe,setCarouselProducts:Re,disableEditExpiry:Z,cardWidth:ee,cardImages:Le,onDeleteSelectedProducts:le,hideDeviceContainerInPreview:ie,sliderRef:Ge,isCarouselHovered:Je,setIsCarouselHovered:Ke,maxCharLimit:ae,ctaOptionsErrors:al,setCtaOptionsErrors:rl,onDefaultVariableSelect:re,disableDatePicker:ne,disableCopyCode:de,initialExpiryDateTime:ue,showDiscountCodeExpiryInfo:pe,cardIndex:he}},{children:H?e.jsx(f,{variableListFromProps:$,channel:c.EMAIL,hideHeader:!0}):e.jsxs(n,Object.assign({hideCrossButton:Xe,zIndex:W,centralContainerStyles:{width:be?900:L===c.EMAIL&&k?1e3:800},open:ol,onClose:()=>{il(!1),null==V||V()},headingTitle:null==Ve?void 0:Ve.label,headingSubtitle:L===c.WHATSAPP||p(L)?`${r.capitaliseFirstLetterOfString(null!==(j=null==Ve?void 0:Ve.category)&&void 0!==j?j:"")} • ${null!==(w=null==Ve?void 0:Ve.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{if(null==ve?void 0:ve.show)return tl(!0),void il(!1);null==Q||Q()},modalHeaderStyles:{borderBottom:`1px solid ${s.stroke.primary}`}},{children:[e.jsx(f,{variableListFromProps:$,showSampleValues:q,showVariableMapping:k,channel:L,whatsappSpecificPickerMeta:O,showVariableModal:N,discountCode:z,setDiscountCode:_,variableListForImage:U&&(null==U?void 0:U.length)>0?U:Ue,fileName:te,setFileName:e=>{null==oe||oe(e)},skipDefaultVariableContent:se}),M?e.jsx(b,{isWhatsappCarousel:null!=be&&be,onSelect:function(){var e;if((null==Qe?void 0:Qe.length)<1&&Ce)return void Te(!0);if(Object.keys(al).length>0&&J!==v.CHATBOT)return void Te(!0);const l=null==M?void 0:M(Ve,Oe,null!=Pe?Pe:"",Qe);De(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&je(l.errorIndexes),(null==l?void 0:l.error)&&Te(!!(null==l?void 0:l.error))):$e(!0)},footerButtonText:ce,footerInfoText:me}):e.jsx(e.Fragment,{})]}))}))};export{g as TemplateContextMapper};
+import{j as e}from"../../node_modules/react/jsx-runtime.js";import{cloneDeep as l}from"lodash";import{useEffect as t,useState as o,useRef as i,useMemo as r}from"react";import a from"../../utils/StringUtils.js";import{COLORS as s}from"../../constants/Theme.js";import{StyledModal as n}from"../modals/styledModal.js";import{determineCardIndex as d,isItCarousal as u,isRCSChannel as p}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as c}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as m,POD as v}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as h}from"./context/templateModalContext.js";import b from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as C}from"./modalElements/TemplateAnalyticsComponent.js";import f from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as x}from"./utils/convertPlaceholdersToBikDropdown.js";const g=g=>{var y,P,E,I,T,S,j,w;const{selectedTemplate:D,closeDialog:V,showVariableMapping:k,channel:L,htmlContent:A,templateVariables:B,onTemplateSelect:M,globalPlaceholders:F,showOnlyContent:H,whatsappSpecificPickerMeta:O,zIndex:W,showVariableModal:N,variableList:$,discountCode:z,setDiscountCode:_,onBackPress:Q,enabledCustomText:R,variableListForImage:U,showSampleValues:q,disableEditVariable:G,pod:J,extras:K,pickerConf:X,selectedCarouselProducts:Y,disableEditExpiry:Z,cardWidth:ee,onDeleteSelectedProducts:le,fileName:te,setFileName:oe,hideDeviceContainerInPreview:ie,maxCharLimit:re,onDefaultVariableSelect:ae,skipDefaultVariableContent:se,disableDatePicker:ne,disableCopyCode:de,initialExpiryDateTime:ue,showDiscountCodeExpiryInfo:pe,footerButtonText:ce,footerInfoText:me,templateAnalytics:ve}=g;t((()=>{Ee(A)}),[A]);const he=d(L),be=u(L,D),Ce=null==D?void 0:D.isProductCarouselType,[fe,xe]=o(L===c.EMAIL||L==c.WEBPUSH||be?"desktop":"mobile"),[ge,ye]=o(!1),[Pe,Ee]=o(A),[Ie,Te]=o(!1),[Se,je]=o([]),[we,De]=o({}),[Ve,ke]=o(D),[Le,Ae]=o([]),[Be,Me]=o(null),[Fe,He]=o(!1),[Oe,We]=o(null!=B?B:[]),[Ne,$e]=o(!1),[ze,_e]=o(be?(null===(P=null===(y=null==Ve?void 0:Ve.mapping)||void 0===y?void 0:y.body)||void 0===P?void 0:P.length)?-1:0:-1),[Qe,Re]=o([]),[Ue,qe]=o(void 0),Ge=i(null),[Je,Ke]=o(!1),[Xe,Ye]=o(!1),[Ze,el]=o(!1),[ll,tl]=o(!0),[ol,il]=o(!0),[rl,al]=o({});t((()=>{Y?Re(Y):Ce&&Re([])}),[Y]),t((()=>{var e;if(!Fe&&Ce&&(!Y||0===Re.length)){const l=null===(e=null==Ve?void 0:Ve.components)||void 0===e?void 0:e[he].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")}))})),Ae(t),He(!0)}}),[Fe]);const sl=r((()=>x(F)),[F]);return t((()=>{qe(l($))}),[$]),(null==ve?void 0:ve.show)&&ll&&ve.templateQuality&&Object.values(m).find((e=>e===String(ve.templateQuality)))?e.jsx(C,{headingTitle:null==Ve?void 0:Ve.label,headingSubtitle:L===c.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(E=null==Ve?void 0:Ve.category)&&void 0!==E?E:"")} • ${null!==(I=null==Ve?void 0:Ve.templateCategory)&&void 0!==I?I:""}`:"",templateAnalytics:ve,onClose:()=>{null==V||V(),tl(!1),il(!1)},onCancel:()=>{tl(!1),il(!1)},onProceed:()=>{tl(!1),il(!0)},templateId:(null==Ve?void 0:Ve.templateId)||""}):e.jsx(h.Provider,Object.assign({value:{hideFooterButton:Ze,setHideFooterButton:el,hideCrossButton:Xe,setHideCrossButton:Ye,variableList:Ue,setVariableList:qe,variableCallback:Be,setVariableCallback:Me,showVariablePicker:ge,setShowVariablePicker:ye,template:Ve,setTemplate:ke,device:fe,setDevice:xe,display_content:Pe,setDisplayContent:Ee,originalVariableList:Oe,setOriginalVariableList:We,isError:Ie,setIsError:Te,channel:L,globalNormalizedPlaceholders:sl,templateSelectionTriggered:Ne,setTemplateSelectionTriggered:$e,enabledCustomText:R,disableEditVariable:G,pod:J,extras:K,isWhatsappCarousel:be,selectedCarouselIndex:ze,setSelectedCarouselIndex:_e,isProductCarouselType:Ce,templateErrorIndexes:we,cardCount:be?null===(S=null===(T=D.components)||void 0===T?void 0:T[he].cards)||void 0===S?void 0:S.length:void 0,errorIndexes:Se,setErrorIndexes:je,pickerConf:X,carouselProducts:Qe,setCarouselProducts:Re,disableEditExpiry:Z,cardWidth:ee,cardImages:Le,onDeleteSelectedProducts:le,hideDeviceContainerInPreview:ie,sliderRef:Ge,isCarouselHovered:Je,setIsCarouselHovered:Ke,maxCharLimit:re,ctaOptionsErrors:rl,setCtaOptionsErrors:al,onDefaultVariableSelect:ae,disableDatePicker:ne,disableCopyCode:de,initialExpiryDateTime:ue,showDiscountCodeExpiryInfo:pe,cardIndex:he}},{children:H?e.jsx(f,{variableListFromProps:$,channel:c.EMAIL,hideHeader:!0}):e.jsxs(n,Object.assign({hideCrossButton:Xe,zIndex:W,centralContainerStyles:{width:be?900:L===c.EMAIL&&k?1e3:800},open:ol,onClose:()=>{il(!1),null==V||V()},headingTitle:null==Ve?void 0:Ve.label,headingSubtitle:L===c.WHATSAPP||p(L)?`${a.capitaliseFirstLetterOfString(null!==(j=null==Ve?void 0:Ve.category)&&void 0!==j?j:"")} • ${null!==(w=null==Ve?void 0:Ve.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{if(null==ve?void 0:ve.show)return tl(!0),void il(!1);null==Q||Q()},modalHeaderStyles:{borderBottom:`1px solid ${s.stroke.primary}`}},{children:[e.jsx(f,{variableListFromProps:$,showSampleValues:q,showVariableMapping:k,channel:L,whatsappSpecificPickerMeta:O,showVariableModal:N,discountCode:z,setDiscountCode:_,variableListForImage:U&&(null==U?void 0:U.length)>0?U:Ue,fileName:te,setFileName:e=>{null==oe||oe(e)},skipDefaultVariableContent:se}),M?e.jsx(b,{isWhatsappCarousel:null!=be&&be,onSelect:function(){var e;if((null==Qe?void 0:Qe.length)<1&&Ce)return void Te(!0);if(Object.keys(rl).length>0&&J!==v.CHATBOT)return void Te(!0);const l=null==M?void 0:M(Ve,Oe,null!=Pe?Pe:"",Qe);De(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&je(l.errorIndexes),(null==l?void 0:l.error)&&Te(!!(null==l?void 0:l.error))):$e(!0)},footerButtonText:ce,footerInfoText:me}):e.jsx(e.Fragment,{})]}))}))};export{g as TemplateContextMapper};

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

@@ -1,9 +1,8 @@
-import { TEMPLATE_QUALITY, TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
+import { TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
 export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
 export declare const RightPanelTemplateAnalytics: (props: {
     analyticsData: TemplateAnalyticsDataI;
     skipTitle?: boolean;
-    fullWidth?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const AnalyticsItem: (props: {
     icon: React.ElementType;
@@ -11,6 +10,3 @@ export declare const AnalyticsItem: (props: {
     value: number;
     percentValue?: number;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const QualityTimelineChart: (props: {
-    qualityTimeLine: TEMPLATE_QUALITY[];
-}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/click.svg.js";import n from"../../../assets/icons/speedometer.svg.js";import{useState as s,useEffect as a,useMemo as i}from"react";import{LineChart as l}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as c}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,TitleSmall as m,Caption as u}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{TemplateContainer as j,LeftPanelContainer as p,RightPanelContainer as g,CustomTitleMedium as y}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as x,ANALYTICS_ENGAGEMENT_MAP as b}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const f=t=>{const{templateAnalytics:n,onClose:l,onProceed:c,onCancel:m,headingTitle:g,headingSubtitle:y,templateId:b}=t,{templateQuality:f=o.GREEN,fetchAnalytics:O}=n||{},{Icon:k,title:T,subline:w,sublineTextType:C,sublineColor:E}=x[f||o.GREEN],[L,A]=s((null==t?void 0:t.analyticsData)||{}),[R,W]=s(!0);a((()=>{(null==t?void 0:t.analyticsData)?W(!1):null==O||O(b||"").then((e=>{e.analytics&&A(e.analytics),W(!1)}))}),[]);const B=i((()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:c,disabled:R},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==l||l(),null==m||m()},disabled:R}})),[f,R]),S=C||u;return e.jsx(r,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==l||l()},headingSubtitle:y,footerShadow:!0,primaryButton:B.primaryButton,secondaryButton:B.secondaryButton,onClose:()=>{null==l||l()},width:"700px"},{children:e.jsxs(j,{children:[f!=o.UNKNOWN&&e.jsx(p,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[e.jsx("div",Object.assign({className:"icon--container",style:{background:f===o.GREEN?h.background.positive.light:h.background.warning.light}},{children:e.jsx(k,{width:40,height:40,color:f===o.GREEN?h.content.positive:h.content.warning})})),T&&e.jsx(d,Object.assign({style:{textAlign:"center"}},{children:T})),e.jsx(S,Object.assign({style:{textAlign:"center",color:E||h.content.primary}},{children:w}))]}))}),R?e.jsx(v,{fullWidth:f===o.UNKNOWN}):e.jsx(N,{analyticsData:L,fullWidth:f===o.UNKNOWN})]})}))},N=n=>{var s;const{analyticsData:a,skipTitle:i,fullWidth:l}=n;return e.jsxs(g,Object.assign({fullWidth:l},{children:[i?e.jsx(e.Fragment,{}):e.jsx(m,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:b.map(((t,n)=>e.jsx(O,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},n)))})),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?e.jsxs(e.Fragment,{children:[e.jsx(m,Object.assign({color:h.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((n,s)=>{let[a,i]=n;return e.jsx(O,{icon:t,title:a,value:i.totalClicks||0,percentValue:i.clickPercentage},s)}))}))]}):e.jsx(e.Fragment,{}),(null===(s=null==a?void 0:a.performance)||void 0===s?void 0:s.qualityTimeLine)&&a.performance.qualityTimeLine.length>0?e.jsxs(e.Fragment,{children:[e.jsx(m,Object.assign({color:h.content.secondary},{children:"Performance"})),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(k,{qualityTimeLine:a.performance.qualityTimeLine})}))]}):e.jsx(e.Fragment,{})]}))},O=t=>{const{icon:n,title:s,value:a,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(n,{width:"16px",height:"16px",color:h.background.brand})})),e.jsx(u,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(c,{tagText:`${i}%`||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(y,{children:a})]}))]}))},k=t=>{const{qualityTimeLine:s}=t,a=s.map((e=>{switch(e){case o.GREEN:return 2;case o.YELLOW:return 1;case o.RED:return.2;default:return 0}})),i=s.map(((e,t)=>`T${t+1}`)),r=s.map((e=>(e=>{switch(e){case o.GREEN:return h.content.positive;case o.YELLOW:return h.content.warning;case o.RED:return h.content.negative;default:return h.content.secondary}})(e)));return e.jsxs("div",Object.assign({className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${h.background.inactive}`}},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8,width:"50%"}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(n,{width:16,height:16,color:h.content.secondary})})),e.jsx(u,{children:"Quality timeline"})]})),e.jsx("div",Object.assign({className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80}},{children:e.jsx(l,{datas:[{data:a,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:r}],labels:i,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})}))]}))};export{O as AnalyticsItem,k as QualityTimelineChart,N as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/alert_triangle.svg.js";import n from"../../../assets/icons/click.svg.js";import{useState as s,useEffect as l,useMemo as i}from"react";import{StyledModal as a}from"../../modals/styledModal.js";import{Tag as c}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as o,TitleSmall as d,Caption as m}from"../../TypographyStyle.js";import{COLORS as j}from"../../../constants/Theme.js";import{TemplateContainer as p,LeftPanelContainer as u,RightPanelContainer as y,CustomTitleMedium as h}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as x,ANALYTICS_ENGAGEMENT_MAP as g}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as b}from"./TemplateAnalyticsSkeleton.js";const T=n=>{const{templateAnalytics:c,onClose:d,onProceed:y,onCancel:h,headingTitle:g,headingSubtitle:T,templateId:v}=n,{templateQuality:f=r.GREEN,fetchAnalytics:N}=c||{},{icon:O,title:C,subline:A,sublineTextType:B,sublineColor:w}=x[f||r.GREEN],[E,S]=s({}),[G,P]=s(!0);l((()=>{null==N||N(v||"").then((e=>{e.analytics&&S(e.analytics),P(!1)}))}),[]);const V=i((()=>f===r.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:y,disabled:G},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==d||d(),null==h||h()},disabled:G}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==d||d(),null==h||h()},disabled:G},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:y,disabled:G}}),[f,G]),F=B||m;return e.jsx(a,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:j.surface.subdued},onBackPress:()=>{null==d||d()},headingSubtitle:T,footerShadow:!0,primaryButton:V.primaryButton,secondaryButton:V.secondaryButton,onClose:()=>{null==d||d()},width:"700px"},{children:e.jsxs(p,{children:[e.jsx(u,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[O&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t,{width:40,height:40,color:j.content.warning})})),C&&e.jsx(o,Object.assign({style:{textAlign:"center"}},{children:C})),e.jsx(F,Object.assign({style:{textAlign:"center",color:w||j.content.primary}},{children:A}))]}))}),G?e.jsx(b,{}):e.jsx(k,{analyticsData:E,skipTitle:f==r.GREEN})]})}))},k=t=>{const{analyticsData:s,skipTitle:l}=t;return e.jsxs(y,{children:[l?e.jsx(e.Fragment,{}):e.jsx(d,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:g.map(((t,n)=>e.jsx(v,{icon:t.icon,title:t.title,value:s[t.valName]||0,percentValue:t.percentValName?s[t.percentValName]:null},n)))})),(null==s?void 0:s.clickAnalytics)&&Object.keys(null==s?void 0:s.clickAnalytics)&&Object.keys(null==s?void 0:s.clickAnalytics).length?e.jsxs(e.Fragment,{children:[e.jsx(d,Object.assign({color:j.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(s.clickAnalytics).map(((t,s)=>{let[l,i]=t;return e.jsx(v,{icon:n,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},s)}))}))]}):e.jsx(e.Fragment,{})]})},v=t=>{const{icon:n,title:s,value:l,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(n,{width:"16px",height:"16px",color:j.background.brand})})),e.jsx(m,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(c,{tagText:`${i}%`||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(h,{children:l})]}))]}))};export{v as AnalyticsItem,k as RightPanelTemplateAnalytics,T as TemplateAnalyticsComponent};

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

@@ -1,4 +1,3 @@
 export declare const TemplateAnalyticsSkeleton: (props: {
     skipTitleShimmer?: boolean;
-    fullWidth?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{j as s}from"../../../node_modules/react/jsx-runtime.js";import{BikShimmer as e}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as i}from"../styles/TemplateAnalyticsStyles.js";const t=t=>{const{skipTitleShimmer:h,fullWidth:n}=t;return s.jsxs(i,Object.assign({fullWidth:n},{children:[s.jsx("div",{children:h?s.jsx(s.Fragment,{}):s.jsx(e,{boxes:[{width:"76px",height:"18px"}]})}),s.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>s.jsx(x,{},e)))})),s.jsxs(s.Fragment,{children:[s.jsx("div",{children:s.jsx(e,{boxes:[{width:"76px",height:"18px"}]})}),s.jsx("div",Object.assign({className:"mt-3"},{children:s.jsx(x,{})}))]})]}))},x=()=>s.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[s.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsx(e,{boxes:[{width:"24px",height:"24px"}]}),s.jsx(e,{boxes:[{width:"69px",height:"11px"}]})]})),s.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsx(e,{boxes:[{width:"43px",height:"18px"}]}),s.jsx(e,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{t as TemplateAnalyticsSkeleton};
+import{j as s}from"../../../node_modules/react/jsx-runtime.js";import{BikShimmer as e}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as i}from"../styles/TemplateAnalyticsStyles.js";const t=t=>{const{skipTitleShimmer:h}=t;return s.jsxs(i,{children:[s.jsx("div",{children:h?s.jsx(s.Fragment,{}):s.jsx(e,{boxes:[{width:"76px",height:"18px"}]})}),s.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>s.jsx(x,{},e)))})),s.jsxs(s.Fragment,{children:[s.jsx("div",{children:s.jsx(e,{boxes:[{width:"76px",height:"18px"}]})}),s.jsx("div",Object.assign({className:"mt-3"},{children:s.jsx(x,{})}))]})]})},x=()=>s.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[s.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsx(e,{boxes:[{width:"24px",height:"24px"}]}),s.jsx(e,{boxes:[{width:"69px",height:"11px"}]})]})),s.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsx(e,{boxes:[{width:"43px",height:"18px"}]}),s.jsx(e,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{t as TemplateAnalyticsSkeleton};

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.d.ts

@@ -1,7 +1,5 @@
 export declare const TemplateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {
-    fullWidth?: boolean | undefined;
-}, never>;
+export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CustomTitleMedium: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.js

@@ -1,15 +1,14 @@
 import e from"styled-components";import{TitleMedium as i}from"../../TypographyStyle.js";import{COLORS as t}from"../../../constants/Theme.js";const n=e.div`
 	display: flex;
 	padding: 16px 0px;
-`,o=e.div`
-	max-width: ${e=>e.fullWidth?"none":"450px"};
+`,r=e.div`
+	max-width: 450px;
 	height: 456px;
 	min-width: 358px;
 	overflow-y: auto;
-	border-left: ${e=>e.fullWidth?"none":`${t.stroke.primary} 1px solid`};
+	border-left: ${t.stroke.primary} 1px solid;
 	padding: 0px 23px 32px 23px;
 	gap: 16px;
-	${e=>e.fullWidth&&"flex: 1;"}
 	.each--analytics--container {
 		border: 1px solid ${t.background.inactive};
 		border-radius: 8px;
@@ -32,7 +31,7 @@ import e from"styled-components";import{TitleMedium as i}from"../../TypographySt
 	.align--center {
 		align-items: center;
 	}
-`,r=e.div`
+`,o=e.div`
 	padding: 0px 23px 32px 23px;
 	flex: 1;
 	height: 456px;
@@ -61,4 +60,4 @@ import e from"styled-components";import{TitleMedium as i}from"../../TypographySt
 	max-width: 161px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-`;export{p as CustomTitleMedium,r as LeftPanelContainer,o as RightPanelContainer,n as TemplateContainer};
+`;export{p as CustomTitleMedium,o as LeftPanelContainer,r as RightPanelContainer,n as TemplateContainer};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const TEMPLATE_QUALITY_MAP: {
     YELLOW: {
-        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         title: string;
         sublineTextType: import("styled-components").StyledComponent<"div", any, {
             numberOfLines?: number | undefined;
@@ -11,7 +11,7 @@ export declare const TEMPLATE_QUALITY_MAP: {
         subline: string;
     };
     RED: {
-        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         title: string;
         sublineTextType: import("styled-components").StyledComponent<"div", any, {
             numberOfLines?: number | undefined;
@@ -21,17 +21,7 @@ export declare const TEMPLATE_QUALITY_MAP: {
         subline: string;
     };
     GREEN: {
-        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-        title: string;
-        sublineTextType: import("styled-components").StyledComponent<"div", any, {
-            numberOfLines?: number | undefined;
-            color?: string | undefined;
-        }, never>;
-        sublineColor: string;
-        subline: string;
-    };
-    UNKNOWN: {
-        Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        icon: string;
         title: string;
         sublineTextType: import("styled-components").StyledComponent<"div", any, {
             numberOfLines?: number | undefined;

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

@@ -1 +1 @@
-import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/check.svg.js";import a from"../../../assets/icons/send_template.svg.js";import i from"../../../assets/icons/tick.svg.js";import o from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as n}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{Caption as s}from"../../TypographyStyle.js";const m={[r.YELLOW]:{Icon:e,title:"Medium quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{Icon:e,title:"Low quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{Icon:t,title:"High quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has rated this template as high quality due to strong engagement and positive customer interactions. We recommend continuing to use this template or creating similar ones to maintain high delivery rates and maximize campaign performance."},[r.UNKNOWN]:{Icon:t,title:"No quality data available",sublineTextType:s,sublineColor:n.content.secondary,subline:"There is currently no quality data available for this template. This may be due to insufficient usage or recent creation. We recommend monitoring its performance over time to gather insights and optimize future campaigns."}},l=[{title:"Sent",icon:a,valName:"totalSent"},{title:"Delivered",icon:i,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:o,valName:"totalReads",percentValName:"readPercentage"}];export{l as ANALYTICS_ENGAGEMENT_MAP,m as TEMPLATE_QUALITY_MAP};
+import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/send_template.svg.js";import a from"../../../assets/icons/tick.svg.js";import i from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{Caption as n,TitleSmall as s}from"../../TypographyStyle.js";const l={[r.YELLOW]:{icon:e,title:"Medium quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{icon:e,title:"Low quality template",sublineTextType:n,sublineColor:o.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{icon:"",title:"",sublineTextType:s,sublineColor:"",subline:"Here is your template's delivery and engagement stats from the last 30 days. Higher engagement today can lead to better delivery rates in the future."}},m=[{title:"Sent",icon:t,valName:"totalSent"},{title:"Delivered",icon:a,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:i,valName:"totalReads",percentValName:"readPercentage"}];export{m as ANALYTICS_ENGAGEMENT_MAP,l as TEMPLATE_QUALITY_MAP};

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

@@ -6,5 +6,4 @@ export declare const ChatBtn: React.FC<{
     placeholder?: string;
     textTypography?: React.FC;
     size?: 'small' | 'large';
-    iconPosition?: 'left' | 'right';
 }>;

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

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

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

@@ -1,3 +1,2 @@
 import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-export declare const HtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

@@ -21,7 +21,6 @@ export declare class TemplateCreatorHelper {
      * 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;
-    private parseCallPermissionComponent;
     parseUITemplateFromDBFormat(data: {
         dbFormattedTemplate: WhatsAppTemplate;
         isDuplicate?: boolean;

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as l,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as s,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as x,QUICK_REPLY_NAME_LEN_LIMIT as f,CREATE_TEMPLATE_DOM_IDS as B,QUICK_REPLY_NAME_ERROR as C}from"../constants/TemplateConstants.js";import{HEADER_TYPES as g,ACTIONS_TYPES as k}from"../models/TemplateMeta.js";import{POD as N}from"../models/WhatsAppTemplate.js";import{TemplateHelperUtils as E}from"../utils/TemplateHelperUtils.js";class L{parseDataFromHeaderComponent(e,t,i){var n,l,o,a,d,r,s,v,p,u;const m={headerType:g.NONE,headerVariables:[]},c=null===(n=null==e?void 0:e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(c){m.headerType=c.format,m.headerText=c.text,m.headerAssetLink=null===(o=null===(l=c.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0];const n=null===(d=null===(a=c.example)||void 0===a?void 0:a.header_text)||void 0===d?void 0:d[0],h=null===(s=null===(r=e.mapping)||void 0===r?void 0:r.header)||void 0===s?void 0:s[0],b=h;if(h){const e=null==h?void 0:h.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),l=/\(\(/.test(h),o=i===N.CHATBOT&&b&&(null==b?void 0:b.startsWith("(("))&&(null==b?void 0:b.endsWith("))")),a={idx:0,variableVal:t||o?n:b,editable:l,editableDefaultValues:l?void 0:n,variableName:e};m.headerVariables=[a],(null===(p=null===(v=c.example)||void 0===v?void 0:v.header_text)||void 0===p?void 0:p.length)&&(m.headerText=null===(u=m.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return m}validateState(e){var t,i,l,o,N,L,_,O,w,V,A,R,D,I,P,U,j,$,q,S,F,M,Y;const W=/\p{Extended_Pictographic}/u;let H="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},K=new E;let G=!1;const J=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)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(Q.meta.name=r,H="invalid"):n.test(null===(l=e.meta.name)||void 0===l?void 0:l.trim())&&(Q.meta.name=s,H="invalid"):(Q.meta.name=a,H="invalid"),Q.meta.name&&!G&&(J(B.name),G=!0),e.headerType===g.TEXT){const t=null!==(N=null===(o=e.headerText)||void 0===o?void 0:o.trim())&&void 0!==N?N:"";if(t)if(t.length>v)Q.header=p,H="invalid";else{const e=K.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,H="invalid")}else Q.header=a,H="invalid"}else e.headerType===g.DOCUMENT||e.headerType===g.IMAGE||(e.headerType,g.VIDEO);if(e.headerType!==g.DOCUMENT&&e.headerType!==g.IMAGE&&e.headerType!==g.VIDEO||e.headerAssetLink||(Q.header=m,H="invalid"),Q.header&&!G&&(J(B.header),G=!0),e.bodyText?e.bodyTextRaw&&(null===(L=e.bodyTextRaw)||void 0===L?void 0:L.trim().length)>c&&(Q.body=h,H="invalid"):(Q.body=a,H="invalid"),Q.body&&!G&&(J(B.body),G=!0),e.footerText&&e.footerText.length>v&&(Q.footer=p,H="invalid"),(null==Q?void 0:Q.footer)&&!G&&(J(B.footer),G=!0),e.actionsType===k.CTA_BTN){if(null===(O=null===(_=e.ctaBtn)||void 0===_?void 0:_.phoneNumber)||void 0===O?void 0:O.isChecked){const t=null===(w=e.ctaBtn.phoneNumber.btnText)||void 0===w?void 0:w.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=a,H="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.phoneNumber.btnText=T,H="invalid"):Q.ctaBtn&&t&&W.test(t)&&(Q.ctaBtn.phoneNumber.btnText=y,H="invalid"),Q.ctaBtn&&!i?(Q.ctaBtn.phoneNumber.link=a,H="invalid"):Q.ctaBtn&&i&&i.length<10&&(Q.ctaBtn.phoneNumber.link=x,H="invalid")}if(null===(A=null===(V=e.ctaBtn)||void 0===V?void 0:V.websiteLinkBtn)||void 0===A?void 0:A.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),i=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=a,H="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.websiteLink.btnText=T,H="invalid"):Q.ctaBtn&&t&&W.test(t)&&(Q.ctaBtn.websiteLink.btnText=y,H="invalid"),!Q.ctaBtn||i||n||(Q.ctaBtn.websiteLink.link=a,H="invalid")}}else if(e.actionsType===k.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var l;const o=null===(l=i.text)||void 0===l?void 0:l.trim();if(o)if(o.length>f)t[n]=T,H="invalid";else if(W.test(o))t[n]=y,H="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=C,H="invalid")}else t[n]=a,H="invalid"})),Q.quickReply=t}if(e.actionsType===k.CTA_BTN||e.actionsType===k.QUICK_REPLY){const e=null===(P=Q.quickReply)||void 0===P?void 0:P.reduce(((e,t)=>e||!!t),!1);((null===(j=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===j?void 0:j.link)||(null===(q=null===($=Q.ctaBtn)||void 0===$?void 0:$.websiteLink)||void 0===q?void 0:q.btnText)||(null===(F=null===(S=Q.ctaBtn)||void 0===S?void 0:S.phoneNumber)||void 0===F?void 0:F.link)||(null===(Y=null===(M=Q.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!G&&(J(B.actionButtons),G=!0)}return{status:H,errors:Q}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0,o=arguments.length>3?arguments[3]:void 0;var a,d,r,s,v,p;const u=[];let m="";const c=null===(a=e.components)||void 0===a?void 0:a.find((e=>"BODY"===e.type));return c&&(null===(s=null===(r=null===(d=c.example)||void 0===d?void 0:d.body_text)||void 0===r?void 0:r[0])||void 0===s||s.forEach(((t,i)=>{var a,d;let r=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.body)||void 0===d?void 0:d[i];const s=r,v=r&&/\(\(/.test(r),p=null==r?void 0:r.match(l);(null==p?void 0:p[2])&&(r=null==p?void 0:p[2]);const m=o===N.CHATBOT&&s&&(null==s?void 0:s.startsWith("(("))&&(null==s?void 0:s.endsWith("))"));u.push({idx:i,variableVal:n||m?t:s,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=r?r:""})})),m=e.htmlContentUrl?e.htmlContentUrl:(null===(v=c.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(p=c.text)||void 0===p?void 0:p.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==u?void 0:u[n]){const l=u[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:u,bodyText:m}}parseTitleComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,s,v;const p=[];let u="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"TITLE"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.title_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,s=d&&/\(\(/.test(d),v=null==d?void 0:d.match(l);(null==v?void 0:v[2])&&(d=null==v?void 0:v[2]),p.push({idx:i,variableVal:n?t:r,editable:!!s,editableDefaultValues:s?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).length)?null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==p?void 0:p[n]){const l=p[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{titleText:u,titleVariables:p}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,l,a,d,r;const s={actionsType:k.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n[0].type)?k.QUICK_REPLY:k.CTA_BTN;if(s.actionsType=t,t===k.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:[];s.quickReply=e}else t===k.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var i,n,l,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==l?l:void 0;let r=!1;d&&o.test(d)&&(r=!0),s.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));s.allButtons=null===(r=v.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return s}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseCallPermissionComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"CALL_PERMISSION_REQUEST"===e.type));return{showCallPermissionCard:Boolean(i),callPermissionText:null==i?void 0:i.text}}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:l=!1,showSampleValues:o,pod:a}=t,{headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p}=yield this.parseDataFromHeaderComponent(e,void 0,a),{bodyText:u,bodyVariable:m}=yield this.parseBodyComponent(e,l,o,a),{titleText:c,titleVariables:h}=yield this.parseTitleComponent(e,l,o),{actionsType:b,quickReply:T,ctaBtn:y,allButtons:x}=yield this.parseButtonComponent(e),f=this.parseLimitedTimeOfferComponent(e,x),{showCallPermissionCard:B,callPermissionText:C}=this.parseCallPermissionComponent(e),g={quickReply:T,ctaBtn:y,allButtons:x,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.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:b,footerText:this.parseFooterComponent(e),bodyVariables:m,bodyText:u,headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:f,titleText:c,titleVariables:h,showCallPermissionCard:B,callPermissionText:C},{errors:k}=this.validateState(g);return g.error=k,g}))}parseTemplateConfiguration(e){let t;const i=(null==e?void 0:e.content)||{};if("string"==typeof i)try{t=JSON.parse(i)}catch(e){console.error("Error parsing rcsTemplate component JSON:",e),t={orientation:"VERTICAL"}}else t=i;return Object.assign(Object.assign({},t),{templateType:null==e?void 0:e.templateType})}}export{L as TemplateCreatorHelper};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as i}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as l,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as s,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as x,CREATE_TEMPLATE_DOM_IDS as B,QUICK_REPLY_NAME_ERROR as C}from"../constants/TemplateConstants.js";import{HEADER_TYPES as g,ACTIONS_TYPES as k}from"../models/TemplateMeta.js";import{POD as N}from"../models/WhatsAppTemplate.js";import{TemplateHelperUtils as E}from"../utils/TemplateHelperUtils.js";class L{parseDataFromHeaderComponent(e,t,i){var n,l,o,a,d,r,s,v,p,u;const m={headerType:g.NONE,headerVariables:[]},c=null===(n=null==e?void 0:e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(c){m.headerType=c.format,m.headerText=c.text,m.headerAssetLink=null===(o=null===(l=c.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0];const n=null===(d=null===(a=c.example)||void 0===a?void 0:a.header_text)||void 0===d?void 0:d[0],h=null===(s=null===(r=e.mapping)||void 0===r?void 0:r.header)||void 0===s?void 0:s[0],b=h;if(h){const e=null==h?void 0:h.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),l=/\(\(/.test(h),o=i===N.CHATBOT&&b&&(null==b?void 0:b.startsWith("(("))&&(null==b?void 0:b.endsWith("))")),a={idx:0,variableVal:t||o?n:b,editable:l,editableDefaultValues:l?void 0:n,variableName:e};m.headerVariables=[a],(null===(p=null===(v=c.example)||void 0===v?void 0:v.header_text)||void 0===p?void 0:p.length)&&(m.headerText=null===(u=m.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return m}validateState(e){var t,i,l,o,N,L,O,_,V,A,w,R,D,I,U,j,$,q,F,P,M,Y,S;const W=/\p{Extended_Pictographic}/u;let H="valid";const K={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},Q=new E;let G=!1;const J=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)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>d?(K.meta.name=r,H="invalid"):n.test(null===(l=e.meta.name)||void 0===l?void 0:l.trim())&&(K.meta.name=s,H="invalid"):(K.meta.name=a,H="invalid"),K.meta.name&&!G&&(J(B.name),G=!0),e.headerType===g.TEXT){const t=null!==(N=null===(o=e.headerText)||void 0===o?void 0:o.trim())&&void 0!==N?N:"";if(t)if(t.length>v)K.header=p,H="invalid";else{const e=Q.getTemplateVariablesFromState(t);e&&e.length>1&&(K.header=u,H="invalid")}else K.header=a,H="invalid"}else e.headerType===g.DOCUMENT||e.headerType===g.IMAGE||(e.headerType,g.VIDEO);if(e.headerType!==g.DOCUMENT&&e.headerType!==g.IMAGE&&e.headerType!==g.VIDEO||e.headerAssetLink||(K.header=m,H="invalid"),K.header&&!G&&(J(B.header),G=!0),e.bodyText?e.bodyTextRaw&&(null===(L=e.bodyTextRaw)||void 0===L?void 0:L.trim().length)>c&&(K.body=h,H="invalid"):(K.body=a,H="invalid"),K.body&&!G&&(J(B.body),G=!0),e.footerText&&e.footerText.length>v&&(K.footer=p,H="invalid"),(null==K?void 0:K.footer)&&!G&&(J(B.footer),G=!0),e.actionsType===k.CTA_BTN){if(null===(_=null===(O=e.ctaBtn)||void 0===O?void 0:O.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(V=e.ctaBtn.phoneNumber.btnText)||void 0===V?void 0:V.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;K.ctaBtn&&!t?(K.ctaBtn.phoneNumber.btnText=a,H="invalid"):K.ctaBtn&&t&&t.length>b?(K.ctaBtn.phoneNumber.btnText=T,H="invalid"):K.ctaBtn&&t&&W.test(t)&&(K.ctaBtn.phoneNumber.btnText=y,H="invalid"),K.ctaBtn&&!i?(K.ctaBtn.phoneNumber.link=a,H="invalid"):K.ctaBtn&&i&&i.length<10&&(K.ctaBtn.phoneNumber.link=f,H="invalid")}if(null===(w=null===(A=e.ctaBtn)||void 0===A?void 0:A.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),i=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),n=null===(I=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===I?void 0:I.trim();K.ctaBtn&&!t?(K.ctaBtn.websiteLink.btnText=a,H="invalid"):K.ctaBtn&&t&&t.length>b?(K.ctaBtn.websiteLink.btnText=T,H="invalid"):K.ctaBtn&&t&&W.test(t)&&(K.ctaBtn.websiteLink.btnText=y,H="invalid"),!K.ctaBtn||i||n||(K.ctaBtn.websiteLink.link=a,H="invalid")}}else if(e.actionsType===k.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var l;const o=null===(l=i.text)||void 0===l?void 0:l.trim();if(o)if(o.length>x)t[n]=T,H="invalid";else if(W.test(o))t[n]=y,H="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=C,H="invalid")}else t[n]=a,H="invalid"})),K.quickReply=t}if(e.actionsType===k.CTA_BTN||e.actionsType===k.QUICK_REPLY){const e=null===(U=K.quickReply)||void 0===U?void 0:U.reduce(((e,t)=>e||!!t),!1);((null===($=null===(j=null==K?void 0:K.ctaBtn)||void 0===j?void 0:j.websiteLink)||void 0===$?void 0:$.link)||(null===(F=null===(q=K.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(M=null===(P=K.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===M?void 0:M.link)||(null===(S=null===(Y=K.ctaBtn)||void 0===Y?void 0:Y.phoneNumber)||void 0===S?void 0:S.btnText)||e)&&!G&&(J(B.actionButtons),G=!0)}return{status:H,errors:K}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0,o=arguments.length>3?arguments[3]:void 0;var a,d,r,s,v,p;const u=[];let m="";const c=null===(a=e.components)||void 0===a?void 0:a.find((e=>"BODY"===e.type));return c&&(null===(s=null===(r=null===(d=c.example)||void 0===d?void 0:d.body_text)||void 0===r?void 0:r[0])||void 0===s||s.forEach(((t,i)=>{var a,d;let r=null===(d=null===(a=e.mapping)||void 0===a?void 0:a.body)||void 0===d?void 0:d[i];const s=r,v=r&&/\(\(/.test(r),p=null==r?void 0:r.match(l);(null==p?void 0:p[2])&&(r=null==p?void 0:p[2]);const m=o===N.CHATBOT&&s&&(null==s?void 0:s.startsWith("(("))&&(null==s?void 0:s.endsWith("))"));u.push({idx:i,variableVal:n||m?t:s,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=r?r:""})})),m=e.htmlContentUrl?e.htmlContentUrl:(null===(v=c.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).length)?null===(p=c.text)||void 0===p?void 0:p.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==u?void 0:u[n]){const l=u[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:u,bodyText:m}}parseTitleComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2?arguments[2]:void 0;var o,a,d,r,s,v;const p=[];let u="";const m=null===(o=e.components)||void 0===o?void 0:o.find((e=>"TITLE"===e.type));return m&&(null===(r=null===(d=null===(a=m.example)||void 0===a?void 0:a.title_text)||void 0===d?void 0:d[0])||void 0===r||r.forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,s=d&&/\(\(/.test(d),v=null==d?void 0:d.match(l);(null==v?void 0:v[2])&&(d=null==v?void 0:v[2]),p.push({idx:i,variableVal:n?t:r,editable:!!s,editableDefaultValues:s?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(s=m.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).length)?null===(v=m.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==p?void 0:p[n]){const l=p[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${i.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{titleText:u,titleVariables:p}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,n,l,a,d,r;const s={actionsType:k.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n[0].type)?k.QUICK_REPLY:k.CTA_BTN;if(s.actionsType=t,t===k.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:[];s.quickReply=e}else t===k.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var i,n,l,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(n=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===n?void 0:n[0])&&void 0!==l?l:void 0;let r=!1;d&&o.test(d)&&(r=!0),s.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));s.allButtons=null===(r=v.buttons)||void 0===r?void 0:r.map((e=>"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:Array.isArray(e.example)?e.example[0]:(null==e?void 0:e.example)||""}):e))}return s}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:l=!1,showSampleValues:o,pod:a}=t,{headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p}=yield this.parseDataFromHeaderComponent(e,void 0,a),{bodyText:u,bodyVariable:m}=yield this.parseBodyComponent(e,l,o,a),{titleText:c,titleVariables:h}=yield this.parseTitleComponent(e,l,o),{actionsType:b,quickReply:T,ctaBtn:y,allButtons:f}=yield this.parseButtonComponent(e),x=this.parseLimitedTimeOfferComponent(e,f),B={quickReply:T,ctaBtn:y,allButtons:f,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.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:b,footerText:this.parseFooterComponent(e),bodyVariables:m,bodyText:u,headerType:d,headerAssetLink:r,headerAssetName:s,headerText:v,headerVariables:p,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:x,titleText:c,titleVariables:h},{errors:C}=this.validateState(B);return B.error=C,B}))}parseTemplateConfiguration(e){let t;const i=(null==e?void 0:e.content)||{};if("string"==typeof i)try{t=JSON.parse(i)}catch(e){console.error("Error parsing rcsTemplate component JSON:",e),t={orientation:"VERTICAL"}}else t=i;return Object.assign(Object.assign({},t),{templateType:null==e?void 0:e.templateType})}}export{L as TemplateCreatorHelper};