@@ -18,6 +18,7 @@ import {
1818 Button ,
1919 Divider ,
2020 Grid ,
21+ Link as ChakraLink ,
2122 SimpleGrid ,
2223 Skeleton
2324} from '@salesforce/retail-react-app/app/components/shared/ui'
@@ -326,27 +327,46 @@ const AccountOrderDetail = () => {
326327 } ) }
327328
328329 { /* Delivery Shipments */ }
329- { deliveryShipments . map ( ( shipment , index ) => (
330- < React . Fragment key = { `delivery-${ index } ` } >
331- < Stack spacing = { 1 } >
332- < Heading as = "h2" fontSize = "sm" pt = { 1 } >
333- { deliveryShipments . length > 1 ? (
334- < FormattedMessage
335- defaultMessage = "Shipping Method {number}"
336- id = "account_order_detail.heading.shipping_method_number"
337- values = { { number : index + 1 } }
338- />
339- ) : (
340- < FormattedMessage
341- defaultMessage = "Shipping Method"
342- id = "account_order_detail.heading.shipping_method"
343- />
344- ) }
345- </ Heading >
346- < Box >
347- < Text fontSize = "sm" textTransform = "titlecase" >
348- {
349- {
330+ { deliveryShipments . map ( ( shipment , index ) => {
331+ // Hide shipping address for OMS multi-shipment orders
332+ // Can't reliably correlate OMS shipments to ECOM addresses by index
333+ const isOmsOrder = ! ! order ?. omsData
334+ const omsShipment = isOmsOrder
335+ ? order . omsData . shipments ?. [ index ]
336+ : null
337+ const isOmsMultiShipment =
338+ isOmsOrder &&
339+ ( order . omsData . shipments ?. length > 1 ||
340+ order . shipments ?. length > 1 )
341+
342+ const shippingMethodName =
343+ omsShipment ?. provider || shipment . shippingMethod . name
344+ const shippingStatus =
345+ omsShipment ?. status || shipment . shippingStatus
346+ const trackingNumber =
347+ omsShipment ?. trackingNumber || shipment . trackingNumber
348+ const trackingUrl = omsShipment ?. trackingUrl
349+
350+ return (
351+ < React . Fragment key = { `delivery-${ index } ` } >
352+ < Stack spacing = { 1 } >
353+ < Heading as = "h2" fontSize = "sm" pt = { 1 } >
354+ { deliveryShipments . length > 1 ? (
355+ < FormattedMessage
356+ defaultMessage = "Shipping Method {number}"
357+ id = "account_order_detail.heading.shipping_method_number"
358+ values = { { number : index + 1 } }
359+ />
360+ ) : (
361+ < FormattedMessage
362+ defaultMessage = "Shipping Method"
363+ id = "account_order_detail.heading.shipping_method"
364+ />
365+ ) }
366+ </ Heading >
367+ < Box >
368+ < Text fontSize = "sm" textTransform = "titlecase" >
369+ { {
350370 not_shipped : formatMessage ( {
351371 defaultMessage : 'Not shipped' ,
352372 id : 'account_order_detail.shipping_status.not_shipped'
@@ -359,57 +379,68 @@ const AccountOrderDetail = () => {
359379 defaultMessage : 'Shipped' ,
360380 id : 'account_order_detail.shipping_status.shipped'
361381 } )
362- } [ shipment . shippingStatus ]
363- }
364- </ Text >
365- < Text fontSize = "sm" >
366- { shipment . shippingMethod . name }
367- </ Text >
368- { shipment . trackingNumber && (
369- < Text fontSize = "sm" >
370- < FormattedMessage
371- defaultMessage = "Tracking Number"
372- id = "account_order_detail.label.tracking_number"
373- />
374- : { shipment . trackingNumber }
382+ } [ shippingStatus ] || shippingStatus }
375383 </ Text >
376- ) }
377- </ Box >
378- </ Stack >
379- < Stack spacing = { 1 } >
380- < Heading as = "h2" fontSize = "sm" pt = { 1 } >
381- { deliveryShipments . length > 1 ? (
382- < FormattedMessage
383- defaultMessage = "Shipping Address {number}"
384- id = "account_order_detail.heading.shipping_address_number"
385- values = { { number : index + 1 } }
386- />
387- ) : (
388- < FormattedMessage
389- defaultMessage = "Shipping Address"
390- id = "account_order_detail.heading.shipping_address"
391- />
392- ) }
393- </ Heading >
394- < Box >
395- < Text fontSize = "sm" >
396- { shipment . shippingAddress . firstName &&
397- shipment . shippingAddress . lastName
398- ? `${ shipment . shippingAddress . firstName } ${ shipment . shippingAddress . lastName } `
399- : shipment . shippingAddress . fullName }
400- </ Text >
401- < Text fontSize = "sm" >
402- { shipment . shippingAddress . address1 }
403- </ Text >
404- < Text fontSize = "sm" >
405- { shipment . shippingAddress . city } ,{ ' ' }
406- { shipment . shippingAddress . stateCode } { ' ' }
407- { shipment . shippingAddress . postalCode }
408- </ Text >
409- </ Box >
410- </ Stack >
411- </ React . Fragment >
412- ) ) }
384+ < Text fontSize = "sm" > { shippingMethodName } </ Text >
385+ { trackingNumber && (
386+ < Text fontSize = "sm" >
387+ < FormattedMessage
388+ defaultMessage = "Tracking Number"
389+ id = "account_order_detail.label.tracking_number"
390+ />
391+ :{ ' ' }
392+ { trackingUrl ? (
393+ < ChakraLink
394+ href = { trackingUrl }
395+ isExternal
396+ color = "blue.600"
397+ >
398+ { trackingNumber }
399+ </ ChakraLink >
400+ ) : (
401+ trackingNumber
402+ ) }
403+ </ Text >
404+ ) }
405+ </ Box >
406+ </ Stack >
407+ { ! isOmsMultiShipment && (
408+ < Stack spacing = { 1 } >
409+ < Heading as = "h2" fontSize = "sm" pt = { 1 } >
410+ { deliveryShipments . length > 1 ? (
411+ < FormattedMessage
412+ defaultMessage = "Shipping Address {number}"
413+ id = "account_order_detail.heading.shipping_address_number"
414+ values = { { number : index + 1 } }
415+ />
416+ ) : (
417+ < FormattedMessage
418+ defaultMessage = "Shipping Address"
419+ id = "account_order_detail.heading.shipping_address"
420+ />
421+ ) }
422+ </ Heading >
423+ < Box >
424+ < Text fontSize = "sm" >
425+ { shipment . shippingAddress . firstName &&
426+ shipment . shippingAddress . lastName
427+ ? `${ shipment . shippingAddress . firstName } ${ shipment . shippingAddress . lastName } `
428+ : shipment . shippingAddress . fullName }
429+ </ Text >
430+ < Text fontSize = "sm" >
431+ { shipment . shippingAddress . address1 }
432+ </ Text >
433+ < Text fontSize = "sm" >
434+ { shipment . shippingAddress . city } ,{ ' ' }
435+ { shipment . shippingAddress . stateCode } { ' ' }
436+ { shipment . shippingAddress . postalCode }
437+ </ Text >
438+ </ Box >
439+ </ Stack >
440+ ) }
441+ </ React . Fragment >
442+ )
443+ } ) }
413444
414445 { /* Payment Method */ }
415446 { paymentCard && (
0 commit comments