@graphcommerce/magento-product-configurable 9.0.0-canary.114 → 9.0.0-canary.116

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 9.0.0-canary.116
+
+## 9.0.0-canary.115
+
 ## 9.0.0-canary.114
 
 ## 9.0.0-canary.113

package/ConfigurableCartItem/ConfigurableCartItem.tsx

@@ -3,6 +3,10 @@ import { CartItem } from '@graphcommerce/magento-cart-items'
 import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
 import { OptionsList } from './OptionsList'
 
+/**
+ * @deprecated
+ * @public
+ */
 export function ConfigurableCartItem(props: ConfigurableCartItemFragment & CartItemProps) {
   const { configurable_options, configured_variant, product } = props
   return (

package/index.ts

@@ -1,7 +1,5 @@
 export * from './components'
 export * from './ConfigurableCartItem/ConfigurableCartItem'
-export * from './ConfigurableContext/ConfigurableContext'
-export * from './ConfigurableProductAddToCart/ConfigurableProductAddToCart'
 export * from './ConfigurableProductPage.gql'
 export * from './graphql'
 export * from './hooks'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.114",
+  "version": "9.0.0-canary.116",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,23 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.114",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.114",
-    "@graphcommerce/graphql": "^9.0.0-canary.114",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.114",
-    "@graphcommerce/image": "^9.0.0-canary.114",
-    "@graphcommerce/lingui-next": "9.0.0-canary.114",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.114",
-    "@graphcommerce/magento-cart-items": "^9.0.0-canary.114",
-    "@graphcommerce/magento-category": "^9.0.0-canary.114",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.114",
-    "@graphcommerce/magento-product": "^9.0.0-canary.114",
-    "@graphcommerce/magento-product-simple": "^9.0.0-canary.114",
-    "@graphcommerce/magento-store": "^9.0.0-canary.114",
-    "@graphcommerce/next-ui": "^9.0.0-canary.114",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.114",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.114",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.114",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.116",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/graphql": "^9.0.0-canary.116",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.116",
+    "@graphcommerce/image": "^9.0.0-canary.116",
+    "@graphcommerce/lingui-next": "9.0.0-canary.116",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.116",
+    "@graphcommerce/magento-cart-items": "^9.0.0-canary.116",
+    "@graphcommerce/magento-category": "^9.0.0-canary.116",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.116",
+    "@graphcommerce/magento-product": "^9.0.0-canary.116",
+    "@graphcommerce/magento-product-simple": "^9.0.0-canary.116",
+    "@graphcommerce/magento-store": "^9.0.0-canary.116",
+    "@graphcommerce/next-ui": "^9.0.0-canary.116",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.116",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.116",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/ConfigurableContext/ConfigurableContext.tsx

@@ -1,157 +0,0 @@
-import type { Context, Dispatch, SetStateAction } from 'react'
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
-import type { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
-import cheapestVariant from './cheapestVariant'
-
-export type ConfigurableProductFormProps = ConfigurableProductFormFragment & {
-  sku: string
-  children?: React.ReactNode
-}
-
-export type Selected = { [attrCode: string]: number }
-export type Variants = NonNullable<ConfigurableProductFormProps['variants']>
-type GetVariants = (values?: Selected) => Variants
-type GetUids = (values?: Selected) => string[]
-
-type ConfigurableContext = {
-  selection: Selected
-  variants: Variants
-  cheapest: Variants[0]
-  select: Dispatch<SetStateAction<Selected>>
-  options: ConfigurableProductFormFragment['configurable_options']
-  getVariants: GetVariants
-  getUids: GetUids
-}
-const contexts: { [sku: string]: Context<ConfigurableContext> } = {}
-
-function configurableContext(sku: string): Context<ConfigurableContext> {
-  if (contexts?.[sku]) return contexts[sku]
-  contexts[sku] = createContext<ConfigurableContext>({
-    selection: {},
-    variants: [],
-    cheapest: {},
-    select: () => {},
-    options: undefined,
-    getVariants: () => [],
-    getUids: () => [],
-  })
-
-  return contexts[sku]
-}
-
-type AttributeTree = {
-  code: string
-  values: AttributeValues
-}
-type AttributeValues = {
-  [index: string]: {
-    variants: NonNullable<ConfigurableProductFormProps['variants']>
-    attribute?: AttributeTree
-  }
-}
-
-function generateAttrTree(
-  idx: number,
-  options: ConfigurableProductFormProps['configurable_options'],
-  variants: ConfigurableProductFormProps['variants'],
-  selected: Selected,
-  tree?: AttributeTree,
-) {
-  const attribute = options?.[idx]
-  if (!attribute || !attribute.attribute_code) return tree
-
-  const attributeTree: AttributeTree = { code: attribute.attribute_code, values: {} }
-
-  attribute.values?.forEach((val) => {
-    if (!val?.uid) return
-    const newSelected = { ...selected, [attributeTree.code]: [val.uid] } as Selected
-
-    const filteredVariants = variants?.filter(
-      (variant) =>
-        !!variant?.attributes?.find(
-          (attr) => attr?.code === attribute.attribute_code && val.uid === attr?.uid,
-        ),
-    )
-
-    attributeTree.values[val.uid] = {
-      variants: filteredVariants ?? [],
-      attribute: generateAttrTree(idx + 1, options, filteredVariants, newSelected),
-    }
-  })
-
-  return attributeTree
-}
-
-function traverseAttrTree(selection: Selected, attrTree: AttributeTree | undefined): Variants {
-  if (!attrTree) return []
-
-  const id = selection?.[attrTree.code]
-  const attrVal = id ? attrTree.values[id] : undefined
-
-  // We have a request, but isn't found in the current tree node
-  if (id && !attrVal) return []
-
-  if (attrVal?.attribute) return traverseAttrTree(selection, attrVal.attribute)
-  if (attrVal?.variants) return attrVal.variants
-
-  const attrValues = Object.entries(attrTree.values)
-  const variantList: NonNullable<ConfigurableProductFormProps['variants']> = []
-
-  attrValues.forEach(([optionId, attrVal2]) => {
-    variantList.push(
-      ...(attrVal2.attribute
-        ? traverseAttrTree({ ...selection, [attrTree.code]: Number(optionId) }, attrVal2.attribute)
-        : attrVal2.variants),
-    )
-  })
-
-  return variantList
-}
-
-export function ConfigurableContextProvider(props: ConfigurableProductFormProps) {
-  const { children, sku, configurable_options, variants: providedVariants } = props
-  const [selection, select] = useState<Selected>({})
-
-  if (!configurable_options || !providedVariants)
-    throw Error('please provide configurabl_options and variants')
-
-  const lookupTree = useMemo(
-    () => generateAttrTree(0, configurable_options, providedVariants, {}),
-    [configurable_options, providedVariants],
-  )
-
-  const getVariants: GetVariants = useCallback(
-    (options: Selected = {}) => traverseAttrTree(options, lookupTree),
-    [lookupTree],
-  )
-
-  const getUids: GetUids = useCallback(
-    (options: Selected = {}) =>
-      (getVariants(options as unknown as Selected) ?? [])
-        .map((variant) => (variant?.attributes?.map((attr) => attr?.uid) ?? []) as string[])
-        .flat(),
-    [getVariants],
-  )
-
-  const context = configurableContext(sku)
-  const variants = getVariants(selection)
-
-  const value = useMemo(
-    () => ({
-      selection,
-      variants,
-      cheapest: cheapestVariant(variants),
-      select,
-      getVariants,
-      getUids,
-      options: configurable_options,
-    }),
-    [configurable_options, getUids, getVariants, selection, variants],
-  )
-
-  return <context.Provider value={value}>{children}</context.Provider>
-}
-
-export function useConfigurableContext(sku: string): ConfigurableContext {
-  return useContext(configurableContext(sku))
-}

package/ConfigurableContext/cheapestVariant.ts

@@ -1,14 +0,0 @@
-import type { ConfigurableProductFormFragment } from './ConfigurableProductForm.gql'
-
-type Variants = NonNullable<ConfigurableProductFormFragment['variants']>
-
-export default function cheapestVariant(variants: Variants): Variants[0] {
-  if (!variants.length) return null
-  const cheapest = variants?.reduce((prev, curr) =>
-    (curr?.product?.price_range.minimum_price.final_price.value ?? 0) <
-    (prev?.product?.price_range.minimum_price.final_price.value ?? 0)
-      ? curr
-      : prev,
-  )
-  return cheapest
-}

package/ConfigurableOptions/ConfigurableOptions.tsx

@@ -1,146 +0,0 @@
-import type { FieldErrors, UseControllerProps } from '@graphcommerce/ecommerce-ui'
-import { Controller } from '@graphcommerce/ecommerce-ui'
-import {
-  RenderType,
-  SectionHeader,
-  ToggleButton,
-  ToggleButtonGroup,
-  extendableComponent,
-} from '@graphcommerce/next-ui'
-import type { BaseTextFieldProps, SxProps } from '@mui/material'
-import { FormHelperText } from '@mui/material'
-import React from 'react'
-import type { Selected } from '../ConfigurableContext/ConfigurableContext'
-import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
-import { ColorSwatchData } from '../Swatches/ColorSwatchData'
-import { ImageSwatchData } from '../Swatches/ImageSwatchData'
-import { TextSwatchData } from '../Swatches/TextSwatchData'
-import type { SwatchSize, SwatchTypeRenderer } from '../Swatches/types'
-
-export type ConfigurableOptionsInputProps = {
-  sku: string
-  errors?: FieldErrors
-  size?: SwatchSize
-  sx?: SxProps
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-} & UseControllerProps<any> &
-  Pick<BaseTextFieldProps, 'FormHelperTextProps' | 'helperText'> & {
-    optionEndLabels?: Record<string, React.ReactNode>
-  }
-
-const renderer: SwatchTypeRenderer = { TextSwatchData, ImageSwatchData, ColorSwatchData }
-
-const compName = 'ConfigurableOptionsInput'
-const parts = ['buttonGroup', 'button', 'helperText'] as const
-const { classes } = extendableComponent(compName, parts)
-
-export function ConfigurableOptionsInput(props: ConfigurableOptionsInputProps) {
-  const {
-    sku,
-    FormHelperTextProps,
-    name,
-    defaultValue,
-    errors,
-    helperText,
-    optionEndLabels,
-    size = 'large',
-    sx,
-    ...controlProps
-  } = props
-
-  const { options, selection, select, getVariants } = useConfigurableContext(sku)
-
-  return (
-    <>
-      {options?.map((option) => {
-        if (!option?.uid || !option.attribute_code) return null
-
-        const { attribute_code } = option
-        const error = errors?.[attribute_code]
-
-        return (
-          <Controller
-            key={option.uid}
-            defaultValue={selection[attribute_code] ?? ''}
-            name={`${name}[${attribute_code}]`}
-            {...controlProps}
-            render={({
-              field: { onChange, value, name: inputName, ref, onBlur },
-              fieldState: { error: errorHelperText },
-            }) => (
-              <>
-                <SectionHeader
-                  labelLeft={option?.label}
-                  labelRight={optionEndLabels?.[option?.attribute_code ?? '']}
-                />
-                <ToggleButtonGroup
-                  defaultValue={selection[attribute_code] ?? ''}
-                  required
-                  exclusive
-                  onChange={(_, val: string | number) => {
-                    onChange(val)
-                    select((prev) => ({ ...prev, [attribute_code]: val }) as Selected)
-                  }}
-                  ref={ref}
-                  onBlur={onBlur}
-                  value={value}
-                  className={classes.buttonGroup}
-                  size={size}
-                  sx={sx}
-                >
-                  {option?.values?.map((val) => {
-                    if (!val?.uid || !option.attribute_code) return null
-
-                    // Fall back to text swatch if no swatch is given
-                    const swatch_data = val.swatch_data ?? {
-                      __typename: 'TextSwatchData',
-                      value: val.store_label,
-                    }
-
-                    const copySelection = { ...selection }
-                    delete copySelection[attribute_code]
-
-                    const itemVariant = getVariants(copySelection).find((variant) =>
-                      variant?.attributes?.find((attribute) => attribute?.uid === val.uid),
-                    )
-
-                    return (
-                      <ToggleButton
-                        key={val.uid}
-                        value={val.uid ?? ''}
-                        name={inputName}
-                        className={classes.button}
-                        disabled={!itemVariant}
-                        size={size}
-                      >
-                        <RenderType
-                          renderer={renderer}
-                          {...val}
-                          {...swatch_data}
-                          price={itemVariant?.product?.price_range.minimum_price.final_price}
-                          size={size}
-                        />
-                      </ToggleButton>
-                    )
-                  })}
-                </ToggleButtonGroup>
-                {error && (
-                  <FormHelperText
-                    error
-                    {...FormHelperTextProps}
-                    className={classes.helperText}
-                    sx={{
-                      position: 'absolute',
-                    }}
-                  >
-                    {`${option.label} is ${errorHelperText?.type}`}
-                  </FormHelperText>
-                )}
-              </>
-            )}
-          />
-        )
-      })}
-    </>
-  )
-}

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -1,182 +0,0 @@
-import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
-import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Money } from '@graphcommerce/magento-store'
-import {
-  Button,
-  IconSvg,
-  MessageSnackbar,
-  extendableComponent,
-  iconChevronRight,
-} from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
-import type { SxProps, Theme } from '@mui/material'
-import { Alert, Box, Divider, Typography } from '@mui/material'
-import React from 'react'
-import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
-import cheapestVariant from '../ConfigurableContext/cheapestVariant'
-import type { ConfigurableOptionsInputProps } from '../ConfigurableOptions/ConfigurableOptions'
-import { ConfigurableOptionsInput } from '../ConfigurableOptions/ConfigurableOptions'
-import type { ConfigurableProductAddToCartMutationVariables } from '../graphql/ConfigurableProductAddToCart.gql'
-import { ConfigurableProductAddToCartDocument } from '../graphql/ConfigurableProductAddToCart.gql'
-
-export type ConfigurableProductAddToCartProps = {
-  variables: Omit<ConfigurableProductAddToCartMutationVariables, 'cartId' | 'selectedOptions'>
-  name: string
-  optionEndLabels?: Record<string, React.ReactNode>
-  children?: React.ReactNode
-  additionalButtons?: React.ReactNode
-  sx?: SxProps<Theme>
-  optionsProps?: Omit<
-    ConfigurableOptionsInputProps,
-    'name' | 'sku' | 'control' | 'rules' | 'errors' | 'optionEndLabels'
-  >
-}
-
-const compName = 'ConfigurableOptionsInput'
-const parts = ['form', 'button', 'finalPrice', 'quantity', 'divider', 'buttonWrapper'] as const
-const { classes } = extendableComponent(compName, parts)
-
-/**
- * @deprecated
- */
-export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCartProps) {
-  const {
-    name,
-    children,
-    variables,
-    optionEndLabels,
-    optionsProps,
-    additionalButtons,
-    sx = [],
-    ...buttonProps
-  } = props
-
-  const { getVariants, selection } = useConfigurableContext(variables.sku)
-
-  const form = useFormGqlMutationCart(ConfigurableProductAddToCartDocument, {
-    defaultValues: { ...variables },
-    onBeforeSubmit: ({ selectedOptions, ...vars }) => ({
-      ...vars,
-      selectedOptions: Object.values(selectedOptions),
-    }),
-  })
-
-  const { handleSubmit, formState, required, control, error, data } = form
-  const submitHandler = handleSubmit(() => {})
-
-  return (
-    <Box
-      component='form'
-      onSubmit={submitHandler}
-      noValidate
-      className={classes.form}
-      sx={[
-        {
-          width: '100%',
-        },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.sm} 0` })} />
-      <ConfigurableOptionsInput
-        name='selectedOptions'
-        sku={variables.sku}
-        control={control}
-        rules={{ required: required.selectedOptions }}
-        errors={formState.errors}
-        optionEndLabels={optionEndLabels}
-        {...optionsProps}
-      />
-
-      <NumberFieldElement
-        variant='outlined'
-        error={formState.isSubmitted && !!formState.errors.quantity}
-        required={required.quantity}
-        inputProps={{ min: 1 }}
-        name='quantity'
-        rules={{ required: required.quantity }}
-        control={control}
-        helperText={formState.isSubmitted && formState.errors.quantity?.message}
-        // disabled={loading}
-        size='small'
-        className={classes.quantity}
-        sx={(theme) => ({ marginTop: theme.spacings.sm })}
-      />
-      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.sm} 0` })} />
-      <Typography
-        component='div'
-        variant='h3'
-        className={classes.finalPrice}
-        sx={(theme) => ({ marginTop: theme.spacings.sm })}
-      >
-        <Money
-          {...cheapestVariant(getVariants(selection))?.product?.price_range.minimum_price
-            .final_price}
-        />
-      </Typography>
-      {children}
-      <Box
-        sx={(theme) => ({
-          display: 'flex',
-          alignItems: 'center',
-          columnGap: theme.spacings.xs,
-        })}
-        className={classes.buttonWrapper}
-      >
-        <Button
-          type='submit'
-          loading={formState.isSubmitting}
-          color='primary'
-          variant='pill'
-          size='large'
-          className={classes.button}
-          {...buttonProps}
-          sx={(theme) => ({
-            marginTop: theme.spacings.sm,
-            marginBottom: theme.spacings.sm,
-            width: '100%',
-          })}
-        >
-          <Trans>Add to Cart</Trans>
-        </Button>
-        {additionalButtons}
-      </Box>
-
-      <ApolloCartErrorAlert error={error} />
-
-      {data?.addProductsToCart?.user_errors.map((e) => (
-        <Box key={e?.code}>
-          <Alert severity='error'>{e?.message}</Alert>
-        </Box>
-      ))}
-
-      <MessageSnackbar
-        open={
-          !formState.isSubmitting &&
-          formState.isSubmitSuccessful &&
-          !error?.message &&
-          !data?.addProductsToCart?.user_errors?.length
-        }
-        variant='pill'
-        severity='success'
-        autoHide
-        action={
-          <Button
-            href='/cart'
-            id='view-shopping-cart-button'
-            size='medium'
-            variant='pill'
-            color='secondary'
-            endIcon={<IconSvg src={iconChevronRight} />}
-          >
-            <Trans>View shopping cart</Trans>
-          </Button>
-        }
-      >
-        <Trans>
-          <strong>{name}</strong> has been added to your shopping cart!
-        </Trans>
-      </MessageSnackbar>
-    </Box>
-  )
-}