@bikdotai/bik-component-library 0.0.721-beta.2 → 0.0.721-beta.21

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.
Files changed (131) hide show
  1. package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
  2. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.d.ts +4 -0
  3. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
  4. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.d.ts +4 -0
  5. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -0
  6. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.d.ts +4 -0
  7. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -0
  8. package/dist/cjs/components/feature-announcements/VideoModal.d.ts +3 -0
  9. package/dist/cjs/components/feature-announcements/VideoModal.js +1 -0
  10. package/dist/cjs/components/feature-announcements/constants/animations.d.ts +27 -0
  11. package/dist/cjs/components/feature-announcements/constants/animations.js +1 -0
  12. package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +56 -0
  13. package/dist/cjs/components/feature-announcements/constants/dimensions.js +1 -0
  14. package/dist/cjs/components/feature-announcements/constants/index.d.ts +19 -0
  15. package/dist/cjs/components/feature-announcements/constants/index.js +1 -0
  16. package/dist/cjs/components/feature-announcements/constants/localStorageKeys.d.ts +18 -0
  17. package/dist/cjs/components/feature-announcements/constants/localStorageKeys.js +1 -0
  18. package/dist/cjs/components/feature-announcements/constants/selectors.d.ts +21 -0
  19. package/dist/cjs/components/feature-announcements/constants/selectors.js +1 -0
  20. package/dist/cjs/components/feature-announcements/constants/zIndex.d.ts +10 -0
  21. package/dist/cjs/components/feature-announcements/constants/zIndex.js +1 -0
  22. package/dist/cjs/components/feature-announcements/hooks/index.d.ts +1 -0
  23. package/dist/cjs/components/feature-announcements/hooks/useFeatureAnnouncements.d.ts +13 -0
  24. package/dist/cjs/components/feature-announcements/hooks/useFeatureAnnouncements.js +1 -0
  25. package/dist/cjs/components/feature-announcements/index.d.ts +7 -0
  26. package/dist/cjs/components/feature-announcements/styles/index.d.ts +4 -0
  27. package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +120 -0
  28. package/dist/cjs/components/feature-announcements/styles/joyride.styles.js +1 -0
  29. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +23 -0
  30. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -0
  31. package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.d.ts +16 -0
  32. package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.js +1 -0
  33. package/dist/cjs/components/feature-announcements/styles/videoModal.styles.d.ts +13 -0
  34. package/dist/cjs/components/feature-announcements/styles/videoModal.styles.js +1 -0
  35. package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +40 -0
  36. package/dist/cjs/components/feature-announcements/types/index.d.ts +4 -0
  37. package/dist/cjs/components/feature-announcements/types/props.types.d.ts +43 -0
  38. package/dist/cjs/components/feature-announcements/types/repository.types.d.ts +11 -0
  39. package/dist/cjs/components/feature-announcements/types/router.types.d.ts +7 -0
  40. package/dist/cjs/components/feature-announcements/useFeatureAnnouncements.d.ts +13 -0
  41. package/dist/cjs/components/feature-announcements/utils/animationHelpers.d.ts +18 -0
  42. package/dist/cjs/components/feature-announcements/utils/animationHelpers.js +1 -0
  43. package/dist/cjs/components/feature-announcements/utils/elementHelpers.d.ts +17 -0
  44. package/dist/cjs/components/feature-announcements/utils/elementHelpers.js +1 -0
  45. package/dist/cjs/components/feature-announcements/utils/htmlHelpers.d.ts +18 -0
  46. package/dist/cjs/components/feature-announcements/utils/htmlHelpers.js +1 -0
  47. package/dist/cjs/components/feature-announcements/utils/index.d.ts +3 -0
  48. package/dist/cjs/components/states/StateComponent.d.ts +0 -1
  49. package/dist/cjs/components/states/StateComponent.js +1 -1
  50. package/dist/cjs/components/whats-new/WhatsNew.d.ts +23 -0
  51. package/dist/cjs/components/whats-new/WhatsNew.js +1 -0
  52. package/dist/cjs/components/whats-new/WhatsNew.styles.d.ts +11 -0
  53. package/dist/cjs/components/whats-new/WhatsNew.styles.js +185 -0
  54. package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +58 -0
  55. package/dist/cjs/components/whats-new/WhatsNewButton.d.ts +3 -0
  56. package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -0
  57. package/dist/cjs/components/whats-new/WhatsNewPanel.d.ts +3 -0
  58. package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -0
  59. package/dist/cjs/components/whats-new/WhatsNewProvider.d.ts +4 -0
  60. package/dist/cjs/components/whats-new/WhatsNewProvider.js +1 -0
  61. package/dist/cjs/components/whats-new/index.d.ts +7 -0
  62. package/dist/cjs/components/whats-new/useWhatsNew.d.ts +9 -0
  63. package/dist/cjs/components/whats-new/useWhatsNew.js +1 -0
  64. package/dist/cjs/index.d.ts +2 -0
  65. package/dist/cjs/index.js +1 -1
  66. package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
  67. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.d.ts +4 -0
  68. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
  69. package/dist/esm/components/feature-announcements/MajorUpdatePopup.d.ts +4 -0
  70. package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -0
  71. package/dist/esm/components/feature-announcements/MinorUpdatePopup.d.ts +4 -0
  72. package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -0
  73. package/dist/esm/components/feature-announcements/VideoModal.d.ts +3 -0
  74. package/dist/esm/components/feature-announcements/VideoModal.js +1 -0
  75. package/dist/esm/components/feature-announcements/constants/animations.d.ts +27 -0
  76. package/dist/esm/components/feature-announcements/constants/animations.js +1 -0
  77. package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +56 -0
  78. package/dist/esm/components/feature-announcements/constants/dimensions.js +1 -0
  79. package/dist/esm/components/feature-announcements/constants/index.d.ts +19 -0
  80. package/dist/esm/components/feature-announcements/constants/index.js +1 -0
  81. package/dist/esm/components/feature-announcements/constants/localStorageKeys.d.ts +18 -0
  82. package/dist/esm/components/feature-announcements/constants/localStorageKeys.js +1 -0
  83. package/dist/esm/components/feature-announcements/constants/selectors.d.ts +21 -0
  84. package/dist/esm/components/feature-announcements/constants/selectors.js +1 -0
  85. package/dist/esm/components/feature-announcements/constants/zIndex.d.ts +10 -0
  86. package/dist/esm/components/feature-announcements/constants/zIndex.js +1 -0
  87. package/dist/esm/components/feature-announcements/hooks/index.d.ts +1 -0
  88. package/dist/esm/components/feature-announcements/hooks/useFeatureAnnouncements.d.ts +13 -0
  89. package/dist/esm/components/feature-announcements/hooks/useFeatureAnnouncements.js +1 -0
  90. package/dist/esm/components/feature-announcements/index.d.ts +7 -0
  91. package/dist/esm/components/feature-announcements/styles/index.d.ts +4 -0
  92. package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +120 -0
  93. package/dist/esm/components/feature-announcements/styles/joyride.styles.js +1 -0
  94. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +23 -0
  95. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -0
  96. package/dist/esm/components/feature-announcements/styles/minorPopup.styles.d.ts +16 -0
  97. package/dist/esm/components/feature-announcements/styles/minorPopup.styles.js +1 -0
  98. package/dist/esm/components/feature-announcements/styles/videoModal.styles.d.ts +13 -0
  99. package/dist/esm/components/feature-announcements/styles/videoModal.styles.js +1 -0
  100. package/dist/esm/components/feature-announcements/types/feature.types.d.ts +40 -0
  101. package/dist/esm/components/feature-announcements/types/index.d.ts +4 -0
  102. package/dist/esm/components/feature-announcements/types/props.types.d.ts +43 -0
  103. package/dist/esm/components/feature-announcements/types/repository.types.d.ts +11 -0
  104. package/dist/esm/components/feature-announcements/types/router.types.d.ts +7 -0
  105. package/dist/esm/components/feature-announcements/useFeatureAnnouncements.d.ts +13 -0
  106. package/dist/esm/components/feature-announcements/utils/animationHelpers.d.ts +18 -0
  107. package/dist/esm/components/feature-announcements/utils/animationHelpers.js +1 -0
  108. package/dist/esm/components/feature-announcements/utils/elementHelpers.d.ts +17 -0
  109. package/dist/esm/components/feature-announcements/utils/elementHelpers.js +1 -0
  110. package/dist/esm/components/feature-announcements/utils/htmlHelpers.d.ts +18 -0
  111. package/dist/esm/components/feature-announcements/utils/htmlHelpers.js +1 -0
  112. package/dist/esm/components/feature-announcements/utils/index.d.ts +3 -0
  113. package/dist/esm/components/states/StateComponent.d.ts +0 -1
  114. package/dist/esm/components/states/StateComponent.js +1 -1
  115. package/dist/esm/components/whats-new/WhatsNew.d.ts +23 -0
  116. package/dist/esm/components/whats-new/WhatsNew.js +1 -0
  117. package/dist/esm/components/whats-new/WhatsNew.styles.d.ts +11 -0
  118. package/dist/esm/components/whats-new/WhatsNew.styles.js +185 -0
  119. package/dist/esm/components/whats-new/WhatsNew.types.d.ts +58 -0
  120. package/dist/esm/components/whats-new/WhatsNewButton.d.ts +3 -0
  121. package/dist/esm/components/whats-new/WhatsNewButton.js +1 -0
  122. package/dist/esm/components/whats-new/WhatsNewPanel.d.ts +3 -0
  123. package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -0
  124. package/dist/esm/components/whats-new/WhatsNewProvider.d.ts +4 -0
  125. package/dist/esm/components/whats-new/WhatsNewProvider.js +1 -0
  126. package/dist/esm/components/whats-new/index.d.ts +7 -0
  127. package/dist/esm/components/whats-new/useWhatsNew.d.ts +9 -0
  128. package/dist/esm/components/whats-new/useWhatsNew.js +1 -0
  129. package/dist/esm/index.d.ts +2 -0
  130. package/dist/esm/index.js +1 -1
  131. package/package.json +2 -1
@@ -0,0 +1 @@
1
+ import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as n,BORDER_RADIUS as i,SPACING as o}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,l)=>({container:{width:`${n.MAJOR.width}px`,height:`${n.MAJOR.height}px`,display:"flex",backgroundColor:t.grayscale[900],borderRadius:i.POPUP,overflow:"hidden",position:"relative",transform:r?l:"scale(1)",opacity:r?0:1,transition:e},skipButton:{base:{position:"absolute",top:o.MAJOR.skipButtonTop,right:o.MAJOR.skipButtonRight,background:"transparent",border:"none",color:t.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:a.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:t.grayscale[100],color:t.grayscale[700]}},imageContainer:{backgroundColor:t.grayscale[900],width:`${n.MAJOR.imageWidth}px`,height:`${n.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:o.MAJOR.imagePadding},image:{width:`${n.MAJOR.imageInnerWidth}px`,height:`${n.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.MAJOR.imagePlaceholderWidth}px`,height:`${n.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:o.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:o.MAJOR.titlePadding,color:t.grayscale.white,lineHeight:"1.25",textAlign:"left"},content:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},exploreButton:{base:{backgroundColor:"transparent",border:`1px solid ${t.warning[500]}`,color:t.warning[500],borderRadius:i.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:o.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:o.MAJOR.navigationBottom,right:o.MAJOR.navigationRight,display:"flex",gap:o.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:e?t.grayscale[700]:t.grayscale.white,fontSize:"20px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:t.warning[500]}})});export{r as getMajorPopupStyles};
@@ -0,0 +1,16 @@
1
+ import { CSSProperties } from 'react';
2
+ export declare const getMinorPopupStyles: (startAnimation: boolean, transform: string) => {
3
+ container: CSSProperties;
4
+ imageContainer: CSSProperties;
5
+ imageWrapper: CSSProperties;
6
+ image: CSSProperties;
7
+ badge: CSSProperties;
8
+ badgeText: CSSProperties;
9
+ imagePlaceholder: CSSProperties;
10
+ contentContainer: CSSProperties;
11
+ title: CSSProperties;
12
+ content: CSSProperties;
13
+ actionsContainer: CSSProperties;
14
+ understoodText: CSSProperties;
15
+ exploreButton: CSSProperties;
16
+ };
@@ -0,0 +1 @@
1
+ import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as i,BORDER_RADIUS as o,SPACING as n}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,s)=>({container:{width:`${i.MINOR.width}px`,height:`${i.MINOR.height}px`,display:"flex",backgroundColor:t.grayscale.white,borderRadius:o.POPUP,overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",transform:r?s:"scale(1)",opacity:r?0:1,transition:e},imageContainer:{backgroundColor:t.grayscale[50],borderRadius:o.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:n.MINOR.imageMargin,width:`${i.MINOR.imageWidth}px`,minWidth:`${i.MINOR.imageWidth}px`,maxWidth:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},image:{width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:o.IMAGE,display:"block"},badge:{position:"absolute",top:"0px",left:"0px",right:"0px",height:`${i.MINOR.badgeHeight}px`,backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:`${o.IMAGE} ${o.IMAGE} ${o.IMAGE} ${o.IMAGE}`,display:"flex",alignItems:"center",justifyContent:"center",zIndex:a.IMAGE_BADGE},badgeText:{color:t.grayscale.white,fontWeight:"600",fontSize:"14px"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[100],borderRadius:o.IMAGE},contentContainer:{flex:1,display:"flex",margin:n.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:t.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:t.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:n.MINOR.actionsBottom,right:n.MINOR.actionsRight,display:"flex",gap:n.MINOR.actionsGap,alignItems:"center"},understoodText:{color:t.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:t.brand[800],border:"none",color:t.grayscale.white,borderRadius:o.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}});export{r as getMinorPopupStyles};
@@ -0,0 +1,13 @@
1
+ import { CSSProperties } from 'react';
2
+ export declare const videoModalStyles: {
3
+ backdrop: CSSProperties;
4
+ container: CSSProperties;
5
+ closeButton: {
6
+ base: CSSProperties;
7
+ hover: CSSProperties;
8
+ };
9
+ videoWrapper: CSSProperties;
10
+ iframe: CSSProperties;
11
+ video: CSSProperties;
12
+ noVideoMessage: CSSProperties;
13
+ };
@@ -0,0 +1 @@
1
+ import"../constants/animations.js";import{BORDER_RADIUS as o}from"../constants/dimensions.js";import{Z_INDEX as t}from"../constants/zIndex.js";const e={backdrop:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:t.VIDEO_MODAL,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},container:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:o.VIDEO_MODAL,overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},closeButton:{base:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:o.CLOSE_BUTTON,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:t.CLOSE_BUTTON,transition:"background-color 0.2s"},hover:{backgroundColor:"rgba(0, 0, 0, 0.9)"}},videoWrapper:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},iframe:{borderRadius:o.VIDEO_MODAL},video:{width:"100%",height:"100%",objectFit:"contain",borderRadius:o.VIDEO_MODAL},noVideoMessage:{color:"white",fontSize:"18px",textAlign:"center"}};export{e as videoModalStyles};
@@ -0,0 +1,40 @@
1
+ /**
2
+ * Firestore Timestamp type
3
+ */
4
+ export interface FirestoreTimestamp {
5
+ seconds: number;
6
+ nanoseconds?: number;
7
+ }
8
+ /**
9
+ * Feature announcement data model
10
+ */
11
+ export interface FeatureAnnouncement {
12
+ id: string;
13
+ title: string;
14
+ body: string;
15
+ content: string;
16
+ buttonText: string;
17
+ displayImage: string;
18
+ featureTag: string;
19
+ featureUpdateType: 'Major' | 'Minor';
20
+ image: string;
21
+ module: string[];
22
+ pageUrls: string[];
23
+ productVideo: string;
24
+ redirectUrl: string;
25
+ updates: string;
26
+ visibility: boolean;
27
+ createdAt: FirestoreTimestamp;
28
+ expirationDate?: FirestoreTimestamp | string | Date;
29
+ }
30
+ /**
31
+ * Store feature progress tracking
32
+ */
33
+ export interface StoreFeatureProgress {
34
+ storeId: string;
35
+ viewedFeatures: Record<string, boolean>;
36
+ }
37
+ /**
38
+ * Feature update types
39
+ */
40
+ export type FeatureUpdateType = 'Major' | 'Minor';
@@ -0,0 +1,4 @@
1
+ export * from './feature.types';
2
+ export * from './props.types';
3
+ export * from './repository.types';
4
+ export * from './router.types';
@@ -0,0 +1,43 @@
1
+ /// <reference types="react" />
2
+ import { FeatureAnnouncement } from './feature.types';
3
+ import { FeatureAnnouncementRepository } from './repository.types';
4
+ import { RouterProps } from './router.types';
5
+ /**
6
+ * Base popup component props
7
+ */
8
+ export interface PopupBaseProps {
9
+ feature: FeatureAnnouncement;
10
+ currentIndex: number;
11
+ totalFeatures: number;
12
+ onSkip: () => void;
13
+ onExplore: () => void;
14
+ onPrevious: () => void;
15
+ onNext: () => void;
16
+ setIsClosing?: (isClosing: boolean) => void;
17
+ }
18
+ /**
19
+ * Major update popup props
20
+ */
21
+ export interface MajorUpdatePopupProps extends PopupBaseProps {
22
+ }
23
+ /**
24
+ * Minor update popup props
25
+ */
26
+ export interface MinorUpdatePopupProps extends PopupBaseProps {
27
+ }
28
+ /**
29
+ * Video modal props
30
+ */
31
+ export interface VideoModalProps {
32
+ isOpen: boolean;
33
+ videoUrl: string;
34
+ onClose: () => void;
35
+ }
36
+ /**
37
+ * Feature announcement provider props
38
+ */
39
+ export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRepository {
40
+ children: React.ReactNode;
41
+ module?: string;
42
+ router?: RouterProps;
43
+ }
@@ -0,0 +1,11 @@
1
+ import { FeatureAnnouncement, StoreFeatureProgress } from './feature.types';
2
+ /**
3
+ * Repository function types for dependency injection
4
+ */
5
+ export interface FeatureAnnouncementRepository {
6
+ fetchVisibleFeatures: (module?: string) => Promise<[Error | null, FeatureAnnouncement[] | null]>;
7
+ getStoreFeatureProgress: (storeId: string) => Promise<[Error | null, StoreFeatureProgress | null]>;
8
+ fetchFeatureById: (featureId: string) => Promise<[Error | null, FeatureAnnouncement | null]>;
9
+ markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[Error | null]>;
10
+ isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
11
+ }
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Router properties
3
+ */
4
+ export interface RouterProps {
5
+ pathname: string;
6
+ query: Record<string, string | string[] | undefined>;
7
+ }
@@ -0,0 +1,13 @@
1
+ import { FeatureAnnouncement, FeatureAnnouncementRepository, RouterProps } from './types';
2
+ export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepository & {
3
+ module?: string | undefined;
4
+ router?: RouterProps | undefined;
5
+ }) => {
6
+ features: FeatureAnnouncement[];
7
+ majorUpdateFeatures: FeatureAnnouncement[];
8
+ minorUpdateFeatures: FeatureAnnouncement[];
9
+ isLoading: boolean;
10
+ error: string | null;
11
+ markFeatureAsViewed: (featureId: string) => Promise<void>;
12
+ refetch: () => Promise<void>;
13
+ };
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Calculate transform for closing animation
3
+ * @param popupElement - Popup element reference
4
+ * @param targetElement - Target element to animate towards
5
+ * @returns Transform CSS string
6
+ */
7
+ export declare const calculateCloseTransform: (popupElement: HTMLElement, targetElement: Element) => string;
8
+ /**
9
+ * Hide Joyride arrow element
10
+ * @param popupRef - Reference to popup element
11
+ */
12
+ export declare const hideJoyrideArrow: (popupRef: HTMLElement | null) => void;
13
+ /**
14
+ * Execute callback after animation completes
15
+ * @param callback - Function to execute
16
+ * @param delay - Optional delay override
17
+ */
18
+ export declare const executeAfterAnimation: (callback: () => void, delay?: number) => void;
@@ -0,0 +1 @@
1
+ import{ANIMATION_TIMING as t}from"../constants/animations.js";const e=(t,e)=>{const i=t.getBoundingClientRect(),o=e.getBoundingClientRect();return`translate(${o.left+o.width/2-(i.left+i.width/2)}px, ${o.top+o.height/2-(i.top+i.height/2)}px) scale(0)`},i=t=>{if(!t)return;const e=t.closest('[class*="react-joyride__tooltip"]');if(!e)return;const i=e.querySelector('[class*="react-joyride__arrow"]');i&&(i.style.display="none",i.style.visibility="hidden",i.style.opacity="0")},o=function(e){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.CLOSE_DURATION;setTimeout(e,i)};export{e as calculateCloseTransform,o as executeAfterAnimation,i as hideJoyrideArrow};
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Find What's New button using multiple strategies
3
+ * @returns Element or null
4
+ */
5
+ export declare const findWhatsNewButton: () => Element | null;
6
+ /**
7
+ * Find target element for minor update
8
+ * @param featureTag - Feature tag selector
9
+ * @returns Element or null
10
+ */
11
+ export declare const findFeatureTagElement: (featureTag: string) => Element | null;
12
+ /**
13
+ * Normalize selector string
14
+ * @param selector - Selector string
15
+ * @returns Normalized selector
16
+ */
17
+ export declare const normalizeSelector: (selector: string) => string;
@@ -0,0 +1 @@
1
+ import"../constants/animations.js";import{SELECTORS as t}from"../constants/selectors.js";const e=()=>{let e=document.querySelector(t.WHATS_NEW_BUTTON);if(e)return e;if(e=document.querySelector(t.MAIN_ICON_CLASS),e)return e;const r=document.querySelector(t.SVG_VIEWBOX);if(r){if(r.querySelector(t.CLIPPATH_PATTERN))return r.closest(t.WHATS_NEW_BUTTON)||r.parentElement}return null},r=t=>{const e=t.startsWith("#")||t.startsWith(".")||t.startsWith("[")?t:`#${t}`;return document.querySelector(e)};export{r as findFeatureTagElement,e as findWhatsNewButton};
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Decode HTML entities in text
3
+ * @param text - Text containing HTML entities
4
+ * @returns Decoded text
5
+ */
6
+ export declare const decodeHTMLEntities: (text: string) => string;
7
+ /**
8
+ * Format video URL for embedding
9
+ * @param videoUrl - Original video URL
10
+ * @returns Formatted video URL
11
+ */
12
+ export declare const formatVideoUrl: (videoUrl: string) => string;
13
+ /**
14
+ * Check if URL is a YouTube video
15
+ * @param videoUrl - Video URL to check
16
+ * @returns True if YouTube video
17
+ */
18
+ export declare const isYouTubeVideo: (videoUrl: string) => boolean;
@@ -0,0 +1 @@
1
+ const e=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},t=e=>e.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"),u=e=>e.includes("youtube.com")||e.includes("youtu.be");export{e as decodeHTMLEntities,t as formatVideoUrl,u as isYouTubeVideo};
@@ -0,0 +1,3 @@
1
+ export * from './htmlHelpers';
2
+ export * from './animationHelpers';
3
+ export * from './elementHelpers';
@@ -22,7 +22,6 @@ export type StateComponentProps = {
22
22
  states: StateInterface;
23
23
  heading: string;
24
24
  subline: string;
25
- errorText?: string;
26
25
  icon?: JSX.Element;
27
26
  isButtonEnabled: boolean;
28
27
  type?: ButtonTypes;
@@ -1 +1 @@
1
- import{j as s}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import n from"../../assets/icons/errorIcon.svg.js";import e from"../../assets/icons/retryIcon.svg.js";import o from"../../assets/icons/state_icon.svg.js";import i from"../../assets/icons/successIcon.svg.js";import r from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as j,TitleMedium as d,BodyPrimary as l,BodySecondary as m}from"../TypographyStyle.js";import{StateComponentContainer as h,StateIcon as g,StateHeading as x,StateSubline as p,ButtonContainer as u}from"./StateComponent.styled.js";var y,L,O;!function(s){s.SUCCESS="success",s.ERROR="error",s.WARNING="warning",s.LOADING="loading",s.RETRY="retry",s.INFO="info"}(y||(y={})),function(s){s.CANCEL="cancel",s.OTHER="other"}(L||(L={})),function(s){s.SINGLE="SINGLE",s.DOUBLE="DOUBLE"}(O||(O={}));const b=b=>{var E;const T=()=>f==y.SUCCESS?s.jsx(i,{}):f==y.WARNING?s.jsx(r,{}):f==y.ERROR?s.jsx(n,{}):f===y.LOADING?s.jsx(a,{size:"large"}):f===y.RETRY?s.jsx(e,{}):f==y.INFO?s.jsx(o,{}):void 0,{states:f,heading:I,subline:R,errorText:S,icon:C=T(),isButtonEnabled:N,type:v,buttonText:A,buttonType:z,onButtonClick:B,leadingIcon:G,width:W,headerImage:w,iconWidth:D,iconHeight:U,closeButtonType:F,secondaryButtonText:H,"data-test":M}=b;return s.jsxs(h,Object.assign({width:W,"data-test":M},{children:[s.jsx(g,Object.assign({iconWidth:D,iconHeight:U},{children:w?s.jsx("img",{src:w,width:"100%",height:"auto",alt:""}):C})),s.jsxs(x,Object.assign({size:b.size},{children:["SMALL"===b.size&&s.jsx(j,{children:I}),"SMALL"!==b.size&&s.jsx(d,{children:I})]})),s.jsxs(p,{children:["SMALL"!==b.size&&s.jsx(l,Object.assign({color:t.content.secondary},{children:R})),"SMALL"===b.size&&s.jsx(m,Object.assign({color:t.content.secondary},{children:R})),S&&s.jsx(m,Object.assign({color:t.content.negative,style:{marginTop:8}},{children:S}))]}),null!==(E=b.children)&&void 0!==E?E:s.jsx(s.Fragment,{}),N&&s.jsx(s.Fragment,{children:s.jsxs(u,Object.assign({size:b.size},{children:[v==O.DOUBLE&&s.jsx(c,{"data-test":`${M}-cancel`,onClick:()=>B&&B(L.CANCEL),buttonType:F||"secondary",buttonText:H||"Cancel",matchParentWidth:!0}),s.jsx(c,{"data-test":`${M}-primary`,onClick:()=>B&&B(L.OTHER),buttonType:null!=z?z:"primary",LeadingIcon:G,buttonText:null!=A?A:"Retry",matchParentWidth:!0})]}))})]}))};export{L as ButtonActions,O as ButtonTypes,b as StateComponent,y as StateInterface};
1
+ import{j as s}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import n from"../../assets/icons/errorIcon.svg.js";import e from"../../assets/icons/retryIcon.svg.js";import o from"../../assets/icons/successIcon.svg.js";import i from"../../assets/icons/warningIcon.svg.js";import r from"../../assets/icons/state_icon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as j,TitleMedium as d,BodyPrimary as l,BodySecondary as m}from"../TypographyStyle.js";import{StateComponentContainer as h,StateIcon as g,StateHeading as x,StateSubline as u,ButtonContainer as p}from"./StateComponent.styled.js";var y,L,O;!function(s){s.SUCCESS="success",s.ERROR="error",s.WARNING="warning",s.LOADING="loading",s.RETRY="retry",s.INFO="info"}(y||(y={})),function(s){s.CANCEL="cancel",s.OTHER="other"}(L||(L={})),function(s){s.SINGLE="SINGLE",s.DOUBLE="DOUBLE"}(O||(O={}));const E=E=>{var b;const f=()=>I==y.SUCCESS?s.jsx(o,{}):I==y.WARNING?s.jsx(i,{}):I==y.ERROR?s.jsx(n,{}):I===y.LOADING?s.jsx(a,{size:"large"}):I===y.RETRY?s.jsx(e,{}):I==y.INFO?s.jsx(r,{}):void 0,{states:I,heading:R,subline:S,icon:T=f(),isButtonEnabled:C,type:N,buttonText:A,buttonType:v,onButtonClick:z,leadingIcon:B,width:G,headerImage:W,iconWidth:w,iconHeight:D,closeButtonType:U,secondaryButtonText:F,"data-test":H}=E;return s.jsxs(h,Object.assign({width:G,"data-test":H},{children:[s.jsx(g,Object.assign({iconWidth:w,iconHeight:D},{children:W?s.jsx("img",{src:W,width:"100%",height:"auto",alt:""}):T})),s.jsxs(x,Object.assign({size:E.size},{children:["SMALL"===E.size&&s.jsx(j,{children:R}),"SMALL"!==E.size&&s.jsx(d,{children:R})]})),s.jsxs(u,{children:["SMALL"!==E.size&&s.jsx(l,Object.assign({color:t.content.secondary},{children:S})),"SMALL"===E.size&&s.jsx(m,Object.assign({color:t.content.secondary},{children:S}))]}),null!==(b=E.children)&&void 0!==b?b:s.jsx(s.Fragment,{}),C&&s.jsx(s.Fragment,{children:s.jsxs(p,Object.assign({size:E.size},{children:[N==O.DOUBLE&&s.jsx(c,{"data-test":`${H}-cancel`,onClick:()=>z&&z(L.CANCEL),buttonType:U||"secondary",buttonText:F||"Cancel",matchParentWidth:!0}),s.jsx(c,{"data-test":`${H}-primary`,onClick:()=>z&&z(L.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:B,buttonText:null!=A?A:"Retry",matchParentWidth:!0})]}))})]}))};export{L as ButtonActions,O as ButtonTypes,E as StateComponent,y as StateInterface};
@@ -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
+ import{j as t}from"../../node_modules/react/jsx-runtime.js";import{useState as e}from"react";import{WhatsNewButton as o}from"./WhatsNewButton.js";import{WhatsNewPanel as n}from"./WhatsNewPanel.js";import{useWhatsNewContext as s}from"./WhatsNewProvider.js";const i=i=>{let{title:r="What's new",tooltip:a="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:h="Nothing new!",emptyStateDescription:m="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:u,buttonTestId:C="whats-new-button",iconWidth:w=32,iconHeight:j=32,customIcon:x}=i;const[f,g]=e(!1),{whatsNewContent:W,isLoading:S,newContentCount:T}=s();return t.jsxs(t.Fragment,{children:[t.jsx(o,{onClick:()=>g(!0),newContentCount:T,isOpen:f,isLoading:S,tooltip:a,testId:C,iconWidth:w,iconHeight:j,customIcon:x}),t.jsx(n,{isOpen:f,onClose:()=>g(!1),content:W,isLoading:S,title:r,searchPlaceholder:c,emptyStateTitle:h,emptyStateDescription:m,noResultsText:l,width:d,onContentClick:t=>{p&&p(t)},renderCustomContent:u})]})};export{i as WhatsNew};
@@ -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
+ import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.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.background.brandLight};
16
+ }
17
+
18
+ .main-icon-class:hover {
19
+ background: ${t.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.background.negative.vibrant};
31
+ border: 1.25px solid ${t.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.surface.standard};
42
+ }
43
+ `,n=e.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.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.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.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.background.warning.vibrant};
155
+ display: flex;
156
+ justify-content: center;
157
+ align-items: center;
158
+ margin-right: 8px;
159
+ }
160
+ `,r=e.div`
161
+ display: flex;
162
+ flex-direction: column;
163
+ height: 100%;
164
+ `,o=e.div`
165
+ background: ${t.surface.standard};
166
+ border-radius: 8px;
167
+ border: 1px solid ${t.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
+ `,a=e.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
+ `;export{a as BackgroundImageContainer,o as MainCardContainer,r as MainContainer,i as WhatsNewIconContainer,n as WhatsNewWrapper};
@@ -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,3 @@
1
+ import React from 'react';
2
+ import { WhatsNewButtonProps } from './WhatsNew.types';
3
+ export declare const WhatsNewButton: React.FC<WhatsNewButtonProps>;
@@ -0,0 +1 @@
1
+ import{j as t}from"../../node_modules/react/jsx-runtime.js";import{COLORS as s}from"../../constants/Theme.js";import{Tooltip as e}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as i}from"./WhatsNew.styles.js";const n=s=>{let{width:e=32,height:i=32}=s;return t.jsxs("svg",Object.assign({width:e,height:i,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsxs("g",Object.assign({clipPath:"url(#clip0_4309_13422)"},{children:[t.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.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.jsx("path",{d:"M7.69175 12.0819L5.24902 11.3518",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsx("path",{d:"M10.9423 8.35748L9.88867 6.03589",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsx("path",{d:"M8.91955 9.68574L5.66699 6.87134",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})),t.jsx("defs",{children:t.jsx("clipPath",Object.assign({id:"clip0_4309_13422"},{children:t.jsx("rect",{width:"24",height:"24",fill:"white",transform:"translate(4 4)"})}))})]}))},o=o=>{let{onClick:r,newContentCount:c=0,isOpen:d=!1,isLoading:a=!1,tooltip:h="What's new",testId:l="whats-new-button",iconWidth:j=32,iconHeight:p=32,customIcon:x}=o;return a?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.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.jsx(i,Object.assign({count:c},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(d?"icon-active":""),style:{color:d?s.content.brand:s.content.primary},onClick:r,"data-testid":l},{children:[t.jsx(e,Object.assign({body:h},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:p,color:d?s.content.brand:s.content.primary}):t.jsx(n,{width:j,height:p})})})),c>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:c}))}))]}))}))};export{o as WhatsNewButton};
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { WhatsNewPanelProps } from './WhatsNew.types';
3
+ export declare const WhatsNewPanel: React.FC<WhatsNewPanelProps>;
@@ -0,0 +1 @@
1
+ import{j as e}from"../../node_modules/react/jsx-runtime.js";import{format as t,differenceInBusinessDays as s}from"date-fns";import{useState as o,useMemo as n}from"react";import{COLORS as r}from"../../constants/Theme.js";import{Button as i}from"../button/Button.js";import{VideoModal as l}from"../feature-announcements/VideoModal.js";import{SearchBar as a}from"../searchBar/searchBar.js";import{SideModal as c}from"../side-modal/SideModal.js";import{TitleMedium as d,TitleRegular as h,BodyPrimary as m,Caption as j,TitleSmall as g}from"../TypographyStyle.js";import{MainContainer as x,WhatsNewWrapper as u,MainCardContainer as p,BackgroundImageContainer as w}from"./WhatsNew.styles.js";const b=t=>{let{width:s=32,height:o=32}=t;return e.jsx("svg",Object.assign({width:s,height:o,viewBox:"0 0 24 24",fill:"none"},{children:e.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"})}))},f=t=>{let{width:s=32,height:o=32}=t;return e.jsxs("svg",Object.assign({width:s,height:o,viewBox:"0 0 32 32",fill:"none"},{children:[e.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.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"})]}))},C=C=>{let{isOpen:v,onClose:y,content:O,isLoading:N=!1,title:k="What's new on BIK",searchPlaceholder:M="Search posts",emptyStateTitle:S="Nothing new!",emptyStateDescription:L="There are no new updates or features at the moment. Check back soon!",noResultsText:U="Sorry, no results found.",width:V="480px",onContentClick:A,renderCustomContent:D}=C;const[T,W]=o(""),[z,B]=o(!1),[F,_]=o("");console.log("WhatsNewPanel render - isVideoModalOpen:",z,"videoUrl:",F);const E=e=>{if(!e.createdAt)return!1;const t=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return s(new Date,t)<7},P=n((()=>{if(!T.trim())return O;const e=T.toLowerCase();return O.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[O,T]),R=0===O.length,I=0===P.length;return v?e.jsxs(c,Object.assign({width:V,onClose:y,header:"",headerCustomComponent:e.jsx(d,Object.assign({color:r.background.inverse},{children:k})),headerStyle:{background:r.background.brandLight},hideFooter:!0},{children:[e.jsxs(x,{children:[e.jsx("div",Object.assign({className:"mt-8"},{children:e.jsx(a,{width:"100%",isEnabled:!R,onChange:e=>{W(e)},onEnter:e=>{W(e)},placeholder:M,variant:"default",searchValue:T,onClickCross:()=>{W("")}})})),e.jsx(u,{children:R||I?e.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsx("div",Object.assign({className:"icon--wrapper"},{children:R?e.jsx(f,{width:32,height:32}):e.jsx(b,{width:32,height:32})})),R?e.jsxs(e.Fragment,{children:[e.jsx(h,{children:S}),e.jsx(m,Object.assign({color:r.content.secondary,className:"text--align",style:{maxWidth:300}},{children:L}))]}):I?e.jsx(m,Object.assign({color:r.content.secondary,className:"text--align",style:{maxWidth:300}},{children:U})):null]})):e.jsx("div",Object.assign({className:"scroller"},{children:P.map(((s,o)=>D?D(s):e.jsxs(p,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsx(w,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e.jsx("div",Object.assign({className:"mt-20 full--width"},{children:e.jsxs("div",Object.assign({className:"created--at flex flex--row"},{children:[E(s)?e.jsx("div",Object.assign({className:"new--content--tag"},{children:e.jsx(j,{children:"New"})})):e.jsx(e.Fragment,{}),e.jsx(j,Object.assign({style:{color:r.content.placeholder}},{children:s.createdAt?t(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e.jsx("div",Object.assign({className:"mt--8"},{children:e.jsx(g,{children:s.title})})),e.jsx("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e.jsx("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e.jsx(i,{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:",A),e.productVideo?(console.log("Setting video URL:",e.productVideo),_(e.productVideo),B(!0),console.log("Video modal state set to true")):e.redirectUrl&&(console.log("Opening redirectUrl:",e.redirectUrl),window.open(e.redirectUrl,"_blank")),A&&(console.log("Calling onContentClick for analytics"),A(e))})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${o}`)))}))})]}),e.jsx(l,{isOpen:z,videoUrl:F,onClose:()=>{console.log("Closing video modal"),B(!1)}})]})):e.jsx(e.Fragment,{})};export{C as WhatsNewPanel};
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { WhatsNewProviderProps } from './WhatsNew.types';
3
+ export declare const WhatsNewProvider: React.FC<WhatsNewProviderProps>;
4
+ export declare const useWhatsNewContext: () => import("./WhatsNew.types").WhatsNewHookReturn;
@@ -0,0 +1 @@
1
+ import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useContext as t,createContext as r}from"react";import{useWhatsNew as o}from"./useWhatsNew.js";const n=r(null),s=t=>{let{children:r,fetchWhatsNewContent:s,markContentAsViewed:i,module:a}=t;const m=o({fetchWhatsNewContent:s,markContentAsViewed:i,module:a});return e.jsx(n.Provider,Object.assign({value:m},{children:r}))},i=()=>{const e=t(n);if(!e)throw new Error("useWhatsNewContext must be used within a WhatsNewProvider");return e};export{s as WhatsNewProvider,i as useWhatsNewContext};
@@ -0,0 +1,7 @@
1
+ export * from './WhatsNew.types';
2
+ export * from './WhatsNew.styles';
3
+ export * from './WhatsNewButton';
4
+ export * from './WhatsNewPanel';
5
+ export * from './WhatsNewProvider';
6
+ export * from './WhatsNew';
7
+ export * from './useWhatsNew';
@@ -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
+ import{__awaiter as e}from"../../_virtual/_tslib.js";import{differenceInBusinessDays as t}from"date-fns";import{useState as o,useRef as r,useEffect as n,useCallback as a}from"react";const i=i=>{let{fetchWhatsNewContent:c,markContentAsViewed:d,module:s,newContentThresholdDays:l=7}=i;const[u,f]=o([]),[w,v]=o(!0),m=r(c),A=r(d);n((()=>{m.current=c}),[c]),n((()=>{A.current=d}),[d]);const h=a((()=>e(void 0,void 0,void 0,(function*(){v(!0);try{const[e,t]=yield m.current();if(e)console.error("Failed to fetch what's new content:",e),f([]);else if(t){let e=t;s&&(e=t.filter((e=>Array.isArray(e.module)?e.module.includes(s):e.module===s))),e.sort(((e,t)=>{var o,r;const n=(null===(o=e.createdAt)||void 0===o?void 0:o.toDate)?e.createdAt.toDate():new Date(e.createdAt);return((null===(r=t.createdAt)||void 0===r?void 0:r.toDate)?t.createdAt.toDate():new Date(t.createdAt)).getTime()-n.getTime()})),f(e)}else f([])}catch(e){console.error("Failed to fetch what's new content:",e),f([])}finally{v(!1)}}))),[s]);n((()=>{h()}),[h]);const D=a((e=>{if(!e.createdAt)return!1;const o=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t(new Date,o)<l}),[l]),y=u.reduce(((e,t)=>D(t)?e+1:e),0);return{whatsNewContent:u,isLoading:w,newContentCount:y,markAsViewed:a((t=>e(void 0,void 0,void 0,(function*(){if(A.current)try{yield A.current(t)}catch(e){console.warn("Failed to mark content as viewed:",e)}}))),[]),refreshContent:a((()=>e(void 0,void 0,void 0,(function*(){yield h()}))),[h])}};export{i as useWhatsNew};