feat(dashboard): add input field for tracking_url and label_url in shipment form (#13787)

* fix: fix label init logic

* feat(dashboard): add input field for tracking_url and label_url in shipment form

* fix: cleanup leftovers

* chore: update schema

* fix: filter out empty rows

* chore: remove unrelated change

* fix: allow any filled field
This commit is contained in:
Kevin Leung
2025-10-27 08:26:49 -04:00
committed by GitHub
parent cc2614ded7
commit 2eca81ec0f
4 changed files with 103 additions and 28 deletions
+5
View File
@@ -0,0 +1,5 @@
---
"@medusajs/dashboard": patch
---
add input field for tracking_url and label_url in shipment form
@@ -5081,6 +5081,12 @@
"trackingNumber": { "trackingNumber": {
"type": "string" "type": "string"
}, },
"trackingUrl": {
"type": "string"
},
"labelUrl": {
"type": "string"
},
"addTracking": { "addTracking": {
"type": "string" "type": "string"
}, },
@@ -5097,6 +5103,8 @@
"required": [ "required": [
"title", "title",
"trackingNumber", "trackingNumber",
"trackingUrl",
"labelUrl",
"addTracking", "addTracking",
"sendNotification", "sendNotification",
"sendNotificationHint", "sendNotificationHint",
@@ -1350,6 +1350,8 @@
"shipment": { "shipment": {
"title": "Mark fulfillment shipped", "title": "Mark fulfillment shipped",
"trackingNumber": "Tracking number", "trackingNumber": "Tracking number",
"trackingUrl": "Tracking URL",
"labelUrl": "Label URL",
"addTracking": "Add tracking number", "addTracking": "Add tracking number",
"sendNotification": "Send notification", "sendNotification": "Send notification",
"sendNotificationHint": "Notify the customer about this shipment.", "sendNotificationHint": "Notify the customer about this shipment.",
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"
import * as zod from "zod" import * as zod from "zod"
import { AdminFulfillment, AdminOrder } from "@medusajs/types" import { AdminFulfillment, AdminOrder } from "@medusajs/types"
import { Button, Heading, Input, Switch, toast } from "@medusajs/ui" import { Button, clx, Heading, Input, Switch, toast } from "@medusajs/ui"
import { useFieldArray, useForm } from "react-hook-form" import { useFieldArray, useForm } from "react-hook-form"
import { Form } from "../../../../../components/common/form" import { Form } from "../../../../../components/common/form"
@@ -44,11 +44,11 @@ export function OrderCreateShipmentForm({
const handleSubmit = form.handleSubmit(async (data) => { const handleSubmit = form.handleSubmit(async (data) => {
const addedLabels = data.labels const addedLabels = data.labels
.filter((l) => !!l.tracking_number) .filter((l) => !!l.tracking_number || !!l.tracking_url || !!l.label_url)
.map((l) => ({ .map((l) => ({
tracking_number: l.tracking_number, tracking_number: l.tracking_number,
tracking_url: "#", tracking_url: l.tracking_url || "#",
label_url: "#", label_url: l.label_url || "#",
})) }))
await createShipment( await createShipment(
@@ -89,33 +89,93 @@ export function OrderCreateShipmentForm({
{t("orders.shipment.title")} {t("orders.shipment.title")}
</Heading> </Heading>
{labels.map((label, index) => ( <div className="flex flex-col max-md:gap-y-2 max-md:divide-y">
<Form.Field {labels.map((label, index) => (
key={label.id} <div
control={form.control} key={label.id}
name={`labels.${index}.tracking_number`} className={clx(
render={({ field }) => { "grid grid-cols-1 gap-x-4 md:grid-cols-3",
return ( { "max-md:pt-4": index > 0 }
<Form.Item className="mb-4"> )}
{index === 0 && ( >
<Form.Label> <Form.Field
{t("orders.shipment.trackingNumber")} control={form.control}
</Form.Label> name={`labels.${index}.tracking_number`}
)} render={({ field }) => {
<Form.Control> return (
<Input {...field} placeholder="123-456-789" /> <Form.Item className="mb-2">
</Form.Control> <Form.Label
<Form.ErrorMessage /> className={clx({ "md:hidden": index > 0 })}
</Form.Item> >
) {t("orders.shipment.trackingNumber")}
}} </Form.Label>
/>
))} <Form.Control>
<Input {...field} placeholder="123-456-789" />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name={`labels.${index}.tracking_url`}
render={({ field }) => {
return (
<Form.Item className="mb-2">
<Form.Label
className={clx({ "md:hidden": index > 0 })}
>
{t("orders.shipment.trackingUrl")}
</Form.Label>
<Form.Control>
<Input
{...field}
placeholder="https://example.com/tracking/123"
/>
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
<Form.Field
control={form.control}
name={`labels.${index}.label_url`}
render={({ field }) => {
return (
<Form.Item className="mb-2">
<Form.Label
className={clx({ "md:hidden": index > 0 })}
>
{t("orders.shipment.labelUrl")}
</Form.Label>
<Form.Control>
<Input
{...field}
placeholder="https://example.com/label/123"
/>
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
))}
</div>
<Button <Button
type="button" type="button"
onClick={() => append({ tracking_number: "" })} onClick={() =>
className="self-end" append({
tracking_number: "",
label_url: "",
tracking_url: "",
})
}
className="mt-2 self-end"
variant="secondary" variant="secondary"
> >
{t("orders.shipment.addTracking")} {t("orders.shipment.addTracking")}