@bikdotai/bik-component-library 0.0.679-3 → 0.0.679-5

package/dist/esm/components/feature-announcements/MajorUpdatePopup.style.js

@@ -1,55 +0,0 @@
-import e from"styled-components";const t=e.div`
-	width: 959px;
-	height: 274px;
-	display: flex;
-	background-color: #212121;
-	border-radius: 4px;
-	overflow: hidden;
-	position: relative;
-`,i=e.div`
-	background-color: #212121;
-	width: 480px;
-	height: 274px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px;
-`,n=e.div`
-	color: #9ca3af;
-	font-size: 14px;
-	text-align: center;
-	width: 290px;
-	height: 258px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-`,o=e.div`
-	flex: 1;
-	display: flex;
-	margin: 0 8px 0 0;
-	flex-direction: column;
-	justify-content: space-between;
-	background: transparent;
-`,l=e.div`
-	/* No specific styles, just a container */
-`,p=e.h3`
-	font-size: 16px;
-	font-weight: 600;
-	padding: 36px 0 0 0;
-	color: #fff;
-	line-height: 1.25;
-	text-align: left;
-`,a=e.div`
-	font-size: 14px;
-	line-height: 1.5;
-	color: rgba(255, 255, 255, 0.8);
-	text-align: left;
-`,r=e.div`
-	position: absolute;
-	bottom: 16px;
-	right: 16px;
-	display: flex;
-	gap: 8px;
-	align-items: center;
-`;export{o as StyledContentContainer,a as StyledDescription,n as StyledFeaturePreviewText,l as StyledHeaderContainer,i as StyledImageContainer,t as StyledMajorUpdateContainer,r as StyledNavigationContainer,p as StyledTitle};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { FeatureAnnouncement } from '../../types/FeatureAnnouncement.types';
-interface MinorUpdatePopupProps {
-    feature: FeatureAnnouncement;
-    currentIndex: number;
-    totalFeatures: number;
-    onSkip: () => void;
-    onExplore: () => void;
-    onPrevious: () => void;
-    onNext: () => void;
-}
-declare const MinorUpdatePopup: React.FC<MinorUpdatePopupProps>;
-export default MinorUpdatePopup;

package/dist/esm/components/feature-announcements/MinorUpdatePopup.js

@@ -1 +0,0 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{StyledMinorUpdateContainer as n,StyledImageContainer as i,StyledImageWrapper as o,StyledImageOverlay as l,StyledNewFeatureText as c,StyledFeaturePreviewText as d,StyledContentContainer as a,StyledHeaderContainer as s,StyledTitle as u,StyledDescription as h,StyledActionButtonsContainer as p,StyledUnderstoodText as f}from"./MinorUpdatePopup.style.js";const x=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},g=g=>{let{feature:m,currentIndex:b,totalFeatures:y,onSkip:j,onExplore:k,onPrevious:I,onNext:v}=g;return e(t,{children:r(n,{children:[e(i,{children:m.displayImage?r(o,{children:[e("img",{src:m.displayImage,alt:m.title,style:{width:"235px",height:"134px",objectFit:"cover",borderRadius:"4px",display:"block"},onError:e=>{m.image&&(e.target.src=m.image)}}),e(l,{children:e(c,{children:"New feature"})})]}):e(d,{children:"Feature Preview"})}),r(a,{children:[r(s,{children:[e(u,{children:m.title}),e(h,{dangerouslySetInnerHTML:{__html:x(m.content||m.body||"")}})]}),r(p,{children:[e(f,Object.assign({onClick:j},{children:"Understood"})),m.productVideo&&e("button",Object.assign({onClick:()=>{k()},style:{backgroundColor:"#4B1583",border:"none",color:"#ffffff",borderRadius:"4px",fontSize:"14px",fontWeight:"500",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}},{children:m.buttonText||"Explore the feature"}))]})]})]})})};export{g as default};

package/dist/esm/components/feature-announcements/MinorUpdatePopup.style.d.ts

@@ -1,12 +0,0 @@
-export declare const StyledMinorUpdateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledImageOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledNewFeatureText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledFeaturePreviewText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const StyledDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledActionButtonsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledUnderstoodText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/esm/components/feature-announcements/MinorUpdatePopup.style.js

@@ -1,93 +0,0 @@
-import i from"styled-components";const t=i.div`
-	width: 519px;
-	height: 160px;
-	display: flex;
-	background-color: #ffffff;
-	border-radius: 4px;
-	overflow: hidden;
-	position: relative;
-	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
-`,e=i.div`
-	background-color: #f9fafb;
-	border-radius: 4px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 13px 10px 13px 10px;
-	width: 235px;
-	min-width: 235px;
-	max-width: 235px;
-	height: 134px;
-`,o=i.div`
-	position: relative;
-	width: 235px;
-	height: 134px;
-`,n=i.div`
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	height: 27px;
-	background-color: rgba(0, 0, 0, 0.26);
-	border-radius: 4px 4px 4px 4px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 10;
-`,p=i.span`
-	color: #ffffff;
-	font-weight: 400;
-	font-size: 14px;
-`,r=i.div`
-	color: #9ca3af;
-	font-size: 14px;
-	text-align: center;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #f3f4f6;
-	border-radius: 4px;
-`,x=i.div`
-	flex: 1;
-	display: flex;
-	margin: 13px 13px 13px 3px;
-	flex-direction: column;
-	justify-content: space-between;
-	background: transparent;
-`,a=i.div`
-	/* No specific styles, just a container */
-`,l=i.h3`
-	font-size: 16px;
-	font-weight: 600;
-	padding: 0 0 0 0;
-	color: #212121;
-	line-height: 1.25;
-	text-align: left;
-`,f=i.div`
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 1.2;
-	color: #616161;
-	text-align: left;
-	max-height: 48px;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-`,s=i.div`
-	position: absolute;
-	bottom: 13px;
-	right: 10px;
-	display: flex;
-	gap: 16px;
-	align-items: center;
-`,d=i.span`
-	color: #4b1583;
-	font-size: 14px;
-	font-weight: 500;
-	cursor: pointer;
-	transition: all 0.2s;
-`;export{s as StyledActionButtonsContainer,x as StyledContentContainer,f as StyledDescription,r as StyledFeaturePreviewText,a as StyledHeaderContainer,e as StyledImageContainer,n as StyledImageOverlay,o as StyledImageWrapper,t as StyledMinorUpdateContainer,p as StyledNewFeatureText,l as StyledTitle,d as StyledUnderstoodText};

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

@@ -1,8 +0,0 @@
-import React from 'react';
-interface VideoModalProps {
-    isOpen: boolean;
-    videoUrl: string;
-    onClose: () => void;
-}
-export declare const VideoModal: React.FC<VideoModalProps>;
-export {};

package/dist/esm/components/feature-announcements/VideoModal.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";const o=o=>{let{isOpen:r,videoUrl:i,onClose:n}=o;if(!r)return null;const c=i.includes("youtube.com")||i.includes("youtu.be")?i.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"):i,s=i.includes("youtube.com")||i.includes("youtu.be");return e("div",Object.assign({style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:2e3,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},onClick:e=>{e.target===e.currentTarget&&n()}},{children:t("div",Object.assign({style:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:"12px",overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},onClick:e=>e.stopPropagation()},{children:[e("button",Object.assign({onClick:n,style:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:"50%",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10,transition:"background-color 0.2s"},onMouseOver:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.9)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.7)"}},{children:"×"})),e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},{children:i?s?e("iframe",{width:"100%",height:"100%",src:c,title:"Product Video",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0,style:{borderRadius:"12px"}}):t("video",Object.assign({controls:!0,autoPlay:!0,style:{width:"100%",height:"100%",objectFit:"contain",borderRadius:"12px"}},{children:[e("source",{src:i,type:"video/mp4"}),e("source",{src:i,type:"video/webm"}),e("source",{src:i,type:"video/ogg"}),"Your browser does not support the video tag."]})):e("div",Object.assign({style:{color:"white",fontSize:"18px",textAlign:"center"}},{children:"No video available"}))}))]}))}))};export{o as VideoModal};

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

@@ -1,4 +0,0 @@
-export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
-export { VideoModal } from './VideoModal';
-export { default as MajorUpdatePopup } from './MajorUpdatePopup';
-export { default as MinorUpdatePopup } from './MinorUpdatePopup';

package/dist/esm/components/index.d.ts

@@ -1 +0,0 @@
-export * from './feature-announcements';

package/dist/esm/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useFeatureAnnouncements, type FeatureAnnouncementRepoInjected, } from './useFeatureAnnouncements';
-export { useElementVisibility } from './useElementVisibility';

package/dist/esm/hooks/useElementVisibility.d.ts

@@ -1,11 +0,0 @@
-interface VisibilityState {
-    [elementId: string]: boolean;
-}
-interface ElementVisibilityHook {
-    visibleElements: VisibilityState;
-    observeElement: (elementId: string) => void;
-    unobserveElement: (elementId: string) => void;
-    isElementVisible: (elementId: string) => boolean;
-}
-export declare const useElementVisibility: () => ElementVisibilityHook;
-export {};

package/dist/esm/hooks/useElementVisibility.js

@@ -1 +0,0 @@
-import{useState as t,useEffect as e,useCallback as r}from"react";const s=()=>{const[s,n]=t({}),[o,i]=t(new Set),[a,c]=t(null);e((()=>{const t=new IntersectionObserver((t=>{t.forEach((t=>{const e=t.target.id||t.target.getAttribute("data-feature-id");e&&n((r=>Object.assign(Object.assign({},r),{[e]:t.isIntersecting})))}))}),{threshold:.1,rootMargin:"50px"});return c(t),()=>{t.disconnect()}}),[]);const l=r((t=>{if(!a||o.has(t))return;const e=[`#${t}`,`[data-feature-id="${t}"]`,t.startsWith("#")||t.startsWith(".")||t.startsWith("[")?t:`#${t}`];let r=null;for(const t of e)if(r=document.querySelector(t),r)break;r&&(a.observe(r),i((e=>new Set([...e,t]))))}),[a,o]),u=r((t=>{if(!a||!o.has(t))return;const e=[`#${t}`,`[data-feature-id="${t}"]`,t.startsWith("#")||t.startsWith(".")||t.startsWith("[")?t:`#${t}`];let r=null;for(const t of e)if(r=document.querySelector(t),r)break;r&&(a.unobserve(r),i((e=>{const r=new Set(e);return r.delete(t),r})),n((e=>{const r=Object.assign({},e);return delete r[t],r})))}),[a,o]),b=r((t=>s[t]||!1),[s]);return{visibleElements:s,observeElement:l,unobserveElement:u,isElementVisible:b}};export{s as useElementVisibility};

package/dist/esm/hooks/useFeatureAnnouncements.d.ts

@@ -1,17 +0,0 @@
-import { FeatureAnnouncement } from '../types/FeatureAnnouncement.types';
-export interface FeatureAnnouncementRepoInjected {
-    fetchVisibleFeatures: () => Promise<[any, FeatureAnnouncement[] | null]>;
-    getStoreFeatureProgress: (storeId: string) => Promise<[any, any | null]>;
-    fetchFeatureById: (featureId: string) => Promise<[any, FeatureAnnouncement | null]>;
-    markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[any]>;
-    isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
-}
-export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, }: FeatureAnnouncementRepoInjected) => {
-    features: FeatureAnnouncement[];
-    majorUpdateFeatures: FeatureAnnouncement[];
-    minorUpdateFeatures: FeatureAnnouncement[];
-    isLoading: boolean;
-    error: string | null;
-    markFeatureAsViewed: (featureId: string) => Promise<void>;
-    refetch: () => Promise<void>;
-};

package/dist/esm/hooks/useFeatureAnnouncements.js

@@ -1 +0,0 @@
-import{__awaiter as e}from"../_virtual/_tslib.js";import{useRouter as t}from"next/router";import{useState as r,useCallback as o,useEffect as a}from"react";const n=n=>{let{fetchVisibleFeatures:i,getStoreFeatureProgress:l,fetchFeatureById:s,markFeatureAsViewedForStore:u,isFeatureApplicableToCurrentPage:d}=n;const c=(()=>{const[e,t]=r(null);return a((()=>{if("undefined"!=typeof window){let e=null;try{if(e=localStorage.getItem("storeId")||localStorage.getItem("Bik/StoreId")||localStorage.getItem("currentStore")||localStorage.getItem("store"),!e){const t=localStorage.getItem("Bik/CurrentUser");t&&(e=JSON.parse(t).storeId)}e||(e=new URLSearchParams(window.location.search).get("storeId"))}catch(e){console.error("FeatureAnnouncements: Failed to get store ID",e)}t(e)}}),[]),e})(),f=t(),[p,y]=r([]),[g,m]=r([]),[w,F]=r([]),[v,h]=r(!1),[D,x]=r(null),U=o((()=>e(void 0,void 0,void 0,(function*(){if(c){h(!0),x(null);try{const[e,t]=yield i();if(e||!t)return console.error("FeatureAnnouncements: Failed to fetch features",e),void x("Failed to fetch features");const[r,o]=yield l(c);r&&console.warn("FeatureAnnouncements: Progress fetch failed, treating all features as new",r);const a=new Date,n="undefined"!=typeof window?window.location.pathname:"",s=e=>{if(!e.expirationDate)return!0;let t;return"object"==typeof e.expirationDate&&null!==e.expirationDate&&("seconds"in e.expirationDate||"nanoseconds"in e.expirationDate)?t=new Date(1e3*e.expirationDate.seconds):"string"==typeof e.expirationDate?t=new Date(e.expirationDate):e.expirationDate instanceof Date&&(t=e.expirationDate),!(!t||isNaN(t.getTime()))&&a<t},u=e=>{if("Major"===e.featureUpdateType){let t=[];return Array.isArray(e.pageUrls)?t=e.pageUrls:"object"==typeof e.pageUrls&&null!==e.pageUrls&&"length"in e.pageUrls&&(t=Array.from(e.pageUrls)),t.includes(n)}return!0},f=t.filter((e=>{var t;return!((null===(t=null==o?void 0:o.viewedFeatures)||void 0===t?void 0:t[e.id])||!1)&&d(e)&&s(e)&&u(e)})),p=f.filter((e=>"Major"===e.featureUpdateType)),g=f.filter((e=>"Minor"===e.featureUpdateType));y(f),m(p),setTimeout((()=>{F(g)}),2e3)}catch(e){console.error("FeatureAnnouncements: Unexpected error in fetchFeatures",e),x("An unexpected error occurred")}finally{h(!1)}}}))),[c,i,l,d]),I=o((t=>e(void 0,void 0,void 0,(function*(){h(!0),x(null);try{const[e,r]=yield s(t);if(e||!r)return void x("Failed to fetch feature by ID");"Major"===r.featureUpdateType?m([r]):F([r]),y([r])}catch(e){x("An unexpected error occurred while fetching by ID")}finally{h(!1)}}))),[s]),A=o((t=>e(void 0,void 0,void 0,(function*(){if(!c)return;const[e]=yield u(c,t);e?(console.warn("FeatureAnnouncements: Failed to mark feature as viewed, removing from local state anyway",e),y((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t)))),F((e=>e.filter((e=>e.id!==t))))):(y((e=>e.filter((e=>e.id!==t)))),m((e=>e.filter((e=>e.id!==t)))),F((e=>e.filter((e=>e.id!==t)))))}))),[c,u]);return a((()=>{if(!f.isReady)return;const e=f.query.featureId;e?I(e):U()}),[f.isReady,f.query,U,I]),{features:p,majorUpdateFeatures:g,minorUpdateFeatures:w,isLoading:v,error:D,markFeatureAsViewed:A,refetch:U}};export{n as useFeatureAnnouncements};

package/dist/esm/types/FeatureAnnouncement.types.d.ts

@@ -1,27 +0,0 @@
-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;
-    createdAt: any;
-    expirationDate?: {
-        seconds: number;
-    } | string | Date;
-}
-export interface StoreFeatureProgress {
-    storeId: string;
-    viewedFeatures: {
-        [featureId: string]: boolean;
-    };
-}

package/dist/esm/types/index.d.ts

@@ -1 +0,0 @@
-export type { FeatureAnnouncement } from './FeatureAnnouncement.types';