@shopgate/pwa-common 7.31.4-beta.1 → 7.32.0-beta.2

package/collections/media-providers/style.js

@@ -1,8 +1,4 @@
 import { css } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
 const responsiveContainer = css({
   position: 'relative',
   height: 0,
@@ -29,19 +25,18 @@ const consentContainer = css({
   justifyContent: 'center',
   textAlign: 'center',
   gap: 16,
-  background: colors.shade10,
-  border: `1px solid ${colors.shade5}`,
-  // Add a tiny little border radius to make the message container look nice with padding
+  background: 'var(--sg-palette-grey-light)',
+  border: '1px solid var(--sg-components-border-medium)',
   borderRadius: 4,
   top: 0
 });
 const consentLink = css({
   textAlign: 'center',
-  color: colors.primary,
+  color: 'var(--sg-palette-primary-main)',
   fontWeight: 500
 }).toString();
 const consentIcon = css({
-  fill: colors.shade5,
+  fill: 'var(--sg-palette-grey-medium)',
   height: 40
 });
 export default {

package/components/Backdrop/index.js

@@ -104,7 +104,7 @@ function Backdrop({
 }
 Backdrop.defaultProps = {
   className: '',
-  color: '#000',
+  color: 'var(--sg-palette-common-black)',
   duration: 200,
   isVisible: false,
   level: 2,

package/components/Icon/index.d.ts

@@ -31,6 +31,6 @@ export interface IconProps {
  * Provides basic styling via `currentColor` and supports size and color
  * overrides through props while allowing external class-based overrides.
  */
-declare const Icon: ({ content, className, color, viewBox, size, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const Icon: ({ content, className, color, viewBox, size, }: IconProps) => import("react").JSX.Element;
 export default Icon;
 //# sourceMappingURL=index.d.ts.map

package/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,4CAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,gCAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Image/Image.js

@@ -1,14 +1,10 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getFullImageSource } from '@shopgate/engage/core/helpers';
 import ImageInner from "./ImageInner";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors: themeColors
-} = themeConfig;
 const useStyles = makeStyles()((_theme, {
   background,
   paddingTop
@@ -204,7 +200,7 @@ const defaultResolutions = [{
 }];
 Image.defaultProps = {
   alt: null,
-  backgroundColor: themeColors.placeholder,
+  backgroundColor: 'var(--sg-palette-background-emphasized)',
   className: '',
   classNameImg: '',
   forcePlaceholder: false,

package/components/Modal/index.js

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     top: 0,
@@ -25,8 +25,8 @@ const useStyles = makeStyles()({
     position: 'relative',
     maxWidth: '100vw',
     maxHeight: '100vh',
-    paddingTop: 'var(--safe-area-inset-top)',
-    paddingBottom: 'var(--safe-area-inset-bottom)',
+    paddingTop: theme.layout.safeArea.top,
+    paddingBottom: theme.layout.safeArea.bottom,
     overflowY: 'scroll',
     [responsiveMediaQuery('>xs', {
       webOnly: true
@@ -34,7 +34,7 @@ const useStyles = makeStyles()({
       overflowY: 'initial'
     }
   }
-});
+}));
 
 /**
  * The Modal component.

package/components/SurroundPortals/index.d.ts

@@ -19,6 +19,6 @@ export interface SurroundPortalsProps {
  *
  * @returns The SurroundPortals component.
  */
-declare const SurroundPortals: ({ portalName, portalProps, children, }: SurroundPortalsProps) => import("react/jsx-runtime").JSX.Element;
+declare const SurroundPortals: ({ portalName, portalProps, children, }: SurroundPortalsProps) => React.JSX.Element;
 export default SurroundPortals;
 //# sourceMappingURL=index.d.ts.map

package/components/SurroundPortals/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SurroundPortals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,GAAI,wCAItB,oBAAoB,4CAQtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SurroundPortals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,GAAI,wCAItB,oBAAoB,sBAQtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/Swiper/index.js

@@ -9,10 +9,9 @@ import 'swiper/css/navigation';
 import 'swiper/css/zoom';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import SwiperItem from "./components/SwiperItem";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
     maxHeight: '100%',
@@ -27,7 +26,7 @@ const useStyles = makeStyles()(() => ({
   },
   innerContainer: {
     overflow: 'hidden',
-    '--swiper-navigation-color': themeColors.gray,
+    '--swiper-navigation-color': theme.components.swiper.paginationBulletColor,
     '& .swiper-wrapper': {
       alignItems: 'stretch'
     },
@@ -36,11 +35,10 @@ const useStyles = makeStyles()(() => ({
     },
     '& .swiper-pagination': {
       '& .swiper-pagination-bullet': {
-        background: themeColors.gray,
+        background: theme.components.swiper.paginationBulletActiveColor,
         opacity: '.5',
         margin: '0 4px',
-        transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-        border: `1px solid ${themeColors.dark}`
+        transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
       },
       '& .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main': {
         opacity: 1
@@ -51,8 +49,8 @@ const useStyles = makeStyles()(() => ({
       left: 'auto',
       right: 0,
       bottom: 'auto',
-      fontSize: 12,
-      background: themeColors.background,
+      fontSize: theme.typography.caption.fontSize,
+      background: theme.components.swiper.paginationFractionBackground,
       borderRadius: '50px',
       width: 'fit-content',
       padding: '4px 8px',
@@ -60,9 +58,9 @@ const useStyles = makeStyles()(() => ({
       transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
     },
     '& .swiper-pagination-progressbar': {
-      background: themeColors.shade7,
+      background: theme.components.swiper.paginationProgressbarBackground,
       '& .swiper-pagination-progressbar-fill': {
-        background: themeColors.dark
+        background: theme.components.swiper.paginationProgressbarActiveColor
       }
     }
   },

package/helpers/config/index.d.ts

@@ -51,44 +51,5 @@ export default appConfig;
  * Be careful when changing existing properties on the fly, reassignments should never be done!
  * @mixes AppConfig
  */
-declare const appConfig: string | {
-    appId: string;
-    browserConnector: boolean;
-    colors: {};
-    forgotPasswordUrl: null;
-    hasFavorites: boolean;
-    hasReviews: boolean;
-    showWriteReview: boolean;
-    language: string;
-    logo: string;
-    marketId: string;
-    publicPath: string;
-    shopName: string;
-    webCheckoutShopify: null;
-    hasNoScanner: boolean;
-    apiUrl: string;
-    shopCNAME: null;
-    currency: string;
-    showGmdMenuSubHeaders: boolean;
-    benchmark: boolean;
-    sentry: {};
-    theme: {};
-    cartShippingHideAnonymousLegacy: null;
-    cartShippingTextAnonymousLegacy: null;
-    variantSelectionMode: null;
-    product: {
-        variantPreselect: boolean;
-    };
-    cart: {};
-    scanner: {};
-    favorites: {};
-    tracking: {
-        hasWebTrackingEngage: boolean;
-        useSkuAsProductId: boolean;
-    };
-    webTrackingEngage: {
-        android: string;
-        ios: string;
-    };
-} | undefined;
+declare const appConfig: any;
 //# sourceMappingURL=index.d.ts.map

package/helpers/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA8F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.31.4-beta.1",
+  "version": "7.32.0-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.31.4-beta.1",
+    "@shopgate/pwa-benchmark": "7.32.0-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -26,7 +26,7 @@
     "glamor": "^2.20.40",
     "gsap": "^3.14.2",
     "history": "^4.9.0",
-    "intl-messageformat": "^11.1.2",
+    "intl-messageformat": "^11.2.9",
     "path-match": "^1.2.4",
     "react-dotdotdot": "~1.3.1",
     "react-helmet": "^6.1.0",
@@ -37,10 +37,10 @@
     "redux-thunk": "^3.1.0",
     "reselect": "^4.1.8",
     "rxjs": "~5.5.12",
-    "swiper": "12.1.0"
+    "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.31.4-beta.1",
+    "@shopgate/pwa-core": "7.32.0-beta.2",
     "@types/lodash": "^4.17.24",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",

package/providers/toast/index.js

@@ -3,20 +3,20 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { withTheme } from '@shopgate/engage/styles/theme/hocs/withTheme';
 import ToastContext from "./context";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables: {
-    toast: {
-      duration = 5000
-    } = {}
-  } = {}
-} = themeConfig;
+
+/**
+ * @typedef {Object} ToastProviderProps
+ * @property {import('react').ReactNode} children
+ * @property {import('@shopgate/engage/styles').Theme} theme
+ */
 
 /**
  * The ToastProvider component
+ * @augments {Component<ToastProviderProps>}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 let ToastProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
@@ -47,7 +47,7 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
         found.actionLabel = toast.actionLabel;
         found.message = toast.message;
         found.messageParams = toast.messageParams;
-        found.duration = toast.duration || duration;
+        found.duration = toast.duration || _this.props.theme.transitions.duration.toast;
       } else {
         toasts.push({
           id: toast.id,
@@ -55,7 +55,7 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
           actionLabel: toast.actionLabel,
           message: toast.message,
           messageParams: toast.messageParams,
-          duration: toast.duration || duration
+          duration: toast.duration || _this.props.theme.transitions.duration.toast
         });
       }
       _this.setState({
@@ -117,4 +117,4 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
 }(Component);
 ToastProvider.ADD = 'toast_add';
 ToastProvider.FLUSH = 'toast_flush';
-export default ToastProvider;
+export default withTheme(ToastProvider);

package/subscriptions/router.js

@@ -9,7 +9,7 @@ import Route from '@virtuous/conductor/Route';
 import { Linking } from '@shopgate/native-modules';
 import { HISTORY_RESET_TO } from '@shopgate/pwa-common/constants/ActionTypes';
 import { logger } from '@shopgate/pwa-core';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isPageAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import addCouponsToCart from '@shopgate/pwa-common-commerce/cart/actions/addCouponsToCart';
 import { getCurrentRoute, getRouterStackIndex } from "../selectors/router";
 import { LoadingProvider } from "../providers";
@@ -31,7 +31,7 @@ import ToastProvider from "../providers/toast";
  */
 export default function routerSubscriptions(subscribe) {
   subscribe(navigate$, async params => {
-    if (IS_PAGE_PREVIEW_ACTIVE) {
+    if (isPageAdminPreviewActive()) {
       // No navigation is allowed in page preview mode.
       return;
     }