fix(admin): draft order shipping details (#3500)

* wip: fix draft order shipping details screen

* fix: reset address, refactor and cleanup

* fix: use const

* Create .changeset/violet-sloths-train.md

* fix: required fields, reset province

---------

Co-authored-by: fPolic <frane@medusajs.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

.changeset/violet-sloths-train.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+fix(admin-ui): draft order shipping details

packages/admin-ui/ui/src/domain/orders/new/components/shipping-details.tsx

@@ -1,14 +1,14 @@
 import qs from "query-string"
 import { useContext, useEffect, useMemo, useState } from "react"
-import Spinner from "../../../../components/atoms/spinner"
+import { Controller, useWatch } from "react-hook-form"
+
+import { useAdminCustomer } from "medusa-react"
+
 import Button from "../../../../components/fundamentals/button"
 import AddressForm, {
   AddressType,
 } from "../../../../components/templates/address-form"
 import Medusa from "../../../../services/api"
-
-import { useAdminCustomer, useAdminCustomers } from "medusa-react"
-import { Controller, useWatch } from "react-hook-form"
 import LockIcon from "../../../../components/fundamentals/icons/lock-icon"
 import InputField from "../../../../components/molecules/input"
 import { SteppedContext } from "../../../../components/molecules/modal/stepped-modal"
@@ -18,14 +18,13 @@ import { Option } from "../../../../types/shared"
 import isNullishObject from "../../../../utils/is-nullish-object"
 import mapAddressToForm from "../../../../utils/map-address-to-form"
 import { nestedForm } from "../../../../utils/nested-form"
+import { isValidEmail } from "../../../../utils/email"
 import { useNewOrderForm } from "../form"
 
 const ShippingDetails = () => {
   const [addNew, setAddNew] = useState(false)
   const { disableNextPage, enableNextPage } = useContext(SteppedContext)
 
-  const { customers } = useAdminCustomers()
-
   const {
     context: { validCountries },
     form,
@@ -57,7 +56,7 @@ const ShippingDetails = () => {
     name: "customer_id",
   })
 
-  const { customer, isLoading } = useAdminCustomer(customerId?.value!, {
+  const { customer } = useAdminCustomer(customerId?.value!, {
     enabled: !!customerId?.value,
   })
 
@@ -72,13 +71,15 @@ const ShippingDetails = () => {
       ({ country_code }) =>
         !country_code || validCountryCodes.includes(country_code)
     )
-  }, [customer])
+  }, [customer, validCountries])
 
   const onCustomerSelect = (val: Option) => {
     const email = /\(([^()]*)\)$/.exec(val?.label)
 
     if (email) {
       form.setValue("email", email[1])
+    } else {
+      form.setValue("email", "")
     }
   }
 
@@ -104,23 +105,17 @@ const ShippingDetails = () => {
     name: "email",
   })
 
-  useEffect(() => {
-    if (!email) {
-      disableNextPage()
-    } else {
-      enableNextPage()
-    }
-  }, [email])
-
   const shippingAddress = useWatch({
     control: form.control,
     name: "shipping_address",
   })
 
-  const [requiredFields, setRequiredFields] = useState(false)
+  /**
-
+   * Effect used to enable next step.
+   * A user can go to the next step if valid email is provided and all required address info is filled.
+   */
   useEffect(() => {
-    if (!email) {
+    if (!email || !isValidEmail(email)) {
       disableNextPage()
       return
     }
@@ -135,16 +130,30 @@ const ShippingDetails = () => {
         !shippingAddress.postal_code
       ) {
         disableNextPage()
-        setRequiredFields(true)
       } else {
         enableNextPage()
       }
-    } else {
-      enableNextPage()
-      setRequiredFields(false)
     }
   }, [shippingAddress, email])
 
+  useEffect(() => {
+    // reset shipping address info when a different customer is selected
+    // or when "Create new" is clicked
+    form.setValue("shipping_address.first_name", "")
+    form.setValue("shipping_address.last_name", "")
+    form.setValue("shipping_address.phone", "")
+    form.setValue("shipping_address.address_1", "")
+    form.setValue("shipping_address.address_2", "")
+    form.setValue("shipping_address.city", "")
+    form.setValue("shipping_address.country_code", null)
+    form.setValue("shipping_address.province", "")
+    form.setValue("shipping_address.postal_code", "")
+  }, [customerId?.value, addNew])
+
+  useEffect(() => {
+    setAddNew(false)
+  }, [customerId?.value])
+
   return (
     <div className="flex min-h-[705px] flex-col gap-y-8">
       <div>
@@ -192,11 +201,7 @@ const ShippingDetails = () => {
         />
       </div>
 
-      {isLoading ? (
+      {validAddresses.length && !addNew ? (
-        <div>
-          <Spinner variant="primary" />
-        </div>
-      ) : validAddresses.length && !addNew ? (
         <div>
           <span className="inter-base-semibold">Choose existing addresses</span>
           <Controller
@@ -244,7 +249,6 @@ const ShippingDetails = () => {
             form={nestedForm(form, "shipping_address")}
             countryOptions={validCountries}
             type={AddressType.SHIPPING}
-            required={requiredFields}
           />
         </div>
       )}

packages/admin-ui/ui/src/utils/email.ts

@@ -0,0 +1,9 @@
+const EMAIL_REGEX =
+  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+/**
+ * Validate if provided string could be an email
+ */
+export function isValidEmail(email: string) {
+  return email?.match(EMAIL_REGEX)
+}