@graphcommerce/magento-product-configurable 9.0.0-canary.99 → 9.0.0

package/ConfigurableOptions/ConfigurableOptions.tsx

@@ -1,143 +0,0 @@
-import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/ecommerce-ui'
-import {
-  RenderType,
-  SectionHeader,
-  ToggleButton,
-  ToggleButtonGroup,
-  extendableComponent,
-} from '@graphcommerce/next-ui'
-import { BaseTextFieldProps, FormHelperText, SxProps } from '@mui/material'
-import React from 'react'
-import { Selected, useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
-import { ColorSwatchData } from '../Swatches/ColorSwatchData'
-import { ImageSwatchData } from '../Swatches/ImageSwatchData'
-import { TextSwatchData } from '../Swatches/TextSwatchData'
-import { SwatchTypeRenderer, SwatchSize } 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' as const
-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,185 +0,0 @@
-import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
-import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Money } from '@graphcommerce/magento-store'
-import {
-  Button,
-  extendableComponent,
-  iconChevronRight,
-  MessageSnackbar,
-  IconSvg,
-} from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
-import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
-import React from 'react'
-import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
-import cheapestVariant from '../ConfigurableContext/cheapestVariant'
-import {
-  ConfigurableOptionsInput,
-  ConfigurableOptionsInputProps,
-} from '../ConfigurableOptions/ConfigurableOptions'
-import {
-  ConfigurableProductAddToCartDocument,
-  ConfigurableProductAddToCartMutationVariables,
-} from '../graphql/ConfigurableProductAddToCart.gql'
-
-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' as const
-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>
-  )
-}