feat(dashboard): update display of tracking/label URLs on order details (#11613)

### Overview

This PR updates the fulfillment label rendering by replacing the deprecated .url field with the new tracking_url and label_url fields, following the MedusaJS FulfillmentLabel model.

### Changes

- Implemented conditional rendering for both tracking_url and label_url.
- If a tracking_url exists, it is displayed as a clickable link.
- Similarly, if a label_url exists, it is displayed as a clickable link.
- If neither link is provided, only the tracking number is shown.
- Maintained existing styling for interactive elements.

![image](https://github.com/user-attachments/assets/187bd8d5-d6c2-4f06-8f61-f9bb7d02da11)

### Reference

This update is based on the MedusaJS FulfillmentLabel model:
https://docs.medusajs.com/resources/references/fulfillment/models/FulfillmentLabel

Please review the changes and provide feedback for further improvements.


Co-authored-by: William Bouchard <46496014+willbouch@users.noreply.github.com>
This commit is contained in:
docloulou
2025-09-12 20:15:43 +02:00
committed by GitHub
parent 90cc3f42d9
commit 5e5f628d87
2 changed files with 35 additions and 13 deletions

View File

@@ -0,0 +1,5 @@
---
"@medusajs/dashboard": patch
---
feat(dashboard): update display of tracking/label URLs on order details

View File

@@ -320,6 +320,8 @@ const Fulfillment = ({
throw error
}
const isValidUrl = (url?: string) => url && url.length > 0 && url !== "#"
return (
<Container className="divide-y p-0">
<div className="flex items-center justify-between px-6 py-4">
@@ -408,22 +410,37 @@ const Fulfillment = ({
{fulfillment.labels && fulfillment.labels.length > 0 ? (
<ul>
{fulfillment.labels.map((tlink) => {
const hasUrl =
tlink.url && tlink.url.length > 0 && tlink.url !== "#"
const hasTrackingUrl = isValidUrl(tlink.tracking_url)
const hasLabelUrl = isValidUrl(tlink.label_url)
if (hasUrl) {
if (hasTrackingUrl || hasLabelUrl) {
return (
<li key={tlink.tracking_number}>
<a
href={tlink.url}
target="_blank"
rel="noopener noreferrer"
className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg"
>
<Text size="small" leading="compact">
{tlink.tracking_number}
</Text>
</a>
{hasTrackingUrl && (
<a
href={tlink.tracking_url}
target="_blank"
rel="noopener noreferrer"
className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg"
>
<Text size="small" leading="compact" as="span">
{tlink.tracking_number}
</Text>
</a>
)}
{hasTrackingUrl && hasLabelUrl && " - "}
{hasLabelUrl && (
<a
href={tlink.label_url}
target="_blank"
rel="noopener noreferrer"
className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg"
>
<Text size="small" leading="compact" as="span">
Label
</Text>
</a>
)}
</li>
)
}