@shopgate/engage 7.29.2-beta.1 → 7.29.2-beta.3
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.
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Additional options for app event hooks.
|
|
3
|
+
*/
|
|
4
|
+
export interface AppEventOptions {
|
|
5
|
+
/**
|
|
6
|
+
* When false, no listener is registered.
|
|
7
|
+
* @default true
|
|
8
|
+
*/
|
|
9
|
+
enabled?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* When true, the callback is removed after first call.
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
once?: boolean;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Extended options for return-from-background hook.
|
|
19
|
+
*/
|
|
20
|
+
export interface ReturnFromBackgroundOptions extends AppEventOptions {
|
|
21
|
+
/**
|
|
22
|
+
* If true, requires a new background event to re-arm before firing again.
|
|
23
|
+
* If false, remains armed until disabled or unmounted.
|
|
24
|
+
* @default true
|
|
25
|
+
*/
|
|
26
|
+
resetAfterFire?: boolean;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Registers a callback for a given event from the Shopgate app event bus.
|
|
31
|
+
*
|
|
32
|
+
* Automatically unsubscribes on unmount. Can optionally run only once.
|
|
33
|
+
*
|
|
34
|
+
* @param name The event name to subscribe to.
|
|
35
|
+
* @param callback The function to call when the event fires.
|
|
36
|
+
* @param options Additional options.
|
|
37
|
+
*/
|
|
38
|
+
export declare function useAppEvent(
|
|
39
|
+
name: string,
|
|
40
|
+
callback: () => void,
|
|
41
|
+
options?: AppEventOptions
|
|
42
|
+
): void;
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Registers a callback that fires when the app will enter foreground.
|
|
46
|
+
*
|
|
47
|
+
* Automatically unsubscribes on unmount.
|
|
48
|
+
*
|
|
49
|
+
* @param callback The callback to run when entering foreground.
|
|
50
|
+
* @param options Additional options.
|
|
51
|
+
*/
|
|
52
|
+
export declare function useAppEventOnEnterForeground(
|
|
53
|
+
callback: () => void,
|
|
54
|
+
options?: AppEventOptions
|
|
55
|
+
): void;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Registers a callback that fires when the app did enter background.
|
|
59
|
+
*
|
|
60
|
+
* Automatically unsubscribes on unmount.
|
|
61
|
+
*
|
|
62
|
+
* @param callback The callback to run when entering background.
|
|
63
|
+
* @param options Additional options.
|
|
64
|
+
*/
|
|
65
|
+
export declare function useAppEventOnDidEnterBackground(
|
|
66
|
+
callback: () => void,
|
|
67
|
+
options?: AppEventOptions
|
|
68
|
+
): void;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Invokes a callback only after the app was first sent to background and then
|
|
72
|
+
* returns to the foreground — i.e. a complete background → foreground cycle.
|
|
73
|
+
*
|
|
74
|
+
* Common use case: user leaves the app to open system settings and returns, so you
|
|
75
|
+
* can re-check permissions or refresh data.
|
|
76
|
+
*
|
|
77
|
+
* @param callback The callback to run after returning from background.
|
|
78
|
+
* @param options Additional options.
|
|
79
|
+
*/
|
|
80
|
+
export declare function useAppEventOnReturnFromBackground(
|
|
81
|
+
callback: () => void,
|
|
82
|
+
options?: ReturnFromBackgroundOptions
|
|
83
|
+
): void;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import{useEffect,useRef}from'react';import{APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND,APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND}from'@shopgate/engage/core/constants';import{event}from'@shopgate/engage/core/classes';/**
|
|
2
|
+
* Returns a stable reference to the given callback, preserving the same function identity
|
|
3
|
+
* across renders, while still always calling the latest version of the callback.
|
|
4
|
+
*
|
|
5
|
+
* Useful when passing callbacks into event listeners or effects so they don't re-subscribe
|
|
6
|
+
* on every render but still access up-to-date props/state.
|
|
7
|
+
*
|
|
8
|
+
* @param {Function} fn The callback function whose latest version should be retained.
|
|
9
|
+
* @returns {Function} A stable function reference that always invokes the latest callback.
|
|
10
|
+
*/function useStableCallback(fn){var ref=useRef(fn);ref.current=fn;var stable=useRef(function(){var _ref$current;for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return(_ref$current=ref.current)===null||_ref$current===void 0?void 0:_ref$current.call.apply(_ref$current,[ref].concat(args));});return stable.current;}/**
|
|
11
|
+
* Registers a callback for a given event from the Shopgate app event bus.
|
|
12
|
+
*
|
|
13
|
+
* Automatically unsubscribes on unmount. Can optionally run only once.
|
|
14
|
+
*
|
|
15
|
+
* @param {string} name The event name to subscribe to.
|
|
16
|
+
* @param {Function} callback The function to call when the event fires.
|
|
17
|
+
* @param {Object} [options] Additional options.
|
|
18
|
+
* @param {boolean} [options.enabled=true] When false, no listener is registered.
|
|
19
|
+
* @param {boolean} [options.once=false] When true, the callback is removed after first call.
|
|
20
|
+
*/export function useAppEvent(name,callback){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var _options$enabled=options.enabled,enabled=_options$enabled===void 0?true:_options$enabled,_options$once=options.once,once=_options$once===void 0?false:_options$once;var latest=useStableCallback(callback);useEffect(function(){if(!enabled)return undefined;// eslint-disable-next-line require-jsdoc
|
|
21
|
+
var handler=function handler(){latest();if(once)event.removeCallback(name,handler);};event.addCallback(name,handler);return function(){return event.removeCallback(name,handler);};},[name,enabled,once,latest]);}/**
|
|
22
|
+
* Registers a callback that fires when the app will enter foreground
|
|
23
|
+
* (`applicationWillEnterForeground`).
|
|
24
|
+
*
|
|
25
|
+
* Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
26
|
+
*
|
|
27
|
+
* @param {Function} callback The callback to run when entering foreground.
|
|
28
|
+
* @param {Object} [options] Additional options.
|
|
29
|
+
* @param {boolean} [options.enabled=true] When false, the listener is not registered.
|
|
30
|
+
* @param {boolean} [options.once=false] Remove after first call.
|
|
31
|
+
*/export function useAppEventOnEnterForeground(callback,options){useAppEvent(APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND,callback,options);}/**
|
|
32
|
+
* Registers a callback that fires when the app did enter background
|
|
33
|
+
* (`applicationDidEnterBackground`).
|
|
34
|
+
** Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
35
|
+
*
|
|
36
|
+
* @param {Function} callback The callback to run when entering background.
|
|
37
|
+
* @param {Object} [options] Additional options.
|
|
38
|
+
* @param {boolean} [options.enabled=true] When false, the listener is not registered.
|
|
39
|
+
* @param {boolean} [options.once=false] Remove after first call.
|
|
40
|
+
*/export function useAppEventOnDidEnterBackground(callback,options){useAppEvent(APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND,callback,options);}/**
|
|
41
|
+
* Invokes a callback only after the app was first sent to background and then
|
|
42
|
+
* returns to the foreground — i.e. a complete background → foreground cycle.
|
|
43
|
+
*
|
|
44
|
+
* Common use case: user leaves the app to open system settings and returns, so you
|
|
45
|
+
* can re-check permissions or refresh data.
|
|
46
|
+
*
|
|
47
|
+
* Internally, this subscribes to both background and foreground events:
|
|
48
|
+
* - Arms itself when entering background
|
|
49
|
+
* - Fires on next foreground if armed
|
|
50
|
+
*
|
|
51
|
+
* @param {Function} callback The callback to run after returning from background.
|
|
52
|
+
* @param {Object} [options] Additional options.
|
|
53
|
+
* @param {boolean} [options.enabled=true] When false, no listener behavior is active.
|
|
54
|
+
* @param {boolean} [options.once=false] When true, callback fires only for the first cycle.
|
|
55
|
+
* @param {boolean} [options.resetAfterFire=true]
|
|
56
|
+
* If true, requires a new background event to re-arm before firing again.
|
|
57
|
+
* If false, remains armed until disabled or unmounted.
|
|
58
|
+
*/export function useAppEventOnReturnFromBackground(callback){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$enabled2=options.enabled,enabled=_options$enabled2===void 0?true:_options$enabled2,_options$once2=options.once,once=_options$once2===void 0?false:_options$once2,_options$resetAfterFi=options.resetAfterFire,resetAfterFire=_options$resetAfterFi===void 0?true:_options$resetAfterFi;var armedRef=useRef(false);var firedOnceRef=useRef(false);var latest=useStableCallback(callback);useAppEventOnDidEnterBackground(function(){if(!enabled)return;if(once&&firedOnceRef.current)return;armedRef.current=true;},{enabled:enabled});useAppEventOnEnterForeground(function(){if(!enabled)return;if(once&&firedOnceRef.current)return;if(armedRef.current){latest();if(once)firedOnceRef.current=true;if(resetAfterFire)armedRef.current=false;}},{enabled:enabled});}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as usePressHandler}from"./usePressHandler";export{default as useLongPress}from"./useLongPress";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";
|
|
1
|
+
export*from"./appEvents";export{default as usePressHandler}from"./usePressHandler";export{default as useLongPress}from"./useLongPress";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.29.2-beta.
|
|
3
|
+
"version": "7.29.2-beta.3",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@emotion/react": "^11.14.0",
|
|
19
19
|
"@shopgate/native-modules": "1.0.0-beta.25",
|
|
20
|
-
"@shopgate/pwa-common": "7.29.2-beta.
|
|
21
|
-
"@shopgate/pwa-common-commerce": "7.29.2-beta.
|
|
22
|
-
"@shopgate/pwa-core": "7.29.2-beta.
|
|
23
|
-
"@shopgate/pwa-ui-ios": "7.29.2-beta.
|
|
24
|
-
"@shopgate/pwa-ui-material": "7.29.2-beta.
|
|
25
|
-
"@shopgate/pwa-ui-shared": "7.29.2-beta.
|
|
20
|
+
"@shopgate/pwa-common": "7.29.2-beta.3",
|
|
21
|
+
"@shopgate/pwa-common-commerce": "7.29.2-beta.3",
|
|
22
|
+
"@shopgate/pwa-core": "7.29.2-beta.3",
|
|
23
|
+
"@shopgate/pwa-ui-ios": "7.29.2-beta.3",
|
|
24
|
+
"@shopgate/pwa-ui-material": "7.29.2-beta.3",
|
|
25
|
+
"@shopgate/pwa-ui-shared": "7.29.2-beta.3",
|
|
26
26
|
"@stripe/react-stripe-js": "^1.16.5",
|
|
27
27
|
"@stripe/stripe-js": "^1.3.1",
|
|
28
28
|
"@virtuous/conductor": "~2.5.0",
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious}from'@shopgate/engage/core';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{
|
|
1
|
+
function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
|
|
2
|
+
width:'calc(100% + 4px)'}};});/**
|
|
2
3
|
* The VideoWidget is used to display a video.
|
|
3
4
|
* @returns {JSX.Element}
|
|
4
|
-
*/var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var
|
|
5
|
+
*/var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);// Resume video playback when app returned from background
|
|
6
|
+
useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current||reduceMotion){return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
|
|
7
|
+
,src:"".concat(url,"#t=0.001"),muted:muted,controls:!autoplay||reduceMotion?true:controls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"})));};export default Video;
|