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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 9.1.0-canary.20
+
+## 9.1.0-canary.19
+
+### Minor Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`9f040a4`](https://github.com/graphcommerce-org/graphcommerce/commit/9f040a4c0947f05f2f27e4c5078a684b04e711e1) - Implemented the `query { attributesForm }` to be able to dynamically render forms with useAttributesForm/preloadAttributesForm and AttributesFormAutoLayout, and additional utilities to handle form submissions. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`798c122`](https://github.com/graphcommerce-org/graphcommerce/commit/798c12271e90cf0e02f021e7ad4aa088b4c7c2a3) - Use the `storeConfig.head_shortcut_icon` when configured, if not configured it will use the favicon.ico and favicon.svg from the public folder. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6b2b44c`](https://github.com/graphcommerce-org/graphcommerce/commit/6b2b44ca853279144d7768067f3462d4d4bf0af1) - Created a new PriceModifiers component that is implemented on CartItems, allowing different product types to render their options in a consistent manner and allow rendering a base price so that the sum in the cart is correct. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/AttributeForm/AttributeFormField.tsx

@@ -0,0 +1,27 @@
+import type { Control, FieldValues } from '@graphcommerce/react-hook-form'
+import type { SxProps, Theme } from '@mui/material'
+import type { CustomAttributeMetadata, CustomAttributeMetadataTypename } from './useAttributesForm'
+
+export type AttributeFormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  Typename extends CustomAttributeMetadataTypename = CustomAttributeMetadataTypename,
+> = {
+  control: Control<TFieldValues>
+  sx?: SxProps<Theme>
+  metadata: CustomAttributeMetadata<Typename>
+}
+
+export function AttributeFormField<
+  TFieldValues extends FieldValues = FieldValues,
+  Typename extends CustomAttributeMetadataTypename = CustomAttributeMetadataTypename,
+>(props: AttributeFormFieldProps<TFieldValues, Typename>) {
+  const { metadata, control, sx } = props
+
+  if (process.env.NODE_ENV === 'production') return null
+
+  return (
+    <div>
+      Please specify a renderer for {metadata.__typename}:{metadata.code}
+    </div>
+  )
+}

package/components/AttributeForm/AttributesFormAutoLayout.tsx

@@ -0,0 +1,91 @@
+import {
+  nonNullable,
+  SectionContainer,
+  sxx,
+  type SectionContainerProps,
+} from '@graphcommerce/next-ui'
+import type { Control, FieldValues } from '@graphcommerce/react-hook-form'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import { AttributeFormField, type AttributeFormFieldProps } from './AttributeFormField'
+import type {
+  CustomAttributeMetadata,
+  CustomAttributeMetadataTypename,
+  GridArea,
+} from './useAttributesForm'
+
+export type AttributeFormAutoLayoutFieldset = {
+  label?: React.ReactNode
+  gridAreas: GridArea[]
+  sx?: SxProps<Theme>
+}
+
+export type AttributeFormAutoLayoutProps<
+  TFieldValues extends FieldValues = FieldValues,
+  Typename extends CustomAttributeMetadataTypename = CustomAttributeMetadataTypename,
+> = {
+  control: Control<TFieldValues>
+  fieldsets?: AttributeFormAutoLayoutFieldset[]
+  attributes: CustomAttributeMetadata<Typename>[]
+  render?: React.FC<AttributeFormFieldProps<NoInfer<TFieldValues>, Typename>>
+  sectionContainer?: Omit<SectionContainerProps, 'labelLeft'>
+}
+
+export function AttributesFormAutoLayout<
+  TFieldValues extends FieldValues = FieldValues,
+  Typename extends CustomAttributeMetadataTypename = CustomAttributeMetadataTypename,
+>(props: AttributeFormAutoLayoutProps<TFieldValues, Typename>) {
+  const {
+    control,
+    fieldsets,
+    attributes: incomingAttributes,
+    render: Component = AttributeFormField,
+    sectionContainer,
+  } = props
+
+  let itemsRemaining = incomingAttributes
+  const byFieldSet = (fieldsets ?? []).map(({ gridAreas, ...rest }) => ({
+    ...rest,
+    attributes: gridAreas
+      .map((gridArea) => {
+        const item = itemsRemaining.find((i) => i.gridArea === gridArea)
+        if (item) itemsRemaining = itemsRemaining.filter((i) => i.gridArea !== item.gridArea)
+        return item
+      })
+      .filter(nonNullable),
+  }))
+
+  if (itemsRemaining.length > 0) byFieldSet.push({ label: 'Other', attributes: itemsRemaining })
+
+  return byFieldSet.map((fieldSet) => {
+    const key = fieldSet.attributes.map((fieldName) => fieldName.gridArea).join('-')
+
+    const fields = (
+      <Box
+        sx={sxx(
+          (theme) => ({
+            display: 'grid',
+            gridTemplateAreas: fieldSet.attributes
+              .map((metadata) => `"${metadata.gridArea}"`)
+              .join('\n'),
+            py: theme.spacings.xs,
+            columnGap: theme.spacings.xs,
+            rowGap: theme.spacings.xxs,
+          }),
+          fieldSet.sx,
+        )}
+      >
+        {fieldSet.attributes.map((metadata) => (
+          <Component key={metadata.gridArea} control={control} metadata={metadata} />
+        ))}
+      </Box>
+    )
+
+    return fieldSet.label ? (
+      <SectionContainer labelLeft={fieldSet.label} key={key} {...sectionContainer}>
+        {fields}
+      </SectionContainer>
+    ) : (
+      fields
+    )
+  })
+}

package/components/AttributeForm/index.ts

@@ -0,0 +1,3 @@
+export * from './AttributesFormAutoLayout'
+export * from './useAttributesForm'
+export * from './preloadAttributesForm'

package/components/AttributeForm/preloadAttributesForm.ts

@@ -0,0 +1,10 @@
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import { AttributesFormDocument } from '../../graphql'
+import type { CustomAttributeFormCode } from './useAttributesForm'
+
+export function preloadAttributesForm(
+  client: ApolloClient<NormalizedCacheObject>,
+  formCode: CustomAttributeFormCode,
+) {
+  return client.query({ query: AttributesFormDocument, variables: { formCode } })
+}

package/components/AttributeForm/useAttributesForm.tsx

@@ -0,0 +1,266 @@
+import { useQuery } from '@graphcommerce/graphql'
+import type { AttributeValueInput } from '@graphcommerce/graphql-mesh'
+import { nonNullable, useMemoObject } from '@graphcommerce/next-ui'
+import { useMemo } from 'react'
+import { AttributesFormDocument } from '../../graphql'
+import type { AttributeValueFragment, CustomAttributeMetadataFragment } from '../../graphql'
+
+type CustomAttributesFormFieldValue = string | string[] | boolean | undefined
+type CustomAttributesFormField = Record<string, CustomAttributesFormFieldValue>
+
+export type CustomAttributesFormValues<
+  AdditionalKnownAttributes extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  custom_attributes?: CustomAttributesFormField & AdditionalKnownAttributes
+}
+
+/**
+ * Convert the GraphQL custom_attributes field to the CustomAttributesFormField so the data is
+ * correctly mapped to the form.
+ *
+ * So for example it maps this data:
+ *
+ * ```graphql
+ * type Customer {
+ *   """Customer's custom attributes."""
+ *   custom_attributes(attributeCodes: [ID!]): [AttributeValueInterface]
+ * }
+ * ```
+ *
+ * To a format that is compatible with the useForm hook with the `CustomAttributesFormValues` type.
+ */
+export function AttributesValueArray_to_CustomAttributesFormField(
+  attributes: CustomAttributeMetadata[],
+  custom_attributes: (AttributeValueFragment | null | undefined)[] | null | undefined,
+): CustomAttributesFormField {
+  const result: CustomAttributesFormField = {}
+
+  attributes.forEach((metadata) => {
+    const attr = (custom_attributes ?? [])
+      .filter(nonNullable)
+      .find((ca) => ca.code === metadata.code)
+
+    // Handle multiselect
+    if (
+      metadata.frontend_input === 'MULTISELECT' ||
+      attr?.__typename === 'AttributeSelectedOptions'
+    ) {
+      const value =
+        attr?.__typename === 'AttributeSelectedOptions'
+          ? (attr?.selected_options ?? [])
+              .filter(nonNullable)
+              .map((option) => option.value)
+              .filter((v) => !!v)
+          : metadata.options
+              ?.filter(nonNullable)
+              .filter((o) => o.is_default)
+              .map((o) => o.value)
+
+      result[metadata.code] = value
+      return
+    }
+
+    // Handle MULTILINE fields
+    if (metadata.frontend_input === 'MULTILINE' && metadata.index !== undefined) {
+      const value = attr?.value.split('\n')[metadata.index]
+      const valueArray = result[metadata.code] ?? []
+      valueArray[metadata.index] = value ?? metadata.default_value ?? undefined
+      result[metadata.code] = valueArray
+      return
+    }
+
+    // Handle DATE fields
+    if (metadata.frontend_input === 'DATE' && attr?.__typename === 'AttributeValue' && attr.value) {
+      const [date] = attr.value.split(' ')
+      result[metadata.code] = date
+      return
+    }
+
+    // Handle regular fields
+    result[metadata.code] = attr?.value ?? metadata.default_value ?? undefined
+  })
+
+  return result
+}
+
+/**
+ * Covert the CustomAttributesFormField to the AttributeValueInput[] so the data is correctly mapped
+ * To the Magento GraphQL mutation.
+ *
+ * So the CustomAttributesFormField is converted to the input for a mutation which can look lke:s
+ *
+ * ```graphql
+ * input CustomerUpdateInput {
+ *   """The customer's custom attributes."""
+ *   custom_attributes: [AttributeValueInput]
+ * }
+ * ```
+ */
+export function CustomAttributesField_to_AttributeValueInputs(
+  attributes: CustomAttributeMetadata[],
+  custom_attributes: CustomAttributesFormField,
+): AttributeValueInput[] {
+  const values: Record<string, AttributeValueInput> = {}
+
+  attributes.forEach((metadata) => {
+    const attribute_code = metadata.code
+    const value = custom_attributes[metadata.code]
+
+    if (!value) return
+
+    if (
+      (metadata.__typename === 'CustomerAttributeMetadata' &&
+        metadata.frontend_input === 'BOOLEAN') ||
+      typeof value === 'boolean'
+    ) {
+      values[metadata.code] = { attribute_code, value: value ? '1' : '0' }
+      return
+    }
+
+    if (Array.isArray(value)) {
+      if (metadata.frontend_input === 'MULTILINE') {
+        values[metadata.code] = { attribute_code, value: value.join('\n') }
+      }
+
+      if (metadata.frontend_input === 'MULTISELECT') {
+        values[metadata.code] = { attribute_code, value: value.join(',') }
+      }
+    } else {
+      values[metadata.code] = { attribute_code, value }
+    }
+  })
+
+  return Object.values(values)
+}
+
+export type CustomAttributeFormCode = (
+  | 'customer_account_create'
+  | 'customer_account_edit'
+  | 'customer_address_edit'
+  | 'customer_register_address'
+) &
+  (string & {})
+
+/**
+ * Magento attribute code, the actual possible values are deterimined in the database of Magento and
+ * therefor are now known at compile time.
+ */
+export type MagentoAttributeCode = string
+
+/**
+ * For each field a gridArea is set. Used for the name of the field that doesn't contain any dots.
+ * etc.
+ */
+export type GridArea = string
+
+export type CustomAttributeMetadataTypename = CustomAttributeMetadataFragment['__typename']
+
+export type CustomAttributeMetadata<
+  Typename extends CustomAttributeMetadataTypename = CustomAttributeMetadataTypename,
+> = Extract<CustomAttributeMetadataFragment, { __typename: Typename }> & {
+  name: string
+  index?: number
+  gridArea: GridArea
+}
+
+export type UseAttributesFormConfig<
+  Typename extends CustomAttributeMetadata['__typename'] = CustomAttributeMetadata['__typename'],
+> = {
+  /** The form code that is used to retrieve the attributes */
+  formCode: CustomAttributeFormCode | (string & Record<never, never>)
+  /** A list of attribute codes that should be excluded from the form completely */
+  exclude?: MagentoAttributeCode[]
+
+  typename?: Typename
+
+  attributeToName?: Record<MagentoAttributeCode, string>
+
+  customizeAttributes?: (
+    attribute: CustomAttributeMetadata<Typename>,
+  ) => CustomAttributeMetadata<Typename>
+}
+
+/**
+ * Retrieve the available attributes.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const attributes = useAttributesForm({
+ *   formCode: 'customer_account_create',
+ *   exclude: ['email'],
+ * })
+ * ```
+ *
+ * Note: When using this hook, make sure the page also calls preloadAttributesForm in getStaticProps
+ * so the query doesn't need to run in the browser. Example:
+ *
+ * ```tsx:
+ * const client = graphqlSharedClient(context)
+ * await preloadAttributesForm(client, 'customer_account_create')
+ * ```
+ */
+export function useAttributesForm<
+  Typename extends CustomAttributeMetadata['__typename'] = CustomAttributeMetadata['__typename'],
+>({
+  customizeAttributes,
+  ...incomingConfig
+}: UseAttributesFormConfig<Typename>): CustomAttributeMetadata<Typename>[] {
+  const config = useMemoObject(incomingConfig)
+
+  const { data } = useQuery(AttributesFormDocument, {
+    variables: { formCode: config.formCode },
+  })
+
+  return useMemo(() => {
+    const items = (data?.attributesForm?.items ?? [])
+      .filter(nonNullable)
+      .filter((item) => !config.exclude?.includes(item.code))
+      .map((item) => ({
+        ...item,
+        gridArea: item.code,
+        name: config.attributeToName?.[item.code] ?? `custom_attributes.${item.code}`,
+      }))
+
+    /**
+     * We handle frontend_input=MULTILINE input fields a bit different as they have multiple values.
+     * In this case we replace the original field and add multiple fields for the same attributes.
+     */
+    const newItems = items
+      .map((item) => {
+        if (
+          item.frontend_input === 'MULTILINE' &&
+          item.__typename === 'CustomerAttributeMetadata' &&
+          item.multiline_count
+        ) {
+          const defaultValues = item.default_value?.split('\n') ?? []
+          return Array.from({ length: item.multiline_count }, (_, index) => ({
+            ...item,
+            label: index === 0 ? item.label : undefined,
+            index,
+            gridArea: `${item.code}_${index}`,
+            name: `custom_attributes.${item.code}.${index}`,
+            default_value: defaultValues[index] ?? undefined,
+          }))
+        }
+        return [item]
+      })
+      .flat(1)
+
+    return newItems
+      .filter((item): item is CustomAttributeMetadata<Typename> =>
+        config.typename ? item.__typename === config.typename : true,
+      )
+      .map((attribute) => customizeAttributes?.(attribute) || attribute)
+  }, [data?.attributesForm?.items, config, customizeAttributes])
+}
+
+export function extractAttributes(
+  attributes: CustomAttributeMetadataFragment[],
+  attributeCodes: MagentoAttributeCode[],
+): [extracted: CustomAttributeMetadataFragment[], remaining: CustomAttributeMetadataFragment[]] {
+  return [
+    attributes.filter((attribute) => attributeCodes.includes(attribute.code)),
+    attributes.filter((attribute) => !attributeCodes.includes(attribute.code)),
+  ]
+}

package/components/CurrencySymbol/CurrencySymbol.tsx

@@ -3,7 +3,7 @@ import {
   CurrencySymbol as CurrencySymbolBase,
   type CurrencySymbolProps,
 } from '@graphcommerce/next-ui'
-import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
+import { StoreConfigDocument } from '../../graphql'
 
 export function CurrencySymbol(props: CurrencySymbolProps) {
   const { currency } = props

package/components/GlobalHead/GlobalHead.tsx

@@ -1,11 +1,34 @@
 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 '../../queries/StoreConfig.gql'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { getImageProps } from 'next/image'
+import React from 'react'
+import { StoreConfigDocument } from '../../graphql'
 
 export type GlobalHeadProps = Omit<GlobalHeadPropsBase, 'name'>
 
-export function GlobalHead(props: GlobalHeadProps) {
+export const GlobalHead = React.memo<GlobalHeadProps>((props) => {
+  const { children } = props
   const name = useQuery(StoreConfigDocument).data?.storeConfig?.website_name ?? ''
-  return <GlobalHeadBase name={name} {...props} />
-}
+
+  const { head_shortcut_icon, secure_base_media_url } =
+    useQuery(StoreConfigDocument).data?.storeConfig ?? {}
+
+  let icon: string | undefined
+  if (head_shortcut_icon && secure_base_media_url) {
+    icon = getImageProps({
+      src: `${secure_base_media_url}favicon/${head_shortcut_icon}`,
+      alt: 'favicon',
+      width: 16,
+      height: 16,
+    }).props.src
+  }
+
+  return (
+    <GlobalHeadBase name={name} {...props}>
+      <link rel='icon' href={icon ?? '/favicon.ico'} sizes='any' key='icon' />
+      {!icon && <link rel='icon' href='/favicon.svg' type='image/svg+xml' key='icon-svg' />}
+    </GlobalHeadBase>
+  )
+})

package/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 type { MoneyFragment } from '../../graphql'
+import { StoreConfigDocument } from '../../graphql'
 
 type OverridableProps = {
   round?: boolean

package/components/PageMeta/PageMeta.tsx

@@ -1,14 +1,16 @@
 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 '../../queries/StoreConfig.gql'
+import { StoreConfigDocument } from '../../graphql'
 
-export type PageMetaProps = Omit<NextPageMetaProps, 'canonical'> & {
-  canonical?: string
+export type PageMetaProps = Omit<NextPageMetaProps, 'metaDescription' | 'title' | 'canonical'> & {
+  metaDescription?: string | null
+  title?: string | null
+  canonical?: string | null
 }
 
 export function PageMeta(props: PageMetaProps) {
-  const { children, title, ...pageMetaProps } = props
+  const { children, title, metaDescription, metaKeywords, canonical, ...pageMetaProps } = props
   const config = useQuery(StoreConfigDocument)
 
   const prefix = config.data?.storeConfig?.title_prefix ?? ''
@@ -22,7 +24,13 @@ export function PageMeta(props: PageMetaProps) {
   if (suffix) pageTitle += ` ${suffix}`
 
   return (
-    <NextPageMeta title={pageTitle ?? ''} {...pageMetaProps}>
+    <NextPageMeta
+      title={pageTitle}
+      metaDescription={metaDescription ?? config.data?.storeConfig?.default_description}
+      metaKeywords={metaKeywords ?? config.data?.storeConfig?.default_keywords}
+      canonical={canonical ?? undefined}
+      {...pageMetaProps}
+    >
       {children}
     </NextPageMeta>
   )

package/components/PriceModifiers/PriceModifiers.tsx

@@ -0,0 +1,38 @@
+import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
+
+export function sumPriceModifiers(modifiers: PriceModifier[]) {
+  return modifiers.reduce(
+    (price, mod) =>
+      price +
+      (mod.amount ?? 0) * (mod.quantity ?? 1) +
+      (mod.items ?? []).reduce(
+        (itemPrice, item) => itemPrice + (item.amount ?? 0) * (item.quantity ?? 1),
+        0,
+      ),
+    0,
+  )
+}
+
+export type PriceModifierItem = {
+  key: string
+  label: React.ReactNode
+  secondary?: React.ReactNode
+  quantity?: number
+  amount?: number
+}
+
+export type PriceModifier = {
+  position?: number
+  key: string
+  label?: React.ReactNode
+  amount?: number
+  quantity?: number
+  items?: PriceModifierItem[]
+}
+
+export type PriceModifiersProps = {
+  label: React.ReactNode
+  total: number
+  currency: CurrencyEnum | null | undefined
+  modifiers: PriceModifier[]
+}

package/components/PriceModifiers/PriceModifiersList.tsx

@@ -0,0 +1,43 @@
+import { sumPriceModifiers, type PriceModifiersProps } from './PriceModifiers'
+import { PriceModifierListChildItem } from './PriceModifiersListChildItem'
+import { PriceModifierListItem } from './PriceModifiersListItem'
+
+/**
+ * A utility component to display price modifiers in a table format. Used for:
+ *
+ * Abstracts aways rendering from the price calculations.
+ *
+ * Renders a base price if it's different from the row total.
+ *
+ * - `<CartItemActionCard />`
+ * - `<OrderItem />`
+ * - `<InvoiceItem />`
+ * - `<CreditMemoItem />`
+ * - `<ShipmentItem />`
+ * - `<ReturnItem />`
+ */
+export function PriceModifiersList(props: PriceModifiersProps) {
+  const { total: row_total, currency, modifiers, label } = props
+  const basePrice = row_total - sumPriceModifiers(modifiers)
+
+  const sortedModifiers = [...modifiers].sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
+
+  if (modifiers.length === 0) return null
+
+  return (
+    <>
+      {basePrice > 0 && basePrice !== row_total && (
+        <PriceModifierListChildItem
+          key='base-price'
+          label={label}
+          amount={basePrice}
+          currency={currency}
+          color='text.primary'
+        />
+      )}
+      {sortedModifiers.map((mod) => (
+        <PriceModifierListItem key={mod.key} label={mod.label} items={mod.items} />
+      ))}
+    </>
+  )
+}

package/components/PriceModifiers/PriceModifiersListChildItem.tsx

@@ -0,0 +1,48 @@
+import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
+import { extendableComponent, type ExtendableComponentProps } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { Money } from '../Money/Money'
+import type { PriceModifierItem } from './PriceModifiers'
+
+const name = 'PriceModifierListChildItem'
+const slots = ['root', 'label', 'quantity', 'amount'] as const
+const { withState } = extendableComponent(name, slots)
+
+type PriceModifierListChildItemProps = Omit<PriceModifierItem, 'key'> & {
+  currency?: CurrencyEnum | null | undefined
+  color?: 'text.primary' | 'text.secondary'
+} & ExtendableComponentProps<typeof slots>
+
+export function PriceModifierListChildItem(props: PriceModifierListChildItemProps) {
+  const { label, amount = 0, quantity = 1, secondary, currency, color = 'text.secondary' } = props
+
+  const classes = withState(props)
+
+  return (
+    <Box className={classes.root} sx={(theme) => ({ display: 'flex', gap: theme.spacings.xxs })}>
+      <Box className={classes.label} sx={{ color }}>
+        {label}
+      </Box>
+
+      {(quantity > 1 || secondary) && (
+        <Box className={classes.quantity} sx={{ color: 'text.secondary', whiteSpace: 'nowrap' }}>
+          {quantity > 1 && (
+            <>
+              {quantity} &times; <Money value={amount} currency={currency} />
+            </>
+          )}
+          {secondary}
+        </Box>
+      )}
+
+      {amount !== 0 && amount && (
+        <Box
+          className={classes.amount}
+          sx={(theme) => ({ position: 'absolute', right: theme.spacings.xs })}
+        >
+          <Money value={quantity * amount} currency={currency} />
+        </Box>
+      )}
+    </Box>
+  )
+}

package/components/PriceModifiers/PriceModifiersListItem.tsx

@@ -0,0 +1,25 @@
+import { extendableComponent, type ExtendableComponentProps } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import type { PriceModifier } from './PriceModifiers'
+import { PriceModifierListChildItem } from './PriceModifiersListChildItem'
+
+const name = 'PriceModifierListItem'
+const slots = ['root'] as const
+const { withState } = extendableComponent(name, slots)
+
+type PriceModifierListItemProps = ExtendableComponentProps<typeof slots> & PriceModifier
+
+export function PriceModifierListItem(props: PriceModifierListItemProps) {
+  const { label, items } = props
+
+  const classes = withState(props)
+
+  return (
+    <Box className={classes.root}>
+      {label && <PriceModifierListChildItem label={label} color='text.primary' />}
+      {items?.map(({ key: itemKey, ...item }) => (
+        <PriceModifierListChildItem key={itemKey} {...item} color='text.secondary' />
+      ))}
+    </Box>
+  )
+}

package/components/PriceModifiers/index.ts

@@ -0,0 +1,4 @@
+export * from './PriceModifiers'
+export * from './PriceModifiersList'
+export * from './PriceModifiersListItem'
+export * from './PriceModifiersListChildItem'

package/components/StoreSwitcher/StoreSwitcherGroupSelector.tsx

@@ -42,7 +42,7 @@ export function StoreSwitcherGroupSelector(props: StoreSwitcherGroupSelectorProp
           group,
           image: group.country ? <FlagAvatar country={group.country} size='40px' /> : undefined,
           title: <>{group.store_group_name}</>,
-          details: showStores && (
+          details: showStores ? (
             <>
               {group.stores.length <= showStores && (
                 <ListFormat listStyle='short' type='unit'>
@@ -59,7 +59,7 @@ export function StoreSwitcherGroupSelector(props: StoreSwitcherGroupSelectorProp
                 </ListFormat>
               )}
             </>
-          ),
+          ) : undefined,
           disabled: group.disabled,
           value: group.store_group_code,
           slotProps: {

package/components/StoreSwitcher/StoreSwitcherList.tsx

@@ -3,8 +3,8 @@ 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 type { StoreSwitcherListQuery } from '../../graphql'
 import { localeToStore, storeToLocale } from '../../utils/localeToStore'
-import type { StoreSwitcherListQuery } from './StoreSwitcherList.gql'
 
 type Store = NonNullable<NonNullable<StoreSwitcherListQuery['availableStores']>[0]>
 

package/components/StoreSwitcher/index.ts

@@ -2,6 +2,5 @@ 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

@@ -8,10 +8,8 @@ import {
   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'
+import { createContext, useContext, useMemo } from 'react'
+import { type StoreSwitcherListQuery } from '../../graphql'
 
 export type StoreSwitcherStore = RequiredKeys<
   NonNullable<NonNullable<StoreSwitcherListQuery['availableStores']>[0]>,

package/components/StoreSwitcherButton/StoreSwitcherButton.tsx

@@ -4,7 +4,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Button } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import { StoreConfigDocument } from '../../queries/StoreConfig.gql'
+import { StoreConfigDocument } from '../../graphql'
 
 export type StoreSwitcherButtonProps = { sx?: SxProps<Theme> }
 

package/graphql/fragments/AttributeValueFragment.graphql

@@ -0,0 +1,13 @@
+fragment AttributeValueFragment on AttributeValueInterface {
+  __typename
+  code
+  ... on AttributeValue {
+    value
+  }
+  ... on AttributeSelectedOptions {
+    selected_options {
+      label
+      value
+    }
+  }
+}

package/graphql/fragments/CustomAttributeMetadata.graphql

@@ -0,0 +1,15 @@
+fragment CustomAttributeMetadata on CustomAttributeMetadataInterface {
+  __typename
+  code
+  default_value
+  frontend_class
+  frontend_input
+  is_required
+  is_unique
+  label
+  options {
+    is_default
+    label
+    value
+  }
+}

package/{queries → graphql/fragments}/StoreConfigFragment.graphql

@@ -3,21 +3,32 @@ fragment StoreConfigFragment on StoreConfig {
   store_code
   store_name
 
+  header_logo_src
+  logo_width
+  logo_height
+  logo_alt
+
+  copyright
+
   locale
   base_currency_code
+
   default_display_currency_code
 
+  head_shortcut_icon
+  head_includes
   title_suffix
   title_prefix
   title_separator
   default_title
-
-  cms_home_page
+  default_description
+  default_keywords
 
   catalog_default_sort_by
   category_url_suffix
   product_url_suffix
   secure_base_link_url
+  secure_base_media_url
   secure_base_url
 
   root_category_uid

package/graphql/fragments/index.ts

@@ -0,0 +1,5 @@
+export * from './AttributeValueFragment.gql'
+export * from './CustomAttributeMetadata.gql'
+export * from './Money.gql'
+export * from './StoreConfigFragment.gql'
+export * from './StoreConfigQueryFragment.gql'

package/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './fragments'
+export * from './queries'

package/graphql/queries/AttributesForm.graphql

@@ -0,0 +1,13 @@
+query AttributesForm($formCode: String!) {
+  attributesForm(formCode: $formCode) {
+    errors {
+      message
+      type
+    }
+    items {
+      __typename
+      code
+      ...CustomAttributeMetadata
+    }
+  }
+}

package/{queries → graphql/queries}/CountryRegions.graphql

@@ -1,5 +1,6 @@
 query CountryRegions {
   countries {
+    id
     full_name_locale
     two_letter_abbreviation
     three_letter_abbreviation

package/graphql/queries/index.ts

@@ -0,0 +1,5 @@
+export * from './AttributesForm.gql'
+export * from './CountryRegions.gql'
+export * from './HandleRedirect.gql'
+export * from './StoreConfig.gql'
+export * from './StoreSwitcherList.gql'

package/hooks/useFindCountry.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
-import type { CountryRegionsQuery } from '../queries/CountryRegions.gql'
-import { CountryRegionsDocument } from '../queries/CountryRegions.gql'
+import type { CountryRegionsQuery } from '../graphql'
+import { CountryRegionsDocument } from '../graphql'
 
 export function useFindCountry(
   countryCode?: string | null,

package/index.ts

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

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

package/utils/redirectOrNotFound.ts

@@ -3,9 +3,8 @@ 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 type { StoreConfigQuery } from '../queries/StoreConfig.gql'
-import type { HandleRedirectQuery } from './HandleRedirect.gql'
-import { HandleRedirectDocument } from './HandleRedirect.gql'
+import type { HandleRedirectQuery, StoreConfigQuery } from '../graphql'
+import { HandleRedirectDocument } from '../graphql'
 import { defaultLocale } from './localeToStore'
 
 export type RedirectOr404Return = Promise<