feat: Add address handling with v2 API

Author: sradevski

package.json

@@ -22,8 +22,8 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/js-sdk": "0.0.2-snapshot-20240524111804",
-    "@medusajs/types": "1.12.0-snapshot-20240524111804",
+    "@medusajs/js-sdk": "file:../medusa/packages/core/js-sdk",
+    "@medusajs/types": "file:../medusa/packages/core/types",
     "@medusajs/ui": "^2.2.0",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",

src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -12,9 +12,12 @@ export const metadata: Metadata = {
   description: "View your addresses",
 }
 
-export default async function Addresses() {
-  const nextHeaders = headers()
-  const countryCode = nextHeaders.get("next-url")?.split("/")[1] || ""
+export default async function Addresses({
+  params,
+}: {
+  params: { countryCode: string }
+}) {
+  const { countryCode } = params
   const customer = await getCustomer()
   const region = await getRegion(countryCode)
 

src/lib/data/customer.ts

@@ -111,3 +111,75 @@ export async function signout(countryCode: string) {
   revalidateTag("customer")
   redirect(`/${countryCode}/account`)
 }
+
+export const addCustomerAddress = async (
+  _currentState: unknown,
+  formData: FormData
+): Promise<any> => {
+  const address = {
+    first_name: formData.get("first_name") as string,
+    last_name: formData.get("last_name") as string,
+    company: formData.get("company") as string,
+    address_1: formData.get("address_1") as string,
+    address_2: formData.get("address_2") as string,
+    city: formData.get("city") as string,
+    postal_code: formData.get("postal_code") as string,
+    province: formData.get("province") as string,
+    country_code: formData.get("country_code") as string,
+    phone: formData.get("phone") as string,
+  }
+
+  return sdk.store.customer
+    .createAddress(address, {}, await getAuthHeaders())
+    .then(({ customer }) => {
+      revalidateTag("customer")
+      return { success: true, error: null }
+    })
+    .catch((err) => {
+      return { success: false, error: err.toString() }
+    })
+}
+
+export const deleteCustomerAddress = async (
+  addressId: string
+): Promise<void> => {
+  await sdk.store.customer
+    .deleteAddress(addressId, await getAuthHeaders())
+    .then(() => {
+      revalidateTag("customer")
+      return { success: true, error: null }
+    })
+    .catch((err) => {
+      return { success: false, error: err.toString() }
+    })
+}
+
+export const updateCustomerAddress = async (
+  currentState: Record<string, unknown>,
+  formData: FormData
+): Promise<any> => {
+  const addressId = currentState.addressId as string
+
+  const address = {
+    first_name: formData.get("first_name") as string,
+    last_name: formData.get("last_name") as string,
+    company: formData.get("company") as string,
+    address_1: formData.get("address_1") as string,
+    address_2: formData.get("address_2") as string,
+    city: formData.get("city") as string,
+    postal_code: formData.get("postal_code") as string,
+    province: formData.get("province") as string,
+    country_code: formData.get("country_code") as string,
+    phone: formData.get("phone") as string,
+  }
+
+  return sdk.store.customer
+    .updateAddress(addressId, address, {}, await getAuthHeaders())
+    .then(() => {
+      revalidateTag("customer")
+      return { success: true, error: null }
+    })
+    .catch((err) => {
+      return { success: false, error: err.toString() }
+    })
+}

src/lib/data/index.ts

@@ -10,14 +10,14 @@ import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
 import Modal from "@modules/common/components/modal"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
-import { addCustomerShippingAddress } from "@modules/account/actions"
 import { HttpTypes } from "@medusajs/types"
+import { addCustomerAddress } from "@lib/data/customer"
 
 const AddAddress = ({ region }: { region: HttpTypes.StoreRegion }) => {
   const [successState, setSuccessState] = useState(false)
   const { state, open, close: closeModal } = useToggleState(false)
 
-  const [formState, formAction] = useFormState(addCustomerShippingAddress, {
+  const [formState, formAction] = useFormState(addCustomerAddress, {
     success: false,
     error: null,
   })

src/modules/account/actions.ts

@@ -8,14 +8,14 @@ import useToggleState from "@lib/hooks/use-toggle-state"
 import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
 import Modal from "@modules/common/components/modal"
-import {
-  deleteCustomerShippingAddress,
-  updateCustomerShippingAddress,
-} from "@modules/account/actions"
 import Spinner from "@modules/common/icons/spinner"
 import { useFormState } from "react-dom"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
 import { HttpTypes } from "@medusajs/types"
+import {
+  deleteCustomerAddress,
+  updateCustomerAddress,
+} from "@lib/data/customer"
 
 type EditAddressProps = {
   region: HttpTypes.StoreRegion
@@ -32,7 +32,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
   const [successState, setSuccessState] = useState(false)
   const { state, open, close: closeModal } = useToggleState(false)
 
-  const [formState, formAction] = useFormState(updateCustomerShippingAddress, {
+  const [formState, formAction] = useFormState(updateCustomerAddress, {
     success: false,
     error: null,
     addressId: address.id,
@@ -58,7 +58,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
 
   const removeAddress = async () => {
     setRemoving(true)
-    await deleteCustomerShippingAddress(address.id)
+    await deleteCustomerAddress(address.id)
     setRemoving(false)
   }
 

src/modules/account/components/address-card/add-address.tsx

@@ -154,7 +154,11 @@ const getProfileCompletion = (customer: HttpTypes.StoreCustomer | null) => {
     count++
   }
 
-  if ((customer as any).billing_address) {
+  const billingAddress = customer.addresses?.find(
+    (addr) => addr.is_default_billing
+  )
+
+  if (billingAddress) {
     count++
   }