@salesforce/commerce-sdk-react 1.3.0 → 1.4.0-dev.1

package/CHANGELOG.md

@@ -1,7 +1,15 @@
+## v1.4.0-dev (Jan 22, 2024)
+
+- Add Support for SLAS private flow [#1722](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1722)
+- Fix invalid query params warnings and allow custom query [#1655](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1655)
+- Fix cannot read properties of undefined (reading 'unshift') [#1689](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1689)
+- Add Shopper SEO hook [#1688](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1688)
+- Update useLocalStorage implementation to be more responsive [#1703](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1703)
+- Storefront Preview: avoid stale cached Commerce API responses, whenever the Shopper Context is set [#1701](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1701)
+
 ## v1.3.0 (Jan 19, 2024)
 
 - Add support for node 20 [#1612](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1612)
-- Fix bug when running in an iframe [#1629](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1629)
 
 ## v1.2.0 (Dec 08, 2023)
 

package/README.md

@@ -112,6 +112,67 @@ _💡 This section assumes you have read and completed the [Authorization for Sh
 
 To help reduce boilerplate code for managing shopper authentication, by default, this library automatically initializes shopper session and manages the tokens for developers. Currently, the library supports the [Public Client login flow](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-public-client.html).
 
+Commerce-react-sdk supports both public and private flow of the [Authorization for Shopper APIs](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html) guide._
+You can choose to use either public or private slas to login. By default, public flow is enabled.
+
+#### How private SLAS works
+This section assumes you read and understand how [private SLAS](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-private-client.html) flow works
+
+To enable private slas flow, you need to pass your secret into the CommercerProvider via clientSecret prop.
+**Note** You should only use private slas if you know you can secure your secret since commercer-sdk-react runs isomorphically.
+
+```js
+// app/components/_app-config/index.jsx
+
+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
+
+const AppConfig = ({children}) => {
+    return (
+        <CommerceApiProvider
+            clientId="12345678-1234-1234-1234-123412341234"
+            organizationId="f_ecom_aaaa_001"
+            proxy="localhost:3000/mobify/proxy/api"
+            redirectURI="localhost:3000/callback"
+            siteId="RefArch"
+            shortCode="12345678"
+            locale="en-US"
+            currency="USD"
+            clientSecret="<your-slas-private-secret>"
+        >
+            {children}
+        </CommerceApiProvider>
+    )
+}
+```
+#### Disable slas private warnings 
+By default, a warning as below will be displayed on client side to remind developers to always keep their secret safe and secured.
+```js
+'You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!'
+```
+You can disable this warning by using CommerceProvider prop `silenceWarnings`
+
+```js
+const AppConfig = ({children}) => {
+    return (
+        <CommerceApiProvider
+            clientId="12345678-1234-1234-1234-123412341234"
+            organizationId="f_ecom_aaaa_001"
+            proxy="localhost:3000/mobify/proxy/api"
+            redirectURI="localhost:3000/callback"
+            siteId="RefArch"
+            shortCode="12345678"
+            locale="en-US"
+            currency="USD"
+            clientSecret="<your-slas-private-secret>"
+            silenceWarnings={true}
+        >
+            {children}
+        </CommerceApiProvider>
+    )
+}
+```
+
 ### Shopper Session Initialization
 
 On `CommerceApiProvider` mount, the provider initializes shopper session by initiating the SLAS **Public Client** login flow. The tokens are stored/managed/refreshed by the library.
@@ -121,7 +182,6 @@ On `CommerceApiProvider` mount, the provider initializes shopper session by init
 While the library is fetching/refreshing the access token, the network requests will queue up until there is a valid access token.
 
 ### Login helpers
-
 To leverage the managed shopper authentication feature, use the `useAuthHelper` hook for shopper login.
 
 Example:
@@ -144,6 +204,7 @@ const Example = () => {
 
 You have the option of handling shopper authentication externally, by providing a SLAS access token. This is useful if you plan on using this library in an application where the authentication mechanism is different.
 
+
 ```jsx
 const MyComponent = ({children}) => {
     return <CommerceApiProvider fetchedToken="xxxxxxxxxxxx">{children}</CommerceApiProvider>

package/auth/index.d.ts

@@ -9,6 +9,9 @@ interface AuthConfig extends ApiClientConfigParams {
     fetchOptions?: ShopperLoginTypes.FetchOptions;
     fetchedToken?: string;
     OCAPISessionsURL?: string;
+    enablePWAKitPrivateClient?: boolean;
+    clientSecret?: string;
+    silenceWarnings?: boolean;
 }
 /**
  * The extended field is not from api response, we manually store the auth type,
@@ -21,7 +24,7 @@ export type AuthData = Prettify<RemoveStringIndex<TokenResponse> & {
     idp_access_token: string;
 }>;
 /** A shopper could be guest or registered, so we store the refresh tokens individually. */
-type AuthDataKeys = Exclude<keyof AuthData, 'refresh_token'> | 'refresh_token_guest' | 'refresh_token_registered' | 'refresh_token_guest_copy' | 'refresh_token_registered_copy';
+type AuthDataKeys = Exclude<keyof AuthData, 'refresh_token'> | 'refresh_token_guest' | 'refresh_token_registered' | 'access_token_sfra';
 /**
  * This class is used to handle shopper authentication.
  * It is responsible for initializing shopper session, manage access
@@ -35,11 +38,11 @@ declare class Auth {
     private shopperCustomersClient;
     private redirectURI;
     private pendingToken;
-    private REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED;
-    private REFRESH_TOKEN_EXPIRATION_DAYS_GUEST;
     private stores;
     private fetchedToken;
     private OCAPISessionsURL;
+    private clientSecret;
+    private silenceWarnings;
     constructor(config: AuthConfig);
     get(name: AuthDataKeys): string;
     private set;
@@ -53,20 +56,21 @@ declare class Auth {
      */
     private isTokenExpired;
     /**
-     * WARNING: This function is relevant to be used in Hybrid deployments only.
-     * Compares the refresh_token keys for guest('cc-nx-g') and registered('cc-nx') login from the cookie received from SFRA with the copy stored in localstorage on PWA Kit
-     * to determine if the login state of the shopper on SFRA site has changed. If the keys are different we return true considering the login state did change. If the keys are same,
-     * we compare the values of the refresh_token to cover an edge case where the login state might have changed multiple times on SFRA and the eventual refresh_token key might be same
-     * as that on PWA Kit which would incorrectly show both keys to be the same even though the sessions are different.
-     * @returns {boolean} true if the keys do not match (login state changed), false otherwise.
-     */
-    private hasSFRAAuthStateChanged;
-    /**
-     * Used to validate JWT expiry and ensure auth state consistency with SFRA in a hybrid setup
-     * @param token access_token received on SLAS authentication
-     * @returns {boolean} true if JWT is valid; false otherwise
+     * Returns the SLAS access token or an empty string if the access token
+     * is not found in local store or if SFRA wants PWA to trigger refresh token login.
+     *
+     * On PWA-only sites, this returns the access token from local storage.
+     * On Hybrid sites, this checks whether SFRA has sent an auth token via cookies.
+     * Returns an access token from SFRA if it exist.
+     * If not, the access token from local store is returned.
+     *
+     * This is only used within this Auth module since other modules consider the access
+     * token from this.get('access_token') to be the source of truth.
+     *
+     * @returns {string} access token
      */
-    private isTokenValidForHybrid;
+    private getAccessToken;
+    private clearSFRAAuthToken;
     /**
      * This method stores the TokenResponse object retrived from SLAS, and
      * store the data in storage.
@@ -80,6 +84,7 @@ declare class Auth {
      * @Internal
      */
     queueRequest(fn: () => Promise<TokenResponse>, isGuest: boolean): Promise<ShopperLoginTypes.TokenResponse>;
+    logWarning: (msg: string) => void;
     /**
      * The ready function returns a promise that resolves with valid ShopperLogin
      * token response.

package/auth/index.js

@@ -8,6 +8,7 @@ var _commerceSdkIsomorphic = require("commerce-sdk-isomorphic");
 var _jwtDecode = require("jwt-decode");
 var _storage = require("./storage");
 var _utils = require("../utils");
+var _constant = require("../constant");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -87,27 +88,25 @@ const DATA_MAP = {
     storageType: 'local',
     key: 'refresh_token_expires_in'
   },
-  // For Hybrid setups, we need a mechanism to inform PWA Kit whenever customer login state changes on SFRA.
-  // So we maintain a copy of the refersh_tokens in the local storage which is compared to the actual refresh_token stored in cookie storage.
-  // If the key or value of the refresh_token in local storage is different from the one in cookie storage, this indicates a change in customer auth state and we invalidate the access_token in PWA Kit.
-  // This triggers a new fetch for access_token using the current refresh_token from cookie storage and makes sure customer auth state is always in sync between SFRA and PWA sites in a hybrid setup.
-  refresh_token_guest_copy: {
-    storageType: 'local',
-    key: isParentTrusted ? 'cc-nx-g-iframe' : 'cc-nx-g',
-    callback: store => {
-      store.delete(isParentTrusted ? 'cc-nx-iframe' : 'cc-nx');
-    }
-  },
-  refresh_token_registered_copy: {
-    storageType: 'local',
-    key: isParentTrusted ? 'cc-nx-iframe' : 'cc-nx',
-    callback: store => {
-      store.delete(isParentTrusted ? 'cc-nx-g-iframe' : 'cc-nx-g');
-    }
-  },
   customer_type: {
     storageType: 'local',
     key: 'customer_type'
+  },
+  /*
+   * For Hybrid setups, we need a mechanism to inform PWA Kit whenever customer login state changes on SFRA.
+   * We do this by having SFRA store the access token in cookies. If these cookies are present, PWA
+   * compares the access token from the cookie with the one in local store. If the tokens are different,
+   * discard the access token in local store and replace it with the access token from the cookie.
+   *
+   * ECOM has a 1200 character limit on the values of cookies. The access token easily exceeds this amount
+   * so it sends the access token in chunks across several cookies.
+   *
+   * The JWT tends to come in at around 2250 characters so there's usually
+   * both a cc-at and cc-at_2.
+   */
+  access_token_sfra: {
+    storageType: 'cookie',
+    key: 'cc-at'
   }
 };
 
@@ -120,11 +119,12 @@ const DATA_MAP = {
  * @Internal
  */
 class Auth {
-  REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED = 90;
-  REFRESH_TOKEN_EXPIRATION_DAYS_GUEST = 30;
   constructor(config) {
+    // Special endpoint for injecting SLAS private client secret
+    const baseUrl = config.proxy.split(`/mobify/proxy/api`)[0];
+    const privateClientEndpoint = `${baseUrl}/mobify/scapi/shopper/auth`;
     this.client = new _commerceSdkIsomorphic.ShopperLogin({
-      proxy: config.proxy,
+      proxy: config.enablePWAKitPrivateClient ? privateClientEndpoint : config.proxy,
       parameters: {
         clientId: config.clientId,
         organizationId: config.organizationId,
@@ -158,6 +158,35 @@ class Auth {
     this.redirectURI = config.redirectURI;
     this.fetchedToken = config.fetchedToken || '';
     this.OCAPISessionsURL = config.OCAPISessionsURL || '';
+
+    /*
+     * There are 2 ways to enable SLAS private client mode.
+     * If enablePWAKitPrivateClient=true, we route SLAS calls to /mobify/scapi/shopper/auth
+     * and set an internal placeholder as the client secret. The proxy will override the placeholder
+     * with the actual client secret so any truthy value as the placeholder works here.
+     *
+     * If enablePWAKitPrivateClient=false and clientSecret is provided as a non-empty string,
+     * private client mode is enabled but we don't route calls to /mobify/scapi/shopper/auth
+     * This is how non-PWA Kit consumers of commerce-sdk-react can enable private client and set a secret
+     *
+     * If both enablePWAKitPrivateClient and clientSecret are truthy, enablePWAKitPrivateClient takes
+     * priority and we ignore whatever was set for clientSecret. This prints a warning about the clientSecret
+     * being ignored.
+     *
+     * If both enablePWAKitPrivateClient and clientSecret are falsey, we are in SLAS public client mode.
+     */
+    if (config.enablePWAKitPrivateClient && config.clientSecret) {
+      this.logWarning(_constant.SLAS_SECRET_OVERRIDE_MSG);
+    }
+    this.clientSecret = config.enablePWAKitPrivateClient ?
+    // PWA proxy is enabled, assume project is PWA and that the proxy will handle setting the secret
+    // We can pass any truthy value here to satisfy commerce-sdk-isomorphic requirements
+    _constant.SLAS_SECRET_PLACEHOLDER :
+    // We think there are users of Commerce SDK React and Commerce SDK isomorphic outside of PWA
+    // For these users to use a private client, they must have some way to set a client secret
+    // PWA users should not need to touch this.
+    config.clientSecret || '';
+    this.silenceWarnings = config.silenceWarnings || false;
   }
   get(name) {
     const {
@@ -223,29 +252,56 @@ class Auth {
   }
 
   /**
-   * WARNING: This function is relevant to be used in Hybrid deployments only.
-   * Compares the refresh_token keys for guest('cc-nx-g') and registered('cc-nx') login from the cookie received from SFRA with the copy stored in localstorage on PWA Kit
-   * to determine if the login state of the shopper on SFRA site has changed. If the keys are different we return true considering the login state did change. If the keys are same,
-   * we compare the values of the refresh_token to cover an edge case where the login state might have changed multiple times on SFRA and the eventual refresh_token key might be same
-   * as that on PWA Kit which would incorrectly show both keys to be the same even though the sessions are different.
-   * @returns {boolean} true if the keys do not match (login state changed), false otherwise.
+   * Returns the SLAS access token or an empty string if the access token
+   * is not found in local store or if SFRA wants PWA to trigger refresh token login.
+   *
+   * On PWA-only sites, this returns the access token from local storage.
+   * On Hybrid sites, this checks whether SFRA has sent an auth token via cookies.
+   * Returns an access token from SFRA if it exist.
+   * If not, the access token from local store is returned.
+   *
+   * This is only used within this Auth module since other modules consider the access
+   * token from this.get('access_token') to be the source of truth.
+   *
+   * @returns {string} access token
    */
-  hasSFRAAuthStateChanged() {
-    const refreshTokenKey = this.get('refresh_token_registered') && 'refresh_token_registered' || 'refresh_token_guest';
-    const refreshTokenCopyKey = this.get('refresh_token_registered_copy') && 'refresh_token_registered_copy' || 'refresh_token_guest_copy';
-    if (DATA_MAP[refreshTokenKey].key !== DATA_MAP[refreshTokenCopyKey].key) {
-      return true;
+  getAccessToken() {
+    let accessToken = this.get('access_token');
+    const sfraAuthToken = this.get('access_token_sfra');
+    if (sfraAuthToken) {
+      /*
+       * If SFRA sends 'refresh', we return an empty token here so PWA can trigger a login refresh
+       * This key is used when logout is triggered in SFRA but the redirect after logout
+       * sends the user to PWA.
+       */
+      if (sfraAuthToken === 'refresh') {
+        this.set('access_token', '');
+        this.clearSFRAAuthToken();
+        return '';
+      }
+      const {
+        isGuest,
+        customerId,
+        usid
+      } = this.parseSlasJWT(sfraAuthToken);
+      this.set('access_token', sfraAuthToken);
+      this.set('customer_id', customerId);
+      this.set('usid', usid);
+      this.set('customer_type', isGuest ? 'guest' : 'registered');
+      accessToken = sfraAuthToken;
+      // SFRA -> PWA access token cookie handoff is succesful so we clear the SFRA made cookies.
+      // We don't want these cookies to persist and continue overriding what is in local store.
+      this.clearSFRAAuthToken();
     }
-    return this.get(refreshTokenKey) !== this.get(refreshTokenCopyKey);
+    return accessToken;
   }
-
-  /**
-   * Used to validate JWT expiry and ensure auth state consistency with SFRA in a hybrid setup
-   * @param token access_token received on SLAS authentication
-   * @returns {boolean} true if JWT is valid; false otherwise
-   */
-  isTokenValidForHybrid(token) {
-    return !this.isTokenExpired(token) && !this.hasSFRAAuthStateChanged();
+  clearSFRAAuthToken() {
+    const {
+      key,
+      storageType
+    } = DATA_MAP['access_token_sfra'];
+    const store = this.stores[storageType];
+    store.delete(key);
   }
 
   /**
@@ -263,13 +319,8 @@ class Auth {
     this.set('usid', res.usid);
     this.set('customer_type', isGuest ? 'guest' : 'registered');
     const refreshTokenKey = isGuest ? 'refresh_token_guest' : 'refresh_token_registered';
-    const refreshTokenCopyKey = isGuest ? 'refresh_token_guest_copy' : 'refresh_token_registered_copy';
-    const refreshTokenExpiry = isGuest ? this.REFRESH_TOKEN_EXPIRATION_DAYS_GUEST : this.REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED;
     this.set(refreshTokenKey, res.refresh_token, {
-      expires: refreshTokenExpiry
-    });
-    this.set(refreshTokenCopyKey, res.refresh_token, {
-      expires: refreshTokenExpiry
+      expires: res.refresh_token_expires_in
     });
   }
 
@@ -300,6 +351,11 @@ class Auth {
       return yield _this.pendingToken;
     })();
   }
+  logWarning = msg => {
+    if (!this.silenceWarnings) {
+      console.warn(msg);
+    }
+  };
 
   /**
    * The ready function returns a promise that resolves with valid ShopperLogin
@@ -330,8 +386,8 @@ class Auth {
       if (_this2.pendingToken) {
         return yield _this2.pendingToken;
       }
-      const accessToken = _this2.get('access_token');
-      if (accessToken && _this2.isTokenValidForHybrid(accessToken)) {
+      const accessToken = _this2.getAccessToken();
+      if (accessToken && !_this2.isTokenExpired(accessToken)) {
         return _this2.data;
       }
       const refreshTokenRegistered = _this2.get('refresh_token_registered');
@@ -341,6 +397,8 @@ class Auth {
         try {
           return yield _this2.queueRequest(() => _commerceSdkIsomorphic.helpers.refreshAccessToken(_this2.client, {
             refreshToken
+          }, {
+            clientSecret: _this2.clientSecret
           }), !!refreshTokenGuest);
         } catch (error) {
           // If the refresh token is invalid, we need to re-login the user
@@ -356,9 +414,7 @@ class Auth {
           }
         }
       }
-      return yield _this2.queueRequest(() => _commerceSdkIsomorphic.helpers.loginGuestUser(_this2.client, {
-        redirectURI: _this2.redirectURI
-      }), true);
+      return _this2.loginGuestUser();
     })();
   }
 
@@ -382,14 +438,23 @@ class Auth {
   loginGuestUser() {
     var _this4 = this;
     return _asyncToGenerator(function* () {
-      const redirectURI = _this4.redirectURI;
+      if (_this4.clientSecret && (0, _utils.onClient)() && _this4.clientSecret !== _constant.SLAS_SECRET_PLACEHOLDER) {
+        _this4.logWarning(_constant.SLAS_SECRET_WARNING_MSG);
+      }
       const usid = _this4.get('usid');
       const isGuest = true;
-      return yield _this4.queueRequest(() => _commerceSdkIsomorphic.helpers.loginGuestUser(_this4.client, _objectSpread({
-        redirectURI
+      const guestPrivateArgs = [_this4.client, _objectSpread({}, usid && {
+        usid
+      }), {
+        clientSecret: _this4.clientSecret
+      }];
+      const guestPublicArgs = [_this4.client, _objectSpread({
+        redirectURI: _this4.redirectURI
       }, usid && {
         usid
-      })), isGuest);
+      })];
+      const callback = _this4.clientSecret ? () => _commerceSdkIsomorphic.helpers.loginGuestUserPrivate(...guestPrivateArgs) : () => _commerceSdkIsomorphic.helpers.loginGuestUser(...guestPublicArgs);
+      return yield _this4.queueRequest(callback, isGuest);
     })();
   }
 
@@ -434,10 +499,15 @@ class Auth {
   loginRegisteredUserB2C(credentials) {
     var _this6 = this;
     return _asyncToGenerator(function* () {
+      if (_this6.clientSecret && (0, _utils.onClient)() && _this6.clientSecret !== _constant.SLAS_SECRET_PLACEHOLDER) {
+        _this6.logWarning(_constant.SLAS_SECRET_WARNING_MSG);
+      }
       const redirectURI = _this6.redirectURI;
       const usid = _this6.get('usid');
       const isGuest = false;
-      const token = yield _commerceSdkIsomorphic.helpers.loginRegisteredUserB2C(_this6.client, credentials, _objectSpread({
+      const token = yield _commerceSdkIsomorphic.helpers.loginRegisteredUserB2C(_this6.client, _objectSpread(_objectSpread({}, credentials), {}, {
+        clientSecret: _this6.clientSecret
+      }), _objectSpread({
         redirectURI
       }, usid && {
         usid

package/auth/storage/cookie.js

@@ -38,11 +38,35 @@ class CookieStorage extends _base.BaseStorage {
   }
   get(key) {
     const suffixedKey = this.getSuffixedKey(key);
-    return _jsCookie.default.get(suffixedKey) || '';
+    let value = _jsCookie.default.get(suffixedKey) || '';
+    if (value) {
+      // Some values, like the access token, may be split
+      // across multiple keys to fit under ECOM cookie size
+      // thresholds. We check for and append additional chunks here.
+      let chunk = 2;
+      let additionalPart = _jsCookie.default.get(`${suffixedKey}_${chunk}`);
+      while (additionalPart) {
+        value = value.concat(additionalPart);
+        chunk++;
+        additionalPart = _jsCookie.default.get(`${suffixedKey}_${chunk}`) || '';
+      }
+    }
+    return value;
   }
   delete(key, options) {
     const suffixedKey = this.getSuffixedKey(key);
     _jsCookie.default.remove(suffixedKey, _objectSpread(_objectSpread({}, (0, _utils.getDefaultCookieAttributes)()), options));
+
+    // Some values, like the access token, may be split
+    // across multiple keys to fit under ECOM cookie size
+    // thresholds. We check for and delete additional chunks here.
+    let chunk = 2;
+    let additionalPart = _jsCookie.default.get(`${suffixedKey}_${chunk}`);
+    while (additionalPart) {
+      _jsCookie.default.remove(`${suffixedKey}_${chunk}`, _objectSpread(_objectSpread({}, (0, _utils.getDefaultCookieAttributes)()), options));
+      chunk++;
+      additionalPart = _jsCookie.default.get(`${suffixedKey}_${chunk}`) || '';
+    }
   }
 }
 exports.CookieStorage = CookieStorage;

package/components/StorefrontPreview/storefront-preview.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactHelmet = require("react-helmet");
 var _utils = require("./utils");
 var _reactRouterDom = require("react-router-dom");
+var _hooks = require("../../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -36,6 +37,7 @@ const StorefrontPreview = ({
 }) => {
   const history = (0, _reactRouterDom.useHistory)();
   const isHostTrusted = (0, _utils.detectStorefrontPreview)();
+  const apiClients = (0, _hooks.useCommerceApi)();
   (0, _react.useEffect)(() => {
     if (enabled && isHostTrusted) {
       window.STOREFRONT_PREVIEW = _objectSpread(_objectSpread({}, window.STOREFRONT_PREVIEW), {}, {
@@ -47,6 +49,24 @@ const StorefrontPreview = ({
       });
     }
   }, [enabled, getToken, onContextChange]);
+  (0, _react.useEffect)(() => {
+    if (enabled && isHostTrusted) {
+      // In Storefront Preview mode, add cache breaker for all SCAPI's requests.
+      // Otherwise, it's possible to get stale responses after the Shopper Context is set.
+      // (i.e. in this case, we optimize for accurate data, rather than performance/caching)
+      (0, _utils.proxyRequests)(apiClients, {
+        apply(target, thisArg, argumentsList) {
+          var _argumentsList$;
+          argumentsList[0] = _objectSpread(_objectSpread({}, argumentsList[0]), {}, {
+            parameters: _objectSpread(_objectSpread({}, (_argumentsList$ = argumentsList[0]) === null || _argumentsList$ === void 0 ? void 0 : _argumentsList$.parameters), {}, {
+              c_cache_breaker: Date.now()
+            })
+          });
+          return target.call(thisArg, ...argumentsList);
+        }
+      });
+    }
+  }, [apiClients, enabled]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, enabled && isHostTrusted && /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("script", {
     id: "storefront_preview",
     src: (0, _utils.getClientScript)(),

package/components/StorefrontPreview/utils.d.ts

@@ -1,3 +1,4 @@
+import { ApiClients } from '../../hooks/types';
 /** Detects whether the storefront is running in an iframe as part of Storefront Preview.
  * @private
  */
@@ -18,4 +19,9 @@ export declare const CustomPropTypes: {
      */
     requiredFunctionWhenEnabled: (props: any, propName: any, componentName: any) => Error | undefined;
 };
+/**
+ * Via the built-in Proxy object, modify the behaviour of each request for the given SCAPI clients
+ * @private
+ */
+export declare const proxyRequests: (clients: ApiClients, handlers: ProxyHandler<any>) => void;
 //# sourceMappingURL=utils.d.ts.map

package/components/StorefrontPreview/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getClientScript = exports.detectStorefrontPreview = exports.CustomPropTypes = void 0;
+exports.proxyRequests = exports.getClientScript = exports.detectStorefrontPreview = exports.CustomPropTypes = void 0;
 var _utils = require("../../utils");
 /*
  * Copyright (c) 2023, Salesforce, Inc.
@@ -35,10 +35,10 @@ const CustomPropTypes = exports.CustomPropTypes = {
   /**
    * This custom PropType ensures that the prop is only required when the known prop
    * "enabled" is set to "true".
-   * 
-   * @param props 
-   * @param propName 
-   * @param componentName 
+   *
+   * @param props
+   * @param propName
+   * @param componentName
    * @returns
    */
   requiredFunctionWhenEnabled: (props, propName, componentName) => {
@@ -46,4 +46,18 @@ const CustomPropTypes = exports.CustomPropTypes = {
       return new Error(`${String(propName)} is a required function for ${String(componentName)} when enabled is true`);
     }
   }
-};
+};
+
+/**
+ * Via the built-in Proxy object, modify the behaviour of each request for the given SCAPI clients
+ * @private
+ */
+const proxyRequests = (clients, handlers) => {
+  Object.values(clients).forEach(client => {
+    const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(client));
+    methods.forEach(method => {
+      client[method] = new Proxy(client[method], handlers);
+    });
+  });
+};
+exports.proxyRequests = proxyRequests;

package/constant.d.ts

@@ -2,4 +2,7 @@
  * This list contains domains that can host code in iframe
  */
 export declare const IFRAME_HOST_ALLOW_LIST: readonly string[];
+export declare const SLAS_SECRET_WARNING_MSG = "You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!";
+export declare const SLAS_SECRET_PLACEHOLDER = "_PLACEHOLDER_PROXY-PWA_KIT_SLAS_CLIENT_SECRET";
+export declare const SLAS_SECRET_OVERRIDE_MSG = "You have enabled PWA Kit Private Client mode which gets the SLAS secret from your environment variable. The SLAS secret you have set in the Auth provider will be ignored.";
 //# sourceMappingURL=constant.d.ts.map

package/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IFRAME_HOST_ALLOW_LIST = void 0;
+exports.SLAS_SECRET_WARNING_MSG = exports.SLAS_SECRET_PLACEHOLDER = exports.SLAS_SECRET_OVERRIDE_MSG = exports.IFRAME_HOST_ALLOW_LIST = void 0;
 /*
  * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
@@ -14,4 +14,7 @@ exports.IFRAME_HOST_ALLOW_LIST = void 0;
 /**
  * This list contains domains that can host code in iframe
  */
-const IFRAME_HOST_ALLOW_LIST = exports.IFRAME_HOST_ALLOW_LIST = Object.freeze(['https://runtime.commercecloud.com', 'https://runtime-admin-staging.mobify-storefront.com', 'https://runtime-admin-preview.mobify-storefront.com']);
+const IFRAME_HOST_ALLOW_LIST = exports.IFRAME_HOST_ALLOW_LIST = Object.freeze(['https://runtime.commercecloud.com', 'https://runtime-admin-staging.mobify-storefront.com', 'https://runtime-admin-preview.mobify-storefront.com']);
+const SLAS_SECRET_WARNING_MSG = exports.SLAS_SECRET_WARNING_MSG = 'You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!';
+const SLAS_SECRET_PLACEHOLDER = exports.SLAS_SECRET_PLACEHOLDER = '_PLACEHOLDER_PROXY-PWA_KIT_SLAS_CLIENT_SECRET';
+const SLAS_SECRET_OVERRIDE_MSG = exports.SLAS_SECRET_OVERRIDE_MSG = 'You have enabled PWA Kit Private Client mode which gets the SLAS secret from your environment variable. The SLAS secret you have set in the Auth provider will be ignored.';

package/hooks/ShopperBaskets/paramKeys.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    getBasket: readonly ["organizationId", "basketId", "siteId", "locale"];
+    getPaymentMethodsForBasket: readonly ["organizationId", "basketId", "siteId", "locale"];
+    getPriceBooksForBasket: readonly ["organizationId", "basketId", "siteId"];
+    getShippingMethodsForShipment: readonly ["organizationId", "basketId", "shipmentId", "siteId", "locale"];
+    getTaxesFromBasket: readonly ["organizationId", "basketId", "siteId"];
+};
+export default _default;
+//# sourceMappingURL=paramKeys.d.ts.map