feat(dashboard,js-sdk,admin-shared): add customer addresses + layout change

.changeset/violet-trainers-sleep.md

@@ -0,0 +1,7 @@
+---
+"@medusajs/admin-shared": patch
+"@medusajs/dashboard": patch
+"@medusajs/js-sdk": patch
+---
+
+feat(dashboard,js-sdk,admin-shared): add customer addresses + layout change

packages/admin/admin-shared/src/extensions/widgets/constants.ts

@@ -10,6 +10,8 @@ const ORDER_INJECTION_ZONES = [
 const CUSTOMER_INJECTION_ZONES = [
   "customer.details.before",
   "customer.details.after",
+  "customer.details.side.before",
+  "customer.details.side.after",
   "customer.list.before",
   "customer.list.after",
 ] as const

packages/admin/dashboard/src/components/common/listicle/index.ts

@@ -0,0 +1 @@
+export * from "./listicle"

packages/admin/dashboard/src/components/common/listicle/listicle.tsx

@@ -0,0 +1,34 @@
+import { Text } from "@medusajs/ui"
+import { ReactNode } from "react"
+
+export interface ListicleProps {
+  labelKey: string
+  descriptionKey: string
+  children?: ReactNode
+}
+
+export const Listicle = ({
+  labelKey,
+  descriptionKey,
+  children,
+}: ListicleProps) => {
+  return (
+    <div className="flex flex-col gap-2 px-2 pb-2">
+      <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
+        <div className="flex items-center gap-4">
+          <div className="flex flex-1 flex-col">
+            <Text size="small" leading="compact" weight="plus">
+              {labelKey}
+            </Text>
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {descriptionKey}
+            </Text>
+          </div>
+          <div className="flex size-7 items-center justify-center">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from "react"
 import { Link } from "react-router-dom"
 
-import { IconAvatar } from "../icon-avatar"
-import { Text } from "@medusajs/ui"
 import { TriangleRightMini } from "@medusajs/icons"
+import { Text } from "@medusajs/ui"
+import { IconAvatar } from "../icon-avatar"
 
 export interface SidebarLinkProps {
   to: string

packages/admin/dashboard/src/hooks/api/customers.tsx

@@ -14,6 +14,9 @@ import { customerGroupsQueryKeys } from "./customer-groups"
 
 const CUSTOMERS_QUERY_KEY = "customers" as const
 export const customersQueryKeys = queryKeysFactory(CUSTOMERS_QUERY_KEY)
+export const customerAddressesQueryKeys = queryKeysFactory(
+  `${CUSTOMERS_QUERY_KEY}-addresses`
+)
 
 export const useCustomer = (
   id: string,
@@ -148,3 +151,113 @@ export const useBatchCustomerCustomerGroups = (
     ...options,
   })
 }
+
+export const useCreateCustomerAddress = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    HttpTypes.AdminCreateCustomerAddress
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.customer.createAddress(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.detail(id) })
+      queryClient.invalidateQueries({
+        queryKey: customerAddressesQueryKeys.list(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateCustomerAddress = (
+  id: string,
+  addressId: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    HttpTypes.AdminUpdateCustomerAddress
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.admin.customer.updateAddress(id, addressId, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.detail(id) })
+      queryClient.invalidateQueries({
+        queryKey: customerAddressesQueryKeys.list(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteCustomerAddress = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (addressId: string) =>
+      sdk.admin.customer.deleteAddress(id, addressId),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: customersQueryKeys.detail(id) })
+      queryClient.invalidateQueries({
+        queryKey: customerAddressesQueryKeys.list(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useListCustomerAddresses = (
+  id: string,
+  query?: Record<string, any>,
+  options?: UseQueryOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    HttpTypes.AdminCustomerResponse,
+    QueryKey
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.customer.listAddresses(id, query),
+    queryKey: customerAddressesQueryKeys.list(id),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCustomerAddress = (
+  id: string,
+  addressId: string,
+  options?: UseQueryOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    HttpTypes.AdminCustomerResponse,
+    QueryKey
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.customer.retrieveAddress(id, addressId),
+    queryKey: customerAddressesQueryKeys.detail(id),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}

packages/admin/dashboard/src/i18n/translations/$schema.json

@@ -134,6 +134,9 @@
         "areYouSure": {
           "type": "string"
         },
+        "areYouSureDescription": {
+          "type": "string"
+        },
         "noRecordsFound": {
           "type": "string"
         },
@@ -1346,6 +1349,17 @@
     "addresses": {
       "type": "object",
       "properties": {
+        "addressTypes": {
+          "shipping": {
+            "type": "string"
+          },
+          "billing": {
+            "type": "string"
+          }
+        },
+        "title": {
+          "type": "string"
+        },
         "shippingAddress": {
           "type": "object",
           "properties": {
@@ -3491,6 +3505,84 @@
         },
         "hasAccount": {
           "type": "string"
+        },
+        "addresses": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "fields": {
+              "type": "object",
+              "properties": {
+                "addressName": {
+                  "type": "string"
+                },
+                "address1": {
+                  "type": "string"
+                },
+                "address2": {
+                  "type": "string"
+                },
+                "city": {
+                  "type": "string"
+                },
+                "province": {
+                  "type": "string"
+                },
+                "postalCode": {
+                  "type": "string"
+                },
+                "country": {
+                  "type": "string"
+                },
+                "phone": {
+                  "type": "string"
+                },
+                "company": {
+                  "type": "string"
+                },
+                "countryCode": {
+                  "type": "string"
+                },
+                "provinceCode": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "addressName",
+                "address1",
+                "address2",
+                "city",
+                "province",
+                "postalCode",
+                "country",
+                "phone",
+                "company",
+                "countryCode",
+                "provinceCode"
+              ],
+              "additionalProperties": false
+            },
+            "create": {
+              "type": "object",
+              "properties": {
+                "header": {
+                  "type": "string"
+                },
+                "hint": {
+                  "type": "string"
+                },
+                "successToast": {
+                  "type": "string"
+                }
+              },
+              "required": ["header", "hint", "successToast"],
+              "additionalProperties": false
+            }
+          },
+          "required": ["title", "create"],
+          "additionalProperties": false
         }
       },
       "required": [

packages/admin/dashboard/src/i18n/translations/en.json

@@ -43,6 +43,7 @@
     "plusCount": "+ {{count}}",
     "plusCountMore": "+ {{count}} more",
     "areYouSure": "Are you sure?",
+    "areYouSureDescription": "You are about to delete the {{entity}} {{title}}. This action cannot be undone.",
     "noRecordsFound": "No records found",
     "typeToConfirm": "Please type {val} to confirm:",
     "noResultsTitle": "No results",
@@ -349,6 +350,11 @@
     "backToDashboard": "Back to dashboard"
   },
   "addresses": {
+    "title": "Addresses",
+    "addressTypes": {
+      "shipping": "Shipping",
+      "billing": "Billing"
+    },
     "shippingAddress": {
       "header": "Shipping Address",
       "editHeader": "Edit Shipping Address",
@@ -931,7 +937,28 @@
     },
     "registered": "Registered",
     "guest": "Guest",
-    "hasAccount": "Has account"
+    "hasAccount": "Has account",
+    "addresses": {
+      "title": "Addresses",
+      "fields": {
+        "addressName": "Address name",
+        "address1": "Address 1",
+        "address2": "Address 2",
+        "city": "City",
+        "province": "Province",
+        "postalCode": "Postal code",
+        "country": "Country",
+        "phone": "Phone",
+        "company": "Company",
+        "countryCode": "Country code",
+        "provinceCode": "Province code"
+      },
+      "create": {
+        "header": "Create Address",
+        "hint": "Create a new address for the customer.",
+        "successToast": "Address was successfully created."
+      }
+    }
   },
   "customerGroups": {
     "domain": "Customer Groups",

packages/admin/dashboard/src/providers/router-provider/route-map.tsx

@@ -641,6 +641,11 @@ export const RouteMap: RouteObject[] = [
                     path: "edit",
                     lazy: () => import("../../routes/customers/customer-edit"),
                   },
+                  {
+                    path: "create-address",
+                    lazy: () =>
+                      import("../../routes/customers/customer-create-address"),
+                  },
                   {
                     path: "add-customer-groups",
                     lazy: () =>