Merge pull request #2571 from graphcommerce-org/fix/various

paales · web-flow · commit 5ca16e924aff · 2026-01-05T12:55:09.000+01:00
Fix/various
diff --git a/.changeset/busy-mammals-say.md b/.changeset/busy-mammals-say.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-store': patch
+---
+
+When switching stores unset the currency when there is no selection available for a given store.
diff --git a/.changeset/funky-geese-sell.md b/.changeset/funky-geese-sell.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-store': patch
+---
+
+Do not send an unacceptable store currency due to a configuration error and make sure the correct currency is stored. Show a StoreSwitcherFab on mobile.
diff --git a/.changeset/gold-eels-smash.md b/.changeset/gold-eels-smash.md
@@ -0,0 +1,8 @@
+---
+'@graphcommerce/magento-recently-viewed-products': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-compare': patch
+'@graphcommerce/magento-cart': patch
+---
+
+Solve issue where the @client fields could not be resolved correctly.
diff --git a/.changeset/loose-stamps-peel.md b/.changeset/loose-stamps-peel.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-customer': patch
+---
+
+Created a new GuestOrCustomerMask to show information based on their loggedIn state respecting the masking of private content.
diff --git a/.changeset/lovely-ads-send.md b/.changeset/lovely-ads-send.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-config': patch
+---
+
+Always copy the file if the original file is a core file, allowing overrides.
diff --git a/.changeset/tiny-games-wear.md b/.changeset/tiny-games-wear.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/graphql': patch
+---
+
+Show loading skeleton when loading and there is no data, but show when there is an error so we dont get in a stuck state.
diff --git a/.changeset/two-bags-smoke.md b/.changeset/two-bags-smoke.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/algolia-products': patch
+---
+
+Make sure the default_display_currency_code is always fetched properly for Algolia
diff --git a/examples/magento-graphcms/README.md b/examples/magento-graphcms/README.md
@@ -29,7 +29,7 @@ GraphCommerce Pro is the paid verison of GraphCommerce, default Open Source
 license is €1000 per year, please contact us for a license. For Adobe Commerce
 its €2500 per year. Multi year bundles available.
 
-- [GraphCommerce Pro Demo: Magento 2.4.7 + ](https://graphcommerce-pro-os-git-canary-reachdigital.vercel.app/men/photography)
+- [GraphCommerce Pro Demo: Magento 2.4.7 + Cache Notify + Private Pricing + Multi Cart](https://graphcommerce-pro-os-git-canary-reachdigital.vercel.app/men/photography)
 - [GraphCommerce Pro Demo: Adobe Commerce 2.4.7 + Pagebuilder + Returns, Store Credits, Gift Cards, Reward Points](https://graphcommerce-pro-ac-git-canary-reachdigital.vercel.app/page/test-page)
 
 Please note that Pagebuilder is also available for Magento Open Source, just not
diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -33,6 +33,7 @@ import { Logo } from './Logo'
 import { productListRenderer } from '../ProductListItems/productListRenderer'
 import {
   StoreSwitcherButton,
+  StoreSwitcherFab,
   StoreSwitcherMenuFabSecondaryItem,
 } from '@graphcommerce/magento-store'
 
@@ -157,6 +158,7 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
             </DesktopNavActions>
 
             <MobileTopRight>
+              <StoreSwitcherFab size='responsiveMedium' />
               <SearchFab size='responsiveMedium' />
             </MobileTopRight>
           </>
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
@@ -5,6 +5,7 @@ import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-custome
 import { SearchFab, SearchField } from '@graphcommerce/magento-search'
 import {
   StoreSwitcherButton,
+  StoreSwitcherFab,
   StoreSwitcherMenuFabSecondaryItem,
 } from '@graphcommerce/magento-store'
 import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
@@ -161,6 +162,7 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
             </DesktopNavActions>
 
             <MobileTopRight>
+              <StoreSwitcherFab size='responsiveMedium' />
               <SearchFab size='responsiveMedium' />
             </MobileTopRight>
           </>
diff --git a/packages/algolia-products/mesh/algoliaFacetsToAggregations.ts b/packages/algolia-products/mesh/algoliaFacetsToAggregations.ts
@@ -81,7 +81,10 @@ export function algoliaFacetsToAggregations(
   categoryList?: null | CategoryResult,
   groupId?: number,
 ): Aggregation[] {
-  if (!storeConfig?.default_display_currency_code) throw new Error('Currency is required')
+  if (!storeConfig?.default_display_currency_code)
+    throw new Error(
+      `Currency is required. StoreConfig default_display_currency_code is not set. This usually means the storeConfig query failed or the store doesn't have a default currency configured.`,
+    )
   const aggregations: Aggregation[] = []
 
   if (!assertAlgoliaFacets(algoliaFacets)) throw Error('these are not facets')
diff --git a/packages/algolia-products/mesh/algoliaHitToMagentoProduct.ts b/packages/algolia-products/mesh/algoliaHitToMagentoProduct.ts
@@ -35,7 +35,10 @@ function mapPriceRange(
   customerGroup = 0,
   currencyHeader?: string,
 ): PriceRange {
-  if (!storeConfig?.default_display_currency_code) throw new Error('Currency is required')
+  if (!storeConfig?.default_display_currency_code)
+    throw new Error(
+      `Currency is required. StoreConfig default_display_currency_code is not set. This usually means the storeConfig query failed or the store doesn't have a default currency configured.`,
+    )
 
   const curr = currencyHeader ?? storeConfig.default_display_currency_code
 
diff --git a/packages/algolia-products/mesh/getStoreConfig.ts b/packages/algolia-products/mesh/getStoreConfig.ts
@@ -1,6 +1,11 @@
 import type { Maybe, MeshContext, StoreConfig } from '@graphcommerce/graphql-mesh'
+import { storefrontConfigDefault } from '@graphcommerce/next-ui'
 import { getIndexName } from './getIndexName'
 
+function getStoreHeader(context: MeshContext) {
+  return (context as MeshContext & { headers: Record<string, string | undefined> }).headers?.store
+}
+
 export type GetStoreConfigReturn =
   | Maybe<
       Pick<
@@ -18,8 +23,13 @@ export async function getStoreConfig(context: MeshContext): Promise<StoreConfig>
   const configCached = context.cache.get(cacheKey)
   if (configCached) return configCached as StoreConfig
 
+  // Ensure we have a store header set for the storeConfig query
+  const storeCode = getStoreHeader(context) ?? storefrontConfigDefault().magentoStoreCode
+  const contextWithHeaders = context as MeshContext & { headers?: Record<string, string> }
+  const storeContext = { ...context, headers: { ...contextWithHeaders.headers, store: storeCode } }
+
   const configCache = await context.m2.Query.storeConfig({
-    context,
+    context: storeContext,
     selectionSet: /* GraphQL */ `
       {
         root_category_uid
diff --git a/packages/graphql/components/PrivateQueryMask/PrivateQueryMask.tsx b/packages/graphql/components/PrivateQueryMask/PrivateQueryMask.tsx
@@ -3,7 +3,8 @@ import { cssFlag, cssNotFlag, sxx, useIsSSR } from '@graphcommerce/next-ui'
 import type { SkeletonOwnProps, SkeletonProps, SxProps, Theme } from '@mui/material'
 import { Box, Skeleton } from '@mui/material'
 import type { OverrideProps } from '@mui/material/OverridableComponent'
-import React, { createContext, useContext, useMemo } from 'react'
+import type React from 'react'
+import { createContext, useContext, useMemo } from 'react'
 
 type MaskProp = { skeleton?: SkeletonProps }
 
diff --git a/packages/graphql/hooks/usePrivateQuery.ts b/packages/graphql/hooks/usePrivateQuery.ts
@@ -57,9 +57,10 @@ export function usePrivateQuery<
   // If the user is logged in we might need to show a skeleton:
   let mask = isSsr
   if (!isSsr && context) {
+    // Show skeleton while loading, but not when there's an error
     mask = !skip
       ? !clientQuery.data && !clientQuery.previousData && !clientQuery.error
-      : !clientQuery.data
+      : !clientQuery.data && !clientQuery.error
   }
 
   // If this method is called within an PrivateQueryMask, we skip this complete functionality so we show the parent mask.
diff --git a/packages/magento-cart/hooks/useCartQuery.ts b/packages/magento-cart/hooks/useCartQuery.ts
@@ -3,9 +3,9 @@ import type {
   TypedDocumentNode,
   WatchQueryFetchPolicy,
 } from '@graphcommerce/graphql'
-import { useQuery } from '@graphcommerce/graphql'
-import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import { CombinedGraphQLErrors, useQuery } from '@graphcommerce/graphql'
 import type { useQuery as useQueryType } from '@apollo/client/react'
+import { t } from '@lingui/core/macro'
 import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
 import { useCartShouldLoginToContinue } from './useCartPermissions'
@@ -61,7 +61,7 @@ export function useCartQuery<
       ...query,
       error: new CombinedGraphQLErrors({
         errors: [
-          new GraphQLError('Action can not be performed by the current user', {
+          new GraphQLError(t`You must be logged in to view your cart.`, {
             extensions: { category: 'graphql-authorization' },
           }),
         ],
diff --git a/packages/magento-cart/hooks/useFormGqlMutationCart.ts b/packages/magento-cart/hooks/useFormGqlMutationCart.ts
@@ -1,14 +1,11 @@
-import {
-  CombinedGraphQLErrors,
-  TypedDocumentNode,
-  useApolloClient,
-  useMutation,
-} from '@graphcommerce/graphql'
+import type { TypedDocumentNode, useMutation } from '@graphcommerce/graphql'
+import { CombinedGraphQLErrors, useApolloClient } from '@graphcommerce/graphql'
 import type {
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/core/macro'
 import { GraphQLError, Kind } from 'graphql'
 import { useCartIdContext } from '../components/CartIdContext'
 import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
@@ -69,7 +66,7 @@ export function useFormGqlMutationCart<
       ...result,
       error: new CombinedGraphQLErrors({
         errors: [
-          new GraphQLError('Action can not be performed by the current user', {
+          new GraphQLError(t`You must be logged in to modify your cart.`, {
             extensions: { category: 'graphql-authorization' },
           }),
         ],
diff --git a/packages/magento-cart/typePolicies.ts b/packages/magento-cart/typePolicies.ts
@@ -35,6 +35,8 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
     fields: {
       cart: (_, { args, toReference }) =>
         toReference({ __typename: 'Cart', id: (args as QuerycartArgs)?.cart_id }),
+      // https://github.com/apollographql/apollo-client/issues/12930
+      currentCartId: { merge: (existing, incoming) => incoming ?? existing },
     },
   },
   Mutation: {
diff --git a/packages/magento-compare/typePolicies.ts b/packages/magento-compare/typePolicies.ts
@@ -6,6 +6,8 @@ export const compareTypePolicies: StrictTypedTypePolicies = {
     fields: {
       compareList: (_, { args, toReference }) =>
         toReference({ __typename: 'CompareList', uid: (args as QuerycompareListArgs)?.uid }),
+      // https://github.com/apollographql/apollo-client/issues/12930
+      currentCompareUid: { merge: (existing, incoming) => incoming ?? existing },
     },
   },
 }
diff --git a/packages/magento-customer/components/GuestOrCustomerMask/GuestOrCustomerMask.tsx b/packages/magento-customer/components/GuestOrCustomerMask/GuestOrCustomerMask.tsx
@@ -0,0 +1,44 @@
+import { usePrivateQueryMask } from '@graphcommerce/graphql'
+import { cssFlag, cssNotFlag } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+
+export type CustomerGuestMaskProps = {
+  /** Allowed to pass null */
+  loggedOut: React.ReactNode
+  /** Allowed to pass null */
+  loggedIn: React.ReactNode
+  /** Allowed to pass null */
+  skeleton: React.ReactNode
+}
+
+export function GuestOrCustomerMask(props: CustomerGuestMaskProps) {
+  const { loggedOut: loggedOutContent, loggedIn: loggedInContent, skeleton } = props
+  const { mask } = usePrivateQueryMask()
+  const { loggedIn } = useCustomerSession()
+
+  return (
+    <>
+      {mask && loggedOutContent && (
+        <Box
+          sx={{
+            display: 'contents',
+            '&:empty': { display: 'none' },
+            [cssFlag('private-query')]: { display: 'none' },
+          }}
+        >
+          {loggedOutContent}
+        </Box>
+      )}
+      <Box
+        sx={{
+          display: 'contents',
+          '&:empty': { display: 'none' },
+          [cssNotFlag('private-query')]: { display: 'none' },
+        }}
+      >
+        {mask ? skeleton : loggedIn ? loggedInContent : loggedOutContent}
+      </Box>
+    </>
+  )
+}
diff --git a/packages/magento-customer/components/index.ts b/packages/magento-customer/components/index.ts
@@ -28,6 +28,7 @@ export * from './DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 export * from './EditAddressForm/EditAddressForm'
 export * from './ForgotPasswordForm/ForgotPassword.gql'
 export * from './ForgotPasswordForm/ForgotPasswordForm'
+export * from './GuestOrCustomerMask/GuestOrCustomerMask'
 export * from './GuestOrderOverview/GuestOrderOverviewForm'
 export * from './Invoice'
 export * from './NameFields/NameFields'
diff --git a/packages/magento-customer/typePolicies.ts b/packages/magento-customer/typePolicies.ts
@@ -37,6 +37,12 @@ const generateCustomerToken: FieldPolicy<Mutation['generateCustomerToken']> = {
 }
 
 export const customerTypePolicies: StrictTypedTypePolicies = {
+  Query: {
+    fields: {
+      // https://github.com/apollographql/apollo-client/issues/12930
+      customerToken: { merge: (existing, incoming) => incoming ?? existing },
+    },
+  },
   Mutation: { fields: { generateCustomerToken } },
 }
 
diff --git a/packages/magento-recently-viewed-products/index.ts b/packages/magento-recently-viewed-products/index.ts
@@ -1,3 +1,4 @@
 export * from './components/RecentlyViewedProducts'
 export * from './hooks'
 export * from './graphql/RecentlyViewedProducts.gql'
+export * from './typePolicies'
diff --git a/packages/magento-recently-viewed-products/package.json b/packages/magento-recently-viewed-products/package.json
@@ -30,6 +30,7 @@
   },
   "exports": {
     ".": "./index.ts",
+    "./plugins/AddRecentlyViewedProductsTypePolicies": "./plugins/AddRecentlyViewedProductsTypePolicies.tsx",
     "./plugins/RegisterProductAsRecentlyViewed": "./plugins/RegisterProductAsRecentlyViewed.tsx"
   }
 }
diff --git a/packages/magento-recently-viewed-products/plugins/AddRecentlyViewedProductsTypePolicies.tsx b/packages/magento-recently-viewed-products/plugins/AddRecentlyViewedProductsTypePolicies.tsx
@@ -0,0 +1,13 @@
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { recentlyViewedProductsTypePolicies } from '../typePolicies'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/graphql',
+}
+
+export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
+  const { Prev, policies = [], ...rest } = props
+  return <Prev {...rest} policies={[...policies, recentlyViewedProductsTypePolicies]} />
+}
diff --git a/packages/magento-recently-viewed-products/typePolicies.ts b/packages/magento-recently-viewed-products/typePolicies.ts
@@ -0,0 +1,10 @@
+import type { StrictTypedTypePolicies } from '@graphcommerce/graphql'
+
+export const recentlyViewedProductsTypePolicies: StrictTypedTypePolicies = {
+  Query: {
+    fields: {
+      // https://github.com/apollographql/apollo-client/issues/12930
+      recentlyViewedProducts: { merge: (existing, incoming) => incoming ?? existing },
+    },
+  },
+}
diff --git a/packages/magento-store/components/StoreSwitcher/StoreSwitcherStoreSelector.tsx b/packages/magento-store/components/StoreSwitcher/StoreSwitcherStoreSelector.tsx
@@ -52,10 +52,6 @@ export function StoreSwitcherStoreSelector(props: StoreSwitcherSelectorProps) {
           ),
           value: store.store_code,
           disabled: store.disabled,
-          slotProps: {
-            title: { sx: { typography: 'subtitle1' } },
-            details: { sx: { typography: 'body1', color: 'text.secondary' } },
-          },
         }))}
         {...actionCardProps}
       />
diff --git a/packages/magento-store/components/StoreSwitcher/useStoreSwitcher.tsx b/packages/magento-store/components/StoreSwitcher/useStoreSwitcher.tsx
@@ -190,8 +190,12 @@ export function StoreSwitcherFormProvider(props: StoreSwitcherFormProviderProps)
     const formStore = context.stores.find((s) => s.store_code === formValues.storeCode)
     const isDefaultDisplayCurrency =
       formValues.currency === formStore?.default_display_currency_code
+    const isCurrencyAvailable = formStore?.currency?.available_currency_codes?.includes(
+      formValues.currency,
+    )
 
-    if (isDefaultDisplayCurrency) cookie('Magento-Content-Currency', null)
+    // Clear cookie if using default currency or if the currency is not available for the target store
+    if (isDefaultDisplayCurrency || !isCurrencyAvailable) cookie('Magento-Content-Currency', null)
     else cookie('Magento-Content-Currency', formValues.currency)
 
     await onSubmit?.(formValues, event)
diff --git a/packages/magento-store/components/StoreSwitcherButton/StoreSwitcherFab.tsx b/packages/magento-store/components/StoreSwitcherButton/StoreSwitcherFab.tsx
@@ -1,20 +1,24 @@
-import { iconLanguage, IconSvg, sxx } from '@graphcommerce/next-ui'
-import { Fab, type FabProps } from '@mui/material'
-import { StoreSwitcherText } from './StoreSwitcherText'
+import type { FabProps } from '@graphcommerce/next-ui'
+import { Fab, iconLanguage } from '@graphcommerce/next-ui'
 import { useShowStoreSwitcherButton } from './useStoreSwitcherButton'
 
-export function StoreSwitcherFab(props: FabProps) {
+export type StoreSwitcherFabProps = Omit<FabProps, 'icon' | 'onClick'>
+
+export function StoreSwitcherFab(props: StoreSwitcherFabProps) {
+  const { sx, ...fabProps } = props
   const { show, onClick } = useShowStoreSwitcherButton()
+
   if (!show) return null
 
   return (
     <Fab
-      variant='extended'
+      color='inherit'
+      size='medium'
+      sx={sx}
+      icon={iconLanguage}
       onClick={onClick}
-      sx={sxx({ width: 'max-content', columnGap: '3px', typography: 'body1' })}
-      {...props}
-    >
-      <IconSvg src={iconLanguage} /> <StoreSwitcherText />
-    </Fab>
+      slotProps={{ icon: { size: 'default' } }}
+      {...fabProps}
+    />
   )
 }
diff --git a/packages/magento-store/components/StoreSwitcherButton/useStoreSwitcherButton.ts b/packages/magento-store/components/StoreSwitcherButton/useStoreSwitcherButton.ts
diff --git a/packages/magento-store/plugins/magentoStoreGraphqlConfig.ts b/packages/magento-store/plugins/magentoStoreGraphqlConfig.ts
diff --git a/packagesDev/next-config/__tests__/commands/copyFiles.ts b/packagesDev/next-config/__tests__/commands/copyFiles.ts
diff --git a/packagesDev/next-config/__tests__/config/utils/__snapshots__/mergeEnvIntoConfig.ts.snap b/packagesDev/next-config/__tests__/config/utils/__snapshots__/mergeEnvIntoConfig.ts.snap
diff --git a/packagesDev/next-config/__tests__/interceptors/findPlugins.ts b/packagesDev/next-config/__tests__/interceptors/findPlugins.ts
diff --git a/packagesDev/next-config/__tests__/interceptors/generateInterceptors.ts b/packagesDev/next-config/__tests__/interceptors/generateInterceptors.ts
diff --git a/packagesDev/next-config/dist/config/loadConfig.js b/packagesDev/next-config/dist/config/loadConfig.js
diff --git a/packagesDev/next-config/dist/index.js b/packagesDev/next-config/dist/index.js
diff --git a/packagesDev/next-config/dist/loadConfig-DFvwanrZ.js b/packagesDev/next-config/dist/loadConfig-DFvwanrZ.js
diff --git a/packagesDev/next-config/src/commands/copyFiles.ts b/packagesDev/next-config/src/commands/copyFiles.ts
diff --git a/packagesDev/next-config/src/interceptors/generateInterceptor.ts b/packagesDev/next-config/src/interceptors/generateInterceptor.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@graphcommerce/magento-store': patch
 +---
++
 +When switching stores unset the currency when there is no selection available for a given store.