@magento/peregrine 14.3.1 → 14.4.1-alpha.1

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,13 @@ export const resetPassword = ({ email }) =>
         dispatch(actions.resetPassword.receive());
     };
 
-export const setToken = token =>
+export const setToken = (token, customer_token_lifetime = 3600) =>
     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, customer_token_lifetime);
 
         // Persist in store
         dispatch(actions.setToken(token));

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

@@ -44,6 +44,7 @@ export const SIGN_IN = gql`
     mutation SignInAfterCheckout($email: String!, $password: String!) {
         generateCustomerToken(email: $email, password: $password) {
             token
+            customer_token_lifetime
         }
     }
 `;

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

@@ -117,7 +117,13 @@ export const useCreateAccount = props => {
                     ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
+                const customerTokenLifetime =
+                    signInResponse.data.generateCustomerToken
+                        .customer_token_lifetime;
+
+                await (customerTokenLifetime
+                    ? setToken(token, customerTokenLifetime)
+                    : setToken(token));
 
                 // Clear guest cart from redux.
                 await removeCart();

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

@@ -45,6 +45,7 @@ export const SIGN_IN = gql`
     mutation SignInAfterCreate($email: String!, $password: String!) {
         generateCustomerToken(email: $email, password: $password) {
             token
+            customer_token_lifetime
         }
     }
 `;

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -136,8 +136,12 @@ export const useCreateAccount = props => {
                     ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
-
+                const customerTokenLifetime =
+                    signInResponse.data.generateCustomerToken
+                        .customer_token_lifetime;
+                await (customerTokenLifetime
+                    ? setToken(token, customerTokenLifetime)
+                    : setToken(token));
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
                 await apolloClient.clearCacheData(apolloClient, 'customer');

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

@@ -17,6 +17,7 @@ export const SIGN_IN = gql`
     mutation SignIn($email: String!, $password: String!) {
         generateCustomerToken(email: $email, password: $password) {
             token
+            customer_token_lifetime
         }
     }
 `;

package/lib/talons/SignIn/useSignIn.js

@@ -31,30 +31,35 @@ export const useSignIn = props => {
     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 [fetchCartId] = useMutation(createCartMutation);
     const [mergeCarts] = useMutation(mergeCartsMutation);
@@ -86,7 +91,13 @@ export const useSignIn = props => {
                 });
 
                 const token = signInResponse.data.generateCustomerToken.token;
-                await setToken(token);
+                const customerTokenLifetime =
+                    signInResponse.data.generateCustomerToken
+                        .customer_token_lifetime;
+
+                await (customerTokenLifetime
+                    ? setToken(token, customerTokenLifetime)
+                    : setToken(token));
 
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
@@ -216,6 +227,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.1",
   "publishConfig": {
     "access": "public"
   },