@magento/peregrine 15.6.2 → 15.7.2-alpha3

package/lib/Apollo/links/authLink.js

@@ -1,14 +1,28 @@
 import { setContext } from '@apollo/client/link/context';
-import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import {
+    BrowserPersistence,
+    getTokenFromCookie,
+    shouldPreferCookies
+} from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();
 
 export default function createAuthLink() {
     return setContext((_, { headers }) => {
-        // get the authentication token from local storage if it exists.
-        const token = storage.getItem('signin_token');
+        let token = null;
 
-        // return the headers to the context so httpLink can read them
+        // In standalone PWA mode (e.g., iOS home screen app), prefer cookies
+        // because localStorage is not shared between browser and PWA
+        if (shouldPreferCookies()) {
+            token = getTokenFromCookie();
+        }
+
+        // Fallback to localStorage (existing behavior)
+        if (!token) {
+            token = storage.getItem('signin_token');
+        }
+
+        // Return the headers to the context so httpLink can read them
         return {
             headers: {
                 ...headers,

package/lib/Apollo/links/index.js

@@ -28,7 +28,14 @@ export const customFetchToShrinkQuery = (uri, options) => {
 
     const resource = options.method === 'GET' ? shrinkQuery(uri) : uri;
 
-    return globalThis.fetch(resource, options);
+    // Include credentials to enable cookie-based authentication
+    // This allows session sharing between browser and PWA on iOS
+    const optionsWithCredentials = {
+        ...options,
+        credentials: 'include'
+    };
+
+    return globalThis.fetch(resource, optionsWithCredentials);
 };
 
 const getLinks = apiBase => {

package/lib/Apollo/policies/index.js

@@ -22,6 +22,9 @@ const typePolicies = {
             },
             customerWishlistProducts: {
                 read: existing => existing || []
+            },
+            products: {
+                keyArgs: ['filter', 'search', 'pageSize', 'currentPage', 'sort']
             }
         }
     },
@@ -319,7 +322,25 @@ const typePolicies = {
         keyFields: ['uid']
     },
     ConfigurableProduct: {
-        keyFields: ['uid']
+        keyFields: ['uid'],
+        fields: {
+            variants: {
+                merge(existing, incoming) {
+                    if (existing && existing.length > 0) {
+                        return existing;
+                    }
+                    return incoming || existing;
+                }
+            },
+            configurable_options: {
+                merge(existing, incoming) {
+                    if (existing && existing.length > 0) {
+                        return existing;
+                    }
+                    return incoming || existing;
+                }
+            }
+        }
     },
     BundleProduct: {
         keyFields: ['uid']

package/lib/context/cart.js

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useMemo, useCallback } from 'react';
+import React, {
+    createContext,
+    useContext,
+    useMemo,
+    useCallback,
+    useEffect
+} from 'react';
 import { connect } from 'react-redux';
 import actions from '../store/actions/cart/actions';
 import * as asyncActions from '../store/actions/cart/asyncActions';
@@ -17,6 +23,16 @@ const getTotalQuantity = items =>
 const CartContextProvider = props => {
     const { actions, asyncActions, cartState, children } = props;
 
+    useEffect(() => {
+        const storage = new BrowserPersistence();
+        const cartId = storage.getItem('cartId');
+
+        if (cartId && (!cartState || cartState.cartId !== cartId)) {
+            asyncActions.getCartDetails(cartId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     // Make deeply nested details easier to retrieve and provide empty defaults
     const derivedDetails = useMemo(() => {
         if (isCartEmpty(cartState)) {

package/lib/context/user.js

@@ -5,6 +5,7 @@ import actions from '../store/actions/user/actions';
 import * as asyncActions from '../store/actions/user/asyncActions';
 import bindActionCreators from '../util/bindActionCreators';
 import BrowserPersistence from '../util/simplePersistence';
+import { getTokenFromCookie, shouldPreferCookies } from '../util/cookieHelper';
 
 const UserContext = createContext();
 
@@ -25,20 +26,35 @@ const UserContextProvider = props => {
     ]);
 
     useEffect(() => {
-        // check if the user's token is not expired
+        // Check for authentication tokens (localStorage or cookie)
         const storage = new BrowserPersistence();
-        const item = storage.getRawItem('signin_token');
+        let hasValidToken = false;
 
+        // First, check localStorage token (existing behavior)
+        const item = storage.getRawItem('signin_token');
         if (item) {
             const { ttl, timeStored } = JSON.parse(item);
             const now = Date.now();
 
-            // if the token's TTYL has expired, we need to sign out
+            // if the token's TTL has expired, we need to sign out
             if (ttl && now - timeStored > ttl * 1000) {
                 asyncActions.signOut();
+                return;
+            }
+            hasValidToken = true;
+        }
+
+        // Check for cookie token (for PWA session sharing)
+        // If we're in standalone PWA mode and have a cookie token but no localStorage token
+        if (!hasValidToken && shouldPreferCookies()) {
+            const cookieToken = getTokenFromCookie();
+            if (cookieToken && userState && !userState.isSignedIn) {
+                // Set the token in Redux so the app knows user is authenticated
+                actions.setToken(cookieToken);
+                hasValidToken = true;
             }
         }
-    }, [asyncActions]);
+    }, [asyncActions, actions, userState]);
 
     return (
         <UserContext.Provider value={contextValue}>

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

@@ -86,6 +86,21 @@ export const clearToken = () =>
         // Clear token from local storage
         storage.removeItem('signin_token');
 
+        // Clear cookie for session sharing
+        if (
+            typeof document !== 'undefined' &&
+            typeof globalThis.location !== 'undefined'
+        ) {
+            try {
+                const hostname = globalThis.location.hostname;
+                // Clear with explicit domain (iOS compatibility)
+                document.cookie = `customer_token=; path=/; domain=${hostname}; max-age=0; secure; samesite=none`;
+                document.cookie = `customer_token=; path=/; domain=${hostname}; max-age=0; secure`;
+            } catch (error) {
+                // Silently fail if cookies are not available
+            }
+        }
+
         // Remove from store
         dispatch(actions.clearToken());
     };

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -268,7 +268,7 @@ export const useProductFullDetail = props => {
     const { data: storeConfigData } = useQuery(
         operations.getWishlistConfigQuery,
         {
-            fetchPolicy: 'cache-and-network'
+            fetchPolicy: 'cache-first'
         }
     );
 

package/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -7,6 +7,8 @@ export const CategoryFragment = gql`
         meta_title
         meta_keywords
         meta_description
+        url_path
+        url_key
     }
 `;
 

package/lib/talons/RootComponents/Category/useCategory.js

@@ -49,6 +49,7 @@ export const useCategory = props => {
         nextFetchPolicy: 'cache-first'
     });
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
+    const storeConfig = pageSizeData && pageSizeData.storeConfig;
 
     const [paginationValues, paginationApi] = usePagination();
     const { currentPage, totalPages } = paginationValues;
@@ -222,6 +223,7 @@ export const useCategory = props => {
         pageControl,
         sortProps,
         pageSize,
-        categoryNotFound
+        categoryNotFound,
+        storeConfig
     };
 };

package/lib/talons/RootComponents/Product/product.gql.js

@@ -8,6 +8,7 @@ export const GET_STORE_CONFIG_DATA = gql`
         storeConfig {
             store_code
             product_url_suffix
+            product_canonical_tag
         }
     }
 `;

package/lib/talons/RootComponents/Product/useProduct.js

@@ -37,17 +37,20 @@ export const useProduct = props => {
     ] = useAppContext();
 
     const { data: storeConfigData } = useQuery(getStoreConfigData, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
+        fetchPolicy: 'cache-first'
     });
 
-    const slug = pathname.split('/').pop();
-    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
-    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    const urlKey = useMemo(() => {
+        const slug = pathname.split('/').pop();
+        const productUrlSuffix =
+            storeConfigData?.storeConfig?.product_url_suffix;
+        return productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    }, [pathname, storeConfigData?.storeConfig?.product_url_suffix]);
 
     const { error, loading, data } = useQuery(getProductDetailQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
+        fetchPolicy: 'cache-first',
+        nextFetchPolicy: 'cache-only',
+        returnPartialData: true,
         skip: !storeConfigData,
         variables: {
             urlKey
@@ -112,6 +115,7 @@ export const useProduct = props => {
     return {
         error,
         loading,
-        product
+        product,
+        storeConfig: storeConfigData?.storeConfig
     };
 };

package/lib/talons/SignIn/useSignIn.js

@@ -126,6 +126,32 @@ export const useSignIn = props => {
                     ? setToken(token, customerAccessTokenLifetime)
                     : setToken(token));
 
+                // Set cookie for iOS PWA session sharing
+                // This enables authentication to persist when user adds web app to home screen
+                if (
+                    typeof document !== 'undefined' &&
+                    typeof window !== 'undefined'
+                ) {
+                    try {
+                        const maxAge = customerAccessTokenLifetime
+                            ? customerAccessTokenLifetime * 3600
+                            : 3600;
+
+                        const hostname = window.location.hostname;
+
+                        // Set multiple cookie variations for iOS compatibility
+                        // iOS has quirks with SameSite=None on some versions
+                        // Primary: With explicit domain and SameSite=None (iOS 13+)
+                        document.cookie = `customer_token=${token}; path=/; domain=${hostname}; max-age=${maxAge}; secure; samesite=none`;
+
+                        // Fallback: Without SameSite (for older iOS versions)
+                        document.cookie = `customer_token=${token}; path=/; domain=${hostname}; max-age=${maxAge}; secure`;
+                    } catch (error) {
+                        // Silently fail if cookies are blocked
+                        // Authentication will still work via localStorage
+                    }
+                }
+
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
                 await apolloClient.clearCacheData(apolloClient, 'customer');

package/lib/util/cookieHelper.js

@@ -0,0 +1,104 @@
+/**
+ * Cookie utility helper for session sharing between browser and PWA standalone mode.
+ * This enables iOS PWA to maintain authentication state when added to home screen.
+ */
+
+/**
+ * Get a cookie value by name
+ * @param {string} name - Cookie name
+ * @returns {string|null} Cookie value or null if not found
+ */
+export const getCookie = name => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+
+    const nameEQ = name + '=';
+    const cookies = document.cookie.split(';');
+
+    for (let i = 0; i < cookies.length; i++) {
+        let cookie = cookies[i];
+        while (cookie.charAt(0) === ' ') {
+            cookie = cookie.substring(1, cookie.length);
+        }
+        if (cookie.indexOf(nameEQ) === 0) {
+            return cookie.substring(nameEQ.length, cookie.length);
+        }
+    }
+    return null;
+};
+
+/**
+ * Check if cookies are available and working
+ * @returns {boolean} True if cookies are supported
+ */
+export const areCookiesAvailable = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+
+    try {
+        // Try to set a test cookie
+        document.cookie = 'cookietest=1; path=/';
+        const cookiesEnabled = document.cookie.indexOf('cookietest=') !== -1;
+        // Delete test cookie
+        document.cookie =
+            'cookietest=1; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/';
+        return cookiesEnabled;
+    } catch (e) {
+        return false;
+    }
+};
+
+/**
+ * Detect if app is running in standalone mode (installed PWA)
+ * @returns {boolean} True if running as standalone PWA
+ */
+export const isStandalonePWA = () => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+        return false;
+    }
+
+    // Check for iOS standalone mode
+    const isIOSStandalone =
+        'standalone' in window.navigator && window.navigator.standalone;
+
+    // Check for Android/Desktop PWA
+    const isDisplayStandalone = window.matchMedia('(display-mode: standalone)')
+        .matches;
+
+    return isIOSStandalone || isDisplayStandalone;
+};
+
+/**
+ * Get authentication token from cookie (for backend cookie-based auth)
+ * @returns {string|null} Token from cookie or null
+ */
+export const getTokenFromCookie = () => {
+    // Check for common Magento/PHP session cookie names
+    // You may need to adjust these based on your backend configuration
+    const possibleCookieNames = [
+        'auth_token',
+        'customer_token',
+        'PHPSESSID',
+        'magento_customer_token'
+    ];
+
+    for (const cookieName of possibleCookieNames) {
+        const value = getCookie(cookieName);
+        if (value) {
+            return value;
+        }
+    }
+
+    return null;
+};
+
+/**
+ * Check if we should prefer cookies over localStorage
+ * This is true in standalone PWA mode where localStorage might not be shared
+ * @returns {boolean}
+ */
+export const shouldPreferCookies = () => {
+    return isStandalonePWA() && areCookiesAvailable();
+};

package/lib/util/index.js

@@ -1 +1,2 @@
 export { default as BrowserPersistence } from './simplePersistence';
+export * from './cookieHelper';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "15.6.2",
+  "version": "15.7.2-alpha3",
   "publishConfig": {
     "access": "public"
   },