feat(dashboard): Add first and last name inputs to update order shipping and billing address forms (#14394)

* Add first_name and last_name to order edit addresses forms

* Add changeset

.changeset/empty-rockets-sink.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): Add first and last name inputs to update order shipping and billing address forms

packages/admin/dashboard/src/routes/orders/order-edit-billing-address/components/edit-order-billing-address-form/edit-order-billing-address-form.tsx

@@ -16,6 +16,8 @@ type EditOrderBillingAddressFormProps = {
 }
 
 const EditOrderBillingAddressSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional(),
   address_1: zod.string().min(1),
   address_2: zod.string().optional(),
   country_code: zod.string().min(2).max(2),
@@ -34,6 +36,8 @@ export function EditOrderBillingAddressForm({
 
   const form = useForm<zod.infer<typeof EditOrderBillingAddressSchema>>({
     defaultValues: {
+      first_name: order.billing_address?.first_name || "",
+      last_name: order.billing_address?.last_name || "",
       address_1: order.billing_address?.address_1 || "",
       address_2: order.billing_address?.address_2 || "",
       city: order.billing_address?.city || "",
@@ -158,6 +162,36 @@ export function EditOrderBillingAddressForm({
                 )
               }}
             />
+            <Form.Field
+              control={form.control}
+              name="first_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="last_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
             <Form.Field
               control={form.control}
               name="company"

packages/admin/dashboard/src/routes/orders/order-edit-shipping-address/components/edit-order-shipping-address-form/edit-order-shipping-address-form.tsx

@@ -16,6 +16,8 @@ type EditOrderShippingAddressFormProps = {
 }
 
 const EditOrderShippingAddressSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional(),
   address_1: zod.string().min(1),
   address_2: zod.string().optional(),
   country_code: zod.string().min(2).max(2),
@@ -34,6 +36,8 @@ export function EditOrderShippingAddressForm({
 
   const form = useForm<zod.infer<typeof EditOrderShippingAddressSchema>>({
     defaultValues: {
+      first_name: order.shipping_address?.first_name || "",
+      last_name: order.shipping_address?.last_name || "",
       address_1: order.shipping_address?.address_1 || "",
       address_2: order.shipping_address?.address_2 || "",
       city: order.shipping_address?.city || "",
@@ -158,6 +162,34 @@ export function EditOrderShippingAddressForm({
                 )
               }}
             />
+            <Form.Field
+              control={form.control}
+              name="first_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="last_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                  </Form.Item>
+                )
+              }}
+            />
             <Form.Field
               control={form.control}
               name="company"