feat(dashboard): Region refactor (#7083)

* wip: regions refactor

* feat:  finalize region domain

* fix: cleanup error messages

packages/admin-next/dashboard/public/locales/en-US/translation.json

@@ -17,6 +17,9 @@
     "next": "Next",
     "prev": "Prev",
     "is": "is",
+    "timeline": "Timeline",
+    "success": "Success",
+    "error": "Error",
     "select": "Select",
     "selected": "Selected",
     "enabled": "Enabled",
@@ -1057,6 +1060,12 @@
     "priceType": "Price Type",
     "flatRate": "Flat Rate",
     "calculated": "Calculated",
+    "toast": {
+      "delete": "Region deleted successfully",
+      "edit": "Region edit saved",
+      "create": "Region created successfully",
+      "countries": "Region countries updated successfully"
+    },
     "shippingOption": {
       "createShippingOption": "Create Shipping Option",
       "createShippingOptionHint": "Create a new shipping option for the region.",

packages/admin-next/dashboard/src/hooks/api/regions.tsx

@@ -8,7 +8,7 @@ import {
 import { client } from "../../lib/client"
 import { queryClient } from "../../lib/medusa"
 import { queryKeysFactory } from "../../lib/query-key-factory"
-import { CreateRegionReq } from "../../types/api-payloads"
+import { CreateRegionReq, UpdateRegionReq } from "../../types/api-payloads"
 import {
   RegionDeleteRes,
   RegionListRes,
@@ -66,7 +66,7 @@ export const useCreateRegion = (
 
 export const useUpdateRegion = (
   id: string,
-  options?: UseMutationOptions<RegionRes, Error, CreateRegionReq>
+  options?: UseMutationOptions<RegionRes, Error, UpdateRegionReq>
 ) => {
   return useMutation({
     mutationFn: (payload) => client.regions.update(id, payload),

packages/admin-next/dashboard/src/v2-routes/regions/common/hooks/use-countries.tsx

@@ -31,7 +31,7 @@ export const useCountries = ({
       throw json(`The key ${key} is not a valid order key`, 500)
     }
 
-    const sortKey: keyof Country = key === "code" ? "iso_2" : "name"
+    const sortKey: keyof RegionCountryDTO = key === "code" ? "iso_2" : "name"
 
     data.sort((a, b) => {
       if (a[sortKey] === null && b[sortKey] === null) {

packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx

@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
-import { Button, Checkbox } from "@medusajs/ui"
+import { Button, Checkbox, toast } from "@medusajs/ui"
 import { RegionCountryDTO, RegionDTO } from "@medusajs/types"
 import {
   RouteFocusModal,
@@ -21,7 +21,7 @@ import { countries as staticCountries } from "../../../../../lib/countries"
 import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
-import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx"
+import { useUpdateRegion } from "../../../../../hooks/api/regions"
 
 type AddCountriesFormProps = {
   region: RegionDTO
@@ -98,7 +98,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
     prefix: PREFIX,
   })
 
-  const { mutateAsync, isLoading } = useUpdateRegion(region.id)
+  const { mutateAsync, isPending: isLoading } = useUpdateRegion(region.id)
 
   const handleSubmit = form.handleSubmit(async (values) => {
     const payload = [
@@ -106,16 +106,23 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
       ...values.countries,
     ]
 
-    await mutateAsync(
+    try {
-      {
+      await mutateAsync({
         countries: payload,
-      },
+      })
-      {
+
-        onSuccess: () => {
       handleSuccess()
-        },
+
+      toast.success(t("general.success"), {
+        description: t("regions.toast.countries"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
     }
-    )
   })
 
   return (
@@ -132,7 +139,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
               </Button>
             </RouteFocusModal.Close>
             <Button size="small" isLoading={isLoading} type="submit">
-              {t("actions.save")}
+              {t("actions.add")}
             </Button>
           </div>
         </RouteFocusModal.Header>

packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/region-add-countries.tsx

@@ -6,7 +6,12 @@ import { useRegion } from "../../../hooks/api/regions"
 export const RegionAddCountries = () => {
   const { id } = useParams()
 
-  const { region, isLoading, isError, error } = useRegion(id!, {
+  const {
+    region,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useRegion(id!, {
     fields: "*payment_providers",
   })
 

packages/admin-next/dashboard/src/v2-routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -9,6 +9,7 @@ import {
   Switch,
   Text,
   clx,
+  toast,
 } from "@medusajs/ui"
 import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
 import { useMemo, useState } from "react"
@@ -91,8 +92,18 @@ export const CreateRegionForm = ({
       },
       {
         onSuccess: ({ region }) => {
+          toast.success(t("general.success"), {
+            description: t("regions.toast.create"),
+            dismissLabel: t("actions.close"),
+          })
           handleSuccess(`../${region.id}`)
         },
+        onError: (e) => {
+          toast.error(t("general.error"), {
+            description: e.message,
+            dismissLabel: t("actions.close"),
+          })
+        },
       }
     )
   })

packages/admin-next/dashboard/src/v2-routes/regions/region-create/region-create.tsx

@@ -5,7 +5,7 @@ import { usePaymentProviders } from "../../../hooks/api/payments"
 import { useStore } from "../../../hooks/api/store"
 
 export const RegionCreate = () => {
-  const { store, isLoading, isError, error } = useStore()
+  const { store, isPending: isLoading, isError, error } = useStore()
 
   const storeCurrencies = (store?.supported_currency_codes ?? []).map(
     (code) => currencies[code.toUpperCase()]

packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-country-section/region-country-section.tsx

@@ -1,5 +1,5 @@
 import { PlusMini, Trash } from "@medusajs/icons"
-import { Checkbox, Container, Heading, usePrompt } from "@medusajs/ui"
+import { Checkbox, Container, Heading, toast, usePrompt } from "@medusajs/ui"
 import { RegionCountryDTO, RegionDTO } from "@medusajs/types"
 import {
   ColumnDef,
@@ -14,7 +14,7 @@ import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
-import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx"
+import { useUpdateRegion } from "../../../../../hooks/api/regions"
 
 type RegionCountrySectionProps = {
   region: RegionDTO
@@ -82,9 +82,21 @@ export const RegionCountrySection = ({ region }: RegionCountrySectionProps) => {
       .filter((c) => !ids.includes(c.iso_2))
       .map((c) => c.iso_2)
 
+    try {
       await mutateAsync({
         countries: payload,
       })
+
+      toast.success(t("general.success"), {
+        description: t("regions.toast.countries"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
   }
 
   return (
@@ -158,9 +170,21 @@ const CountryActions = ({
       return
     }
 
+    try {
       await mutateAsync({
         countries: payload,
       })
+
+      toast.success(t("general.success"), {
+        description: t("regions.toast.countries"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
   }
 
   return (

packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-general-section/region-general-section.tsx

@@ -1,6 +1,6 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { RegionDTO } from "@medusajs/types"
-import { Badge, Container, Heading, Text, usePrompt } from "@medusajs/ui"
+import { Badge, Container, Heading, Text, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 import { useNavigate } from "react-router-dom"
@@ -76,7 +76,18 @@ const RegionActions = ({ region }: { region: RegionDTO }) => {
       return
     }
 
+    try {
       await mutateAsync(undefined)
+      toast.success(t("general.success"), {
+        description: t("regions.toast.delete"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
     navigate("/settings/regions", { replace: true })
   }
 

packages/admin-next/dashboard/src/v2-routes/regions/region-detail/region-detail.tsx

@@ -12,7 +12,12 @@ export const RegionDetail = () => {
   >
 
   const { id } = useParams()
-  const { region, isLoading, isError, error } = useRegion(
+  const {
+    region,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useRegion(
     id!,
     { fields: "*payment_providers,*countries" },
     {

packages/admin-next/dashboard/src/v2-routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Select, Text } from "@medusajs/ui"
+import { Button, Input, Select, Text, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
@@ -42,7 +42,7 @@ export const EditRegionForm = ({
     },
   })
 
-  const { mutateAsync, isLoading } = useUpdateRegion(region.id)
+  const { mutateAsync, isPending: isLoading } = useUpdateRegion(region.id)
 
   const handleSubmit = form.handleSubmit(async (values) => {
     await mutateAsync(
@@ -53,8 +53,18 @@ export const EditRegionForm = ({
       },
       {
         onSuccess: () => {
+          toast.success(t("general.success"), {
+            description: t("regions.toast.edit"),
+            dismissLabel: t("actions.close"),
+          })
           handleSuccess()
         },
+        onError: (e) => {
+          toast.error(t("general.error"), {
+            description: e.message,
+            dismissLabel: t("actions.close"),
+          })
+        },
       }
     )
   })

packages/admin-next/dashboard/src/v2-routes/regions/region-edit/region-edit.tsx

@@ -15,14 +15,14 @@ export const RegionEdit = () => {
 
   const {
     region,
-    isLoading: isRegionLoading,
+    isPending: isRegionLoading,
     isError: isRegionError,
     error: regionError,
   } = useRegion(id!, { fields: "*payment_providers" })
 
   const {
     store,
-    isLoading: isStoreLoading,
+    isPending: isStoreLoading,
     isError: isStoreError,
     error: storeError,
   } = useStore()

packages/admin-next/dashboard/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx

@@ -1,10 +1,11 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { RegionDTO } from "@medusajs/types"
-import { Button, Container, Heading, usePrompt } from "@medusajs/ui"
+import { Button, Container, Heading, usePrompt, toast } from "@medusajs/ui"
 import { createColumnHelper } from "@tanstack/react-table"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
+import { keepPreviousData } from "@tanstack/react-query"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
@@ -20,13 +21,19 @@ export const RegionListTable = () => {
   const { t } = useTranslation()
 
   const { searchParams, raw } = useRegionTableQuery({ pageSize: PAGE_SIZE })
-  const { regions, count, isLoading, isError, error } = useRegions(
+  const {
+    regions,
+    count,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useRegions(
     {
       ...searchParams,
       fields: "*payment_providers",
     },
     {
-      keepPreviousData: true,
+      placeholderData: keepPreviousData,
     }
   )
 
@@ -96,7 +103,18 @@ const RegionActions = ({ region }: { region: RegionDTO }) => {
       return
     }
 
+    try {
       await mutateAsync(undefined)
+      toast.success(t("general.success"), {
+        description: t("regions.toast.delete"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
   }
 
   return (