@bikdotai/bik-component-library 0.0.639--beta → 0.0.639--beta0.1

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -5,7 +5,7 @@ import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
 import { AllTemplateTypes, AllTemplateVariables, NonNullTemplateTypes } from '../template-preview/models/types';
 import { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate';
-import { ExtrasWhatsapp, POD, SegmentAnalyticsI, TEMPLATE_QUALITY, WhatsAppPickerMeta, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { ExtrasWhatsapp, POD, TemplateAnalyticsI, WhatsAppPickerMeta, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 import { VariableV3 } from '../variable-picker-v3/model';
 export interface TemplateContextMapperProps {
     selectedTemplate: NonNullTemplateTypes;
@@ -62,7 +62,6 @@ export interface TemplateContextMapperProps {
     showDiscountCodeExpiryInfo?: boolean;
     footerButtonText?: string;
     footerInfoText?: string;
-    templateQuality?: TEMPLATE_QUALITY;
-    segmentAnalytics?: SegmentAnalyticsI;
+    templateAnalytics?: TemplateAnalyticsI;
 }
 export declare const TemplateContextMapper: (props: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TemplateAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
+declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
+export default TemplateAnalyticsComponent;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),s=require("../../../assets/icons/tick_double.svg.js"),n=require("react"),l=require("../../modals/styledModal.js"),a=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../styles/SegmentAnalyticsStyles.js"),d=require("../utils/SegmentConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{let{icon:s,title:n,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(s,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:n})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(a.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:l})]}))]}))};exports.default=a=>{let{templateAnalytics:g,onClose:h,onProceed:m,onCancel:x,headingTitle:p,headingSubtitle:y,templateId:T}=a;const{templateQuality:b=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:O}=g||{},{icon:S,title:C,subline:A}=d.TEMPLATE_QUALITY_MAP[b||i.TEMPLATE_QUALITY.GREEN],[v,N]=n.useState({}),[E,f]=n.useState(!0);return n.useEffect((()=>{null==O||O(T||"").then((e=>{console.log("data",e),e.analytics&&N(e.analytics),f(!1)}))}),[]),e.jsx(l.StyledModal,Object.assign({open:!0,headingTitle:p,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==h||h()},headingSubtitle:y,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==h||h(),null==x||x()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==m||m()},disabled:E},onClose:()=>{null==h||h()},width:"700px"},{children:e.jsxs(o.SegmentContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[S&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),C&&e.jsxs(c.TitleRegular,{children:[C," template"]}),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:A}))]}))}),E?e.jsx(u.SegmentAnalyticsSkeleton,{}):e.jsxs(o.RightPanelContainer,{children:[e.jsx(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:d.ANALYTICS_ENGAGEMENT_MAP.map(((t,s)=>e.jsx(j,{icon:t.icon,title:t.title,value:v[t.valName]||0,percentValue:t.percentValName?v[t.percentValName]:null},s)))})),(null==v?void 0:v.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(c.TitleSmall,Object.assign({color:r.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(v.clickAnalytics).map(((t,n)=>{let[l,a]=t;return e.jsx(j,{icon:s.default,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},n)}))}))]})]})]})}))};

package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -292,16 +292,16 @@ export type ExtrasWhatsapp = {
         setBackTrackMessage: (backTrackMessage: string) => void
     ];
 };
-export type SegmentAnalyticsI = {
-    fetchAnalytics?: (templateId: string) => Promise<SegmentAnalyticsResponseI>;
+export type TemplateAnalyticsI = {
+    fetchAnalytics?: (templateId: string) => Promise<TemplateAnalyticsResponseI>;
     show?: boolean;
     templateQuality?: TEMPLATE_QUALITY;
 };
-export type SegmentAnalyticsResponseI = {
+export type TemplateAnalyticsResponseI = {
     success: boolean;
-    analytics?: SegmentAnalyticsDataI;
+    analytics?: TemplateAnalyticsDataI;
 };
-export interface SegmentAnalyticsDataI {
+export interface TemplateAnalyticsDataI {
     totalReads: number;
     totalSent: number;
     totalDelivered: number;
@@ -314,8 +314,8 @@ export interface SegmentAnalyticsDataI {
         };
     };
 }
-export interface SegmentAnalyticsComponentI {
-    segmentAnalytics?: SegmentAnalyticsI;
+export interface TemplateAnalyticsComponentI {
+    templateAnalytics?: TemplateAnalyticsI;
     templateId: string;
     onClose?: () => void;
     onProceed?: () => void;

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

@@ -5,7 +5,7 @@ import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
 import { AllTemplateTypes, AllTemplateVariables, NonNullTemplateTypes } from '../template-preview/models/types';
 import { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate';
-import { ExtrasWhatsapp, POD, SegmentAnalyticsI, TEMPLATE_QUALITY, WhatsAppPickerMeta, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+import { ExtrasWhatsapp, POD, TemplateAnalyticsI, WhatsAppPickerMeta, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 import { VariableV3 } from '../variable-picker-v3/model';
 export interface TemplateContextMapperProps {
     selectedTemplate: NonNullTemplateTypes;
@@ -62,7 +62,6 @@ export interface TemplateContextMapperProps {
     showDiscountCodeExpiryInfo?: boolean;
     footerButtonText?: string;
     footerInfoText?: string;
-    templateQuality?: TEMPLATE_QUALITY;
-    segmentAnalytics?: SegmentAnalyticsI;
+    templateAnalytics?: TemplateAnalyticsI;
 }
 export declare const TemplateContextMapper: (props: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TemplateAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
+declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
+export default TemplateAnalyticsComponent;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as c}from"react";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,Caption as m,TitleSmall as p}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{SegmentContainer as g,LeftPanelContainer as u,RightPanelContainer as y,CustomTitleMedium as b}from"../styles/SegmentAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as j,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/SegmentConstants.js";import{SegmentAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const N=r=>{let{templateAnalytics:b,onClose:N,onProceed:O,onCancel:T,headingTitle:x,headingSubtitle:C,templateId:S}=r;const{templateQuality:A=o.GREEN,fetchAnalytics:w}=b||{},{icon:V,title:E,subline:P}=j[A||o.GREEN],[B,H]=i({}),[G,R]=i(!0);return c((()=>{null==w||w(S||"").then((e=>{console.log("data",e),e.analytics&&H(e.analytics),R(!1)}))}),[]),e(s,Object.assign({open:!0,headingTitle:x,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==N||N()},headingSubtitle:C,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==N||N(),null==T||T()},disabled:G},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==O||O()},disabled:G},onClose:()=>{null==N||N()},width:"700px"},{children:t(g,{children:[e(u,{children:t("div",Object.assign({className:"inside--container"},{children:[V&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:h.content.warning})})),E&&t(d,{children:[E," template"]}),e(m,Object.assign({style:{textAlign:"center"},color:h.content.secondary},{children:P}))]}))}),G?e(v,{}):t(y,{children:[e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:f.map(((t,n)=>e(k,{icon:t.icon,title:t.title,value:B[t.valName]||0,percentValue:t.percentValName?B[t.percentValName]:null},n)))})),(null==B?void 0:B.clickAnalytics)&&t(n,{children:[e(p,Object.assign({color:h.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(B.clickAnalytics).map(((t,n)=>{let[l,i]=t;return e(k,{icon:a,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})]})}))},k=l=>{let{icon:a,title:i,value:c,percentValue:s}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(a,{width:"16px",height:"16px",color:h.background.brand})})),e(m,{children:i})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(r,{tagText:s||0,theme:"light",type:"neutral"}):e(n,{}),e(b,{children:c})]}))]}))};export{N as default};

package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -292,16 +292,16 @@ export type ExtrasWhatsapp = {
         setBackTrackMessage: (backTrackMessage: string) => void
     ];
 };
-export type SegmentAnalyticsI = {
-    fetchAnalytics?: (templateId: string) => Promise<SegmentAnalyticsResponseI>;
+export type TemplateAnalyticsI = {
+    fetchAnalytics?: (templateId: string) => Promise<TemplateAnalyticsResponseI>;
     show?: boolean;
     templateQuality?: TEMPLATE_QUALITY;
 };
-export type SegmentAnalyticsResponseI = {
+export type TemplateAnalyticsResponseI = {
     success: boolean;
-    analytics?: SegmentAnalyticsDataI;
+    analytics?: TemplateAnalyticsDataI;
 };
-export interface SegmentAnalyticsDataI {
+export interface TemplateAnalyticsDataI {
     totalReads: number;
     totalSent: number;
     totalDelivered: number;
@@ -314,8 +314,8 @@ export interface SegmentAnalyticsDataI {
         };
     };
 }
-export interface SegmentAnalyticsComponentI {
-    segmentAnalytics?: SegmentAnalyticsI;
+export interface TemplateAnalyticsComponentI {
+    templateAnalytics?: TemplateAnalyticsI;
     templateId: string;
     onClose?: () => void;
     onProceed?: () => void;

package/package.json

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

package/dist/cjs/components/template-context-mapper/modalElements/SegmentAnalyticsComponent.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { SegmentAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
-declare const SegmentAnalyticsComponent: React.FC<SegmentAnalyticsComponentI>;
-export default SegmentAnalyticsComponent;

package/dist/cjs/components/template-context-mapper/modalElements/SegmentAnalyticsComponent.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),n=require("../../../assets/icons/tick_double.svg.js"),s=require("react"),l=require("../../modals/styledModal.js"),a=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../styles/SegmentAnalyticsStyles.js"),d=require("../utils/SegmentConstants.js"),u=require("./SegmentAnalyticsSkeleton.js");const j=t=>{let{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:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(a.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:l})]}))]}))};exports.default=a=>{let{segmentAnalytics:g,onClose:h,onProceed:m,onCancel:x,headingTitle:y,headingSubtitle:p,templateId:b}=a;const{templateQuality:T=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:S}=g||{},{icon:O,title:C,subline:A}=d.TEMPLATE_QUALITY_MAP[T||i.TEMPLATE_QUALITY.GREEN],[v,N]=s.useState({}),[E,f]=s.useState(!0);return s.useEffect((()=>{null==S||S(b||"").then((e=>{console.log("data",e),e.analytics&&N(e.analytics),f(!1)}))}),[]),e.jsx(l.StyledModal,Object.assign({open:!0,headingTitle:y,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==h||h()},headingSubtitle:p,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==h||h(),null==x||x()},disabled:E},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==m||m()},disabled:E},onClose:()=>{null==h||h()},width:"700px"},{children:e.jsxs(o.SegmentContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[O&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),C&&e.jsxs(c.TitleRegular,{children:[C," template"]}),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:A}))]}))}),E?e.jsx(u.SegmentAnalyticsSkeleton,{}):e.jsxs(o.RightPanelContainer,{children:[e.jsx(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:d.ANALYTICS_ENGAGEMENT_MAP.map(((t,n)=>e.jsx(j,{icon:t.icon,title:t.title,value:v[t.valName]||0,percentValue:t.percentValName?v[t.percentValName]:null},n)))})),(null==v?void 0:v.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(c.TitleSmall,Object.assign({color:r.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(v.clickAnalytics).map(((t,s)=>{let[l,a]=t;return e.jsx(j,{icon:n.default,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},s)}))}))]})]})]})}))};

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { SegmentAnalyticsComponentI } from "../../template-preview/models/WhatsAppTemplate";
-declare const SegmentAnalyticsComponent: React.FC<SegmentAnalyticsComponentI>;
-export default SegmentAnalyticsComponent;

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

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as s}from"react";import{StyledModal as c}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,Caption as m,TitleSmall as h}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{SegmentContainer as g,LeftPanelContainer as u,RightPanelContainer as y,CustomTitleMedium as b}from"../styles/SegmentAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as j,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/SegmentConstants.js";import{SegmentAnalyticsSkeleton as v}from"./SegmentAnalyticsSkeleton.js";const N=r=>{let{segmentAnalytics:b,onClose:N,onProceed:O,onCancel:x,headingTitle:T,headingSubtitle:C,templateId:S}=r;const{templateQuality:A=o.GREEN,fetchAnalytics:w}=b||{},{icon:V,title:E,subline:P}=j[A||o.GREEN],[B,H]=i({}),[G,R]=i(!0);return s((()=>{null==w||w(S||"").then((e=>{console.log("data",e),e.analytics&&H(e.analytics),R(!1)}))}),[]),e(c,Object.assign({open:!0,headingTitle:T,tintedHeader:!0,modalHeaderStyles:{backgroundColor:p.surface.subdued},onBackPress:()=>{null==N||N()},headingSubtitle:C,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==N||N(),null==x||x()},disabled:G},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==O||O()},disabled:G},onClose:()=>{null==N||N()},width:"700px"},{children:t(g,{children:[e(u,{children:t("div",Object.assign({className:"inside--container"},{children:[V&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:p.content.warning})})),E&&t(d,{children:[E," template"]}),e(m,Object.assign({style:{textAlign:"center"},color:p.content.secondary},{children:P}))]}))}),G?e(v,{}):t(y,{children:[e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:f.map(((t,n)=>e(k,{icon:t.icon,title:t.title,value:B[t.valName]||0,percentValue:t.percentValName?B[t.percentValName]:null},n)))})),(null==B?void 0:B.clickAnalytics)&&t(n,{children:[e(h,Object.assign({color:p.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(B.clickAnalytics).map(((t,n)=>{let[l,i]=t;return e(k,{icon:a,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})]})}))},k=l=>{let{icon:a,title:i,value:s,percentValue:c}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(a,{width:"16px",height:"16px",color:p.background.brand})})),e(m,{children:i})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[c?e(r,{tagText:c||0,theme:"light",type:"neutral"}):e(n,{}),e(b,{children:s})]}))]}))};export{N as default};