@saasquatch/mint-components 2.2.0 → 2.3.0-10

package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js

@@ -0,0 +1,261 @@
+import { useLocale, useMutation, useQuery, useSetParent, } from "@saasquatch/component-boilerplate";
+import { useEffect, useMemo, useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
+import { PARTNER_CREATED_NAMESPACE } from "../sqm-widget-verification/keys";
+import { GET_FINANCE_NETWORK_SETTINGS, } from "../tax-and-cash/data";
+export const GET_USER_PARTNER_INFO = gql `
+  query getUserPartnerInfo {
+    user: viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+        customFields
+        impactConnection {
+          connected
+          connectionStatus
+          publisher {
+            id
+            countryCode
+            currency
+          }
+        }
+      }
+    }
+  }
+`;
+export const GET_COUNTRIES = gql `
+  query getCountries {
+    impactPayoutCountries(limit: 1000) {
+      data {
+        countryCode
+        displayName
+      }
+    }
+  }
+`;
+export const GET_CURRENCIES = gql `
+  query currencies($locale: RSLocale) {
+    currencies(limit: 300) {
+      data {
+        displayName(locale: $locale)
+        currencyCode
+      }
+    }
+  }
+`;
+const START_IMPACT_CONNECTION = gql `
+  mutation startImpactConnection($vars: ImpactConnectionInput!) {
+    startImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export function usePartnerInfoModal(props) {
+  var _a, _b, _c, _d, _e;
+  const locale = useLocale();
+  const setPartnerCreated = useSetParent(PARTNER_CREATED_NAMESPACE);
+  const { data: userData, loading: userLoading, refetch, } = useQuery(GET_USER_PARTNER_INFO, {});
+  const user = userData === null || userData === void 0 ? void 0 : userData.user;
+  const { data: currenciesData, loading: currenciesLoading } = useQuery(GET_CURRENCIES, { variables: { locale } });
+  const { data: countriesData, loading: countriesLoading } = useQuery(GET_COUNTRIES, {});
+  // No pre-filled country, use locale to determine countryCode instead
+  const [countryCode, setCountryCode] = useState(((_b = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.countryCode) || locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = useState(((_d = (_c = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher) === null || _d === void 0 ? void 0 : _d.currency) || "");
+  const { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
+    variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
+  });
+  const [startImpactConnection, { loading: connectLoading }] = useMutation(START_IMPACT_CONNECTION);
+  const [allowBankingCollection, setAllowBankingCollection] = useState(false);
+  const countries = useMemo(() => {
+    var _a;
+    const data = (_a = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data;
+    if (!data)
+      return [];
+    return [...data].sort((a, b) => {
+      if (a.countryCode === "US")
+        return -1;
+      if (b.countryCode === "US")
+        return 1;
+      return a.displayName.localeCompare(b.displayName);
+    });
+  }, [countriesData]);
+  const isExistingPartner = !!((_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher);
+  const _currencies = useMemo(() => {
+    var _a, _b, _c;
+    // if isExistingPartner, grab all currencies since select is disabled anyways
+    if (isExistingPartner) {
+      return ((_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) || [];
+    }
+    const allValidCurrencies = (_c = (_b = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.reduce((agg, settings) => {
+      var _a, _b;
+      if (countryCode && settings.countryCode !== countryCode)
+        return agg;
+      const c = (_b = (_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.find((cur) => cur.currencyCode === settings.currency);
+      if (!c)
+        return agg;
+      if (agg.find((cur) => cur.currencyCode === settings.currency))
+        return agg;
+      return [...agg, c];
+    }, []);
+    return allValidCurrencies || [];
+  }, [financeNetworkData, currenciesData, countryCode, isExistingPartner]);
+  const currencies = useMemo(() => [..._currencies].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [currencySearch, setCurrencySearch] = useState("");
+  const [filteredCountries, setFilteredCountries] = useState(countries || []);
+  const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  useEffect(() => {
+    var _a;
+    const publisher = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (!userData || !publisher)
+      return;
+    setCountryCode(publisher.countryCode);
+    setCurrency(publisher.currency);
+  }, [userData, user]);
+  useEffect(() => {
+    if (!(countries === null || countries === void 0 ? void 0 : countries.length))
+      return;
+    if (countrySearch.trim() === "") {
+      setFilteredCountries(countries || []);
+    }
+    else {
+      setFilteredCountries(countries.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase())) || []);
+    }
+  }, [countrySearch, countries]);
+  useEffect(() => {
+    if (!(currencies === null || currencies === void 0 ? void 0 : currencies.length))
+      return;
+    if (currencySearch.trim() === "") {
+      setFilteredCurrencies(currencies || []);
+    }
+    else {
+      setFilteredCurrencies(currencies.filter((c) => c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())) || []);
+    }
+  }, [currencySearch, currencies]);
+  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onCountryChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCountryCode(value);
+    setCurrency("");
+    setError("");
+  }
+  function onCurrencyChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCurrency(value);
+    setError("");
+  }
+  function onCheckboxChange(e) {
+    const checked = e.target.checked;
+    setAllowBankingCollection(checked);
+  }
+  async function onSubmit() {
+    var _a, _b;
+    if (!allowBankingCollection) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    if (!countryCode || !currency) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    setError("");
+    if (!user) {
+      setError(props.networkErrorText);
+      return;
+    }
+    try {
+      const vars = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        firstName: user.firstName,
+        lastName: user.lastName,
+        countryCode,
+        currency,
+      };
+      const result = await startImpactConnection({ vars });
+      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
+        setError(props.networkErrorText);
+        return;
+      }
+      const connectionResult = result
+        .startImpactConnection;
+      if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
+        const validationMsg = (_b = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors) === null || _b === void 0 ? void 0 : _b.map((e) => e.message).join(". ");
+        setError(validationMsg || props.networkErrorText);
+        console.error("Failed to create Impact connection:", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
+        return;
+      }
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
+      await refetch();
+      setPartnerCreated === null || setPartnerCreated === void 0 ? void 0 : setPartnerCreated(true);
+      setSuccess(true);
+    }
+    catch (e) {
+      console.error("Partner creation error:", e);
+      setError(props.networkErrorText);
+    }
+  }
+  const showModal = !success &&
+    !userLoading &&
+    (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connectionStatus) === "NOT_STARTED";
+  return {
+    states: {
+      open: showModal,
+      loading: userLoading || countriesLoading || currenciesLoading,
+      submitting: connectLoading,
+      isExistingPartner,
+      countryCode,
+      currency,
+      error,
+      success,
+      filteredCountries: filteredCountries || [],
+      filteredCurrencies: filteredCurrencies || [],
+      allowBankingCollection,
+      disabled: userLoading || connectLoading,
+    },
+    callbacks: {
+      onCountryChange,
+      onCurrencyChange,
+      onCheckboxChange,
+      setCurrencySearch,
+      setCountrySearch,
+      onSubmit,
+      onClose: () => setSuccess(true),
+    },
+    text: props.getTextProps(),
+  };
+}

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -59,6 +59,7 @@ const baseReward = {
       },
     ],
   },
+  rewardedCash: false,
 };
 // Reward Status Cases
 const pendingReward = {

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -82,6 +82,7 @@ const cashPayoutSentReward = {
   statuses: ["AVAILABLE"],
   globalRewardKey: "Key",
   rewardRedemptionTransactions: null,
+  rewardedCash: true,
 };
 const nullExpiresIn = {
   dateExpires: null,

package/dist/collection/components/sqm-referral-table/TaxAndCashReferralTable.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
 import { Converted as ConvertedStatus, DateCell, } from "./ReferralTableCell.stories";
-import { PayoutApproved, PayoutProcessing, PayoutFailed, PayoutCancelled, PendingTaxReview, PendingNewTaxForm, PendingTaxSubmission, PendingPartnerCreation, PendingW9, CashReward, } from "./TaxAndCashReferralTableRewardsCell.stories";
+import { PayoutApproved, PayoutProcessing, PayoutFailed, PayoutCancelled, PendingTaxReview, PendingNewTaxForm, PendingTaxSubmission, PartnerNotCreatedSetupNotStarted, PendingW9, CashReward, } from "./TaxAndCashReferralTableRewardsCell.stories";
 export default {
   title: "Components/Tax And Cash Referral Table",
 };
@@ -75,7 +75,7 @@ const taxAndCashTableProps = {
         h("sqm-referral-table-user-cell", { name: "Partner Creation User" }),
         h(ConvertedStatus, null),
         h(DateCell, null),
-        h(PendingPartnerCreation, null),
+        h(PartnerNotCreatedSetupNotStarted, null),
       ],
       [
         h("sqm-referral-table-user-cell", { name: "Missing W9 User" }),