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

package/components/CreditMemo/CreditMemoTotals.tsx

@@ -0,0 +1,122 @@
+import { Money } from '@graphcommerce/magento-store'
+import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, lighten, Typography } from '@mui/material'
+import type { CreditMemoFragment } from './CreditMemo.gql'
+
+export type CreditMemoTotalsProps = {
+  creditMemo: CreditMemoFragment
+  sx?: SxProps<Theme>
+}
+
+const componentName = 'CreditMemoTotals'
+const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function CreditMemoTotals(props: CreditMemoTotalsProps) {
+  const { creditMemo, sx = [] } = props
+  const { total } = creditMemo
+
+  if (!total) return null
+
+  return (
+    <Box
+      className={classes.totalsContainer}
+      sx={sxx(
+        (theme) => ({
+          my: theme.spacings.md,
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 3,
+            theme.shape.borderRadius * 5,
+            theme.breakpoints.values,
+          ),
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
+        }),
+        sx,
+      )}
+    >
+      <Box className={classes.totalsRow} sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Typography>
+          <Trans>Subtotal</Trans>
+        </Typography>
+        <Money {...total.subtotal} />
+      </Box>
+
+      {total.discounts?.map((discount) => (
+        <Box
+          className={classes.totalsRow}
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+          key={`discount-${discount?.label}`}
+        >
+          <Typography>{discount?.label}</Typography>
+          {discount?.amount && (
+            <Money {...discount.amount} value={(discount.amount.value ?? 0) * -1} />
+          )}
+        </Box>
+      ))}
+
+      {total.total_shipping && (
+        <Box
+          className={classes.totalsRow}
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+        >
+          <Typography>
+            <Trans>Shipping</Trans>
+          </Typography>
+          <Money {...total.total_shipping} />
+        </Box>
+      )}
+
+      {total.adjustment && (
+        <Box
+          className={classes.totalsRow}
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+        >
+          <Typography>
+            <Trans>Adjustment</Trans>
+          </Typography>
+          <Money {...total.adjustment} />
+        </Box>
+      )}
+
+      <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
+
+      <Box
+        className={classes.totalsRow}
+        sx={(theme) => ({
+          display: 'flex',
+          justifyContent: 'space-between',
+          color: theme.palette.primary.main,
+        })}
+      >
+        <Typography>
+          <Trans>Refund total</Trans>
+        </Typography>
+        <Money {...total.grand_total} />
+      </Box>
+
+      {total.taxes?.map((tax) => (
+        <Box
+          key={tax?.title}
+          className={classes.totalsVat}
+          sx={(theme) => ({
+            display: 'flex',
+            justifyContent: 'space-between',
+            color: theme.palette.text.disabled,
+          })}
+        >
+          <Typography>
+            <Trans>Including {tax?.title}</Trans>
+          </Typography>
+          <Money {...tax?.amount} />
+        </Box>
+      ))}
+    </Box>
+  )
+}

package/components/CreditMemo/index.ts

@@ -0,0 +1,8 @@
+export * from './CreditMemo.gql'
+export * from './CreditMemoCard'
+export * from './CreditMemoCard.gql'
+export * from './CreditMemoDetails'
+export * from './CreditMemoItem'
+export * from './CreditMemoItem.gql'
+export * from './CreditMemoItems'
+export * from './CreditMemoTotals'

package/components/CustomerForms/CustomerAttributeField.tsx

@@ -0,0 +1,112 @@
+import { ActionCardListForm, SwitchElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import type { CustomAttributeMetadata } from '@graphcommerce/magento-store'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
+import type { Control, FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
+import { MenuItem, type SxProps, type Theme } from '@mui/material'
+import {
+  customerAttributeInputType,
+  customerAttributeValidationRules,
+} from './customerAttributeFieldHelpers'
+
+function assertUnreachable(renderer: never): never {
+  throw new Error(`Please define a valid renderer for ${renderer}`)
+}
+
+export type CustomerAttributeFieldProps<TFieldValues extends FieldValues = FieldValues> = {
+  control: Control<TFieldValues>
+  metadata: CustomAttributeMetadata<'CustomerAttributeMetadata'>
+  helperText?: string
+  disabled?: boolean
+  sx?: SxProps<Theme>
+}
+
+export function CustomerAttributeField<TFieldValues extends FieldValues = FieldValues>(
+  props: CustomerAttributeFieldProps<TFieldValues>,
+) {
+  const { control, metadata, helperText, disabled, sx } = props
+  const { label, code, is_required, is_unique, options, frontend_input, gridArea, name } = metadata
+
+  const fieldName = name as FieldPath<TFieldValues>
+
+  const frontendInput = frontend_input ?? 'UNDEFINED'
+  switch (frontendInput) {
+    case 'TEXT':
+    case 'TEXTAREA':
+    case 'SELECT':
+    case 'DATE':
+    case 'DATETIME':
+    case 'MULTILINE':
+      return (
+        <TextFieldElement<TFieldValues>
+          key={code}
+          label={label}
+          control={control}
+          name={fieldName}
+          type={customerAttributeInputType(metadata)}
+          required={is_required}
+          rules={customerAttributeValidationRules(metadata)}
+          multiline={frontendInput === 'TEXTAREA'}
+          minRows={frontendInput === 'TEXTAREA' ? 4 : undefined}
+          select={frontend_input === 'SELECT'}
+          InputLabelProps={{
+            shrink: frontendInput === 'DATE' || frontendInput === 'DATETIME',
+          }}
+          disabled={disabled}
+          helperText={is_unique ? t`${label} must be unique` : helperText}
+          sx={sxx(sx, { gridArea })}
+          data-field={gridArea}
+        >
+          {options.map((option) => (
+            <MenuItem key={option?.value} value={option?.value}>
+              {option?.label}
+            </MenuItem>
+          ))}
+        </TextFieldElement>
+      )
+    case 'BOOLEAN':
+      return (
+        <SwitchElement<TFieldValues>
+          key={code}
+          label={label}
+          control={control}
+          name={fieldName}
+          required={is_required}
+          rules={customerAttributeValidationRules(metadata)}
+          disabled={disabled}
+          sx={sxx(sx, { gridArea })}
+          data-field={gridArea}
+        />
+      )
+    case 'MULTISELECT':
+      return (
+        <ActionCardListForm<ActionCardProps, TFieldValues>
+          key={code}
+          control={control}
+          name={fieldName}
+          required={is_required}
+          multiple
+          render={ActionCard}
+          items={filterNonNullableKeys(metadata.options).map((option) => ({
+            value: option.value,
+            title: option.label,
+          }))}
+          sx={sxx(sx, { gridArea })}
+          data-field={gridArea}
+        />
+      )
+    case 'FILE':
+    case 'GALLERY':
+    case 'HIDDEN':
+    case 'IMAGE':
+    case 'MEDIA_IMAGE':
+    case 'PRICE':
+    case 'UNDEFINED':
+    case 'WEIGHT':
+      console.log(`${code}:${frontendInput} is not implemented`)
+      return null
+    default:
+      return assertUnreachable(frontendInput)
+  }
+}

package/components/CustomerForms/CustomerAttributeMetadata.graphql

@@ -0,0 +1,9 @@
+fragment CustomerAttributeMetadata on CustomerAttributeMetadata
+@inject(into: ["CustomAttributeMetadata"]) {
+  input_filter
+  multiline_count
+  validate_rules {
+    name
+    value
+  }
+}

package/components/CustomerForms/CustomerUpdateForm.tsx

@@ -0,0 +1,65 @@
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
+import {
+  AttributesFormAutoLayout,
+  type AttributeFormAutoLayoutProps,
+} from '@graphcommerce/magento-store'
+import { Button, FormActions, type ButtonProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { styled } from '@mui/material'
+import type { ComponentProps } from 'react'
+import { CustomerAttributeField } from './CustomerAttributeField'
+import { nameFieldset } from './nameFieldset'
+import {
+  useCustomerUpdateForm,
+  type UpdateCustomerFormValues,
+  type UseCustomerUpdateFormConfig,
+} from './useCustomerUpdateForm'
+
+const Form = styled('form')({})
+
+export type CustomerUpdateFormProps = Pick<
+  AttributeFormAutoLayoutProps<UpdateCustomerFormValues, 'CustomerAttributeMetadata'>,
+  'fieldsets' | 'render'
+> & {
+  slotProps?: {
+    form: Omit<ComponentProps<typeof Form>, 'onSubmit' | 'noValidate'>
+    formLayout?: Omit<
+      AttributeFormAutoLayoutProps<UpdateCustomerFormValues, 'CustomerAttributeMetadata'>,
+      'control' | 'attributes'
+    >
+    formActions?: ComponentProps<typeof FormActions>
+    button?: Omit<ButtonProps, 'type' | 'loading'>
+  }
+} & UseCustomerUpdateFormConfig
+
+export function CustomerUpdateForm(props: CustomerUpdateFormProps) {
+  const { slotProps, fieldsets, render, ...config } = props
+
+  const { control, handleSubmit, formState, error, attributes } = useCustomerUpdateForm(config)
+  const submit = handleSubmit(() => {})
+
+  return (
+    <Form onSubmit={submit} noValidate {...slotProps?.form}>
+      <AttributesFormAutoLayout
+        attributes={attributes}
+        control={control}
+        render={render ?? CustomerAttributeField}
+        fieldsets={fieldsets ?? [nameFieldset(attributes)]}
+        {...slotProps?.formLayout}
+      />
+      <FormActions {...slotProps?.formActions}>
+        <Button
+          type='submit'
+          color='primary'
+          variant='pill'
+          size='large'
+          loading={formState.isSubmitting}
+          {...slotProps?.button}
+        >
+          <Trans id='Save changes' />
+        </Button>
+      </FormActions>
+      <ApolloErrorSnackbar error={error} />
+    </Form>
+  )
+}

package/components/CustomerForms/UseCustomerCreateForm.graphql

@@ -0,0 +1,7 @@
+mutation UseCustomerCreateForm($input: CustomerCreateInput!) {
+  createCustomerV2(input: $input) {
+    customer {
+      ...CustomerInfo
+    }
+  }
+}

package/components/CustomerForms/UseCustomerUpdateForm.graphql

@@ -0,0 +1,7 @@
+mutation UseCustomerUpdateForm($input: CustomerUpdateInput!) {
+  updateCustomerV2(input: $input) {
+    customer {
+      ...CustomerInfo
+    }
+  }
+}

package/components/CustomerForms/customerAttributeFieldHelpers.ts

@@ -0,0 +1,127 @@
+import type { CustomAttributeMetadata } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import type { ControllerProps, FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
+import type { HTMLInputTypeAttribute } from 'react'
+
+export type InputValidationValue =
+  | 'alphanumeric'
+  | 'alphanum-with-spaces'
+  | 'numeric'
+  | 'alpha'
+  | 'url'
+  | 'email'
+  | 'length'
+  | 'date'
+
+function assertUnreachable(renderer: never): never {
+  throw new Error(`Please define a valid renderer for ${renderer}`)
+}
+
+export function customerAttributeValidationRules<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  metadata: CustomAttributeMetadata<'CustomerAttributeMetadata'>,
+): ControllerProps<TFieldValues, TName>['rules'] {
+  const { label, is_required, validate_rules } = metadata
+
+  return filterNonNullableKeys(validate_rules, ['name', 'value']).reduce<
+    ControllerProps<TFieldValues, TName>['rules']
+  >(
+    (current, validateRule) => {
+      const inputValidation = (validateRule.value ?? 'length') as InputValidationValue
+
+      switch (validateRule.name) {
+        case 'MAX_TEXT_LENGTH':
+          return {
+            ...current,
+            maxLength: {
+              value: parseInt(validateRule.value, 10),
+              message: t`The maximum length is ${validateRule.value}`,
+            },
+          }
+        case 'MIN_TEXT_LENGTH':
+          return {
+            ...current,
+            minLength: {
+              value: parseInt(validateRule.value, 10),
+              message: t`The minimum length is ${validateRule.value}`,
+            },
+          }
+        case 'INPUT_VALIDATION':
+          switch (inputValidation) {
+            case 'email':
+            case 'length':
+            case 'date':
+              // Handled by setting the input type of the field
+              return current
+            case 'alpha':
+              return {
+                ...current,
+                pattern: { value: /^[A-Za-z]+$/, message: t`Only alpha values allowed` },
+              }
+            case 'alphanumeric':
+              return {
+                ...current,
+                pattern: { value: /^[A-Za-z0-9]+$/, message: t`Only alphanumeric values allowed` },
+              }
+            case 'numeric':
+              return {
+                ...current,
+                pattern: { value: /^[0-9]+$/, message: t`Only numeric values allowed` },
+              }
+            case 'alphanum-with-spaces':
+              return {
+                ...current,
+                pattern: {
+                  value: /^[A-Za-z0-9\s]+$/,
+                  message: t`Only alphanumeric values with spaces allowed`,
+                },
+              }
+            case 'url':
+              return {
+                ...current,
+                pattern: {
+                  value: /^(https?):\/\/[^\s/$.?#].[^\s]*$/,
+                  message: t`Please enter a valid URL`,
+                },
+              }
+            default:
+              return assertUnreachable(inputValidation)
+          }
+        case 'FILE_EXTENSIONS':
+        case 'MAX_IMAGE_HEIGHT':
+        case 'MAX_IMAGE_WIDTH':
+        case 'MAX_FILE_SIZE':
+        case 'DATE_RANGE_MAX':
+        case 'DATE_RANGE_MIN':
+          return current
+        default:
+          return assertUnreachable(validateRule.name)
+      }
+    },
+    {
+      required: {
+        value: is_required,
+        message: t`${label ?? t`This field`} is required`,
+      },
+    },
+  )
+}
+
+export function customerAttributeInputType(
+  metadata: CustomAttributeMetadata<'CustomerAttributeMetadata'>,
+): React.HTMLInputTypeAttribute {
+  if (metadata.frontend_input === 'DATE') return 'date'
+  if (metadata.frontend_input === 'DATETIME') return 'datetime-local'
+
+  const inputValidation =
+    metadata.__typename === 'CustomerAttributeMetadata' &&
+    (metadata.validate_rules?.find((r) => r?.name === 'INPUT_VALIDATION')?.value as
+      | InputValidationValue
+      | undefined)
+  let type = 'text'
+  if (inputValidation === 'email') type = 'email'
+  return type
+}

package/components/CustomerForms/index.ts

@@ -0,0 +1,8 @@
+export * from './CustomerAttributeField'
+export * from './CustomerAttributeMetadata.gql'
+export * from './CustomerUpdateForm'
+export * from './nameFieldset'
+export * from './useCustomerCreateForm'
+export * from './UseCustomerCreateForm.gql'
+export * from './useCustomerUpdateForm'
+export * from './UseCustomerUpdateForm.gql'

package/components/CustomerForms/nameFieldset.tsx

@@ -0,0 +1,32 @@
+import {
+  extractAttributes,
+  type AttributeFormAutoLayoutFieldset,
+  type CustomAttributeMetadata,
+} from '@graphcommerce/magento-store'
+import { Trans } from '@lingui/macro'
+
+export function nameFieldset(
+  attributes: CustomAttributeMetadata[],
+  withLabel = true,
+): AttributeFormAutoLayoutFieldset {
+  const nameFields = extractAttributes(attributes, [
+    'prefix',
+    'firstname',
+    'middlename',
+    'lastname',
+    'suffix',
+  ])[0].map((f) => f.code)
+
+  const additional = extractAttributes(attributes, ['dob', 'gender'])[0].map((f) => f.code)
+
+  return {
+    label: withLabel ? <Trans id='Name'>Name</Trans> : undefined,
+    gridAreas: [...nameFields, ...additional],
+    // xs is shown in one column by default
+    sx: {
+      gridTemplateAreas: {
+        md: [`"${nameFields.join(' ')}"`, `"${additional.join(' ')}"`].join(' '),
+      },
+    },
+  }
+}

package/components/CustomerForms/useCustomerCreateForm.ts

@@ -0,0 +1,83 @@
+import {
+  CustomAttributesField_to_AttributeValueInputs,
+  useAttributesForm,
+  type CustomAttributeMetadata,
+  type CustomAttributesFormValues,
+  type UseAttributesFormConfig,
+} from '@graphcommerce/magento-store'
+import { useFormGqlMutation, type UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import type { MutationHookOptions } from '@apollo/client'
+import {
+  UseCustomerCreateFormDocument,
+  type UseCustomerCreateFormMutation,
+  type UseCustomerCreateFormMutationVariables,
+} from './UseCustomerCreateForm.gql'
+
+export type CreateCustomerFormValues = UseCustomerCreateFormMutationVariables &
+  CustomAttributesFormValues & { confirmPassword?: string }
+
+/** Used for onBeforeSubmit of useFormGqlMutation */
+export function CreateCustomerFormValues_to_CreateCustomerVariables(
+  attributes: CustomAttributeMetadata<'CustomerAttributeMetadata'>[],
+  values: CreateCustomerFormValues,
+): UseCustomerCreateFormMutationVariables {
+  const { ...custom_attributes } = values.custom_attributes ?? {}
+
+  return {
+    input: {
+      ...values.input,
+      gender: values.input.gender ? Number(values.input.gender) : undefined,
+      custom_attributes: [
+        ...(values.input.custom_attributes ?? []),
+        ...CustomAttributesField_to_AttributeValueInputs(attributes, custom_attributes),
+      ],
+    },
+  }
+}
+
+export type UseCustomerCreateFormConfig = Omit<
+  UseAttributesFormConfig<'CustomerAttributeMetadata'>,
+  'formCode' | 'typename'
+>
+
+export function useCustomerCreateForm(
+  attributeFormConfig?: UseCustomerCreateFormConfig,
+  useFormGqlOptions?: UseFormGraphQlOptions<
+    UseCustomerCreateFormMutation,
+    CreateCustomerFormValues
+  >,
+  mutationOptions?: MutationHookOptions<UseCustomerCreateFormMutation, CreateCustomerFormValues>,
+) {
+  const attributes = useAttributesForm({
+    formCode: 'customer_account_create',
+    typename: 'CustomerAttributeMetadata',
+    attributeToName: {
+      email: 'input.email',
+      dob: 'input.date_of_birth',
+      firstname: 'input.firstname',
+      lastname: 'input.lastname',
+      prefix: 'input.prefix',
+      middlename: 'input.middlename',
+      suffix: 'input.suffix',
+      gender: 'input.gender',
+      password: 'input.password',
+    },
+    ...attributeFormConfig,
+  })
+
+  // console.log(customer, CustomerInfo_to_UpdateCustomerFormValues(attributes, customer))
+  const form = useFormGqlMutation<UseCustomerCreateFormMutation, CreateCustomerFormValues>(
+    UseCustomerCreateFormDocument,
+    {
+      ...useFormGqlOptions,
+      onBeforeSubmit: async (values, f) => {
+        const result = (await useFormGqlOptions?.onBeforeSubmit?.(values, f)) ?? values
+        if (result === false) return false
+        return CreateCustomerFormValues_to_CreateCustomerVariables(attributes, result)
+      },
+    },
+    mutationOptions,
+  )
+
+  return { ...form, attributes }
+}