@bikdotai/bik-component-library 0.0.703-beta.3 → 0.0.703-beta.5

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

@@ -0,0 +1 @@
+import{j as e}from"../../node_modules/react/jsx-runtime.js";const t=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},n=n=>{let{feature:r,currentIndex:o,totalFeatures:i,onSkip:s,onExplore:l,onPrevious:a,onNext:c}=n;return e.jsx(e.Fragment,{children:e.jsxs("div",Object.assign({style:{width:"959px",height:"274px",display:"flex",backgroundColor:"#212121",borderRadius:"4px",overflow:"hidden",position:"relative"}},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),s()},style:{position:"absolute",top:"10px",right:"10px",background:"transparent",border:"none",color:"#BDBDBD",fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:10,transition:"all 0.2s"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor="#f3f4f6",e.currentTarget.style.color="#374151"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="#6b7280"}},{children:"Skip"})),e.jsx("div",Object.assign({style:{backgroundColor:"#212121",width:"480px",height:"274px",position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:"8px"}},{children:r.displayImage?e.jsx("img",{src:r.displayImage,alt:r.title,style:{width:"464px",height:"258px",objectFit:"cover"},onError:e=>{r.image&&(e.target.src=r.image)}}):e.jsx("div",Object.assign({style:{color:"#9ca3af",fontSize:"14px",textAlign:"center",width:"290px",height:"258px",display:"flex",alignItems:"center",justifyContent:"center"}},{children:"Feature Preview"}))})),e.jsxs("div",Object.assign({style:{flex:1,display:"flex",margin:"0 8px 0 0",flexDirection:"column",justifyContent:"space-between",background:"transparent"}},{children:[e.jsxs("div",{children:[e.jsx("h3",Object.assign({style:{fontSize:"16px",fontWeight:"600",padding:"36px 0 0 0",color:"#fff",lineHeight:"1.25",textAlign:"left"}},{children:r.title})),e.jsx("div",{style:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},dangerouslySetInnerHTML:{__html:t(r.content||r.body||"")}}),e.jsx("div",{children:e.jsx("button",Object.assign({onClick:()=>{l()},style:{backgroundColor:"transparent",border:"1px solid #FEC02D",color:"#FEC02D",borderRadius:"4px",fontSize:"14px",fontWeight:"500",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:"16px"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor="rgba(254, 192, 45, 0.1)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent"}},{children:r.buttonText||"Explore the feature"}))})]}),i>1&&e.jsxs("div",Object.assign({style:{position:"absolute",bottom:"16px",right:"16px",display:"flex",gap:"8px",alignItems:"center"}},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),a()},disabled:0===o,style:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:0===o?"#666":"#fff",fontSize:"20px",cursor:0===o?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},onMouseEnter:e=>{0!==o&&(e.currentTarget.style.color="#FEC02D")},onMouseLeave:e=>{0!==o&&(e.currentTarget.style.color="#fff")}},{children:"‹"})),e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),c()},disabled:o===i-1,style:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:o===i-1?"#666":"#fff",fontSize:"20px",cursor:o===i-1?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},onMouseEnter:e=>{o!==i-1&&(e.currentTarget.style.color="#FEC02D")},onMouseLeave:e=>{o!==i-1&&(e.currentTarget.style.color="#fff")}},{children:"›"}))]}))]}))]}))})};export{n as default};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FeatureAnnouncement } from './FeatureAnnouncement.types';
+interface MinorUpdatePopupProps {
+    feature: FeatureAnnouncement;
+    currentIndex: number;
+    totalFeatures: number;
+    onSkip: () => void;
+    onExplore: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+declare const MinorUpdatePopup: React.FC<MinorUpdatePopupProps>;
+export default MinorUpdatePopup;

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

@@ -0,0 +1 @@
+import{j as e}from"../../node_modules/react/jsx-runtime.js";const t=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},i=i=>{let{feature:n,currentIndex:r,totalFeatures:o,onSkip:s,onExplore:l,onPrevious:a,onNext:x}=i;return e.jsx(e.Fragment,{children:e.jsxs("div",Object.assign({style:{width:"519px",height:"160px",display:"flex",backgroundColor:"#ffffff",borderRadius:"4px",overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)"}},{children:[e.jsx("div",Object.assign({style:{backgroundColor:"#f9fafb",borderRadius:"4px",position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:"13px 10px 13px 10px",width:"235px",minWidth:"235px",maxWidth:"235px",height:"134px"}},{children:n.displayImage?e.jsxs("div",Object.assign({style:{position:"relative",width:"235px",height:"134px"}},{children:[e.jsx("img",{src:n.displayImage,alt:n.title,style:{width:"235px",height:"134px",objectFit:"cover",borderRadius:"4px",display:"block"},onError:e=>{n.image&&(e.target.src=n.image)}}),e.jsx("div",Object.assign({style:{position:"absolute",top:"0px",left:"0px",right:"0px",height:"27px",backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:"4px 4px 4px 4px",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10}},{children:e.jsx("span",Object.assign({style:{color:"#ffffff",fontWeight:"400",fontSize:"14px"}},{children:"New feature"}))}))]})):e.jsx("div",Object.assign({style:{color:"#9ca3af",fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f3f4f6",borderRadius:"4px"}},{children:"Feature Preview"}))})),e.jsxs("div",Object.assign({style:{flex:1,display:"flex",margin:"13px 13px 13px 3px",flexDirection:"column",justifyContent:"space-between",background:"transparent"}},{children:[e.jsxs("div",{children:[e.jsx("h3",Object.assign({style:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:"#212121",lineHeight:"1.25",textAlign:"left"}},{children:n.title})),e.jsx("div",{style:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:"#616161",textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},dangerouslySetInnerHTML:{__html:t(n.content||n.body||"")}})]}),e.jsxs("div",Object.assign({style:{position:"absolute",bottom:"13px",right:"10px",display:"flex",gap:"16px",alignItems:"center"}},{children:[e.jsx("span",Object.assign({onClick:s,style:{color:"#4B1583",fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"}},{children:"Understood"})),n.productVideo&&e.jsx("button",Object.assign({onClick:()=>{l()},style:{backgroundColor:"#4B1583",border:"none",color:"#ffffff",borderRadius:"4px",fontSize:"14px",fontWeight:"500",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}},{children:n.buttonText||"Explore the feature"}))]}))]}))]}))})};export{i as default};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface VideoModalProps {
+    isOpen: boolean;
+    videoUrl: string;
+    onClose: () => void;
+}
+export declare const VideoModal: React.FC<VideoModalProps>;
+export {};

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

@@ -0,0 +1 @@
+import{j as e}from"../../node_modules/react/jsx-runtime.js";const t=t=>{let{isOpen:o,videoUrl:r,onClose:i}=t;if(!o)return null;const s=r.includes("youtube.com")||r.includes("youtu.be")?r.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"):r,n=r.includes("youtube.com")||r.includes("youtu.be");return e.jsx("div",Object.assign({style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:2e3,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},onClick:e=>{e.target===e.currentTarget&&i()}},{children:e.jsxs("div",Object.assign({style:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:"12px",overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},onClick:e=>e.stopPropagation()},{children:[e.jsx("button",Object.assign({onClick:i,style:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:"50%",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10,transition:"background-color 0.2s"},onMouseOver:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.9)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.7)"}},{children:"×"})),e.jsx("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},{children:r?n?e.jsx("iframe",{width:"100%",height:"100%",src:s,title:"Product Video",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0,style:{borderRadius:"12px"}}):e.jsxs("video",Object.assign({controls:!0,autoPlay:!0,style:{width:"100%",height:"100%",objectFit:"contain",borderRadius:"12px"}},{children:[e.jsx("source",{src:r,type:"video/mp4"}),e.jsx("source",{src:r,type:"video/webm"}),e.jsx("source",{src:r,type:"video/ogg"}),"Your browser does not support the video tag."]})):e.jsx("div",Object.assign({style:{color:"white",fontSize:"18px",textAlign:"center"}},{children:"No video available"}))}))]}))}))};export{t as VideoModal};

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

@@ -0,0 +1,6 @@
+export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
+export { default as MajorUpdatePopup } from './MajorUpdatePopup';
+export { default as MinorUpdatePopup } from './MinorUpdatePopup';
+export { VideoModal } from './VideoModal';
+export * from './useFeatureAnnouncements';
+export * from './FeatureAnnouncement.types';

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/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/models/WhatsAppTemplate.d.ts

@@ -210,8 +210,7 @@ export type WhatsappPreviewButtonType = {
 export declare enum TEMPLATE_QUALITY {
     GREEN = "GREEN",
     YELLOW = "YELLOW",
-    RED = "RED",
-    UNKNOWN = "UNKNOWN"
+    RED = "RED"
 }
 export type WhatsappMeta = {
     containerStyle?: React.CSSProperties | undefined;
@@ -306,7 +305,6 @@ export type TemplateAnalyticsI = {
     fetchAnalytics?: (templateId: string) => Promise<TemplateAnalyticsResponseI>;
     show?: boolean;
     templateQuality?: TEMPLATE_QUALITY;
-    data?: TemplateAnalyticsDataI;
 };
 export type TemplateAnalyticsResponseI = {
     success: boolean;
@@ -324,9 +322,6 @@ export interface TemplateAnalyticsDataI {
             clickPercentage: number;
         };
     };
-    performance: {
-        qualityTimeLine: TEMPLATE_QUALITY[];
-    };
 }
 export interface TemplateAnalyticsComponentI {
     templateAnalytics?: TemplateAnalyticsI;
@@ -336,5 +331,4 @@ export interface TemplateAnalyticsComponentI {
     onCancel?: () => void;
     headingTitle?: string;
     headingSubtitle?: string;
-    analyticsData?: TemplateAnalyticsDataI;
 }

package/dist/esm/components/template-preview/models/WhatsAppTemplate.js

@@ -1 +1 @@
-var N,E,O;!function(N){N.GREEN="GREEN",N.YELLOW="YELLOW",N.RED="RED",N.UNKNOWN="UNKNOWN"}(N||(N={})),function(N){N.QUICK_REPLY="QUICK_REPLY",N.URL="URL",N.PHONE_NUMBER="PHONE_NUMBER",N.COPY_CODE="COPY_CODE"}(E||(E={})),function(N){N.CHATBOT="CHATBOT",N.GROWTH="GROWTH",N.CAMPAIGN="CAMPAIGN",N.CRM="CRM",N.INTEGRATIONS="INTEGRATIONS",N.OPENAI="OPENAI",N.DM="DM",N.FRONTEND="FRONTEND"}(O||(O={}));export{E as BUTTON_TYPE,O as POD,N as TEMPLATE_QUALITY};
+var E,N,O;!function(E){E.GREEN="GREEN",E.YELLOW="YELLOW",E.RED="RED"}(E||(E={})),function(E){E.QUICK_REPLY="QUICK_REPLY",E.URL="URL",E.PHONE_NUMBER="PHONE_NUMBER",E.COPY_CODE="COPY_CODE"}(N||(N={})),function(E){E.CHATBOT="CHATBOT",E.GROWTH="GROWTH",E.CAMPAIGN="CAMPAIGN",E.CRM="CRM",E.INTEGRATIONS="INTEGRATIONS",E.OPENAI="OPENAI",E.DM="DM",E.FRONTEND="FRONTEND"}(O||(O={}));export{N as BUTTON_TYPE,O as POD,E as TEMPLATE_QUALITY};

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WhatsNewContent } from './WhatsNew.types';
+interface WhatsNewProps {
+    title?: string;
+    tooltip?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+    buttonTestId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+}
+export declare const WhatsNew: React.FC<WhatsNewProps>;
+export {};

package/dist/esm/components/whats-new/WhatsNew.js

@@ -0,0 +1 @@
+import{j as t}from"../../node_modules/react/jsx-runtime.js";import{useState as e}from"react";import{WhatsNewButton as o}from"./WhatsNewButton.js";import{WhatsNewPanel as n}from"./WhatsNewPanel.js";import{useWhatsNewContext as s}from"./WhatsNewProvider.js";const i=i=>{let{title:r="What's new",tooltip:a="What's new",searchPlaceholder:h="Search posts",emptyStateTitle:c="Nothing new!",emptyStateDescription:l="There are no new updates or features at the moment. Check back soon!",noResultsText:m="Sorry, no results found.",width:d="480px",onContentClick:p,renderCustomContent:u,buttonTestId:C="whats-new-button",iconWidth:w=32,iconHeight:j=32}=i;const[x,f]=e(!1),{whatsNewContent:g,isLoading:W,newContentCount:S}=s();return t.jsxs(t.Fragment,{children:[t.jsx(o,{onClick:()=>f(!0),newContentCount:S,isOpen:x,isLoading:W,tooltip:a,testId:C,iconWidth:w,iconHeight:j}),t.jsx(n,{isOpen:x,onClose:()=>f(!1),content:g,isLoading:W,title:r,searchPlaceholder:h,emptyStateTitle:c,emptyStateDescription:l,noResultsText:m,width:d,onContentClick:t=>{p&&p(t)},renderCustomContent:u})]})};export{i as WhatsNew};

package/dist/esm/components/whats-new/WhatsNew.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const WhatsNewIconContainer: import("styled-components").StyledComponent<"div", any, {
+    count?: number | undefined;
+}, never>;
+export declare const WhatsNewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackgroundImageContainer: import("styled-components").StyledComponent<"div", any, {
+    imageUrl: string;
+    height?: string | undefined;
+    width?: string | undefined;
+}, never>;

package/dist/esm/components/whats-new/WhatsNew.styles.js

@@ -0,0 +1,196 @@
+import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
+	cursor: pointer;
+	position: relative;
+
+	.main-icon-class {
+		padding: 6px;
+		border-radius: 32px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.2s ease;
+	}
+
+	.icon-active {
+		background: ${t.background.brandLight};
+	}
+
+	.main-icon-class:hover {
+		background: ${t.background.base};
+	}
+
+	.notification--count {
+		box-sizing: border-box;
+		position: absolute;
+		right: 6px;
+		top: 4px;
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		background: ${t.background.negative.vibrant};
+		border: 1.25px solid ${t.surface.standard};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.count--text {
+		font-size: 8px;
+		line-height: 7.2px;
+		font-weight: 400;
+		color: ${t.surface.standard};
+	}
+`,n=e.div`
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-height: calc(100vh - 60px);
+
+	&::-webkit-scrollbar {
+		display: block;
+		width: 6px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background: ${t.content.inactive};
+		border-radius: 3px;
+		min-height: 30px;
+	}
+
+	.icon--wrapper {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		background: ${t.background.base};
+		margin-bottom: 16px;
+	}
+
+	.no--data--found {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 300px;
+		text-align: center;
+		padding: 24px;
+	}
+
+	.text--align {
+		text-align: center;
+	}
+
+	.scroller {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 16px 0;
+	}
+
+	.full--width {
+		width: 100%;
+	}
+
+	.flex {
+		display: flex;
+	}
+
+	.flex--row {
+		flex-direction: row;
+	}
+
+	.flex--column {
+		flex-direction: column;
+	}
+
+	.mt-8 {
+		margin-top: 8px;
+	}
+
+	.mt-20 {
+		margin-top: 20px;
+	}
+
+	.mt--8 {
+		margin-top: 8px;
+	}
+
+	.mt--12 {
+		margin-top: 12px;
+	}
+
+	.mb-mt-8 {
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+
+	.padding--16 {
+		padding: 16px;
+	}
+
+	.card--desc {
+		max-height: 200px;
+		overflow-y: auto;
+		font-size: 12px;
+		color: ${t.content.secondary};
+
+		p {
+			margin-bottom: 0px;
+		}
+	}
+
+	.created--at {
+		align-items: center;
+		gap: 4px;
+	}
+
+	.new--content--tag {
+		padding: 2px 6px;
+		gap: 4px;
+		border-radius: 14px;
+		background: ${t.background.warning.vibrant};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 8px;
+	}
+`,r=e.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+`,o=e.div`
+	background: ${t.surface.standard};
+	border-radius: 8px;
+	border: 1px solid ${t.stroke.primary};
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	transition: all 0.2s ease;
+
+	&:hover {
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+`,a=e.div`
+	background-image: url(${e=>e.imageUrl});
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	height: ${e=>e.height||"200px"};
+	width: ${e=>e.width||"100%"};
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:empty::after {
+		content: '';
+		background: ${t.background.base};
+		width: 100%;
+		height: 100%;
+		border-radius: 4px;
+	}
+`;export{a as BackgroundImageContainer,o as MainCardContainer,r as MainContainer,i as WhatsNewIconContainer,n as WhatsNewWrapper};

package/dist/esm/components/whats-new/WhatsNew.types.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+export interface WhatsNewContent {
+    id: string;
+    title: string;
+    body: string;
+    content: string;
+    image: string;
+    buttonText: string;
+    redirectUrl: string;
+    docId?: string;
+    createdAt: any;
+    module: string[];
+    visibility: boolean;
+}
+export interface WhatsNewProviderProps {
+    children: React.ReactNode;
+    fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
+    markContentAsViewed?: (contentId: string) => Promise<void>;
+    module?: string;
+    isLoading?: boolean;
+}
+export interface WhatsNewButtonProps {
+    onClick?: () => void;
+    newContentCount?: number;
+    isOpen?: boolean;
+    isLoading?: boolean;
+    tooltip?: string;
+    testId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+}
+export interface WhatsNewPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    content: WhatsNewContent[];
+    isLoading?: boolean;
+    title?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+}
+export interface WhatsNewHookReturn {
+    whatsNewContent: WhatsNewContent[];
+    isLoading: boolean;
+    newContentCount: number;
+    markAsViewed: (contentId: string) => Promise<void>;
+    refreshContent: () => Promise<void>;
+}

package/dist/esm/components/whats-new/WhatsNewButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsNewButtonProps } from './WhatsNew.types';
+export declare const WhatsNewButton: React.FC<WhatsNewButtonProps>;