Merge pull request #2091 from graphcommerce-org/feature/GCOM-1255

Update orderDetails and styling (GCOM-1255)
graphcommerce-org · Nov 6, 2023 · c3e459b · c3e459b
2 parents 4150987 + bef5065
commit c3e459b
Show file tree

Hide file tree

Showing 18 changed files with 308 additions and 433 deletions.
diff --git a/.changeset/curvy-hairs-suffer.md b/.changeset/curvy-hairs-suffer.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-customer': patch
+---
+
+Update OrderDetails and styling
diff --git a/examples/magento-graphcms/locales/de.po b/examples/magento-graphcms/locales/de.po
@@ -418,6 +418,9 @@ msgstr "Bestellung #{orderId}"
 msgid "Order before 22:00"
 msgstr "Bestellen Sie vor 22:00 Uhr"
 
+msgid "Order date"
+msgstr "Auftragsdatum"
+
 msgid "Order not found"
 msgstr "Bestellung nicht gefunden"
 

diff --git a/examples/magento-graphcms/locales/en.po b/examples/magento-graphcms/locales/en.po
@@ -418,6 +418,9 @@ msgstr "Order #{orderId}"
 msgid "Order before 22:00"
 msgstr "Order before 22:00"
 
+msgid "Order date"
+msgstr "Order date"
+
 msgid "Order not found"
 msgstr "Order not found"
 

diff --git a/examples/magento-graphcms/locales/es.po b/examples/magento-graphcms/locales/es.po
@@ -418,8 +418,11 @@ msgstr "Pedido #{orderId}"
 msgid "Order before 22:00"
 msgstr "Pedido antes de las 22:00"
 
+msgid "Order date"
+msgstr "Besteldatum"
+
 msgid "Order not found"
-msgstr "Pedido no encontrado"
+msgstr "fecha de orden"
 
 msgid "Order number"
 msgstr "Número de pedido"

diff --git a/examples/magento-graphcms/locales/fr.po b/examples/magento-graphcms/locales/fr.po
@@ -418,6 +418,9 @@ msgstr "Commande #{orderId}"
 msgid "Order before 22:00"
 msgstr "Commandez avant 22:00"
 
+msgid "Order date"
+msgstr "Date de commande"
+
 msgid "Order not found"
 msgstr "Commande non trouvée"
 

diff --git a/examples/magento-graphcms/locales/it.po b/examples/magento-graphcms/locales/it.po
@@ -418,6 +418,9 @@ msgstr "Ordine #{orderId}"
 msgid "Order before 22:00"
 msgstr "Ordina prima delle 22:00"
 
+msgid "Order date"
+msgstr "data dell'ordine"
+
 msgid "Order not found"
 msgstr "Ordine non trovato"
 

diff --git a/examples/magento-graphcms/locales/nl.po b/examples/magento-graphcms/locales/nl.po
@@ -418,6 +418,9 @@ msgstr "Bestelling #{orderId}"
 msgid "Order before 22:00"
 msgstr "Bestel voor 22:00"
 
+msgid "Order date"
+msgstr "Besteldatum"
+
 msgid "Order not found"
 msgstr "Bestelling niet gevonden"
 

diff --git a/examples/magento-graphcms/pages/account/index.tsx b/examples/magento-graphcms/pages/account/index.tsx
@@ -97,20 +97,7 @@ function AccountIndexPage() {
                       <TimeAgo date={latestOrderDate} locale={locale} />
                     </time>
                     {', '}
-                    {latestOrder?.items && (
-                      <OrderStateLabelInline
-                        items={latestOrder?.items}
-                        renderer={{
-                          Ordered: () => <Trans id='processed' />,
-                          Invoiced: () => <Trans id='invoiced' />,
-                          Shipped: () => <Trans id='shipped' />,
-                          Refunded: () => <Trans id='refunded' />,
-                          Canceled: () => <Trans id='canceled' />,
-                          Returned: () => <Trans id='returned' />,
-                          Partial: () => <Trans id='partially processed' />,
-                        }}
-                      />
-                    )}
+                    {latestOrder?.items && <OrderStateLabelInline items={latestOrder?.items} />}
                   </>
                 ) : undefined
               }

diff --git a/examples/magento-graphcms/pages/account/orders/view.tsx b/examples/magento-graphcms/pages/account/orders/view.tsx
@@ -4,8 +4,10 @@ import {
   WaitForCustomer,
   useOrderCardItemImages,
   OrderDetails,
+  OrderTotals,
   OrderItems,
   OrderDetailPageDocument,
+  OrderStateLabel,
 } from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument, PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
@@ -17,7 +19,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Container } from '@mui/material'
+import { Container, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { LayoutOverlay, LayoutOverlayProps } from '../../../components'
 import { graphqlSsrClient, graphqlSharedClient } from '../../../lib/graphql/graphqlSsrClient'
@@ -32,10 +34,9 @@ function OrderDetailPage() {
     fetchPolicy: 'cache-and-network',
     variables: { orderNumber: orderId as string },
   })
-  const { data, loading } = orders
+  const { data } = orders
   const images = useOrderCardItemImages(data?.customer?.orders)
   const order = data?.customer?.orders?.items?.[0]
-  const isLoading = orderId ? loading : true
 
   return (
     <>
@@ -52,7 +53,11 @@ function OrderDetailPage() {
             </IconHeader>
           )}
 
-          <LayoutTitle icon={iconBox}>
+          <LayoutTitle
+            icon={iconBox}
+            gutterBottom={false}
+            sx={(theme) => ({ mb: theme.spacings.xxs })}
+          >
             <Trans id='Order #{orderId}' values={{ orderId }} />
           </LayoutTitle>
 
@@ -62,8 +67,12 @@ function OrderDetailPage() {
                 title={i18n._(/* i18n */ 'Order #{orderId}', { orderId })}
                 metaRobots={['noindex']}
               />
-              <OrderItems {...order} loading={isLoading} images={images} />
-              <OrderDetails {...order} loading={isLoading} />
+              <Typography sx={(theme) => ({ textAlign: 'center', mb: theme.spacings.lg })}>
+                <OrderStateLabel items={order.items} />
+              </Typography>
+              <OrderDetails {...order} />
+              <OrderItems {...order} images={images} />
+              <OrderTotals {...order} />
             </>
           )}
         </WaitForCustomer>

diff --git a/packages/magento-customer/components/OrderCard/OrderCard.tsx b/packages/magento-customer/components/OrderCard/OrderCard.tsx
@@ -99,18 +99,7 @@ export function OrderCard(props: OrderCardProps) {
           <span>#{number}</span>
         </OrderRow>
         <OrderRow>
-          <OrderStateLabel
-            items={items}
-            renderer={{
-              Ordered: () => <Trans id='Your order is being processed' />,
-              Invoiced: () => <Trans id='Your order has been invoiced' />,
-              Shipped: () => <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' />,
-              Partial: () => <Trans id='Your order has been partially processed' />,
-            }}
-          />
+          <OrderStateLabel items={items} />
         </OrderRow>
         <Box className={classes.orderProducts}>
           <Box