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/components/seo/index.tsx

@@ -1,4 +1,5 @@
-import { Helmet } from "react-helmet"
+import React from "react"
+import { Helmet } from "react-helmet-async"
 
 const site = {
   siteMetadata: {
@@ -11,12 +12,15 @@ const site = {
 function SEO({
   description,
   lang,
-  meta,
+  meta = [],
   title,
 }: {
   description?: string
   lang?: string
-  meta?: any[]
+  meta?: React.DetailedHTMLProps<
+    React.MetaHTMLAttributes<HTMLMetaElement>,
+    HTMLMetaElement
+  >[]
   title: string
 }) {
   const metaDescription = description || site.siteMetadata.description
@@ -61,7 +65,8 @@ function SEO({
           name: `twitter:description`,
           content: metaDescription,
         },
-      ].concat(meta)}
+        ...meta,
+      ]}
     />
   )
 }

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>
     </>

packages/admin-ui/ui/src/providers/providers.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react"
+import { HelmetProvider } from "react-helmet-async"
 import { LayeredModalProvider } from "../components/molecules/modal/layered-modal"
 import { SteppedProvider } from "../components/molecules/modal/stepped-modal"
 import { FeatureFlagProvider } from "./feature-flag-provider"
@@ -10,14 +11,16 @@ import { PollingProvider } from "./polling-provider"
  */
 export const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <MedusaProvider>
-      <FeatureFlagProvider>
-        <PollingProvider>
-          <SteppedProvider>
-            <LayeredModalProvider>{children}</LayeredModalProvider>
-          </SteppedProvider>
-        </PollingProvider>
-      </FeatureFlagProvider>
-    </MedusaProvider>
+    <HelmetProvider>
+      <MedusaProvider>
+        <FeatureFlagProvider>
+          <PollingProvider>
+            <SteppedProvider>
+              <LayeredModalProvider>{children}</LayeredModalProvider>
+            </SteppedProvider>
+          </PollingProvider>
+        </FeatureFlagProvider>
+      </MedusaProvider>
+    </HelmetProvider>
   )
 }