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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 9.1.0-canary.19
+
+### Minor Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`20703bc`](https://github.com/graphcommerce-org/graphcommerce/commit/20703bc5c453fb7ee61eb4350e207e84a749bf5e) - Magento 2.4.7: Implemented the `customer_account_create` and `customer_account_edit` forms using the `attributeForm` query for the registration page and customer information form. The forms respect the settings configured in the 'Customer Configuration section'. It allows configuration for `prefix`, `middlename`, `suffix`,`dob`, `gender` and other fields. This also makes the frontend compatible with Adobe Commerce's Customer Attributes module. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`30f9371`](https://github.com/graphcommerce-org/graphcommerce/commit/30f9371503959b990c65058a88be6f61b4859140) - Added support for viewing Invoices/Shipments and Credit Memo's ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6cb4815`](https://github.com/graphcommerce-org/graphcommerce/commit/6cb4815a0faf4cc2f60c13d9384e3a96b6bdb2bb) - Deleting an account will now require reauthentication and moved the menu item to the Authentication section ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`2409514`](https://github.com/graphcommerce-org/graphcommerce/commit/240951428ac0bdc11649f4190b6d51c004680b34) - Order/Invoice/CreditMemo and Shipment views ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/AccountAddresses/AccountAddresses.tsx

@@ -1,5 +1,6 @@
 import {
   extendableComponent,
+  filterNonNullableKeys,
   FullPageMessage,
   iconHome,
   IconSvg,
@@ -21,7 +22,9 @@ const parts = ['root', 'addresses', 'button', 'link'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function AccountAddresses(props: AccountAddressesProps) {
-  const { addresses, loading, sx = [] } = props
+  const { addresses: addressesIncoming, loading, sx = [] } = props
+
+  const addresses = filterNonNullableKeys(addressesIncoming)
 
   if (loading) {
     return (
@@ -58,7 +61,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
 
   return (
     <>
-      {((addresses && addresses.length === 0) || !addresses) && (
+      {addresses.length === 0 && (
         <FullPageMessage
           title={<Trans id='You have no addresses saved yet' />}
           icon={<IconSvg src={iconHome} size='xxl' />}
@@ -70,13 +73,15 @@ export function AccountAddresses(props: AccountAddressesProps) {
         />
       )}
 
-      {addresses && addresses.length >= 1 && (
+      {addresses.length >= 1 && (
         <SectionContainer labelLeft={<Trans id='Shipping addresses' />}>
           <Box
             className={classes.addresses}
             sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
           >
-            {addresses?.map((address) => <AccountAddress key={address?.id} {...address} />)}
+            {addresses.map((address) => (
+              <AccountAddress key={address.id} {...address} />
+            ))}
           </Box>
 
           <Button

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -4,17 +4,17 @@ import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useForm } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
 import { Box, Typography } from '@mui/material'
-import { CustomerDocument, useCustomerQuery } from '../../hooks'
+import { useRouter } from 'next/router'
+import { CustomerDocument, CustomerTokenDocument, useCustomerQuery } from '../../hooks'
 import { signOut } from '../SignOutForm/signOut'
 import { WaitForCustomer } from '../WaitForCustomer/WaitForCustomer'
 import { DeleteCustomerDocument } from './DeleteCustomer.gql'
 
 export function AccountDeleteForm() {
   const client = useApolloClient()
+  const router = useRouter()
 
-  const dashboard = useCustomerQuery(CustomerDocument, {
-    fetchPolicy: 'cache-and-network',
-  })
+  const dashboard = useCustomerQuery(CustomerDocument, { fetchPolicy: 'cache-and-network' })
   const customer = dashboard.data?.customer
 
   const [deleteAccount, { called, error, loading }] = useMutation(DeleteCustomerDocument)
@@ -24,6 +24,15 @@ export function AccountDeleteForm() {
   const { control, handleSubmit, setError } = form
 
   const submitHandler = handleSubmit(async (data) => {
+    const currentToken = client.cache.readQuery({ query: CustomerTokenDocument })?.customerToken
+    if (currentToken) {
+      client.cache.writeQuery({
+        query: CustomerTokenDocument,
+        broadcast: true,
+        data: { customerToken: { ...currentToken, token: 'Force Reauthentication' } },
+      })
+    }
+
     if (data.email !== customer?.email) {
       setError('email', {
         message: t`The given email does not match the account email`,
@@ -31,6 +40,7 @@ export function AccountDeleteForm() {
     } else {
       await deleteAccount()
       signOut(client)
+      await router.push('/')
     }
   })
 

package/components/AccountLatestOrder/AccountLatestOrder.tsx

@@ -1,8 +1,7 @@
 import { SectionContainer } from '@graphcommerce/next-ui'
-import React from 'react'
 import type { AccountOrdersFragment } from '../AccountOrders/AccountOrders.gql'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
-import { OrderCard } from '../OrderCard/OrderCard'
+import { OrderCard } from '../Order'
 
 export type AccountLatestOrderProps = AccountOrdersFragment & {
   loading: boolean

package/components/AccountOrders/AccountOrders.tsx

@@ -3,7 +3,7 @@ import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import React from 'react'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
-import { OrderCard } from '../OrderCard/OrderCard'
+import { OrderCard } from '../Order'
 import type { AccountOrdersFragment } from './AccountOrders.gql'
 
 export type AccountOrdersProps = AccountOrdersFragment & { sx?: SxProps<Theme> }

package/components/CancelOrder/CancelOrderForm.tsx

@@ -14,12 +14,12 @@ import { Trans } from '@lingui/macro'
 import type { AccordionProps } from '@mui/material'
 import { Accordion, AccordionDetails, AccordionSummary, Alert, Box } from '@mui/material'
 import { canCancelOrder } from '../../utils'
-import type { OrderDetailsFragment } from '../OrderDetails/OrderDetails.gql'
 import type { CancelOrderMutation, CancelOrderMutationVariables } from './CancelOrder.gql'
 import { CancelOrderDocument } from './CancelOrder.gql'
+import type { CancelOrderFragment } from './CancelOrderFragment.gql'
 
 export type CancelOrderFormProps = {
-  order: OrderDetailsFragment
+  order: CancelOrderFragment
 } & Omit<AccordionProps, 'children'>
 
 export function CancelOrderForm(props: CancelOrderFormProps) {

package/components/CancelOrder/CancelOrderFragment.graphql

@@ -0,0 +1,5 @@
+fragment CancelOrderFragment on CustomerOrder {
+  id
+  ...OrderStateLabel
+  ...OrderDetails
+}

package/components/ChangeNameForm/ChangeNameForm.tsx

@@ -11,6 +11,7 @@ export type ChangeNameFormProps = {
   lastname: string
 }
 
+/** @deprecated Use UpdateCustomerForm when using Magento 2.4.7 and higher */
 export function ChangeNameForm(props: ChangeNameFormProps) {
   const { prefix, firstname, lastname } = props
   const form = useFormGqlMutation(

package/components/ContactForm/ContactUsConfig.graphql

@@ -0,0 +1,3 @@
+fragment ContactUsConfig on StoreConfig @inject(into: ["StoreConfigFragment"]) {
+  contact_enabled
+}

package/components/CreditMemo/CreditMemo.graphql

@@ -0,0 +1,43 @@
+fragment CreditMemo on CreditMemo {
+  id
+  number
+  items {
+    ...CreditMemoItem
+  }
+  total {
+    subtotal {
+      ...Money
+    }
+    adjustment {
+      ...Money
+    }
+    shipping_handling {
+      ...ShippingHandling
+    }
+    total_shipping {
+      ...Money
+    }
+    discounts {
+      amount {
+        ...Money
+      }
+      label
+    }
+    base_grand_total {
+      ...Money
+    }
+    grand_total {
+      ...Money
+    }
+    taxes {
+      ...TaxItem
+    }
+    total_tax {
+      ...Money
+    }
+  }
+  comments {
+    message
+    timestamp
+  }
+}

package/components/CreditMemo/CreditMemoCard.graphql

@@ -0,0 +1,12 @@
+fragment CreditMemoCard on CreditMemo {
+  id
+  number
+  comments {
+    ...SalesCommentItem
+  }
+  total {
+    grand_total {
+      ...Money
+    }
+  }
+}

package/components/CreditMemo/CreditMemoCard.tsx

@@ -0,0 +1,66 @@
+import { Money } from '@graphcommerce/magento-store'
+import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten } from '@mui/material'
+import type { CreditMemoCardFragment } from './CreditMemoCard.gql'
+
+export type CreditMemoCardProps = {
+  orderNumber: string
+  creditMemo: CreditMemoCardFragment
+  sx?: SxProps<Theme>
+}
+
+export function CreditMemoCard(props: CreditMemoCardProps) {
+  const { creditMemo, orderNumber, sx = [] } = props
+  const { number, total } = creditMemo
+
+  return (
+    <Box
+      component={NextLink}
+      href={`/account/orders/credit-memo?orderNumber=${orderNumber}&creditMemoNumber=${number}`}
+      sx={sxx(
+        (theme) => ({
+          textDecoration: 'none',
+          color: 'text.primary',
+          px: theme.spacings.xxs,
+          py: theme.spacings.xxs,
+          gap: theme.spacings.sm,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+          },
+          display: 'grid',
+          gridTemplate: `
+            "number total action" / 1fr auto auto
+          `,
+          rowGap: 0.5,
+          columnGap: 1,
+        }),
+        sx,
+      )}
+    >
+      <Box sx={{ gridArea: 'number', typography: 'body1' }}>
+        <Trans>Credit Memo #{number}</Trans>
+      </Box>
+      <Box sx={{ gridArea: 'total', alignSelf: 'center' }}>
+        <Money {...total?.grand_total} />
+      </Box>
+
+      <IconSvg
+        src={iconChevronRight}
+        size='medium'
+        sx={{ gridArea: 'action', alignSelf: 'center' }}
+      />
+    </Box>
+  )
+}

package/components/CreditMemo/CreditMemoDetails.tsx

@@ -0,0 +1,94 @@
+import {
+  breakpointVal,
+  DateTimeFormat,
+  extendableComponent,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, lighten, Typography } from '@mui/material'
+import type { CreditMemoFragment } from './CreditMemo.gql'
+
+export type CreditMemoDetailsProps = {
+  creditMemo: CreditMemoFragment
+  sx?: SxProps<Theme>
+}
+
+const componentName = 'CreditMemoDetails'
+const parts = [
+  'sectionContainer',
+  'creditMemoDetailTitle',
+  'creditMemoDetailContainer',
+  'creditMemoDetailRow',
+] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function CreditMemoDetails(props: CreditMemoDetailsProps) {
+  const { creditMemo, sx = [] } = props
+  const { number, id } = creditMemo
+
+  return (
+    <SectionContainer
+      labelLeft={<Trans>Credit Memo details</Trans>}
+      sx={[
+        (theme) => ({
+          padding: theme.spacings.sm,
+          marginBottom: theme.spacings.md,
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          '& .SectionHeader-root': {
+            mt: 0,
+            mb: theme.spacings.xs,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={classes.creditMemoDetailContainer}
+        sx={[
+          (theme) => ({
+            gridColumnGap: theme.spacings.xxl,
+            gridRowGap: theme.spacings.md,
+            display: 'grid',
+            [theme.breakpoints.up('sm')]: {
+              gridTemplateColumns: '1fr 1fr',
+              marginTop: theme.spacings.xxs,
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box className={classes.creditMemoDetailRow}>
+          <SectionContainer
+            variantLeft='h5'
+            labelLeft={<Trans>Credit Memo number</Trans>}
+            className={classes.creditMemoDetailTitle}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+          >
+            <Typography>{number}</Typography>
+          </SectionContainer>
+        </Box>
+
+        <Box className={classes.creditMemoDetailRow}>
+          {/* <SectionContainer
+            variantLeft='h5'
+            labelLeft={<Trans>Credit Memo ID</Trans>}
+            className={classes.creditMemoDetailTitle}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+          >
+            <Typography>{id}</Typography>
+          </SectionContainer> */}
+        </Box>
+      </Box>
+    </SectionContainer>
+  )
+}

package/components/CreditMemo/CreditMemoItem.graphql

@@ -0,0 +1,26 @@
+fragment CreditMemoItem on CreditMemoItemInterface {
+  __typename
+  id
+  product_name
+  product_sku
+  quantity_refunded
+  product_sale_price {
+    ...Money
+  }
+
+  discounts {
+    amount {
+      ...Money
+    }
+    label
+  }
+  order_item {
+    id
+    product {
+      uid
+      thumbnail {
+        ...ProductImage
+      }
+    }
+  }
+}

package/components/CreditMemo/CreditMemoItem.tsx

@@ -0,0 +1,125 @@
+import { Image } from '@graphcommerce/image'
+import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
+import { ActionCard, actionCardImageSizes, type ActionCardProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box } from '@mui/material'
+import type { CreditMemoItemFragment } from './CreditMemoItem.gql'
+
+export type CreditMemoItemProps = Omit<ActionCardProps, 'value' | 'image' | 'title'> & {
+  item: CreditMemoItemFragment
+  priceModifiers?: PriceModifier[]
+}
+
+export function CreditMemoItem(props: CreditMemoItemProps) {
+  const { item, priceModifiers, size = 'responsive', ...rest } = props
+  const {
+    product_name,
+    product_sku,
+    quantity_refunded,
+    product_sale_price,
+    discounts,
+    id,
+    order_item,
+  } = item
+
+  return (
+    <ActionCard
+      {...rest}
+      value={id}
+      sx={(theme) => ({
+        '&.ActionCard-root': {
+          px: 0,
+          py: theme.spacings.xs,
+        },
+        '& .ActionCard-rootInner': {
+          justifyContent: 'space-between',
+          alignItems: 'stretch',
+        },
+        '&.sizeSmall': {
+          px: 0,
+        },
+        '&.sizeResponsive': {
+          [theme.breakpoints.down('md')]: { px: 0 },
+        },
+        '& .ActionCard-end': {
+          justifyContent: 'space-between',
+        },
+        '& .ActionCard-action': {
+          pr: 0,
+        },
+        '& .ActionCard-image': {
+          alignSelf: 'flex-start',
+        },
+        '& .ActionCard-secondaryAction': {
+          display: 'grid',
+          rowGap: theme.spacings.xs,
+          justifyItems: 'start',
+        },
+        '& .ActionCard-price': {
+          pr: 0,
+          mb: { xs: 0.5, sm: 0 },
+        },
+      })}
+      size={size}
+      image={
+        order_item?.product?.thumbnail?.url && (
+          <Image
+            layout='fill'
+            src={order_item.product.thumbnail.url}
+            alt={order_item?.product.thumbnail?.label ?? ''}
+            sx={{
+              width: actionCardImageSizes[size],
+              height: actionCardImageSizes[size],
+              display: 'block',
+              borderRadius: 1,
+              objectFit: 'contain',
+              backgroundColor: 'background.image',
+            }}
+            sizes={actionCardImageSizes[size]}
+          />
+        )
+      }
+      title={product_name}
+      price={
+        <Money
+          currency={product_sale_price.currency}
+          value={(product_sale_price.value ?? 0) * (quantity_refunded ?? 1)}
+        />
+      }
+      action={<>&nbsp;</>}
+      secondaryAction={
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'text.secondary',
+              mt: 1,
+              gap: '10px',
+              justifyContent: 'start',
+            }}
+          >
+            {quantity_refunded}
+            {' ⨉ '}
+            <Money {...product_sale_price} />
+          </Box>
+
+          {rest.secondaryAction}
+        </>
+      }
+      details={
+        <>
+          {priceModifiers && priceModifiers.length > 0 && (
+            <PriceModifiersList
+              label={<Trans id='Base Price'>Base price</Trans>}
+              modifiers={[...priceModifiers]}
+              total={product_sale_price.value ?? 0}
+              currency={product_sale_price.currency}
+            />
+          )}
+          {rest.details}
+        </>
+      }
+    />
+  )
+}

package/components/CreditMemo/CreditMemoItems.tsx

@@ -0,0 +1,78 @@
+import {
+  ActionCardLayout,
+  breakpointVal,
+  extendableComponent,
+  nonNullable,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { CreditMemoFragment } from './CreditMemo.gql'
+import { CreditMemoItem } from './CreditMemoItem'
+
+export type CreditMemoItemsProps = {
+  creditMemo: CreditMemoFragment
+  sx?: SxProps<Theme>
+  layout?: 'list' | 'grid'
+  size?: 'small' | 'medium' | 'large'
+}
+
+const componentName = 'CreditMemoItems'
+const parts = ['root', 'items', 'actionCard'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function CreditMemoItems(props: CreditMemoItemsProps) {
+  const { creditMemo, sx = [], layout = 'list', size } = props
+
+  const items = (creditMemo.items ?? []).filter(nonNullable)
+  if (!items.length) return null
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          my: theme.spacings.md,
+          padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
+          border: `1px ${theme.palette.divider} solid`,
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <SectionContainer
+        sx={{ '& .SectionHeader-root': { mt: 0 } }}
+        labelLeft={<Trans>Refunded items</Trans>}
+        variantLeft='h6'
+        className={classes.items}
+      >
+        <ActionCardLayout
+          sx={(theme) => ({
+            marginBottom: theme.spacings.md,
+            '&.layoutStack': {
+              gap: 0,
+            },
+          })}
+          className={classes.actionCard}
+          layout={layout}
+        >
+          {items.map((item) => (
+            <CreditMemoItem
+              key={item.id}
+              item={item}
+              size={size}
+              layout={layout}
+              variant='default'
+            />
+          ))}
+        </ActionCardLayout>
+      </SectionContainer>
+    </Box>
+  )
+}