@bikdotai/bik-component-library 0.0.725 → 0.0.726-beta.0

package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),t=require("../constants/animations.js"),n=require("../constants/dimensions.js"),i=require("../constants/zIndex.js");exports.getMajorPopupStyles=(o,r)=>({container:{width:`${n.POPUP_DIMENSIONS.MAJOR.width}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.height}px`,display:"flex",backgroundColor:e.BASE_COLORS.grayscale[900],borderRadius:n.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",transform:o?r:"scale(1)",opacity:o?0:1,transition:t.POPUP_TRANSITION},skipButton:{base:{position:"absolute",top:n.SPACING.MAJOR.skipButtonTop,right:n.SPACING.MAJOR.skipButtonRight,background:"transparent",border:"none",color:e.BASE_COLORS.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:i.Z_INDEX.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:e.BASE_COLORS.grayscale[100],color:e.BASE_COLORS.grayscale[700]}},imageContainer:{backgroundColor:e.BASE_COLORS.grayscale[900],width:`${n.POPUP_DIMENSIONS.MAJOR.imageWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:n.SPACING.MAJOR.imagePadding},image:{width:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:e.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:n.SPACING.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:n.SPACING.MAJOR.titlePadding,color:e.BASE_COLORS.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 ${e.BASE_COLORS.warning[500]}`,color:e.BASE_COLORS.warning[500],borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:n.SPACING.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:n.SPACING.MAJOR.navigationBottom,right:n.SPACING.MAJOR.navigationRight,display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:t?e.BASE_COLORS.grayscale[700]:e.BASE_COLORS.grayscale.white,fontSize:"20px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:e.BASE_COLORS.warning[500]}})});

package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export declare const getMinorPopupStyles: (startAnimation: boolean, transform: string) => {
+    container: CSSProperties;
+    imageContainer: CSSProperties;
+    imageWrapper: CSSProperties;
+    image: CSSProperties;
+    badge: CSSProperties;
+    badgeText: CSSProperties;
+    imagePlaceholder: CSSProperties;
+    contentContainer: CSSProperties;
+    title: CSSProperties;
+    content: CSSProperties;
+    actionsContainer: CSSProperties;
+    understoodText: CSSProperties;
+    exploreButton: CSSProperties;
+};

package/dist/cjs/components/feature-announcements/styles/minorPopup.styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),t=require("../constants/animations.js"),i=require("../constants/dimensions.js"),o=require("../constants/zIndex.js");exports.getMinorPopupStyles=(n,a)=>({container:{width:`${i.POPUP_DIMENSIONS.MINOR.width}px`,height:`${i.POPUP_DIMENSIONS.MINOR.height}px`,display:"flex",backgroundColor:e.BASE_COLORS.grayscale.white,borderRadius:i.BORDER_RADIUS.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:n?a:"scale(1)",opacity:n?0:1,transition:t.POPUP_TRANSITION},imageContainer:{backgroundColor:e.BASE_COLORS.grayscale[50],borderRadius:i.BORDER_RADIUS.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:i.SPACING.MINOR.imageMargin,width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,minWidth:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,maxWidth:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`},image:{width:`${i.POPUP_DIMENSIONS.MINOR.imageWidth}px`,height:`${i.POPUP_DIMENSIONS.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:i.BORDER_RADIUS.IMAGE,display:"block"},badge:{position:"absolute",top:"0px",left:"0px",right:"0px",height:`${i.POPUP_DIMENSIONS.MINOR.badgeHeight}px`,backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:`${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE} ${i.BORDER_RADIUS.IMAGE}`,display:"flex",alignItems:"center",justifyContent:"center",zIndex:o.Z_INDEX.IMAGE_BADGE},badgeText:{color:e.BASE_COLORS.grayscale.white,fontWeight:"600",fontSize:"14px"},imagePlaceholder:{color:e.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:e.BASE_COLORS.grayscale[100],borderRadius:i.BORDER_RADIUS.IMAGE},contentContainer:{flex:1,display:"flex",margin:i.SPACING.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:e.BASE_COLORS.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:e.BASE_COLORS.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:i.SPACING.MINOR.actionsBottom,right:i.SPACING.MINOR.actionsRight,display:"flex",gap:i.SPACING.MINOR.actionsGap,alignItems:"center"},understoodText:{color:e.BASE_COLORS.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:e.BASE_COLORS.brand[800],border:"none",color:e.BASE_COLORS.grayscale.white,borderRadius:i.BORDER_RADIUS.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}});

package/dist/cjs/components/feature-announcements/styles/videoModal.styles.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export declare const videoModalStyles: {
+    backdrop: CSSProperties;
+    container: CSSProperties;
+    closeButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
+    videoWrapper: CSSProperties;
+    iframe: CSSProperties;
+    video: CSSProperties;
+    noVideoMessage: CSSProperties;
+};

package/dist/cjs/components/feature-announcements/styles/videoModal.styles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../constants/animations.js");var e=require("../constants/dimensions.js"),t=require("../constants/zIndex.js");const o={backdrop:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:t.Z_INDEX.VIDEO_MODAL,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},container:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:e.BORDER_RADIUS.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:e.BORDER_RADIUS.CLOSE_BUTTON,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:t.Z_INDEX.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:e.BORDER_RADIUS.VIDEO_MODAL},video:{width:"100%",height:"100%",objectFit:"contain",borderRadius:e.BORDER_RADIUS.VIDEO_MODAL},noVideoMessage:{color:"white",fontSize:"18px",textAlign:"center"}};exports.videoModalStyles=o;

package/dist/cjs/components/feature-announcements/types/feature.types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Firestore Timestamp type
+ */
+export interface FirestoreTimestamp {
+    seconds: number;
+    nanoseconds?: number;
+}
+/**
+ * Feature announcement data model
+ */
+export interface FeatureAnnouncement {
+    id: string;
+    title: string;
+    body: string;
+    content: string;
+    buttonText: string;
+    displayImage: string;
+    featureTag: string;
+    featureUpdateType: 'Major' | 'Minor';
+    image: string;
+    module: string[];
+    pageUrls: string[];
+    productVideo: string;
+    redirectUrl: string;
+    updates: string;
+    visibility: boolean;
+    archived?: boolean;
+    createdAt: FirestoreTimestamp;
+    expirationDate?: FirestoreTimestamp | string | Date;
+}
+/**
+ * Store feature progress tracking
+ */
+export interface StoreFeatureProgress {
+    storeId: string;
+    viewedFeatures: Record<string, boolean>;
+}
+/**
+ * Feature update types
+ */
+export type FeatureUpdateType = 'Major' | 'Minor';

package/dist/cjs/components/feature-announcements/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './feature.types';
+export * from './props.types';
+export * from './repository.types';
+export * from './router.types';

package/dist/cjs/components/feature-announcements/types/props.types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FeatureAnnouncement } from './feature.types';
+import { FeatureAnnouncementRepository } from './repository.types';
+import { RouterProps } from './router.types';
+/**
+ * Base popup component props
+ */
+export interface PopupBaseProps {
+    feature: FeatureAnnouncement;
+    currentIndex: number;
+    totalFeatures: number;
+    onSkip: () => void;
+    onExplore: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    setIsClosing?: (isClosing: boolean) => void;
+}
+/**
+ * Major update popup props
+ */
+export interface MajorUpdatePopupProps extends PopupBaseProps {
+}
+/**
+ * Minor update popup props
+ */
+export interface MinorUpdatePopupProps extends PopupBaseProps {
+}
+/**
+ * Video modal props
+ */
+export interface VideoModalProps {
+    isOpen: boolean;
+    videoUrl: string;
+    onClose: () => void;
+}
+/**
+ * Feature announcement provider props
+ */
+export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRepository {
+    children: React.ReactNode;
+    module?: string;
+    router?: RouterProps;
+}

package/dist/cjs/components/feature-announcements/types/repository.types.d.ts

@@ -0,0 +1,11 @@
+import { FeatureAnnouncement, StoreFeatureProgress } from './feature.types';
+/**
+ * Repository function types for dependency injection
+ */
+export interface FeatureAnnouncementRepository {
+    fetchVisibleFeatures: (module?: string) => Promise<[Error | null, FeatureAnnouncement[] | null]>;
+    getStoreFeatureProgress: (storeId: string) => Promise<[Error | null, StoreFeatureProgress | null]>;
+    fetchFeatureById: (featureId: string) => Promise<[Error | null, FeatureAnnouncement | null]>;
+    markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[Error | null]>;
+    isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
+}

package/dist/cjs/components/feature-announcements/types/router.types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Router properties
+ */
+export interface RouterProps {
+    pathname: string;
+    query: Record<string, string | string[] | undefined>;
+}

package/dist/cjs/components/feature-announcements/useFeatureAnnouncements.d.ts

@@ -0,0 +1,13 @@
+import { FeatureAnnouncement, FeatureAnnouncementRepository, RouterProps } from './types';
+export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepository & {
+    module?: string | undefined;
+    router?: RouterProps | undefined;
+}) => {
+    features: FeatureAnnouncement[];
+    majorUpdateFeatures: FeatureAnnouncement[];
+    minorUpdateFeatures: FeatureAnnouncement[];
+    isLoading: boolean;
+    error: string | null;
+    markFeatureAsViewed: (featureId: string) => Promise<void>;
+    refetch: () => Promise<void>;
+};

package/dist/cjs/components/feature-announcements/utils/animationHelpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Calculate transform for closing animation
+ * @param popupElement - Popup element reference
+ * @param targetElement - Target element to animate towards
+ * @returns Transform CSS string
+ */
+export declare const calculateCloseTransform: (popupElement: HTMLElement, targetElement: Element) => string;
+/**
+ * Hide Joyride arrow element
+ * @param popupRef - Reference to popup element
+ */
+export declare const hideJoyrideArrow: (popupRef: HTMLElement | null) => void;
+/**
+ * Execute callback after animation completes
+ * @param callback - Function to execute
+ * @param delay - Optional delay override
+ */
+export declare const executeAfterAnimation: (callback: () => void, delay?: number) => void;

package/dist/cjs/components/feature-announcements/utils/animationHelpers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../constants/animations.js");exports.calculateCloseTransform=(e,t)=>{const i=e.getBoundingClientRect(),o=t.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)`},exports.executeAfterAnimation=function(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.ANIMATION_TIMING.CLOSE_DURATION;setTimeout(t,i)},exports.hideJoyrideArrow=e=>{if(!e)return;const t=e.closest('[class*="react-joyride__tooltip"]');if(!t)return;const i=t.querySelector('[class*="react-joyride__arrow"]');i&&(i.style.display="none",i.style.visibility="hidden",i.style.opacity="0")};

package/dist/cjs/components/feature-announcements/utils/elementHelpers.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Find What's New button using multiple strategies
+ * @returns Element or null
+ */
+export declare const findWhatsNewButton: () => Element | null;
+/**
+ * Find target element for minor update
+ * @param featureTag - Feature tag selector
+ * @returns Element or null
+ */
+export declare const findFeatureTagElement: (featureTag: string) => Element | null;
+/**
+ * Normalize selector string
+ * @param selector - Selector string
+ * @returns Normalized selector
+ */
+export declare const normalizeSelector: (selector: string) => string;
+/**
+ * Check if element is fully visible in viewport
+ * @param element - Element to check
+ * @returns True if element is fully visible
+ */
+export declare const isElementInViewport: (element: Element) => boolean;
+/**
+ * Scroll to element smoothly with offset
+ * @param element - Element to scroll to
+ * @param offset - Offset from top (default 120px for popup space)
+ * @returns Promise that resolves when scroll completes
+ */
+export declare const scrollToElementSmooth: (element: Element, offset?: number) => Promise<void>;

package/dist/cjs/components/feature-announcements/utils/elementHelpers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../constants/animations.js");var e=require("../constants/selectors.js");const t=e=>{const t=e.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth,r=t.top>=120&&t.bottom<=o,s=t.left>=0&&t.right<=n;return r&&s};exports.findFeatureTagElement=e=>{const t=e.startsWith("#")||e.startsWith(".")||e.startsWith("[")?e:`#${e}`;return document.querySelector(t)},exports.findWhatsNewButton=()=>{let t=document.querySelector(e.SELECTORS.WHATS_NEW_BUTTON);if(t)return t;if(t=document.querySelector(e.SELECTORS.MAIN_ICON_CLASS),t)return t;const o=document.querySelector(e.SELECTORS.SVG_VIEWBOX);if(o){if(o.querySelector(e.SELECTORS.CLIPPATH_PATTERN))return o.closest(e.SELECTORS.WHATS_NEW_BUTTON)||o.parentElement}return null},exports.isElementInViewport=t,exports.normalizeSelector=e=>e.startsWith("#")||e.startsWith(".")||e.startsWith("[")?e:`#${e}`,exports.scrollToElementSmooth=function(e){let o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:120;return new Promise((n=>{if(t(e))return void n();const r=e.getBoundingClientRect().top+window.pageYOffset-o;let s;window.scrollTo({top:r,behavior:"smooth"});const i=()=>{clearTimeout(s),s=setTimeout((()=>{window.removeEventListener("scroll",i),setTimeout((()=>n()),100)}),100)};window.addEventListener("scroll",i,{passive:!0}),setTimeout((()=>{window.removeEventListener("scroll",i),n()}),1e3)}))};

package/dist/cjs/components/feature-announcements/utils/htmlHelpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Decode HTML entities in text
+ * @param text - Text containing HTML entities
+ * @returns Decoded text
+ */
+export declare const decodeHTMLEntities: (text: string) => string;
+/**
+ * Format video URL for embedding
+ * @param videoUrl - Original video URL
+ * @returns Formatted video URL
+ */
+export declare const formatVideoUrl: (videoUrl: string) => string;
+/**
+ * Check if URL is a YouTube video
+ * @param videoUrl - Video URL to check
+ * @returns True if YouTube video
+ */
+export declare const isYouTubeVideo: (videoUrl: string) => boolean;

package/dist/cjs/components/feature-announcements/utils/htmlHelpers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.decodeHTMLEntities=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},exports.formatVideoUrl=e=>e.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"),exports.isYouTubeVideo=e=>e.includes("youtube.com")||e.includes("youtu.be");

package/dist/cjs/components/feature-announcements/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './htmlHelpers';
+export * from './animationHelpers';
+export * from './elementHelpers';

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

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

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

@@ -0,0 +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})]})};

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

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

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

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

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

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

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

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

package/dist/cjs/components/whats-new/WhatsNewButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../node_modules/react/jsx-runtime.js"),s=require("../../assets/icons/whatsNew.svg.js"),e=require("../../constants/Theme.js"),n=require("../tooltips/Tooltip.js"),i=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:x=!1,tooltip:d="What's new",testId:j="whats-new-button",iconWidth:l=32,iconHeight:u=32,customIcon:p}=o;return x?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(i.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxRuntimeExports.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?e.COLORS.content.brand:e.COLORS.content.primary},onClick:r,"data-testid":j},{children:[t.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({body:d},{children:t.jsxRuntimeExports.jsx("div",{children:p?t.jsxRuntimeExports.jsx(p,{width:l,height:u,color:c?e.COLORS.content.brand:e.COLORS.content.primary}):t.jsxRuntimeExports.jsx(s.default,{width:l,height:u})})})),a>0&&t.jsxRuntimeExports.jsx("div",Object.assign({className:"notification--count"},{children:t.jsxRuntimeExports.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};

package/dist/cjs/components/whats-new/WhatsNewPanel.d.ts

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

package/dist/cjs/components/whats-new/WhatsNewPanel.js

@@ -0,0 +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"),r=require("../../assets/icons/searchIcon.svg.js"),n=require("../../assets/icons/whatsNew.svg.js"),i=require("../../constants/Theme.js"),a=require("../button/Button.js"),o=require("../feature-announcements/VideoModal.js"),d=require("../searchBar/searchBar.js"),c=require("../side-modal/SideModal.js"),x=require("../TypographyStyle.js"),l=require("./WhatsNew.styles.js");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:E="Nothing new!",emptyStateDescription:w="There are no new updates or features at the moment. Check back soon!",noResultsText:b="Sorry, no results found.",width:C="480px",onContentClick:O,renderCustomContent:y}=u;const[f,N]=s.useState(""),[S,v]=s.useState(!1),[M,q]=s.useState(""),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},T=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]),k=0===h.length,B=0===T.length;return j?e.jsxRuntimeExports.jsxs(c.SideModal,Object.assign({width:C,onClose:m,header:"",headerCustomComponent:e.jsxRuntimeExports.jsx(x.TitleMedium,Object.assign({color:i.COLORS.background.inverse},{children:g})),headerStyle:{background:i.COLORS.background.brandLight},hideFooter:!0},{children:[e.jsxRuntimeExports.jsxs(l.MainContainer,{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"mt-8"},{children:e.jsxRuntimeExports.jsx(d.SearchBar,{width:"100%",isEnabled:!k,onChange:e=>{N(e)},onEnter:e=>{N(e)},placeholder:R,variant:"default",searchValue:f,onClickCross:()=>{N("")}})})),e.jsxRuntimeExports.jsx(l.WhatsNewWrapper,{children:k||B?e.jsxRuntimeExports.jsxs("div",Object.assign({className:"no--data--found"},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({className:"icon--wrapper"},{children:k?e.jsxRuntimeExports.jsx(n.default,{width:32,height:32}):e.jsxRuntimeExports.jsx(r.default,{width:32,height:32})})),k?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(x.TitleRegular,{children:E}),e.jsxRuntimeExports.jsx(x.BodyPrimary,Object.assign({color:i.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:w}))]}):B?e.jsxRuntimeExports.jsx(x.BodyPrimary,Object.assign({color:i.COLORS.content.secondary,className:"text--align",style:{maxWidth:300}},{children:b})):null]})):e.jsxRuntimeExports.jsx("div",Object.assign({className:"scroller"},{children:T.map(((s,r)=>y?y(s):e.jsxRuntimeExports.jsxs(l.MainCardContainer,Object.assign({className:"padding--16 mb-mt-8"},{children:[e.jsxRuntimeExports.jsx(l.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(x.Caption,{children:"New"})})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),e.jsxRuntimeExports.jsx(x.Caption,Object.assign({style:{color:i.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(x.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(a.Button,{buttonText:s.buttonText||"Explore the feature",onClick:()=>(e=>{e.productVideo?(q(e.productVideo),v(!0)):e.redirectUrl&&window.open(e.redirectUrl,"_blank"),O&&O(e)})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${r}`)))}))})]}),e.jsxRuntimeExports.jsx(o.VideoModal,{isOpen:S,videoUrl:M,onClose:()=>{v(!1)}})]})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})};

package/dist/cjs/components/whats-new/WhatsNewProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WhatsNewProviderProps } from './WhatsNew.types';
+export declare const WhatsNewProvider: React.FC<WhatsNewProviderProps>;
+export declare const useWhatsNewContext: () => import("./WhatsNew.types").WhatsNewHookReturn;

package/dist/cjs/components/whats-new/WhatsNewProvider.js

@@ -0,0 +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};

package/dist/cjs/components/whats-new/index.d.ts

@@ -0,0 +1,7 @@
+export * from './WhatsNew.types';
+export * from './WhatsNew.styles';
+export * from './WhatsNewButton';
+export * from './WhatsNewPanel';
+export * from './WhatsNewProvider';
+export * from './WhatsNew';
+export * from './useWhatsNew';

package/dist/cjs/components/whats-new/useWhatsNew.d.ts

@@ -0,0 +1,9 @@
+import { WhatsNewContent, WhatsNewHookReturn } from './WhatsNew.types';
+interface UseWhatsNewProps {
+    fetchWhatsNewContent: () => Promise<[Error | null, WhatsNewContent[] | null]>;
+    markContentAsViewed?: (contentId: string) => Promise<void>;
+    module?: string;
+    newContentThresholdDays?: number;
+}
+export declare const useWhatsNew: ({ fetchWhatsNewContent, markContentAsViewed, module, newContentThresholdDays, }: UseWhatsNewProps) => WhatsNewHookReturn;
+export {};

package/dist/cjs/components/whats-new/useWhatsNew.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("date-fns"),r=require("react");exports.useWhatsNew=a=>{let{fetchWhatsNewContent:n,markContentAsViewed:o,module:c,newContentThresholdDays:s=7}=a;const[i,d]=r.useState([]),[u,l]=r.useState(!0),f=r.useRef(n),w=r.useRef(o);r.useEffect((()=>{f.current=n}),[n]),r.useEffect((()=>{w.current=o}),[o]);const v=r.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){l(!0);try{const[e,t]=yield f.current();if(e)console.error("Failed to fetch what's new content:",e),d([]);else if(t){let e=t;c&&(e=t.filter((e=>Array.isArray(e.module)?e.module.includes(c):e.module===c))),e.sort(((e,t)=>{var r,a;const n=(null===(r=e.createdAt)||void 0===r?void 0:r.toDate)?e.createdAt.toDate():new Date(e.createdAt);return((null===(a=t.createdAt)||void 0===a?void 0:a.toDate)?t.createdAt.toDate():new Date(t.createdAt)).getTime()-n.getTime()})),d(e)}else d([])}catch(e){console.error("Failed to fetch what's new content:",e),d([])}finally{l(!1)}}))),[c]);r.useEffect((()=>{v()}),[v]);const A=r.useCallback((e=>{if(!e.createdAt)return!1;const r=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return t.differenceInBusinessDays(new Date,r)<s}),[s]),h=i.reduce(((e,t)=>A(t)?e+1:e),0);return{whatsNewContent:i,isLoading:u,newContentCount:h,markAsViewed:r.useCallback((t=>e.__awaiter(void 0,void 0,void 0,(function*(){if(w.current)try{yield w.current(t)}catch(e){console.warn("Failed to mark content as viewed:",e)}}))),[]),refreshContent:r.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){yield v()}))),[v])}};

package/dist/cjs/index.d.ts

@@ -45,6 +45,7 @@ export * from './components/TablePagination/';
 export * from './components/states-modal';
 export * from './components/states';
 export * from './components/WhatsAppTextEditor';
+export * from './components/whats-new';
 export * from './helpers';
 export * from './components/card-selection-modal';
 export * from './components/image-cropper';
@@ -99,3 +100,4 @@ export * from './components/text-picker';
 export * from './components/dot-pulse';
 export * from './components/bik-chatbot';
 export * from './components/banner';
+export * from './components/feature-announcements';