@bikdotai/bik-component-library 0.0.749-beta.8 → 0.0.749
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.
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/code-block/CodeBlock.js +1 -1
- package/dist/cjs/components/code-block/CodeBlock.styled.js +7 -6
- package/dist/cjs/components/code-block/CodeBlockHelper.js +1 -1
- package/dist/cjs/components/code-block/keywordMap.js +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/constants/dimensions.d.ts +25 -99
- package/dist/cjs/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/cjs/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.d.ts +1 -13
- package/dist/cjs/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/cjs/components/feature-announcements/types/feature.types.d.ts +0 -47
- package/dist/cjs/components/feature-announcements/types/props.types.d.ts +3 -25
- package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +0 -6
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/QueryBuilder/helpers/MetaCustomProcessor.d.ts +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/code-block/CodeBlock.js +1 -1
- package/dist/esm/components/code-block/CodeBlock.styled.js +7 -6
- package/dist/esm/components/code-block/CodeBlockHelper.js +1 -1
- package/dist/esm/components/code-block/keywordMap.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/constants/dimensions.d.ts +25 -99
- package/dist/esm/components/feature-announcements/constants/dimensions.js +1 -1
- package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts +2 -2
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts +1 -13
- package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js +1 -1
- package/dist/esm/components/feature-announcements/types/feature.types.d.ts +0 -47
- package/dist/esm/components/feature-announcements/types/props.types.d.ts +3 -25
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -6
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/assets/icons/play.svg.js +0 -1
- package/dist/esm/assets/icons/play.svg.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -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
|
|
39
|
+
value?: string | number | Date | string[] | number[] | Date[] | undefined;
|
|
40
40
|
};
|
|
41
41
|
key: string;
|
|
42
42
|
refresh?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("react-toastify"),o=require("./CodeBlock.styled.js"),s=require("./CodeBlockHelper.js"),n=require("./types.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}exports.CodeBlock=c=>{let{code:d="",language:l=n.CodeLanguage.JAVASCRIPT,title:u="",hideLineNumbers:h=!1,maxHeight:j="400px",maxWidth:g,theme:p="dark",hideHeader:m=!1,hideCopy:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("react-toastify"),o=require("./CodeBlock.styled.js"),s=require("./CodeBlockHelper.js"),n=require("./types.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}exports.CodeBlock=c=>{let{code:d="",language:l=n.CodeLanguage.JAVASCRIPT,title:u="",hideLineNumbers:h=!1,maxHeight:j="400px",maxWidth:g,theme:p="dark",hideHeader:m=!1,hideCopy:b=!1}=c;const[f,x]=r.useState(!1),[v,C]=r.useState(d);r.useEffect((()=>{let t=!0;return e.__awaiter(void 0,void 0,void 0,(function*(){try{const r=yield(e=`./languageSpecificFormatting/${l}_file.ts`,Promise.resolve().then((function(){return a(require(e))})));if((null==r?void 0:r.format)&&t)return void C(r.format(d))}catch(e){}var e;t&&C(d)})),()=>{t=!1}}),[d,l]);const y=v.split("\n");return t.jsxs(o.Container,Object.assign({themeMode:p,maxWidth:g},{children:[!m&&t.jsxs(o.Header,Object.assign({themeMode:p},{children:[t.jsxs(o.TitleSection,{children:[!!u&&u&&t.jsx(o.Title,Object.assign({themeMode:p},{children:u})),t.jsx(o.LanguageBadge,Object.assign({bg:(O=l,{javascript:"#FEC02D",python:"#3776ab",java:"#ed8b00",css:"#1572b6",html:"#e34c26",json:"#000000"}[O.toLowerCase()]||("dark"===p?"#6e7681":"#656d76")),color:(e=>{const t={javascript:"#000"};return(null==t?void 0:t[e.toLowerCase()])||"#fff"})(l)},{children:l}))]}),!b&&t.jsx(o.CopyButton,Object.assign({themeMode:p,onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){try{yield navigator.clipboard.writeText(d),x(!0),i.toast.success("Code copied to clipboard!",{position:"top-right",autoClose:2e3,hideProgressBar:!0}),setTimeout((()=>x(!1)),2e3)}catch(e){i.toast.error("Failed to copy code",{position:"top-right",autoClose:2e3})}}))},{children:f?t.jsx(t.Fragment,{children:"✓ Copied"}):t.jsx(t.Fragment,{children:"Copy"})}))]})),t.jsxs(o.CodeContainer,Object.assign({maxHeight:j},{children:[!h&&t.jsx(o.LineNumbers,Object.assign({themeMode:p},{children:y.map(((e,r)=>t.jsx("div",{children:r+1},r)))})),t.jsx(o.Code,Object.assign({themeMode:p},{children:y.map(((e,r)=>t.jsx("div",{style:{minHeight:e.trim()?"20px":"0px"},dangerouslySetInnerHTML:{__html:s.highlightCode(e,l,p)||" "}},r)))}))]}))]}));var O};
|
|
@@ -40,15 +40,16 @@
|
|
|
40
40
|
color: ${e=>{let{color:r}=e;return r||"#ffffff"}};
|
|
41
41
|
padding: 2px 6px;
|
|
42
42
|
border-radius: 4px;
|
|
43
|
-
font-size:
|
|
44
|
-
font-weight:
|
|
45
|
-
text-transform:
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
font-weight: 400;
|
|
45
|
+
text-transform: Capitalize;
|
|
46
|
+
font-family: Inter;
|
|
46
47
|
`,l=r.default.button`
|
|
47
48
|
background-color: transparent;
|
|
48
49
|
border: 1px solid
|
|
49
|
-
${e=>{let{themeMode:r}=e;return"dark"===r?"#30363d":"#
|
|
50
|
+
${e=>{let{themeMode:r}=e;return"dark"===r?"#30363d":"#616161"}};
|
|
50
51
|
border-radius: 4px;
|
|
51
|
-
padding: 4px
|
|
52
|
+
padding: 4px 12px;
|
|
52
53
|
color: ${e=>{let{themeMode:r}=e;return"dark"===r?"#f0f6fc":"#24292f"}};
|
|
53
54
|
font-size: 12px;
|
|
54
55
|
cursor: pointer;
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
align-items: center;
|
|
57
58
|
gap: 4px;
|
|
58
59
|
transition: background-color 0.2s ease;
|
|
59
|
-
|
|
60
|
+
font-family: Inter;
|
|
60
61
|
&:hover {
|
|
61
62
|
background-color: ${e=>{let{themeMode:r}=e;return"dark"===r?"#21262d":"#f3f4f6"}};
|
|
62
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./keywordMap.js");const o={javascript:require("./languageSpecificFormatting/javascript_file.js")},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./keywordMap.js");const o={javascript:require("./languageSpecificFormatting/javascript_file.js")},l=e=>{let o=0;for(let l=0;l<e.length;l++)o=(o<<5)-o+e.charCodeAt(l),o|=0;return Math.abs(o)};exports.highlightCode=function(r,s){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"dark";const a=r.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");const c=e.keywordsMap[s.toLowerCase()]||[],t=(r=>{let{theme:s,lang:n}=r;var a,c;const t=e.keywordsMap[n.toLowerCase()]||[],g={};let i={},p=[];const d=o[n.toLowerCase()];if(d)try{i=(null===(a=d.colorOverWrite)||void 0===a?void 0:a.call(d,s))||{},p=(null===(c=d.colorMap)||void 0===c?void 0:c.call(d,s))||[],console.log(`Formatter found for ${n} (${s}):`,{overrides:Object.keys(i),colorMapLength:p.length,colorMapColors:p})}catch(e){console.warn(`Failed to load formatting for ${n}:`,e)}else console.log(`No formatter found for ${n}`);const f="dark"===s?{primary:"#79c0ff",secondary:"#a5d6ff",tertiary:"#ff7b72",quaternary:"#d2a8ff"}:{primary:"#0969da",secondary:"#207d57ff",tertiary:"#d1242f",quaternary:"#8250df"},u=Object.values(f);return console.log(`Processing ${t.length} keywords for ${n}`),t.forEach((e=>{if(null==i?void 0:i[e])g[e]=i[e],["function","console","log"].includes(e)&&console.log(`${e}: using override color ${i[e]}`);else if(p&&p.length>0){const o=l(e)%p.length;g[e]=p[o],["function","console","log"].includes(e)&&console.log(`${e}: using colorMap[${o}] = ${p[o]}`)}else{const o=l(e)%u.length;g[e]=u[o],["function","console","log"].includes(e)&&console.log(`${e}: using fallback color ${u[o]}`)}})),g})({theme:n,lang:s});let g=a;g=g.replace(/(["'`])(?:\\.|(?!\1).)*\1/g,'<span class="string">$&</span>'),g=g.replace(/\/\/.*$/gm,'<span class="comment">$&</span>'),g=g.replace(/\/\*[\s\S]*?\*\//g,'<span class="comment">$&</span>'),g=g.replace(/#.*$/gm,'<span class="comment">$&</span>'),g=g.replace(/\b\d+\.?\d*\b/g,'<span class="number">$&</span>');const i=c.sort(((e,o)=>o.length-e.length));return console.log(`Processing ${s} keywords in order:`,i),i.forEach((e=>{let o;o="css"===s.toLowerCase()?new RegExp(`(^|[\\s:])\\b(${e.replace(/-/g,"\\-")})(?=\\s*:|\\s|$)(?![^<]*>)`,"g"):new RegExp(`\\b(${e})\\b(?![^<]*>)`,"g");const l=g;g="css"===s.toLowerCase()?g.replace(o,`$1<span style="color: ${t[e]}">$2</span>`):g.replace(o,`<span style="color: ${t[e]}">$1</span>`),l!==g&&["background","background-color","color"].includes(e)&&console.log(`${e} -> ${t[e]} (made changes)`)})),g};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.keywordsMap={javascript:["function","const","let","var","if","else","for","while","return","class","import","export","from","async","await","try","catch","new","this","console","log","window","document","switch"],python:["def","class","if","else","elif","for","while","import","from","return","try","except","with","as","lambda","and","or","not","in","print"],java:["public","private","protected","static","class","interface","if","else","for","while","return","import","new","this","extends","implements","System","out","println"],css:["color","background","background-color","font-family","margin","padding","display","position","flex","grid","width","height","border","font"],html:["div","span","p","h1","h2","h3","body","head","html","script","style","link"],json:["true","false","null"]};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.keywordsMap={javascript:["function","const","let","var","if","else","for","while","return","class","import","export","from","async","await","try","catch","new","this","console","log","window","document","switch","script","defer","src",".init",".start",".stop"],python:["def","class","if","else","elif","for","while","import","from","return","try","except","with","as","lambda","and","or","not","in","print"],java:["public","private","protected","static","class","interface","if","else","for","while","return","import","new","this","extends","implements","System","out","println"],css:["color","background","background-color","font-family","margin","padding","display","position","flex","grid","width","height","border","font"],html:["div","span","p","h1","h2","h3","body","head","html","script","style","link"],json:["true","false","null"]};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),n=require("react-joyride");require("./constants/animations.js");var a=require("./constants/selectors.js"),r=require("./hooks/useFeatureAnnouncements.js"),i=require("./MajorUpdatePopup.js"),s=require("./MinorUpdatePopup.js"),l=require("./VideoModal.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n);exports.default=d=>{let{children:c,fetchVisibleFeatures:p,getStoreFeatureProgress:f,fetchFeatureById:b,markFeatureAsViewedForStore:g,isFeatureApplicableToCurrentPage:m,module:h,router:y,storeId:S,onAnnouncementShown:x,onAnnouncementInteracted:C}=d;var k;const{majorUpdateFeatures:T,minorUpdateFeatures:v,isLoading:w,markFeatureAsViewed:I}=r.useFeatureAnnouncements({fetchVisibleFeatures:p,getStoreFeatureProgress:f,fetchFeatureById:b,markFeatureAsViewedForStore:g,isFeatureApplicableToCurrentPage:m,module:h,router:y}),[B,j]=o.useState(null),[E,F]=o.useState(null),[N,q]=o.useState(!1),[P,_]=o.useState([]),[O,U]=o.useState(!1),[W,V]=o.useState([]),[M,A]=o.useState(!1),[L,R]=o.useState(!1),[$,z]=o.useState([]),[H,Z]=o.useState(!1),[D,G]=o.useState(!1),[J,K]=o.useState(!1),[Q,X]=o.useState(""),[Y,ee]=o.useState(!1),[te,oe]=o.useState(!1),[ne,ae]=o.useState(!1),[re,ie]=o.useState(0),[se,le]=o.useState(0),[de,ue]=o.useState(new Set);o.useEffect((()=>{const e="minor-spotlight-cutout-style";let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.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 t=document.getElementById(e);t&&t.remove()}}),[]),o.useEffect((()=>{ie((e=>e+1)),le((e=>e+1)),oe(!1),ae(!1),ue(new Set)}),[null==y?void 0:y.pathname]),o.useEffect((()=>{if(!(T.length>0)||B||w||M||Y)0!==T.length||w||G(!0);else{G(!1),Z(!1),q(!1),_([]),F(null),z([]);let e=0;const t=10,o=()=>{e++;document.querySelector('[data-testid="whats-new-button"]')?ce(T[0]):e<t?setTimeout(o,1e3):G(!0)};o()}}),[T,B,w,M,Y]),o.useEffect((()=>{var e;const t=null===(e=null==y?void 0:y.query)||void 0===e?void 0:e.featureId;if(!t||w||0===v.length)return;const o=v.find((e=>e.id===t));if(!o||!o.featureTag)return;Z(!0),R(!0);let n=0;const a=setInterval((()=>{n++;const e=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(e)){const e=[o];z(e),Se(o,e),clearInterval(a)}else n>=25&&(R(!1),clearInterval(a))}),200);return()=>{clearInterval(a)}}),[v,null===(k=null==y?void 0:y.query)||void 0===k?void 0:k.featureId,w]),o.useEffect((()=>{var e;if(v.length>0&&!w&&!N&&!L&&!E&&!H&&D&&!Y){let e=null,t=null,o=null,n=!1;const a=()=>{if(n||L||E||H||!D)return;const a=v.filter((e=>{if(!e.featureTag||""===e.featureTag.trim())return!1;if(de.has(e.id))return!1;const t=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`;return null!==document.querySelector(t)}));a.length>0&&(z(a),Se(a[0],a),e&&(e.disconnect(),e=null),t&&(window.removeEventListener("scroll",t),t=null),o&&(clearTimeout(o),o=null))};return e=new MutationObserver((e=>{let t=!1;for(const o of e){if("childList"===o.type&&o.addedNodes.length>0)for(let e=0;e<o.addedNodes.length;e++){const n=o.addedNodes[e];if(n.nodeType===Node.ELEMENT_NODE){const e=n;if(e.id||e.querySelector("[id]")){t=!0;break}}}if(t)break}N||n||L||E||H||!D||!t||(o&&clearTimeout(o),o=setTimeout((()=>{n||L||E||H||!D||a()}),200))})),t=()=>{N||n||L||E||H||!D||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||L||E||H||!D||a()}),300)})))},e&&e.observe(document.body,{childList:!0,subtree:!0}),t&&window.addEventListener("scroll",t,{passive:!0}),a(),setTimeout((()=>{n||L||E||H||!D||a()}),100),setTimeout((()=>{n||L||E||H||!D||a()}),1e3),setTimeout((()=>{n||L||E||H||!D||a()}),500),()=>{n=!0,e&&e.disconnect(),t&&window.removeEventListener("scroll",t),o&&clearTimeout(o)}}if(0===v.length||w){(null===(e=null==y?void 0:y.query)||void 0===e?void 0:e.featureId)&&E||(q(!1),_([]),F(null),z([]),Z(!1))}}),[v,w,N,L,E,H,D,I,Y]);const ce=e=>{j(e);const o=T.findIndex((t=>t.id===e.id)),n=T.length,r=[{target:a.SELECTORS.WHATS_NEW_BUTTON,content:t.jsx(i.default,{feature:e,currentIndex:o,totalFeatures:n,onSkip:()=>pe(e),onExplore:()=>fe(e),onPrevious:()=>be(e),onNext:()=>ge(e),setIsClosing:oe}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];V(r),U(!0),x&&S&&x({storeId:S,announcementId:e.id,announcementTitle:e.title,imageUrl:e.displayImage||e.image,videoUrl:e.productVideo})},pe=o.useCallback((e=>{const t=e||B;t&&(A(!0),T.forEach((e=>{I(e.id)})),U(!1),j(null),V([]),G(!0),C&&S&&C({storeId:S,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo,buttonClicked:"Skip",buttonName:"Skip",buttonUrl:void 0}),setTimeout((()=>{A(!1)}),500))}),[B,T,I]),fe=o.useCallback((e=>{A(!0),I(e.id),e.productVideo&&(X(e.productVideo),K(!0),ee(!0)),U(!1),j(null),V([]);T.findIndex((t=>t.id===e.id))===T.length-1&&G(!0),C&&S&&C({storeId:S,announcementId:e.id,announcementTitle:e.title,imageUrl:e.displayImage||e.image,videoUrl:e.productVideo,buttonClicked:"Primary",buttonName:e.buttonText||"Explore",buttonUrl:e.redirectUrl||e.productVideo}),setTimeout((()=>{A(!1)}),500)}),[T,I]),be=o.useCallback((e=>{const o=e||B;if(!o)return;const n=T.findIndex((e=>e.id===o.id));if(n>0){const e=T[n-1];j(e);const o=n-1,a=T.length,r=[{target:'[data-testid="whats-new-button"]',content:t.jsx(i.default,{feature:e,currentIndex:o,totalFeatures:a,onSkip:()=>pe(e),onExplore:()=>fe(e),onPrevious:()=>be(e),onNext:()=>ge(e),setIsClosing:oe}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];V(r)}}),[B,T]),ge=o.useCallback((e=>{const o=e||B;if(!o)return;const n=T.findIndex((e=>e.id===o.id));if(n<T.length-1){const e=T[n+1];j(e);const o=n+1,a=T.length,r=[{target:'[data-testid="whats-new-button"]',content:t.jsx(i.default,{feature:e,currentIndex:o,totalFeatures:a,onSkip:()=>pe(e),onExplore:()=>fe(e),onPrevious:()=>be(e),onNext:()=>ge(e),setIsClosing:oe}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];V(r)}else A(!0),I(o.id),U(!1),j(null),V([]),G(!0),setTimeout((()=>{A(!1)}),500)}),[B,T,I]),me=()=>{if(T.length>0&&!B){document.querySelector('[data-testid="whats-new-button"]')&&ce(T[0])}};o.useEffect((()=>(window.showMajorUpdatePopup=me,()=>{delete window.showMajorUpdatePopup})),[T,B]);const he=o.useCallback((e=>{const{action:t}=e;t===n.ACTIONS.CLOSE&&(B&&(A(!0),T.forEach((e=>{I(e.id)})),G(!0),setTimeout((()=>{A(!1)}),500)),U(!1),j(null),V([]))}),[B,T,I]),ye=o.useCallback((e=>{const{action:t}=e;if(t===n.ACTIONS.CLOSE){if(E){R(!0),I(E.id);$.findIndex((e=>e.id===E.id))===$.length-1&&Z(!0),setTimeout((()=>{R(!1)}),500)}q(!1),F(null),_([])}}),[E,$,I]),Se=(o,n)=>e.__awaiter(void 0,void 0,void 0,(function*(){F(o);const e=n||$,a=e.findIndex((e=>e.id===o.id)),r=e.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,l=document.querySelector(i);if(l)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(l,120)}catch(e){}const d=[{target:i,content:t.jsx(s.default,{feature:o,currentIndex:a,totalFeatures:r,onSkip:()=>xe(o),onExplore:()=>Ce(o),onPrevious:()=>ke(o),onNext:()=>Te(o),setIsClosing:ae}),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"}}}];_(d),q(!0)})),xe=o.useCallback((e=>{const t=e||E;if(t){R(!0),I(t.id),ue((e=>new Set(e).add(t.id))),q(!1),F(null),_([]);const e=$.find((e=>e.id!==t.id&&!de.has(e.id)));setTimeout((()=>{R(!1),e?Se(e,$):Z(!0)}),500)}}),[E,$,I,de]),Ce=o.useCallback((e=>{R(!0),I(e.id),ue((t=>new Set(t).add(e.id))),e.productVideo&&(X(e.productVideo),K(!0),ee(!0)),q(!1),F(null),_([]);const t=$.find((t=>t.id!==e.id&&!de.has(t.id)));setTimeout((()=>{R(!1),t&&!e.productVideo?Se(t,$):t||Z(!0)}),500)}),[$,I,de]),ke=o.useCallback((o=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=o||E;if(!e)return;const n=$.findIndex((t=>t.id===e.id));if(n>0){const e=$[n-1];F(e);const o=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`,a=document.querySelector(o);if(a)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(a,120)}catch(e){}const r=n-1,i=$.length,l=[{target:o,content:t.jsx(s.default,{feature:e,currentIndex:r,totalFeatures:i,onSkip:()=>xe(e),onExplore:()=>Ce(e),onPrevious:()=>ke(e),onNext:()=>Te(e),setIsClosing:ae}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];_(l)}}))),[E,$]),Te=o.useCallback((o=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=o||E;if(!e)return;const n=$.findIndex((t=>t.id===e.id));if(n<$.length-1){const e=$[n+1];F(e);const o=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`,a=document.querySelector(o);if(a)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(a,120)}catch(e){}const r=n+1,i=$.length,l=[{target:o,content:t.jsx(s.default,{feature:e,currentIndex:r,totalFeatures:i,onSkip:()=>xe(e),onExplore:()=>Ce(e),onPrevious:()=>ke(e),onNext:()=>Te(e),setIsClosing:ae}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];_(l)}else R(!0),Z(!0),I(e.id),q(!1),F(null),_([]),setTimeout((()=>{R(!1)}),500)}))),[E,$,I]);return t.jsxs(t.Fragment,{children:[c,W.length>0&&t.jsx(u.default,{steps:W,run:O,continuous:!1,showProgress:!1,showSkipButton:!1,callback:he,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:te?"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-${re}`),P.length>0&&t.jsx(u.default,{steps:P,run:N,continuous:!1,showProgress:!1,showSkipButton:!1,callback:ye,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:ne?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:ne?"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-${se}`),t.jsx(l.VideoModal,{isOpen:J,videoUrl:Q,onClose:()=>{K(!1),X(""),ee(!1);const e=$.find((e=>!de.has(e.id)));e?setTimeout((()=>{Se(e,$)}),300):Z(!0)}})]})};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),n=require("react-joyride");require("./constants/animations.js");var a=require("./constants/selectors.js"),r=require("./hooks/useFeatureAnnouncements.js"),s=require("./MajorUpdatePopup.js"),i=require("./MinorUpdatePopup.js"),l=require("./VideoModal.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n);exports.default=d=>{let{children:c,fetchVisibleFeatures:p,getStoreFeatureProgress:f,fetchFeatureById:b,markFeatureAsViewedForStore:g,isFeatureApplicableToCurrentPage:h,module:m,router:y}=d;var S;const{majorUpdateFeatures:x,minorUpdateFeatures:C,isLoading:k,markFeatureAsViewed:T}=r.useFeatureAnnouncements({fetchVisibleFeatures:p,getStoreFeatureProgress:f,fetchFeatureById:b,markFeatureAsViewedForStore:g,isFeatureApplicableToCurrentPage:h,module:m,router:y}),[v,w]=o.useState(null),[B,j]=o.useState(null),[I,E]=o.useState(!1),[F,N]=o.useState([]),[q,P]=o.useState(!1),[O,W]=o.useState([]),[_,M]=o.useState(!1),[V,A]=o.useState(!1),[L,R]=o.useState([]),[U,$]=o.useState(!1),[z,H]=o.useState(!1),[Z,D]=o.useState(!1),[G,J]=o.useState(""),[K,Q]=o.useState(!1),[X,Y]=o.useState(!1),[ee,te]=o.useState(!1),[oe,ne]=o.useState(0),[ae,re]=o.useState(0),[se,ie]=o.useState(new Set);o.useEffect((()=>{const e="minor-spotlight-cutout-style";let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.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 t=document.getElementById(e);t&&t.remove()}}),[]),o.useEffect((()=>{ne((e=>e+1)),re((e=>e+1)),Y(!1),te(!1),ie(new Set)}),[null==y?void 0:y.pathname]),o.useEffect((()=>{if(!(x.length>0)||v||k||_||K)0!==x.length||k||H(!0);else{H(!1),$(!1),E(!1),N([]),j(null),R([]);let e=0;const t=10,o=()=>{e++;document.querySelector('[data-testid="whats-new-button"]')?le(x[0]):e<t?setTimeout(o,1e3):H(!0)};o()}}),[x,v,k,_,K]),o.useEffect((()=>{var e;const t=null===(e=null==y?void 0:y.query)||void 0===e?void 0:e.featureId;if(!t||k||0===C.length)return;const o=C.find((e=>e.id===t));if(!o||!o.featureTag)return;$(!0),A(!0);let n=0;const a=setInterval((()=>{n++;const e=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(e)){const e=[o];R(e),he(o,e),clearInterval(a)}else n>=25&&(A(!1),clearInterval(a))}),200);return()=>{clearInterval(a)}}),[C,null===(S=null==y?void 0:y.query)||void 0===S?void 0:S.featureId,k]),o.useEffect((()=>{var e;if(C.length>0&&!k&&!I&&!V&&!B&&!U&&z&&!K){let e=null,t=null,o=null,n=!1;const a=()=>{if(n||V||B||U||!z)return;const a=C.filter((e=>{if(!e.featureTag||""===e.featureTag.trim())return!1;if(se.has(e.id))return!1;const t=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`;return null!==document.querySelector(t)}));a.length>0&&(R(a),he(a[0],a),e&&(e.disconnect(),e=null),t&&(window.removeEventListener("scroll",t),t=null),o&&(clearTimeout(o),o=null))};return e=new MutationObserver((e=>{let t=!1;for(const o of e){if("childList"===o.type&&o.addedNodes.length>0)for(let e=0;e<o.addedNodes.length;e++){const n=o.addedNodes[e];if(n.nodeType===Node.ELEMENT_NODE){const e=n;if(e.id||e.querySelector("[id]")){t=!0;break}}}if(t)break}I||n||V||B||U||!z||!t||(o&&clearTimeout(o),o=setTimeout((()=>{n||V||B||U||!z||a()}),200))})),t=()=>{I||n||V||B||U||!z||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||V||B||U||!z||a()}),300)})))},e&&e.observe(document.body,{childList:!0,subtree:!0}),t&&window.addEventListener("scroll",t,{passive:!0}),a(),setTimeout((()=>{n||V||B||U||!z||a()}),100),setTimeout((()=>{n||V||B||U||!z||a()}),1e3),setTimeout((()=>{n||V||B||U||!z||a()}),500),()=>{n=!0,e&&e.disconnect(),t&&window.removeEventListener("scroll",t),o&&clearTimeout(o)}}if(0===C.length||k){(null===(e=null==y?void 0:y.query)||void 0===e?void 0:e.featureId)&&B||(E(!1),N([]),j(null),R([]),$(!1))}}),[C,k,I,V,B,U,z,T,K]);const le=e=>{w(e);const o=x.findIndex((t=>t.id===e.id)),n=x.length,r=[{target:a.SELECTORS.WHATS_NEW_BUTTON,content:t.jsx(s.default,{feature:e,currentIndex:o,totalFeatures:n,onSkip:()=>de(e),onExplore:()=>ue(e),onPrevious:()=>ce(e),onNext:()=>pe(e),setIsClosing:Y}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];W(r),P(!0)},de=o.useCallback((e=>{(e||v)&&(M(!0),x.forEach((e=>{T(e.id)})),P(!1),w(null),W([]),H(!0),setTimeout((()=>{M(!1)}),500))}),[v,x,T]),ue=o.useCallback((e=>{M(!0),T(e.id),e.productVideo&&(J(e.productVideo),D(!0),Q(!0)),P(!1),w(null),W([]);x.findIndex((t=>t.id===e.id))===x.length-1&&H(!0),setTimeout((()=>{M(!1)}),500)}),[x,T]),ce=o.useCallback((e=>{const o=e||v;if(!o)return;const n=x.findIndex((e=>e.id===o.id));if(n>0){const e=x[n-1];w(e);const o=n-1,a=x.length,r=[{target:'[data-testid="whats-new-button"]',content:t.jsx(s.default,{feature:e,currentIndex:o,totalFeatures:a,onSkip:()=>de(e),onExplore:()=>ue(e),onPrevious:()=>ce(e),onNext:()=>pe(e),setIsClosing:Y}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];W(r)}}),[v,x]),pe=o.useCallback((e=>{const o=e||v;if(!o)return;const n=x.findIndex((e=>e.id===o.id));if(n<x.length-1){const e=x[n+1];w(e);const o=n+1,a=x.length,r=[{target:'[data-testid="whats-new-button"]',content:t.jsx(s.default,{feature:e,currentIndex:o,totalFeatures:a,onSkip:()=>de(e),onExplore:()=>ue(e),onPrevious:()=>ce(e),onNext:()=>pe(e),setIsClosing:Y}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];W(r)}else M(!0),T(o.id),P(!1),w(null),W([]),H(!0),setTimeout((()=>{M(!1)}),500)}),[v,x,T]),fe=()=>{if(x.length>0&&!v){document.querySelector('[data-testid="whats-new-button"]')&&le(x[0])}};o.useEffect((()=>(window.showMajorUpdatePopup=fe,()=>{delete window.showMajorUpdatePopup})),[x,v]);const be=o.useCallback((e=>{const{action:t}=e;t===n.ACTIONS.CLOSE&&(v&&(M(!0),x.forEach((e=>{T(e.id)})),H(!0),setTimeout((()=>{M(!1)}),500)),P(!1),w(null),W([]))}),[v,x,T]),ge=o.useCallback((e=>{const{action:t}=e;if(t===n.ACTIONS.CLOSE){if(B){A(!0),T(B.id);L.findIndex((e=>e.id===B.id))===L.length-1&&$(!0),setTimeout((()=>{A(!1)}),500)}E(!1),j(null),N([])}}),[B,L,T]),he=(o,n)=>e.__awaiter(void 0,void 0,void 0,(function*(){j(o);const e=n||L,a=e.findIndex((e=>e.id===o.id)),r=e.length,s=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,l=document.querySelector(s);if(l)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(l,120)}catch(e){}const d=[{target:s,content:t.jsx(i.default,{feature:o,currentIndex:a,totalFeatures:r,onSkip:()=>me(o),onExplore:()=>ye(o),onPrevious:()=>Se(o),onNext:()=>xe(o),setIsClosing:te}),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"}}}];N(d),E(!0)})),me=o.useCallback((e=>{const t=e||B;if(t){A(!0),T(t.id),ie((e=>new Set(e).add(t.id))),E(!1),j(null),N([]);const e=L.find((e=>e.id!==t.id&&!se.has(e.id)));setTimeout((()=>{A(!1),e?he(e,L):$(!0)}),500)}}),[B,L,T,se]),ye=o.useCallback((e=>{A(!0),T(e.id),ie((t=>new Set(t).add(e.id))),e.productVideo&&(J(e.productVideo),D(!0),Q(!0)),E(!1),j(null),N([]);const t=L.find((t=>t.id!==e.id&&!se.has(t.id)));setTimeout((()=>{A(!1),t&&!e.productVideo?he(t,L):t||$(!0)}),500)}),[L,T,se]),Se=o.useCallback((o=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=o||B;if(!e)return;const n=L.findIndex((t=>t.id===e.id));if(n>0){const e=L[n-1];j(e);const o=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`,a=document.querySelector(o);if(a)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(a,120)}catch(e){}const r=n-1,s=L.length,l=[{target:o,content:t.jsx(i.default,{feature:e,currentIndex:r,totalFeatures:s,onSkip:()=>me(e),onExplore:()=>ye(e),onPrevious:()=>Se(e),onNext:()=>xe(e),setIsClosing:te}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];N(l)}}))),[B,L]),xe=o.useCallback((o=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=o||B;if(!e)return;const n=L.findIndex((t=>t.id===e.id));if(n<L.length-1){const e=L[n+1];j(e);const o=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`,a=document.querySelector(o);if(a)try{const{scrollToElementSmooth:e}=yield Promise.resolve().then((function(){return require("./utils/elementHelpers.js")}));yield e(a,120)}catch(e){}const r=n+1,s=L.length,l=[{target:o,content:t.jsx(i.default,{feature:e,currentIndex:r,totalFeatures:s,onSkip:()=>me(e),onExplore:()=>ye(e),onPrevious:()=>Se(e),onNext:()=>xe(e),setIsClosing:te}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:e,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"}}}];N(l)}else A(!0),$(!0),T(e.id),E(!1),j(null),N([]),setTimeout((()=>{A(!1)}),500)}))),[B,L,T]);return t.jsxs(t.Fragment,{children:[c,O.length>0&&t.jsx(u.default,{steps:O,run:q,continuous:!1,showProgress:!1,showSkipButton:!1,callback:be,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:X?"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-${oe}`),F.length>0&&t.jsx(u.default,{steps:F,run:I,continuous:!1,showProgress:!1,showSkipButton:!1,callback:ge,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:ee?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:ee?"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-${ae}`),t.jsx(l.VideoModal,{isOpen:Z,videoUrl:G,onClose:()=>{D(!1),J(""),Q(!1);const e=L.find((e=>!se.has(e.id)));e?setTimeout((()=>{he(e,L)}),300):$(!0)}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("./constants/index.js"),n=require("./styles/majorPopup.styles.js");require("../../constants/Theme.js"),require("./constants/animations.js");var r=require("./utils/htmlHelpers.js"),a=require("./utils/animationHelpers.js"),i=require("./utils/elementHelpers.js");exports.default=o=>{let{feature:l,currentIndex:u,totalFeatures:c,onSkip:g,onExplore:j,onPrevious:d,onNext:b,setIsClosing:T}=o;const[y,p]=t.useState(!1),[v,x]=t.useState(!1),[O,h]=t.useState(""),E=t.useRef(null);t.useEffect((()=>{y&&x(!0)}),[y]);const m=n.getMajorPopupStyles(v,O);return e.jsxs("div",Object.assign({ref:E,style:m.container},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),(e=>{a.hideJoyrideArrow(E.current);const t=i.findWhatsNewButton();if(t&&E.current){const e=a.calculateCloseTransform(E.current,t);h(e)}else h("scale(0)");null==T||T(!0),p(!0),a.executeAfterAnimation(e)})(g)},style:m.skipButton.base,onMouseEnter:e=>Object.assign(e.currentTarget.style,m.skipButton.hover),onMouseLeave:e=>Object.assign(e.currentTarget.style,m.skipButton.base)},{children:s.TEXT.SKIP_BUTTON})),e.jsx("div",Object.assign({style:m.imageContainer},{children:l.displayImage?e.jsx("img",{src:l.displayImage,alt:l.title,style:m.image,onError:e=>{l.image&&(e.target.src=l.image)}}):e.jsx("div",Object.assign({style:m.imagePlaceholder},{children:s.TEXT.FEATURE_PREVIEW_PLACEHOLDER}))})),e.jsxs("div",Object.assign({style:m.contentContainer},{children:[e.jsxs("div",{children:[e.jsx("h3",Object.assign({style:m.title},{children:l.title})),e.jsx("div",{style:m.content,dangerouslySetInnerHTML:{__html:r.decodeHTMLEntities(l.content||l.body||"")}}),e.jsx("button",Object.assign({onClick:()=>{j(),a.hideJoyrideArrow(E.current);const e=i.findWhatsNewButton();if(e&&E.current){const t=a.calculateCloseTransform(E.current,e);h(t)}else h("scale(0)");null==T||T(!0),p(!0)},style:m.exploreButton.base,onMouseEnter:e=>Object.assign(e.currentTarget.style,m.exploreButton.hover),onMouseLeave:e=>Object.assign(e.currentTarget.style,m.exploreButton.base)},{children:l.buttonText||s.TEXT.DEFAULT_BUTTON_TEXT}))]}),c>1&&e.jsxs("div",Object.assign({style:m.navigationContainer},{children:[e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),d()},disabled:0===u,style:m.navigationButton(0===u).base,onMouseEnter:e=>{0!==u&&Object.assign(e.currentTarget.style,m.navigationButton(!1).hover)},onMouseLeave:e=>{0!==u&&Object.assign(e.currentTarget.style,m.navigationButton(!1).base)}},{children:s.TEXT.NAVIGATION_PREVIOUS})),e.jsx("button",Object.assign({onClick:e=>{e.preventDefault(),e.stopPropagation(),b()},disabled:u===c-1,style:m.navigationButton(u===c-1).base,onMouseEnter:e=>{u!==c-1&&Object.assign(e.currentTarget.style,m.navigationButton(!1).hover)},onMouseLeave:e=>{u!==c-1&&Object.assign(e.currentTarget.style,m.navigationButton(u===c-1).base)}},{children:s.TEXT.NAVIGATION_NEXT}))]}))]}))]}))};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Popup dimension constants
|
|
3
|
+
*/
|
|
1
4
|
export declare const POPUP_DIMENSIONS: {
|
|
2
5
|
readonly MAJOR: {
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
5
|
-
readonly imageWidth:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
37
|
-
readonly
|
|
38
|
-
readonly
|
|
39
|
-
readonly
|
|
40
|
-
readonly
|
|
41
|
-
readonly
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
44
|
-
readonly
|
|
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: "
|
|
65
|
-
readonly IMAGE: "
|
|
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
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BORDER_RADIUS={POPUP:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BORDER_RADIUS={POPUP:"4px",IMAGE:"4px",BUTTON:"4px",VIDEO_MODAL:"12px",CLOSE_BUTTON:"50%",SPOTLIGHT:"8px"},exports.POPUP_DIMENSIONS={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}},exports.SPACING={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"}};
|
|
@@ -27,7 +27,7 @@ export declare const minorStepStyles: {
|
|
|
27
27
|
tooltip: {
|
|
28
28
|
padding: number;
|
|
29
29
|
backgroundColor: string;
|
|
30
|
-
borderRadius: "
|
|
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: "
|
|
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
|
-
|
|
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,22 +8,13 @@ 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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),t=require("../constants/animations.js"),n=require("../constants/dimensions.js"),i=require("../constants/zIndex.js");exports.getMajorPopupStyles=(o,r)=>({container:{width:`${n.POPUP_DIMENSIONS.MAJOR.width}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.height}px`,display:"flex",backgroundColor:e.BASE_COLORS.grayscale[900],borderRadius:n.BORDER_RADIUS.POPUP,overflow:"hidden",position:"relative",transform:o?r:"scale(1)",opacity:o?0:1,transition:t.POPUP_TRANSITION},skipButton:{base:{position:"absolute",top:n.SPACING.MAJOR.skipButtonTop,right:n.SPACING.MAJOR.skipButtonRight,background:"transparent",border:"none",color:e.BASE_COLORS.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:i.Z_INDEX.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:e.BASE_COLORS.grayscale[100],color:e.BASE_COLORS.grayscale[700]}},imageContainer:{backgroundColor:e.BASE_COLORS.grayscale[900],width:`${n.POPUP_DIMENSIONS.MAJOR.imageWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:n.SPACING.MAJOR.imagePadding},image:{width:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:e.BASE_COLORS.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderWidth}px`,height:`${n.POPUP_DIMENSIONS.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:n.SPACING.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:n.SPACING.MAJOR.titlePadding,color:e.BASE_COLORS.grayscale.white,lineHeight:"1.25",textAlign:"left"},content:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},exploreButton:{base:{backgroundColor:"transparent",border:`1px solid ${e.BASE_COLORS.warning[500]}`,color:e.BASE_COLORS.warning[500],borderRadius:n.BORDER_RADIUS.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:n.SPACING.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:n.SPACING.MAJOR.navigationBottom,right:n.SPACING.MAJOR.navigationRight,display:"flex",gap:n.SPACING.MAJOR.navigationGap,alignItems:"center"},navigationButton:t=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:t?e.BASE_COLORS.grayscale[700]:e.BASE_COLORS.grayscale.white,fontSize:"20px",cursor:t?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:e.BASE_COLORS.warning[500]}})});
|
|
@@ -5,32 +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
|
-
/**
|
|
17
|
-
* Primary button configuration
|
|
18
|
-
*/
|
|
19
|
-
export interface ButtonConfig {
|
|
20
|
-
text?: string;
|
|
21
|
-
action?: 'Play Video' | 'Open link';
|
|
22
|
-
redirectionUrl?: string;
|
|
23
|
-
style?: ButtonStyle;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Secondary button configuration
|
|
27
|
-
*/
|
|
28
|
-
export interface SecondaryButtonConfig {
|
|
29
|
-
text?: string;
|
|
30
|
-
action?: 'Open link' | 'Close popup' | '';
|
|
31
|
-
redirectionUrl?: string;
|
|
32
|
-
style?: ButtonStyle;
|
|
33
|
-
}
|
|
34
8
|
/**
|
|
35
9
|
* Feature announcement data model
|
|
36
10
|
*/
|
|
@@ -53,9 +27,6 @@ export interface FeatureAnnouncement {
|
|
|
53
27
|
archived?: boolean;
|
|
54
28
|
createdAt: FirestoreTimestamp;
|
|
55
29
|
expirationDate?: FirestoreTimestamp | string | Date;
|
|
56
|
-
primaryButton?: ButtonConfig;
|
|
57
|
-
secondaryButton?: SecondaryButtonConfig;
|
|
58
|
-
padding?: string;
|
|
59
30
|
}
|
|
60
31
|
/**
|
|
61
32
|
* Store feature progress tracking
|
|
@@ -68,21 +39,3 @@ export interface StoreFeatureProgress {
|
|
|
68
39
|
* Feature update types
|
|
69
40
|
*/
|
|
70
41
|
export type FeatureUpdateType = 'Major' | 'Minor';
|
|
71
|
-
/**
|
|
72
|
-
* Announcement event data (for tracking when announcement is shown)
|
|
73
|
-
*/
|
|
74
|
-
export interface AnnouncementEvent {
|
|
75
|
-
storeId: string;
|
|
76
|
-
announcementId: string;
|
|
77
|
-
announcementTitle: string;
|
|
78
|
-
imageUrl?: string;
|
|
79
|
-
videoUrl?: string;
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Announcement interaction event data (for tracking button clicks)
|
|
83
|
-
*/
|
|
84
|
-
export interface AnnouncementInteractionEvent extends AnnouncementEvent {
|
|
85
|
-
buttonClicked: 'Primary' | 'Secondary' | 'Skip';
|
|
86
|
-
buttonName: string;
|
|
87
|
-
buttonUrl?: string;
|
|
88
|
-
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
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
|
|
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
|
}
|