@bikdotai/bik-component-library 0.0.720 → 0.0.721-beta.1
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/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- 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/whats-new/WhatsNew.d.ts +23 -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 +185 -0
- package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +58 -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/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- 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/whats-new/WhatsNew.d.ts +23 -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 +185 -0
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +58 -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
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -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:!1,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:u,zIndex:1e4,width:"auto",arrowColor:"#212121"},overlay:{backgroundColor:"rgba(0, 0, 0, 0.5)"},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:!1,disableCloseOnEsc:!1,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"),t=require("react");const r=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value};exports.default=n=>{let{feature:o,currentIndex:s,totalFeatures:i,onSkip:l,onExplore:a,onPrevious:c,onNext:x}=n;const[p,u]=t.useState(!1),d=e=>{u(!0),setTimeout((()=>{e()}),400)};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",transform:p?"scale(0.8)":"scale(1)",opacity:p?0:1,transition:"transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)"}},{children:[e.jsxRuntimeExports.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),d(l)},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:o.displayImage?e.jsxRuntimeExports.jsx("img",{src:o.displayImage,alt:o.title,style:{width:"464px",height:"258px",objectFit:"cover"},onError:e=>{o.image&&(e.target.src=o.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:o.title})),e.jsxRuntimeExports.jsx("div",{style:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},dangerouslySetInnerHTML:{__html:r(o.content||o.body||"")}}),e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx("button",Object.assign({onClick:()=>{d(a)},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:o.buttonText||"Explore the feature"}))})]}),i>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(),d(c)},disabled:0===s,style:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:0===s?"#666":"#fff",fontSize:"20px",cursor:0===s?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},onMouseEnter:e=>{0!==s&&(e.currentTarget.style.color="#FEC02D")},onMouseLeave:e=>{0!==s&&(e.currentTarget.style.color="#fff")}},{children:"‹"})),e.jsxRuntimeExports.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),d(x)},disabled:s===i-1,style:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:s===i-1?"#666":"#fff",fontSize:"20px",cursor:s===i-1?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},onMouseEnter:e=>{s!==i-1&&(e.currentTarget.style.color="#FEC02D")},onMouseLeave:e=>{s!==i-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"),t=require("react");const i=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value};exports.default=s=>{let{feature:n,currentIndex:r,totalFeatures:o,onSkip:x,onExplore:l,onPrevious:a,onNext:p}=s;const[c,d]=t.useState(!1),u=e=>{d(!0),setTimeout((()=>{e()}),400)};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)",transform:c?"scale(0.8)":"scale(1)",opacity:c?0:1,transition:"transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)"}},{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:i(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:()=>u(x),style:{color:"#4B1583",fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"}},{children:"Understood"})),n.productVideo&&e.jsxRuntimeExports.jsx("button",Object.assign({onClick:()=>{u(l)},style:{backgroundColor:"#4B1583",border:"none",color:"#ffffff",borderRadius:"4px",fontSize:"14px",fontWeight:"500",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}},{children:n.buttonText||"Explore the feature"}))]}))]}))]}))})};
|
|
@@ -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}};
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
customIcon?: React.ComponentType<{
|
|
17
|
+
width?: number;
|
|
18
|
+
height?: number;
|
|
19
|
+
color?: string;
|
|
20
|
+
}>;
|
|
21
|
+
}
|
|
22
|
+
export declare const WhatsNew: React.FC<WhatsNewProps>;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../node_modules/react/jsx-runtime.js"),e=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=r=>{let{title:i="What's new",tooltip:a="What's new",searchPlaceholder:u="Search posts",emptyStateTitle:c="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:p,renderCustomContent:w,buttonTestId:x="whats-new-button",iconWidth:m=32,iconHeight:C=32,customIcon:j}=r;const[W,N]=e.useState(!1),{whatsNewContent:g,isLoading:S,newContentCount:y}=s.useWhatsNewContext();return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(n.WhatsNewButton,{onClick:()=>N(!0),newContentCount:y,isOpen:W,isLoading:S,tooltip:a,testId:x,iconWidth:m,iconHeight:C,customIcon:j}),t.jsxRuntimeExports.jsx(o.WhatsNewPanel,{isOpen:W,onClose:()=>N(!1),content:g,isLoading:S,title:i,searchPlaceholder:u,emptyStateTitle:c,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:t=>{p&&p(t)},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>;
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const r=n.default.div`
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
.main-icon-class {
|
|
6
|
+
padding: 6px;
|
|
7
|
+
border-radius: 32px;
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
transition: background-color 0.2s ease;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.icon-active {
|
|
15
|
+
background: ${t.COLORS.background.brandLight};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.main-icon-class:hover {
|
|
19
|
+
background: ${t.COLORS.background.base};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.notification--count {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
position: absolute;
|
|
25
|
+
right: 6px;
|
|
26
|
+
top: 4px;
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
width: 14px;
|
|
29
|
+
height: 14px;
|
|
30
|
+
background: ${t.COLORS.background.negative.vibrant};
|
|
31
|
+
border: 1.25px solid ${t.COLORS.surface.standard};
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.count--text {
|
|
38
|
+
font-size: 8px;
|
|
39
|
+
line-height: 7.2px;
|
|
40
|
+
font-weight: 400;
|
|
41
|
+
color: ${t.COLORS.surface.standard};
|
|
42
|
+
}
|
|
43
|
+
`,a=n.default.div`
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
height: 100%;
|
|
48
|
+
max-height: calc(100vh - 60px);
|
|
49
|
+
|
|
50
|
+
&::-webkit-scrollbar {
|
|
51
|
+
display: block;
|
|
52
|
+
width: 6px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
::-webkit-scrollbar-thumb {
|
|
56
|
+
background: ${t.COLORS.content.inactive};
|
|
57
|
+
border-radius: 3px;
|
|
58
|
+
min-height: 30px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.icon--wrapper {
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
width: 64px;
|
|
66
|
+
height: 64px;
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
background: ${t.COLORS.background.base};
|
|
69
|
+
margin-bottom: 16px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.no--data--found {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
height: 300px;
|
|
78
|
+
text-align: center;
|
|
79
|
+
padding: 24px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.text--align {
|
|
83
|
+
text-align: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.scroller {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
gap: 16px;
|
|
90
|
+
padding: 16px 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.full--width {
|
|
94
|
+
width: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.flex {
|
|
98
|
+
display: flex;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.flex--row {
|
|
102
|
+
flex-direction: row;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.flex--column {
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.mt-8 {
|
|
110
|
+
margin-top: 8px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.mt-20 {
|
|
114
|
+
margin-top: 20px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.mt--8 {
|
|
118
|
+
margin-top: 8px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.mt--12 {
|
|
122
|
+
margin-top: 12px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.mb-mt-8 {
|
|
126
|
+
margin-bottom: 8px;
|
|
127
|
+
margin-top: 8px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.padding--16 {
|
|
131
|
+
padding: 16px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.card--desc {
|
|
135
|
+
max-height: 200px;
|
|
136
|
+
overflow-y: auto;
|
|
137
|
+
font-size: 12px;
|
|
138
|
+
color: ${t.COLORS.content.secondary};
|
|
139
|
+
|
|
140
|
+
p {
|
|
141
|
+
margin-bottom: 0px;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.created--at {
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 4px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.new--content--tag {
|
|
151
|
+
padding: 2px 6px;
|
|
152
|
+
gap: 4px;
|
|
153
|
+
border-radius: 14px;
|
|
154
|
+
background: ${t.COLORS.background.warning.vibrant};
|
|
155
|
+
display: flex;
|
|
156
|
+
justify-content: center;
|
|
157
|
+
align-items: center;
|
|
158
|
+
margin-right: 8px;
|
|
159
|
+
}
|
|
160
|
+
`,o=n.default.div`
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
height: 100%;
|
|
164
|
+
`,d=n.default.div`
|
|
165
|
+
background: ${t.COLORS.surface.standard};
|
|
166
|
+
border-radius: 8px;
|
|
167
|
+
border: 1px solid ${t.COLORS.stroke.primary};
|
|
168
|
+
padding: 16px;
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
gap: 8px;
|
|
172
|
+
transition: all 0.2s ease;
|
|
173
|
+
|
|
174
|
+
&:hover {
|
|
175
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
176
|
+
}
|
|
177
|
+
`,p=n.default.div`
|
|
178
|
+
background-image: url(${e=>e.imageUrl});
|
|
179
|
+
background-size: cover;
|
|
180
|
+
background-position: center;
|
|
181
|
+
background-repeat: no-repeat;
|
|
182
|
+
height: ${e=>e.height||"200px"};
|
|
183
|
+
width: ${e=>e.width||"100%"};
|
|
184
|
+
border-radius: 4px;
|
|
185
|
+
`;exports.BackgroundImageContainer=p,exports.MainCardContainer=d,exports.MainContainer=o,exports.WhatsNewIconContainer=r,exports.WhatsNewWrapper=a;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface WhatsNewContent {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
body: string;
|
|
6
|
+
content: string;
|
|
7
|
+
image: string;
|
|
8
|
+
buttonText: string;
|
|
9
|
+
redirectUrl: string;
|
|
10
|
+
productVideo?: string;
|
|
11
|
+
docId?: string;
|
|
12
|
+
createdAt: any;
|
|
13
|
+
module: string[];
|
|
14
|
+
visibility: boolean;
|
|
15
|
+
}
|
|
16
|
+
export interface WhatsNewProviderProps {
|
|
17
|
+
children: React.ReactNode;
|
|
18
|
+
fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
|
|
19
|
+
markContentAsViewed?: (contentId: string) => Promise<void>;
|
|
20
|
+
module?: string;
|
|
21
|
+
isLoading?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export interface WhatsNewButtonProps {
|
|
24
|
+
onClick?: () => void;
|
|
25
|
+
newContentCount?: number;
|
|
26
|
+
isOpen?: boolean;
|
|
27
|
+
isLoading?: boolean;
|
|
28
|
+
tooltip?: string;
|
|
29
|
+
testId?: string;
|
|
30
|
+
iconWidth?: number;
|
|
31
|
+
iconHeight?: number;
|
|
32
|
+
customIcon?: React.ComponentType<{
|
|
33
|
+
width?: number;
|
|
34
|
+
height?: number;
|
|
35
|
+
color?: string;
|
|
36
|
+
}>;
|
|
37
|
+
}
|
|
38
|
+
export interface WhatsNewPanelProps {
|
|
39
|
+
isOpen: boolean;
|
|
40
|
+
onClose: () => void;
|
|
41
|
+
content: WhatsNewContent[];
|
|
42
|
+
isLoading?: boolean;
|
|
43
|
+
title?: string;
|
|
44
|
+
searchPlaceholder?: string;
|
|
45
|
+
emptyStateTitle?: string;
|
|
46
|
+
emptyStateDescription?: string;
|
|
47
|
+
noResultsText?: string;
|
|
48
|
+
width?: string;
|
|
49
|
+
onContentClick?: (content: WhatsNewContent) => void;
|
|
50
|
+
renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
|
|
51
|
+
}
|
|
52
|
+
export interface WhatsNewHookReturn {
|
|
53
|
+
whatsNewContent: WhatsNewContent[];
|
|
54
|
+
isLoading: boolean;
|
|
55
|
+
newContentCount: number;
|
|
56
|
+
markAsViewed: (contentId: string) => Promise<void>;
|
|
57
|
+
refreshContent: () => Promise<void>;
|
|
58
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../node_modules/react/jsx-runtime.js"),s=require("../../constants/Theme.js"),e=require("../tooltips/Tooltip.js"),n=require("./WhatsNew.styles.js");const i=s=>{let{width:e=32,height:n=32}=s;return t.jsxRuntimeExports.jsxs("svg",Object.assign({width:e,height:n,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsxRuntimeExports.jsxs("g",Object.assign({clipPath:"url(#clip0_4309_13422)"},{children:[t.jsxRuntimeExports.jsx("path",{d:"M22.1797 15.3052L15.4548 24.4022C15.3815 24.5014 15.3339 24.6172 15.316 24.7392C15.2982 24.8613 15.3108 24.9859 15.3526 25.1019L15.7733 26.2675C15.8141 26.3806 15.8815 26.4822 15.9698 26.5638C16.0581 26.6454 16.1647 26.7046 16.2806 26.7364C16.3966 26.7682 16.5185 26.7716 16.636 26.7464C16.7536 26.7212 16.8634 26.6681 16.9561 26.5916L20.7368 23.5654",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsxRuntimeExports.jsx("path",{d:"M6.4457 17.6642C6.36082 17.7791 6.31051 17.9158 6.30068 18.0583C6.29085 18.2008 6.32192 18.3431 6.39022 18.4686C6.45853 18.594 6.56123 18.6973 6.68626 18.7664C6.81128 18.8355 6.95343 18.8674 7.09598 18.8584C13.4962 18.4646 17.7214 21.3363 17.7214 21.3363L20.7369 23.5654C21.5366 24.1567 22.5385 24.406 23.5221 24.2585C24.5056 24.111 25.3903 23.5789 25.9816 22.7791C26.5728 21.9794 26.8221 20.9775 26.6746 19.9939C26.5272 19.0104 25.995 18.1257 25.1952 17.5344L22.1797 15.3053C22.1797 15.3053 18.1953 12.1079 16.6943 5.87443C16.6611 5.7356 16.5889 5.60913 16.4863 5.50988C16.3837 5.41062 16.2549 5.34272 16.1151 5.31413C15.9752 5.28554 15.8301 5.29746 15.6968 5.34849C15.5635 5.39952 15.4475 5.48754 15.3624 5.6022L6.4457 17.6642Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsxRuntimeExports.jsx("path",{d:"M7.69175 12.0819L5.24902 11.3518",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsxRuntimeExports.jsx("path",{d:"M10.9423 8.35748L9.88867 6.03589",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsxRuntimeExports.jsx("path",{d:"M8.91955 9.68574L5.66699 6.87134",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})),t.jsxRuntimeExports.jsx("defs",{children:t.jsxRuntimeExports.jsx("clipPath",Object.assign({id:"clip0_4309_13422"},{children:t.jsxRuntimeExports.jsx("rect",{width:"24",height:"24",fill:"white",transform:"translate(4 4)"})}))})]}))};exports.WhatsNewButton=r=>{let{onClick:o,newContentCount:x=0,isOpen:c=!1,isLoading:d=!1,tooltip:a="What's new",testId:j="whats-new-button",iconWidth:l=32,iconHeight:u=32,customIcon:h}=r;return d?t.jsxRuntimeExports.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsxRuntimeExports.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsxRuntimeExports.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsxRuntimeExports.jsx(n.WhatsNewIconContainer,Object.assign({count:x},{children:t.jsxRuntimeExports.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.secondary},onClick:o,"data-testid":j},{children:[t.jsxRuntimeExports.jsx(e.Tooltip,Object.assign({body:a},{children:t.jsxRuntimeExports.jsx("div",{children:h?t.jsxRuntimeExports.jsx(h,{width:l,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.secondary}):t.jsxRuntimeExports.jsx(i,{width:l,height:u})})})),x>0&&t.jsxRuntimeExports.jsx("div",Object.assign({className:"notification--count"},{children:t.jsxRuntimeExports.jsx("div",Object.assign({className:"count--text"},{children:x}))}))]}))}))};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("date-fns"),s=require("react"),n=require("../../constants/Theme.js"),r=require("../button/Button.js"),o=require("../feature-announcements/VideoModal.js"),i=require("../searchBar/searchBar.js"),a=require("../side-modal/SideModal.js"),l=require("../TypographyStyle.js"),d=require("./WhatsNew.styles.js");const c=t=>{let{width:s=32,height:n=32}=t;return e.jsxRuntimeExports.jsx("svg",Object.assign({width:s,height:n,viewBox:"0 0 24 24",fill:"none"},{children:e.jsxRuntimeExports.jsx("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))},x=t=>{let{width:s=32,height:n=32}=t;return e.jsxRuntimeExports.jsxs("svg",Object.assign({width:s,height:n,viewBox:"0 0 32 32",fill:"none"},{children:[e.jsxRuntimeExports.jsx("path",{d:"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2zm0 25c-6.065 0-11-4.935-11-11S9.935 5 16 5s11 4.935 11 11-4.935 11-11 11z",fill:"currentColor"}),e.jsxRuntimeExports.jsx("path",{d:"M16 10.5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zM15 15h2v8h-2v-8z",fill:"currentColor"})]}))};exports.WhatsNewPanel=u=>{let{isOpen:j,onClose:m,content:h,isLoading:p=!1,title:g="What's new on BIK",searchPlaceholder:R="Search posts",emptyStateTitle:C="Nothing new!",emptyStateDescription:E="There are no new updates or features at the moment. Check back soon!",noResultsText:w="Sorry, no results found.",width:b="480px",onContentClick:O,renderCustomContent:y}=u;const[f,v]=s.useState(""),[S,M]=s.useState(!1),[N,k]=s.useState("");console.log("WhatsNewPanel render - isVideoModalOpen:",S,"videoUrl:",N);const L=e=>{if(!e.createdAt)return!1;const s=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,s)<7},B=s.useMemo((()=>{if(!f.trim())return h;const e=f.toLowerCase();return h.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[h,f]),T=0===h.length,q=0===B.length;return j?e.jsxRuntimeExports.jsxs(a.SideModal,Object.assign({width:b,onClose:m,header:"",headerCustomComponent:e.jsxRuntimeExports.jsx(l.TitleMedium,Object.assign({color:n.COLORS.background.inverse},{children:g})),headerStyle:{background:n.COLORS.background.brandLight},hideFooter:!0},{children:[e.jsxRuntimeExports.jsxs(d.MainContainer,{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-8"},{children:e.jsxRuntimeExports.jsx(i.SearchBar,{width:"100%",isEnabled:!T,onChange:e=>{v(e)},onEnter:e=>{v(e)},placeholder:R,variant:"default",searchValue:f,onClickCross:()=>{v("")}})})),e.jsxRuntimeExports.jsx(d.WhatsNewWrapper,{children:T||q?e.jsxRuntimeExports.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"icon--wrapper"},{children:T?e.jsxRuntimeExports.jsx(x,{width:32,height:32}):e.jsxRuntimeExports.jsx(c,{width:32,height:32})})),T?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(l.TitleRegular,{children:C}),e.jsxRuntimeExports.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:E}))]}):q?e.jsxRuntimeExports.jsx(l.BodyPrimary,Object.assign({color:n.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:w})):null]})):e.jsxRuntimeExports.jsx("div",Object.assign({className:"scroller"},{children:B.map(((s,o)=>y?y(s):e.jsxRuntimeExports.jsxs(d.MainCardContainer,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsxRuntimeExports.jsx(d.BackgroundImageContainer,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-20 full--width"},{children:e.jsxRuntimeExports.jsxs("div",Object.assign({className:"created--at flex flex--row"},{children:[L(s)?e.jsxRuntimeExports.jsx("div",Object.assign({className:"new--content--tag"},{children:e.jsxRuntimeExports.jsx(l.Caption,{children:"New"})})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),e.jsxRuntimeExports.jsx(l.Caption,Object.assign({style:{color:n.COLORS.content.placeholder}},{children:s.createdAt?t.format(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt--8"},{children:e.jsxRuntimeExports.jsx(l.TitleSmall,{children:s.title})})),e.jsxRuntimeExports.jsx("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e.jsxRuntimeExports.jsx("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e.jsxRuntimeExports.jsx(r.Button,{buttonText:s.buttonText||"Explore the feature",onClick:()=>(e=>{console.log("handleContentClick called with:",e),console.log("productVideo:",e.productVideo),console.log("redirectUrl:",e.redirectUrl),console.log("onContentClick:",O),e.productVideo?(console.log("Setting video URL:",e.productVideo),k(e.productVideo),M(!0),console.log("Video modal state set to true")):e.redirectUrl&&(console.log("Opening redirectUrl:",e.redirectUrl),window.open(e.redirectUrl,"_blank")),O&&(console.log("Calling onContentClick for analytics"),O(e))})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${o}`)))}))})]}),e.jsxRuntimeExports.jsx(o.VideoModal,{isOpen:S,videoUrl:N,onClose:()=>{console.log("Closing video modal"),M(!1)}})]})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),r=require("./useWhatsNew.js");const s=t.createContext(null);exports.WhatsNewProvider=t=>{let{children:n,fetchWhatsNewContent:o,markContentAsViewed:u,module:a}=t;const i=r.useWhatsNew({fetchWhatsNewContent:o,markContentAsViewed:u,module:a});return e.jsxRuntimeExports.jsx(s.Provider,Object.assign({value:i},{children:n}))},exports.useWhatsNewContext=()=>{const e=t.useContext(s);if(!e)throw new Error("useWhatsNewContext must be used within a WhatsNewProvider");return e};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { WhatsNewContent, WhatsNewHookReturn } from './WhatsNew.types';
|
|
2
|
+
interface UseWhatsNewProps {
|
|
3
|
+
fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
|
|
4
|
+
markContentAsViewed?: (contentId: string) => Promise<void>;
|
|
5
|
+
module?: string;
|
|
6
|
+
newContentThresholdDays?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const useWhatsNew: ({ fetchWhatsNewContent, markContentAsViewed, module, newContentThresholdDays, }: UseWhatsNewProps) => WhatsNewHookReturn;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("date-fns"),a=require("react");exports.useWhatsNew=o=>{let{fetchWhatsNewContent:r,markContentAsViewed:n,module:i,newContentThresholdDays:s=7}=o;const[d,c]=a.useState([]),[l,u]=a.useState(!0),w=a.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){u(!0);try{const[e,t]=yield r();if(e)console.error("Failed to fetch what's new content:",e),c([]);else if(t){let e=t;i&&(e=t.filter((e=>Array.isArray(e.module)?e.module.includes(i):e.module===i))),e.sort(((e,t)=>{var a,o;const r=(null===(a=e.createdAt)||void 0===a?void 0:a.toDate)?e.createdAt.toDate():new Date(e.createdAt);return((null===(o=t.createdAt)||void 0===o?void 0:o.toDate)?t.createdAt.toDate():new Date(t.createdAt)).getTime()-r.getTime()})),c(e)}else c([])}catch(e){console.error("Failed to fetch what's new content:",e),c([])}finally{u(!1)}}))),[r,i]);a.useEffect((()=>{w()}),[w]);const f=a.useCallback((e=>{if(!e.createdAt)return!1;const a=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,a)<s}),[s]),v=d.reduce(((e,t)=>f(t)?e+1:e),0);return{whatsNewContent:d,isLoading:l,newContentCount:v,markAsViewed:a.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){if(n)try{yield n(t)}catch(e){console.warn("Failed to mark content as viewed:",e)}}))),[n]),refreshContent:a.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){yield w()}))),[w])}};
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export * from './components/TablePagination/';
|
|
|
45
45
|
export * from './components/states-modal';
|
|
46
46
|
export * from './components/states';
|
|
47
47
|
export * from './components/WhatsAppTextEditor';
|
|
48
|
+
export * from './components/whats-new';
|
|
48
49
|
export * from './helpers';
|
|
49
50
|
export * from './components/card-selection-modal';
|
|
50
51
|
export * from './components/image-cropper';
|
|
@@ -99,3 +100,4 @@ export * from './components/text-picker';
|
|
|
99
100
|
export * from './components/dot-pulse';
|
|
100
101
|
export * from './components/bik-chatbot';
|
|
101
102
|
export * from './components/banner';
|
|
103
|
+
export * from './components/feature-announcements';
|