OrderTotals/OrderDetails now only renders addres information if avail…

…able
graphcommerce-org · Jan 30, 2025 · dc387da · dc387da
1 parent 7980d39
commit dc387da
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/.changeset/rich-weeks-try.md b/.changeset/rich-weeks-try.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-customer': patch
+---
+
+OrderTotals/OrderDetails now only renders addres information if available
diff --git a/packages/magento-customer/components/OrderDetails/OrderDetails.tsx b/packages/magento-customer/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

diff --git a/packages/magento-customer/components/OrderDetails/OrderTotals.tsx b/packages/magento-customer/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 })} />