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 23:26:49 +11:00
committed by GitHub
parent cc2614ded7
commit 2eca81ec0f
4 changed files with 103 additions and 28 deletions

View File

@@ -5081,6 +5081,12 @@
"trackingNumber": {
"type": "string"
},
"trackingUrl": {
"type": "string"
},
"labelUrl": {
"type": "string"
},
"addTracking": {
"type": "string"
},
@@ -5097,6 +5103,8 @@
"required": [
"title",
"trackingNumber",
"trackingUrl",
"labelUrl",
"addTracking",
"sendNotification",
"sendNotificationHint",

View File

@@ -1350,6 +1350,8 @@
"shipment": {
"title": "Mark fulfillment shipped",
"trackingNumber": "Tracking number",
"trackingUrl": "Tracking URL",
"labelUrl": "Label URL",
"addTracking": "Add tracking number",
"sendNotification": "Send notification",
"sendNotificationHint": "Notify the customer about this shipment.",

View File

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"
import * as zod from "zod"
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 { Form } from "../../../../../components/common/form"
@@ -44,11 +44,11 @@ export function OrderCreateShipmentForm({
const handleSubmit = form.handleSubmit(async (data) => {
const addedLabels = data.labels
.filter((l) => !!l.tracking_number)
.filter((l) => !!l.tracking_number || !!l.tracking_url || !!l.label_url)
.map((l) => ({
tracking_number: l.tracking_number,
tracking_url: "#",
label_url: "#",
tracking_url: l.tracking_url || "#",
label_url: l.label_url || "#",
}))
await createShipment(
@@ -89,33 +89,93 @@ export function OrderCreateShipmentForm({
{t("orders.shipment.title")}
</Heading>
{labels.map((label, index) => (
<Form.Field
key={label.id}
control={form.control}
name={`labels.${index}.tracking_number`}
render={({ field }) => {
return (
<Form.Item className="mb-4">
{index === 0 && (
<Form.Label>
{t("orders.shipment.trackingNumber")}
</Form.Label>
)}
<Form.Control>
<Input {...field} placeholder="123-456-789" />
</Form.Control>
<Form.ErrorMessage />
</Form.Item>
)
}}
/>
))}
<div className="flex flex-col max-md:gap-y-2 max-md:divide-y">
{labels.map((label, index) => (
<div
key={label.id}
className={clx(
"grid grid-cols-1 gap-x-4 md:grid-cols-3",
{ "max-md:pt-4": index > 0 }
)}
>
<Form.Field
control={form.control}
name={`labels.${index}.tracking_number`}
render={({ field }) => {
return (
<Form.Item className="mb-2">
<Form.Label
className={clx({ "md:hidden": index > 0 })}
>
{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
type="button"
onClick={() => append({ tracking_number: "" })}
className="self-end"
onClick={() =>
append({
tracking_number: "",
label_url: "",
tracking_url: "",
})
}
className="mt-2 self-end"
variant="secondary"
>
{t("orders.shipment.addTracking")}