@salesforce/commerce-sdk-react 1.0.0-preview.0 → 1.0.0-preview.2

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## v1.0.0-preview.2 (Jun 05, 2023)
+## v1.0.0-preview.1 (Jun 02, 2023)
 ## v1.0.0-preview.0 (May 31, 2023)
 ## v1.0.0-dev (May 29, 2023)
 ## v3.0.0-dev (May 12, 2023)

package/README.md

@@ -234,6 +234,10 @@ You could also import the mutation options as a constant like:
 import {useShopperBasketsMutation, ShopperBasketsMutations} from '@salesforce/commerce-sdk-react'
 
 const Example = ({basketId}) => {
+    // this works
+    const addItemToBasket = useShopperBasketsMutation('addItemToBasket')
+
+    // this also works
     const addItemToBasket = useShopperBasketsMutation(ShopperBasketsMutations.AddItemToBasket)
     return ...
 }

package/auth/index.d.ts

@@ -1,8 +1,8 @@
 import { helpers, ShopperLoginTypes, ShopperCustomersTypes } from 'commerce-sdk-isomorphic';
 import { ApiClientConfigParams, Prettify, RemoveStringIndex } from '../hooks/types';
 import { CustomerType } from '../hooks/useCustomerType';
-declare type TokenResponse = ShopperLoginTypes.TokenResponse;
-declare type Helpers = typeof helpers;
+type TokenResponse = ShopperLoginTypes.TokenResponse;
+type Helpers = typeof helpers;
 interface AuthConfig extends ApiClientConfigParams {
     redirectURI: string;
     proxy: string;
@@ -16,12 +16,12 @@ interface AuthConfig extends ApiClientConfigParams {
  * Plus, the getCustomer endpoint only works for registered user, it returns a 404 for a guest user,
  * and it's not easy to grab this info in user land, so we add it into the Auth object, and expose it via a hook
  */
-export declare type AuthData = Prettify<RemoveStringIndex<TokenResponse> & {
+export type AuthData = Prettify<RemoveStringIndex<TokenResponse> & {
     customer_type: CustomerType;
     idp_access_token: string;
 }>;
 /** A shopper could be guest or registered, so we store the refresh tokens individually. */
-declare type AuthDataKeys = Exclude<keyof AuthData, 'refresh_token'> | 'refresh_token_guest' | 'refresh_token_registered';
+type AuthDataKeys = Exclude<keyof AuthData, 'refresh_token'> | 'refresh_token_guest' | 'refresh_token_registered' | 'refresh_token_guest_copy' | 'refresh_token_registered_copy';
 /**
  * This class is used to handle shopper authentication.
  * It is responsible for initializing shopper session, manage access
@@ -51,6 +51,21 @@ declare class Auth {
      * Used to validate JWT token expiration.
      */
     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
+     */
+    private isTokenValidForHybrid;
     /**
      * This method stores the TokenResponse object retrived from SLAS, and
      * store the data in storage.

package/auth/index.js

@@ -82,6 +82,24 @@ const DATA_MAP = {
       store.delete('cc-nx-g');
     }
   },
+  // 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: 'cc-nx-g',
+    callback: store => {
+      store.delete('cc-nx');
+    }
+  },
+  refresh_token_registered_copy: {
+    storageType: 'local',
+    key: 'cc-nx',
+    callback: store => {
+      store.delete('cc-nx-g');
+    }
+  },
   customer_type: {
     storageType: 'local',
     key: 'customer_type'
@@ -205,6 +223,32 @@ class Auth {
     return validTimeSeconds <= tokenAgeSeconds;
   }
 
+  /**
+   * 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.
+   */
+  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;
+    }
+    return this.get(refreshTokenKey) !== this.get(refreshTokenCopyKey);
+  }
+
+  /**
+   * 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();
+  }
+
   /**
    * This method stores the TokenResponse object retrived from SLAS, and
    * store the data in storage.
@@ -220,9 +264,13 @@ 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';
     this.set(refreshTokenKey, res.refresh_token, {
       expires: this.REFRESH_TOKEN_EXPIRATION_DAYS
     });
+    this.set(refreshTokenCopyKey, res.refresh_token, {
+      expires: this.REFRESH_TOKEN_EXPIRATION_DAYS
+    });
   }
 
   /**
@@ -283,7 +331,7 @@ class Auth {
         return _this2.pendingToken;
       }
       const accessToken = _this2.get('access_token');
-      if (accessToken && !_this2.isTokenExpired(accessToken)) {
+      if (accessToken && _this2.isTokenValidForHybrid(accessToken)) {
         return _this2.data;
       }
       const refreshTokenRegistered = _this2.get('refresh_token_registered');

package/auth/storage.d.ts

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie';
-export declare type StorageType = 'cookie' | 'local' | 'memory';
+export type StorageType = 'cookie' | 'local' | 'memory';
 export interface BaseStorageOptions {
     keySuffix?: string;
 }

package/components/ShopperExperience/Component/index.d.ts

@@ -1,5 +1,5 @@
 import { Component as ComponentType } from '../types';
-declare type ComponentProps = {
+type ComponentProps = {
     component: ComponentType;
 };
 /**

package/components/ShopperExperience/Page/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Component as ComponentType, Page as PageType } from '../types';
-declare type ComponentMap = {
+type ComponentMap = {
     [typeId: string]: React.ComponentType<ComponentType & unknown>;
 };
 interface PageProps extends React.ComponentProps<'div'> {
     page: PageType;
     components: ComponentMap;
 }
-declare type PageContextValue = {
+type PageContextValue = {
     components: ComponentMap;
 };
 export declare const PageContext: React.Context<PageContextValue | undefined>;

package/components/ShopperExperience/types.d.ts

@@ -1,8 +1,8 @@
 import { ApiClients, DataType } from '../../hooks/types';
-declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];
-declare type Client = ApiClients['shopperExperience'];
-export declare type Page = DataType<Client['getPage']>;
-export declare type Region = ArrayElement<NonNullable<Page['regions']>>;
-export declare type Component = ArrayElement<NonNullable<Region['components']>>;
+type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];
+type Client = ApiClients['shopperExperience'];
+export type Page = DataType<Client['getPage']>;
+export type Region = ArrayElement<NonNullable<Page['regions']>>;
+export type Component = ArrayElement<NonNullable<Region['components']>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/hooks/ShopperBaskets/cache.d.ts

@@ -1,5 +1,5 @@
 import { ApiClients, CacheUpdateMatrix } from '../types';
-declare type Client = ApiClients['shopperBaskets'];
+type Client = ApiClients['shopperBaskets'];
 export declare const cacheUpdateMatrix: CacheUpdateMatrix<Client>;
 export {};
 //# sourceMappingURL=cache.d.ts.map