@shopgate/engage 7.32.0-beta.3 → 7.32.0-beta.5

package/core/initialization/fetchSettings.js

@@ -0,0 +1,134 @@
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { receiveShopSettings, errorShopSettings } from '@shopgate/engage/settings/action-creators/shopSettings';
+import { receiveMerchantSettings } from '@shopgate/engage/settings/action-creators/merchantSettings';
+import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+const REQUEST_TIMEOUT = 3000;
+
+/**
+ * The payload types the settings action creators declare. Derived rather than written out,
+ * because shopSettings and merchantSettings are untyped JS whose JSDoc describes their payload
+ * as `{Array}` / `{Object}` whereas the JSONP files actually send a settings object. Deriving
+ * keeps this file honest about the mismatch and picks up the real types once that JSDoc is fixed.
+ */
+
+/**
+ * Injects a script tag to fetch a settings JSONP.
+ * @param id The script id.
+ * @param src The script url.
+ * @param onError Callback for error situations.
+ */
+const injectScript = (id, src, onError) => {
+  const existingTag = document.querySelector(`#${id}`);
+  if (existingTag) {
+    existingTag.remove();
+  }
+  const scriptTag = document.createElement('script');
+  scriptTag.setAttribute('src', src);
+  scriptTag.setAttribute('id', id);
+  scriptTag.onerror = onError;
+  document.head.appendChild(scriptTag);
+};
+
+/**
+ * Loads a single JSONP settings source. Resolves when the payload arrived, when the script
+ * failed to load, or when REQUEST_TIMEOUT elapsed - it never rejects, so that no single
+ * source can block or delay app start indefinitely.
+ * @param params The loader params.
+ * @returns A promise that resolves once the source settled.
+ */
+const loadJsonpSettings = params => new Promise(resolve => {
+  const {
+    id,
+    url,
+    callbackName,
+    onReceive,
+    onError
+  } = params;
+  let settled = false;
+  let timeout;
+
+  /**
+   * Resolves the promise once, whichever of payload / error / timeout comes first.
+   */
+  const settle = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    clearTimeout(timeout);
+    resolve();
+  };
+
+  // Started before the callback and the script are wired up, so that a synchronously firing
+  // callback / error (e.g. a data: url) settles against an already assigned timeout - otherwise
+  // clearTimeout would no-op and this timer would still fire a false timeout warning.
+  timeout = setTimeout(() => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Warning);
+      scope.setExtra('settingsUrl', url);
+      scope.setExtra('timeout', REQUEST_TIMEOUT);
+      captureMessage(`Fetching settings took too long: ${id}`);
+    });
+    settle();
+  }, REQUEST_TIMEOUT);
+
+  // Registered before the script is injected, since the JSONP files guard their call with
+  // `window.setX && window.setX(...)` - a callback assigned too late is a silent no-op.
+  // Deliberately never removed: the timeout may settle while the script is still in flight,
+  // and a payload arriving after that should still hydrate the store.
+  window[callbackName] = settings => {
+    onReceive(settings);
+    settle();
+  };
+  injectScript(id, url, error => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Error);
+      scope.setExtra('settingsUrl', url);
+      captureMessage(`Fetching settings failed: ${id}`);
+    });
+    onError?.(error);
+    settle();
+  });
+});
+
+/**
+ * Fetches all configured JSONP settings sources in parallel. Sources without a configured url
+ * are skipped. Never rejects - every source falls back to the defaults of its reducer.
+ * @param store Reference to the store.
+ * @returns A promise that resolves once all configured sources settled.
+ */
+export const fetchSettings = async store => {
+  const {
+    settingsUrl,
+    merchantSettingsUrl,
+    appSettingsUrl
+  } = appConfig;
+  const loaders = [];
+  if (settingsUrl) {
+    loaders.push(loadJsonpSettings({
+      id: 'shop-settings-jsonp',
+      url: settingsUrl,
+      callbackName: 'setShopSettings',
+      onReceive: settings => store.dispatch(receiveShopSettings(settings)),
+      onError: error => store.dispatch(errorShopSettings(error))
+    }));
+  }
+  if (merchantSettingsUrl) {
+    loaders.push(loadJsonpSettings({
+      id: 'merchant-settings-jsonp',
+      url: merchantSettingsUrl,
+      callbackName: 'setMerchantSettings',
+      onReceive: settings => store.dispatch(receiveMerchantSettings(settings))
+    }));
+  }
+  if (appSettingsUrl) {
+    loaders.push(loadJsonpSettings({
+      id: 'app-settings-jsonp',
+      url: appSettingsUrl,
+      callbackName: 'setAppSettings',
+      onReceive: settings => store.dispatch(receiveAppSettings(settings))
+    }));
+  }
+  await Promise.all(loaders);
+};

package/core/initialization/index.d.ts

@@ -1,4 +1,35 @@
-export function initialize(locales: Object, reducers: Function, subscribers: any[]): Promise<{
-    store: Object;
+import type { Store as ReduxStore, UnknownAction } from 'redux';
+import { configureStore } from '@shopgate/pwa-common/store';
+declare global {
+    interface Window {
+        SGConnectDev?: {
+            isDevBrowser: boolean;
+            isDev: boolean;
+        };
+    }
+}
+/**
+ * The app's redux store. Assembled here because configureStore is untyped JS whose JSDoc widens
+ * the return value to `Object`.
+ *
+ * dispatch stays permissive rather than using redux-thunk's ThunkDispatch: the action creators
+ * this module dispatches are untyped JS annotated `@returns {Object}` / `{Function}`, which match
+ * neither UnknownAction nor ThunkAction. Tightening it here would only force casts at every call
+ * site - it needs the JSDoc on those action creators to be fixed first.
+ */
+type Store = Omit<ReduxStore<unknown, UnknownAction>, 'dispatch'> & {
+    dispatch: (action: unknown) => unknown;
+};
+/**
+ * Initializes the app: sets up i18n, creates the store, fetches the client information and the
+ * dynamic settings, and runs all registered app initialization handlers.
+ * @param locales An object with locales.
+ * @param reducers The reducers from the theme.
+ * @param subscribers The subscribers to the streams middleware.
+ * @returns The initialized store.
+ */
+export declare const initialize: (locales: Record<string, unknown>, reducers: Parameters<typeof configureStore>[0], subscribers: Parameters<typeof configureStore>[1]) => Promise<{
+    store: Store;
 }>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/core/initialization/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/initialization/index.js"],"names":[],"mappings":"AAuIO,oCAJI,MAAM;;GAuDhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/initialization/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgB5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE;YACb,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC;KACH;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;CACxC,CAAC;AAMF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,UAAU,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,EAC9C,aAAa,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC;;EAuDlD,CAAC"}

package/core/initialization/index.js

@@ -1,118 +1,37 @@
-import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
 import moment from 'moment';
 import { configureStore } from '@shopgate/pwa-common/store';
 import { appWillInit, appWillStart } from '@shopgate/pwa-common/action-creators/app';
 import { i18n, getAppBaseUrl, isDev, hasSGJavaScriptBridge, hasWebBridge } from '@shopgate/engage/core/helpers';
 import fetchClientInformation from '@shopgate/pwa-common/actions/client/fetchClientInformation';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import { appConfig } from '@shopgate/engage';
 import { appInitialization, configuration } from '@shopgate/engage/core/collections';
 import { CONFIGURATION_COLLECTION_KEY_BASE_URL } from '@shopgate/engage/core/constants';
-import { loadCustomStyles } from '@shopgate/engage/styles';
-import { receiveShopSettings, errorShopSettings } from '@shopgate/engage/settings/action-creators/shopSettings';
-import { receiveMerchantSettings } from '@shopgate/engage/settings/action-creators/merchantSettings';
-const {
-  locales: {
-    currency: currencyLocale = null
-  } = {},
-  settingsUrl,
-  merchantSettingsUrl
-} = appConfig;
-const REQUEST_TIMEOUT = 3000;
-/**
- * Injects a script tag to fetch the shop settings JSONP.
- * @param {string} id The script id
- * @param {string} src The script url
- * @param {Function} onError Callback for error situations.
- */
-const injectScript = (id, src, onError) => {
-  let scriptTag = document.querySelector(`#${id}`);
-  if (scriptTag) {
-    scriptTag.remove();
-  }
-  scriptTag = document.createElement('script');
-  scriptTag.setAttribute('src', src);
-  scriptTag.setAttribute('id', id);
-  scriptTag.onerror = onError;
-  document.querySelector('head').appendChild(scriptTag);
-};
+import { loadCustomStyles, loadThemeCss } from '@shopgate/engage/styles';
+import { fetchSettings } from "./fetchSettings";
 
 /**
- * Fetches settings
- * @param {Object} store Reference to the store
- * @returns {Promise}
+ * The app's redux store. Assembled here because configureStore is untyped JS whose JSDoc widens
+ * the return value to `Object`.
+ *
+ * dispatch stays permissive rather than using redux-thunk's ThunkDispatch: the action creators
+ * this module dispatches are untyped JS annotated `@returns {Object}` / `{Function}`, which match
+ * neither UnknownAction nor ThunkAction. Tightening it here would only force casts at every call
+ * site - it needs the JSDoc on those action creators to be fixed first.
  */
-const fetchSettings = store => new Promise((resolve, reject) => {
-  if (!settingsUrl) {
-    reject();
-    return;
-  }
-  let timeout;
-  let merchantReceived = null;
-  let shopReceived = null;
-
-  /**
-   * Evaluates if completed.
-   */
-  const evaluateEnd = () => {
-    if (!merchantReceived && merchantSettingsUrl || !shopReceived) {
-      return;
-    }
-    clearTimeout(timeout);
-    timeout = null;
-    resolve();
-  };
 
-  // Add the callbacks for the JSONP
-  window.setShopSettings = settings => {
-    store.dispatch(receiveShopSettings(settings));
-    shopReceived = true;
-    evaluateEnd();
-  };
-  window.setMerchantSettings = settings => {
-    store.dispatch(receiveMerchantSettings(settings));
-    merchantReceived = true;
-    evaluateEnd();
-  };
-
-  // Error handling
-  injectScript('shop-settings-jsonp', settingsUrl, error => {
-    withScope(scope => {
-      scope.setLevel(SentrySeverity.Error);
-      scope.setExtra('settingsUrl', settingsUrl);
-      captureMessage('Fetching shop settings failed');
-    });
-    clearTimeout(timeout);
-    timeout = null;
-    store.dispatch(errorShopSettings(error));
-    reject();
-  });
-  if (merchantSettingsUrl) {
-    injectScript('merchant-settings-jsonp', merchantSettingsUrl, () => {
-      withScope(scope => {
-        scope.setLevel(SentrySeverity.Error);
-        scope.setExtra('settingsUrl', merchantSettingsUrl);
-        captureMessage('Fetching merchant settings failed');
-      });
-      clearTimeout(timeout);
-      timeout = null;
-      reject();
-    });
-  }
-  timeout = setTimeout(() => {
-    withScope(scope => {
-      scope.setLevel(SentrySeverity.Warning);
-      scope.setExtra('settingsUrl', settingsUrl);
-      scope.setExtra('timeout', REQUEST_TIMEOUT);
-      captureMessage('Fetching shop settings took too long');
-    });
-  }, REQUEST_TIMEOUT);
-});
+const {
+  locales: {
+    currency: currencyLocale = null
+  } = {}
+} = appConfig;
 
 /**
- *
- * @param {Object} locales An object with locales.
- * @param {Function} reducers The reducers from the theme.
- * @param {Array} subscribers The subscribers to the streams middleware.
+ * Initializes the app: sets up i18n, creates the store, fetches the client information and the
+ * dynamic settings, and runs all registered app initialization handlers.
+ * @param locales An object with locales.
+ * @param reducers The reducers from the theme.
+ * @param subscribers The subscribers to the streams middleware.
+ * @returns The initialized store.
  */
 export const initialize = async (locales, reducers, subscribers) => {
   moment.locale(process.env.LOCALE);
@@ -142,7 +61,10 @@ export const initialize = async (locales, reducers, subscribers) => {
   configuration.set(CONFIGURATION_COLLECTION_KEY_BASE_URL, getAppBaseUrl());
   store.dispatch(appWillInit(`${window.location.pathname}${window.location.search}`));
   try {
-    const promises = [fetchSettings(store), loadCustomStyles()];
+    // The order of the style loaders does not affect the cascade: loadThemeCss pins its link to
+    // the theme css insertion point in the html template, while loadCustomStyles appends its link
+    // to the end of the head.
+    const promises = [fetchSettings(store), loadCustomStyles(), loadThemeCss()];
     await Promise.all(promises);
   } catch (e) {
     // Nothing to see here.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.3",
+  "version": "7.32.0-beta.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,13 +17,13 @@
   "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.32.0-beta.3",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.3",
-    "@shopgate/pwa-core": "7.32.0-beta.3",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.3",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.3",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.3",
+    "@shopgate/native-modules": "1.0.0-beta.32",
+    "@shopgate/pwa-common": "7.32.0-beta.5",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.5",
+    "@shopgate/pwa-core": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.5",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
@@ -46,7 +46,7 @@
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "@shopgate/pwa-unit-test": "7.32.0-beta.3",
+    "@shopgate/pwa-unit-test": "7.31.3",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.24",
     "@types/react-dom": "^17.0.2",

package/page/components/NotFound.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ */
+declare const NotFound: () => import("react").JSX.Element;
+export default NotFound;
+//# sourceMappingURL=NotFound.d.ts.map

package/page/components/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/page/components/NotFound.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { I18n, Typography } from '@shopgate/engage/components';
@@ -32,7 +32,6 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The NotFoundPage component renders a "Page Not Found" view
  * with options to navigate back or to the home page.
- * @returns {JSX.Element}
  */
 const NotFound = () => {
   const {

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts

@@ -0,0 +1,52 @@
+export default Protector;
+export type OnImageRatioChange = (ratio: string) => any;
+export type CustomResponsiveImageProps = {
+    /**
+     * Whether to enable the parallax effect.
+     */
+    enableParallax?: boolean | undefined;
+    /**
+     * The border radius to apply to the image.
+     */
+    borderRadius?: number | undefined;
+    /**
+     * The breakpoint from which on a higher resolution image should
+     * be loaded.
+     */
+    breakpoint?: import("../../../styles/theme").Breakpoint | undefined;
+    /**
+     * Whether the image is used as a banner (full width and height of
+     * its container).
+     */
+    isBanner?: boolean | undefined;
+    /**
+     * Called when the aspect ratio of the image
+     * changes.
+     */
+    onImageRatioChange?: OnImageRatioChange | undefined;
+};
+export type Theme = import("@shopgate/engage/styles").Theme;
+export type Breakpoint = Theme["breakpoints"]["keys"][0];
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type ResponsiveImageProps = CustomResponsiveImageProps & ImgProps;
+/**
+ * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
+ *
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Protector({ src, ...rest }: ResponsiveImageProps): JSX.Element;
+declare namespace Protector {
+    namespace propTypes {
+        let src: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let src_1: null;
+        export { src_1 as src };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ResponsiveWidgetImage.d.ts.map

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveWidgetImage.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.jsx"],"names":[],"mappings":";yCASW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;oBAeH,OAAO,yBAAyB,EAAE,KAAK;yBACvC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;uBAC/B,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;mCACzC,0BAA0B,GAAG,QAAQ;AAgKnD;;;;;;;GAOG;AACH,6CAHW,oBAAoB,GAClB,GAAG,CAAC,OAAO,CASvB;;;;;;;;;;kBA1MmD,OAAO;sBACrC,YAAY"}

package/page/components/ResponsiveWidgetImage/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ResponsiveWidgetImage";
+//# sourceMappingURL=index.d.ts.map

package/page/components/ResponsiveWidgetImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/index.js"],"names":[],"mappings":""}

package/page/components/WidgetRichText/WidgetRichText.d.ts

@@ -0,0 +1,25 @@
+export default WidgetRichText;
+/**
+ * @param {Object} props The component props.
+ * @param {string} props.content The rich text content.
+ * @param {string} [props.className] An optional class name.
+ * @returns {JSX.Element}
+ */
+declare function WidgetRichText({ content, className, }: {
+    content: string;
+    className?: string | undefined;
+}): JSX.Element;
+declare namespace WidgetRichText {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let content: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let content_1: string;
+        export { content_1 as content };
+        let className_1: null;
+        export { className_1 as className };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=WidgetRichText.d.ts.map

package/page/components/WidgetRichText/WidgetRichText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRichText.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/WidgetRichText.jsx"],"names":[],"mappings":";AA2DA;;;;;GAKG;AACH,yDAJG;IAAsB,OAAO,EAArB,MAAM;IACS,SAAS;CAChC,GAAU,GAAG,CAAC,OAAO,CAmBvB;;;;;;;;;;;;;sBAjFqB,YAAY"}

package/page/components/WidgetRichText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./WidgetRichText";
+//# sourceMappingURL=index.d.ts.map

package/page/components/WidgetRichText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/index.js"],"names":[],"mappings":""}

package/page/components/WidgetVideo/WidgetVideo.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+export interface WidgetVideoProps {
+    /**
+     * Whether the video is used in a banner.
+     */
+    isBanner?: boolean;
+    /**
+     * The video URL.
+     */
+    url?: string | null;
+    /**
+     * Whether the video is muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video is looping.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video controls are shown.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius value.
+     */
+    borderRadius?: number;
+    /**
+     * The link URL.
+     */
+    link?: string | null;
+}
+/**
+ * The WidgetVideo component is used to display a video in a widget.
+ */
+declare const WidgetVideo: ({ isBanner, url, muted, loop, controls, autoplay, borderRadius, link, }: WidgetVideoProps) => import("react").JSX.Element | null;
+export default WidgetVideo;
+//# sourceMappingURL=WidgetVideo.d.ts.map

package/page/components/WidgetVideo/WidgetVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/page/components/WidgetVideo/WidgetVideo.js

@@ -1,11 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { usePrevious, useAppEventOnReturnFromBackground } from '@shopgate/engage/core/hooks';
-import { ConditionalWrapper, Link } from '@shopgate/engage/components';
-import PropTypes from 'prop-types';
+import { ConditionalWrapper, Link as EngageLink } from '@shopgate/engage/components';
 import { isHttpsUrl } from "../../helpers";
+
+// `Link` is a redux-connected component whose react-redux connect() typing resolves its own props
+// (href/children) to `never`; alias it to its actual usable prop shape.
 import { jsx as _jsx } from "react/jsx-runtime";
+const Link = EngageLink;
+
+/**
+ * Style parameters for the widget video.
+ */
+
 const useStyles = makeStyles()((_theme, {
   borderRadius
 }) => ({
@@ -36,28 +44,22 @@ const useStyles = makeStyles()((_theme, {
   }
 }));
 
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+
 /**
  * The WidgetVideo component is used to display a video in a widget.
- * @param {Object} props The component props.
- * @param {boolean} props.isBanner Whether the video is used in a banner.
- * @param {string} props.url The video URL.
- * @param {boolean} props.muted Whether the video is muted.
- * @param {boolean} props.loop Whether the video is looping.
- * @param {boolean} props.controls Whether the video controls are shown.
- * @param {boolean} props.autoplay Whether the video should autoplay.
- * @param {number} props.borderRadius The border radius value.
- * @param {string} props.link The link URL.
- * @returns {JSX.Element}
  */
 const WidgetVideo = ({
-  isBanner,
-  url,
-  muted,
-  loop,
-  controls,
-  autoplay,
-  borderRadius,
-  link
+  isBanner = false,
+  url = null,
+  muted = false,
+  loop = false,
+  controls = false,
+  autoplay = false,
+  borderRadius = 0,
+  link = null
 }) => {
   const reduceMotion = useReduceMotion();
   const autoplayValue = reduceMotion ? false : isBanner || autoplay;
@@ -68,7 +70,7 @@ const WidgetVideo = ({
     borderRadius
   });
   const [hasError, setHasError] = useState(false);
-  const videoRef = React.useRef(null);
+  const videoRef = useRef(null);
   const prevUrl = usePrevious(url);
   const isValidUrl = useMemo(() => url ? isHttpsUrl(url) : false, [url]);
   const showControls = useMemo(() => {
@@ -81,25 +83,27 @@ const WidgetVideo = ({
 
   // Resume video playback when app returned from background
   useAppEventOnReturnFromBackground(() => {
-    if (!videoRef.current || reduceMotion || !autoplayValue) {
+    const video = videoRef.current;
+    if (!video || reduceMotion || !autoplayValue) {
       return;
     }
-    videoRef.current.play();
+    video.play();
   });
   useEffect(() => {
-    if (!videoRef.current) {
+    const video = videoRef.current;
+    if (!video) {
       return;
     }
     if (reduceMotion) {
       // Pause playback when reduced motion settings changed after video was rendered
-      videoRef.current.pause();
+      video.pause();
       return;
     }
     if (autoplayValue) {
-      videoRef.current.play();
+      video.play();
     } else {
-      videoRef.current.pause();
-      videoRef.current.currentTime = 0;
+      video.pause();
+      video.currentTime = 0;
     }
   }, [autoplayValue, reduceMotion]);
   useEffect(() => {
@@ -146,14 +150,4 @@ const WidgetVideo = ({
     })
   });
 };
-WidgetVideo.defaultProps = {
-  isBanner: false,
-  link: null,
-  url: null,
-  muted: false,
-  loop: false,
-  controls: false,
-  autoplay: false,
-  borderRadius: 0
-};
 export default WidgetVideo;

package/page/components/WidgetVideo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './WidgetVideo';
+//# sourceMappingURL=index.d.ts.map