fix(admin-ui): Navigating to tax settings should not break URL (#3989)

* fix navigation to taxes page, and switch out react-helmet with react-helemt-async

* add changeset

* pinpoint react-hot-toast

packages/admin-ui/ui/src/domain/settings/index.tsx

@@ -108,7 +108,7 @@ const Settings = () => (
     <Route path="/return-reasons" element={<ReturnReasons />} />
     <Route path="/team" element={<Users />} />
     <Route path="/personal-information" element={<PersonalInformation />} />
-    <Route path="/taxes" element={<Taxes />} />
+    <Route path="/taxes/*" element={<Taxes />} />
   </Routes>
 )
 

packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminRegions } from "medusa-react"
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import Fade from "../../../../components/atoms/fade-wrapper"
 import Button from "../../../../components/fundamentals/button"
@@ -18,7 +18,7 @@ type Props = {
 const RegionOverview = ({ id }: Props) => {
   const navigate = useNavigate()
   const { trackRegions } = useAnalytics()
-  const { regions, isLoading } = useAdminRegions(undefined, {
+  const { regions } = useAdminRegions(undefined, {
     onSuccess: ({ regions, count }) => {
       trackRegions({ regions: regions.map((r) => r.name), count })
     },
@@ -27,6 +27,18 @@ const RegionOverview = ({ id }: Props) => {
     string | undefined
   >(id)
 
+  const handleChange = useCallback(
+    (id: string) => {
+      if (id !== selectedRegion) {
+        setSelectedRegion(id)
+        navigate(`/a/settings/regions/${id}`, {
+          replace: true,
+        })
+      }
+    },
+    [navigate, selectedRegion]
+  )
+
   useEffect(() => {
     if (id) {
       handleChange(id)
@@ -35,26 +47,7 @@ const RegionOverview = ({ id }: Props) => {
     if (!id && regions && regions.length > 0) {
       handleChange(regions[0].id)
     }
-  }, [id, regions])
-
-  useEffect(() => {
-    if (isLoading) {
-      return
-    }
-
-    if (!selectedRegion && regions && regions.length > 0) {
-      navigate(`/a/settings/regions/${regions[0].id}`, {
-        replace: true,
-      })
-    }
-  }, [regions, isLoading, selectedRegion])
-
-  const handleChange = (id: string) => {
-    if (id !== selectedRegion) {
-      setSelectedRegion(id)
-      navigate(`/a/settings/regions/${id}`)
-    }
-  }
+  }, [handleChange, id, regions])
 
   const { state, toggle, close } = useToggleState()
 

packages/admin-ui/ui/src/domain/settings/taxes/index.tsx

@@ -1,6 +1,6 @@
 import { useAdminRegions } from "medusa-react"
-import { useEffect } from "react"
-import { useNavigate, useSearchParams } from "react-router-dom"
+import { useCallback, useEffect, useState } from "react"
+import { useNavigate, useParams } from "react-router-dom"
 import BackButton from "../../../components/atoms/back-button"
 import Spinner from "../../../components/atoms/spinner"
 import GearIcon from "../../../components/fundamentals/icons/gear-icon"
@@ -9,19 +9,39 @@ import RadioGroup from "../../../components/organisms/radio-group"
 import TwoSplitPane from "../../../components/templates/two-split-pane"
 import TaxDetails from "./details"
 
-const SEARCH_PARAM = "reg_id"
-
 const Taxes = () => {
+  const params = useParams()
+  const regId: string | undefined = params["*"]
+
   const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
 
   const { regions, isLoading } = useAdminRegions()
 
+  const [selectedRegion, setSelectedRegion] = useState<string | undefined>(
+    regId
+  )
+
+  const handleChange = useCallback(
+    (id: string) => {
+      if (id !== selectedRegion) {
+        setSelectedRegion(id)
+        navigate(`/a/settings/taxes/${id}`, {
+          replace: true,
+        })
+      }
+    },
+    [navigate, selectedRegion]
+  )
+
   useEffect(() => {
-    if (!isLoading && regions?.length && !searchParams.get(SEARCH_PARAM)) {
-      setSearchParams({ [SEARCH_PARAM]: regions[0].id })
+    if (regId) {
+      handleChange(regId)
     }
-  }, [regions, isLoading, searchParams, setSearchParams])
+
+    if (!regId && regions && regions.length > 0) {
+      handleChange(regions[0].id)
+    }
+  }, [handleChange, regId, regions])
 
   return (
     <>
@@ -50,10 +70,8 @@ const Taxes = () => {
               </div>
             ) : (
               <RadioGroup.Root
-                value={searchParams.get(SEARCH_PARAM) || undefined}
-                onValueChange={(value) =>
-                  setSearchParams({ [SEARCH_PARAM]: value })
-                }
+                value={selectedRegion}
+                onValueChange={handleChange}
               >
                 {regions.map((r) => {
                   return (
@@ -75,7 +93,7 @@ const Taxes = () => {
               </RadioGroup.Root>
             )}
           </BodyCard>
-          <TaxDetails id={searchParams.get(SEARCH_PARAM)} />
+          <TaxDetails id={selectedRegion} />
         </TwoSplitPane>
       </div>
     </>