@graphcommerce/magento-customer 9.0.0-canary.65 → 9.0.0-canary.67

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+### Minor Changes
+
+- [#2339](https://github.com/graphcommerce-org/graphcommerce/pull/2339) [`df942e5`](https://github.com/graphcommerce-org/graphcommerce/commit/df942e5726ddb4d7c7d4b583aa474c7c0f0dea7d) - Show actual order status from the backend, improve order state logic ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 9.0.0-canary.65
 
 ### Patch Changes

package/components/GuestOrderOverview/GuestOrderOverviewForm.tsx

@@ -87,7 +87,7 @@ export function GuestOrderOverviewForm() {
       ) : (
         <>
           <Typography sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.lg })}>
-            <OrderStateLabel items={orderData?.guestOrder.items} />
+            <OrderStateLabel {...orderData.guestOrder} />
           </Typography>
           <OrderDetails {...orderData?.guestOrder} />
           <OrderItems {...orderData?.guestOrder} images={images} />

package/components/OrderCard/OrderCard.tsx

@@ -13,7 +13,7 @@ type OrderCardProps = Partial<OrderCardFragment> & {
   sx?: SxProps<Theme>
 }
 
-const componentName = 'OrderCard' as const
+const componentName = 'OrderCard'
 const parts = [
   'orderContainer',
   'orderRow',
@@ -42,7 +42,17 @@ const OrderRow = styled(Box, { name: componentName, target: classes.orderRow })(
 }))
 
 export function OrderCard(props: OrderCardProps) {
-  const { number, shipments, total, items, order_date, images, loading, sx = [] } = props
+  const {
+    number,
+    shipments,
+    total,
+    items,
+    order_date,
+    images,
+    loading,
+    status = '',
+    sx = [],
+  } = props
 
   const totalItems = items?.length ?? 0
   const maxItemsInRow = 5
@@ -96,7 +106,7 @@ export function OrderCard(props: OrderCardProps) {
           <span>#{number}</span>
         </OrderRow>
         <OrderRow>
-          <OrderStateLabel {...props} />
+          <OrderStateLabel {...props} status={status} />
         </OrderRow>
         <Box className={classes.orderProducts}>
           <Box

package/components/OrderStateLabel/OrderStateLabel.graphql

@@ -1,4 +1,5 @@
 fragment OrderStateLabel on CustomerOrder {
+  status
   items {
     quantity_ordered
     quantity_shipped

package/components/OrderStateLabel/OrderStateLabel.tsx

@@ -1,49 +1,29 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import { Box, SxProps, Theme } from '@mui/material'
 import { OrderStateProps, OrderState, getOrderState } from '../../utils'
 
 type OrderStateLabelPropsBase = OrderStateProps
 
-export type OrderStateRenderer = Record<
-  OrderState,
-  (props: OrderStateLabelPropsBase) => React.ReactElement | null
->
-
 export type OrderStateLabelProps = {
-  renderer?: Partial<OrderStateRenderer>
   sx?: SxProps<Theme>
+  short?: boolean
 } & OrderStateLabelPropsBase
 
 type OwnerState = {
   orderState: OrderState
 }
-const componentName = 'OrderStateLabel' as const
+const componentName = 'OrderStateLabel'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
   componentName,
   parts,
 )
 
-const defaultRenderer: OrderStateRenderer = {
-  Ordered: () => <Trans id='Your order is being processed' />,
-  Processing: () => <Trans id='Your order has been invoiced' />,
-  Closed: () => <Trans id='Your order is on its way!' />,
-  Refunded: () => <Trans id='Your order has been refunded' />,
-  Canceled: () => <Trans id='Your order has been canceled' />,
-  Returned: () => <Trans id='Your order has been returned' />,
-  Pending: () => <Trans id='Your order has been partially processed' />,
-}
-
 export function OrderStateLabel(props: OrderStateLabelProps) {
-  const { items, renderer: incomingRenderer, sx = [], ...orderProps } = props
-
-  const renderer: OrderStateRenderer = { ...defaultRenderer, ...incomingRenderer }
-
+  const { sx = [], status, short = false } = props
   const orderState = getOrderState(props)
 
-  const StateLabel = renderer[orderState]
-
   const classes = withState({ orderState })
 
   return (
@@ -54,34 +34,23 @@ export function OrderStateLabel(props: OrderStateLabelProps) {
         (theme) => ({
           fontStyle: 'italic',
           fontWeight: 'normal',
-          '&.orderStateOrdered': {
-            color: theme.palette.secondary.main,
+          '&.orderStatePending': {
+            color: theme.palette.text.disabled,
           },
           '&.orderStateProcessing': {
-            color: theme.palette.secondary.main,
+            color: theme.palette.info.main,
           },
-          '&.orderStateRefunded': {
-            color: theme.palette.primary.main,
-          },
-          '&.orderStateClosed': {
+          '&.orderStateComplete': {
             color: theme.palette.success.main,
-            fontStyle: 'normal',
-            fontWeight: 600,
-          },
-          '&.orderStateCanceled': {
-            color: theme.palette.primary.main,
           },
-          '&.orderStateReturned': {
-            color: theme.palette.secondary.main,
-          },
-          '&.orderStatePending': {
-            color: theme.palette.secondary.main,
+          '&.orderStateClosed': {
+            color: theme.palette.text.disabled,
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <StateLabel items={items} {...orderProps} />
+      {short ? status : <Trans>Order status: {status}</Trans>}
     </Box>
   )
 }

package/components/OrderStateLabel/OrderStateLabelInline.tsx

@@ -1,26 +1,14 @@
-import { Trans } from '@lingui/react'
-import { OrderStateLabel, OrderStateLabelProps, OrderStateRenderer } from './OrderStateLabel'
+import { OrderStateLabel, OrderStateLabelProps } from './OrderStateLabel'
 
 type OrderStateLabelInlineProps = OrderStateLabelProps
 
-const defaultRenderer: OrderStateRenderer = {
-  Ordered: () => <Trans id='processed' />,
-  Processing: () => <Trans id='invoiced' />,
-  Closed: () => <Trans id='shipped' />,
-  Refunded: () => <Trans id='refunded' />,
-  Canceled: () => <Trans id='canceled' />,
-  Returned: () => <Trans id='returned' />,
-  Pending: () => <Trans id='partially processed' />,
-}
-
 export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
-  const { sx = [], renderer: incomingRenderer } = props
-  const renderer: OrderStateRenderer = { ...defaultRenderer, ...incomingRenderer }
+  const { sx = [] } = props
 
   return (
     <OrderStateLabel
       {...props}
-      renderer={renderer}
+      short
       sx={[
         (theme) => ({
           fontStyle: 'normal',
@@ -30,18 +18,20 @@ export function OrderStateLabelInline(props: OrderStateLabelInlineProps) {
           fontWeight: 'normal',
           background: `${theme.palette.secondary.main}20`,
 
-          '&.orderStateRefunded': {
-            color: theme.palette.primary.main,
-            background: `${theme.palette.primary.main}20`,
+          '&.orderStatePending': {
+            color: theme.palette.text.disabled,
           },
-          '&.orderStateClosed': {
+          '&.orderStateProcessing': {
+            color: theme.palette.info.main,
+            background: `${theme.palette.info.main}20`,
+          },
+          '&.orderStateComplete': {
             color: theme.palette.success.main,
-            fontWeight: 'normal',
             background: `${theme.palette.success.main}20`,
           },
-          '&.orderStateCanceled': {
-            color: theme.palette.primary.main,
-            background: `${theme.palette.primary.main}20`,
+          '&.orderStateClosed': {
+            color: theme.palette.text.disabled,
+            background: `${theme.palette.text.disabled}20`,
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/package.json

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

package/utils/orderState.ts

@@ -1,43 +1,51 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { OrderDetailsFragment } from '../components/OrderDetails/OrderDetails.gql'
 import { OrderStateLabelFragment } from '../components/OrderStateLabel/OrderStateLabel.gql'
 
-export type OrderState =
-  | 'Ordered'
-  | 'Processing'
-  | 'Closed'
-  | 'Refunded'
-  | 'Canceled'
-  | 'Returned'
-  | 'Pending'
+export type OrderState = 'pending' | 'processing' | 'complete' | 'closed'
 
 export type OrderStateProps = Pick<OrderDetailsFragment, 'shipping_address' | 'shipments'> &
   OrderStateLabelFragment
 
-export function getOrderState(props: OrderStateProps) {
+export function getOrderState(props: OrderStateProps): OrderState {
   const { items, shipping_address } = props
 
-  let orderState: OrderState = 'Pending'
-  if (items?.every((item) => item?.quantity_ordered === item?.quantity_invoiced))
-    orderState = 'Processing'
-  if (items?.every((item) => item?.quantity_ordered === item?.quantity_shipped))
-    orderState = 'Closed'
-  if (items?.every((item) => item?.quantity_ordered === item?.quantity_refunded))
-    orderState = 'Refunded'
-  if (items?.every((item) => item?.quantity_ordered === item?.quantity_canceled))
-    orderState = 'Canceled'
-  if (items?.every((item) => item?.quantity_ordered === item?.quantity_returned))
-    orderState = 'Returned'
-
-  if (orderState === 'Processing' && !shipping_address) {
-    orderState = 'Closed'
-  }
-
-  return orderState
+  const itemss = filterNonNullableKeys(items, [
+    'quantity_ordered',
+    'quantity_canceled',
+    'quantity_invoiced',
+    'quantity_refunded',
+    'quantity_shipped',
+  ]).map((i) => ({
+    ordered: i.quantity_ordered,
+    canceled: i.quantity_canceled,
+    invoiced: i.quantity_invoiced,
+    refunded: i.quantity_refunded,
+    returned: i.quantity_returned ?? 0,
+    shipped: i.quantity_shipped,
+  }))
+
+  const nothingInvoiced = itemss.every((i) => i.invoiced === 0)
+  const nothingShipped = itemss.every((i) => i.shipped === 0)
+
+  const needsInvoicing = itemss.some((i) => i.ordered - i.canceled - i.invoiced)
+  const needsShipping = itemss.some((i) => {
+    if (!shipping_address) return 0
+    return i.ordered <= i.canceled - i.shipped - i.refunded
+  })
+
+  if (nothingInvoiced && nothingShipped && needsInvoicing && needsShipping) return 'pending'
+  if (needsShipping || needsInvoicing) return 'processing'
+
+  const canRefundOrReturn = itemss.some(
+    (i) => i.ordered - i.canceled - Math.max(i.refunded, i.returned),
+  )
+  return canRefundOrReturn ? 'complete' : 'closed'
 }
 
 export function canCancelOrder(props: OrderStateProps) {
   const state = getOrderState(props)
   const { shipments } = props
 
-  return (state === 'Pending' || state === 'Processing') && !shipments?.length
+  return (state === 'pending' || state === 'processing') && !shipments?.length
 }