@magento/peregrine 14.3.1 → 14.4.1-alpha.3

package/lib/Apollo/links/index.js

@@ -1,5 +1,6 @@
 import { createHttpLink } from '@apollo/client';
 
+import createAuthLink from '@magento/peregrine/lib/Apollo/links/authLink';
 import createErrorLink from '@magento/peregrine/lib/Apollo/links/errorLink';
 import createGqlCacheLink from '@magento/peregrine/lib/Apollo/links/gqlCacheLink';
 import createMutationQueueLink from '@magento/peregrine/lib/Apollo/links/mutationQueueLink';
@@ -31,6 +32,7 @@ export const customFetchToShrinkQuery = (uri, options) => {
 };
 
 const getLinks = apiBase => {
+    const authLink = createAuthLink();
     const storeLink = createStoreLink();
     const errorLink = createErrorLink();
     const retryLink = createRetryLink();
@@ -52,6 +54,7 @@ const getLinks = apiBase => {
     const links = new Map()
         .set('MUTATION_QUEUE', mutationQueueLink)
         .set('RETRY', retryLink)
+        .set('AUTH', authLink)
         .set('GQL_CACHE', gqlCacheLink)
         .set('STORE', storeLink)
         .set('ERROR', errorLink)

package/lib/store/actions/user/asyncActions.js

@@ -63,13 +63,17 @@ export const resetPassword = ({ email }) =>
         dispatch(actions.resetPassword.receive());
     };
 
-export const setToken = token =>
+export const setToken = (token, customerAccessTokenLifetime = 1) =>
     async function thunk(...args) {
         const [dispatch] = args;
 
         // Store token in local storage.
         // TODO: Get correct token expire time from API
-        storage.setItem('signin_token', token, 3600);
+        storage.setItem(
+            'signin_token',
+            token,
+            customerAccessTokenLifetime * 3600
+        );
 
         // Persist in store
         dispatch(actions.setToken(token));

package/lib/talons/CheckoutPage/OrderConfirmationPage/createAccount.gql.js

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { GET_STORE_CONFIG_DATA } from '../../CreateAccount/createAccount.gql';
 
 export const CREATE_ACCOUNT = gql`
     mutation CreateAccountAfterCheckout(
@@ -110,5 +111,6 @@ export default {
     createCartMutation: CREATE_CART,
     getCartDetailsQuery: GET_CART_DETAILS,
     getCustomerQuery: GET_CUSTOMER,
-    signInMutation: SIGN_IN
+    signInMutation: SIGN_IN,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import { useUserContext } from '../../../context/user';
@@ -39,7 +39,8 @@ export const useCreateAccount = props => {
         createCartMutation,
         getCartDetailsQuery,
         getCustomerQuery,
-        signInMutation
+        signInMutation,
+        getStoreConfigQuery
     } = operations;
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [, { createCart, getCartDetails, removeCart }] = useCartContext();
@@ -65,6 +66,23 @@ export const useCreateAccount = props => {
         fetchPolicy: 'no-cache'
     });
 
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const {
+        minimumPasswordLength,
+        customerAccessTokenLifetime
+    } = useMemo(() => {
+        const storeConfig = storeConfigData?.storeConfig || {};
+
+        return {
+            minimumPasswordLength: storeConfig.minimum_password_length,
+            customerAccessTokenLifetime:
+                storeConfig.customer_access_token_lifetime
+        };
+    }, [storeConfigData]);
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
@@ -117,7 +135,9 @@ export const useCreateAccount = props => {
                     ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
+                await (customerAccessTokenLifetime
+                    ? setToken(token, customerAccessTokenLifetime)
+                    : setToken(token));
 
                 // Clear guest cart from redux.
                 await removeCart();
@@ -146,6 +166,7 @@ export const useCreateAccount = props => {
             }
         },
         [
+            customerAccessTokenLifetime,
             createAccount,
             createCart,
             fetchCartDetails,
@@ -194,6 +215,7 @@ export const useCreateAccount = props => {
         handleEnterKeyPress,
         isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
         initialValues: sanitizedInitialValues,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        minimumPasswordLength
     };
 };

package/lib/talons/CreateAccount/createAccount.gql.js

@@ -125,6 +125,16 @@ export const MERGE_CARTS = gql`
     }
     ${CheckoutPageFragment}
 `;
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            minimum_password_length
+            customer_access_token_lifetime
+        }
+    }
+`;
 
 export default {
     createAccountMutation: CREATE_ACCOUNT,
@@ -132,5 +142,6 @@ export default {
     getCartDetailsQuery: GET_CART_DETAILS,
     getCustomerQuery: GET_CUSTOMER,
     mergeCartsMutation: MERGE_CARTS,
-    signInMutation: SIGN_IN
+    signInMutation: SIGN_IN,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useApolloClient, useMutation, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
@@ -37,7 +37,8 @@ export const useCreateAccount = props => {
         getCartDetailsQuery,
         getCustomerQuery,
         mergeCartsMutation,
-        signInMutation
+        signInMutation,
+        getStoreConfigQuery
     } = operations;
     const apolloClient = useApolloClient();
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -69,6 +70,24 @@ export const useCreateAccount = props => {
         fetchPolicy: 'no-cache'
     });
 
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const {
+        minimumPasswordLength,
+        customerAccessTokenLifetime
+    } = useMemo(() => {
+        const storeConfig = storeConfigData?.storeConfig || {};
+
+        return {
+            minimumPasswordLength: storeConfig.minimum_password_length,
+            customerAccessTokenLifetime:
+                storeConfig.customer_access_token_lifetime
+        };
+    }, [storeConfigData]);
+
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
@@ -136,8 +155,9 @@ export const useCreateAccount = props => {
                     ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
-
+                await (customerAccessTokenLifetime
+                    ? setToken(token, customerAccessTokenLifetime)
+                    : setToken(token));
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
                 await apolloClient.clearCacheData(apolloClient, 'customer');
@@ -177,6 +197,7 @@ export const useCreateAccount = props => {
         },
 
         [
+            customerAccessTokenLifetime,
             cartId,
             generateReCaptchaData,
             createAccount,
@@ -221,7 +242,8 @@ export const useCreateAccount = props => {
         handleCancelKeyPress,
         initialValues: sanitizedInitialValues,
         isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        minimumPasswordLength
     };
 };
 
@@ -235,6 +257,7 @@ export const useCreateAccount = props => {
  *
  * @property {GraphQLAST} customerQuery query to fetch customer details
  * @property {GraphQLAST} getCartDetailsQuery query to get cart details
+ * @property {GraphQLAST} getStoreConfigQuery query to get store config
  */
 
 /**

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useLazyQuery } from '@apollo/client';
 import { useRootComponents } from '../../context/rootComponents';
@@ -44,9 +44,11 @@ export const useMagentoRoute = (props = {}) => {
     const component = componentMap.get(pathname);
 
     const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery);
+
     // destructure the query result
     const { data, error, loading } = queryResult;
-    const { route } = data || {};
+    const [getRouteData, setRouteData] = useState(data);
+    const { route } = getRouteData || {};
 
     // redirect to external url
     useEffect(() => {
@@ -59,15 +61,34 @@ export const useMagentoRoute = (props = {}) => {
     }, [route]);
 
     useEffect(() => {
+        let isMounted = true; // Track whether the component is still mounted
+        const runInitialQuery = async () => {
+            try {
+                const { data } = await runQuery({
+                    fetchPolicy: 'cache-and-network',
+                    nextFetchPolicy: 'cache-first',
+                    variables: { url: pathname }
+                });
+
+                if (isMounted) {
+                    setRouteData(data);
+                    fetchedPathname.current = pathname;
+                }
+            } catch (error) {
+                if (isMounted) {
+                    console.error('Error running initial query:', error);
+                }
+            }
+        };
         if (initialized.current || !getInlinedPageData()) {
-            runQuery({
-                fetchPolicy: 'cache-and-network',
-                nextFetchPolicy: 'cache-first',
-                variables: { url: pathname }
-            });
-            fetchedPathname.current = pathname;
+            runInitialQuery();
         }
-    }, [initialized, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+        // Cleanup function
+        return () => {
+            isMounted = false; // Mark as unmounted
+        };
+    }, [initialized, pathname, runQuery]);
+    // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         if (component) {

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -144,8 +144,8 @@ const getBreadcrumbCategoryId = categories => {
     const breadcrumbSet = new Set();
     categories.forEach(({ breadcrumbs }) => {
         // breadcrumbs can be `null`...
-        (breadcrumbs || []).forEach(({ category_id }) =>
-            breadcrumbSet.add(category_id)
+        (breadcrumbs || []).forEach(({ category_uid }) =>
+            breadcrumbSet.add(category_uid)
         );
     });
 

package/lib/talons/SignIn/signIn.gql.js

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import { CheckoutPageFragment } from '../CheckoutPage/checkoutPageFragments.gql';
+import { GET_STORE_CONFIG_DATA } from '../CreateAccount/createAccount.gql';
 
 export const GET_CUSTOMER = gql`
     query GetCustomerAfterSignIn {
@@ -51,5 +52,6 @@ export default {
     createCartMutation: CREATE_CART,
     getCustomerQuery: GET_CUSTOMER,
     mergeCartsMutation: MERGE_CARTS,
-    signInMutation: SIGN_IN
+    signInMutation: SIGN_IN,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/SignIn/useSignIn.js

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState, useMemo } from 'react';
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useApolloClient, useMutation, useQuery } from '@apollo/client';
 
 import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha/useGoogleReCaptcha';
 import mergeOperations from '../../util/shallowMerge';
@@ -25,37 +25,56 @@ export const useSignIn = props => {
         createCartMutation,
         getCustomerQuery,
         mergeCartsMutation,
-        signInMutation
+        signInMutation,
+        getStoreConfigQuery
     } = operations;
 
     const apolloClient = useApolloClient();
     const [isSigningIn, setIsSigningIn] = useState(false);
 
+    const cartContext = useCartContext();
     const [
         { cartId },
         { createCart, removeCart, getCartDetails }
-    ] = useCartContext();
+    ] = cartContext;
 
+    const userContext = useUserContext();
     const [
         { isGettingDetails, getDetailsError },
         { getUserDetails, setToken }
-    ] = useUserContext();
+    ] = userContext;
 
-    const [, { dispatch }] = useEventingContext();
+    const eventingContext = useEventingContext();
+    const [, { dispatch }] = eventingContext;
 
-    const [signIn, { error: signInError }] = useMutation(signInMutation, {
+    const signInMutationResult = useMutation(signInMutation, {
         fetchPolicy: 'no-cache'
     });
+    const [signIn, { error: signInError }] = signInMutationResult;
 
+    const googleReCaptcha = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_LOGIN',
+        formAction: 'signIn'
+    });
     const {
         generateReCaptchaData,
         recaptchaLoading,
         recaptchaWidgetProps
-    } = useGoogleReCaptcha({
-        currentForm: 'CUSTOMER_LOGIN',
-        formAction: 'signIn'
+    } = googleReCaptcha;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
     });
 
+    const { customerAccessTokenLifetime } = useMemo(() => {
+        const storeConfig = storeConfigData?.storeConfig || {};
+
+        return {
+            customerAccessTokenLifetime:
+                storeConfig.customer_access_token_lifetime
+        };
+    }, [storeConfigData]);
     const [fetchCartId] = useMutation(createCartMutation);
     const [mergeCarts] = useMutation(mergeCartsMutation);
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
@@ -86,7 +105,9 @@ export const useSignIn = props => {
                 });
 
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
+                await (customerAccessTokenLifetime
+                    ? setToken(token, customerAccessTokenLifetime)
+                    : setToken(token));
 
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
@@ -132,6 +153,7 @@ export const useSignIn = props => {
             }
         },
         [
+            customerAccessTokenLifetime,
             cartId,
             generateReCaptchaData,
             signIn,
@@ -216,6 +238,17 @@ export const useSignIn = props => {
         handleSubmit,
         isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
         setFormApi,
-        recaptchaWidgetProps
+        recaptchaWidgetProps,
+        userContext,
+        cartContext,
+        eventingContext,
+        signInMutationResult,
+        googleReCaptcha,
+        isSigningIn,
+        setIsSigningIn,
+        fetchCartId,
+        mergeCarts,
+        fetchUserDetails,
+        fetchCartDetails
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "14.3.1",
+  "version": "14.4.1-alpha.3",
   "publishConfig": {
     "access": "public"
   },