@saasquatch/mint-components 1.8.0-99 → 1.8.0

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.js

@@ -1,112 +1,38 @@
-import { setUserIdentity, useHost, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { getContextValueName, useHost, useLocale, useParentQuery, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo } from "@saasquatch/universal-hooks";
-import { useParentQuery } from "../../../utils/useParentQuery";
-import { getContextValueName, useParentState, } from "../../../utils/useParentState";
-import { COUNTRIES_NAMESPACE, COUNTRIES_QUERY_NAMESPACE, CURRENCIES_NAMESPACE, CURRENCIES_QUERY_NAMESPACE, FINANCE_NETWORK_SETTINGS_NAMESPACE, GET_COUNTRIES, GET_CURRENCIES, GET_FINANCE_NETWORK_SETTINGS, GET_USER, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "./data";
+import { getCountryObj, validTaxDocument } from "../utils";
+import { COUNTRIES_NAMESPACE, COUNTRIES_QUERY_NAMESPACE, CURRENCIES_NAMESPACE, CURRENCIES_QUERY_NAMESPACE, FINANCE_NETWORK_SETTINGS_NAMESPACE, GET_COUNTRIES, GET_CURRENCIES, GET_FINANCE_NETWORK_SETTINGS, GET_USER, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "./data";
 function getCurrentStep(user) {
   var _a;
   if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected)) {
     return "/1";
   }
-  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings } = user.impactConnection.publisher;
+  const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
   // If they do have a required document, look at current document
-  if (requiredTaxDocumentType && !currentTaxDocument) {
+  if (requiredTaxDocumentType &&
+    !validTaxDocument(requiredTaxDocumentType, currentTaxDocument === null || currentTaxDocument === void 0 ? void 0 : currentTaxDocument.type))
     return "/3";
-  }
-  if (!withdrawalSettings)
+  if (!withdrawalSettings && brandedSignup)
     return "/4";
   return "/dashboard";
 }
 export function useTaxAndCash() {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const host = useHost();
-  function setupDemo() {
-    // coleton
-    const id = "bd5a0bc8f8c82faa4f37f882ca5839910d6e4524597f3c3398d41d920bed8fc9";
-    const accountId = "bd5a0bc8f8c82faa4f37f882ca5839910d6e4524597f3c3398d41d920bed8fc9";
-    // andy3
-    // const id =
-    //   "e061ee21b45eff8ada22845d441c6a2cd7190af1718a55452ad2d44b020915a7";
-    // const accountId =
-    //   "e061ee21b45eff8ada22845d441c6a2cd7190af1718a55452ad2d44b020915a7";
-    // // andy
-    // const id = "12345";
-    // const accountId = "12345";
-    // andy2
-    // const id =
-    //   "80d24e8d6133bdcf859844ca1fc7552c57d5d0661a7f46f791ea0785827a70ed";
-    // const accountId =
-    //   "80d24e8d6133bdcf859844ca1fc7552c57d5d0661a7f46f791ea0785827a70ed";
-    // sam
-    // const id =
-    //   "3e0fab4f3e7c7cd3ee971b0c0e9a4ece4061349c837f24c71582330842fc8462";
-    // const accountId =
-    //   "3e0fab4f3e7c7cd3ee971b0c0e9a4ece4061349c837f24c71582330842fc8462";
-    // const programId = "22514";
-    const programId = "22999";
-    //@ts-ignore
-    window.widgetIdent = {
-      // tenantAlias: "aprh0cfq6y8tk",
-      tenantAlias: "aswi7zpxl6rjp",
-      appDomain: "https://staging.referralsaasquatch.com",
-      programId,
-    };
-    // coleton
-    useEffect(() => {
-      setUserIdentity({
-        accountId,
-        id,
-        jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSZkFUVEdOZXRqUDUwNzYxMDNERjVub0d0TDRnQ0hjYjEifQ.eyJ1c2VyIjp7ImlkIjoiYmQ1YTBiYzhmOGM4MmZhYTRmMzdmODgyY2E1ODM5OTEwZDZlNDUyNDU5N2YzYzMzOThkNDFkOTIwYmVkOGZjOSIsImFjY291bnRJZCI6ImJkNWEwYmM4ZjhjODJmYWE0ZjM3Zjg4MmNhNTgzOTkxMGQ2ZTQ1MjQ1OTdmM2MzMzk4ZDQxZDkyMGJlZDhmYzkiLCJlbWFpbCI6ImNvbGV0b24uYW5uZXR0K3Rlc3RwYXlvdXRAaW1wYWN0LmNvbSJ9fQ.pUJqd22SSowAvOLFF_2U13qsMGW3eOGxKmohWh0Bs4I",
-      });
-    }, []);
-    // andy3
-    // useEffect(() => {
-    //   setUserIdentity({
-    //     accountId,
-    //     id,
-    //     jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoiZTA2MWVlMjFiNDVlZmY4YWRhMjI4NDVkNDQxYzZhMmNkNzE5MGFmMTcxOGE1NTQ1MmFkMmQ0NGIwMjA5MTVhNyIsImFjY291bnRJZCI6ImUwNjFlZTIxYjQ1ZWZmOGFkYTIyODQ1ZDQ0MWM2YTJjZDcxOTBhZjE3MThhNTU0NTJhZDJkNDRiMDIwOTE1YTciLCJlbWFpbCI6InRlc3R1c2VyQGV4YW1wbGUuY29tIn19.92Dtz49tnl8ZL9oDAkNeND8SX5OSFlt5Y7FXP92sGiA",
-    //   });
-    // }, []);
-    // andy
-    // useEffect(() => {
-    //   setUserIdentity({
-    //     accountId,
-    //     id,
-    //     jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoiMGExZTFmYTE3OGQ1MmRlZDAzZTg2YjZiZDAxYThhMDIwNDZkOGJlZjMzNjc2MzRlMTkyNzQ2ZTcxMTljNDFlMyIsImFjY291bnRJZCI6IjBhMWUxZmExNzhkNTJkZWQwM2U4NmI2YmQwMWE4YTAyMDQ2ZDhiZWYzMzY3NjM0ZTE5Mjc0NmU3MTE5YzQxZTMifX0.OO18YDc8LG3XeKJAug1oahqapmHY61RncrbRiK7Yer4",
-    //   });
-    // }, []);
-    // andy
-    // useEffect(() => {
-    //   setUserIdentity({
-    //     accountId,
-    //     id,
-    //     jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSZkFUVEdOZXRqUDUwNzYxMDNERjVub0d0TDRnQ0hjYjEifQ.eyJ1c2VyIjp7ImlkIjoiODBkMjRlOGQ2MTMzYmRjZjg1OTg0NGNhMWZjNzU1MmM1N2Q1ZDA2NjFhN2Y0NmY3OTFlYTA3ODU4MjdhNzBlZCIsImFjY291bnRJZCI6IjgwZDI0ZThkNjEzM2JkY2Y4NTk4NDRjYTFmYzc1NTJjNTdkNWQwNjYxYTdmNDZmNzkxZWEwNzg1ODI3YTcwZWQifX0.8VWa3R_pSeRJeNw07AZPjCdTuTiwBYXOAc-ouVItuYs",
-    //   });
-    // }, []);
-    // sam
-    // useEffect(() => {
-    //   setUserIdentity({
-    //     accountId,
-    //     id,
-    //     jwt: "eyJraWQiOiJJUk1Yc1l5NllZcXE0Njk0MzdtRzhFUlF0OFFvS0ZCYUcxIiwidHlwIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJqdGkiOiI2NWVhNDMxOTQ3NGJjZTBkMGE4ZDkwZGYiLCJpYXQiOjE3MDk4NTE0MTcsImV4cCI6MTcwOTkzNzgxNywic3ViIjoiTTJVd1ptRmlOR1l6WlRkak4yTmtNMlZsT1RjeFlqQmpNR1U1WVRSbFkyVTBNRFl4TXpRNVl6Z3pOMll5TkdNM01UVTRNak16TURnME1tWmpPRFEyTWc9PTpNMlV3Wm1GaU5HWXpaVGRqTjJOa00yVmxPVGN4WWpCak1HVTVZVFJsWTJVME1EWXhNelE1WXpnek4yWXlOR00zTVRVNE1qTXpNRGcwTW1aak9EUTJNZz09QGFwcmgwY2ZxNnk4dGs6dXNlcnMiLCJ1c2VyIjp7ImlkIjoiM2UwZmFiNGYzZTdjN2NkM2VlOTcxYjBjMGU5YTRlY2U0MDYxMzQ5YzgzN2YyNGM3MTU4MjMzMDg0MmZjODQ2MiIsImFjY291bnRJZCI6IjNlMGZhYjRmM2U3YzdjZDNlZTk3MWIwYzBlOWE0ZWNlNDA2MTM0OWM4MzdmMjRjNzE1ODIzMzA4NDJmYzg0NjIiLCJkYXRlQmxvY2tlZCI6bnVsbH19.1pFVd0Z-46-k0bPXe2lnrX8A8YFIyJzKAcvlhV0lk7Q",
-    //   });
-    // }, []);
-  }
-  // setupDemo();
-  /** END DEMO DATA */
   const user = useUserIdentity();
+  const locale = useLocale();
   // State for current step of form
   const [step, setStep] = useParentState({
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/loading",
   });
   // State for when to hide steps, or override certain actions
-  const [context, setContext] = useParentState({
+  const [context, _setContext] = useParentState({
     namespace: TAX_FORM_CONTEXT_NAMESPACE,
     initialValue: {},
   });
   // State to carry user form information into step 2
-  const [userFormContext, setUserFormContext] = useParentState({
+  const [userFormContext, _setUserFormContext] = useParentState({
     namespace: USER_FORM_CONTEXT_NAMESPACE,
     initialValue: {
       firstName: undefined,
@@ -120,10 +46,14 @@ export function useTaxAndCash() {
     namespace: CURRENCIES_NAMESPACE,
     initialValue: [],
   });
-  const [_countriesContext, setCountriesContext] = useParentState({
+  const [_countriesContext, _setCountriesContext] = useParentState({
     namespace: COUNTRIES_NAMESPACE,
     initialValue: [],
   });
+  const [_sortedCountriesContext, setSortedCountriesContext] = useParentState({
+    namespace: SORTED_COUNTRIES_NAMESPACE,
+    initialValue: [],
+  });
   const { data, errors } = useParentQuery({
     namespace: USER_QUERY_NAMESPACE,
     query: GET_USER,
@@ -148,6 +78,9 @@ export function useTaxAndCash() {
     namespace: CURRENCIES_QUERY_NAMESPACE,
     query: GET_CURRENCIES,
     skip: !user,
+    variables: {
+      locale,
+    },
   });
   const supportedCurrencies = useMemo(() => {
     var _a, _b;
@@ -169,11 +102,28 @@ export function useTaxAndCash() {
     }, []);
     return allValidCurrencies;
   }, [financeNetworkData, countryCode]);
+  const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
+  const sortByName = (a, b) => a.displayName < b.displayName ? -1 : 1;
+  const paymentOptions = (_d = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _d === void 0 ? void 0 : _d.data;
+  // filter out any duplicate countries and null countryCode
+  const availableCountries = useMemo(() => new Set(paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.map((option) => option.countryCode).filter((value) => value)), [paymentOptions]);
+  const _topCountries = ["CA", "GB", "US"];
+  const sortedCountries = useMemo(() => Array.from(availableCountries)
+    .map((countryCode) => getCountryObj({ countryCode, locale: intlLocale }))
+    .sort(sortByName)
+    .reduce((prev, countryObj) => {
+    if (_topCountries.includes(countryObj.countryCode))
+      return [countryObj, ...prev];
+    return [...prev, countryObj];
+  }, []), [availableCountries]);
+  useEffect(() => {
+    if (sortedCountries)
+      setSortedCountriesContext(sortedCountries);
+  }, [sortedCountries]);
   useEffect(() => {
     if (supportedCurrencies)
       setCurrenciesContext(supportedCurrencies);
   }, [supportedCurrencies]);
-  // console.log({ errors });
   useEffect(() => {
     if (errors) {
       setStep("/error");
@@ -188,9 +138,11 @@ export function useTaxAndCash() {
       const currentStep = getCurrentStep(user);
       setStep(currentStep);
     }
-  }, [host, user, (_d = data === null || data === void 0 ? void 0 : data.user) === null || _d === void 0 ? void 0 : _d.email, errors]);
+  }, [host, user, (_e = data === null || data === void 0 ? void 0 : data.user) === null || _e === void 0 ? void 0 : _e.email, errors]);
   function getFinanceNetworkFilter() {
     var _a, _b, _c;
+    if (step === "/1")
+      return {};
     if (step === "/4")
       return { currency_eq: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.currency };
     if (countryCode)

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -18,11 +18,13 @@ const style = {
     maxWidth: "700px",
   },
   IndirectTaxPreviewContainer: {
-    marginTop: "var(--sl-spacing-xx-large)",
+    marginTop: "var(--sl-spacing-x-large)",
     borderTop: "1px solid var(--sl-color-neutral-200)",
   },
   IndirectTaxPreviewHeaderContainer: {
-    marginTop: "var(--sl-spacing-x-large)",
+    marginTop: "var(--sl-spacing-large)",
+    marginBottom: "var(--sl-spacing-xx-small)",
+    margin: "0",
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
@@ -74,7 +76,7 @@ const style = {
   },
   NewFormButton: {
     marginTop: "var(--sl-spacing-large)",
-    maxWidth: "179px",
+    maxWidth: "300px",
   },
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
@@ -98,6 +100,8 @@ const style = {
     margin: "0",
     color: "var(--sl-color-neutral-500)",
     lineHeight: "var(--sl-spacing-medium)",
+    fontSize: "var(--sl-font-size-small)",
+    marginLeft: "1px",
   },
   TooltipContainer: {
     display: "flex",
@@ -116,10 +120,41 @@ const style = {
   },
   DescriptionText: {
     color: "var(--sl-color-gray-500)",
-    fontSize: "12px",
+    fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
+  PageDescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-medium)",
+  },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "600",
+      marginTop: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+      alignItems: "center",
+      flex: "1",
+    },
+  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -212,9 +247,14 @@ export const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
+      h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+        h("p", null, text.replaceTaxFormModalBodyText),
+        h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
         h("h3", null, text.bankingInformationSectionHeader),
+        h("p", { class: sheet.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
@@ -268,11 +308,11 @@ export const TaxAndCashDashboardView = (props) => {
                   subRegionTaxNumber: states.subRegionTaxNumber,
                 })))),
           !states.notRegistered && (h("div", { class: sheet.classes.InvoiceTableContainer },
-            h("sqm-invoice-table", null,
+            h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
               h("sqm-invoice-table-download-column", null),
               h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
               h("sqm-invoice-table-data-column", { "column-title": text.invoiceColumnTitle, property: "invoiceId" }),
               h("sqm-invoice-table-data-column", { "column-title": text.earningsColumnTitle, property: "earnings" }),
-              h("sqm-invoice-table-data-column", { "column-title": text.taxedAmountColumnTitle, property: "taxedAmount" }),
+              h("sqm-invoice-table-data-column", { "column-title": text.indirectTaxColumnTitle, property: "indirectTax" }),
               h("sqm-invoice-table-data-column", { "column-title": text.earningsAfterTaxColumnTitle, property: "netEarnings" })))))))))));
 };