avatax: fallback behavior for taxcode matcher missing hints

saleor · Aug 13, 2024 · 438218f · 438218f
1 parent 266c6d8
commit 438218f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/.changeset/dry-kangaroos-live.md b/.changeset/dry-kangaroos-live.md
@@ -0,0 +1,11 @@
+---
+"app-avatax": patch
+---
+
+Added fallback behavior for Tax Code Matcher: scenario when AvaTax fail to respond with available tax classes.
+
+### Before:
+When AvaTax failed to respond, app left Tax Code Matcher page and settings couldn't been set
+
+### After
+App ignores missing response from AvaTax and sets empty autocomplete results. Values can be entered manually and will not be validated
diff --git a/apps/avatax/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx b/apps/avatax/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx
@@ -1,4 +1,6 @@
+import { TextLink } from "@saleor/apps-ui";
 import { Box, Text } from "@saleor/macaw-ui";
+
 import { trpcClient } from "../../trpc/trpc-client";
 import { AppCard } from "../../ui/app-card";
 import { Table } from "../../ui/table";
@@ -35,6 +37,16 @@ export const AvataxTaxCodeMatcherTable = () => {
               </Table.TR>
             );
           })}
+          <Table.TR>
+            <Table.TD>
+              <Text display="block" marginTop={8}>
+                See AvaTax tax code search to access valid Tax Codes{" "}
+                <TextLink href="https://taxcode.avatax.avalara.com/search?q=food" newTab>
+                  here
+                </TextLink>
+              </Text>
+            </Table.TD>
+          </Table.TR>
         </Table.TBody>
       </Table.Container>
     </AppCard>

diff --git a/apps/avatax/src/modules/avatax/ui/tax-code-select.tsx b/apps/avatax/src/modules/avatax/ui/tax-code-select.tsx
@@ -3,6 +3,7 @@ import { Box, Input, Spinner } from "@saleor/macaw-ui";
 import { useRouter } from "next/router";
 import React from "react";
 import { useDebounce } from "usehooks-ts";
+
 import { trpcClient } from "../../trpc/trpc-client";
 
 const useGetTaxCodes = ({ filter, uniqueKey }: { filter: string | null; uniqueKey: string }) => {
@@ -35,17 +36,15 @@ const useGetTaxCodes = ({ filter, uniqueKey }: { filter: string | null; uniqueKe
     },
     {
       enabled: firstConnectionId !== undefined,
+      retry: false,
     },
   );
 
   React.useEffect(() => {
     if (result.error) {
-      notifyError("Error", "Unable to fetch AvaTax tax codes.");
-      setTimeout(() => {
-        router.push("/configuration");
-      }, 1000);
+      notifyError("Error", "Unable to fetch AvaTax tax codes. Please enter values manually");
     }
-  }, [notifyError, result.error, router]);
+  }, [notifyError, result.error]);
 
   return result;
 };
@@ -78,8 +77,11 @@ const useTaxCodeAutocomplete = ({ taxClassId }: { taxClassId: string }) => {
     });
 
   const updateTaxCode = React.useCallback(() => {
-    const isValidCode =
-      taxCodes.some((item) => item.code === debouncedValue) || debouncedValue === "";
+    /**
+     * Disable validation - if AvaTax can't return list of codes, as a fallback we allow to use a plain text.
+     * TODO: This should be refactored
+     */
+    const isValidCode = true;
 
     if (debouncedValue !== prevValueRef.current && isTouched && isValidCode) {
       prevValueRef.current = debouncedValue;
@@ -107,7 +109,10 @@ const useTaxCodeAutocomplete = ({ taxClassId }: { taxClassId: string }) => {
   };
 };
 
-// todo: replace with macaw-ui Autocomplete component when it's ready
+/*
+ * todo: replace with macaw-ui Autocomplete component when it's ready
+ * todo: call tax classes autocomplete fetch only once
+ */
 export const TaxCodeSelect = ({ taxClassId }: { taxClassId: string }) => {
   const { isInputLoading, isInputDisabled, inputText, onInputTextChange, options } =
     useTaxCodeAutocomplete({

diff --git a/apps/avatax/src/pages/providers/avatax/matcher.tsx b/apps/avatax/src/pages/providers/avatax/matcher.tsx
@@ -1,12 +1,13 @@
+import { useDashboardNotification } from "@saleor/apps-shared";
+import { TextLink } from "@saleor/apps-ui";
 import { Box, Text } from "@saleor/macaw-ui";
+import { useRouter } from "next/router";
+
 import { AvataxTaxCodeMatcherTable } from "../../../modules/avatax/ui/avatax-tax-code-matcher-table";
+import { trpcClient } from "../../../modules/trpc/trpc-client";
 import { AppColumns } from "../../../modules/ui/app-columns";
 import { AppDashboardLink } from "../../../modules/ui/app-dashboard-link";
 import { Section } from "../../../modules/ui/app-section";
-import { TextLink } from "@saleor/apps-ui";
-import { useDashboardNotification } from "@saleor/apps-shared";
-import { useRouter } from "next/router";
-import { trpcClient } from "../../../modules/trpc/trpc-client";
 
 const Header = () => {
   return <Section.Header>Match Saleor tax classes to AvaTax tax codes</Section.Header>;
@@ -38,10 +39,10 @@ const Description = () => {
           </Text>
           <Text as="p" marginBottom={4}>
             To learn more about AvaTax tax codes, please visit{" "}
-            <TextLink href="https://taxcode.avatax.avalara.com/search?q=OF400000" newTab>
+            <TextLink href="https://taxcode.avatax.avalara.com/search?q=food" newTab>
               AvaTax documentation
             </TextLink>
-            .
+            . You can search for tax codes and enter them in this page.
           </Text>
         </>
       }