@graphcommerce/magento-store 9.1.0-canary.34 → 9.1.0-canary.36

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 9.1.0-canary.36
+
+### Patch Changes
+
+- [`4c92400`](https://github.com/graphcommerce-org/graphcommerce/commit/4c92400733bb3764494298122771d5bd9bacd5a2) - Render prices with a narrowSymbol so users just see $ instead of US$ ([@paales](https://github.com/paales))
+
+- [`f0d244e`](https://github.com/graphcommerce-org/graphcommerce/commit/f0d244ef8625e9cd2fc08d8518f8afa1edb3d688) - Solve issue where the currency switcher would result in an additional query ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.35
+
+### Patch Changes
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`5a41fff`](https://github.com/graphcommerce-org/graphcommerce/commit/5a41fff74c38ed1f9793e48ec42cba71d1d539d1) - Use the default display currency instead of the base currency in case they differ from one another. ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`5a41fff`](https://github.com/graphcommerce-org/graphcommerce/commit/5a41fff74c38ed1f9793e48ec42cba71d1d539d1) - Store switcher now allows switching between currencies without navigating and just switches the @privateContext. ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`5a41fff`](https://github.com/graphcommerce-org/graphcommerce/commit/5a41fff74c38ed1f9793e48ec42cba71d1d539d1) - Added store switcher to the header and mobile navigation ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.34
 
 ## 9.1.0-canary.33

package/components/CurrencySymbol/CurrencySymbol.tsx

@@ -7,7 +7,8 @@ import { StoreConfigDocument } from '../../graphql'
 
 export function CurrencySymbol(props: CurrencySymbolProps) {
   const { currency } = props
-  const baseCurrencyCode = useQuery(StoreConfigDocument).data?.storeConfig?.base_currency_code ?? ''
+  const baseCurrencyCode =
+    useQuery(StoreConfigDocument).data?.storeConfig?.default_display_currency_code ?? ''
 
   return <CurrencySymbolBase {...props} currency={currency || baseCurrencyCode} />
 }

package/components/Money/Money.tsx

@@ -15,7 +15,8 @@ export type MoneyProps = MoneyFragment & OverridableProps
 
 export function Money(props: MoneyProps) {
   const { currency, value, round = false, formatOptions, sx } = props
-  const baseCurrencyCode = useQuery(StoreConfigDocument).data?.storeConfig?.base_currency_code
+  const baseCurrencyCode =
+    useQuery(StoreConfigDocument).data?.storeConfig?.default_display_currency_code
   const digits = (value ?? 0) % 1 !== 0
   const maximumFractionDigits = round && !digits ? 0 : 2
   const currencyCode = currency ?? baseCurrencyCode ?? ''
@@ -26,6 +27,7 @@ export function Money(props: MoneyProps) {
     <CurrencyFormat
       currency={currencyCode}
       maximumFractionDigits={maximumFractionDigits}
+      currencyDisplay='narrowSymbol'
       {...formatOptions}
       value={value}
       sx={sx}

package/components/StoreSwitcher/StoreSwitcherGroupSelector.tsx

@@ -24,7 +24,7 @@ export function StoreSwitcherGroupSelector(props: StoreSwitcherGroupSelectorProp
   const { header, showStores = 0, showCurrencies, ...actionCardList } = props
   const { control, storeGroups } = useStoreSwitcherForm()
 
-  const hidden = storeGroups.length === 1 && storeGroups[0].stores.length > 1
+  const hidden = storeGroups.length === 1
 
   return (
     <>

package/components/StoreSwitcher/useStoreSwitcher.tsx

@@ -1,10 +1,15 @@
-import type { SubmitHandler } from '@graphcommerce/ecommerce-ui'
-import { useForm, useWatch, type UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import {
+  useForm,
+  useWatch,
+  type SubmitHandler,
+  type UseFormReturn,
+} from '@graphcommerce/ecommerce-ui'
 import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import {
   cookie,
   filterNonNullableKeys,
   storefrontAll,
+  useCookie,
   useStorefrontConfig,
   type RequiredKeys,
 } from '@graphcommerce/next-ui'
@@ -28,7 +33,7 @@ export type StoreSwitcherGroup = Pick<
   disabled: boolean
 }
 
-export type StoreSwitcherFormValues = {
+export interface StoreSwitcherFormValues {
   storeGroupCode: string
   storeCode: string
   currency: string
@@ -39,7 +44,7 @@ type StoreSwitcherFormContextType = {
   storeGroups: StoreSwitcherGroup[]
 } & UseFormReturn<StoreSwitcherFormValues>
 
-const StoreSwitcherFormContext = createContext<StoreSwitcherFormContextType | null>(null)
+export const StoreSwitcherFormContext = createContext<StoreSwitcherFormContextType | null>(null)
 
 export function useStoreSwitcherForm(
   context?: StoreSwitcherFormContextType,
@@ -87,29 +92,32 @@ export function useSelectedCurrency(context?: StoreSwitcherFormContextType): str
     : 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],
-  )
+export type StoreSwitcherFormProviderProps = {
+  children?: React.ReactNode
+  onSubmit?: SubmitHandler<StoreSwitcherFormValues>
+} & StoreSwitcherListQuery
+
+export function normalizeAvailableStores(
+  availableStores: StoreSwitcherListQuery['availableStores'],
+): StoreSwitcherStore[] {
+  return 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)
+}
 
-  const storeGroups = Object.values(
+function normalizeStoreGroups(stores: StoreSwitcherStore[]): StoreSwitcherGroup[] {
+  return Object.values(
     stores.reduce<{
       [group: string]: StoreSwitcherGroup
     }>((storesGrouped, store) => {
@@ -127,70 +135,66 @@ export function useStoreSwitcher({
       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
     }, {}),
   )
+}
+
+function useNormalizeMemo(availableStores: StoreSwitcherListQuery['availableStores']) {
+  return useMemo(() => {
+    const stores = normalizeAvailableStores(availableStores)
+    const storeGroups = normalizeStoreGroups(stores)
+    return { stores, storeGroups }
+  }, [availableStores])
+}
+
+export function StoreSwitcherFormProvider(props: StoreSwitcherFormProviderProps) {
+  const { children, onSubmit, availableStores } = props
+
+  const { stores, storeGroups } = useNormalizeMemo(availableStores)
 
   const storeCode = useStorefrontConfig().magentoStoreCode
+  const store = stores.find((s) => s.store_code === storeCode)
 
   const form = useForm<StoreSwitcherFormValues>({
     defaultValues: {
       storeCode,
-      storeGroupCode:
-        stores.find((store) => store.store_code === storeCode)?.store_group_code ?? '',
+      storeGroupCode: stores.find((s) => s.store_code === storeCode)?.store_group_code ?? '',
+      currency: cookie('Magento-Content-Currency') ?? store?.default_display_currency_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 context: StoreSwitcherFormContextType = useMemo(
+    () => ({ storeGroups, stores, ...form }),
+    [form, storeGroups, stores],
+  )
+  const { setValue } = 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)
-    }
+    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)
-    }
+    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)
+  const submit = context.handleSubmit(async (formValues, event) => {
+    const formStore = context.stores.find((s) => s.store_code === formValues.storeCode)
+    const isDefaultDisplayCurrency =
+      formValues.currency === formStore?.default_display_currency_code
+
+    if (isDefaultDisplayCurrency) cookie('Magento-Content-Currency', null)
+    else cookie('Magento-Content-Currency', formValues.currency)
+
+    await onSubmit?.(formValues, event)
   })
 
   return (

package/components/StoreSwitcherButton/StoreSwitcherButton.tsx

@@ -1,44 +1,34 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { cookie, extendableComponent, FlagAvatar } from '@graphcommerce/next-ui'
-import type { SxProps, Theme } from '@mui/material'
+import { extendableComponent, iconLanguage, IconSvg, sxx } from '@graphcommerce/next-ui'
+import type { ButtonProps } from '@mui/material'
 import { Button } from '@mui/material'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { StoreConfigDocument } from '../../graphql'
+import { StoreSwitcherText, type StoreSwitcherTextProps } from './StoreSwitcherText'
+import { useShowStoreSwitcherButton } from './useStoreSwitcherButton'
 
-export type StoreSwitcherButtonProps = { sx?: SxProps<Theme> }
+export type StoreSwitcherButtonProps = ButtonProps & {
+  textProps?: StoreSwitcherTextProps
+}
 
 const name = 'StoreSwitcherButton'
 const parts = ['root', 'avatar'] as const
 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 { sx, textProps, ...rest } = props
 
-  const currency = useMemo(
-    () => cookie('Magento-Content-Currency') ?? config.data?.storeConfig?.base_currency_code,
-    [config.data?.storeConfig?.base_currency_code],
-  )
+  const { show, onClick } = useShowStoreSwitcherButton()
+  if (!show) return null
 
   return (
     <Button
       variant='text'
       size='medium'
       className={classes.root}
-      onClick={() => router.push('/switch-stores')}
-      sx={sx}
+      onClick={onClick}
+      startIcon={<IconSvg src={iconLanguage} />}
+      sx={sxx({ width: 'max-content' }, sx)}
+      {...rest}
     >
-      <FlagAvatar
-        country={country}
-        className={classes.avatar}
-        size='20px'
-        sx={{ marginRight: '10px' }}
-      />
-      {config.data?.storeConfig?.store_name} – {currency}
+      <StoreSwitcherText {...textProps} />
     </Button>
   )
 }

package/components/StoreSwitcherButton/StoreSwitcherFab.tsx

@@ -0,0 +1,20 @@
+import { iconLanguage, IconSvg, sxx } from '@graphcommerce/next-ui'
+import { Fab, type FabProps } from '@mui/material'
+import { StoreSwitcherText } from './StoreSwitcherText'
+import { useShowStoreSwitcherButton } from './useStoreSwitcherButton'
+
+export function StoreSwitcherFab(props: FabProps) {
+  const { show, onClick } = useShowStoreSwitcherButton()
+  if (!show) return null
+
+  return (
+    <Fab
+      variant='extended'
+      onClick={onClick}
+      sx={sxx({ width: 'max-content', columnGap: '3px', typography: 'body1' })}
+      {...props}
+    >
+      <IconSvg src={iconLanguage} /> <StoreSwitcherText />
+    </Fab>
+  )
+}

package/components/StoreSwitcherButton/StoreSwitcherMenuFabSecondaryItem.tsx

@@ -0,0 +1,34 @@
+import {
+  iconLanguage,
+  IconSvg,
+  MenuFabSecondaryItem,
+  type FabMenuSecondaryItemProps,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { StoreSwitcherText, type StoreSwitcherTextProps } from './StoreSwitcherText'
+import { useShowStoreSwitcherButton } from './useStoreSwitcherButton'
+
+export type StoreSwitcherMenuFabSecondaryItemProps = Omit<
+  FabMenuSecondaryItemProps,
+  'children' | 'href'
+> & {
+  textProps?: StoreSwitcherTextProps
+}
+
+export function StoreSwitcherMenuFabSecondaryItem(props: StoreSwitcherMenuFabSecondaryItemProps) {
+  const { sx, textProps, ...rest } = props
+
+  const { show, onClick } = useShowStoreSwitcherButton()
+  if (!show) return null
+
+  return (
+    <MenuFabSecondaryItem
+      key='service'
+      icon={<IconSvg src={iconLanguage} size='medium' />}
+      href='/switch-stores'
+      {...rest}
+    >
+      <Trans>Store Settings</Trans> <StoreSwitcherText {...textProps} /> haja ajaj a ajaj a aj
+    </MenuFabSecondaryItem>
+  )
+}

package/components/StoreSwitcherButton/StoreSwitcherText.tsx

@@ -0,0 +1,50 @@
+import { CurrencySymbol, extendableComponent, FlagAvatar, ListFormat } from '@graphcommerce/next-ui'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import React from 'react'
+import { useShowStoreSwitcherButton } from './useStoreSwitcherButton'
+
+export type StoreSwitcherTextProps = {
+  items?: React.ReactNode[]
+  showFlag?: boolean
+  sx?: SxProps<Theme>
+}
+
+const name = 'StoreSwitcherButton'
+const parts = ['root', 'avatar'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function StoreSwitcherText(props: StoreSwitcherTextProps) {
+  const { items = [], showFlag = false, sx = [] } = props
+
+  const { country, multiLocale, currency, multiCurrency } = useShowStoreSwitcherButton()
+
+  const renderItems = [
+    multiLocale && (
+      <React.Fragment key='locale'>
+        {showFlag && (
+          <FlagAvatar
+            country={country}
+            className={classes.avatar}
+            size='20px'
+            sx={{ marginRight: '10px' }}
+          />
+        )}
+        {country.toUpperCase()}
+      </React.Fragment>
+    ),
+    multiCurrency && currency && (
+      <CurrencySymbol key='currency' currency={currency} currencyDisplay='symbol' />
+    ),
+    ...items,
+  ].filter(Boolean) as React.ReactNode[]
+
+  if (renderItems.length === 0) return null
+
+  return (
+    <Box component='span' sx={sx}>
+      <ListFormat type='unit' listStyle='narrow'>
+        {renderItems}
+      </ListFormat>
+    </Box>
+  )
+}

package/components/StoreSwitcherButton/index.ts

@@ -0,0 +1,5 @@
+export * from './StoreSwitcherButton'
+export * from './StoreSwitcherFab'
+export * from './StoreSwitcherMenuFabSecondaryItem'
+export * from './StoreSwitcherText'
+export * from './useStoreSwitcherButton'

package/components/StoreSwitcherButton/useStoreSwitcherButton.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { useCookie } from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import { StoreConfigDocument } from '../../graphql'
+
+export function useShowStoreSwitcherButton(options?: Record<string, never>) {
+  const config = useQuery(StoreConfigDocument)
+  const country = config.data?.storeConfig?.locale?.split('_')?.[1]?.toLowerCase() ?? ''
+  const router = useRouter()
+  const multiLocale = (router.locales?.length ?? 0) > 1
+  const multiCurrency =
+    new Set(config.data?.storeConfig?.currency?.available_currency_codes ?? []).size > 1
+
+  const [currency] = useCookie('Magento-Content-Currency')
+
+  return {
+    show: multiLocale || multiCurrency,
+    multiCurrency,
+    country,
+    multiLocale,
+    currency: currency ?? config.data?.storeConfig?.default_display_currency_code,
+    storeName: config.data?.storeConfig?.store_name,
+    onClick: () => router.push('/switch-stores'),
+  }
+}

package/graphql/fragments/StoreConfigFragment.graphql

@@ -2,7 +2,6 @@ fragment StoreConfigFragment on StoreConfig {
   website_name
   store_code
   store_name
-
   header_logo_src
   logo_width
   logo_height
@@ -12,8 +11,10 @@ fragment StoreConfigFragment on StoreConfig {
 
   locale
   base_currency_code
-
   default_display_currency_code
+  currency {
+    available_currency_codes
+  }
 
   head_shortcut_icon
   head_includes

package/graphql/fragments/StoreConfigQueryFragment.graphql

@@ -3,4 +3,7 @@ fragment StoreConfigQueryFragment on Query {
   storeConfig {
     ...StoreConfigFragment
   }
+  availableStores {
+    store_code
+  }
 }

package/graphql/queries/StoreSwitcherList.graphql

@@ -4,6 +4,7 @@ query StoreSwitcherList {
     store_code
     locale
     base_currency_code
+    default_display_currency_code
     store_group_name
     store_group_code
     currency {

package/index.ts

@@ -2,12 +2,12 @@ export * from './components/AttributeForm'
 export * from './components/CurrencySymbol/CurrencySymbol'
 export * from './components/GlobalHead/GlobalHead'
 export * from './components/Money/Money'
-export * from './graphql'
 export * from './components/PageMeta/PageMeta'
-export * from './components/StoreSwitcherButton/StoreSwitcherButton'
+export * from './components/PriceModifiers'
+export * from './components/StoreSwitcher'
+export * from './components/StoreSwitcherButton'
+export * from './graphql'
 export * from './hooks/useFindCountry'
 export * from './hooks/useFindRegion'
-export * from './utils/localeToStore'
 export * from './utils/redirectOrNotFound'
-export * from './components/StoreSwitcher'
-export * from './components/PriceModifiers'
+export * from './utils/localeToStore'

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.34",
+  "version": "9.1.0-canary.36",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,15 +12,15 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.34",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.34",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.34",
-    "@graphcommerce/graphql": "^9.1.0-canary.34",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.34",
-    "@graphcommerce/image": "^9.1.0-canary.34",
-    "@graphcommerce/next-ui": "^9.1.0-canary.34",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.34",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.34",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.36",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.36",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.36",
+    "@graphcommerce/graphql": "^9.1.0-canary.36",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.36",
+    "@graphcommerce/image": "^9.1.0-canary.36",
+    "@graphcommerce/next-ui": "^9.1.0-canary.36",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.36",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.36",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/magentoCurrencyCode.ts

@@ -3,8 +3,9 @@ import {
   type usePrivateQueryContext as usePrivateQueryContextType,
 } from '@graphcommerce/graphql'
 import type { PrivateContext } from '@graphcommerce/graphql-mesh'
+import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
-import { cookie } from '@graphcommerce/next-ui'
+import { cookie, useCookie } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'function',
@@ -27,9 +28,9 @@ export const usePrivateQueryContext: FunctionPlugin<typeof usePrivateQueryContex
   prev,
   ...args
 ) => {
-  const currencyCode = cookie('Magento-Content-Currency')
-
+  const awaiting = useCustomerSession().query.loading
+  const [currencyCode] = useCookie('Magento-Content-Currency')
   const res = prev(...args)
-  if (!currencyCode) return res
+  if (!currencyCode || awaiting) return res
   return { ...res, currencyCode }
 }