@saasquatch/mint-components 1.8.0-99 → 1.8.0

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js

@@ -1,11 +1,10 @@
-import { useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
+import { useLocale, useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
-import { useParentQueryValue } from "../../../utils/useParentQuery";
-import { useParent, useParentValue } from "../../../utils/useParentState";
 import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
+import { getCountryObj, validTaxDocument } from "../utils";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
@@ -15,6 +14,10 @@ const CONNECT_PARTNER = gql `
         connected
         publisher {
           requiredTaxDocumentType
+          currentTaxDocument {
+            type
+            status
+          }
         }
       }
     }
@@ -31,38 +34,40 @@ function getOption(countries, countryCode) {
   }
 }
 export function useIndirectTaxForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const user = useUserIdentity();
+  const locale = useLocale();
   const formRef = useRef(null);
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
   const userForm = useParentValue(USER_FORM_CONTEXT_NAMESPACE);
   const { data: userData, refetch, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const { data: _countries, loading: countriesLoading } = useParentQueryValue(COUNTRIES_QUERY_NAMESPACE);
+  const { data: _countriesRes, loading: countriesLoading } = useParentQueryValue(COUNTRIES_QUERY_NAMESPACE);
+  const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
+  const _countries = useMemo(() => { var _a, _b; return (_b = (_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((country) => getCountryObj({ countryCode: country.countryCode, locale: intlLocale })); }, [(_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data]);
   const [loading, setLoading] = useState(false);
   const [formState, setFormState] = useState({});
   const [errors, setErrors] = useState({});
   const [countrySearch, setCountrySearch] = useState("");
-  const [filteredCountries, setFilteredCountries] = useState(((_a = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) || []);
+  const [filteredCountries, setFilteredCountries] = useState(_countries || []);
   const [option, setOption] = useState("notRegistered");
   const publisher = (_c = (_b = userData === null || userData === void 0 ? void 0 : userData.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher;
   useEffect(() => {
-    var _a, _b;
+    var _a;
     if (!((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxCountryCode))
       return;
-    const _option = getOption((_b = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _b === void 0 ? void 0 : _b.data, publisher.taxInformation.indirectTaxCountryCode);
+    const _option = getOption(_countries, publisher.taxInformation.indirectTaxCountryCode);
     setOption(_option);
   }, [publisher, _countries]);
   useEffect(() => {
-    var _a, _b;
     if (countrySearch.trim() === "") {
-      setFilteredCountries(((_a = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) || []);
+      setFilteredCountries(_countries || []);
     }
     else {
-      setFilteredCountries(((_b = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _b === void 0 ? void 0 : _b.data.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase()))) || []);
+      setFilteredCountries((_countries === null || _countries === void 0 ? void 0 : _countries.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase()))) || []);
     }
-  }, [countrySearch, (_d = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _d === void 0 ? void 0 : _d.data]);
+  }, [countrySearch, _countries]);
   useEffect(() => {
     var _a, _b;
     const user = userData === null || userData === void 0 ? void 0 : userData.user;
@@ -141,13 +146,23 @@ export function useIndirectTaxForm(props) {
       if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
         throw new Error();
       await refetch();
-      if ((_d = (_c = (_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher) === null || _d === void 0 ? void 0 : _d.requiredTaxDocumentType) {
+      const resultPublisher = (_c = (_b = result
+        .createImpactConnection) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher;
+      const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType, (_d = resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument) === null || _d === void 0 ? void 0 : _d.type);
+      if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
+        !hasValidCurrentDocument) {
         // Go to docusign form
         setStep("/3");
       }
       else {
-        // Go to banking information form
-        setStep("/4");
+        if (publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup) {
+          // Go to banking information form
+          setStep("/4");
+        }
+        else {
+          // Go right to the dashboard
+          setStep("/dashboard");
+        }
       }
     }
     catch (e) {
@@ -166,7 +181,7 @@ export function useIndirectTaxForm(props) {
       hideSteps: context.hideSteps,
       disabled: loading || countriesLoading || connectLoading,
       loading: loading || connectLoading || countriesLoading,
-      isPartner: !!((_f = (_e = userData === null || userData === void 0 ? void 0 : userData.user) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.publisher),
+      isPartner: !!((_e = (_d = userData === null || userData === void 0 ? void 0 : userData.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher),
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       formState: {
         checked: option,
@@ -188,7 +203,7 @@ export function useIndirectTaxForm(props) {
     data: {
       esRegions: INDIRECT_TAX_SPAIN_REGIONS,
       countries: filteredCountries,
-      allCountries: (_g = _countries === null || _countries === void 0 ? void 0 : _countries.impactPayoutCountries) === null || _g === void 0 ? void 0 : _g.data,
+      allCountries: _countries,
       provinces: INDIRECT_TAX_PROVINCES,
     },
     text: props.getTextProps(),

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -38,6 +38,31 @@ const style = {
   PaypalEmail: {
     borderRight: "1px solid var(--sl-color-gray-200)",
     paddingRight: "var(--sl-spacing-small)",
+    "@media (max-width: 499px)": {
+      borderRight: "none",
+      paddingRight: "none",
+    },
+  },
+  PaypalDetailsContainer: {
+    color: "var(--sl-color-gray-500)",
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    "@media (max-width: 499px)": {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "var(--sl-spacing-x-small)",
+      "& span": {
+        padding: "0px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+      },
+    },
   },
   AccountDetailsContainer: {
     color: "var(--sl-color-gray-500)",
@@ -124,7 +149,6 @@ export function PayoutDetailsCardView(props) {
       h("sl-skeleton", { class: classes.SkeletonOne })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
-    console.log(status, statusBadgeText, "debug status text");
     const badgeType = status === "nextPayout" ? "success" : "primary";
     const statusText = intl.formatMessage({
       id: "badgeText",
@@ -150,17 +174,18 @@ export function PayoutDetailsCardView(props) {
     states.loading ? (renderLoadingSkeleton()) : (h("div", { class: classes.CardContainer },
       h("div", { class: classes.StatusContainer },
         h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
-          ? thresholdText
+          ? states.thresholdBalance
+            ? thresholdText
+            : ""
           : states.nextPayoutDate),
         states.badgeStatus === "thresholdPayout"
           ? null
           : renderStatusBadge(states.badgeStatus, text.statusBadgeText)),
       h("h1", { class: classes.MainCurrency }, states.balance),
-      states.payoutType === "PAYPAL" ? (h("div", { class: classes.AccountDetailsContainer },
+      states.payoutType === "PAYPAL" ? (h("div", { class: classes.PaypalDetailsContainer },
         h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
         h(PayPalIcon, null))) : (h("div", { class: classes.AccountDetailsContainer },
-        h("span", null,
-          text.accountText,
-          " ",
-          states.cardNumberPreview)))))));
+        h("span", null, states.cardNumberPreview
+          ? `${text.accountText} ${states.cardNumberPreview}`
+          : text.payoutMissingInformationText)))))));
 }

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js

@@ -17,25 +17,30 @@ export class PayoutDetailsCard {
      */
     this.statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }";
     /**
-     * Text shown above current balance indicating required balance for next payout
-     * @uiName Threshold payout text
+     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
+     * @uiName Payout schedule by threshold text
      */
     this.thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
     /**
-     * Text shown before account number
-     * @uiName Account text
+     * Shown before the participant’s bank account information.
+     * @uiName Bank account field label
      */
     this.accountText = "Account";
     /**
-     * Error alert header shown above payout details card
-     * @uiName Error alert header
+     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
+     * @uiName Payout error message title
      */
     this.errorTitleText = "Your payout is on hold ";
     /**
-     * Error alert description shown above payout details card
-     * @uiName Error alert description
+     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
+     * @uiName Payout error message description
      */
     this.errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    /**
+     * Text displayed for existing publishers that do not have saved banking information.
+     * @uiName Payout missing information subtext
+     */
+    this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -92,10 +97,10 @@ export class PayoutDetailsCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Threshold payout text",
+            "text": "Payout schedule by threshold text",
             "name": "uiName"
           }],
-        "text": "Text shown above current balance indicating required balance for next payout"
+        "text": "Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid."
       },
       "attribute": "threshold-payout-text",
       "reflect": false,
@@ -113,10 +118,10 @@ export class PayoutDetailsCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Account text",
+            "text": "Bank account field label",
             "name": "uiName"
           }],
-        "text": "Text shown before account number"
+        "text": "Shown before the participant\u2019s bank account information."
       },
       "attribute": "account-text",
       "reflect": false,
@@ -134,10 +139,10 @@ export class PayoutDetailsCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Error alert header",
+            "text": "Payout error message title",
             "name": "uiName"
           }],
-        "text": "Error alert header shown above payout details card"
+        "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
       },
       "attribute": "error-title-text",
       "reflect": false,
@@ -155,15 +160,36 @@ export class PayoutDetailsCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Error alert description",
+            "text": "Payout error message description",
             "name": "uiName"
           }],
-        "text": "Error alert description shown above payout details card"
+        "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
       },
       "attribute": "error-description-text",
       "reflect": false,
       "defaultValue": "\"If you\u2019ve recently added your payout information, please wait while we verify your information. If it\u2019s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\""
     },
+    "payoutMissingInformationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout missing information subtext",
+            "name": "uiName"
+          }],
+        "text": "Text displayed for existing publishers that do not have saved banking information."
+      },
+      "attribute": "payout-missing-information-text",
+      "reflect": false,
+      "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.js

@@ -1,11 +1,9 @@
-import { useLocale } from "@saasquatch/component-boilerplate";
 import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
-import { useParentQueryValue } from "../../../utils/useParentQuery";
 import { USER_QUERY_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 export function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const locale = useLocale();
   const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const publisher = (_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;
   function getPayoutDetailedStatusText(paymentDay) {
@@ -27,7 +25,7 @@ export function usePayoutDetailsCard(props) {
         : DateTime.now()
           .plus({ month: 1 })
           .startOf("month")
-          .plus({ day: 15 })
+          .plus({ day: 14 })
           .toFormat("LLL dd, yyyy");
     }
     else {
@@ -39,14 +37,13 @@ export function usePayoutDetailsCard(props) {
       });
     }
   }
-  // TODO: need to which timezone payouts are processed in
   const paymentDay = getPayoutDetailedStatusText((_c = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _c === void 0 ? void 0 : _c.paymentDay);
   const isPayoutToday = DateTime.now().toFormat("LLL dd, yyyy") === paymentDay;
-  console.log({ threshold: (_d = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _d === void 0 ? void 0 : _d.paymentThreshold });
   return {
     states: {
       loading,
-      thresholdBalance: `${publisher === null || publisher === void 0 ? void 0 : publisher.currency}${(_e = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _e === void 0 ? void 0 : _e.paymentThreshold}`,
+      thresholdBalance: ((_d = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _d === void 0 ? void 0 : _d.paymentThreshold) ? `${publisher === null || publisher === void 0 ? void 0 : publisher.currency}${(_e = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _e === void 0 ? void 0 : _e.paymentThreshold}`
+        : undefined,
       balance: (_f = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _f === void 0 ? void 0 : _f.balance,
       badgeStatus: ((_g = publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) === null || _g === void 0 ? void 0 : _g.paymentSchedulingType) !== "FIXED_DAY"
         ? "thresholdPayout"

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

@@ -5,6 +5,7 @@ export const USER_QUERY_NAMESPACE = "sq:user-info-query";
 export const USER_FORM_CONTEXT_NAMESPACE = "sq:user-form-context";
 export const FINANCE_NETWORK_SETTINGS_NAMESPACE = "sq:finance-network-settings";
 export const COUNTRIES_NAMESPACE = "sq:countries:list";
+export const SORTED_COUNTRIES_NAMESPACE = "sq:countries:sorted";
 export const COUNTRIES_QUERY_NAMESPACE = "sq:countries:query";
 export const CURRENCIES_NAMESPACE = "sq:currencies:list";
 export const CURRENCIES_QUERY_NAMESPACE = "sq:currencies:query";
@@ -71,10 +72,10 @@ export const GET_COUNTRIES = gql `
   }
 `;
 export const GET_CURRENCIES = gql `
-  query currencies {
+  query currencies($locale: RSLocale) {
     currencies(limit: 300) {
       data {
-        displayName
+        displayName(locale: $locale)
         currencyCode
       }
     }