@graphcommerce/magento-store 9.1.0-canary.16 → 9.1.0-canary.18

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 9.1.0-canary.18
+
+## 9.1.0-canary.17
+
+### Minor Changes
+
+- [#2496](https://github.com/graphcommerce-org/graphcommerce/pull/2496) [`4b6a65d`](https://github.com/graphcommerce-org/graphcommerce/commit/4b6a65db089d92492e7fde28a8e32bc41f5b9103) - Added support for multiple display currencies in the frontend. Multiple currencies were already supported, but this introduces Display Currencies for viewing the cart in different currencies. ([@paales](https://github.com/paales))
+
+- [#2496](https://github.com/graphcommerce-org/graphcommerce/pull/2496) [`4b6a65d`](https://github.com/graphcommerce-org/graphcommerce/commit/4b6a65db089d92492e7fde28a8e32bc41f5b9103) - Refactored the Store Selector to be more of a form and have multiple nested toggles to switch groups, then stores and then currencies. It automatically hides features that aren't used: If only a single group is used with multiple stores only the store selector is shown. If multiple groups are used with each a single store is used, only the group selector is shown. If only a single currency is used, there is no currency selector. If multiple currencies are used, the currency selector is shown. This makes the selector more user-friendly and less cluttered. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.16
 
 ## 9.1.0-canary.15

package/README.md

@@ -0,0 +1,8 @@
+# @graphcommerce/magento-store
+
+## Store Switcher
+
+![](./docs/store-switcher-single-group-multiple-stores-single-currency.png)
+![](./docs/store-switcher-single-group-multiple-stores-multiple-currencies.png)
+![](./docs/store-switcher-multiple-groups-one-store-single-currency.png)
+![](./docs/store-switcher-multiple-groups-one-store-multiple-currency.png)

package/components/CurrencySymbol/CurrencySymbol.tsx

@@ -3,10 +3,11 @@ import {
   CurrencySymbol as CurrencySymbolBase,
   type CurrencySymbolProps,
 } from '@graphcommerce/next-ui'
-import { StoreConfigDocument } from '../../StoreConfig.gql'
+import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
 
 export function CurrencySymbol(props: CurrencySymbolProps) {
+  const { currency } = props
   const baseCurrencyCode = useQuery(StoreConfigDocument).data?.storeConfig?.base_currency_code ?? ''
 
-  return <CurrencySymbolBase {...props} currency={baseCurrencyCode} />
+  return <CurrencySymbolBase {...props} currency={currency || baseCurrencyCode} />
 }

package/components/GlobalHead/GlobalHead.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@graphcommerce/graphql'
 import type { GlobalHeadProps as GlobalHeadPropsBase } from '@graphcommerce/next-ui'
 import { GlobalHead as GlobalHeadBase } from '@graphcommerce/next-ui'
-import { StoreConfigDocument } from '../../StoreConfig.gql'
+import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
 
 export type GlobalHeadProps = Omit<GlobalHeadPropsBase, 'name'>
 

package/{Money.tsx → components/Money/Money.tsx}

@@ -2,8 +2,8 @@ import { useQuery } from '@graphcommerce/graphql'
 import type { CurrencyFormatProps } from '@graphcommerce/next-ui'
 import { CurrencyFormat } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
+import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
 import type { MoneyFragment } from './Money.gql'
-import { StoreConfigDocument } from './StoreConfig.gql'
 
 type OverridableProps = {
   round?: boolean

package/{PageMeta.tsx → components/PageMeta/PageMeta.tsx}

@@ -1,7 +1,7 @@
 import { useQuery } from '@graphcommerce/graphql'
 import type { PageMetaProps as NextPageMetaProps } from '@graphcommerce/next-ui'
 import { PageMeta as NextPageMeta } from '@graphcommerce/next-ui'
-import { StoreConfigDocument } from './StoreConfig.gql'
+import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
 
 export type PageMetaProps = Omit<NextPageMetaProps, 'canonical'> & {
   canonical?: string

package/components/StoreSwitcher/StoreSwitcherApply.tsx

@@ -0,0 +1,16 @@
+import { useFormState } from '@graphcommerce/ecommerce-ui'
+import type { ButtonProps, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { Button, LinkOrButton } from '@graphcommerce/next-ui'
+import { useStoreSwitcherForm } from './useStoreSwitcher'
+
+export function StoreSwitcherApplyButton(props: ButtonProps<'button'>) {
+  const { control } = useStoreSwitcherForm()
+  const formState = useFormState({ control })
+  return <Button type='submit' loading={formState.isSubmitting} {...props} />
+}
+
+export function StoreSwitcherLinkOrButton(props: LinkOrButtonProps) {
+  const { control } = useStoreSwitcherForm()
+  const formState = useFormState({ control })
+  return <LinkOrButton type='submit' loading={formState.isSubmitting} {...props} />
+}

package/components/StoreSwitcher/StoreSwitcherCurrencySelector.tsx

@@ -0,0 +1,54 @@
+import type { ActionCardListFormProps } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, CurrencySymbol, nonNullable, sxx } from '@graphcommerce/next-ui'
+import type { StoreSwitcherFormValues } from './useStoreSwitcher'
+import { useSelectedStore, useStoreSwitcherForm } from './useStoreSwitcher'
+
+export type StoreSwitcherCurrencySelectorProps = {
+  header?: React.ReactNode
+} & Omit<
+  ActionCardListFormProps<ActionCardProps, StoreSwitcherFormValues>,
+  'name' | 'control' | 'items' | 'required' | 'render'
+>
+
+export function StoreSwitcherCurrencySelector(props: StoreSwitcherCurrencySelectorProps) {
+  const { header, ...actionCardList } = props
+  const { control } = useStoreSwitcherForm()
+  const store = useSelectedStore()
+
+  const currencies = store?.currency?.available_currency_codes?.filter(nonNullable) ?? []
+  const defaultValue = store?.currency?.default_display_currency_code ?? currencies?.[0] ?? ''
+
+  // Make sure the default currency is the first in the list
+  currencies.sort((a, b) => {
+    if (a === defaultValue) return -1
+    if (b === defaultValue) return 1
+    return 0
+  })
+
+  const hidden = currencies.length === 1
+
+  return (
+    <>
+      {!hidden && header}
+      <ActionCardListForm<ActionCardProps, StoreSwitcherFormValues>
+        control={control}
+        defaultValue={defaultValue}
+        name='currency'
+        layout='stack'
+        size='responsive'
+        required
+        color='secondary'
+        render={ActionCard}
+        sx={sxx(hidden && { display: 'none !important' })}
+        items={currencies.map((currency) => ({
+          value: currency,
+          title: <CurrencySymbol currency={currency} variant='full' />,
+        }))}
+        {...actionCardList}
+      />
+    </>
+  )
+}

package/components/StoreSwitcher/StoreSwitcherGroupSelector.tsx

@@ -0,0 +1,74 @@
+import type { ActionCardListFormProps } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, FlagAvatar, ListFormat, sxx } from '@graphcommerce/next-ui'
+import React from 'react'
+import type { StoreSwitcherStoreCurrenciesProps } from './StoreSwitcherStoreCurrencies'
+import { StoreSwitcherStoreCurrencies } from './StoreSwitcherStoreCurrencies'
+import type { StoreSwitcherFormValues, StoreSwitcherGroup } from './useStoreSwitcher'
+import { useStoreSwitcherForm } from './useStoreSwitcher'
+
+export type StoreSwitcherGroupSelectorProps = {
+  header?: React.ReactNode
+  showStores?: number
+} & Omit<StoreSwitcherStoreCurrenciesProps, 'store'> &
+  Omit<
+    ActionCardListFormProps<
+      ActionCardProps & { group?: StoreSwitcherGroup },
+      StoreSwitcherFormValues
+    >,
+    'name' | 'control' | 'items' | 'required' | 'render'
+  >
+
+export function StoreSwitcherGroupSelector(props: StoreSwitcherGroupSelectorProps) {
+  const { header, showStores = 0, showCurrencies, ...actionCardList } = props
+  const { control, storeGroups } = useStoreSwitcherForm()
+
+  const hidden = storeGroups.length === 1 && storeGroups[0].stores.length > 1
+
+  return (
+    <>
+      {!hidden && header}
+      <ActionCardListForm<ActionCardProps, StoreSwitcherFormValues>
+        control={control}
+        name='storeGroupCode'
+        layout='stack'
+        size='responsive'
+        required
+        color='secondary'
+        render={ActionCard}
+        sx={sxx(hidden && { display: 'none !important' })}
+        items={storeGroups.map((group) => ({
+          group,
+          image: group.country ? <FlagAvatar country={group.country} size='40px' /> : undefined,
+          title: <>{group.store_group_name}</>,
+          details: showStores && (
+            <>
+              {group.stores.length <= showStores && (
+                <ListFormat listStyle='short' type='unit'>
+                  {group.stores.map((store) => (
+                    <React.Fragment key={store.store_code}>
+                      {store.store_name}
+                      <StoreSwitcherStoreCurrencies
+                        store={store}
+                        showCurrencies={group.stores.length > 1 ? 0 : showCurrencies}
+                        brackets
+                      />
+                    </React.Fragment>
+                  ))}
+                </ListFormat>
+              )}
+            </>
+          ),
+          disabled: group.disabled,
+          value: group.store_group_code,
+          slotProps: {
+            title: { sx: { typography: 'subtitle1' } },
+            details: { sx: { typography: 'body1', color: 'text.secondary' } },
+          },
+        }))}
+        {...actionCardList}
+      />
+    </>
+  )
+}

package/components/StoreSwitcher/StoreSwitcherList.graphql

@@ -0,0 +1,21 @@
+query StoreSwitcherList {
+  availableStores {
+    store_name
+    store_code
+    locale
+    base_currency_code
+    store_group_name
+    store_group_code
+    currency {
+      available_currency_codes
+      base_currency_code
+      base_currency_symbol
+      default_display_currency_code
+      default_display_currency_symbol
+      exchange_rates {
+        currency_to
+        rate
+      }
+    }
+  }
+}

package/components/{StoreSwitcherList → StoreSwitcher}/StoreSwitcherList.tsx

@@ -3,7 +3,7 @@ import { extendableComponent, FlagAvatar, NextLink } from '@graphcommerce/next-u
 import type { SxProps, Theme } from '@mui/material'
 import { Collapse, List, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material'
 import React from 'react'
-import { localeToStore, storeToLocale } from '../../localeToStore'
+import { localeToStore, storeToLocale } from '../../utils/localeToStore'
 import type { StoreSwitcherListQuery } from './StoreSwitcherList.gql'
 
 type Store = NonNullable<NonNullable<StoreSwitcherListQuery['availableStores']>[0]>
@@ -56,11 +56,7 @@ export function StoreSwitcherList(props: StoreSwitcherListProps) {
             })}
           >
             <ListItemAvatar>
-              <FlagAvatar
-                country={code}
-                className={classes.avatar}
-                sx={{ width: 30, height: 30 }}
-              />
+              <FlagAvatar country={code} className={classes.avatar} size='30px' />
             </ListItemAvatar>
             <ListItemText>
               {group.name}

package/components/StoreSwitcher/StoreSwitcherStoreCurrencies.tsx

@@ -0,0 +1,34 @@
+import type { CurrencySymbolProps } from '@graphcommerce/next-ui'
+import { CurrencySymbol, ListFormat, nonNullable } from '@graphcommerce/next-ui'
+import type { StoreSwitcherStore } from './useStoreSwitcher'
+
+export type StoreSwitcherStoreCurrenciesProps = {
+  showCurrencies?: number
+  store: StoreSwitcherStore
+  brackets?: boolean
+  variant?: CurrencySymbolProps['variant']
+}
+
+export function StoreSwitcherStoreCurrencies(props: StoreSwitcherStoreCurrenciesProps) {
+  const { store, showCurrencies = 0, brackets = false, variant } = props
+
+  const currencies = (store.currency?.available_currency_codes ?? [])?.filter(nonNullable)
+
+  const show = currencies.length <= showCurrencies
+  const list = (
+    <ListFormat listStyle='short' type='unit'>
+      {currencies.map((currency) => (
+        <CurrencySymbol
+          key={currency}
+          compactDisplay='short'
+          variant={variant}
+          currency={currency}
+        />
+      ))}
+    </ListFormat>
+  )
+
+  if (!show) return null
+  if (!brackets) return list
+  return <> ({list})</>
+}

package/components/StoreSwitcher/StoreSwitcherStoreSelector.tsx

@@ -0,0 +1,64 @@
+import type { ActionCardListFormProps } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, sxx } from '@graphcommerce/next-ui'
+import type { StoreSwitcherStoreCurrenciesProps } from './StoreSwitcherStoreCurrencies'
+import { StoreSwitcherStoreCurrencies } from './StoreSwitcherStoreCurrencies'
+import type { StoreSwitcherFormValues, StoreSwitcherStore } from './useStoreSwitcher'
+import { useSelectedStoreGroup, useStoreSwitcherForm } from './useStoreSwitcher'
+
+export type StoreSwitcherSelectorProps = { header?: React.ReactNode } & Omit<
+  StoreSwitcherStoreCurrenciesProps,
+  'store'
+> &
+  Omit<
+    ActionCardListFormProps<
+      ActionCardProps & { store?: StoreSwitcherStore },
+      StoreSwitcherFormValues
+    >,
+    'name' | 'control' | 'items' | 'required' | 'render'
+  >
+
+export function StoreSwitcherStoreSelector(props: StoreSwitcherSelectorProps) {
+  const { header, showCurrencies, ...actionCardProps } = props
+  const { control } = useStoreSwitcherForm()
+  const selectedGroup = useSelectedStoreGroup()
+
+  const hidden = selectedGroup?.stores.length === 1
+
+  return (
+    <>
+      {!hidden && header}
+      <ActionCardListForm<ActionCardProps, StoreSwitcherFormValues>
+        control={control}
+        defaultValue={selectedGroup?.stores?.[0].store_code ?? undefined}
+        shouldUnregister
+        name='storeCode'
+        layout='stack'
+        size='responsive'
+        required
+        render={ActionCard}
+        color='secondary'
+        sx={sxx(hidden && { display: 'none !important' })}
+        items={(selectedGroup?.stores ?? []).map((store) => ({
+          store,
+          title: store.store_name,
+          details: (
+            <StoreSwitcherStoreCurrencies
+              store={store}
+              showCurrencies={showCurrencies}
+              variant='full'
+            />
+          ),
+          value: store.store_code,
+          disabled: store.disabled,
+          slotProps: {
+            title: { sx: { typography: 'subtitle1' } },
+            details: { sx: { typography: 'body1', color: 'text.secondary' } },
+          },
+        }))}
+        {...actionCardProps}
+      />
+    </>
+  )
+}

package/components/StoreSwitcher/index.ts

@@ -0,0 +1,7 @@
+export * from './StoreSwitcherApply'
+export * from './StoreSwitcherCurrencySelector'
+export * from './StoreSwitcherGroupSelector'
+export * from './StoreSwitcherList'
+export * from './StoreSwitcherList.gql'
+export * from './StoreSwitcherStoreSelector'
+export * from './useStoreSwitcher'

package/components/StoreSwitcher/useStoreSwitcher.tsx

@@ -0,0 +1,203 @@
+import type { SubmitHandler } from '@graphcommerce/ecommerce-ui'
+import { useForm, useWatch, type UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import {
+  cookie,
+  filterNonNullableKeys,
+  storefrontAll,
+  useStorefrontConfig,
+  type RequiredKeys,
+} from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo } from 'react'
+import { storeToLocale } from '../../utils/localeToStore'
+import { type StoreSwitcherListQuery } from './StoreSwitcherList.gql'
+
+export type StoreSwitcherStore = RequiredKeys<
+  NonNullable<NonNullable<StoreSwitcherListQuery['availableStores']>[0]>,
+  'store_code' | 'store_name' | 'store_group_name' | 'store_group_code'
+> & {
+  country: string
+  disabled: boolean
+}
+
+export type StoreSwitcherGroup = Pick<
+  StoreSwitcherStore,
+  'store_group_code' | 'store_group_name'
+> & {
+  stores: StoreSwitcherStore[]
+  country?: string
+  disabled: boolean
+}
+
+export type StoreSwitcherFormValues = {
+  storeGroupCode: string
+  storeCode: string
+  currency: string
+}
+
+type StoreSwitcherFormContextType = {
+  stores: StoreSwitcherStore[]
+  storeGroups: StoreSwitcherGroup[]
+} & UseFormReturn<StoreSwitcherFormValues>
+
+const StoreSwitcherFormContext = createContext<StoreSwitcherFormContextType | null>(null)
+
+export function useStoreSwitcherForm(
+  context?: StoreSwitcherFormContextType,
+): StoreSwitcherFormContextType {
+  const ctx = useContext(StoreSwitcherFormContext) ?? context
+  if (!ctx) throw new Error('useStoreSwitcherForm must be used within a StoreSwitcherFormProvider')
+  return ctx
+}
+
+export function useSelectedStoreGroup(
+  context?: StoreSwitcherFormContextType,
+): StoreSwitcherGroup | null {
+  const { storeGroups, control } = useStoreSwitcherForm(context)
+
+  const selectedStoreGroupCode = useWatch({ control, name: 'storeGroupCode' })
+  const selectedStoreGroup = storeGroups.find(
+    (group) => group.store_group_code === selectedStoreGroupCode,
+  )
+
+  return selectedStoreGroup ?? null
+}
+
+export function useSelectedStore(
+  context?: StoreSwitcherFormContextType,
+): StoreSwitcherStore | null {
+  const { control } = useStoreSwitcherForm(context)
+
+  const selectedStoreGroup = useSelectedStoreGroup(context)
+
+  const selectedStoreCode = useWatch({ control, name: 'storeCode' })
+  const selectedStore = selectedStoreGroup?.stores?.find(
+    (store) => store.store_code === selectedStoreCode,
+  )
+  return selectedStore ?? null
+}
+
+export function useSelectedCurrency(context?: StoreSwitcherFormContextType): string | null {
+  const { control } = useStoreSwitcherForm(context)
+
+  const selectedStore = useSelectedStore(context)
+  const selectedCurrencyCode = useWatch({ control, name: 'currency' })
+
+  return selectedStore?.currency?.available_currency_codes?.includes(selectedCurrencyCode)
+    ? selectedCurrencyCode
+    : null
+}
+
+export function useStoreSwitcher({
+  availableStores,
+}: StoreSwitcherListQuery): StoreSwitcherFormContextType {
+  const stores: StoreSwitcherStore[] = useMemo(
+    () =>
+      filterNonNullableKeys(availableStores, [
+        'store_name',
+        'store_code',
+        'store_group_code',
+        'store_group_name',
+        'base_currency_code',
+        'locale',
+      ])
+        .map((store) => ({
+          ...store,
+          country: store.locale.split('_')[1]?.toLowerCase(),
+          disabled: !storefrontAll.find((l) => l.magentoStoreCode === store.store_code),
+        }))
+        .filter((store) => !store.disabled),
+    [availableStores],
+  )
+
+  const storeGroups = Object.values(
+    stores.reduce<{
+      [group: string]: StoreSwitcherGroup
+    }>((storesGrouped, store) => {
+      if (!storesGrouped[store.store_group_code]) {
+        const group: StoreSwitcherGroup = {
+          store_group_code: store.store_group_code,
+          store_group_name: store.store_group_name,
+          stores: [],
+          disabled: true,
+          country: store.country,
+        }
+        storesGrouped[store.store_group_code] = group
+      }
+      if (!store.disabled) storesGrouped[store.store_group_code].disabled = false
+      if (storesGrouped[store.store_group_code].country !== store.country) {
+        storesGrouped[store.store_group_code].country = undefined
+      }
+
+      storesGrouped[store.store_group_code].stores.push(store)
+      return storesGrouped
+    }, {}),
+  )
+
+  const storeCode = useStorefrontConfig().magentoStoreCode
+
+  const form = useForm<StoreSwitcherFormValues>({
+    defaultValues: {
+      storeCode,
+      storeGroupCode:
+        stores.find((store) => store.store_code === storeCode)?.store_group_code ?? '',
+    },
+  })
+
+  return { storeGroups, stores, ...form }
+}
+
+export function StoreSwitcherFormProvider(
+  props: {
+    children?: React.ReactNode
+    onSubmit?: SubmitHandler<StoreSwitcherFormValues>
+  } & StoreSwitcherListQuery,
+) {
+  const { children, onSubmit, availableStores } = props
+  const context = useStoreSwitcher({ availableStores })
+  const { setValue, storeGroups } = context
+
+  const selectedStoreGroup = useSelectedStoreGroup(context) ?? storeGroups[0]
+  const selectedStore = useSelectedStore(context)
+  const selectedCurrency = useSelectedCurrency(context)
+
+  useIsomorphicLayoutEffect(() => {
+    const currency = cookie('Magento-Content-Currency')
+    if (currency) setValue('currency', currency)
+  }, [setValue])
+
+  useIsomorphicLayoutEffect(() => {
+    const defaultStore = selectedStoreGroup.stores[0]
+    if (!selectedStore) {
+      setValue('storeCode', defaultStore.store_code)
+    }
+
+    const currencyCode =
+      selectedStore?.currency?.default_display_currency_code ??
+      defaultStore.currency?.default_display_currency_code
+
+    if (!selectedCurrency && currencyCode) {
+      setValue('currency', currencyCode)
+    }
+  }, [selectedCurrency, selectedStore, selectedStoreGroup.stores, setValue])
+
+  const submit = context.handleSubmit(async (data, event) => {
+    if (
+      data.currency ===
+      context.stores.find((store) => store.store_code === data.storeCode)?.base_currency_code
+    ) {
+      cookie('Magento-Content-Currency', null)
+    } else {
+      cookie('Magento-Content-Currency', data.currency)
+    }
+
+    onSubmit?.(data, event)
+  })
+
+  return (
+    <StoreSwitcherFormContext.Provider value={context}>
+      <form onSubmit={submit}>{children}</form>
+    </StoreSwitcherFormContext.Provider>
+  )
+}

package/components/StoreSwitcherButton/StoreSwitcherButton.tsx

@@ -1,9 +1,10 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, FlagAvatar } from '@graphcommerce/next-ui'
+import { cookie, extendableComponent, FlagAvatar } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Button } from '@mui/material'
 import { useRouter } from 'next/router'
-import { StoreConfigDocument } from '../../StoreConfig.gql'
+import { useMemo } from 'react'
+import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
 
 export type StoreSwitcherButtonProps = { sx?: SxProps<Theme> }
 
@@ -13,10 +14,16 @@ const { classes } = extendableComponent(name, parts)
 
 export function StoreSwitcherButton(props: StoreSwitcherButtonProps) {
   const { sx } = props
+
   const config = useQuery(StoreConfigDocument)
   const country = config.data?.storeConfig?.locale?.split('_')?.[1]?.toLowerCase() ?? ''
   const router = useRouter()
 
+  const currency = useMemo(
+    () => cookie('Magento-Content-Currency') ?? config.data?.storeConfig?.base_currency_code,
+    [config.data?.storeConfig?.base_currency_code],
+  )
+
   return (
     <Button
       variant='text'
@@ -28,9 +35,10 @@ export function StoreSwitcherButton(props: StoreSwitcherButtonProps) {
       <FlagAvatar
         country={country}
         className={classes.avatar}
-        sx={{ height: 20, width: 20, marginRight: '10px' }}
+        size='20px'
+        sx={{ marginRight: '10px' }}
       />
-      {config.data?.storeConfig?.store_name} - {config.data?.storeConfig?.base_currency_code}
+      {config.data?.storeConfig?.store_name} – {currency}
     </Button>
   )
 }

package/index.ts

@@ -1,14 +1,13 @@
+export * from './components/CurrencySymbol/CurrencySymbol'
 export * from './components/GlobalHead/GlobalHead'
+export * from './components/Money/Money'
+export * from './components/Money/Money.gql'
+export * from './components/PageMeta/PageMeta'
+export * from './components/StoreSwitcherButton/StoreSwitcherButton'
 export * from './hooks/useFindCountry'
 export * from './hooks/useFindRegion'
-export * from './localeToStore'
-export * from './Money'
-export * from './Money.gql'
-export * from './PageMeta'
 export * from './queries/CountryRegions.gql'
-export * from './StoreConfig.gql'
-export * from './components/StoreSwitcherButton/StoreSwitcherButton'
-export * from './components/StoreSwitcherList/StoreSwitcherList'
-export * from './components/StoreSwitcherList/StoreSwitcherList.gql'
+export * from './queries/StoreConfig.gql'
+export * from './utils/localeToStore'
 export * from './utils/redirectOrNotFound'
-export * from './components/CurrencySymbol/CurrencySymbol'
+export * from './components/StoreSwitcher'

package/mesh/resolvers.ts

@@ -0,0 +1,14 @@
+import type { Resolvers } from '@graphcommerce/graphql-mesh'
+
+export const resolvers: Resolvers = {
+  StoreConfig: {
+    currency: {
+      selectionSet: '{ store_code }',
+      resolve: (parent, args, ctx, info) => {
+        if (!parent.store_code) return null
+        const context = { ...ctx, headers: { store: parent.store_code } }
+        return context.m2.Query.currency({ context, info }) ?? null
+      },
+    },
+  },
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-store",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.16",
+  "version": "9.1.0-canary.18",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,13 +12,15 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.16",
-    "@graphcommerce/graphql": "^9.1.0-canary.16",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.16",
-    "@graphcommerce/image": "^9.1.0-canary.16",
-    "@graphcommerce/next-ui": "^9.1.0-canary.16",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.16",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.16",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.18",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.18",
+    "@graphcommerce/graphql": "^9.1.0-canary.18",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.18",
+    "@graphcommerce/image": "^9.1.0-canary.18",
+    "@graphcommerce/next-ui": "^9.1.0-canary.18",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.18",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/magentoCurrencyCode.ts

@@ -0,0 +1,35 @@
+import {
+  type getPrivateQueryContext as getPrivateQueryContextType,
+  type usePrivateQueryContext as usePrivateQueryContextType,
+} from '@graphcommerce/graphql'
+import type { PrivateContext } from '@graphcommerce/graphql-mesh'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { cookie } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/graphql',
+}
+
+export const getPrivateQueryContext: FunctionPlugin<typeof getPrivateQueryContextType> = (
+  prev,
+  client,
+  ...args
+) => {
+  const currencyCode = cookie('Magento-Content-Currency')
+
+  const res = prev(client, ...args)
+  if (!currencyCode) return res
+  return { ...res, currencyCode } satisfies PrivateContext
+}
+
+export const usePrivateQueryContext: FunctionPlugin<typeof usePrivateQueryContextType> = (
+  prev,
+  ...args
+) => {
+  const currencyCode = cookie('Magento-Content-Currency')
+
+  const res = prev(...args)
+  if (!currencyCode) return res
+  return { ...res, currencyCode }
+}

package/plugins/magentoStoreGraphqlConfig.ts

@@ -1,5 +1,6 @@
 import { setContext, type graphqlConfig as graphqlConfigType } from '@graphcommerce/graphql'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { cookie } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'function',
@@ -15,7 +16,13 @@ export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, co
       ...results.links,
       setContext((_, context) => {
         if (!context.headers) context.headers = {}
-        context.headers.store = conf.storefront.magentoStoreCode
+        if (!context.headers.store) {
+          context.headers.store = conf.storefront.magentoStoreCode
+        }
+
+        const contentCurrency = cookie('Magento-Content-Currency')
+        if (contentCurrency && typeof context.headers['content-currency'] === 'undefined')
+          context.headers['content-currency'] = contentCurrency
 
         if (conf.preview) {
           // To disable caching from the backend, we provide a bogus cache ID.

package/plugins/meshMagentoStore.ts

@@ -0,0 +1,23 @@
+import type { meshConfig as meshConfigBase } from '@graphcommerce/graphql-mesh/meshConfig'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  module: '@graphcommerce/graphql-mesh/meshConfig',
+  type: 'function',
+}
+
+export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
+  prev,
+  baseConfig,
+  graphCommerceConfig,
+) =>
+  prev(
+    {
+      ...baseConfig,
+      additionalResolvers: [
+        ...(baseConfig.additionalResolvers ?? []),
+        '@graphcommerce/magento-store/mesh/resolvers.ts',
+      ],
+    },
+    graphCommerceConfig,
+  )

package/queries/StoreConfig.graphql

@@ -0,0 +1,6 @@
+query StoreConfig {
+  storeConfig {
+    store_code
+  }
+  ...StoreConfigQueryFragment
+}

package/queries/StoreConfigQueryFragment.graphql

@@ -0,0 +1,6 @@
+fragment StoreConfigQueryFragment on Query {
+  __typename
+  storeConfig {
+    ...StoreConfigFragment
+  }
+}

package/schema/PrivateContext.graphqls

@@ -0,0 +1,4 @@
+input PrivateContext {
+  storeCode: String
+  currencyCode: String
+}

package/schema/StoreConfig-currency.graphqls

@@ -0,0 +1,3 @@
+extend type StoreConfig {
+  currency: Currency
+}

package/test/apolloClientStore.fixture.ts

@@ -4,7 +4,7 @@
 import type { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { ApolloClient, InMemoryCache } from '@graphcommerce/graphql'
 import { test as base } from '@playwright/test'
-import { localeToStore } from '../localeToStore'
+import { localeToStore } from '../utils/localeToStore'
 
 type ApolloClientStoreTest = {
   apolloClient: ApolloClient<NormalizedCacheObject>

package/utils/redirectOrNotFound.ts

@@ -3,10 +3,10 @@ import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@gr
 import { flushMeasurePerf } from '@graphcommerce/graphql'
 import { isTypename, nonNullable, storefrontConfig } from '@graphcommerce/next-ui'
 import type { Redirect } from 'next'
-import { defaultLocale } from '../localeToStore'
-import type { StoreConfigQuery } from '../StoreConfig.gql'
+import type { StoreConfigQuery } from '../queries/StoreConfig.gql'
 import type { HandleRedirectQuery } from './HandleRedirect.gql'
 import { HandleRedirectDocument } from './HandleRedirect.gql'
+import { defaultLocale } from './localeToStore'
 
 export type RedirectOr404Return = Promise<
   | { redirect: Redirect; revalidate?: number | boolean }

package/StoreConfig.graphql

@@ -1,5 +0,0 @@
-query StoreConfig {
-  storeConfig {
-    ...StoreConfigFragment
-  }
-}

package/components/StoreSwitcherList/StoreSwitcherList.graphql

@@ -1,10 +0,0 @@
-query StoreSwitcherList {
-  availableStores {
-    store_name
-    store_code
-    locale
-    base_currency_code
-    store_group_name
-    store_group_code
-  }
-}