@graphcommerce/magento-customer 6.2.0-canary.14 → 6.2.0-canary.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 6.2.0-canary.15
+
+### Minor Changes
+
+- [#1926](https://github.com/graphcommerce-org/graphcommerce/pull/1926) [`ab8877fdb`](https://github.com/graphcommerce-org/graphcommerce/commit/ab8877fdb6147960ce656d28306d719e92f6de68) - Made the follow order link in the order card & order details a working <Link /> if provided from magento backend. ([@JoshuaS98](https://github.com/JoshuaS98))
+
 ## 6.2.0-canary.14
 
 ## 6.2.0-canary.13

package/components/OrderDetails/OrderDetails.tsx

@@ -26,7 +26,6 @@ const parts = [
   'totalsRow',
   'totalsDivider',
   'totalsVat',
-  'iconContainer',
   'invoice',
 ] as const
 const { classes } = extendableComponent(componentName, parts)
@@ -85,18 +84,11 @@ const TotalsVat = styled(TotalsRow, { target: classes.totalsVat })(({ theme }) =
     padding: `${theme.spacings.xxs} 0`,
   }),
 )
-const IconContainer = styled(TotalsRow, { target: classes.iconContainer })(({ theme }) =>
-  theme.unstable_sx({
-    marginLeft: '-6px',
-    '& > div': {
-      padding: '4px 0',
-    },
-  }),
-)
 
 const Invoice = styled(TotalsRow, { target: classes.invoice })(({ theme }) =>
   theme.unstable_sx({
     display: 'flex',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     color: 'primary.main',
   }),
@@ -248,9 +240,7 @@ export function OrderDetails(props: OrderDetailsProps) {
               <>
                 <div>{shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}</div>
                 {shipments?.[0]?.tracking?.[0] && (
-                  <IconContainer>
-                    <TrackingLink {...shipments?.[0].tracking?.[0]} />
-                  </IconContainer>
+                  <TrackingLink {...shipments?.[0].tracking?.[0]} sx={{ padding: '4px 0' }} />
                 )}
               </>
             )}
@@ -275,12 +265,10 @@ export function OrderDetails(props: OrderDetailsProps) {
                 <div>{payment_methods[0].name}</div>
 
                 {invoices && invoices?.length > 0 && (
-                  <IconContainer>
-                    <Invoice>
-                      <IconSvg src={iconInvoice} size='small' />
-                      {invoices?.[0]?.number}
-                    </Invoice>
-                  </IconContainer>
+                  <Invoice>
+                    <IconSvg src={iconInvoice} size='small' />
+                    {invoices?.[0]?.number}
+                  </Invoice>
                 )}
               </>
             )}

package/components/TrackingLink/TrackingLink.tsx

@@ -1,7 +1,6 @@
 import { IconSvg, iconLocation } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
-import React from 'react'
+import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import { TrackingLinkFragment } from './TrackingLink.gql'
 
 export type TrackingLinkProps = TrackingLinkFragment & { sx?: SxProps<Theme> }
@@ -9,6 +8,8 @@ export type TrackingLinkProps = TrackingLinkFragment & { sx?: SxProps<Theme> }
 export function TrackingLink(props: TrackingLinkProps) {
   const { number, sx = [] } = props
 
+  const validUrl = number?.startsWith('http://') || number?.startsWith('https://')
+
   return (
     <Box
       className='TrackingLink-root'
@@ -21,12 +22,20 @@ export function TrackingLink(props: TrackingLinkProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {number && (
-        <>
+      {number && validUrl && (
+        <Link
+          onClick={(e) => e.stopPropagation()}
+          href={number}
+          target='_blank'
+          underline='hover'
+          sx={{ display: 'inline-flex', alignItems: 'center' }}
+        >
           <IconSvg src={iconLocation} size='small' />
           <Trans id='Follow order' />
-        </>
+        </Link>
       )}
+
+      {number && !validUrl && <Typography>{number}</Typography>}
     </Box>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.14",
+  "version": "6.2.0-canary.15",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.14",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.14",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.14"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.15",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.15",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.15"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.14",
-    "@graphcommerce/framer-utils": "6.2.0-canary.14",
-    "@graphcommerce/graphql": "6.2.0-canary.14",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.14",
-    "@graphcommerce/image": "6.2.0-canary.14",
-    "@graphcommerce/magento-graphql": "6.2.0-canary.14",
-    "@graphcommerce/magento-store": "6.2.0-canary.14",
-    "@graphcommerce/next-ui": "6.2.0-canary.14",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.14"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.15",
+    "@graphcommerce/framer-utils": "6.2.0-canary.15",
+    "@graphcommerce/graphql": "6.2.0-canary.15",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.15",
+    "@graphcommerce/image": "6.2.0-canary.15",
+    "@graphcommerce/magento-graphql": "6.2.0-canary.15",
+    "@graphcommerce/magento-store": "6.2.0-canary.15",
+    "@graphcommerce/next-ui": "6.2.0-canary.15",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.15"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",