@bikdotai/bik-component-library 0.0.749-beta.0 → 0.0.749-beta.10

package/dist/esm/components/feature-announcements/constants/dimensions.d.ts

@@ -1,16 +1,12 @@
-/**
- * Popup dimension constants
- */
 export declare const POPUP_DIMENSIONS: {
     readonly MAJOR: {
-        readonly width: 959;
-        readonly height: 274;
-        readonly imageWidth: 480;
-        readonly imageHeight: 274;
-        readonly imageInnerWidth: 464;
-        readonly imageInnerHeight: 258;
-        readonly imagePlaceholderWidth: 290;
-        readonly imagePlaceholderHeight: 258;
+        readonly height: 224;
+        readonly textAreaWidth: 398;
+        readonly imageWidth: {
+            readonly '16:9': 398;
+            readonly '1:1': 224;
+            readonly '4:3': 299;
+        };
     };
     readonly MINOR: {
         readonly width: 519;
@@ -20,20 +16,41 @@ export declare const POPUP_DIMENSIONS: {
         readonly badgeHeight: 27;
     };
 };
+export declare const TEXT_LIMITS: {
+    readonly MAJOR: {
+        readonly TITLE: {
+            readonly MAX_LINES: 2;
+        };
+        readonly CONTENT: {
+            readonly MAX_LINES: 4;
+            readonly MAX_CHARS: 360;
+            readonly CHARS_PER_LINE: 72;
+        };
+    };
+};
 /**
  * Spacing constants
  */
 export declare const SPACING: {
     readonly MAJOR: {
-        readonly contentMargin: "0 8px 0 0";
-        readonly imagePadding: "8px";
-        readonly titlePadding: "36px 0 0 0";
-        readonly buttonMarginTop: "16px";
-        readonly skipButtonTop: "10px";
-        readonly skipButtonRight: "10px";
-        readonly navigationBottom: "16px";
-        readonly navigationRight: "16px";
-        readonly navigationGap: "8px";
+        readonly containerPadding: "16px";
+        readonly contentGap: "16px";
+        readonly titleBottom: "0px";
+        readonly listGap: "8px";
+        readonly actionsTop: "16px";
+        readonly headerMarginBottom: "8px";
+        readonly contentMarginLeft: "0px";
+        readonly skipButtonContainerMargin: "8px";
+        readonly contentMargin: "0 0 0 0px";
+        readonly imagePadding: "0px";
+        readonly titlePadding: "0 0 0px 0";
+        readonly buttonMarginTop: "0px";
+        readonly skipButtonPadding: "2px 4px";
+        readonly skipButtonTop: "8px";
+        readonly skipButtonRight: "8px";
+        readonly navigationBottom: "0px";
+        readonly navigationRight: "0px";
+        readonly navigationGap: "4px";
     };
     readonly MINOR: {
         readonly imageMargin: "13px 10px 13px 10px";
@@ -43,14 +60,71 @@ export declare const SPACING: {
         readonly actionsGap: "16px";
     };
 };
-/**
- * Border radius constants
- */
 export declare const BORDER_RADIUS: {
-    readonly POPUP: "4px";
-    readonly IMAGE: "4px";
+    readonly POPUP: "8px";
+    readonly IMAGE: "6px";
     readonly BUTTON: "4px";
     readonly VIDEO_MODAL: "12px";
     readonly CLOSE_BUTTON: "50%";
     readonly SPOTLIGHT: "8px";
 };
+/**
+ * Design tokens - Colors
+ */
+export declare const DESIGN_COLORS: {
+    readonly BACKGROUND: {
+        readonly SURFACE: "#212121";
+        readonly IMAGE: "#F0F0F0";
+    };
+    readonly TEXT: {
+        readonly PRIMARY: "#FFFFFF";
+        readonly SECONDARY: "rgba(255, 255, 255, 0.8)";
+        readonly TERTIARY: "#BDBDBD";
+    };
+    readonly BUTTON: {
+        readonly PRIMARY_TEXT: "#FEC02D";
+        readonly PRIMARY_BORDER: "#FEC02D";
+    };
+    readonly ICON: {
+        readonly DISABLED: "rgba(255, 255, 255, 0.3)";
+        readonly ENABLED: "#FFFFFF";
+    };
+};
+/**
+ * Design tokens - Typography
+ */
+export declare const DESIGN_TYPOGRAPHY: {
+    readonly SKIP_BUTTON: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly TITLE: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly CONTENT: {
+        readonly fontSize: "12px";
+        readonly fontWeight: "400";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+    readonly BUTTON: {
+        readonly fontSize: "14px";
+        readonly fontWeight: "600";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "Inter, sans-serif";
+    };
+};
+/**
+ * Design tokens - Dimensions
+ */
+export declare const DESIGN_DIMENSIONS: {
+    readonly IMAGE_HEIGHT: 224;
+    readonly NAVIGATION_BUTTON_SIZE: 24;
+    readonly BUTTON_HEIGHT: 32;
+    readonly BUTTON_PADDING_HORIZONTAL: "12px";
+};

package/dist/esm/components/feature-announcements/constants/dimensions.js

@@ -1 +1 @@
-const i={MAJOR:{width:959,height:274,imageWidth:480,imageHeight:274,imageInnerWidth:464,imageInnerHeight:258,imagePlaceholderWidth:290,imagePlaceholderHeight:258},MINOR:{width:519,height:160,imageWidth:235,imageHeight:134,badgeHeight:27}},t={MAJOR:{contentMargin:"0 8px 0 0",imagePadding:"8px",titlePadding:"36px 0 0 0",buttonMarginTop:"16px",skipButtonTop:"10px",skipButtonRight:"10px",navigationBottom:"16px",navigationRight:"16px",navigationGap:"8px"},MINOR:{imageMargin:"13px 10px 13px 10px",contentMargin:"13px 13px 13px 3px",actionsBottom:"13px",actionsRight:"10px",actionsGap:"16px"}},p={POPUP:"4px",IMAGE:"4px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"};export{p as BORDER_RADIUS,i as POPUP_DIMENSIONS,t as SPACING};
+const t={MAJOR:{height:224,textAreaWidth:398,imageWidth:{"16:9":398,"1:1":224,"4:3":299}},MINOR:{width:519,height:160,imageWidth:235,imageHeight:134,badgeHeight:27}},i={MAJOR:{containerPadding:"16px",contentGap:"16px",titleBottom:"0px",listGap:"8px",actionsTop:"16px",headerMarginBottom:"8px",contentMarginLeft:"0px",skipButtonContainerMargin:"8px",contentMargin:"0 0 0 0px",imagePadding:"0px",titlePadding:"0 0 0px 0",buttonMarginTop:"0px",skipButtonPadding:"2px 4px",skipButtonTop:"8px",skipButtonRight:"8px",navigationBottom:"0px",navigationRight:"0px",navigationGap:"4px"},MINOR:{imageMargin:"13px 10px 13px 10px",contentMargin:"13px 13px 13px 3px",actionsBottom:"13px",actionsRight:"10px",actionsGap:"16px"}},n={POPUP:"8px",IMAGE:"6px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"},p={BACKGROUND:{SURFACE:"#212121",IMAGE:"#F0F0F0"},TEXT:{PRIMARY:"#FFFFFF",SECONDARY:"rgba(255, 255, 255, 0.8)",TERTIARY:"#BDBDBD"},BUTTON:{PRIMARY_TEXT:"#FEC02D",PRIMARY_BORDER:"#FEC02D"},ICON:{DISABLED:"rgba(255, 255, 255, 0.3)",ENABLED:"#FFFFFF"}},e={SKIP_BUTTON:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"},TITLE:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"},CONTENT:{fontSize:"12px",fontWeight:"400",lineHeight:"16px",fontFamily:"Inter, sans-serif"},BUTTON:{fontSize:"14px",fontWeight:"600",lineHeight:"20px",fontFamily:"Inter, sans-serif"}},x={IMAGE_HEIGHT:224,NAVIGATION_BUTTON_SIZE:24,BUTTON_HEIGHT:32,BUTTON_PADDING_HORIZONTAL:"12px"};export{n as BORDER_RADIUS,p as DESIGN_COLORS,x as DESIGN_DIMENSIONS,e as DESIGN_TYPOGRAPHY,t as POPUP_DIMENSIONS,i as SPACING};

package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts

@@ -27,7 +27,7 @@ export declare const minorStepStyles: {
     tooltip: {
         padding: number;
         backgroundColor: string;
-        borderRadius: "4px";
+        borderRadius: "8px";
         border: string;
         filter: string;
         boxShadow: string;
@@ -101,7 +101,7 @@ export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
     tooltip: {
         padding: number;
         backgroundColor: string;
-        borderRadius: "4px";
+        borderRadius: "8px";
         border: string;
         filter: string;
         boxShadow: string;

package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts

@@ -1,6 +1,9 @@
 import { CSSProperties } from 'react';
-export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
+import { ButtonStyle } from '../types/feature.types';
+export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
     container: CSSProperties;
+    headerContainer: CSSProperties;
+    contentWrapper: CSSProperties;
     skipButton: {
         base: CSSProperties;
         hover: CSSProperties;
@@ -8,13 +11,22 @@ export declare const getMajorPopupStyles: (startAnimation: boolean, transform: s
     imageContainer: CSSProperties;
     image: CSSProperties;
     imagePlaceholder: CSSProperties;
+    videoOverlay: CSSProperties;
+    playIcon: CSSProperties;
     contentContainer: CSSProperties;
+    skipButtonContainer: CSSProperties;
     title: CSSProperties;
     content: CSSProperties;
+    actionsWrapper: CSSProperties;
+    buttonsGroup: CSSProperties;
     exploreButton: {
         base: CSSProperties;
         hover: CSSProperties;
     };
+    secondaryButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
     navigationContainer: CSSProperties;
     navigationButton: (disabled: boolean) => {
         base: CSSProperties;

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

@@ -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};
+import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{SPACING as o,POPUP_DIMENSIONS as n,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,e)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==e?void 0:e.textColor)&&{color:e.textColor}),(null==e?void 0:e.backgroundColor)&&{backgroundColor:e.backgroundColor}),(null==e?void 0:e.borderColor)&&{borderColor:e.borderColor}),g=function(g,s){let c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"16:9",T=arguments.length>3&&void 0!==arguments[3]?arguments[3]:o.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0;const f=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return n.MAJOR.imageWidth[t]||n.MAJOR.imageWidth["16:9"]}(c),h=parseInt(T,10)||16,u=l.IMAGE_HEIGHT+2*h;return{container:{width:`${h+f+parseInt(o.MAJOR.contentGap,10)+n.MAJOR.textAreaWidth+h}px`,height:"auto",minHeight:`${u}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.POPUP,overflow:"hidden",position:"relative",padding:T,transform:g?s:"scale(1)",opacity:g?0:1,transition:e,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:o.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:o.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:i.TEXT.TERTIARY,fontSize:a.SKIP_BUTTON.fontSize,fontWeight:a.SKIP_BUTTON.fontWeight,cursor:"pointer",padding:o.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:t.grayscale[100],color:t.grayscale[700]}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${f}px`,height:`${l.IMAGE_HEIGHT}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,overflow:"hidden",flexShrink:0},image:{width:"100%",height:"100%",objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[800]},videoOverlay:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.4)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",zIndex:10,transition:"opacity 0.2s"},playIcon:{width:"84px",height:"84px",color:"#060606ff"},contentContainer:{flex:1,display:"flex",marginLeft:o.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${n.MAJOR.textAreaWidth}px`,gap:o.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:o.MAJOR.skipButtonContainerMargin},title:{fontSize:a.TITLE.fontSize,fontWeight:a.TITLE.fontWeight,marginBottom:o.MAJOR.titleBottom,padding:0,color:i.TEXT.PRIMARY,lineHeight:a.TITLE.lineHeight,textAlign:"left",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",fontFamily:a.TITLE.fontFamily},content:{fontSize:a.CONTENT.fontSize,lineHeight:a.CONTENT.lineHeight,color:i.TEXT.SECONDARY,textAlign:"left",marginBottom:"auto",fontFamily:a.CONTENT.fontFamily,fontWeight:a.CONTENT.fontWeight},actionsWrapper:{display:"flex",alignItems:"center",justifyContent:"space-between",marginRight:o.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:o.MAJOR.listGap},exploreButton:{base:d({backgroundColor:"transparent",border:`1px solid ${i.BUTTON.PRIMARY_BORDER}`,color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},p),hover:{backgroundColor:(null==p?void 0:p.backgroundColor)?`${p.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},secondaryButton:{base:d({backgroundColor:"transparent",color:i.BUTTON.PRIMARY_TEXT,borderRadius:r.BUTTON,fontSize:a.BUTTON.fontSize,fontWeight:a.BUTTON.fontWeight,cursor:"pointer",padding:`0 ${l.BUTTON_PADDING_HORIZONTAL}`,height:`${l.BUTTON_HEIGHT}px`,textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight,transition:"none"},p),hover:{backgroundColor:(null==p?void 0:p.backgroundColor)?`${p.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:o.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:`${l.NAVIGATION_BUTTON_SIZE}px`,height:`${l.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:e?i.ICON.DISABLED:i.ICON.ENABLED,fontSize:"16px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:r.BUTTON,padding:0},hover:{color:t.warning[500]}})}};export{g as getMajorPopupStyles};

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

@@ -5,6 +5,32 @@ export interface FirestoreTimestamp {
     seconds: number;
     nanoseconds?: number;
 }
+/**
+ * Button styling configuration
+ */
+export interface ButtonStyle {
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+/**
+ * Primary button configuration
+ */
+export interface ButtonConfig {
+    text?: string;
+    action?: 'Play Video' | 'Open link';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
+/**
+ * Secondary button configuration
+ */
+export interface SecondaryButtonConfig {
+    text?: string;
+    action?: 'Open link' | 'Close popup' | '';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
 /**
  * Feature announcement data model
  */
@@ -27,6 +53,9 @@ export interface FeatureAnnouncement {
     archived?: boolean;
     createdAt: FirestoreTimestamp;
     expirationDate?: FirestoreTimestamp | string | Date;
+    primaryButton?: ButtonConfig;
+    secondaryButton?: SecondaryButtonConfig;
+    padding?: string;
 }
 /**
  * Store feature progress tracking
@@ -39,3 +68,21 @@ export interface StoreFeatureProgress {
  * Feature update types
  */
 export type FeatureUpdateType = 'Major' | 'Minor';
+/**
+ * Announcement event data (for tracking when announcement is shown)
+ */
+export interface AnnouncementEvent {
+    storeId: string;
+    announcementId: string;
+    announcementTitle: string;
+    imageUrl?: string;
+    videoUrl?: string;
+}
+/**
+ * Announcement interaction event data (for tracking button clicks)
+ */
+export interface AnnouncementInteractionEvent extends AnnouncementEvent {
+    buttonClicked: 'Primary' | 'Secondary' | 'Skip';
+    buttonName: string;
+    buttonUrl?: string;
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FeatureAnnouncement } from './feature.types';
+import { AnnouncementEvent, AnnouncementInteractionEvent, FeatureAnnouncement } from './feature.types';
 import { FeatureAnnouncementRepository } from './repository.types';
 import { RouterProps } from './router.types';
 /**
@@ -14,17 +14,27 @@ export interface PopupBaseProps {
     onPrevious: () => void;
     onNext: () => void;
     setIsClosing?: (isClosing: boolean) => void;
+    onSecondaryAction?: () => void;
 }
 /**
  * Major update popup props
  */
 export interface MajorUpdatePopupProps extends PopupBaseProps {
+    /**
+     * Aspect ratio for the image/video container
+     * @default '16:9'
+     */
+    ratio?: '16:9' | '1:1' | '4:3';
+    /**
+     * Custom padding for the popup container
+     * @default '16px'
+     */
+    padding?: string;
 }
 /**
  * Minor update popup props
  */
-export interface MinorUpdatePopupProps extends PopupBaseProps {
-}
+export type MinorUpdatePopupProps = PopupBaseProps;
 /**
  * Video modal props
  */
@@ -40,4 +50,16 @@ export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRep
     children: React.ReactNode;
     module?: string;
     router?: RouterProps;
+    /**
+     * Store ID for event tracking
+     */
+    storeId?: string;
+    /**
+     * Callback fired when a major announcement popup is shown
+     */
+    onAnnouncementShown?: (event: AnnouncementEvent) => void;
+    /**
+     * Callback fired when user interacts with an announcement (clicks a button)
+     */
+    onAnnouncementInteracted?: (event: AnnouncementInteractionEvent) => void;
 }

package/dist/esm/components/modals/Modal.d.ts

@@ -6,6 +6,7 @@ export declare const Modal: React.FC<{
     children?: React.ReactNode;
     centralContainerStyles?: React.CSSProperties;
     closeOnOutsideClick?: boolean;
+    closeOnEscapeKey?: boolean;
     zIndex?: number;
     hideCrossButton?: boolean;
     width?: string;

package/dist/esm/components/modals/Modal.js

@@ -1 +1 @@
-import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RootContainer as n,CentralContainer as r,CloseButtonContainer as a,CloseButtonWithTimer as l}from"./modal.styled.js";import{COLORS as c}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{BodySecondary as h}from"../TypographyStyle.js";const m=m=>{var p;const[g,k]=i(m.timeOut||5);s((()=>{if(!m.skipModalWithTimer)return;const t=setInterval((()=>{k((e=>{const o=e-1;return o<=0?(clearInterval(t),0):o}))}),1e3);return()=>clearInterval(t)}),[m.skipModalWithTimer]);return t(e,{children:m.open&&t("div",Object.assign({id:m.id||"bik-modal"},{children:t(n,Object.assign({"data-test":m["data-test"],zIndex:m.zIndex,onClick:t=>{m.closeOnOutsideClick&&m.onClose?m.skipModalWithTimer&&g>0?t.stopPropagation():m.onClose():t.stopPropagation()}},{children:t(r,Object.assign({style:Object.assign({},null!==(p=m.centralContainerStyles)&&void 0!==p?p:{}),onClick:t=>{t.stopPropagation()},width:m.width},{children:o(e,{children:[!(null==m?void 0:m.hideCrossButton)&&!m.skipModalWithTimer&&t(a,Object.assign({"data-test":(m["data-test"]||"")+"-close-button",onClick:()=>m.onClose&&m.onClose()},{children:t(d,{height:20,width:20,color:c.content.secondary})})),m.skipModalWithTimer&&o(l,Object.assign({"data-test":(m["data-test"]||"")+"-timer-close-button",onClick:()=>{g>0||m.onClose&&m.onClose()},timerExists:g>0},{children:[g>0?o(h,{children:["Skip in ",g," sec "]}):t(e,{}),t(d,{height:20,width:20,color:g>0?c.stroke.primary:c.content.secondary})]})),m.children]})}))}))}))})};export{m as Modal};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useState as n,useEffect as i}from"react";import{RootContainer as s,CentralContainer as r,CloseButtonContainer as l,CloseButtonWithTimer as a}from"./modal.styled.js";import{COLORS as c}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{BodySecondary as m}from"../TypographyStyle.js";const p=p=>{var h;const[u,k]=n(p.timeOut||5);i((()=>{if(!p.skipModalWithTimer)return;const e=setInterval((()=>{k((t=>{const o=t-1;return o<=0?(clearInterval(e),0):o}))}),1e3);return()=>clearInterval(e)}),[p.skipModalWithTimer]),i((()=>{var e;if(!p.open)return;if(!p.onClose)return;if(!(null===(e=p.closeOnEscapeKey)||void 0===e||e))return;const t=p.onClose,o=e=>{"Escape"===e.key&&(p.skipModalWithTimer&&u>0||t())};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}}),[p.open,p.onClose,p.closeOnEscapeKey,p.skipModalWithTimer,u]);return e(t,{children:p.open&&e("div",Object.assign({id:p.id||"bik-modal"},{children:e(s,Object.assign({"data-test":p["data-test"],zIndex:p.zIndex,onClick:e=>{p.closeOnOutsideClick&&p.onClose?p.skipModalWithTimer&&u>0?e.stopPropagation():p.onClose():e.stopPropagation()}},{children:e(r,Object.assign({style:Object.assign({},null!==(h=p.centralContainerStyles)&&void 0!==h?h:{}),onClick:e=>{e.stopPropagation()},width:p.width},{children:o(t,{children:[!(null==p?void 0:p.hideCrossButton)&&!p.skipModalWithTimer&&e(l,Object.assign({"data-test":(p["data-test"]||"")+"-close-button",onClick:()=>p.onClose&&p.onClose()},{children:e(d,{height:20,width:20,color:c.content.secondary})})),p.skipModalWithTimer&&o(a,Object.assign({"data-test":(p["data-test"]||"")+"-timer-close-button",onClick:()=>{u>0||p.onClose&&p.onClose()},timerExists:u>0},{children:[u>0?o(m,{children:["Skip in ",u," sec "]}):e(t,{}),e(d,{height:20,width:20,color:u>0?c.stroke.primary:c.content.secondary})]})),p.children]})}))}))}))})};export{p as Modal};

package/dist/esm/components/modals/styledModal.d.ts

@@ -7,6 +7,7 @@ export declare const StyledModal: React.FC<{
     children?: React.ReactNode;
     centralContainerStyles?: React.CSSProperties;
     closeOnOutsideClick?: boolean;
+    closeOnEscapeKey?: boolean;
     headingTitle?: string;
     headingSubtitle?: string;
     tintedHeader?: boolean;