@bikdotai/bik-component-library 0.0.744-beta.13 → 0.0.744-beta.15

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 (105) hide show
  1. package/dist/cjs/assets/icons/ActiveChecklistIcon.d.ts +3 -0
  2. package/dist/cjs/assets/icons/ActiveChecklistIcon.js +1 -0
  3. package/dist/cjs/assets/icons/CheckIndicatorIcon.d.ts +1 -0
  4. package/dist/cjs/assets/icons/CheckIndicatorIcon.js +1 -0
  5. package/dist/cjs/assets/icons/CompletedChecklistIcon.d.ts +3 -0
  6. package/dist/cjs/assets/icons/CompletedChecklistIcon.js +1 -0
  7. package/dist/cjs/assets/icons/CustomiseIcon.d.ts +7 -0
  8. package/dist/cjs/assets/icons/EnableIcon.d.ts +7 -0
  9. package/dist/cjs/assets/icons/GoLiveIcon.d.ts +7 -0
  10. package/dist/cjs/assets/icons/InactiveChecklistIcon.d.ts +3 -0
  11. package/dist/cjs/assets/icons/InactiveChecklistIcon.js +1 -0
  12. package/dist/cjs/assets/icons/NudgesIcon.d.ts +7 -0
  13. package/dist/cjs/assets/icons/OrderTrackingIcon.d.ts +7 -0
  14. package/dist/cjs/assets/icons/ProgressBadgeIcon.d.ts +3 -0
  15. package/dist/cjs/assets/icons/ShoppingIcon.d.ts +7 -0
  16. package/dist/cjs/assets/icons/SmallCheckIcon.d.ts +3 -0
  17. package/dist/cjs/assets/icons/SmallCheckIcon.js +1 -0
  18. package/dist/cjs/assets/icons/SupportIcon.d.ts +7 -0
  19. package/dist/cjs/assets/icons/TrainingIcon.d.ts +7 -0
  20. package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.d.ts +10 -0
  21. package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js +1 -0
  22. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts +70 -0
  23. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js +1 -0
  24. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts +30 -0
  25. package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js +133 -0
  26. package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts +15 -0
  27. package/dist/cjs/components/ProgressChecklist/ProgressStepper.js +1 -0
  28. package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts +19 -0
  29. package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js +1 -0
  30. package/dist/cjs/components/ProgressChecklist/index.d.ts +2 -0
  31. package/dist/cjs/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
  32. package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
  33. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
  34. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
  35. package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +25 -99
  36. package/dist/cjs/components/feature-announcements/constants/dimensions.js +1 -1
  37. package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
  38. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +2 -18
  39. package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
  40. package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +0 -36
  41. package/dist/cjs/components/feature-announcements/types/props.types.d.ts +3 -25
  42. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts +23 -0
  43. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js +1 -0
  44. package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts +12 -0
  45. package/dist/cjs/components/post-live-checklist/index.d.ts +2 -0
  46. package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +10 -0
  47. package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js +1 -0
  48. package/dist/cjs/components/post-live-checklist-item/index.d.ts +1 -0
  49. package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +0 -8
  50. package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
  51. package/dist/cjs/index.d.ts +3 -0
  52. package/dist/cjs/index.js +1 -1
  53. package/dist/esm/assets/icons/ActiveChecklistIcon.d.ts +3 -0
  54. package/dist/esm/assets/icons/ActiveChecklistIcon.js +1 -0
  55. package/dist/esm/assets/icons/CheckIndicatorIcon.d.ts +1 -0
  56. package/dist/esm/assets/icons/CheckIndicatorIcon.js +1 -0
  57. package/dist/esm/assets/icons/CompletedChecklistIcon.d.ts +3 -0
  58. package/dist/esm/assets/icons/CompletedChecklistIcon.js +1 -0
  59. package/dist/esm/assets/icons/CustomiseIcon.d.ts +7 -0
  60. package/dist/esm/assets/icons/EnableIcon.d.ts +7 -0
  61. package/dist/esm/assets/icons/GoLiveIcon.d.ts +7 -0
  62. package/dist/esm/assets/icons/InactiveChecklistIcon.d.ts +3 -0
  63. package/dist/esm/assets/icons/InactiveChecklistIcon.js +1 -0
  64. package/dist/esm/assets/icons/NudgesIcon.d.ts +7 -0
  65. package/dist/esm/assets/icons/OrderTrackingIcon.d.ts +7 -0
  66. package/dist/esm/assets/icons/ProgressBadgeIcon.d.ts +3 -0
  67. package/dist/esm/assets/icons/ShoppingIcon.d.ts +7 -0
  68. package/dist/esm/assets/icons/SmallCheckIcon.d.ts +3 -0
  69. package/dist/esm/assets/icons/SmallCheckIcon.js +1 -0
  70. package/dist/esm/assets/icons/SupportIcon.d.ts +7 -0
  71. package/dist/esm/assets/icons/TrainingIcon.d.ts +7 -0
  72. package/dist/esm/components/ProgressChecklist/MultiChecklistItem.d.ts +10 -0
  73. package/dist/esm/components/ProgressChecklist/MultiChecklistItem.js +1 -0
  74. package/dist/esm/components/ProgressChecklist/ProgressChecklist.d.ts +70 -0
  75. package/dist/esm/components/ProgressChecklist/ProgressChecklist.js +1 -0
  76. package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.d.ts +30 -0
  77. package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.js +133 -0
  78. package/dist/esm/components/ProgressChecklist/ProgressStepper.d.ts +15 -0
  79. package/dist/esm/components/ProgressChecklist/ProgressStepper.js +1 -0
  80. package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts +19 -0
  81. package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js +1 -0
  82. package/dist/esm/components/ProgressChecklist/index.d.ts +2 -0
  83. package/dist/esm/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
  84. package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
  85. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
  86. package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
  87. package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +25 -99
  88. package/dist/esm/components/feature-announcements/constants/dimensions.js +1 -1
  89. package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
  90. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +2 -18
  91. package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
  92. package/dist/esm/components/feature-announcements/types/feature.types.d.ts +0 -36
  93. package/dist/esm/components/feature-announcements/types/props.types.d.ts +3 -25
  94. package/dist/esm/components/post-live-checklist/PostLiveChecklist.d.ts +23 -0
  95. package/dist/esm/components/post-live-checklist/PostLiveChecklist.js +1 -0
  96. package/dist/esm/components/post-live-checklist/PostLiveChecklist.stories.d.ts +12 -0
  97. package/dist/esm/components/post-live-checklist/index.d.ts +2 -0
  98. package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.d.ts +10 -0
  99. package/dist/esm/components/post-live-checklist-item/PostLiveChecklistItem.js +1 -0
  100. package/dist/esm/components/post-live-checklist-item/index.d.ts +1 -0
  101. package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -8
  102. package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
  103. package/dist/esm/index.d.ts +3 -0
  104. package/dist/esm/index.js +1 -1
  105. package/package.json +1 -1
@@ -0,0 +1,2 @@
1
+ export { default as ProgressChecklist } from './ProgressChecklist';
2
+ export type { ChecklistItemType } from './ProgressChecklist';
@@ -36,7 +36,7 @@ export declare class MetaCustomProcessor {
36
36
  value: {
37
37
  operator: string;
38
38
  dataType: import("../types").QueryBuilderConnectorType;
39
- value?: string | number | string[] | number[] | Date | Date[] | undefined;
39
+ value?: string | number | Date | string[] | number[] | Date[] | undefined;
40
40
  };
41
41
  key: string;
42
42
  refresh?: boolean | undefined;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Menus: ({
3
2
  displayName: string;
4
3
  key: number;
@@ -1 +1 @@
1
- import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const m=m=>{let{children:b,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C,storeId:T,onAnnouncementShown:v,onAnnouncementInteracted:w}=m;var I;const{majorUpdateFeatures:B,minorUpdateFeatures:F,isLoading:E,markFeatureAsViewed:N}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C}),[j,P]=r(null),[U,W]=r(null),[V,M]=r(!1),[O,q]=r([]),[_,A]=r(!1),[L,R]=r([]),[$,z]=r(!1),[H,Z]=r(!1),[D,G]=r([]),[J,K]=r(!1),[Q,X]=r(!1),[Y,tt]=r(!1),[et,ot]=r(""),[nt,rt]=r(!1),[at,it]=r(!1),[st,dt]=r(!1),[lt,ut]=r(0),[ct,pt]=r(0),[ft,mt]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__floater {\n\t\t\t\tright: 12px !important;\n\t\t\t\tleft: auto !important;\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{ut((t=>t+1)),pt((t=>t+1)),it(!1),dt(!1),mt(new Set)}),[null==C?void 0:C.pathname]),a((()=>{if(!(B.length>0)||j||E||$||nt)0!==B.length||E||X(!0);else{X(!1),K(!1),M(!1),q([]),W(null),G([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?bt(B[0]):t<e?setTimeout(o,1e3):X(!0)};o()}}),[B,j,E,$,nt]),a((()=>{var t;const e=null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId;if(!e||E||0===F.length)return;const o=F.find((t=>t.id===e));if(!o||!o.featureTag)return;K(!0),Z(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];G(t),Tt(o,t),clearInterval(r)}else n>=25&&(Z(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[F,null===(I=null==C?void 0:C.query)||void 0===I?void 0:I.featureId,E]),a((()=>{var t;if(F.length>0&&!E&&!V&&!H&&!U&&!J&&Q&&!nt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||H||U||J||!Q)return;const r=F.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ft.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(G(r),Tt(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}V||n||H||U||J||!Q||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||H||U||J||!Q||r()}),200))})),e=()=>{V||n||H||U||J||!Q||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||H||U||J||!Q||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||H||U||J||!Q||r()}),100),setTimeout((()=>{n||H||U||J||!Q||r()}),1e3),setTimeout((()=>{n||H||U||J||!Q||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===F.length||E){(null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId)&&U||(M(!1),q([]),W(null),G([]),K(!1))}}),[F,E,V,H,U,J,Q,N,nt]);const bt=t=>{P(t);const o=B.findIndex((e=>e.id===t.id)),n=B.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),A(!0),v&&T&&v({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo})},gt=i((t=>{const e=t||j;e&&(z(!0),B.forEach((t=>{N(t.id)})),A(!1),P(null),R([]),X(!0),w&&T&&w({storeId:T,announcementId:e.id,announcementTitle:e.title,imageUrl:e.displayImage||e.image,videoUrl:e.productVideo,buttonClicked:"Skip",buttonName:"Skip",buttonUrl:void 0}),setTimeout((()=>{z(!1)}),500))}),[j,B,N]),ht=i((t=>{z(!0),N(t.id),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),A(!1),P(null),R([]);B.findIndex((e=>e.id===t.id))===B.length-1&&X(!0),w&&T&&w({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo,buttonClicked:"Primary",buttonName:t.buttonText||"Explore",buttonUrl:t.redirectUrl||t.productVideo}),setTimeout((()=>{z(!1)}),500)}),[B,N]),yt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n>0){const t=B[n-1];P(t);const o=n-1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[j,B]),xt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n<B.length-1){const t=B[n+1];P(t);const o=n+1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else z(!0),N(o.id),A(!1),P(null),R([]),X(!0),setTimeout((()=>{z(!1)}),500)}),[j,B,N]),kt=()=>{if(B.length>0&&!j){document.querySelector('[data-testid="whats-new-button"]')&&bt(B[0])}};a((()=>(window.showMajorUpdatePopup=kt,()=>{delete window.showMajorUpdatePopup})),[B,j]);const St=i((t=>{const{action:e}=t;e===d.CLOSE&&(j&&(z(!0),B.forEach((t=>{N(t.id)})),X(!0),setTimeout((()=>{z(!1)}),500)),A(!1),P(null),R([]))}),[j,B,N]),Ct=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(U){Z(!0),N(U.id);D.findIndex((t=>t.id===U.id))===D.length-1&&K(!0),setTimeout((()=>{Z(!1)}),500)}M(!1),W(null),q([])}}),[U,D,N]),Tt=(o,n)=>t(void 0,void 0,void 0,(function*(){W(o);const t=n||D,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>vt(o),onExplore:()=>wt(o),onPrevious:()=>It(o),onNext:()=>Bt(o),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(d),M(!0)})),vt=i((t=>{const e=t||U;if(e){Z(!0),N(e.id),mt((t=>new Set(t).add(e.id))),M(!1),W(null),q([]);const t=D.find((t=>t.id!==e.id&&!ft.has(t.id)));setTimeout((()=>{Z(!1),t?Tt(t,D):K(!0)}),500)}}),[U,D,N,ft]),wt=i((t=>{Z(!0),N(t.id),mt((e=>new Set(e).add(t.id))),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),M(!1),W(null),q([]);const e=D.find((e=>e.id!==t.id&&!ft.has(e.id)));setTimeout((()=>{Z(!1),e&&!t.productVideo?Tt(e,D):e||K(!0)}),500)}),[D,N,ft]),It=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n>0){const t=D[n-1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}}))),[U,D]),Bt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n<D.length-1){const t=D[n+1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}else Z(!0),K(!0),N(t.id),M(!1),W(null),q([]),setTimeout((()=>{Z(!1)}),500)}))),[U,D,N]);return o(n,{children:[b,L.length>0&&e(s,{steps:L,run:_,continuous:!1,showProgress:!1,showSkipButton:!1,callback:St,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:at?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${lt}`),O.length>0&&e(s,{steps:O,run:V,continuous:!1,showProgress:!1,showSkipButton:!1,callback:Ct,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:st?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:st?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${ct}`),e(f,{isOpen:Y,videoUrl:et,onClose:()=>{tt(!1),ot(""),rt(!1);const t=D.find((t=>!ft.has(t.id)));t?setTimeout((()=>{Tt(t,D)}),300):K(!0)}})]})};export{m as default};
1
+ import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const b=b=>{let{children:m,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}=b;var T;const{majorUpdateFeatures:w,minorUpdateFeatures:v,isLoading:B,markFeatureAsViewed:I}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}),[F,E]=r(null),[j,N]=r(null),[W,P]=r(!1),[M,O]=r([]),[q,V]=r(!1),[L,R]=r([]),[_,A]=r(!1),[U,$]=r(!1),[z,H]=r([]),[Z,D]=r(!1),[G,J]=r(!1),[K,Q]=r(!1),[X,Y]=r(""),[tt,et]=r(!1),[ot,nt]=r(!1),[rt,at]=r(!1),[it,st]=r(0),[dt,lt]=r(0),[ut,ct]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{st((t=>t+1)),lt((t=>t+1)),nt(!1),at(!1),ct(new Set)}),[null==k?void 0:k.pathname]),a((()=>{if(!(w.length>0)||F||B||_||tt)0!==w.length||B||J(!0);else{J(!1),D(!1),P(!1),O([]),N(null),H([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?pt(w[0]):t<e?setTimeout(o,1e3):J(!0)};o()}}),[w,F,B,_,tt]),a((()=>{var t;const e=null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId;if(!e||B||0===v.length)return;const o=v.find((t=>t.id===e));if(!o||!o.featureTag)return;D(!0),$(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];H(t),Ct(o,t),clearInterval(r)}else n>=25&&($(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[v,null===(T=null==k?void 0:k.query)||void 0===T?void 0:T.featureId,B]),a((()=>{var t;if(v.length>0&&!B&&!W&&!U&&!j&&!Z&&G&&!tt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||U||j||Z||!G)return;const r=v.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ut.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(H(r),Ct(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}W||n||U||j||Z||!G||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||U||j||Z||!G||r()}),200))})),e=()=>{W||n||U||j||Z||!G||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||U||j||Z||!G||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||U||j||Z||!G||r()}),100),setTimeout((()=>{n||U||j||Z||!G||r()}),1e3),setTimeout((()=>{n||U||j||Z||!G||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===v.length||B){(null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId)&&j||(P(!1),O([]),N(null),H([]),D(!1))}}),[v,B,W,U,j,Z,G,I,tt]);const pt=t=>{E(t);const o=w.findIndex((e=>e.id===t.id)),n=w.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),V(!0)},ft=i((t=>{(t||F)&&(A(!0),w.forEach((t=>{I(t.id)})),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500))}),[F,w,I]),bt=i((t=>{A(!0),I(t.id),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),V(!1),E(null),R([]);w.findIndex((e=>e.id===t.id))===w.length-1&&J(!0),setTimeout((()=>{A(!1)}),500)}),[w,I]),mt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n>0){const t=w[n-1];E(t);const o=n-1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[F,w]),gt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n<w.length-1){const t=w[n+1];E(t);const o=n+1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else A(!0),I(o.id),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500)}),[F,w,I]),ht=()=>{if(w.length>0&&!F){document.querySelector('[data-testid="whats-new-button"]')&&pt(w[0])}};a((()=>(window.showMajorUpdatePopup=ht,()=>{delete window.showMajorUpdatePopup})),[w,F]);const yt=i((t=>{const{action:e}=t;e===d.CLOSE&&(F&&(A(!0),w.forEach((t=>{I(t.id)})),J(!0),setTimeout((()=>{A(!1)}),500)),V(!1),E(null),R([]))}),[F,w,I]),xt=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(j){$(!0),I(j.id);z.findIndex((t=>t.id===j.id))===z.length-1&&D(!0),setTimeout((()=>{$(!1)}),500)}P(!1),N(null),O([])}}),[j,z,I]),Ct=(o,n)=>t(void 0,void 0,void 0,(function*(){N(o);const t=n||z,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>St(o),onExplore:()=>kt(o),onPrevious:()=>Tt(o),onNext:()=>wt(o),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(d),P(!0)})),St=i((t=>{const e=t||j;if(e){$(!0),I(e.id),ct((t=>new Set(t).add(e.id))),P(!1),N(null),O([]);const t=z.find((t=>t.id!==e.id&&!ut.has(t.id)));setTimeout((()=>{$(!1),t?Ct(t,z):D(!0)}),500)}}),[j,z,I,ut]),kt=i((t=>{$(!0),I(t.id),ct((e=>new Set(e).add(t.id))),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),P(!1),N(null),O([]);const e=z.find((e=>e.id!==t.id&&!ut.has(e.id)));setTimeout((()=>{$(!1),e&&!t.productVideo?Ct(e,z):e||D(!0)}),500)}),[z,I,ut]),Tt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n>0){const t=z[n-1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}}))),[j,z]),wt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n<z.length-1){const t=z[n+1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}else $(!0),D(!0),I(t.id),P(!1),N(null),O([]),setTimeout((()=>{$(!1)}),500)}))),[j,z,I]);return o(n,{children:[m,L.length>0&&e(s,{steps:L,run:q,continuous:!1,showProgress:!1,showSkipButton:!1,callback:yt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:ot?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${it}`),M.length>0&&e(s,{steps:M,run:W,continuous:!1,showProgress:!1,showSkipButton:!1,callback:xt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:rt?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:rt?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${dt}`),e(f,{isOpen:K,videoUrl:X,onClose:()=>{Q(!1),Y(""),et(!1);const t=z.find((t=>!ut.has(t.id)));t?setTimeout((()=>{Ct(t,z)}),300):D(!0)}})]})};export{b as default};
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as s}from"react";import{TEXT as a}from"./constants/index.js";import{getMajorPopupStyles as i}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as c,calculateCloseTransform as u,executeAfterAnimation as d}from"./utils/animationHelpers.js";import{findWhatsNewButton as p}from"./utils/elementHelpers.js";const g=g=>{let{feature:y,currentIndex:b,totalFeatures:h,onSkip:v,onExplore:j,onPrevious:f,onNext:m,setIsClosing:B,onSecondaryAction:O,ratio:k="16:9",padding:T}=g;const[x,w]=r(!1),[L,E]=r(!1),[C,M]=r(""),P=o(null),[U,_]=r(!1),[W,I]=r(!0),D=o(null);s((()=>{x&&E(!0)}),[x]);const S=()=>{j(),c(P.current);const t=p();if(t&&P.current){const e=u(P.current,t);M(e)}else M("scale(0)");null==B||B(!0),w(!0)},A=t=>{if(t.preventDefault(),t.stopPropagation(),y.secondaryButtonUrl){y.secondaryButtonUrl.startsWith("http")?window.open(y.secondaryButtonUrl,"_blank","noopener,noreferrer"):window.location.href=y.secondaryButtonUrl}O&&O(),c(P.current);const e=p();if(e&&P.current){const t=u(P.current,e);M(t)}else M("scale(0)");null==B||B(!0),w(!0)},H=i(L,C,k,T||y.padding,y.primaryButtonStyle,y.secondaryButtonStyle),F=t=>{t.stopPropagation(),D.current&&(D.current.paused?(D.current.play(),_(!1),I(!1)):(D.current.pause(),_(!0),I(!0)))};return t("div",Object.assign({ref:P,style:H.container},{children:[e("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),t("div",Object.assign({style:H.contentWrapper},{children:[e("div",Object.assign({style:H.imageContainer},{children:y.productVideo?t(n,{children:[e("video",{ref:D,src:y.productVideo,style:H.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,onClick:F,onPlay:()=>{I(!1)},onPause:()=>{I(!0)},"aria-label":`Product video for ${y.title}`}),(U||W)&&e("div",Object.assign({style:H.videoOverlay,onClick:F,role:"button",tabIndex:0,"aria-label":U?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),D.current&&(D.current.paused?(D.current.play(),_(!1),I(!1)):(D.current.pause(),_(!0),I(!0))))}},{children:e((()=>t("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",stroke:"currentColor",strokeWidth:"0",strokeLinecap:"round",strokeLinejoin:"round",style:H.playIcon},{children:[e("circle",{cx:"12",cy:"12",r:"10",fill:"rgba(0,0,0,0.5)",stroke:"none"}),e("polygon",{points:"10 8 16 12 10 16 10 8",fill:"#fff",stroke:"none"})]}))),{})}))]}):y.displayImage?e("img",{src:y.displayImage,alt:y.title,style:H.image,onError:t=>{y.image&&(t.target.src=y.image)}}):e("div",Object.assign({style:H.imagePlaceholder},{children:a.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:H.contentContainer},{children:[e("div",Object.assign({style:H.skipButtonContainer},{children:e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{c(P.current);const e=p();if(e&&P.current){const t=u(P.current,e);M(t)}else M("scale(0)");null==B||B(!0),w(!0),d(t)})(v)},style:H.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,H.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,H.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),e("h3",Object.assign({style:H.title},{children:y.title})),e("div",{"data-popup-content":!0,style:H.content,dangerouslySetInnerHTML:{__html:l(y.content||y.body||"")}}),t("div",Object.assign({style:H.actionsWrapper},{children:[t("div",Object.assign({style:H.buttonsGroup},{children:[y.redirectUrl?e("a",Object.assign({href:y.redirectUrl,target:y.redirectUrl.startsWith("http")?"_blank":"_self",rel:y.redirectUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:S,style:H.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,H.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,H.exploreButton.base)},{children:y.buttonText||a.DEFAULT_BUTTON_TEXT})):e("button",Object.assign({onClick:S,style:H.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,H.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,H.exploreButton.base)},{children:y.buttonText||a.DEFAULT_BUTTON_TEXT})),y.secondaryButtonText&&(y.secondaryButtonUrl?e("a",Object.assign({href:y.secondaryButtonUrl,target:y.secondaryButtonUrl.startsWith("http")?"_blank":"_self",rel:y.secondaryButtonUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:A,style:H.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,H.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,H.secondaryButton.base)},{children:y.secondaryButtonText})):e("button",Object.assign({onClick:A,style:H.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,H.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,H.secondaryButton.base)},{children:y.secondaryButtonText})))]})),h>1&&t("div",Object.assign({style:H.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),f()},disabled:0===b,style:H.navigationButton(0===b).base,onMouseEnter:t=>{0!==b&&Object.assign(t.currentTarget.style,H.navigationButton(!1).hover)},onMouseLeave:t=>{0!==b&&Object.assign(t.currentTarget.style,H.navigationButton(!1).base)}},{children:e("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{d:"M15 18L9 12L15 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),m()},disabled:b===h-1,style:H.navigationButton(b===h-1).base,onMouseEnter:t=>{b!==h-1&&Object.assign(t.currentTarget.style,H.navigationButton(!1).hover)},onMouseLeave:t=>{b!==h-1&&Object.assign(t.currentTarget.style,H.navigationButton(b===h-1).base)}},{children:e("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{d:"M9 18L15 12L9 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))}))]}))]}))]}))]}))]}))};export{g as default};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as s,useEffect as o}from"react";import{TEXT as r}from"./constants/index.js";import{getMajorPopupStyles as i}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as a}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as l,calculateCloseTransform as c,executeAfterAnimation as u}from"./utils/animationHelpers.js";import{findWhatsNewButton as g}from"./utils/elementHelpers.js";const b=b=>{let{feature:p,currentIndex:m,totalFeatures:d,onSkip:j,onExplore:v,onPrevious:y,onNext:O,setIsClosing:T}=b;const[h,E]=n(!1),[f,B]=n(!1),[I,x]=n(""),P=s(null);o((()=>{h&&B(!0)}),[h]);const C=i(f,I);return t("div",Object.assign({ref:P,style:C.container},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l(P.current);const e=g();if(e&&P.current){const t=c(P.current,e);x(t)}else x("scale(0)");null==T||T(!0),E(!0),u(t)})(j)},style:C.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.skipButton.base)},{children:r.SKIP_BUTTON})),e("div",Object.assign({style:C.imageContainer},{children:p.displayImage?e("img",{src:p.displayImage,alt:p.title,style:C.image,onError:t=>{p.image&&(t.target.src=p.image)}}):e("div",Object.assign({style:C.imagePlaceholder},{children:r.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:C.contentContainer},{children:[t("div",{children:[e("h3",Object.assign({style:C.title},{children:p.title})),e("div",{style:C.content,dangerouslySetInnerHTML:{__html:a(p.content||p.body||"")}}),e("button",Object.assign({onClick:()=>{v(),l(P.current);const t=g();if(t&&P.current){const e=c(P.current,t);x(e)}else x("scale(0)");null==T||T(!0),E(!0)},style:C.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.exploreButton.base)},{children:p.buttonText||r.DEFAULT_BUTTON_TEXT}))]}),d>1&&t("div",Object.assign({style:C.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),y()},disabled:0===m,style:C.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).base)}},{children:r.NAVIGATION_PREVIOUS})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:m===d-1,style:C.navigationButton(m===d-1).base,onMouseEnter:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(m===d-1).base)}},{children:r.NAVIGATION_NEXT}))]}))]}))]}))};export{b as default};
@@ -1,12 +1,16 @@
1
+ /**
2
+ * Popup dimension constants
3
+ */
1
4
  export declare const POPUP_DIMENSIONS: {
2
5
  readonly MAJOR: {
3
- readonly height: 224;
4
- readonly textAreaWidth: 398;
5
- readonly imageWidth: {
6
- readonly '16:9': 398;
7
- readonly '1:1': 224;
8
- readonly '4:3': 299;
9
- };
6
+ readonly width: 959;
7
+ readonly height: 274;
8
+ readonly imageWidth: 480;
9
+ readonly imageHeight: 274;
10
+ readonly imageInnerWidth: 464;
11
+ readonly imageInnerHeight: 258;
12
+ readonly imagePlaceholderWidth: 290;
13
+ readonly imagePlaceholderHeight: 258;
10
14
  };
11
15
  readonly MINOR: {
12
16
  readonly width: 519;
@@ -16,41 +20,20 @@ export declare const POPUP_DIMENSIONS: {
16
20
  readonly badgeHeight: 27;
17
21
  };
18
22
  };
19
- export declare const TEXT_LIMITS: {
20
- readonly MAJOR: {
21
- readonly TITLE: {
22
- readonly MAX_LINES: 2;
23
- };
24
- readonly CONTENT: {
25
- readonly MAX_LINES: 4;
26
- readonly MAX_CHARS: 360;
27
- readonly CHARS_PER_LINE: 72;
28
- };
29
- };
30
- };
31
23
  /**
32
24
  * Spacing constants
33
25
  */
34
26
  export declare const SPACING: {
35
27
  readonly MAJOR: {
36
- readonly containerPadding: "16px";
37
- readonly contentGap: "16px";
38
- readonly titleBottom: "0px";
39
- readonly listGap: "8px";
40
- readonly actionsTop: "16px";
41
- readonly headerMarginBottom: "8px";
42
- readonly contentMarginLeft: "0px";
43
- readonly skipButtonContainerMargin: "8px";
44
- readonly contentMargin: "0 0 0 0px";
45
- readonly imagePadding: "0px";
46
- readonly titlePadding: "0 0 0px 0";
47
- readonly buttonMarginTop: "0px";
48
- readonly skipButtonPadding: "2px 4px";
49
- readonly skipButtonTop: "8px";
50
- readonly skipButtonRight: "8px";
51
- readonly navigationBottom: "0px";
52
- readonly navigationRight: "0px";
53
- readonly navigationGap: "4px";
28
+ readonly contentMargin: "0 8px 0 0";
29
+ readonly imagePadding: "8px";
30
+ readonly titlePadding: "36px 0 0 0";
31
+ readonly buttonMarginTop: "16px";
32
+ readonly skipButtonTop: "10px";
33
+ readonly skipButtonRight: "10px";
34
+ readonly navigationBottom: "16px";
35
+ readonly navigationRight: "16px";
36
+ readonly navigationGap: "8px";
54
37
  };
55
38
  readonly MINOR: {
56
39
  readonly imageMargin: "13px 10px 13px 10px";
@@ -60,71 +43,14 @@ export declare const SPACING: {
60
43
  readonly actionsGap: "16px";
61
44
  };
62
45
  };
46
+ /**
47
+ * Border radius constants
48
+ */
63
49
  export declare const BORDER_RADIUS: {
64
- readonly POPUP: "8px";
65
- readonly IMAGE: "6px";
50
+ readonly POPUP: "4px";
51
+ readonly IMAGE: "4px";
66
52
  readonly BUTTON: "4px";
67
53
  readonly VIDEO_MODAL: "12px";
68
54
  readonly CLOSE_BUTTON: "50%";
69
55
  readonly SPOTLIGHT: "8px";
70
56
  };
71
- /**
72
- * Design tokens - Colors
73
- */
74
- export declare const DESIGN_COLORS: {
75
- readonly BACKGROUND: {
76
- readonly SURFACE: "#212121";
77
- readonly IMAGE: "#F0F0F0";
78
- };
79
- readonly TEXT: {
80
- readonly PRIMARY: "#FFFFFF";
81
- readonly SECONDARY: "rgba(255, 255, 255, 0.8)";
82
- readonly TERTIARY: "#BDBDBD";
83
- };
84
- readonly BUTTON: {
85
- readonly PRIMARY_TEXT: "#FEC02D";
86
- readonly PRIMARY_BORDER: "#FEC02D";
87
- };
88
- readonly ICON: {
89
- readonly DISABLED: "rgba(255, 255, 255, 0.3)";
90
- readonly ENABLED: "#FFFFFF";
91
- };
92
- };
93
- /**
94
- * Design tokens - Typography
95
- */
96
- export declare const DESIGN_TYPOGRAPHY: {
97
- readonly SKIP_BUTTON: {
98
- readonly fontSize: "14px";
99
- readonly fontWeight: "600";
100
- readonly lineHeight: "20px";
101
- readonly fontFamily: "Inter, sans-serif";
102
- };
103
- readonly TITLE: {
104
- readonly fontSize: "14px";
105
- readonly fontWeight: "600";
106
- readonly lineHeight: "20px";
107
- readonly fontFamily: "Inter, sans-serif";
108
- };
109
- readonly CONTENT: {
110
- readonly fontSize: "12px";
111
- readonly fontWeight: "400";
112
- readonly lineHeight: "16px";
113
- readonly fontFamily: "Inter, sans-serif";
114
- };
115
- readonly BUTTON: {
116
- readonly fontSize: "14px";
117
- readonly fontWeight: "600";
118
- readonly lineHeight: "20px";
119
- readonly fontFamily: "Inter, sans-serif";
120
- };
121
- };
122
- /**
123
- * Design tokens - Dimensions
124
- */
125
- export declare const DESIGN_DIMENSIONS: {
126
- readonly IMAGE_HEIGHT: 224;
127
- readonly NAVIGATION_BUTTON_SIZE: 24;
128
- readonly BUTTON_HEIGHT: 32;
129
- readonly BUTTON_PADDING_HORIZONTAL: "12px";
130
- };
@@ -1 +1 @@
1
- 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};
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};
@@ -27,7 +27,7 @@ export declare const minorStepStyles: {
27
27
  tooltip: {
28
28
  padding: number;
29
29
  backgroundColor: string;
30
- borderRadius: "8px";
30
+ borderRadius: "4px";
31
31
  border: string;
32
32
  filter: string;
33
33
  boxShadow: string;
@@ -101,7 +101,7 @@ export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
101
101
  tooltip: {
102
102
  padding: number;
103
103
  backgroundColor: string;
104
- borderRadius: "8px";
104
+ borderRadius: "4px";
105
105
  border: string;
106
106
  filter: string;
107
107
  boxShadow: string;
@@ -1,9 +1,6 @@
1
1
  import { CSSProperties } from 'react';
2
- import { ButtonStyle } from '../types/feature.types';
3
- export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string, ratio?: '16:9' | '1:1' | '4:3', padding?: string, primaryButtonStyle?: ButtonStyle, secondaryButtonStyle?: ButtonStyle) => {
2
+ export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
4
3
  container: CSSProperties;
5
- headerContainer: CSSProperties;
6
- contentWrapper: CSSProperties;
7
4
  skipButton: {
8
5
  base: CSSProperties;
9
6
  hover: CSSProperties;
@@ -11,29 +8,16 @@ export declare const getMajorPopupStyles: (startAnimation: boolean, transform: s
11
8
  imageContainer: CSSProperties;
12
9
  image: CSSProperties;
13
10
  imagePlaceholder: CSSProperties;
14
- videoOverlay: CSSProperties;
15
- playIcon: CSSProperties;
16
11
  contentContainer: CSSProperties;
17
- skipButtonContainer: CSSProperties;
18
12
  title: CSSProperties;
19
13
  content: CSSProperties;
20
- actionsWrapper: CSSProperties;
21
- buttonsGroup: CSSProperties;
22
14
  exploreButton: {
23
15
  base: CSSProperties;
24
16
  hover: CSSProperties;
25
17
  };
26
- secondaryButton: {
27
- base: CSSProperties;
28
- hover: CSSProperties;
29
- };
30
18
  navigationContainer: CSSProperties;
31
19
  navigationButton: (disabled: boolean) => {
32
20
  base: CSSProperties;
33
- hover: {
34
- backgroundColor: string;
35
- } | {
36
- backgroundColor?: undefined;
37
- };
21
+ hover: CSSProperties;
38
22
  };
39
23
  };
@@ -1 +1 @@
1
- import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as o}from"../constants/animations.js";import{SPACING as n,POPUP_DIMENSIONS as e,DESIGN_COLORS as i,BORDER_RADIUS as r,DESIGN_TYPOGRAPHY as a,DESIGN_DIMENSIONS as l}from"../constants/dimensions.js";const d=(t,o)=>Object.assign(Object.assign(Object.assign(Object.assign({},t),(null==o?void 0:o.textColor)&&{color:o.textColor}),(null==o?void 0:o.backgroundColor)&&{backgroundColor:o.backgroundColor}),(null==o?void 0:o.borderColor)&&{borderColor:o.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]:n.MAJOR.containerPadding,p=arguments.length>4?arguments[4]:void 0,f=arguments.length>5?arguments[5]:void 0;const h=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"16:9";return e.MAJOR.imageWidth[t]||e.MAJOR.imageWidth["16:9"]}(c),u=parseInt(T,10)||16,O=l.IMAGE_HEIGHT+2*u;return{container:{width:`${u+h+parseInt(n.MAJOR.contentGap,10)+e.MAJOR.textAreaWidth+u}px`,height:"auto",minHeight:`${O}px`,display:"flex",flexDirection:"column",backgroundColor:i.BACKGROUND.SURFACE,borderRadius:r.BUTTON,overflow:"hidden",position:"relative",padding:T,transform:g?s:"scale(1)",opacity:g?0:1,transition:o,boxSizing:"border-box"},headerContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.headerMarginBottom,position:"relative"},contentWrapper:{display:"flex",flex:1,gap:n.MAJOR.contentGap},skipButton:{base:{background:"transparent",border:"none",color:i.TEXT.TERTIARY,fontSize:a.SKIP_BUTTON.fontSize,fontWeight:a.SKIP_BUTTON.fontWeight,cursor:"pointer",transition:"all 0.2s",padding:n.MAJOR.skipButtonPadding,borderRadius:r.BUTTON,fontFamily:a.SKIP_BUTTON.fontFamily,lineHeight:a.SKIP_BUTTON.lineHeight},hover:{backgroundColor:"rgba(255, 255, 255, 0.1)",color:i.TEXT.PRIMARY}},imageContainer:{backgroundColor:i.BACKGROUND.IMAGE,width:`${h}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:n.MAJOR.contentMarginLeft,flexDirection:"column",justifyContent:"flex-start",background:"transparent",maxWidth:`${e.MAJOR.textAreaWidth}px`,gap:n.MAJOR.listGap},skipButtonContainer:{width:"100%",display:"flex",justifyContent:"flex-end",marginBottom:n.MAJOR.skipButtonContainerMargin},title:{fontSize:a.TITLE.fontSize,fontWeight:a.TITLE.fontWeight,marginBottom:n.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:n.MAJOR.actionsTop,gap:"8px",flexWrap:"nowrap"},buttonsGroup:{display:"flex",alignItems:"center",gap:n.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`,transition:"all 0.2s",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`,transition:"all 0.2s",textAlign:"center",minWidth:"auto",textDecoration:"none",display:"inline-flex",alignItems:"center",justifyContent:"center",fontFamily:a.BUTTON.fontFamily,lineHeight:a.BUTTON.lineHeight},f),hover:{backgroundColor:(null==f?void 0:f.backgroundColor)?`${f.backgroundColor}cc`:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{display:"flex",gap:n.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:`${l.NAVIGATION_BUTTON_SIZE}px`,height:`${l.NAVIGATION_BUTTON_SIZE}px`,backgroundColor:"transparent",border:"none",color:t?i.ICON.DISABLED:i.ICON.ENABLED,fontSize:"16px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s",borderRadius:r.BUTTON,padding:0},hover:t?{}:{backgroundColor:"rgba(255, 255, 255, 0.1)"}})}};export{g as getMajorPopupStyles};
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};
@@ -5,14 +5,6 @@ export interface FirestoreTimestamp {
5
5
  seconds: number;
6
6
  nanoseconds?: number;
7
7
  }
8
- /**
9
- * Button styling configuration
10
- */
11
- export interface ButtonStyle {
12
- textColor?: string;
13
- backgroundColor?: string;
14
- borderColor?: string;
15
- }
16
8
  /**
17
9
  * Feature announcement data model
18
10
  */
@@ -35,16 +27,6 @@ export interface FeatureAnnouncement {
35
27
  archived?: boolean;
36
28
  createdAt: FirestoreTimestamp;
37
29
  expirationDate?: FirestoreTimestamp | string | Date;
38
- primaryButtonText?: string;
39
- primaryButtonStyle?: ButtonStyle;
40
- primaryButtonAction?: 'Play Video' | 'Open link';
41
- primaryButtonRedirectionUrl?: string;
42
- secondaryButtonText?: string;
43
- secondaryButtonUrl?: string;
44
- secondaryButtonAction?: 'Open link' | 'Close popup' | '';
45
- secondaryButtonRedirectionUrl?: string;
46
- secondaryButtonStyle?: ButtonStyle;
47
- padding?: string;
48
30
  }
49
31
  /**
50
32
  * Store feature progress tracking
@@ -57,21 +39,3 @@ export interface StoreFeatureProgress {
57
39
  * Feature update types
58
40
  */
59
41
  export type FeatureUpdateType = 'Major' | 'Minor';
60
- /**
61
- * Announcement event data (for tracking when announcement is shown)
62
- */
63
- export interface AnnouncementEvent {
64
- storeId: string;
65
- announcementId: string;
66
- announcementTitle: string;
67
- imageUrl?: string;
68
- videoUrl?: string;
69
- }
70
- /**
71
- * Announcement interaction event data (for tracking button clicks)
72
- */
73
- export interface AnnouncementInteractionEvent extends AnnouncementEvent {
74
- buttonClicked: 'Primary' | 'Secondary' | 'Skip';
75
- buttonName: string;
76
- buttonUrl?: string;
77
- }
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { AnnouncementEvent, AnnouncementInteractionEvent, FeatureAnnouncement } from './feature.types';
2
+ import { FeatureAnnouncement } from './feature.types';
3
3
  import { FeatureAnnouncementRepository } from './repository.types';
4
4
  import { RouterProps } from './router.types';
5
5
  /**
@@ -14,27 +14,17 @@ export interface PopupBaseProps {
14
14
  onPrevious: () => void;
15
15
  onNext: () => void;
16
16
  setIsClosing?: (isClosing: boolean) => void;
17
- onSecondaryAction?: () => void;
18
17
  }
19
18
  /**
20
19
  * Major update popup props
21
20
  */
22
21
  export interface MajorUpdatePopupProps extends PopupBaseProps {
23
- /**
24
- * Aspect ratio for the image/video container
25
- * @default '16:9'
26
- */
27
- ratio?: '16:9' | '1:1' | '4:3';
28
- /**
29
- * Custom padding for the popup container
30
- * @default '16px'
31
- */
32
- padding?: string;
33
22
  }
34
23
  /**
35
24
  * Minor update popup props
36
25
  */
37
- export type MinorUpdatePopupProps = PopupBaseProps;
26
+ export interface MinorUpdatePopupProps extends PopupBaseProps {
27
+ }
38
28
  /**
39
29
  * Video modal props
40
30
  */
@@ -50,16 +40,4 @@ export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRep
50
40
  children: React.ReactNode;
51
41
  module?: string;
52
42
  router?: RouterProps;
53
- /**
54
- * Store ID for event tracking
55
- */
56
- storeId?: string;
57
- /**
58
- * Callback fired when a major announcement popup is shown
59
- */
60
- onAnnouncementShown?: (event: AnnouncementEvent) => void;
61
- /**
62
- * Callback fired when user interacts with an announcement (clicks a button)
63
- */
64
- onAnnouncementInteracted?: (event: AnnouncementInteractionEvent) => void;
65
43
  }
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ export interface ChecklistItem {
3
+ id: string;
4
+ isCompleted: boolean;
5
+ isOpen?: boolean;
6
+ header: string;
7
+ image?: string;
8
+ subHeader?: string;
9
+ }
10
+ export interface ButtonGroupItem {
11
+ id: string;
12
+ title: string;
13
+ icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
14
+ }
15
+ export interface PostLiveChecklistProps {
16
+ title?: string;
17
+ subtitle?: string;
18
+ marketingChecklist?: ChecklistItem[];
19
+ supportChecklist?: ChecklistItem[];
20
+ onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
21
+ useCaseType?: 'marketing' | 'support' | 'both' | string;
22
+ }
23
+ export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;
@@ -0,0 +1 @@
1
+ import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{useState as r,useEffect as s}from"react";import{ButtonGroup as o}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as n}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as a,BodySecondary as l}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";const d=d=>{let{title:m="Boost Performance",subtitle:c="Enable these features to make your assistant smarter",marketingChecklist:u=[],supportChecklist:g=[],onChecklistSetup:h,useCaseType:b}=d;var f;const[k,C]=r("marketing"),[y,j]=r("none"),[v,O]=r("marketing");s((()=>{const e=u.filter((e=>!e.isCompleted)).length,t=g.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?j("tabs"):(j("list"),e>0&&O("marketing"),t>0&&O("support")):j("none")}),[u,g]);const x=(()=>{const e=[{id:"marketing",title:"Marketing"},{id:"support",title:"Support"}];if(!b)return e;return"support"===String(b).toLowerCase()?[e[1],e[0]]:e})();s((()=>{"tabs"===y&&x.length>0&&C(x[0].id)}),[y,b]);const S=e=>e.toUpperCase(),T=(e,t)=>{h&&h(e,t)};if("none"===y)return null;const B="tabs"===y?"marketing"===k?u:g:"marketing"===v?u:g;return e("div",Object.assign({style:{padding:16,border:`1px solid ${p.stroke.primary}`,backgroundColor:p.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(a,Object.assign({color:"#4B1583"},{children:m})),t(l,Object.assign({color:(null===(f=p.content)||void 0===f?void 0:f.secondary)||"#666666"},{children:c}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===y?e(i,{children:[t(o,{size:"medium",gap:"12px",onButtonClick:e=>C(e),activeButtonId:k,buttonGroup:x}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:B.map((e=>t(n,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>T(e.id,S(k))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:B.map((e=>t(n,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>T(e.id,S(v))},e.id)))}))}))]}))};export{d as PostLiveChecklist};
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
3
+ declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
4
+ export default _default;
5
+ export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
6
+ export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
7
+ export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
8
+ export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
9
+ export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
10
+ export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
11
+ export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
12
+ export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
@@ -0,0 +1,2 @@
1
+ export { PostLiveChecklist } from './PostLiveChecklist';
2
+ export type { PostLiveChecklistProps, ChecklistItem, } from './PostLiveChecklist';
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ export interface PostLiveChecklistItemProps {
3
+ isCompleted: boolean;
4
+ header: string;
5
+ subHeader?: string;
6
+ isOpen?: boolean;
7
+ onSetup?: () => void;
8
+ image?: string;
9
+ }
10
+ export declare const PostLiveChecklistItem: React.FC<PostLiveChecklistItemProps>;
@@ -0,0 +1 @@
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{CheckIndicatorIcon as i}from"../../assets/icons/CheckIndicatorIcon.js";import s from"../../assets/icons/chevronDownOutline.svg.js";import n from"../../assets/icons/chevronUpOutline.svg.js";import{useState as r,useEffect as o}from"react";import{Button as c}from"../button/Button.js";import{TitleSmall as l,BodyCaption as d}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";const p=p=>{const{isCompleted:m,header:f,subHeader:g,isOpen:h=!1}=p,{onSetup:u}=p,[y,b]=r(h);return o((()=>{b(h)}),[h]),e("div",Object.assign({style:{backgroundColor:y?a.surface.subdued:a.surface.standard,borderRadius:8}},{children:[e("div",Object.assign({style:{color:a.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:m?"default":"pointer"},onClick:()=>!m&&b(!y)},{children:[t(l,Object.assign({color:y?"#4B1583":a.content.primary},{children:f})),m?t(i,{}):t(y?n:s,{width:24,height:24,color:a.content.secondary})]})),t("div",{children:y&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[t("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:t("img",{src:p.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[t("div",Object.assign({style:{flex:2}},{children:t(d,Object.assign({color:a.content.secondary,numberOfLines:3},{children:g}))})),t("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:t(c,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{u&&u()}})}))]}))]}))}))})]}))};export{p as PostLiveChecklistItem};
@@ -0,0 +1 @@
1
+ export * from './PostLiveChecklistItem';
@@ -12,14 +12,6 @@ export interface WhatsNewContent {
12
12
  createdAt: any;
13
13
  module: string[];
14
14
  visibility: boolean;
15
- primaryButtonText?: string;
16
- primaryButtonAction?: 'Play Video' | 'Open link';
17
- primaryButtonRedirectionUrl?: string;
18
- secondaryButtonText?: string;
19
- secondaryButtonAction?: 'Open link' | 'Close popup' | '';
20
- secondaryButtonRedirectionUrl?: string;
21
- featureUpdateType?: 'Major' | 'Minor';
22
- displayImage?: string;
23
15
  }
24
16
  export interface WhatsNewProviderProps {
25
17
  children: React.ReactNode;
@@ -1 +1 @@
1
- import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{format as n,differenceInBusinessDays as o}from"date-fns";import{useState as i,useMemo as a}from"react";import s from"../../assets/icons/searchIcon.svg.js";import c from"../../assets/icons/whatsNew.svg.js";import{COLORS as d}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{VideoModal as h}from"../feature-announcements/VideoModal.js";import{SearchBar as m}from"../searchBar/searchBar.js";import{SideModal as p}from"../side-modal/SideModal.js";import{TitleMedium as u,TitleRegular as w,BodyPrimary as g,Caption as f,TitleSmall as b}from"../TypographyStyle.js";import{MainContainer as y,WhatsNewWrapper as j,MainCardContainer as C,BackgroundImageContainer as O}from"./WhatsNew.styles.js";const x=x=>{let{isOpen:N,onClose:v,content:k,isLoading:A=!1,title:B="What's new on BIK",searchPlaceholder:D="Search posts",emptyStateTitle:L="Nothing new!",emptyStateDescription:S="There are no new updates or features at the moment. Check back soon!",noResultsText:T="Sorry, no results found.",width:M="480px",onContentClick:U,renderCustomContent:V}=x;const[W,R]=i(""),[_,E]=i(!1),[I,P]=i(""),z=e=>{if(!e.createdAt)return!1;const t=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return o(new Date,t)<7},F=a((()=>{if(!W.trim())return k;const e=W.toLowerCase();return k.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[k,W]),H=e=>{const t=e.trim();try{const e=new URL(t,window.location.origin);e.origin===window.location.origin?window.location.href=e.href:window.open(e.href,"_blank","noopener,noreferrer")}catch(e){t.startsWith("/")||t.startsWith(".")?window.location.href=t:/^https?:\/\//i.test(t)&&window.open(t,"_blank","noopener,noreferrer")}},K=0===k.length,$=0===F.length;return N?r(p,Object.assign({width:M,onClose:v,header:"",headerCustomComponent:e(u,Object.assign({color:d.background.inverse},{children:B})),headerStyle:{background:d.background.brandLight},hideFooter:!0},{children:[r(y,{children:[e("div",Object.assign({className:"mt-8"},{children:e(m,{width:"100%",isEnabled:!K,onChange:e=>{R(e)},onEnter:e=>{R(e)},placeholder:D,variant:"default",searchValue:W,onClickCross:()=>{R("")}})})),e(j,{children:K||$?r("div",Object.assign({className:"no--data--found"},{children:[e("div",Object.assign({className:"icon--wrapper"},{children:e(K?c:s,{width:32,height:32})})),K?r(t,{children:[e(w,{children:L}),e(g,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:S}))]}):$?e(g,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:T})):null]})):e("div",Object.assign({className:"scroller"},{children:F.map(((o,i)=>V?V(o):r(C,Object.assign({className:"padding--16 mb-mt-8"},{children:[e(O,{imageUrl:o.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e("div",Object.assign({className:"mt-20 full--width"},{children:r("div",Object.assign({className:"created--at flex flex--row"},{children:[z(o)?e("div",Object.assign({className:"new--content--tag"},{children:e(f,{children:"New"})})):e(t,{}),e(f,Object.assign({style:{color:d.content.placeholder}},{children:o.createdAt?n(o.createdAt.toDate?o.createdAt.toDate():new Date(o.createdAt),"dd MMMM yyyy"):""}))]}))})),e("div",Object.assign({className:"mt--8"},{children:e(b,{children:o.title})})),e("div",{dangerouslySetInnerHTML:{__html:o.body},className:"card--desc mt--12"}),e("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e(l,{buttonText:o.buttonText||"Explore the feature",onClick:()=>(e=>{"Play Video"===e.primaryButtonAction?e.productVideo&&(P(e.productVideo),E(!0)):"Open link"===e.primaryButtonAction?e.primaryButtonRedirectionUrl&&H(e.primaryButtonRedirectionUrl):e.productVideo?(P(e.productVideo),E(!0)):e.redirectUrl&&H(e.redirectUrl),U&&U(e)})(o),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${i}`)))}))})]}),e(h,{isOpen:_,videoUrl:I,onClose:()=>{E(!1)}})]})):e(t,{})};export{x as WhatsNewPanel};
1
+ import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{format as r,differenceInBusinessDays as s}from"date-fns";import{useState as a,useMemo as o}from"react";import i from"../../assets/icons/searchIcon.svg.js";import c from"../../assets/icons/whatsNew.svg.js";import{COLORS as d}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{VideoModal as h}from"../feature-announcements/VideoModal.js";import{SearchBar as m}from"../searchBar/searchBar.js";import{SideModal as u}from"../side-modal/SideModal.js";import{TitleMedium as g,TitleRegular as p,BodyPrimary as b,Caption as w,TitleSmall as f}from"../TypographyStyle.js";import{MainContainer as j,WhatsNewWrapper as y,MainCardContainer as C,BackgroundImageContainer as x}from"./WhatsNew.styles.js";const N=N=>{let{isOpen:O,onClose:v,content:k,isLoading:A=!1,title:D="What's new on BIK",searchPlaceholder:S="Search posts",emptyStateTitle:T="Nothing new!",emptyStateDescription:L="There are no new updates or features at the moment. Check back soon!",noResultsText:M="Sorry, no results found.",width:W="480px",onContentClick:B,renderCustomContent:U}=N;const[V,E]=a(""),[I,_]=a(!1),[P,R]=a(""),z=e=>{if(!e.createdAt)return!1;const t=e.createdAt.toDate?e.createdAt.toDate():new Date(e.createdAt);return s(new Date,t)<7},F=o((()=>{if(!V.trim())return k;const e=V.toLowerCase();return k.filter((t=>t.title.toLowerCase().includes(e)||t.body.toLowerCase().includes(e)||t.content&&t.content.toLowerCase().includes(e)))}),[k,V]),H=0===k.length,K=0===F.length;return O?n(u,Object.assign({width:W,onClose:v,header:"",headerCustomComponent:e(g,Object.assign({color:d.background.inverse},{children:D})),headerStyle:{background:d.background.brandLight},hideFooter:!0},{children:[n(j,{children:[e("div",Object.assign({className:"mt-8"},{children:e(m,{width:"100%",isEnabled:!H,onChange:e=>{E(e)},onEnter:e=>{E(e)},placeholder:S,variant:"default",searchValue:V,onClickCross:()=>{E("")}})})),e(y,{children:H||K?n("div",Object.assign({className:"no--data--found"},{children:[e("div",Object.assign({className:"icon--wrapper"},{children:e(H?c:i,{width:32,height:32})})),H?n(t,{children:[e(p,{children:T}),e(b,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:L}))]}):K?e(b,Object.assign({color:d.content.secondary,className:"text--align",style:{maxWidth:300}},{children:M})):null]})):e("div",Object.assign({className:"scroller"},{children:F.map(((s,a)=>U?U(s):n(C,Object.assign({className:"padding--16 mb-mt-8"},{children:[e(x,{imageUrl:s.image,height:"209px",width:"100%",style:{borderRadius:"4px"}}),e("div",Object.assign({className:"mt-20 full--width"},{children:n("div",Object.assign({className:"created--at flex flex--row"},{children:[z(s)?e("div",Object.assign({className:"new--content--tag"},{children:e(w,{children:"New"})})):e(t,{}),e(w,Object.assign({style:{color:d.content.placeholder}},{children:s.createdAt?r(s.createdAt.toDate?s.createdAt.toDate():new Date(s.createdAt),"dd MMMM yyyy"):""}))]}))})),e("div",Object.assign({className:"mt--8"},{children:e(f,{children:s.title})})),e("div",{dangerouslySetInnerHTML:{__html:s.body},className:"card--desc mt--12"}),e("div",Object.assign({className:"flex flex--row mt-20 full--width"},{children:e(l,{buttonText:s.buttonText||"Explore the feature",onClick:()=>(e=>{e.productVideo?(R(e.productVideo),_(!0)):e.redirectUrl&&window.open(e.redirectUrl,"_blank"),B&&B(e)})(s),matchParentWidth:!0,size:"medium"})}))]}),`whats-new-${a}`)))}))})]}),e(h,{isOpen:I,videoUrl:P,onClose:()=>{_(!1)}})]})):e(t,{})};export{N as WhatsNewPanel};
@@ -101,5 +101,8 @@ export * from './components/dot-pulse';
101
101
  export * from './components/bik-chatbot';
102
102
  export * from './components/banner';
103
103
  export * from './components/feature-announcements';
104
+ export * from './components/post-live-checklist-item';
105
+ export * from './components/post-live-checklist';
106
+ export * from './components/ProgressChecklist';
104
107
  export * from './components/BikGiftedChat';
105
108
  export * from './components/markdown';