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

package/components/Invoice/InvoiceTotals.tsx

@@ -0,0 +1,110 @@
+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 { InvoiceFragment } from './Invoice.gql'
+
+export type InvoiceTotalsProps = {
+  invoice: InvoiceFragment
+  sx?: SxProps<Theme>
+}
+
+const componentName = 'InvoiceTotals'
+const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function InvoiceTotals(props: InvoiceTotalsProps) {
+  const { invoice, sx = [] } = props
+  const { total } = invoice
+
+  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>
+      )}
+
+      <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>Grand 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/Invoice/index.ts

@@ -0,0 +1,9 @@
+export * from './Invoice.gql'
+export * from './InvoiceCard'
+export * from './InvoiceCard.gql'
+export * from './InvoiceDetails'
+export * from './InvoiceItem'
+export * from './InvoiceItem.gql'
+export * from './InvoiceItems'
+export * from './InvoiceTotal.gql'
+export * from './InvoiceTotals'

package/components/NameFields/NameFields.tsx

@@ -1,46 +1,61 @@
 import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { FormRow } from '@graphcommerce/next-ui'
-import type { UseFormReturn } from '@graphcommerce/react-hook-form'
+import type {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseFormReturn,
+} from '@graphcommerce/react-hook-form'
 import { assertFormGqlOperation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 
-type NameFieldValues = {
-  firstname?: string
-  lastname?: string
-  prefix?: string
-}
-
-export type NameFieldProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  form: UseFormReturn<any>
+export type NameFieldProps<TFieldValues extends FieldValues = FieldValues> = {
+  form: UseFormReturn<TFieldValues>
+  names?: {
+    firstname: FieldPath<TFieldValues>
+    lastname: FieldPath<TFieldValues>
+    prefix?: FieldPath<TFieldValues>
+  }
   readOnly?: boolean
   prefix?: boolean
   prefixes?: string[]
 }
 
-export function NameFields(props: NameFieldProps) {
+export function NameFields<TFieldValues extends FieldValues = FieldValues>(
+  props: NameFieldProps<TFieldValues>,
+) {
   const mr = i18n._(/* i18n */ 'Mr')
   const mrs = i18n._(/* i18n */ 'Mrs')
   const other = i18n._(/* i18n */ 'Other')
 
-  const { prefix, form, readOnly, prefixes = [mr, mrs, other] } = props
-  assertFormGqlOperation<NameFieldValues>(form)
+  const {
+    form,
+    readOnly,
+    prefixes = [mr, mrs, other],
+    prefix,
+    names = {
+      firstname: 'firstname' as FieldPath<TFieldValues>,
+      lastname: 'lastname' as FieldPath<TFieldValues>,
+      prefix: prefix ? ('prefix' as FieldPath<TFieldValues>) : undefined,
+    },
+  } = props
+  assertFormGqlOperation<TFieldValues>(form)
 
   const { control, required } = form
 
   return (
     <>
-      {prefix && (
+      {names.prefix && (
         <FormRow>
           <SelectElement
             variant='outlined'
-            defaultValue={prefixes[0]}
+            defaultValue={prefixes[0] as PathValue<TFieldValues, FieldPath<TFieldValues>>}
             control={control}
             required={required.prefix}
-            name='prefix'
+            name={names.prefix}
             label={<Trans id='Prefix' />}
             showValid
             InputProps={{ readOnly }}
@@ -51,7 +66,7 @@ export function NameFields(props: NameFieldProps) {
       <FormRow>
         <TextFieldElement
           control={control}
-          name='firstname'
+          name={names.firstname}
           required={required.firstname}
           variant='outlined'
           type='text'
@@ -61,7 +76,7 @@ export function NameFields(props: NameFieldProps) {
         />
         <TextFieldElement
           control={control}
-          name='lastname'
+          name={names.lastname}
           required={required.lastname}
           variant='outlined'
           type='text'

package/components/Order/OrderAdditional/OrderAdditional.graphql

@@ -0,0 +1,16 @@
+fragment OrderAdditional on CustomerOrder {
+  ...CancelOrderFragment
+  number
+  invoices {
+    ...InvoiceCard
+  }
+  credit_memos {
+    ...CreditMemoCard
+  }
+  shipments {
+    ...ShipmentCard
+  }
+  comments {
+    ...SalesCommentItem
+  }
+}

package/components/Order/OrderAdditional/OrderAdditional.tsx

@@ -0,0 +1,51 @@
+import { filterNonNullableKeys, SectionContainer, sxx } from '@graphcommerce/next-ui'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import { CancelOrderForm } from '../../CancelOrder/CancelOrderForm'
+import { CreditMemoCard } from '../../CreditMemo/CreditMemoCard'
+import { InvoiceCard } from '../../Invoice/InvoiceCard'
+import { ShipmentCard } from '../../Shipment/ShipmentCard'
+import { SalesComments } from '../OrderComments/SalesComments'
+import type { OrderAdditionalFragment } from './OrderAdditional.gql'
+
+export type OrderAdditionalProps = {
+  order: OrderAdditionalFragment
+  sx?: SxProps<Theme>
+  children?: React.ReactNode
+  additionalForms?: React.ReactNode
+}
+
+export function OrderAdditional(props: OrderAdditionalProps) {
+  const { order, children, sx, additionalForms } = props
+  const comments = filterNonNullableKeys(order.comments)
+  const invoices = filterNonNullableKeys(order.invoices)
+  const shipments = filterNonNullableKeys(order.shipments)
+  const creditMemos = filterNonNullableKeys(order.credit_memos)
+
+  return (
+    <Box
+      sx={sxx(
+        (theme) => ({ mb: theme.spacings.lg, display: 'grid', rowGap: theme.spacings.xs }),
+        sx,
+      )}
+    >
+      {comments.length > 0 ? <SalesComments comments={comments} /> : null}
+
+      {shipments.map((shipment) => (
+        <ShipmentCard key={shipment.id} shipment={shipment} orderNumber={order.number} />
+      ))}
+
+      {invoices.map((invoice) => (
+        <InvoiceCard key={invoice.id} invoice={invoice} orderNumber={order.number} />
+      ))}
+
+      {creditMemos.map((creditMemo) => (
+        <CreditMemoCard key={creditMemo.id} creditMemo={creditMemo} orderNumber={order.number} />
+      ))}
+
+      {children}
+
+      <CancelOrderForm order={order} />
+      {additionalForms}
+    </Box>
+  )
+}

package/components/Order/OrderCard/OrderCard.graphql

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

package/components/{OrderCard → Order/OrderCard}/OrderCard.tsx

@@ -12,7 +12,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Paper, Skeleton } from '@mui/material'
+import { Avatar, Box, lighten, Paper, Skeleton } from '@mui/material'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import type { OrderCardFragment } from './OrderCard.gql'
 
@@ -32,7 +32,7 @@ export function OrderCard(props: OrderCardProps) {
   const itemsWithImages = filterNonNullableKeys(items, ['product_url_key', 'product'])
     .map((item) => {
       const img = item.product.thumbnail
-      if (!img?.url || img.url.includes('/placeholder/')) return null
+      if (!img?.url) return null
       return { ...img, url: img.url }
     })
     .filter((v) => !!v)
@@ -94,22 +94,26 @@ export function OrderCard(props: OrderCardProps) {
           gap: 1,
         }}
       >
-        {itemsWithImages.slice(0, maxItemsToShow).map((item) => (
-          <Image
-            key={item.url}
-            alt={item.label ?? ''}
-            layout='fill'
-            src={item.url}
-            width={96}
-            height={96}
-            sx={{ borderRadius: 4, objectFit: 'contain' }}
-            pictureProps={{
-              sx: {
-                gridArea: itemsWithImages.length === 1 ? '1 / 1 / 3 / 3' : undefined,
-              },
-            }}
-          />
-        ))}
+        {itemsWithImages.slice(0, maxItemsToShow).map((item, index) => {
+          const key = `${item.url}-${index}`
+
+          return (
+            <Image
+              key={key}
+              alt={item.label ?? ''}
+              layout='fill'
+              src={item.url}
+              width={96}
+              height={96}
+              sx={{ borderRadius: 4, objectFit: 'contain' }}
+              pictureProps={{
+                sx: {
+                  gridArea: itemsWithImages.length === 1 ? '1 / 1 / 3 / 3' : undefined,
+                },
+              }}
+            />
+          )
+        })}
 
         {totalItems > 4 && (
           <Box

package/components/{OrderCardItem → Order/OrderCard}/OrderCardItem.graphql

@@ -1,4 +1,5 @@
 fragment OrderCardItem on OrderItemInterface {
+  id
   product_sku
   product_url_key
   product {

package/components/Order/OrderComments/OrderComments.graphql

@@ -0,0 +1,5 @@
+fragment OrderComments on CustomerOrder {
+  comments {
+    ...SalesCommentItem
+  }
+}

package/components/Order/OrderComments/SalesCommentItem.graphql

@@ -0,0 +1,4 @@
+fragment SalesCommentItem on SalesCommentItem {
+  message
+  timestamp
+}

package/components/Order/OrderComments/SalesComments.tsx

@@ -0,0 +1,28 @@
+import {
+  filterNonNullableKeys,
+  RelativeToTimeFormat,
+  SectionContainer,
+} from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import type { SalesCommentItemFragment } from './SalesCommentItem.gql'
+
+export type SalesCommentsProps = {
+  comments: (SalesCommentItemFragment | null | undefined)[] | null | undefined
+  sx?: SxProps<Theme>
+}
+
+export function SalesComments(props: SalesCommentsProps) {
+  const { comments, sx } = props
+
+  if (!comments?.length) return null
+
+  return (
+    <SectionContainer labelLeft='Comments' sx={sx}>
+      {filterNonNullableKeys(comments).map((comment) => (
+        <div key={comment.message}>
+          {comment.message} <RelativeToTimeFormat date={comment.timestamp} />
+        </div>
+      ))}
+    </SectionContainer>
+  )
+}

package/components/Order/OrderDetails/OrderAddress.graphql

@@ -0,0 +1,17 @@
+fragment OrderAddress on OrderAddress {
+  company
+  fax
+  middlename
+  prefix
+  region
+  suffix
+  telephone
+  vat_id
+  city
+  postcode
+  firstname
+  lastname
+  street
+  country_code
+  region_id
+}

package/components/Order/OrderDetails/OrderDetails.graphql

@@ -0,0 +1,38 @@
+fragment OrderDetails on CustomerOrder {
+  id
+  number
+  order_date
+  status
+  invoices {
+    id
+    number
+  }
+  shipping_method
+  shipments {
+    id
+    tracking {
+      ...TrackingLink
+    }
+  }
+  # applied_coupons {
+  #   ...AppliedCoupon
+  # }
+  payment_methods {
+    name
+    type
+    additional_data {
+      name
+      value
+    }
+  }
+  billing_address {
+    ...OrderAddress
+  }
+  shipping_address {
+    ...OrderAddress
+  }
+  carrier
+  total {
+    ...OrderTotal
+  }
+}

package/components/{OrderDetails → Order/OrderDetails}/OrderDetails.tsx

@@ -2,18 +2,17 @@ import {
   breakpointVal,
   DateTimeFormat,
   extendableComponent,
-  iconInvoice,
-  IconSvg,
   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 { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
-import { TrackingLink } from '../TrackingLink/TrackingLink'
+import { AddressMultiLine } from '../../AddressMultiLine/AddressMultiLine'
+import { TrackingLink } from '../../TrackingLink/TrackingLink'
 import type { OrderDetailsFragment } from './OrderDetails.gql'
 
-export type OrderDetailsProps = Partial<OrderDetailsFragment> & {
+export type OrderDetailsProps = {
+  order: OrderDetailsFragment
   sx?: SxProps<Theme>
 }
 
@@ -28,6 +27,7 @@ const parts = [
 const { classes } = extendableComponent(componentName, parts)
 
 export function OrderDetails(props: OrderDetailsProps) {
+  const { order, sx = [] } = props
   const {
     number,
     order_date,
@@ -37,29 +37,27 @@ export function OrderDetails(props: OrderDetailsProps) {
     shipments,
     shipping_method,
     invoices,
-    sx = [],
-  } = props
+  } = order
 
   return (
-    <SectionContainer
-      labelLeft={<Trans>Order details</Trans>}
+    <Box
       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,
+          margin: `${theme.spacings.sm} 0`,
+          '& > div:last-of-type': {
+            borderRadius: '0',
+            ...breakpointVal(
+              'borderBottomLeftRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
+            ...breakpointVal(
+              'borderBottomRightRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -67,25 +65,39 @@ export function OrderDetails(props: OrderDetailsProps) {
     >
       <Box
         className={classes.orderDetailContainer}
-        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]),
-        ]}
+        sx={(theme) => ({
+          ...breakpointVal(
+            'borderTopLeftRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          ...breakpointVal(
+            'borderTopRightRadius',
+            theme.shape.borderRadius * 2,
+            theme.shape.borderRadius * 3,
+            theme.breakpoints.values,
+          ),
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.default
+              : lighten(theme.palette.background.default, 0.15),
+          padding: theme.spacings.sm,
+          gridColumnGap: theme.spacings.xxl,
+          gridRowGap: theme.spacings.sm,
+          display: 'grid',
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateColumns: '1fr 1fr',
+            marginTop: theme.spacings.xxs,
+          },
+        })}
       >
         <Box className={classes.orderDetailRow}>
           <SectionContainer
             variantLeft='h5'
             labelLeft={<Trans>Order number</Trans>}
             className={classes.orderDetailTitle}
-            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           >
             <Typography>{number}</Typography>
           </SectionContainer>
@@ -96,7 +108,7 @@ export function OrderDetails(props: OrderDetailsProps) {
             variantLeft='h5'
             labelLeft={<Trans>Order date</Trans>}
             className={classes.orderDetailTitle}
-            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           >
             <DateTimeFormat date={order_date} />
           </SectionContainer>
@@ -138,22 +150,7 @@ export function OrderDetails(props: OrderDetailsProps) {
             )}
 
             {payment_methods && payment_methods[0] && (
-              <>
-                <Typography>{payment_methods[0].name}</Typography>
-                {invoices && invoices?.length > 0 && (
-                  <Box
-                    className={classes.invoice}
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'flex-start',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <IconSvg src={iconInvoice} size='small' />
-                    {invoices?.[0]?.number}
-                  </Box>
-                )}
-              </>
+              <Typography>{payment_methods[0].name}</Typography>
             )}
           </SectionContainer>
         </Box>
@@ -166,7 +163,14 @@ export function OrderDetails(props: OrderDetailsProps) {
               className={classes.orderDetailTitle}
               sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
             >
-              <AddressMultiLine {...shipping_address} />
+              <AddressMultiLine
+                {...shipping_address}
+                region={{
+                  region: shipping_address.region,
+                  region_id: shipping_address.region_id ? Number(shipping_address.region_id) : null,
+                }}
+                // custom_attributesV2={[]}
+              />
             </SectionContainer>
           </Box>
         )}
@@ -178,10 +182,19 @@ export function OrderDetails(props: OrderDetailsProps) {
             className={classes.orderDetailTitle}
             sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
           >
-            <AddressMultiLine {...billing_address} />
+            {billing_address && (
+              <AddressMultiLine
+                {...billing_address}
+                region={{
+                  region: billing_address.region,
+                  region_id: billing_address.region_id ? Number(billing_address.region_id) : null,
+                }}
+                // custom_attributesV2={[]}
+              />
+            )}
           </SectionContainer>
         </Box>
       </Box>
-    </SectionContainer>
+    </Box>
   )
 }