@graphcommerce/magento-customer 5.1.1 → 5.2.0-canary.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 5.2.0-canary.1
+
+### Patch Changes
+
+- [#1768](https://github.com/graphcommerce-org/graphcommerce/pull/1768) [`23e9a4728`](https://github.com/graphcommerce-org/graphcommerce/commit/23e9a472899dfc0b56b989f5d0e8ffb802c8cc5f) - Move magento-customer-account & magento-customer-order into magento-customer package (magento-customer-account & magento-customer-order are now deprecated) ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1768](https://github.com/graphcommerce-org/graphcommerce/pull/1768) [`7e8dcf447`](https://github.com/graphcommerce-org/graphcommerce/commit/7e8dcf44777aca527c07aaee397d272dd2f6ae44) - Update account address list after deleting an address ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1768](https://github.com/graphcommerce-org/graphcommerce/pull/1768) [`9f0e9ab2d`](https://github.com/graphcommerce-org/graphcommerce/commit/9f0e9ab2dec3f9261ae00e9fd44d06a65ddb1d0d) - Redirect to address overview page after creating an address instead of redirecting to the edit page for the address that was just created ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 5.2.0-canary.0
+
+### Minor Changes
+
+- [#1769](https://github.com/graphcommerce-org/graphcommerce/pull/1769) [`2693a616a`](https://github.com/graphcommerce-org/graphcommerce/commit/2693a616af2f9793012a5fb2eeacc084e695b83e) - WaitForCustomer now accepts overridable components for the fallback and unauthenticated state. ([@mikekeehnen](https://github.com/mikekeehnen))
+
 ## 5.1.1
 
 ## 5.1.1-canary.1

package/components/AccountLatestOrder/AccountLatestOrder.tsx

@@ -0,0 +1,31 @@
+import { SectionContainer } from '@graphcommerce/next-ui'
+import React from 'react'
+import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
+import { AccountOrdersFragment } from '../AccountOrders/AccountOrders.gql'
+import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
+import { OrderCard } from '../OrderCard/OrderCard'
+
+export type AccountLatestOrderProps = AccountOrdersFragment & {
+  loading: boolean
+}
+
+export function AccountLatestOrder(props: AccountLatestOrderProps) {
+  const { orders, loading } = props
+  const latestOrderCard = orders?.items?.[(orders?.items?.length ?? 1) - 1]
+  const images = useOrderCardItemImages(orders)
+
+  // TODO: when Magento fixes their API sorting
+  // const latestOrderCard = orders?.items?.[0]
+
+  return (
+    <SectionContainer labelLeft='Latest order'>
+      {!loading && (
+        <>
+          {!latestOrderCard && <NoOrdersFound />}
+          {latestOrderCard && <OrderCard {...latestOrderCard} images={images} />}
+        </>
+      )}
+      {loading && <OrderCard loading />}
+    </SectionContainer>
+  )
+}

package/components/AccountMenu/AccountMenu.tsx

@@ -0,0 +1,21 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { List, SxProps, Theme } from '@mui/material'
+import React from 'react'
+
+export type AccountMenuProps = { children: React.ReactNode; sx?: SxProps<Theme> }
+
+const { classes } = extendableComponent('AccountMenu', ['root'] as const)
+
+export function AccountMenu(props: AccountMenuProps) {
+  const { children, sx = [] } = props
+
+  return (
+    <List
+      classes={classes}
+      disablePadding
+      sx={[(theme) => ({ marginBottom: theme.spacings.lg }), ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      {children}
+    </List>
+  )
+}

package/components/AccountMenuItem/AccountMenuItem.tsx

@@ -0,0 +1,105 @@
+import { ImageProps } from '@graphcommerce/image'
+import {
+  responsiveVal,
+  iconChevronRight,
+  IconSvg,
+  Button,
+  ButtonProps,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
+import { ListItem, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
+import PageLink from 'next/link'
+import React from 'react'
+
+export type AccountMenuItemProps = {
+  iconSrc: ImageProps['src']
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  endIcon?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Omit<ButtonProps, 'endIcon' | 'startIcon' | 'title'> &
+  OwnerState
+
+type OwnerState = { noBorderBottom?: boolean }
+const name = 'AccountMenuItem'
+const parts = ['root', 'icon'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function AccountMenuItem(props: AccountMenuItemProps) {
+  const {
+    title,
+    subtitle,
+    iconSrc,
+    endIcon,
+    href,
+    disabled,
+    noBorderBottom = false,
+    sx = [],
+    ...buttonProps
+  } = props
+  const classes = withState({ noBorderBottom })
+
+  const button = (
+    <Button
+      disabled={disabled}
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          width: '100%',
+          height: responsiveVal(88, 104),
+          padding: 0,
+          borderRadius: 0,
+          background: theme.palette.background.paper,
+          '&:hover': {
+            background: theme.palette.background.default,
+          },
+          '&:disabled': {
+            background: theme.palette.background.default,
+          },
+          '&:focus': {
+            // fix: disableElevation does not work when button is focused
+            boxShadow: 'none',
+          },
+
+          '&:not(.noBorderBottom)': {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...buttonProps}
+    >
+      <ListItem disableGutters>
+        <ListItemIcon
+          className={classes.icon}
+          sx={(theme) => ({
+            paddingRight: theme.spacings.xs,
+          })}
+        >
+          <IconSvg src={iconSrc} size='large' />
+        </ListItemIcon>
+        <ListItemText
+          primaryTypographyProps={{ sx: { typography: 'subtitle1' } }}
+          secondaryTypographyProps={{
+            sx: {
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'elipsis',
+            },
+          }}
+          primary={title}
+          secondary={subtitle}
+        />
+        {endIcon ?? <IconSvg src={iconChevronRight} />}
+      </ListItem>
+    </Button>
+  )
+
+  return href ? (
+    <PageLink href={href} passHref>
+      {button}
+    </PageLink>
+  ) : (
+    button
+  )
+}

package/components/AccountOrders/AccountOrders.graphql

@@ -0,0 +1,13 @@
+fragment AccountOrders on Customer {
+  orders(filter: {}, pageSize: $pageSize, currentPage: $currentPage) {
+    items {
+      ...OrderCard
+    }
+    page_info {
+      current_page
+      page_size
+      total_pages
+    }
+    total_count
+  }
+}

package/components/AccountOrders/AccountOrders.tsx

@@ -0,0 +1,88 @@
+import { Pagination, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, Link, SxProps, Theme } from '@mui/material'
+import PageLink from 'next/link'
+import React from 'react'
+import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
+import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
+import { OrderCard } from '../OrderCard/OrderCard'
+import { AccountOrdersFragment } from './AccountOrders.gql'
+
+export type AccountOrdersProps = AccountOrdersFragment & { sx?: SxProps<Theme> }
+
+const parts = ['root', 'older'] as const
+const { classes } = extendableComponent('AccountOrders', parts)
+
+export function AccountOrders(props: AccountOrdersProps) {
+  const { orders, sx = [] } = props
+  const amountLatestOrders = 2
+  const images = useOrderCardItemImages(orders)
+
+  const pageInfo = orders?.page_info
+  const isFirstPage = pageInfo?.current_page === 1
+
+  // whenever it's possible, pick last {amountLatestOrders} items, then reverse the resulting array,
+  // because we want to render the latest order first,
+  // but the API returns the orders in ASC order...
+  const latestOrders = orders?.items
+    .slice(Math.max((orders?.items?.length ?? 0) - 2, 0), orders?.items?.length)
+    .reverse()
+
+  const olderOrders = isFirstPage
+    ? orders?.items.slice(0, Math.max((orders?.items?.length ?? 0) - 2, 0)).reverse()
+    : orders?.items
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          typography: 'body2',
+          marginBottom: theme.spacings.md,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {isFirstPage && (
+        <SectionContainer labelLeft={<Trans id='Latest orders' />}>
+          {latestOrders?.map(
+            (order) => order && <OrderCard key={order.number} {...order} images={images} />,
+          )}
+          {orders?.items && !orders?.items?.length && <NoOrdersFound />}
+        </SectionContainer>
+      )}
+
+      {orders?.items &&
+        ((isFirstPage && orders?.items?.length >= amountLatestOrders + 1) || !isFirstPage) && (
+          <SectionContainer
+            labelLeft={<Trans id='Older' />}
+            className={classes.older}
+            sx={(theme) => ({
+              [theme.breakpoints.up('md')]: {
+                marginTop: theme.spacings.lg,
+                marginBottom: theme.spacings.lg,
+              },
+              marginTop: theme.spacings.md,
+              marginBottom: theme.spacings.md,
+            })}
+          >
+            {olderOrders?.map(
+              (order) => order && <OrderCard key={order.number} {...order} images={images} />,
+            )}
+          </SectionContainer>
+        )}
+
+      <Pagination
+        count={pageInfo?.total_pages ?? 1}
+        page={pageInfo?.current_page ?? 1}
+        renderLink={(p: number, icon: React.ReactNode) => (
+          <PageLink href={p === 1 ? '/account/orders' : `/account/orders?page=${p}`} passHref>
+            <Link color='primary' underline='hover'>
+              {icon}
+            </Link>
+          </PageLink>
+        )}
+      />
+    </Box>
+  )
+}

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -0,0 +1,167 @@
+import {
+  ApolloCustomerErrorAlert,
+  SignInForm,
+  SignUpForm,
+  useFormIsEmailAvailable,
+  CustomerDocument,
+} from '@graphcommerce/magento-customer'
+import { useCustomerQuery } from '@graphcommerce/magento-customer/hooks'
+import {
+  Button,
+  FormDiv,
+  FormActions,
+  FormRow,
+  LayoutTitle,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
+import { emailPattern } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/react'
+import { Box, CircularProgress, Link, SxProps, TextField, Theme, Typography } from '@mui/material'
+import PageLink from 'next/link'
+import router from 'next/router'
+
+export type AccountSignInUpFormProps = { sx?: SxProps<Theme> }
+
+const parts = ['root', 'titleContainer'] as const
+const { classes } = extendableComponent('AccountSignInUpForm', parts)
+
+const titleContainerSx: SxProps<Theme> = (theme) => ({
+  typography: 'body1',
+  marginBottom: theme.spacings.xs,
+})
+
+export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
+  const { sx = [] } = props
+  const customerQuery = useCustomerQuery(CustomerDocument)
+
+  const { email, firstname = '' } = customerQuery.data?.customer ?? {}
+  const { mode, form, autoSubmitting, submit } = useFormIsEmailAvailable({ email })
+  const { formState, muiRegister, required, watch, error } = form
+  const disableFields = formState.isSubmitting && !autoSubmitting
+
+  return (
+    <FormDiv sx={sx} className={classes.root}>
+      {mode === 'email' && (
+        <Box className={classes.titleContainer} sx={titleContainerSx}>
+          <LayoutTitle variant='h2' gutterBottom={false}>
+            <Trans id='Sign in or create an account!' />
+          </LayoutTitle>
+          <Typography variant='h6' align='center'>
+            <Trans id='Fill in your e-mail to login or create an account' />
+          </Typography>
+        </Box>
+      )}
+
+      {mode === 'signin' && (
+        <Box className={classes.titleContainer} sx={titleContainerSx}>
+          <LayoutTitle variant='h2' gutterBottom={false}>
+            <Trans id='Welcome back!' />
+          </LayoutTitle>
+          <Typography variant='h6' align='center'>
+            <Trans id='Fill in your password' />
+          </Typography>
+        </Box>
+      )}
+
+      {mode === 'signup' && (
+        <Box className={classes.titleContainer} sx={titleContainerSx}>
+          <LayoutTitle variant='h2' gutterBottom={false}>
+            <Trans id='Create account!' />
+          </LayoutTitle>
+          <Typography variant='h6' align='center'>
+            <Trans id='Create a password and tell us your name' />
+          </Typography>
+        </Box>
+      )}
+
+      {mode === 'signedin' && (
+        <Box className={classes.titleContainer} sx={titleContainerSx}>
+          <LayoutTitle variant='h2' gutterBottom={false}>
+            <Trans id='Hi {firstname}! You’re now logged in!' values={{ firstname }} />
+          </LayoutTitle>
+          <Typography variant='h6' align='center'>
+            <PageLink href='/account' passHref>
+              <Link underline='hover' color='secondary'>
+                <Trans id='View your account' />
+              </Link>
+            </PageLink>
+          </Typography>
+
+          <FormActions>
+            <Button onClick={() => router.back()} variant='pill' color='secondary' size='large'>
+              <Trans id='Continue shopping' />
+            </Button>
+          </FormActions>
+        </Box>
+      )}
+
+      {mode === 'session-expired' && (
+        <Box className={classes.titleContainer} sx={titleContainerSx}>
+          <LayoutTitle variant='h2' gutterBottom={false}>
+            <Trans id='Your session is expired' />
+          </LayoutTitle>
+          <Typography variant='h6' align='center'>
+            <Trans id='Log in to continue shopping' />
+          </Typography>
+        </Box>
+      )}
+
+      {mode !== 'signedin' && (
+        <form noValidate onSubmit={submit}>
+          <Box>
+            <FormRow>
+              <TextField
+                variant='outlined'
+                type='text'
+                autoComplete='email'
+                error={formState.isSubmitted && !!formState.errors.email}
+                helperText={formState.isSubmitted && formState.errors.email?.message}
+                label={<Trans id='Email' />}
+                required={required.email}
+                disabled={disableFields}
+                {...muiRegister('email', {
+                  required: required.email,
+                  pattern: { value: emailPattern, message: '' },
+                })}
+                InputProps={{
+                  endAdornment: formState.isSubmitting && <CircularProgress />,
+                  readOnly: !!customerQuery.data?.customer?.email,
+                }}
+              />
+            </FormRow>
+          </Box>
+
+          <ApolloCustomerErrorAlert error={error} />
+
+          {(mode === 'email' || mode === 'session-expired') && (
+            <Box>
+              <FormActions>
+                <Button
+                  type='submit'
+                  loading={formState.isSubmitting}
+                  variant='pill'
+                  color='primary'
+                  size='large'
+                >
+                  <Trans id='Continue' />
+                </Button>
+              </FormActions>
+            </Box>
+          )}
+        </form>
+      )}
+
+      {mode === 'signin' && (
+        <Box>
+          <SignInForm email={watch('email')} />
+        </Box>
+      )}
+
+      {mode === 'signup' && (
+        <Box>
+          <SignUpForm email={watch('email')} />
+        </Box>
+      )}
+    </FormDiv>
+  )
+}

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -44,7 +44,7 @@ export function CreateCustomerAddressForm() {
       },
       onComplete: (e) => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push(`/account/addresses/edit?addressId=${e.data?.createCustomerAddress?.id}`)
+        router.push(`/account/addresses`)
       },
     },
     { errorPolicy: 'all' },

package/components/DeleteCustomerAddressForm/DeleteCustomerAddressForm.tsx

@@ -2,6 +2,8 @@ import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
+import { AccountDashboardAddressesDocument } from '../../graphql/AccountDashboardAddresses.gql'
+import { useCustomerQuery } from '../../hooks/useCustomerQuery'
 import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
 
 export type DeleteCustomerAddressFormProps = {
@@ -10,10 +12,18 @@ export type DeleteCustomerAddressFormProps = {
 
 export function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps) {
   const { addressId } = props
+  const { refetch } = useCustomerQuery(AccountDashboardAddressesDocument, {
+    fetchPolicy: 'cache-and-network',
+  })
   const { handleSubmit, error } = useFormGqlMutation(
     DeleteCustomerAddressFormDocument,
     { defaultValues: { id: addressId } },
-    { errorPolicy: 'all' },
+    {
+      errorPolicy: 'all',
+      onCompleted: async () => {
+        await refetch()
+      },
+    },
   )
   const submitHandler = handleSubmit(() => {})
 

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -0,0 +1,22 @@
+import { IconHeader, iconBox, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, SxProps, Theme } from '@mui/material'
+
+const parts = ['root'] as const
+const { classes } = extendableComponent('NoOrdersFound', parts)
+
+type NoOrdersFoundProps = { sx?: SxProps<Theme> }
+
+export function NoOrdersFound(props: NoOrdersFoundProps) {
+  const { sx = [] } = props
+  return (
+    <Box
+      className={classes.root}
+      sx={[(theme) => ({ marginTop: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <IconHeader src={iconBox} size='small'>
+        <Trans id='No orders found' />
+      </IconHeader>
+    </Box>
+  )
+}

package/components/OrderCard/OrderCard.graphql

@@ -0,0 +1,18 @@
+fragment OrderCard on CustomerOrder {
+  number
+  shipments {
+    tracking {
+      ...TrackingLink
+    }
+  }
+  total {
+    grand_total {
+      ...Money
+    }
+  }
+  items {
+    ...OrderCardItem
+  }
+  ...OrderStateLabel
+  order_date
+}