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

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.4",
   "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.4",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.4",
+    "@shopgate/pwa-core": "7.32.0-beta.4",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.4",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.4",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.4",
     "@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/product/components/Description/index.js

@@ -16,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: 1.7,
     overflow: 'hidden',
     wordBreak: ['break-all', 'break-word'],
-    color: theme.palette.text.primary,
     hyphens: 'auto',
     ' ul': {
       listStyle: 'disc'
@@ -69,7 +68,6 @@ function Description({
         variant: "h5",
         component: "div",
         className: cx(classes.title, 'theme__description_heading'),
-        color: "textPrimary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })

package/product/components/ProductCard/index.js

@@ -16,6 +16,7 @@ const useStyles = makeStyles()(theme => ({
     padding: '12px 16px'
   },
   title: {
+    fontSize: theme.typography.body2.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.15,
     marginTop: 1

package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js

@@ -12,7 +12,7 @@ const useStyles = makeStyles()({
   root: {
     lineHeight: 1.2,
     ':not(:empty)': {
-      padding: '12px 0 16px'
+      padding: '16px 8px 8px'
     }
   },
   quantityHint: {

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -3,10 +3,16 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { getProductImageSettings, ProductImage } from '@shopgate/engage/product';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   ListImage: gridResolutions
 } = getProductImageSettings();
+const useStyles = makeStyles()(theme => ({
+  image: {
+    background: theme.palette.background.surface
+  }
+}));
 
 /**
  * The item image component.
@@ -18,6 +24,9 @@ const ItemImage = ({
   name,
   imageUrl
 }) => {
+  const {
+    classes
+  } = useStyles();
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
@@ -25,6 +34,7 @@ const ItemImage = ({
     portalName: PRODUCT_ITEM_IMAGE,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx(ProductImage, {
+      className: classes.image,
       alt: name,
       src: imageUrl,
       resolutions: gridResolutions,

package/product/components/ProductGrid/components/Item/components/ItemName/index.js

@@ -7,6 +7,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
+    fontSize: theme.typography.body2.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     marginTop: 1,
     wordBreak: ['keep-all', 'break-word'],

package/product/components/ProductGrid/components/Item/index.js

@@ -17,7 +17,6 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    background: theme.palette.background.surface,
     height: '100%'
   },
   itemDetails: {

package/product/components/ProductGrid/components/Layout/index.js

@@ -11,9 +11,23 @@ const useStyles = makeStyles()((theme, {
     ':not(:empty)': {
       marginTop: 16
     },
-    display: 'grid',
-    gridGap: '0 16px',
-    gridTemplateColumns: `repeat(${columns}, 1fr)`
+    ...(columns <= 2 ? {
+      rowGap: 16,
+      '& > *': {
+        padding: '0px 8px',
+        width: `${100 / columns}%`,
+        [`&:nth-of-type(${columns}n)`]: {
+          paddingRight: 0
+        },
+        [`&:nth-of-type(${columns}n+1)`]: {
+          paddingLeft: 0
+        }
+      }
+    } : {
+      display: 'grid',
+      gridGap: 16,
+      gridTemplateColumns: `repeat(${columns}, 1fr)`
+    })
   }
 }));
 

package/product/components/ProductList/components/Layout/index.js

@@ -1,34 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  list: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Layout = ({
   children
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    className: cx(classes.list, 'engage__product__product-list'),
-    itemScope: true,
-    itemType: "http://schema.org/ItemList",
-    "data-test-id": "productList",
-    children: children
-  });
-};
+}) => /*#__PURE__*/_jsx(List, {
+  className: "engage__product__product-list",
+  itemScope: true,
+  itemType: "http://schema.org/ItemList",
+  "data-test-id": "productList",
+  children: children
+});
 Layout.defaultProps = {
   children: null
 };

package/styles/helpers/index.d.ts

@@ -4,6 +4,7 @@ export { setPageContentWidth } from "./setPageContentWidth";
 export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/index.js

@@ -6,6 +6,7 @@ export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { initCSSCustomProps, initCSSCustomPropsFallback } from "./initCSSCustomProperties";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/loadThemeCss.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Loads the theme css file. It overrides the css custom properties that are generated during
+ * theme initialization, so it has to win the cascade against them - see `insertLinkTag` for how
+ * that order is established.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win.
+ *
+ * Resolves when the file loaded, when it failed, or when REQUEST_TIMEOUT elapsed - it never
+ * rejects, since the file is not guaranteed to exist and must not be able to block app start.
+ * @returns A promise that resolves once the file settled.
+ */
+export declare const loadThemeCss: () => Promise<void>;
+//# sourceMappingURL=loadThemeCss.d.ts.map

package/styles/helpers/loadThemeCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadThemeCss.d.ts","sourceRoot":"","sources":["../../../styles/helpers/loadThemeCss.ts"],"names":[],"mappings":"AAgCA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAgF1C,CAAC"}