@graphcommerce/magento-customer 9.0.4-canary.9 → 9.1.0-canary.15

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Change Log
 
+## 9.1.0-canary.15
+
+### Patch Changes
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`0cb3ace`](https://github.com/graphcommerce-org/graphcommerce/commit/0cb3aceb09967493ecdd5040446447ff32cc3f43) - Created a AccountDashboardQueryFragment instead of only a query to allow for adding customerDownloadableProducts to the dashboard query ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`c1f04dc`](https://github.com/graphcommerce-org/graphcommerce/commit/c1f04dcb4ddd621361e6c930fb42afae0aabe9f9) - Migrate to default OrderItem resolver and remove useOrderCardItemImages as OrderItem now returns a product. Add a custom resolver for 2.4.5 and 2.4.6 that implements the functionality for older versions. ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`c1f04dc`](https://github.com/graphcommerce-org/graphcommerce/commit/c1f04dcb4ddd621361e6c930fb42afae0aabe9f9) - Created a refactored the AccountOrders page and refactored the OrderCard. ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`db56933`](https://github.com/graphcommerce-org/graphcommerce/commit/db569336dddd3e955ff0b5b00cafa25079f1adee) - Implemented order sorting for account overview and account list and implement custom resolver for Magento 2.4.5 (which is slow but works). ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`db56933`](https://github.com/graphcommerce-org/graphcommerce/commit/db569336dddd3e955ff0b5b00cafa25079f1adee) - Use OrderStateLabel in my account instead of OrderStateLabelInline and deprecate that one. ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`dc387da`](https://github.com/graphcommerce-org/graphcommerce/commit/dc387da4c32585c251fe9dec90aa010e2a435df5) - OrderTotals/OrderDetails now only renders addres information if available ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`623e993`](https://github.com/graphcommerce-org/graphcommerce/commit/623e993579b05e053d2d2f29684649cd4f4586de) - `<WaitForCustomer />` now accepts all props of the FullPageMessage ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.14
+
+## 9.0.4-canary.13
+
+## 9.0.4-canary.12
+
+## 9.0.4-canary.11
+
+## 9.0.4-canary.10
+
 ## 9.0.4-canary.9
 
 ## 9.0.4-canary.8

package/components/AccountLatestOrder/AccountLatestOrder.tsx

@@ -1,6 +1,5 @@
 import { SectionContainer } from '@graphcommerce/next-ui'
 import React from 'react'
-import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
 import type { AccountOrdersFragment } from '../AccountOrders/AccountOrders.gql'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
 import { OrderCard } from '../OrderCard/OrderCard'
@@ -16,7 +15,6 @@ export type AccountLatestOrderProps = AccountOrdersFragment & {
 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]
@@ -26,7 +24,7 @@ export function AccountLatestOrder(props: AccountLatestOrderProps) {
       {!loading && (
         <>
           {!latestOrderCard && <NoOrdersFound />}
-          {latestOrderCard && <OrderCard {...latestOrderCard} images={images} />}
+          {latestOrderCard && <OrderCard {...latestOrderCard} />}
         </>
       )}
       {loading && <OrderCard loading />}

package/components/AccountOrders/AccountOrders.graphql

@@ -1,5 +1,11 @@
 fragment AccountOrders on Customer {
-  orders(filter: {}, pageSize: $pageSize, currentPage: $currentPage) {
+  orders(
+    filter: {}
+    pageSize: $pageSize
+    currentPage: $currentPage
+    sort: { sort_direction: DESC, sort_field: CREATED_AT }
+    scope: GLOBAL
+  ) {
     items {
       ...OrderCard
     }

package/components/AccountOrders/AccountOrders.tsx

@@ -1,76 +1,21 @@
-import { extendableComponent, Pagination, SectionContainer } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Pagination, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import React from 'react'
-import useOrderCardItemImages from '../../hooks/useOrderCardItemImages'
 import { NoOrdersFound } from '../NoOrdersFound/NoOrdersFound'
 import { OrderCard } from '../OrderCard/OrderCard'
 import type { 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>
-        )}
+    <Box sx={sxx((theme) => ({ display: 'grid', rowGap: theme.spacings.sm }), sx)}>
+      {orders?.items?.map((order) => order && <OrderCard key={order.number} {...order} />)}
+      {orders?.items && !orders?.items?.length && <NoOrdersFound />}
 
       <Pagination
         count={pageInfo?.total_pages ?? 1}

package/components/GuestOrderOverview/GuestOrderOverviewForm.tsx

@@ -4,7 +4,6 @@ import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import { Box, Typography } from '@mui/material'
 import { useMemo } from 'react'
-import { useOrderCardItemImages } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
 import { OrderDetails } from '../OrderDetails/OrderDetails'
 import { OrderTotals } from '../OrderDetails/OrderTotals'
@@ -44,8 +43,6 @@ export function GuestOrderOverviewForm() {
 
   const submitHandler = handleSubmit(() => {})
 
-  const images = useOrderCardItemImages({ items: [orderData?.guestOrder ?? null] })
-
   const showForm = !orderData?.guestOrder || !formState.isSubmitSuccessful
 
   return (
@@ -91,7 +88,7 @@ export function GuestOrderOverviewForm() {
             <OrderStateLabel {...orderData.guestOrder} />
           </Typography>
           <OrderDetails {...orderData?.guestOrder} />
-          <OrderItems {...orderData?.guestOrder} images={images} />
+          <OrderItems {...orderData?.guestOrder} />
           <OrderTotals {...orderData?.guestOrder} />
         </>
       )}

package/components/OrderCard/OrderCard.tsx

@@ -1,157 +1,151 @@
+import { Image } from '@graphcommerce/image'
 import { Money } from '@graphcommerce/magento-store'
-import { DateTimeFormat, extendableComponent, NextLink } from '@graphcommerce/next-ui'
+import {
+  actionCardImageSizes,
+  breakpointVal,
+  DateTimeFormat,
+  filterNonNullableKeys,
+  iconChevronRight,
+  IconSvg,
+  NextLink,
+  sxx,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, ListItemButton, Skeleton, styled } from '@mui/material'
-import type { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
-import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
+import { Box, lighten, Paper, Skeleton } from '@mui/material'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
-import { TrackingLink } from '../TrackingLink/TrackingLink'
 import type { OrderCardFragment } from './OrderCard.gql'
 
 export type OrderCardProps = Partial<OrderCardFragment> & {
   loading?: boolean
-  images?: UseOrderCardItemImages
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderCard'
-const parts = [
-  'orderContainer',
-  'orderRow',
-  'orderMoney',
-  'orderProducts',
-  'images',
-  'placeholder',
-  'buttonRoot',
-  'tracking',
-] as const
-const { classes } = extendableComponent(componentName, parts)
-
-const OrderContainer = styled(Box, { name: componentName, target: classes.orderContainer })(
-  ({ theme }) => ({
-    padding: theme.spacings.sm,
-    display: 'grid',
-    justifyContent: 'center',
-    width: '100%',
-  }),
-)
-
-const OrderRow = styled(Box, { name: componentName, target: classes.orderRow })(({ theme }) => ({
-  margin: `0 auto calc(${theme.spacings.xxs} * .5) auto`,
-  display: 'flex',
-  gap: theme.spacings.xxs,
-}))
-
 export function OrderCard(props: OrderCardProps) {
-  const {
-    number,
-    shipments,
-    total,
-    items,
-    order_date,
-    images,
-    loading,
-    status = '',
-    sx = [],
-  } = props
+  const { number, total, items, order_date, loading, status = '', sx = [] } = props
 
   const totalItems = items?.length ?? 0
-  const maxItemsInRow = 5
+  const maxItemsToShow = totalItems <= 4 ? totalItems : 3
+
+  const sizes = actionCardImageSizes.responsive
+
+  const itemsWithImages = filterNonNullableKeys(items, ['product_url_key', 'product'])
+    .map((item) => {
+      const img = item.product.thumbnail
+      if (!img?.url || img.url.includes('/placeholder/')) return null
+      return { ...img, url: img.url }
+    })
+    .filter((v) => !!v)
+    .filter((v) => !v.disabled)
 
   if (loading) {
     return (
       <Box sx={sx}>
-        <OrderContainer className={classes.orderContainer}>
-          <OrderRow>
-            <Skeleton variant='text' width={192} />
-          </OrderRow>
-          <OrderRow>
-            <Skeleton variant='text' width={280} />
-          </OrderRow>
-          <Box
-            className={classes.orderProducts}
-            sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}
-          >
-            <Skeleton variant='rectangular' width={88} height={88} />
+        <Paper sx={(theme) => ({ p: theme.spacings.xs })}>
+          <Box sx={{ display: 'grid', gap: 1 }}>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <Skeleton variant='rectangular' width={121} height={121} />
+              <Box sx={{ flex: 1 }}>
+                <Skeleton variant='text' width={140} height={32} />
+                <Skeleton variant='text' width={100} height={24} />
+              </Box>
+            </Box>
           </Box>
-          <OrderRow>
-            <Skeleton variant='text' width={228} />
-          </OrderRow>
-        </OrderContainer>
+        </Paper>
       </Box>
     )
   }
 
   return (
-    <ListItemButton
-      href={`/account/orders/view?orderNumber=${number}`}
+    <Box
       component={NextLink}
-      className={classes.buttonRoot}
-      sx={[
+      href={`/account/orders/view?orderNumber=${number}`}
+      sx={sxx(
         (theme) => ({
-          width: '100%',
-          boxShadow: 'none',
-          marginTop: theme.spacings.xxs,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-          '&:hover': { background: 'none' },
+          display: 'flex',
+          textDecoration: 'none',
+          color: 'text.primary',
+          px: theme.spacings.xxs,
+          py: theme.spacings.xxs,
+          gap: theme.spacings.sm,
+          alignItems: 'flex-start',
+          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,
+          },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
-      <OrderContainer className={classes.orderContainer}>
-        <OrderRow>
-          <Box component='span' className={classes.orderMoney} sx={{ fontWeight: 'bold' }}>
-            <Money {...total?.grand_total} />
-          </Box>
-          <DateTimeFormat date={order_date} />
-          <span>#{number}</span>
-        </OrderRow>
-        <OrderRow>
-          <OrderStateLabel {...props} status={status} />
-        </OrderRow>
-        <Box className={classes.orderProducts}>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(2, calc(${sizes} / 2))`,
+          gridTemplateRows: `repeat(2, calc(${sizes} / 2))`,
+          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,
+              },
+            }}
+          />
+        ))}
+
+        {totalItems > 4 && (
           <Box
-            className={classes.images}
-            sx={(theme) => ({
-              display: 'grid',
-              gridAutoFlow: 'column',
-              gap: theme.spacings.xxs,
-              gridTemplateColumns: 'repeat(auto-fit, 88px)',
-              placeContent: 'center',
-              placeItems: 'center',
-              padding: theme.spacings.xxs,
-            })}
+            sx={{
+              bgcolor: 'background.paper',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              boxShadow: 2,
+              zIndex: 1,
+              typography: 'body1',
+              gridArea: '2 / 2 / 3 / 3',
+            }}
           >
-            {items
-              ?.slice(0, maxItemsInRow)
-              .map(
-                (item) =>
-                  item?.product_url_key &&
-                  images?.[item.product_url_key] && (
-                    <OrderCardItemImage
-                      key={item.product_url_key}
-                      {...images[item.product_url_key]}
-                    />
-                  ),
-              )}
-            {totalItems > maxItemsInRow && (
-              <Box
-                className={classes.placeholder}
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  width: 88,
-                  height: 88,
-                }}
-              >{`+${totalItems - maxItemsInRow}`}</Box>
-            )}
+            +{totalItems - 3}
           </Box>
+        )}
+      </Box>
+
+      <Box sx={{ flex: 1 }}>
+        <Box sx={{ typography: 'subtitle1' }}>
+          <DateTimeFormat date={order_date} dateStyle='long' />
         </Box>
-        <Box className={`${classes.orderRow} ${classes.tracking}`} sx={{ textAlign: 'center' }}>
-          {shipments?.[0]?.tracking?.[0] && <TrackingLink {...shipments?.[0].tracking?.[0]} />}
+        <Box sx={{ typography: 'body1', color: 'text.secondary' }}>#{number}</Box>
+        <Box>
+          <Trans id='Grand total'>Grand Total</Trans>: <Money {...total?.grand_total} />
         </Box>
-      </OrderContainer>
-    </ListItemButton>
+
+        <Box>
+          <Trans id='Status'>Status</Trans>:{' '}
+          <OrderStateLabel {...props} status={status} sx={{ typography: 'body1' }} short />
+        </Box>
+      </Box>
+
+      <IconSvg src={iconChevronRight} size='medium' sx={{ alignSelf: 'center' }} />
+    </Box>
   )
 }

package/components/OrderCardItem/OrderCardItem.graphql

@@ -1,4 +1,10 @@
 fragment OrderCardItem on OrderItemInterface {
   product_sku
   product_url_key
+  product {
+    uid
+    thumbnail {
+      ...ProductImage
+    }
+  }
 }

package/components/OrderDetails/OrderDetails.tsx

@@ -102,25 +102,27 @@ export function OrderDetails(props: OrderDetailsProps) {
           </SectionContainer>
         </Box>
 
-        <Box className={classes.orderDetailRow}>
-          <SectionContainer
-            variantLeft='h5'
-            labelLeft={<Trans>Shipping method</Trans>}
-            className={classes.orderDetailTitle}
-            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
-          >
-            <Typography>{shipping_method ?? ''}</Typography>
+        {shipping_method && (
+          <Box className={classes.orderDetailRow}>
+            <SectionContainer
+              variantLeft='h5'
+              labelLeft={<Trans>Shipping method</Trans>}
+              className={classes.orderDetailTitle}
+              sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+            >
+              <Typography>{shipping_method ?? ''}</Typography>
 
-            {shipments && shipments.length > 0 && (
-              <>
-                {shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}
-                {shipments?.[0]?.tracking?.[0] && (
-                  <TrackingLink {...shipments?.[0].tracking?.[0]} sx={{ padding: '4px 0' }} />
-                )}
-              </>
-            )}
-          </SectionContainer>
-        </Box>
+              {shipments && shipments.length > 0 && (
+                <>
+                  {shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}
+                  {shipments?.[0]?.tracking?.[0] && (
+                    <TrackingLink {...shipments?.[0].tracking?.[0]} sx={{ padding: '4px 0' }} />
+                  )}
+                </>
+              )}
+            </SectionContainer>
+          </Box>
+        )}
 
         <Box className={classes.orderDetailRow}>
           <SectionContainer
@@ -156,16 +158,18 @@ export function OrderDetails(props: OrderDetailsProps) {
           </SectionContainer>
         </Box>
 
-        <Box className={classes.orderDetailRow}>
-          <SectionContainer
-            variantLeft='h5'
-            labelLeft={<Trans>Shipping address</Trans>}
-            className={classes.orderDetailTitle}
-            sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
-          >
-            <AddressMultiLine {...shipping_address} />
-          </SectionContainer>
-        </Box>
+        {shipping_address && (
+          <Box className={classes.orderDetailRow}>
+            <SectionContainer
+              variantLeft='h5'
+              labelLeft={<Trans>Shipping address</Trans>}
+              className={classes.orderDetailTitle}
+              sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '4px' } }}
+            >
+              <AddressMultiLine {...shipping_address} />
+            </SectionContainer>
+          </Box>
+        )}
 
         <Box className={classes.orderDetailRow}>
           <SectionContainer

package/components/OrderDetails/OrderTotals.tsx

@@ -14,7 +14,7 @@ const parts = ['totalsContainer', 'totalsRow', 'totalsDivider', 'totalsVat'] as
 const { classes } = extendableComponent(componentName, parts)
 
 export function OrderTotals(props: OrderTotalsProps) {
-  const { total, carrier, sx = [] } = props
+  const { total, carrier, shipping_method, sx = [] } = props
 
   return (
     <Box
@@ -54,12 +54,17 @@ export function OrderTotals(props: OrderTotalsProps) {
           )}
         </Box>
       ))}
-      <Box className={classes.totalsRow} sx={{ display: 'flex', justifyContent: 'space-between' }}>
-        <Typography>
-          <Trans id='Shipping ({0} {1})' values={{ 0: carrier }} />
-        </Typography>
-        <Money {...total?.total_shipping} />
-      </Box>
+      {carrier && shipping_method && (
+        <Box
+          className={classes.totalsRow}
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+        >
+          <Typography>
+            <Trans id='Shipping ({0} {1})' values={{ 0: carrier, 1: shipping_method }} />
+          </Typography>
+          <Money {...total?.total_shipping} />
+        </Box>
+      )}
 
       <Divider sx={(theme) => ({ my: theme.spacings.xxs })} />
 

package/components/OrderItem/OrderItem.graphql

@@ -7,6 +7,12 @@ fragment OrderItem on OrderItemInterface {
     label
     value
   }
+  product {
+    uid
+    thumbnail {
+      ...ProductImage
+    }
+  }
   quantity_invoiced
   quantity_ordered
   quantity_refunded

package/components/OrderItem/OrderItem.tsx

@@ -40,7 +40,7 @@ export function OrderItem(props: OrderItemProps) {
     product_sale_price,
     quantity_ordered,
     product_name,
-    thumbnail,
+    product,
   } = props
   const productLink = useProductLink({
     __typename: 'SimpleProduct' as const,
@@ -94,12 +94,12 @@ export function OrderItem(props: OrderItemProps) {
       <Box className={classes.picture} sx={{ gridArea: 'picture' }}>
         <Box href={productLink} component={NextLink} className={classes.productLink}>
           <Box className={classes.pictureSpacing}>
-            {thumbnail?.url && thumbnail?.label && (
+            {product?.thumbnail?.url && product.thumbnail?.label && (
               <Image
-                alt={thumbnail?.label ?? ''}
+                alt={product.thumbnail?.label ?? ''}
                 width={104}
                 height={86}
-                src={thumbnail?.url ?? ''}
+                src={product.thumbnail?.url ?? ''}
                 className={classes.image}
                 sx={(theme) => ({
                   backgroundColor: theme.palette.background.image,

package/components/OrderItems/OrderItems.tsx

@@ -3,12 +3,10 @@ import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Button } from '@mui/material'
 import { useState } from 'react'
-import type { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
 import { OrderItem } from '../OrderItem/OrderItem'
 import type { OrderItemsFragment } from './OrderItems.gql'
 
 export type OrderItemsProps = OrderItemsFragment & {
-  images?: UseOrderCardItemImages
   sx?: SxProps<Theme>
 }
 
@@ -17,7 +15,7 @@ const parts = ['root', 'orderItemsInnerContainer', 'skeletonOrderItem', 'viewAll
 const { classes } = extendableComponent(componentName, parts)
 
 export function OrderItems(props: OrderItemsProps) {
-  const { images, items, sx = [] } = props
+  const { items, sx = [] } = props
   const [expanded, setExpanded] = useState<boolean>(false)
   const maxItemsAboveFold = 4
 
@@ -39,9 +37,7 @@ export function OrderItems(props: OrderItemsProps) {
           ?.slice(0, maxItemsAboveFold)
           .map((orderItem) => (
             <Box key={`orderItem-${orderItem?.id}`}>
-              {orderItem && (
-                <OrderItem {...orderItem} {...images?.[orderItem?.product_url_key ?? '']} />
-              )}
+              {orderItem && <OrderItem {...orderItem} />}
             </Box>
           ))}
 
@@ -50,9 +46,7 @@ export function OrderItems(props: OrderItemsProps) {
             ?.slice(maxItemsAboveFold, items?.length)
             .map((orderItem) => (
               <Box key={`orderItem-${orderItem?.id}`}>
-                {orderItem && (
-                  <OrderItem {...orderItem} {...images?.[orderItem?.product_url_key ?? '']} />
-                )}
+                {orderItem && <OrderItem {...orderItem} />}
               </Box>
             ))}
       </Box>

package/components/OrderStateLabel/OrderStateLabel.tsx

@@ -16,7 +16,7 @@ type OwnerState = {
   orderState: OrderState
 }
 const componentName = 'OrderStateLabel'
-const parts = ['root'] as const
+const parts = ['root', 'status'] as const
 const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
   componentName,
   parts,
@@ -28,31 +28,24 @@ export function OrderStateLabel(props: OrderStateLabelProps) {
 
   const classes = withState({ orderState })
 
-  return (
+  const statusWithColor = (
     <Box
+      className={classes.status}
       component='span'
-      className={classes.root}
-      sx={[
-        (theme) => ({
-          fontStyle: 'italic',
-          fontWeight: 'normal',
-          '&.orderStatePending': {
-            color: theme.palette.text.disabled,
-          },
-          '&.orderStateProcessing': {
-            color: theme.palette.info.main,
-          },
-          '&.orderStateComplete': {
-            color: theme.palette.success.main,
-          },
-          '&.orderStateClosed': {
-            color: theme.palette.text.disabled,
-          },
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={(theme) => ({
+        '&.orderStatePending': { color: 'text.disabled' },
+        '&.orderStateProcessing': { color: 'info.main' },
+        '&.orderStateComplete': { color: 'success.main' },
+        '&.orderStateClosed': { color: 'text.disabled' },
+      })}
     >
-      {short ? status : <Trans>Order status: {status}</Trans>}
+      {status}
+    </Box>
+  )
+
+  return (
+    <Box component='span' className={classes.root} sx={sx}>
+      {short ? statusWithColor : <Trans>Order status: {statusWithColor}</Trans>}
     </Box>
   )
 }

package/components/OrderStateLabel/OrderStateLabelInline.tsx

@@ -4,6 +4,7 @@ import { OrderStateLabel } from './OrderStateLabel'
 
 export type OrderStateLabelInlineProps = OrderStateLabelProps
 
+/** @deprecated Use `<OrderStateLabel {...props} short />` instead */
 export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
   const { sx = [] } = props
 

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -5,13 +5,12 @@ import { FullPageMessage, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, CircularProgress } from '@mui/material'
 import React from 'react'
+import type { SetOptional } from 'type-fest'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustomerErrorFullPage'
 
-export type WaitForCustomerProps = Omit<WaitForQueriesProps, 'fallback' | 'waitFor'> &
-  Pick<FullPageMessageProps, 'disableMargin'> & {
-    waitFor?: WaitForQueriesProps['waitFor']
-    fallback?: React.ReactNode
+export type WaitForCustomerProps = SetOptional<WaitForQueriesProps, 'waitFor'> &
+  SetOptional<FullPageMessageProps, 'title' | 'icon'> & {
     unauthenticated?: React.ReactNode
   }
 
@@ -42,7 +41,7 @@ export function nonNullable<T>(value: T): value is NonNullable<T> {
  * ```
  */
 export function WaitForCustomer(props: WaitForCustomerProps) {
-  const { waitFor = [], children, fallback, unauthenticated, disableMargin } = props
+  const { waitFor = [], children, fallback, unauthenticated, ...rest } = props
 
   const session = useCustomerSession()
   const queries = Array.isArray(waitFor) ? waitFor : [waitFor]
@@ -58,7 +57,7 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
           <FullPageMessage
             icon={<CircularProgress />}
             title={<Trans id='Loading your data' />}
-            disableMargin={disableMargin}
+            {...rest}
           >
             <Trans id='This may take a second' />
           </FullPageMessage>
@@ -79,7 +78,7 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
                 )}
               </Button>
             }
-            disableMargin={disableMargin}
+            {...rest}
           />
         ))}
       {session.loggedIn && error && <ApolloCustomerErrorFullPage error={error} />}

package/components/index.ts

@@ -29,8 +29,6 @@ export * from './GuestOrderOverview/GuestOrderOverviewForm'
 export * from './NameFields/NameFields'
 export * from './NoOrdersFound/NoOrdersFound'
 export * from './OrderCard/OrderCard'
-export * from './OrderCardItem/OrderCardItem'
-export * from './OrderCardItemImage/OrderCardItemImage'
 export * from './OrderDetails/OrderDetails'
 export * from './OrderDetails/OrderDetails.gql'
 export * from './OrderDetails/OrderTotals'

package/graphql/AccountDashboard.graphql

@@ -1,16 +1,6 @@
 query AccountDashboard {
   customer {
-    ...AccountDashboardCustomer
-    firstname
-    lastname
-    orders {
-      items {
-        ...OrderCard
-      }
-      page_info {
-        total_pages
-      }
-    }
-    ...AccountAddresses
+    email
   }
+  ...AccountDashboardQueryFragment
 }

package/graphql/AccountDashboardQueryFragment.graphql

@@ -0,0 +1,21 @@
+fragment AccountDashboardQueryFragment on Query {
+  customer {
+    ...AccountDashboardCustomer
+    firstname
+    lastname
+    orders(
+      pageSize: 1
+      currentPage: 1
+      sort: { sort_direction: DESC, sort_field: CREATED_AT }
+      scope: GLOBAL
+    ) {
+      items {
+        ...OrderCard
+      }
+      page_info {
+        total_pages
+      }
+    }
+    ...AccountAddresses
+  }
+}

package/hooks/useOrderCardItemImages.ts

@@ -7,6 +7,11 @@ type UseOrderCardItemImagesProps = UseOrderCardItemImagesFragment | null
 
 export type UseOrderCardItemImages = Record<string, OrderCardItemImageFragment | null | undefined>
 
+/**
+ * @deprecated Not used anymore
+ * @param orders
+ * @returns
+ */
 export default function useOrderCardItemImages(
   orders?: UseOrderCardItemImagesProps,
 ): UseOrderCardItemImages {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.9",
+  "version": "9.1.0-canary.15",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.9",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/framer-next-pages": "^9.0.4-canary.9",
-    "@graphcommerce/framer-utils": "^9.0.4-canary.9",
-    "@graphcommerce/graphql": "^9.0.4-canary.9",
-    "@graphcommerce/graphql-mesh": "^9.0.4-canary.9",
-    "@graphcommerce/image": "^9.0.4-canary.9",
-    "@graphcommerce/magento-graphql": "^9.0.4-canary.9",
-    "@graphcommerce/magento-store": "^9.0.4-canary.9",
-    "@graphcommerce/next-ui": "^9.0.4-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.9",
-    "@graphcommerce/react-hook-form": "^9.0.4-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.15",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.15",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.15",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.15",
+    "@graphcommerce/graphql": "^9.1.0-canary.15",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.15",
+    "@graphcommerce/image": "^9.1.0-canary.15",
+    "@graphcommerce/magento-graphql": "^9.1.0-canary.15",
+    "@graphcommerce/magento-store": "^9.1.0-canary.15",
+    "@graphcommerce/next-ui": "^9.1.0-canary.15",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.15",
+    "@graphcommerce/react-hook-form": "^9.1.0-canary.15",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.15",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/components/OrderCardItem/OrderCardItem.tsx

@@ -1,21 +0,0 @@
-import type { ProductImage } from '@graphcommerce/graphql-mesh'
-import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
-import type { OrderCardItemFragment } from './OrderCardItem.gql'
-
-export type OrderCardItemProps = OrderCardItemFragment & {
-  thumbnail?: Pick<ProductImage, 'label' | 'url'>
-}
-
-/**
- * @deprecated
- * @public
- */
-export function OrderCardItem(props: OrderCardItemProps) {
-  const { product_sku, product_url_key, thumbnail } = props
-
-  return (
-    <div key={`orderCardItem-${product_sku ?? ''}`}>
-      <OrderCardItemImage thumbnail={thumbnail} url_key={product_url_key ?? ''} />
-    </div>
-  )
-}

package/components/OrderCardItemImage/OrderCardItemImage.tsx

@@ -1,36 +0,0 @@
-import { Image } from '@graphcommerce/image'
-import { extendableComponent } from '@graphcommerce/next-ui'
-import type { SxProps, Theme } from '@mui/material'
-import { Box } from '@mui/material'
-import type { OrderCardItemImageFragment } from '../../hooks/OrderCardItemImage.gql'
-
-export type OrderCardItemImageProps = Omit<OrderCardItemImageFragment, 'uid'> & {
-  sx?: SxProps<Theme>
-}
-
-const componentName = 'OrderCardItemImage'
-const parts = ['image', 'placeholder'] as const
-const { classes } = extendableComponent(componentName, parts)
-
-export function OrderCardItemImage(props: OrderCardItemImageProps) {
-  const { thumbnail, sx = [] } = props
-
-  const sxx: SxProps<Theme> = [{ width: 88, height: 88 }, ...(Array.isArray(sx) ? sx : [sx])]
-
-  return (
-    <>
-      {thumbnail ? (
-        <Image
-          alt={thumbnail?.label ?? ''}
-          width={88}
-          height={88}
-          src={thumbnail?.url ?? ''}
-          className={classes.image}
-          sx={sxx}
-        />
-      ) : (
-        <Box className={classes.placeholder} sx={sxx} />
-      )}
-    </>
-  )
-}