@bikdotai/bik-component-library 0.0.703-beta.3 → 0.0.703-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +0 -5
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncement.types.d.ts +27 -0
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.d.ts +14 -0
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.d.ts +13 -0
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -0
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.d.ts +13 -0
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -0
- package/dist/cjs/components/feature-announcements/VideoModal.d.ts +8 -0
- package/dist/cjs/components/feature-announcements/VideoModal.js +1 -0
- package/dist/cjs/components/feature-announcements/index.d.ts +6 -0
- package/dist/cjs/components/feature-announcements/useFeatureAnnouncements.d.ts +24 -0
- package/dist/cjs/components/feature-announcements/useFeatureAnnouncements.js +1 -0
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts +1 -5
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts +0 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js +1 -1
- package/dist/cjs/components/template-context-mapper/styles/TemplateAnalyticsStyles.d.ts +1 -3
- package/dist/cjs/components/template-context-mapper/styles/TemplateAnalyticsStyles.js +5 -6
- package/dist/cjs/components/template-context-mapper/utils/TemplateConstants.d.ts +3 -13
- package/dist/cjs/components/template-context-mapper/utils/TemplateConstants.js +1 -1
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +1 -7
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.d.ts +18 -0
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -0
- package/dist/cjs/components/whats-new/WhatsNew.styles.d.ts +11 -0
- package/dist/cjs/components/whats-new/WhatsNew.styles.js +196 -0
- package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +52 -0
- package/dist/cjs/components/whats-new/WhatsNewButton.d.ts +3 -0
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -0
- package/dist/cjs/components/whats-new/WhatsNewPanel.d.ts +3 -0
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -0
- package/dist/cjs/components/whats-new/WhatsNewProvider.d.ts +4 -0
- package/dist/cjs/components/whats-new/WhatsNewProvider.js +1 -0
- package/dist/cjs/components/whats-new/index.d.ts +7 -0
- package/dist/cjs/components/whats-new/useWhatsNew.d.ts +9 -0
- package/dist/cjs/components/whats-new/useWhatsNew.js +1 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +0 -5
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncement.types.d.ts +27 -0
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.d.ts +14 -0
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.d.ts +13 -0
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -0
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.d.ts +13 -0
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -0
- package/dist/esm/components/feature-announcements/VideoModal.d.ts +8 -0
- package/dist/esm/components/feature-announcements/VideoModal.js +1 -0
- package/dist/esm/components/feature-announcements/index.d.ts +6 -0
- package/dist/esm/components/feature-announcements/useFeatureAnnouncements.d.ts +24 -0
- package/dist/esm/components/feature-announcements/useFeatureAnnouncements.js +1 -0
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts +1 -5
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js +1 -1
- package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.d.ts +1 -3
- package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.js +5 -6
- package/dist/esm/components/template-context-mapper/utils/TemplateConstants.d.ts +3 -13
- package/dist/esm/components/template-context-mapper/utils/TemplateConstants.js +1 -1
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +1 -7
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.js +1 -1
- package/dist/esm/components/whats-new/WhatsNew.d.ts +18 -0
- package/dist/esm/components/whats-new/WhatsNew.js +1 -0
- package/dist/esm/components/whats-new/WhatsNew.styles.d.ts +11 -0
- package/dist/esm/components/whats-new/WhatsNew.styles.js +196 -0
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +52 -0
- package/dist/esm/components/whats-new/WhatsNewButton.d.ts +3 -0
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -0
- package/dist/esm/components/whats-new/WhatsNewPanel.d.ts +3 -0
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -0
- package/dist/esm/components/whats-new/WhatsNewProvider.d.ts +4 -0
- package/dist/esm/components/whats-new/WhatsNewProvider.js +1 -0
- package/dist/esm/components/whats-new/index.d.ts +7 -0
- package/dist/esm/components/whats-new/useWhatsNew.d.ts +9 -0
- package/dist/esm/components/whats-new/useWhatsNew.js +1 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +1 -1
- package/package.json +2 -1
- package/dist/cjs/assets/icons/speedometer.svg.js +0 -1
- package/dist/esm/assets/icons/speedometer.svg.js +0 -1
|
@@ -6,17 +6,12 @@ export type LineChartProps = {
|
|
|
6
6
|
data: number[];
|
|
7
7
|
lineColor?: string;
|
|
8
8
|
backgroundColor?: string;
|
|
9
|
-
gradientColor?: {
|
|
10
|
-
start: string;
|
|
11
|
-
end: string;
|
|
12
|
-
};
|
|
13
9
|
dotted?: boolean;
|
|
14
10
|
gradient?: boolean;
|
|
15
11
|
legend?: string;
|
|
16
12
|
lineWidth?: number;
|
|
17
13
|
squareLegends?: boolean;
|
|
18
14
|
useSecondYAxis?: boolean;
|
|
19
|
-
pointColors?: string[];
|
|
20
15
|
}[];
|
|
21
16
|
labels: Array<string>;
|
|
22
17
|
scaleText?: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../node_modules/react/jsx-runtime.js"),t=require("chart.js"),n=require("react"),r=require("react-chartjs-2"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../node_modules/react/jsx-runtime.js"),t=require("chart.js"),n=require("react"),r=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),l=require("../../../../constants/Theme.js"),o=require("../utils/calcPercentage.js"),a=require("./LineChart.styled.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.PointElement,t.BarElement,t.LineElement,t.ArcElement,t.Filler,t.Title,t.Tooltip,t.Legend);exports.LineChart=t=>{let{scaleText:s,labels:d,canvasHeight:c,datas:u,maintainAspectRatio:p=!1,stepSize:x,min:y,max:g,isZeroState:m,tension:v,isNewStyles:b,prefixCurrencyInYAxis:j,pointRadius:h,useKFormat:C,lineThickness:O,ticksLabelCallback:S,labelCallback:R,afterBodyCallBack:f,titleTooltipCallback:L,isInternationalStore:k,customYHeaders:E,headerIcons:w=[],legendsAndIconDirection:B="row",hasSecondYAxis:q=!1,min2:F,max2:I,stepSize2:$,prefixCurrencyInY2Axis:A,useKFormat2:z,customY2Headers:T}=t;var D,P,Y,V;const[W,H]=n.useState(null),Z=n.useRef();n.useEffect((()=>{var e,t,n,r;if(null===(r=null===(n=null===(t=null===(e=Z.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===n?void 0:n.ticks)||void 0===r?void 0:r.length){const e=38*Z.current.scales.y.ticks.length;H(e)}}),[Z]);const _=u.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?l.COLORS.content.placeholder:l.COLORS.background.brand,square:e.squareLegends}))),K={labels:d,datasets:u.map(((e,t)=>{var n,r,i;return Object.assign(Object.assign({tension:null!=v?v:.4,fill:e.gradient?"start":0},((e,t)=>{const n={borderColor:e||(t?l.COLORS.content.placeholder:l.COLORS.background.brand)};return b?Object.assign({pointStyle:"circle",pointRadius:h||(d&&d.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?l.COLORS.content.placeholder:l.COLORS.background.brand)},n):Object.assign({pointRadius:null!=h?h:1},n)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(r=null!==(n=e.lineWidth)&&void 0!==n?n:O)&&void 0!==r?r:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,W?W-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(i=e.backgroundColor)&&void 0!==i?i:"transparent",legend:e.legend,yAxisID:e.useSecondYAxis?"y1":"y"})}))},G={maintainAspectRatio:p,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=b&&b,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>l.COLORS.content.primaryInverse,backgroundColor:l.COLORS.content.primary,callbacks:{labelTextColor:()=>l.COLORS.content.primaryInverse,title:L,label:R,afterBody:f},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:m?0:y,max:m?10:g,position:"left",id:"y",ticks:{color:l.COLORS.content.secondary,callback:e=>{var t,n;return C?`${null!==(t=null==s?void 0:s.yPrefix)&&void 0!==t?t:""}${k?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=j?j:""}`:E&&Object.keys(E).length>0?E[e]:`${null!==(n=null==s?void 0:s.yPrefix)&&void 0!==n?n:""}${e}${null!=j?j:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:m?1:x,padding:b?24:0},title:{display:!!(null==s?void 0:s.y),text:null==s?void 0:s.y},grid:{color:l.COLORS.background.base,drawBorder:null===(D=null==s?void 0:s.yDrawBorder)||void 0===D||D}},y1:{beginAtZero:!0,min:m?0:F,max:m?10:I,position:"right",id:"y1",display:q,ticks:{color:l.COLORS.content.secondary,callback:e=>{var t,n;return z?`${null!==(t=null==s?void 0:s.y2Prefix)&&void 0!==t?t:""}${k?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=A?A:""}`:T&&Object.keys(T).length>0?T[e]:`${null!==(n=null==s?void 0:s.y2Prefix)&&void 0!==n?n:""}${e}${null!=A?A:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:m?1:$,padding:b?24:0},title:{display:!!(null==s?void 0:s.y2),text:null==s?void 0:s.y2},grid:{color:"transparent",drawBorder:null===(P=null==s?void 0:s.y2DrawBorder)||void 0===P||P}},x:{ticks:{callback:S,color:l.COLORS.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==s?void 0:s.x),text:null==s?void 0:s.x},grid:{display:!1,drawBorder:null!==(Y=null==s?void 0:s.xDrawBorder)&&void 0!==Y&&Y}}}};return e.jsxRuntimeExports.jsxs("div",Object.assign({style:Object.assign(Object.assign({},p?{}:{height:null!==(V=null!=c?c:W)&&void 0!==V?V:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:B}},{children:[e.jsxRuntimeExports.jsx(a.LegendWrapper,{children:w.map(((t,n)=>e.jsxRuntimeExports.jsx(a.LegendContainer,{children:t},n)))}),e.jsxRuntimeExports.jsx(a.LegendWrapper,{children:_.map(((t,n)=>{let{text:r,color:l,square:o}=t;return r?e.jsxRuntimeExports.jsxs(a.LegendContainer,{children:[e.jsxRuntimeExports.jsx(a.LegendColor,{color:l,square:o,newStyle:b}),e.jsxRuntimeExports.jsx(i.BodyTiny,Object.assign({color:"#667085"},{children:r}))]},n):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})}))})]})),e.jsxRuntimeExports.jsx("div",Object.assign({style:{flex:1}},{children:e.jsxRuntimeExports.jsx(r.Line,{ref:Z,options:G,data:K})}))]}))};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export interface FeatureAnnouncement {
|
|
2
|
+
id: string;
|
|
3
|
+
title: string;
|
|
4
|
+
body: string;
|
|
5
|
+
content: string;
|
|
6
|
+
buttonText: string;
|
|
7
|
+
displayImage: string;
|
|
8
|
+
featureTag: string;
|
|
9
|
+
featureUpdateType: 'Major' | 'Minor';
|
|
10
|
+
image: string;
|
|
11
|
+
module: string[];
|
|
12
|
+
pageUrls: string[];
|
|
13
|
+
productVideo: string;
|
|
14
|
+
redirectUrl: string;
|
|
15
|
+
updates: string;
|
|
16
|
+
visibility: boolean;
|
|
17
|
+
createdAt: any;
|
|
18
|
+
expirationDate?: {
|
|
19
|
+
seconds: number;
|
|
20
|
+
} | string | Date;
|
|
21
|
+
}
|
|
22
|
+
export interface StoreFeatureProgress {
|
|
23
|
+
storeId: string;
|
|
24
|
+
viewedFeatures: {
|
|
25
|
+
[featureId: string]: boolean;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FeatureAnnouncementRepoInjected, RouterProps } from './useFeatureAnnouncements';
|
|
3
|
+
interface FeatureAnnouncementProviderProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
fetchVisibleFeatures: FeatureAnnouncementRepoInjected['fetchVisibleFeatures'];
|
|
6
|
+
getStoreFeatureProgress: FeatureAnnouncementRepoInjected['getStoreFeatureProgress'];
|
|
7
|
+
fetchFeatureById: FeatureAnnouncementRepoInjected['fetchFeatureById'];
|
|
8
|
+
markFeatureAsViewedForStore: FeatureAnnouncementRepoInjected['markFeatureAsViewedForStore'];
|
|
9
|
+
isFeatureApplicableToCurrentPage: FeatureAnnouncementRepoInjected['isFeatureApplicableToCurrentPage'];
|
|
10
|
+
module?: string;
|
|
11
|
+
router?: RouterProps;
|
|
12
|
+
}
|
|
13
|
+
declare const FeatureAnnouncementProvider: React.FC<FeatureAnnouncementProviderProps>;
|
|
14
|
+
export default FeatureAnnouncementProvider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),o=require("react-joyride"),n=require("./MajorUpdatePopup.js"),a=require("./MinorUpdatePopup.js"),r=require("./useFeatureAnnouncements.js"),s=require("./VideoModal.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(o);const u="#007bff";exports.default=i=>{let{children:d,fetchVisibleFeatures:p,getStoreFeatureProgress:c,fetchFeatureById:f,markFeatureAsViewedForStore:b,isFeatureApplicableToCurrentPage:g,module:x,router:h}=i;var m;const{majorUpdateFeatures:k,minorUpdateFeatures:C,isLoading:y,markFeatureAsViewed:S}=r.useFeatureAnnouncements({fetchVisibleFeatures:p,getStoreFeatureProgress:c,fetchFeatureById:f,markFeatureAsViewedForStore:b,isFeatureApplicableToCurrentPage:g,module:x,router:h}),[T,w]=t.useState(null),[B,j]=t.useState(null),[E,v]=t.useState(!1),[F,I]=t.useState([]),[N,R]=t.useState(!1),[P,M]=t.useState([]),[W,q]=t.useState(!1),[O,V]=t.useState(!1),[A,L]=t.useState([]),[U,$]=t.useState(!1),[z,_]=t.useState(!1),[D,G]=t.useState(!1),[H,J]=t.useState(""),[K,Q]=t.useState(!1);t.useEffect((()=>{if(!(k.length>0)||T||y||W||K)0!==k.length||y||_(!0);else{_(!1),$(!1),v(!1),I([]),j(null),L([]);const e=()=>{document.querySelector('[data-testid="whats-new-button"]')?X(k[0]):setTimeout(e,1e3)};e()}}),[k,T,y,W,K]),t.useEffect((()=>{var e;const t=null===(e=null==h?void 0:h.query)||void 0===e?void 0:e.featureId;if(!t||y||0===C.length)return;const o=C.find((e=>e.id===t));if(!o||!o.featureTag)return;$(!0);let n=0;const a=setInterval((()=>{n++;const e=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;document.querySelector(e)?(re(o),clearInterval(a)):n>=25&&(console.warn(`FeatureAnnouncements: Timed out waiting for element with selector: ${e}`),clearInterval(a))}),200);return()=>{clearInterval(a)}}),[C,null===(m=null==h?void 0:h.query)||void 0===m?void 0:m.featureId,y]),t.useEffect((()=>{if(C.length>0&&!y&&!E&&!O&&!B&&!U&&z&&!K){let e=null,t=null,o=null,n=!1;const a=()=>{if(n||O||B||U||!z)return;const a=C.filter((e=>{if(!e.featureTag||""===e.featureTag.trim())return!1;const t=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`;return null!==document.querySelector(t)}));a.length>0&&(L(a),re(a[0]),e&&(e.disconnect(),e=null),t&&(window.removeEventListener("scroll",t),t=null),o&&(clearTimeout(o),o=null))};return e=new MutationObserver((e=>{let t=!1;for(const o of e){if("childList"===o.type&&o.addedNodes.length>0)for(let e=0;e<o.addedNodes.length;e++){const n=o.addedNodes[e];if(n.nodeType===Node.ELEMENT_NODE){const e=n;if(e.id||e.querySelector("[id]")){t=!0;break}}}if(t)break}E||n||O||B||U||!z||!t||(o&&clearTimeout(o),o=setTimeout((()=>{n||O||B||U||!z||a()}),200))})),t=()=>{E||n||O||B||U||!z||(o&&clearTimeout(o),o=setTimeout((()=>{n||O||B||U||!z||a()}),300))},e&&e.observe(document.body,{childList:!0,subtree:!0}),t&&window.addEventListener("scroll",t,{passive:!0}),a(),setTimeout((()=>{n||O||B||U||!z||a()}),100),setTimeout((()=>{n||O||B||U||!z||a()}),1e3),setTimeout((()=>{n||O||B||U||!z||a()}),500),()=>{n=!0,e&&e.disconnect(),t&&window.removeEventListener("scroll",t),o&&clearTimeout(o)}}(0===C.length||y)&&(v(!1),I([]),j(null),L([]),$(!1))}),[C,y,E,O,B,U,z,S,K]);const X=t=>{w(t);const o=k.findIndex((e=>e.id===t.id)),a=k.length,r=[{target:'[data-testid="whats-new-button"]',content:e.jsxRuntimeExports.jsx(n.default,{feature:t,currentIndex:o,totalFeatures:a,onSkip:()=>Y(t),onExplore:()=>Z(t),onPrevious:()=>ee(t),onNext:()=>te(t)}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];M(r),R(!0)},Y=t.useCallback((e=>{(e||T)&&(q(!0),k.forEach((e=>{S(e.id)})),R(!1),w(null),M([]),_(!0),setTimeout((()=>{q(!1)}),500))}),[T,k,S]),Z=t.useCallback((e=>{q(!0),S(e.id),e.productVideo&&(J(e.productVideo),G(!0),Q(!0)),R(!1),w(null),M([]);k.findIndex((t=>t.id===e.id))===k.length-1&&_(!0),setTimeout((()=>{q(!1)}),500)}),[k,S]),ee=t.useCallback((t=>{const o=t||T;if(!o)return;const a=k.findIndex((e=>e.id===o.id));if(a>0){const t=k[a-1];w(t);const o=a-1,r=k.length,s=[{target:'[data-testid="whats-new-button"]',content:e.jsxRuntimeExports.jsx(n.default,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>Y(t),onExplore:()=>Z(t),onPrevious:()=>ee(t),onNext:()=>te(t)}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];M(s)}}),[T,k]),te=t.useCallback((t=>{const o=t||T;if(!o)return;const a=k.findIndex((e=>e.id===o.id));if(a<k.length-1){const t=k[a+1];w(t);const o=a+1,r=k.length,s=[{target:'[data-testid="whats-new-button"]',content:e.jsxRuntimeExports.jsx(n.default,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>Y(t),onExplore:()=>Z(t),onPrevious:()=>ee(t),onNext:()=>te(t)}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];M(s)}else q(!0),S(o.id),R(!1),w(null),M([]),_(!0),setTimeout((()=>{q(!1)}),500)}),[T,k,S]),oe=()=>{if(k.length>0&&!T){document.querySelector('[data-testid="whats-new-button"]')&&X(k[0])}};t.useEffect((()=>(window.showMajorUpdatePopup=oe,()=>{delete window.showMajorUpdatePopup})),[k,T]);const ne=t.useCallback((e=>{const{action:t}=e;t===o.ACTIONS.CLOSE&&(T&&(q(!0),k.forEach((e=>{S(e.id)})),_(!0),setTimeout((()=>{q(!1)}),500)),R(!1),w(null),M([]))}),[T,k,S]),ae=t.useCallback((e=>{const{action:t}=e;t===o.ACTIONS.CLOSE&&(B&&(V(!0),$(!0),C.forEach((e=>{S(e.id)})),setTimeout((()=>{V(!1)}),500)),v(!1),j(null),I([]))}),[B,C,S]),re=t=>{j(t);const o=A.findIndex((e=>e.id===t.id)),n=A.length,r=[{target:t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,content:e.jsxRuntimeExports.jsx(a.default,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>se(t),onExplore:()=>ie(t),onPrevious:()=>le(t),onNext:()=>ue(t)}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];I(r),v(!0)},se=t.useCallback((e=>{(e||B)&&(V(!0),$(!0),C.forEach((e=>{S(e.id)})),v(!1),j(null),I([]),setTimeout((()=>{V(!1)}),500))}),[B,C,S]),ie=t.useCallback((e=>{V(!0),$(!0),S(e.id),e.productVideo&&(J(e.productVideo),G(!0),Q(!0)),v(!1),j(null),I([]),setTimeout((()=>{V(!1)}),500)}),[S]),le=t.useCallback((t=>{const o=t||B;if(!o)return;const n=A.findIndex((e=>e.id===o.id));if(n>0){const t=A[n-1];j(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=n-1,s=A.length,i=[{target:o,content:e.jsxRuntimeExports.jsx(a.default,{feature:t,currentIndex:r,totalFeatures:s,onSkip:()=>se(t),onExplore:()=>ie(t),onPrevious:()=>le(t),onNext:()=>ue(t)}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];I(i)}}),[B,A]),ue=t.useCallback((t=>{const o=t||B;if(!o)return;const n=A.findIndex((e=>e.id===o.id));if(n<A.length-1){const t=A[n+1];j(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=n+1,s=A.length,i=[{target:o,content:e.jsxRuntimeExports.jsx(a.default,{feature:t,currentIndex:r,totalFeatures:s,onSkip:()=>se(t),onExplore:()=>ie(t),onPrevious:()=>le(t),onNext:()=>ue(t)}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];I(i)}else V(!0),$(!0),S(o.id),v(!1),j(null),I([]),setTimeout((()=>{V(!1)}),500)}),[B,A,S]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[d,P.length>0&&e.jsxRuntimeExports.jsx(l.default,{steps:P,run:N,continuous:!1,showProgress:!1,showSkipButton:!1,callback:ne,disableOverlayClose:!0,disableCloseOnEsc:!0,disableOverlay:!0,spotlightClicks:!1,styles:{options:{primaryColor:u,zIndex:1e4,width:"auto",arrowColor:"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}}),F.length>0&&e.jsxRuntimeExports.jsx(l.default,{steps:F,run:E,continuous:!1,showProgress:!1,showSkipButton:!1,callback:ae,disableOverlayClose:!0,disableCloseOnEsc:!0,styles:{options:{primaryColor:u,zIndex:1e4,width:"auto",arrowColor:"#ffffff"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}}),e.jsxRuntimeExports.jsx(s.VideoModal,{isOpen:D,videoUrl:H,onClose:()=>{G(!1),J(""),Q(!1)}})]})};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FeatureAnnouncement } from './FeatureAnnouncement.types';
|
|
3
|
+
interface MajorUpdatePopupProps {
|
|
4
|
+
feature: FeatureAnnouncement;
|
|
5
|
+
currentIndex: number;
|
|
6
|
+
totalFeatures: number;
|
|
7
|
+
onSkip: () => void;
|
|
8
|
+
onExplore: () => void;
|
|
9
|
+
onPrevious: () => void;
|
|
10
|
+
onNext: () => void;
|
|
11
|
+
}
|
|
12
|
+
declare const MajorUpdatePopup: React.FC<MajorUpdatePopupProps>;
|
|
13
|
+
export default MajorUpdatePopup;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js");const t=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value};exports.default=n=>{let{feature:r,currentIndex:o,totalFeatures:s,onSkip:i,onExplore:l,onPrevious:a,onNext:x}=n;return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs("div",Object.assign({style:{width:"959px",height:"274px",display:"flex",backgroundColor:"#212121",borderRadius:"4px",overflow:"hidden",position:"relative"}},{children:[e.jsxRuntimeExports.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),i()},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.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsxs("div",Object.assign({style:{flex:1,display:"flex",margin:"0 8px 0 0",flexDirection:"column",justifyContent:"space-between",background:"transparent"}},{children:[e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.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"}))})]}),s>1&&e.jsxRuntimeExports.jsxs("div",Object.assign({style:{position:"absolute",bottom:"16px",right:"16px",display:"flex",gap:"8px",alignItems:"center"}},{children:[e.jsxRuntimeExports.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.jsxRuntimeExports.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),x()},disabled:o===s-1,style:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:o===s-1?"#666":"#fff",fontSize:"20px",cursor:o===s-1?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},onMouseEnter:e=>{o!==s-1&&(e.currentTarget.style.color="#FEC02D")},onMouseLeave:e=>{o!==s-1&&(e.currentTarget.style.color="#fff")}},{children:"›"}))]}))]}))]}))})};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FeatureAnnouncement } from './FeatureAnnouncement.types';
|
|
3
|
+
interface MinorUpdatePopupProps {
|
|
4
|
+
feature: FeatureAnnouncement;
|
|
5
|
+
currentIndex: number;
|
|
6
|
+
totalFeatures: number;
|
|
7
|
+
onSkip: () => void;
|
|
8
|
+
onExplore: () => void;
|
|
9
|
+
onPrevious: () => void;
|
|
10
|
+
onNext: () => void;
|
|
11
|
+
}
|
|
12
|
+
declare const MinorUpdatePopup: React.FC<MinorUpdatePopupProps>;
|
|
13
|
+
export default MinorUpdatePopup;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js");const t=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value};exports.default=i=>{let{feature:n,currentIndex:s,totalFeatures:r,onSkip:o,onExplore:x,onPrevious:l,onNext:p}=i;return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsxs("div",Object.assign({style:{position:"relative",width:"235px",height:"134px"}},{children:[e.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsx("span",Object.assign({style:{color:"#ffffff",fontWeight:"400",fontSize:"14px"}},{children:"New feature"}))}))]})):e.jsxRuntimeExports.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.jsxRuntimeExports.jsxs("div",Object.assign({style:{flex:1,display:"flex",margin:"13px 13px 13px 3px",flexDirection:"column",justifyContent:"space-between",background:"transparent"}},{children:[e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsxs("div",Object.assign({style:{position:"absolute",bottom:"13px",right:"10px",display:"flex",gap:"16px",alignItems:"center"}},{children:[e.jsxRuntimeExports.jsx("span",Object.assign({onClick:o,style:{color:"#4B1583",fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"}},{children:"Understood"})),n.productVideo&&e.jsxRuntimeExports.jsx("button",Object.assign({onClick:()=>{x()},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"}))]}))]}))]}))})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js");exports.VideoModal=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.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsx("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},{children:r?n?e.jsxRuntimeExports.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.jsxRuntimeExports.jsxs("video",Object.assign({controls:!0,autoPlay:!0,style:{width:"100%",height:"100%",objectFit:"contain",borderRadius:"12px"}},{children:[e.jsxRuntimeExports.jsx("source",{src:r,type:"video/mp4"}),e.jsxRuntimeExports.jsx("source",{src:r,type:"video/webm"}),e.jsxRuntimeExports.jsx("source",{src:r,type:"video/ogg"}),"Your browser does not support the video tag."]})):e.jsxRuntimeExports.jsx("div",Object.assign({style:{color:"white",fontSize:"18px",textAlign:"center"}},{children:"No video available"}))}))]}))}))};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
|
|
2
|
+
export { default as MajorUpdatePopup } from './MajorUpdatePopup';
|
|
3
|
+
export { default as MinorUpdatePopup } from './MinorUpdatePopup';
|
|
4
|
+
export { VideoModal } from './VideoModal';
|
|
5
|
+
export * from './useFeatureAnnouncements';
|
|
6
|
+
export * from './FeatureAnnouncement.types';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { FeatureAnnouncement } from './FeatureAnnouncement.types';
|
|
2
|
+
export interface FeatureAnnouncementRepoInjected {
|
|
3
|
+
fetchVisibleFeatures: (module?: string) => Promise<[any, FeatureAnnouncement[] | null]>;
|
|
4
|
+
getStoreFeatureProgress: (storeId: string) => Promise<[any, any | null]>;
|
|
5
|
+
fetchFeatureById: (featureId: string) => Promise<[any, FeatureAnnouncement | null]>;
|
|
6
|
+
markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[any]>;
|
|
7
|
+
isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
|
|
8
|
+
module?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface RouterProps {
|
|
11
|
+
pathname: string;
|
|
12
|
+
query: Record<string, string | string[] | undefined>;
|
|
13
|
+
}
|
|
14
|
+
export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepoInjected & {
|
|
15
|
+
router?: RouterProps | undefined;
|
|
16
|
+
}) => {
|
|
17
|
+
features: FeatureAnnouncement[];
|
|
18
|
+
majorUpdateFeatures: FeatureAnnouncement[];
|
|
19
|
+
minorUpdateFeatures: FeatureAnnouncement[];
|
|
20
|
+
isLoading: boolean;
|
|
21
|
+
error: string | null;
|
|
22
|
+
markFeatureAsViewed: (featureId: string) => Promise<void>;
|
|
23
|
+
refetch: () => Promise<void>;
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react");exports.useFeatureAnnouncements=r=>{let{fetchVisibleFeatures:a,getStoreFeatureProgress:o,fetchFeatureById:n,markFeatureAsViewedForStore:i,isFeatureApplicableToCurrentPage:l,module:u,router:s}=r;const c=(()=>{const[e,r]=t.useState(null);return t.useEffect((()=>{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})(),[d,f]=t.useState([]),[p,g]=t.useState([]),[y,m]=t.useState([]),[w,v]=t.useState(!1),[F,h]=t.useState(null),D=t.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(c){v(!0),h(null);try{const[e,t]=yield a(u);if(e||!t)return console.error("FeatureAnnouncements: Failed to fetch features",e),void h("Failed to fetch features");const[r,n]=yield o(c);r&&console.warn("FeatureAnnouncements: Progress fetch failed, treating all features as new",r);const i=new Date,s="undefined"!=typeof window?window.location.pathname:"",d=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()))&&i<t},p=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(s)}return!0},y=t.filter((e=>{var t;return!((null===(t=null==n?void 0:n.viewedFeatures)||void 0===t?void 0:t[e.id])||!1)&&l(e)&&d(e)&&p(e)})),w=y.filter((e=>"Major"===e.featureUpdateType)),v=y.filter((e=>"Minor"===e.featureUpdateType));f(y),g(w),setTimeout((()=>{m(v)}),2e3)}catch(e){console.error("FeatureAnnouncements: Unexpected error in fetchFeatures",e),h("An unexpected error occurred")}finally{v(!1)}}}))),[c,a,o,l,u]),S=t.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){v(!0),h(null);try{const[e,r]=yield n(t);if(e||!r)return void h("Failed to fetch feature by ID");"Major"===r.featureUpdateType?g([r]):m([r]),f([r])}catch(e){h("An unexpected error occurred while fetching by ID")}finally{v(!1)}}))),[n]),x=t.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!c)return;const[e]=yield i(c,t);e?(console.warn("FeatureAnnouncements: Failed to mark feature as viewed, removing from local state anyway",e),f((e=>e.filter((e=>e.id!==t)))),g((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t))))):(f((e=>e.filter((e=>e.id!==t)))),g((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t)))))}))),[c,i]);return t.useEffect((()=>{if(!s)return void D();const e=s.query.featureId;e?S(e):D()}),[null==s?void 0:s.query,D,S]),{features:d,majorUpdateFeatures:p,minorUpdateFeatures:y,isLoading:w,error:F,markFeatureAsViewed:x,refetch:D}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../modals/styledModal.js"),s=require("../template-preview/helpers/templateMiscHelper.js"),r=require("../template-preview/models/Channels.js"),n=require("../template-preview/models/WhatsAppTemplate.js"),d=require("./context/templateModalContext.js"),u=require("./modalElements/Footer.js"),c=require("./modalElements/TemplateAnalyticsComponent.js"),p=require("./modalElements/TemplateSelectModalContent.js"),m=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=v=>{var C,x,h,E,b,S,f,T;const{selectedTemplate:P,closeDialog:g,showVariableMapping:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../modals/styledModal.js"),s=require("../template-preview/helpers/templateMiscHelper.js"),r=require("../template-preview/models/Channels.js"),n=require("../template-preview/models/WhatsAppTemplate.js"),d=require("./context/templateModalContext.js"),u=require("./modalElements/Footer.js"),c=require("./modalElements/TemplateAnalyticsComponent.js"),p=require("./modalElements/TemplateSelectModalContent.js"),m=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=v=>{var C,x,h,E,b,S,f,T;const{selectedTemplate:P,closeDialog:g,showVariableMapping:j,channel:y,htmlContent:I,templateVariables:L,onTemplateSelect:D,globalPlaceholders:w,showOnlyContent:A,whatsappSpecificPickerMeta:k,zIndex:M,showVariableModal:V,variableList:H,discountCode:N,setDiscountCode:O,onBackPress:q,enabledCustomText:B,variableListForImage:R,showSampleValues:F,disableEditVariable:_,pod:W,extras:Y,pickerConf:$,selectedCarouselProducts:z,disableEditExpiry:Q,cardWidth:U,onDeleteSelectedProducts:G,fileName:J,setFileName:K,hideDeviceContainerInPreview:X,maxCharLimit:Z,onDefaultVariableSelect:ee,skipDefaultVariableContent:te,disableDatePicker:le,disableCopyCode:oe,initialExpiryDateTime:ae,showDiscountCodeExpiryInfo:ie,footerButtonText:se,footerInfoText:re,templateAnalytics:ne}=v;l.useEffect((()=>{he(I)}),[I]);const de=s.determineCardIndex(y),ue=s.isItCarousal(y,P),ce=null==P?void 0:P.isProductCarouselType,[pe,me]=l.useState(y===r.CHANNEL_TYPE.EMAIL||y==r.CHANNEL_TYPE.WEBPUSH||ue?"desktop":"mobile"),[ve,Ce]=l.useState(!1),[xe,he]=l.useState(I),[Ee,be]=l.useState(!1),[Se,fe]=l.useState([]),[Te,Pe]=l.useState({}),[ge,je]=l.useState(P),[ye,Ie]=l.useState([]),[Le,De]=l.useState(null),[we,Ae]=l.useState(!1),[ke,Me]=l.useState(null!=L?L:[]),[Ve,He]=l.useState(!1),[Ne,Oe]=l.useState(ue?(null===(x=null===(C=null==ge?void 0:ge.mapping)||void 0===C?void 0:C.body)||void 0===x?void 0:x.length)?-1:0:-1),[qe,Be]=l.useState([]),[Re,Fe]=l.useState(void 0),_e=l.useRef(null),[We,Ye]=l.useState(!1),[$e,ze]=l.useState(!1),[Qe,Ue]=l.useState(!1),[Ge,Je]=l.useState(!0),[Ke,Xe]=l.useState(!0),[Ze,et]=l.useState({});l.useEffect((()=>{z?Be(z):ce&&Be([])}),[z]),l.useEffect((()=>{var e;if(!we&&ce&&(!z||0===Be.length)){const t=null===(e=null==ge?void 0:ge.components)||void 0===e?void 0:e[de].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:"")}))})),Ie(l),Ae(!0)}}),[we]);const tt=l.useMemo((()=>m.convertPlaceholdersToBikDropdown(w)),[w]);return l.useEffect((()=>{Fe(t.cloneDeep(H))}),[H]),(null==ne?void 0:ne.show)&&Ge&&ne.templateQuality&&Object.values(n.TEMPLATE_QUALITY).find((e=>e===String(ne.templateQuality)))?e.jsxRuntimeExports.jsx(c.TemplateAnalyticsComponent,{headingTitle:null==ge?void 0:ge.label,headingSubtitle:y===r.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(h=null==ge?void 0:ge.category)&&void 0!==h?h:"")} • ${null!==(E=null==ge?void 0:ge.templateCategory)&&void 0!==E?E:""}`:"",templateAnalytics:ne,onClose:()=>{null==g||g(),Je(!1),Xe(!1)},onCancel:()=>{Je(!1),Xe(!1)},onProceed:()=>{Je(!1),Xe(!0)},templateId:(null==ge?void 0:ge.templateId)||""}):e.jsxRuntimeExports.jsx(d.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:Qe,setHideFooterButton:Ue,hideCrossButton:$e,setHideCrossButton:ze,variableList:Re,setVariableList:Fe,variableCallback:Le,setVariableCallback:De,showVariablePicker:ve,setShowVariablePicker:Ce,template:ge,setTemplate:je,device:pe,setDevice:me,display_content:xe,setDisplayContent:he,originalVariableList:ke,setOriginalVariableList:Me,isError:Ee,setIsError:be,channel:y,globalNormalizedPlaceholders:tt,templateSelectionTriggered:Ve,setTemplateSelectionTriggered:He,enabledCustomText:B,disableEditVariable:_,pod:W,extras:Y,isWhatsappCarousel:ue,selectedCarouselIndex:Ne,setSelectedCarouselIndex:Oe,isProductCarouselType:ce,templateErrorIndexes:Te,cardCount:ue?null===(S=null===(b=P.components)||void 0===b?void 0:b[de].cards)||void 0===S?void 0:S.length:void 0,errorIndexes:Se,setErrorIndexes:fe,pickerConf:$,carouselProducts:qe,setCarouselProducts:Be,disableEditExpiry:Q,cardWidth:U,cardImages:ye,onDeleteSelectedProducts:G,hideDeviceContainerInPreview:X,sliderRef:_e,isCarouselHovered:We,setIsCarouselHovered:Ye,maxCharLimit:Z,ctaOptionsErrors:Ze,setCtaOptionsErrors:et,onDefaultVariableSelect:ee,disableDatePicker:le,disableCopyCode:oe,initialExpiryDateTime:ae,showDiscountCodeExpiryInfo:ie,cardIndex:de}},{children:A?e.jsxRuntimeExports.jsx(p.default,{variableListFromProps:H,channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxRuntimeExports.jsxs(i.StyledModal,Object.assign({hideCrossButton:$e,zIndex:M,centralContainerStyles:{width:ue?900:y===r.CHANNEL_TYPE.EMAIL&&j?1e3:800},open:Ke,onClose:()=>{Xe(!1),null==g||g()},headingTitle:null==ge?void 0:ge.label,headingSubtitle:y===r.CHANNEL_TYPE.WHATSAPP||s.isRCSChannel(y)?`${o.default.capitaliseFirstLetterOfString(null!==(f=null==ge?void 0:ge.category)&&void 0!==f?f:"")} • ${null!==(T=null==ge?void 0:ge.templateCategory)&&void 0!==T?T:""}`:"",onBackPress:()=>{if(null==ne?void 0:ne.show)return Je(!0),void Xe(!1);null==q||q()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsxRuntimeExports.jsx(p.default,{variableListFromProps:H,showSampleValues:F,showVariableMapping:j,channel:y,whatsappSpecificPickerMeta:k,showVariableModal:V,discountCode:N,setDiscountCode:O,variableListForImage:R&&(null==R?void 0:R.length)>0?R:Re,fileName:J,setFileName:e=>{null==K||K(e)},skipDefaultVariableContent:te}),D?e.jsxRuntimeExports.jsx(u.default,{isWhatsappCarousel:null!=ue&&ue,onSelect:function(){var e;if((null==qe?void 0:qe.length)<1&&ce)return void be(!0);if(Object.keys(Ze).length>0&&W!==n.POD.CHATBOT)return void be(!0);const t=null==D?void 0:D(ge,ke,null!=xe?xe:"",qe);Pe(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)&&fe(t.errorIndexes),(null==t?void 0:t.error)&&be(!!(null==t?void 0:t.error))):He(!0)},footerButtonText:se,footerInfoText:re}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})]}))}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
|
|
2
2
|
export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare const RightPanelTemplateAnalytics: (props: {
|
|
4
4
|
analyticsData: TemplateAnalyticsDataI;
|
|
5
5
|
skipTitle?: boolean;
|
|
6
|
-
fullWidth?: boolean;
|
|
7
6
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export declare const AnalyticsItem: (props: {
|
|
9
8
|
icon: React.ElementType;
|
|
@@ -11,6 +10,3 @@ export declare const AnalyticsItem: (props: {
|
|
|
11
10
|
value: number;
|
|
12
11
|
percentValue?: number;
|
|
13
12
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare const QualityTimelineChart: (props: {
|
|
15
|
-
qualityTimeLine: TEMPLATE_QUALITY[];
|
|
16
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/alert_triangle.svg.js"),s=require("../../../assets/icons/click.svg.js"),n=require("react"),i=require("../../modals/styledModal.js"),l=require("../../tag/Tag.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),c=require("../styles/TemplateAnalyticsStyles.js"),x=require("../utils/TemplateConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{const{analyticsData:n,skipTitle:i}=t;return e.jsxRuntimeExports.jsxs(c.RightPanelContainer,{children:[i?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}):e.jsxRuntimeExports.jsx(r.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-3"},{children:x.ANALYTICS_ENGAGEMENT_MAP.map(((t,s)=>e.jsxRuntimeExports.jsx(m,{icon:t.icon,title:t.title,value:n[t.valName]||0,percentValue:t.percentValName?n[t.percentValName]:null},s)))})),(null==n?void 0:n.clickAnalytics)&&Object.keys(null==n?void 0:n.clickAnalytics)&&Object.keys(null==n?void 0:n.clickAnalytics).length?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(r.TitleSmall,Object.assign({color:o.COLORS.content.secondary},{children:"Clicked"})),e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(n.clickAnalytics).map(((t,n)=>{let[i,l]=t;return e.jsxRuntimeExports.jsx(m,{icon:s.default,title:i,value:l.totalClicks||0,percentValue:l.clickPercentage},n)}))}))]}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})]})},m=t=>{const{icon:s,title:n,value:i,percentValue:a}=t;return e.jsxRuntimeExports.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsxRuntimeExports.jsx(s,{width:"16px",height:"16px",color:o.COLORS.background.brand})})),e.jsxRuntimeExports.jsx(r.Caption,{children:n})]})),e.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[a?e.jsxRuntimeExports.jsx(l.Tag,{tagText:`${a}%`||0,theme:"light",type:"neutral"}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),e.jsxRuntimeExports.jsx(c.CustomTitleMedium,{children:i})]}))]}))};exports.AnalyticsItem=m,exports.RightPanelTemplateAnalytics=j,exports.TemplateAnalyticsComponent=s=>{const{templateAnalytics:l,onClose:m,onProceed:p,onCancel:d,headingTitle:y,headingSubtitle:E,templateId:T}=s,{templateQuality:g=a.TEMPLATE_QUALITY.GREEN,fetchAnalytics:h}=l||{},{icon:R,title:b,subline:A,sublineTextType:C,sublineColor:O}=x.TEMPLATE_QUALITY_MAP[g||a.TEMPLATE_QUALITY.GREEN],[k,v]=n.useState({}),[S,N]=n.useState(!0);n.useEffect((()=>{null==h||h(T||"").then((e=>{e.analytics&&v(e.analytics),N(!1)}))}),[]);const L=n.useMemo((()=>g===a.TEMPLATE_QUALITY.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:S},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==m||m(),null==d||d()},disabled:S}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==m||m(),null==d||d()},disabled:S},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:S}}),[g,S]),P=C||r.Caption;return e.jsxRuntimeExports.jsx(i.StyledModal,Object.assign({open:!0,headingTitle:y,tintedHeader:!0,modalHeaderStyles:{backgroundColor:o.COLORS.surface.subdued},onBackPress:()=>{null==m||m()},headingSubtitle:E,footerShadow:!0,primaryButton:L.primaryButton,secondaryButton:L.secondaryButton,onClose:()=>{null==m||m()},width:"700px"},{children:e.jsxRuntimeExports.jsxs(c.TemplateContainer,{children:[e.jsxRuntimeExports.jsx(c.LeftPanelContainer,{children:e.jsxRuntimeExports.jsxs("div",Object.assign({className:"inside--container"},{children:[R&&e.jsxRuntimeExports.jsx("div",Object.assign({className:"icon--container"},{children:e.jsxRuntimeExports.jsx(t.default,{width:40,height:40,color:o.COLORS.content.warning})})),b&&e.jsxRuntimeExports.jsx(r.TitleRegular,Object.assign({style:{textAlign:"center"}},{children:b})),e.jsxRuntimeExports.jsx(P,Object.assign({style:{textAlign:"center",color:O||o.COLORS.content.primary}},{children:A}))]}))}),S?e.jsxRuntimeExports.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsxRuntimeExports.jsx(j,{analyticsData:k,skipTitle:g==a.TEMPLATE_QUALITY.GREEN})]})}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("../../../node_modules/react/jsx-runtime.js"),e=require("../../shimmer/ShimmerComponent/BikShimmer.js"),t=require("../styles/TemplateAnalyticsStyles.js");const i=()=>s.jsxRuntimeExports.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[s.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),s.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=x=>{const{skipTitleShimmer:r
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("../../../node_modules/react/jsx-runtime.js"),e=require("../../shimmer/ShimmerComponent/BikShimmer.js"),t=require("../styles/TemplateAnalyticsStyles.js");const i=()=>s.jsxRuntimeExports.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[s.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),s.jsxRuntimeExports.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=x=>{const{skipTitleShimmer:r}=x;return s.jsxRuntimeExports.jsxs(t.RightPanelContainer,{children:[s.jsxRuntimeExports.jsx("div",{children:r?s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{}):s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),s.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>s.jsxRuntimeExports.jsx(i,{},e)))})),s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{children:s.jsxRuntimeExports.jsx(e.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),s.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-3"},{children:s.jsxRuntimeExports.jsx(i,{})}))]})]})};
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
export declare const TemplateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
-
fullWidth?: boolean | undefined;
|
|
4
|
-
}, never>;
|
|
2
|
+
export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
3
|
export declare const LeftPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
4
|
export declare const CustomTitleMedium: import("styled-components").StyledComponent<"div", any, {
|
|
7
5
|
numberOfLines?: number | undefined;
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
padding: 16px 0px;
|
|
4
4
|
`,o=r.default.div`
|
|
5
|
-
max-width:
|
|
5
|
+
max-width: 450px;
|
|
6
6
|
height: 456px;
|
|
7
7
|
min-width: 358px;
|
|
8
8
|
overflow-y: auto;
|
|
9
|
-
border-left: ${
|
|
9
|
+
border-left: ${i.COLORS.stroke.primary} 1px solid;
|
|
10
10
|
padding: 0px 23px 32px 23px;
|
|
11
11
|
gap: 16px;
|
|
12
|
-
${e=>e.fullWidth&&"flex: 1;"}
|
|
13
12
|
.each--analytics--container {
|
|
14
13
|
border: 1px solid ${i.COLORS.background.inactive};
|
|
15
14
|
border-radius: 8px;
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
.align--center {
|
|
33
32
|
align-items: center;
|
|
34
33
|
}
|
|
35
|
-
`,
|
|
34
|
+
`,p=r.default.div`
|
|
36
35
|
padding: 0px 23px 32px 23px;
|
|
37
36
|
flex: 1;
|
|
38
37
|
height: 456px;
|
|
@@ -56,9 +55,9 @@
|
|
|
56
55
|
align-items: center;
|
|
57
56
|
justify-content: center;
|
|
58
57
|
}
|
|
59
|
-
`,
|
|
58
|
+
`,d=r.default(t.TitleMedium)`
|
|
60
59
|
white-space: nowrap;
|
|
61
60
|
max-width: 161px;
|
|
62
61
|
overflow: hidden;
|
|
63
62
|
text-overflow: ellipsis;
|
|
64
|
-
`;exports.CustomTitleMedium=
|
|
63
|
+
`;exports.CustomTitleMedium=d,exports.LeftPanelContainer=p,exports.RightPanelContainer=o,exports.TemplateContainer=a;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const TEMPLATE_QUALITY_MAP: {
|
|
3
3
|
YELLOW: {
|
|
4
|
-
|
|
4
|
+
icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
5
5
|
title: string;
|
|
6
6
|
sublineTextType: import("styled-components").StyledComponent<"div", any, {
|
|
7
7
|
numberOfLines?: number | undefined;
|
|
@@ -11,7 +11,7 @@ export declare const TEMPLATE_QUALITY_MAP: {
|
|
|
11
11
|
subline: string;
|
|
12
12
|
};
|
|
13
13
|
RED: {
|
|
14
|
-
|
|
14
|
+
icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
15
15
|
title: string;
|
|
16
16
|
sublineTextType: import("styled-components").StyledComponent<"div", any, {
|
|
17
17
|
numberOfLines?: number | undefined;
|
|
@@ -21,17 +21,7 @@ export declare const TEMPLATE_QUALITY_MAP: {
|
|
|
21
21
|
subline: string;
|
|
22
22
|
};
|
|
23
23
|
GREEN: {
|
|
24
|
-
|
|
25
|
-
title: string;
|
|
26
|
-
sublineTextType: import("styled-components").StyledComponent<"div", any, {
|
|
27
|
-
numberOfLines?: number | undefined;
|
|
28
|
-
color?: string | undefined;
|
|
29
|
-
}, never>;
|
|
30
|
-
sublineColor: string;
|
|
31
|
-
subline: string;
|
|
32
|
-
};
|
|
33
|
-
UNKNOWN: {
|
|
34
|
-
Icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
24
|
+
icon: string;
|
|
35
25
|
title: string;
|
|
36
26
|
sublineTextType: import("styled-components").StyledComponent<"div", any, {
|
|
37
27
|
numberOfLines?: number | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../assets/icons/alert_triangle.svg.js"),t=require("../../../assets/icons/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../assets/icons/alert_triangle.svg.js"),t=require("../../../assets/icons/send_template.svg.js"),a=require("../../../assets/icons/tick.svg.js"),r=require("../../../assets/icons/tick_double.svg.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var s=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var l=require("../../TypographyStyle.js");const n={[s.TEMPLATE_QUALITY.YELLOW]:{icon:e.default,title:"Medium quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.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"},[s.TEMPLATE_QUALITY.RED]:{icon:e.default,title:"Low quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.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"},[s.TEMPLATE_QUALITY.GREEN]:{icon:"",title:"",sublineTextType:l.TitleSmall,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."}},o=[{title:"Sent",icon:t.default,valName:"totalSent"},{title:"Delivered",icon:a.default,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:r.default,valName:"totalReads",percentValName:"readPercentage"}];exports.ANALYTICS_ENGAGEMENT_MAP=o,exports.TEMPLATE_QUALITY_MAP=n;
|
|
@@ -210,8 +210,7 @@ export type WhatsappPreviewButtonType = {
|
|
|
210
210
|
export declare enum TEMPLATE_QUALITY {
|
|
211
211
|
GREEN = "GREEN",
|
|
212
212
|
YELLOW = "YELLOW",
|
|
213
|
-
RED = "RED"
|
|
214
|
-
UNKNOWN = "UNKNOWN"
|
|
213
|
+
RED = "RED"
|
|
215
214
|
}
|
|
216
215
|
export type WhatsappMeta = {
|
|
217
216
|
containerStyle?: React.CSSProperties | undefined;
|
|
@@ -306,7 +305,6 @@ export type TemplateAnalyticsI = {
|
|
|
306
305
|
fetchAnalytics?: (templateId: string) => Promise<TemplateAnalyticsResponseI>;
|
|
307
306
|
show?: boolean;
|
|
308
307
|
templateQuality?: TEMPLATE_QUALITY;
|
|
309
|
-
data?: TemplateAnalyticsDataI;
|
|
310
308
|
};
|
|
311
309
|
export type TemplateAnalyticsResponseI = {
|
|
312
310
|
success: boolean;
|
|
@@ -324,9 +322,6 @@ export interface TemplateAnalyticsDataI {
|
|
|
324
322
|
clickPercentage: number;
|
|
325
323
|
};
|
|
326
324
|
};
|
|
327
|
-
performance: {
|
|
328
|
-
qualityTimeLine: TEMPLATE_QUALITY[];
|
|
329
|
-
};
|
|
330
325
|
}
|
|
331
326
|
export interface TemplateAnalyticsComponentI {
|
|
332
327
|
templateAnalytics?: TemplateAnalyticsI;
|
|
@@ -336,5 +331,4 @@ export interface TemplateAnalyticsComponentI {
|
|
|
336
331
|
onCancel?: () => void;
|
|
337
332
|
headingTitle?: string;
|
|
338
333
|
headingSubtitle?: string;
|
|
339
|
-
analyticsData?: TemplateAnalyticsDataI;
|
|
340
334
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var E,T,
|
|
1
|
+
"use strict";var E,T,O;Object.defineProperty(exports,"__esModule",{value:!0}),exports.TEMPLATE_QUALITY=void 0,(E=exports.TEMPLATE_QUALITY||(exports.TEMPLATE_QUALITY={})).GREEN="GREEN",E.YELLOW="YELLOW",E.RED="RED",exports.BUTTON_TYPE=void 0,(T=exports.BUTTON_TYPE||(exports.BUTTON_TYPE={})).QUICK_REPLY="QUICK_REPLY",T.URL="URL",T.PHONE_NUMBER="PHONE_NUMBER",T.COPY_CODE="COPY_CODE",exports.POD=void 0,(O=exports.POD||(exports.POD={})).CHATBOT="CHATBOT",O.GROWTH="GROWTH",O.CAMPAIGN="CAMPAIGN",O.CRM="CRM",O.INTEGRATIONS="INTEGRATIONS",O.OPENAI="OPENAI",O.DM="DM",O.FRONTEND="FRONTEND";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { WhatsNewContent } from './WhatsNew.types';
|
|
3
|
+
interface WhatsNewProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
tooltip?: string;
|
|
6
|
+
searchPlaceholder?: string;
|
|
7
|
+
emptyStateTitle?: string;
|
|
8
|
+
emptyStateDescription?: string;
|
|
9
|
+
noResultsText?: string;
|
|
10
|
+
width?: string;
|
|
11
|
+
onContentClick?: (content: WhatsNewContent) => void;
|
|
12
|
+
renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
|
|
13
|
+
buttonTestId?: string;
|
|
14
|
+
iconWidth?: number;
|
|
15
|
+
iconHeight?: number;
|
|
16
|
+
}
|
|
17
|
+
export declare const WhatsNew: React.FC<WhatsNewProps>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("./WhatsNewButton.js"),s=require("./WhatsNewPanel.js"),o=require("./WhatsNewProvider.js");exports.WhatsNew=r=>{let{title:i="What's new",tooltip:a="What's new",searchPlaceholder:u="Search posts",emptyStateTitle:h="Nothing new!",emptyStateDescription:l="There are no new updates or features at the moment. Check back soon!",noResultsText:c="Sorry, no results found.",width:d="480px",onContentClick:p,renderCustomContent:w,buttonTestId:x="whats-new-button",iconWidth:C=32,iconHeight:m=32}=r;const[j,W]=t.useState(!1),{whatsNewContent:N,isLoading:g,newContentCount:S}=o.useWhatsNewContext();return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(n.WhatsNewButton,{onClick:()=>W(!0),newContentCount:S,isOpen:j,isLoading:g,tooltip:a,testId:x,iconWidth:C,iconHeight:m}),e.jsxRuntimeExports.jsx(s.WhatsNewPanel,{isOpen:j,onClose:()=>W(!1),content:N,isLoading:g,title:i,searchPlaceholder:u,emptyStateTitle:h,emptyStateDescription:l,noResultsText:c,width:d,onContentClick:e=>{p&&p(e)},renderCustomContent:w})]})};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const WhatsNewIconContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
count?: number | undefined;
|
|
3
|
+
}, never>;
|
|
4
|
+
export declare const WhatsNewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const MainCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const BackgroundImageContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
imageUrl: string;
|
|
9
|
+
height?: string | undefined;
|
|
10
|
+
width?: string | undefined;
|
|
11
|
+
}, never>;
|