@saasquatch/mint-components 2.1.10-56 → 2.1.11-0

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

@@ -0,0 +1,284 @@
+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 { VERIFICATION_PARENT_NAMESPACE } from "../sqm-widget-verification/keys";
+import { GET_FINANCE_NETWORK_SETTINGS, } from "../tax-and-cash/data";
+// new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
+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
+      }
+    }
+  }
+`;
+export const CONNECT_PARTNER = gql `
+  mutation createImpactConnection($vars: ImpactConnectionInput!) {
+    createImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+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
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_BRAND_NAME = gql `
+  query getTenantSettings {
+    tenantSettings {
+      companyName
+    }
+  }
+`;
+export function usePartnerInfoModal(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const locale = useLocale();
+  const setVerificationContext = useSetParent(VERIFICATION_PARENT_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, {});
+  const { data: tenantSettingsData } = useQuery(GET_BRAND_NAME, {});
+  const { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
+    variables: { filter: {} },
+  });
+  const [startImpactConnection, { loading: connectLoading, errors: connectErrors },] = useMutation(START_IMPACT_CONNECTION);
+  const [allowBankingCollection, setAllowBankingCollection] = useState(false);
+  const [checkboxError, setCheckboxError] = useState("");
+  // 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) || "");
+  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 countries = ((_e = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _e === void 0 ? void 0 : _e.data) || [];
+  // copied from useTaxAndCash for displaying currencies based on country - could be in helper?
+  const currencies = useMemo(() => {
+    var _a, _b;
+    const allValidCurrencies = (_b = (_a = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.reduce((agg, settings) => {
+      var _a, _b;
+      const currency = (_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((c) => c.currencyCode === settings.currency);
+      if (!currency)
+        return agg;
+      if (agg.find((c) => c.currencyCode === settings.currency))
+        return agg;
+      if (countryCode && settings.countryCode !== countryCode)
+        return agg;
+      return [...agg, currency];
+    }, []);
+    return (allValidCurrencies || []).sort((a, b) => a.displayName.localeCompare(b.displayName));
+  }, [financeNetworkData, currenciesData, countryCode]);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [currencySearch, setCurrencySearch] = useState("");
+  const [filteredCountries, setFilteredCountries] = useState(((_f = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _f === void 0 ? void 0 : _f.data) || []);
+  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);
+    if (checked)
+      setCheckboxError("");
+  }
+  async function onSubmit() {
+    var _a, _b;
+    if (!allowBankingCollection) {
+      setCheckboxError(props.missingFieldsErrorText);
+      return;
+    }
+    if (!countryCode || !currency) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    setError("");
+    setCheckboxError("");
+    try {
+      const vars = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        firstName: user.firstName,
+        lastName: user.lastName,
+        // phoneNumber: null,
+        // phoneNumberCountryCode: null,
+        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;
+      console.log(result, connectionResult, "result and connectionResult from creating partner from modal");
+      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();
+      setSuccess(true);
+      setVerificationContext(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: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
+      countryCode,
+      currency,
+      error,
+      success,
+      brandName: ((_g = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _g === void 0 ? void 0 : _g.companyName) || "",
+      filteredCountries: filteredCountries || [],
+      filteredCurrencies: filteredCurrencies || [],
+      allowBankingCollection,
+      checkboxError,
+      disabled: userLoading || connectLoading,
+    },
+    callbacks: {
+      onCountryChange,
+      onCurrencyChange,
+      onCheckboxChange,
+      setCurrencySearch,
+      setCountrySearch,
+      onSubmit,
+      onClose: () => setSuccess(true),
+    },
+    text: props.getTextProps(),
+  };
+}

package/dist/collection/components/sqm-referral-iframe/ReferralIframe.stories.js

@@ -16,7 +16,6 @@ const props = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
-      codeParam: "rsCode",
     },
   },
 };

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe-view.js

@@ -25,5 +25,5 @@ export function ReferralIframeView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe.js

@@ -22,11 +22,6 @@ export class SqmReferralIframe {
      * @uiName IFrame width
      */
     this.iframeWidth = "100%";
-    /**
-     * Override the default parameter name used in the iframe
-     * @uiName Referral code parameter name
-     */
-    this.codeParam = "rsCode";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -113,33 +108,12 @@ export class SqmReferralIframe {
       "reflect": false,
       "defaultValue": "\"100%\""
     },
-    "codeParam": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Referral code parameter name",
-            "name": "uiName"
-          }],
-        "text": "Override the default parameter name used in the iframe"
-      },
-      "attribute": "code-param",
-      "reflect": false,
-      "defaultValue": "\"rsCode\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralIframeViewProps>",
-        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; codeParam: string; }; }; data?: { shareCode: string; }; }",
+        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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" }),

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

@@ -162,7 +162,19 @@ export const PendingTaxSubmission = () => {
       },
     } }, defaultProps)));
 };
-export const PendingPartnerCreation = () => {
+export const PartnerNotCreatedSetupNotStarted = () => {
+  return (h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
+      {
+        ...cashReward,
+        statuses: ["PENDING"],
+        pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
+      },
+    ], taxConnection: {
+      ...taxConnection,
+      connected: false,
+    } }, defaultProps)));
+};
+export const PartnerCreatedSetupStartedButIncomplete = () => {
   return (h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
       {
         ...cashReward,

package/dist/collection/components/sqm-rewards-table/TaxAndCashRewardsTable.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
 import { SourceCellReferral, DateCell } from "./RewardsTableCell.stories";
-import { StatusCellPayoutSent, StatusCellPayoutFailed, StatusCellPendingNewTaxForm, StatusCellPendingPartnerCreation, StatusCellPendingTaxReview, StatusCellPendingTaxSubmission, StatusCellPayoutProcessing, CashReward, StatusCellPendingW9, StatusCellPayoutCancelled, } from "./TaxAndCashRewardsTableCell.stories";
+import { StatusCellPayoutSent, StatusCellPayoutFailed, StatusCellPendingNewTaxForm, StatusCellPendingTaxReview, StatusCellPendingTaxSubmission, StatusCellPayoutProcessing, CashReward, StatusCellPendingW9, StatusCellPayoutCancelled, StatusCellPartnerNotCreatedSetupNotStarted, } from "./TaxAndCashRewardsTableCell.stories";
 export default {
   title: "Components/Tax And Cash Rewards Table",
 };
@@ -58,7 +58,7 @@ const r_pending_tax_review = [
 ];
 const r_pending_partner_creation = [
   h(CashReward, null),
-  h(StatusCellPendingPartnerCreation, null),
+  h(StatusCellPartnerNotCreatedSetupNotStarted, null),
   h(SourceCellReferral, null),
   h(DateCell, null),
 ];

package/dist/collection/components/sqm-rewards-table/TaxAndCashRewardsTableCell.stories.js

@@ -92,6 +92,7 @@ const processingPFT = {
 const taxConnection = {
   connected: true,
   taxHandlingEnabled: true,
+  connectionStatus: "NOT_STARTED",
   publisher: {
     requiredTaxDocumentType: "W8BEN",
     currentTaxDocument: {
@@ -152,7 +153,17 @@ export const StatusCellPendingTaxSubmission = () => {
       },
     } }));
 };
-export const StatusCellPendingPartnerCreation = () => {
+export const StatusCellPartnerCreatedSetupStartedButIncomplete = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+      ...cashReward,
+      ...pending,
+      pendingReasons: ["US_TAX"],
+    }, taxConnection: {
+      ...taxConnection,
+      connected: false,
+    } }));
+};
+export const StatusCellPartnerNotCreatedSetupNotStarted = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
       ...cashReward,
       ...pending,

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -107,7 +107,8 @@ import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.s
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
-import * as UserAttribute from "../sqm-user-attribute/UserAttribute.stories";
+import * as PartnerInfoModal from "../sqm-partner-info-modal/PartnerInfoModal.stories";
+import * as WidgetVerification from "../sqm-widget-verification/WidgetVerification.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -219,7 +220,8 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
-  UserAttribute,
+  PartnerInfoModal,
+  WidgetVerification,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -50,7 +50,7 @@ export function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-text-span-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-widget-verification/WidgetVerification.stories.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Verification",
+};
+export const Step1Email = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: false },
+  }) }));
+export const Step2Code = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: true },
+  }) }));
+export const Step3PartnerModal = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showPartnerModal: true },
+  }) }));
+export const Loading = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { loading: true },
+  }) }));

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -54,7 +54,6 @@ const style = {
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   FooterContainer: {
     display: "flex",
@@ -132,7 +131,7 @@ export function WidgetCodeVerificationView(props) {
           h("sl-input", { class: inputClass, name: "code" }),
           h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      h("div", { class: sheet.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText)))));
+        h("div", { class: sheet.classes.FooterContainer },
+          h(TextSpanView, { type: "p" }, resendCodeText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)))));
 }

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -14,11 +14,9 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     position: "relative",
     flexDirection: "column",
-    maxWidth: "320px",
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   SkeletonOne: {
     width: "50%",