From a3a7ace0c0334b05e9c50b9896a8d9ad8e516a49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Sun, 19 Mar 2023 14:31:03 +0100 Subject: [PATCH] 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 Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> --- .changeset/violet-sloths-train.md | 6 ++ .../new/components/shipping-details.tsx | 62 ++++++++++--------- packages/admin-ui/ui/src/utils/email.ts | 9 +++ 3 files changed, 48 insertions(+), 29 deletions(-) create mode 100644 .changeset/violet-sloths-train.md create mode 100644 packages/admin-ui/ui/src/utils/email.ts diff --git a/.changeset/violet-sloths-train.md b/.changeset/violet-sloths-train.md new file mode 100644 index 0000000000..ed2678cb70 --- /dev/null +++ b/.changeset/violet-sloths-train.md @@ -0,0 +1,6 @@ +--- +"@medusajs/admin-ui": patch +"@medusajs/admin": patch +--- + +fix(admin-ui): draft order shipping details diff --git a/packages/admin-ui/ui/src/domain/orders/new/components/shipping-details.tsx b/packages/admin-ui/ui/src/domain/orders/new/components/shipping-details.tsx index fb3567b077..cb699690ff 100644 --- a/packages/admin-ui/ui/src/domain/orders/new/components/shipping-details.tsx +++ b/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 (
@@ -192,11 +201,7 @@ const ShippingDetails = () => { />
- {isLoading ? ( -
- -
- ) : validAddresses.length && !addNew ? ( + {validAddresses.length && !addNew ? (
Choose existing addresses { form={nestedForm(form, "shipping_address")} countryOptions={validCountries} type={AddressType.SHIPPING} - required={requiredFields} />
)} diff --git a/packages/admin-ui/ui/src/utils/email.ts b/packages/admin-ui/ui/src/utils/email.ts new file mode 100644 index 0000000000..311c251df6 --- /dev/null +++ b/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) +}