@saasquatch/mint-components 1.11.1-0 → 1.12.0-0

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

@@ -0,0 +1,172 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { useWidgetEmailVerification } from "./useEmailVerification";
+import { WidgetEmailVerificationView, } from "./sqm-email-verification-view";
+import { getProps } from "../../../utils/utils";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Widget Verification Gate
+ */
+export class WidgetEmailVerification {
+  constructor() {
+    /**
+     * @uiName Verify email widget header text
+     */
+    this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Verify email error text
+     */
+    this.errorText = "Failed to send an email. If this continues, contact Support with impact.com";
+    /**
+     * @uiName Email input label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     */
+    this.sendCodeText = "Send code";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoWidgetEmailVerification(this)
+      : useWidgetEmailVerification(this);
+    return h(WidgetEmailVerificationView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-email-verification"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-email-header-text",
+      "reflect": false,
+      "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
+    },
+    "errorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email error text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-text",
+      "reflect": false,
+      "defaultValue": "\"Failed to send an email. If this continues, contact Support with impact.com\""
+    },
+    "emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email input label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-label",
+      "reflect": false,
+      "defaultValue": "\"Email\""
+    },
+    "sendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "send-code-text",
+      "reflect": false,
+      "defaultValue": "\"Send code\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<WidgetEmailVerificationViewProps>",
+        "resolved": "{ states?: { error: string; loading: boolean; email: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../../global/demo"
+          },
+          "WidgetEmailVerificationViewProps": {
+            "location": "import",
+            "path": "./sqm-email-verification-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoWidgetEmailVerification(props) {
+  return deepmerge({
+    states: {
+      error: "",
+      loading: false,
+      email: "",
+    },
+    callbacks: {
+      submitEmail: async () => { },
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,70 @@
+import { useMutation, useParent, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
+export const VerificationEmailMutation = gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+// TODO: Move to component-boilerplate
+export function useVerificationEmailMutation() {
+  const user = useUserIdentity();
+  const [request, { loading, data, errors }] = useMutation(VerificationEmailMutation);
+  const sendVerificationEmailMutation = async () => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not send verification email", e);
+      return undefined;
+    }
+  };
+  return [
+    sendVerificationEmailMutation,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+export function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
+  const [error, setError] = useState(false);
+  const [sendVerificationEmailMutation, { loading, data, errors }] = useVerificationEmailMutation();
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    const formData = e.detail.formData;
+    const toAddress = formData.get("email").toString();
+    const result = await sendVerificationEmailMutation();
+    if (!result || !result.requestUserEmailVerification.success)
+      setError(true);
+    else {
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      error: error && props.errorText,
+      email,
+    },
+    text: props.getTextProps(),
+  };
+}

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-internal.js

@@ -0,0 +1,27 @@
+import { useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h } from "@stencil/core";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "./keys";
+export class WidgetVerificationInternal {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const userIdentity = useUserIdentity();
+    const [showCode, setShowCode] = useParentState({
+      namespace: SHOW_CODE_NAMESPACE,
+      initialValue: false,
+    });
+    const [email, setEmail] = useParentState({
+      namespace: VERIFICATION_EMAIL_NAMESPACE,
+      initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+    });
+    if (showCode) {
+      return h("sqm-code-verification", null);
+    }
+    return h("sqm-email-verification", null);
+  }
+  static get is() { return "sqm-widget-verification-internal"; }
+  static get encapsulation() { return "shadow"; }
+}

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

@@ -0,0 +1,132 @@
+import { useParentState } from "@saasquatch/component-boilerplate";
+import { useHost, withHooks } from "@saasquatch/stencil-hooks";
+import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
+import { Component, h, Host } from "@stencil/core";
+import debugFn from "debug";
+import { VERIFICATION_EVENT_KEY, VERIFICATION_PARENT_NAMESPACE } from "./keys";
+const debug = debugFn("sq:widget-verification");
+function useTemplateChildren({ parent, callback }) {
+  const parentObserver = new MutationObserver(listenForTemplateChanges);
+  const childTemplateObserver = new MutationObserver(callback);
+  parentObserver.observe(parent, {
+    childList: true,
+    // We only care about immediate children templates
+    subtree: false,
+  });
+  listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
+  function listenForTemplateChanges(mutationList) {
+    var _a;
+    // Be smart, only look at the mutation list
+    (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
+      childTemplateObserver.observe(t.content, {
+        childList: true,
+        attributes: true,
+        // Look deep into the templates for re-rendering
+        subtree: true,
+      });
+    });
+  }
+  return () => {
+    parentObserver.disconnect();
+    childTemplateObserver.disconnect();
+  };
+}
+/**
+ * @uiName Widget Verification Gate
+ */
+export class WidgetVerification {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const [context, setContext] = useParentState({
+      namespace: VERIFICATION_PARENT_NAMESPACE,
+      initialValue: undefined,
+    });
+    const authToken = context === null || context === void 0 ? void 0 : context.token;
+    const [container, setContainer] = useState(undefined);
+    const [slot, setSlot] = useState(undefined);
+    if (!authToken)
+      debug("No user identity available");
+    const updateTemplates = useCallback(() => {
+      const isAuth = !!authToken;
+      const templates = slot.querySelectorAll(`template`);
+      const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
+      if (template) {
+        // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
+        const newContent = template.innerHTML || template.firstElementChild.outerHTML;
+        // if template contents are an exact match
+        if (newContent === container.innerHTML) {
+          debug("don't rerender");
+        }
+        else if (template) {
+          container.innerHTML = newContent;
+        }
+      }
+      const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
+      // if editing in raisins
+      if (plopTargets.length) {
+        const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
+        const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
+        loggedOutPlopTargets.forEach((target, i) => {
+          if (isAuth) {
+            target.style.display = "none";
+            return;
+          }
+          // Place last plop target at the bottom of the parent
+          if (i === loggedOutPlopTargets.length - 1) {
+            target.style.bottom = "0px";
+            target.style.left = "0px";
+            target.style.right = "0px";
+            target.style.position = "absolute";
+          }
+          target.style.height = "25px";
+        });
+        loggedInPlopTargets.forEach((target, i) => {
+          if (!isAuth) {
+            target.style.display = "none";
+            return;
+          }
+          // Place last plop target at the bottom of the parent
+          if (i === loggedInPlopTargets.length - 1) {
+            target.style.bottom = "0px";
+            target.style.left = "0px";
+            target.style.right = "0px";
+            target.style.position = "absolute";
+          }
+          target.style.height = "25px";
+        });
+      }
+    }, [container, slot, authToken]);
+    useEffect(() => {
+      if (!container || !slot) {
+        debug("DOM not ready:");
+        return;
+      }
+      // Run on first render
+      updateTemplates();
+      return useTemplateChildren({ parent: slot, callback: updateTemplates });
+    }, [slot, container, authToken]);
+    useEffect(() => {
+      const host = useHost();
+      const callback = (e) => {
+        e.stopPropagation();
+        setContext({ token: e.detail.token });
+      };
+      host.addEventListener(VERIFICATION_EVENT_KEY, callback);
+      return () => {
+        host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
+      };
+    }, []);
+    return (h(Host, null,
+      h("div", { ref: setSlot, style: { display: "contents" } },
+        h("template", { slot: "not-verified" },
+          h("sqm-widget-verification-internal", null)),
+        h("slot", { name: "not-verified" }),
+        h("slot", { name: "verified" })),
+      h("div", { ref: setContainer },
+        h("slot", { name: "shown" }))));
+  }
+  static get is() { return "sqm-widget-verification"; }
+}

package/dist/collection/components/sqm-widget-verification/useWidgetVerification.js

@@ -0,0 +1,3 @@
+export function useWidgetVerification() {
+  return {};
+}

package/dist/collection/components/tax-and-cash/BankingForm.stories.js

@@ -4,6 +4,7 @@ export default {
 };
 const bankingFormProps = {
   states: {
+    showVerification: false,
     hideSteps: false,
     disabled: false,
     loading: false,

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -194,6 +194,7 @@ const stepTwoProps = {
 };
 const stepFourProps = {
   states: {
+    showVerification: false,
     step: "4",
     hideSteps: false,
     disabled: false,
@@ -967,6 +968,23 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
       },
     } }));
 };
+export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        showIdentityVerificationDialog: true,
+        identiyRequired: true,
+        canEditPayoutInfo: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: false,
+      },
+    } }));
+};
 export const TaxAndCashDashboardNewTaxForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js

@@ -313,6 +313,9 @@ export class BankingInfoForm {
         padding: "var(--sl-spacing-x-small)",
       },
     };
+    if (props.states.isPartner && props.states.showVerification) {
+      return h("sqm-code-verification", null);
+    }
     return (h(Host, null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
           formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
@@ -1497,7 +1500,7 @@ export class BankingInfoForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BankingInfoFormViewProps>",
-        "resolved": "{ states?: { step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -1,9 +1,10 @@
-import { useLocale, useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useHost, useLocale, useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
 import { intl } from "../../../global/global";
 import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
+import { VERIFICATION_EVENT_KEY } from "../../sqm-widget-verification/keys";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {
   USD: "USD20.00",
@@ -50,6 +51,21 @@ const SAVE_WITHDRAWAL_SETTINGS = gql `
     }
   }
 `;
+const UPDATE_WITHDRAWAL_SETTINGS = gql `
+  mutation updateImpactPublisherWithdrawalSettings(
+    $updateImpactPublisherWithdrawalSettingsInput: UpdateImpactPublisherWithdrawalSettingsInput!
+  ) {
+    updateImpactPublisherWithdrawalSettings(
+      updateImpactPublisherWithdrawalSettingsInput: $updateImpactPublisherWithdrawalSettingsInput
+    ) {
+      success
+      validationErrors {
+        field
+        message
+      }
+    }
+  }
+`;
 function getPaymentMethod(paymentOption) {
   if (paymentOption.defaultFinancePaymentMethodId === 3 ||
     paymentOption.defaultFinancePaymentMethodId === 5)
@@ -67,6 +83,7 @@ function parseImpactThreshold(threshold) {
 }
 export function useBankingInfoForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
+  const host = useHost();
   const locale = useLocale();
   const user = useUserIdentity();
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
@@ -76,6 +93,9 @@ export function useBankingInfoForm(props) {
   const { data: paymentOptionsData, loading: paymentOptionsLoading, errors: paymentOptionsError, } = useParentQueryValue(FINANCE_NETWORK_SETTINGS_NAMESPACE);
   const { data: userData, refetch, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const [saveWithdrawalSettings] = useMutation(SAVE_WITHDRAWAL_SETTINGS);
+  const [updateWithdrawalSettings] = useMutation(UPDATE_WITHDRAWAL_SETTINGS);
+  const [showVerification, setShowVerification] = useState(false);
+  const [currentFormData, setCurrentFormData] = useState(null);
   const [formState, setFormState] = useState({});
   const [currentPaymentOption, setCurrentPaymentOption] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -85,8 +105,9 @@ export function useBankingInfoForm(props) {
   const [countrySearch, setCountrySearch] = useState("");
   const [filteredCountries, setFilteredCountries] = useState(countries || []);
   const currency = ((_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.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) || "";
+  const isPartner = !!((_f = (_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) === null || _f === void 0 ? void 0 : _f.withdrawalSettings);
   const feeCap = paypalFeeMap[currency] || "";
-  const paymentOptions = (_d = paymentOptionsData === null || paymentOptionsData === void 0 ? void 0 : paymentOptionsData.impactFinanceNetworkSettings) === null || _d === void 0 ? void 0 : _d.data;
+  const paymentOptions = (_g = paymentOptionsData === null || paymentOptionsData === void 0 ? void 0 : paymentOptionsData.impactFinanceNetworkSettings) === null || _g === void 0 ? void 0 : _g.data;
   const paymentMethodFeeMap = {
     [ACH_PAYMENT_METHOD]: props.eftWithdrawalLabel,
     [WIRE_PAYMENT_METHOD]: intl.formatMessage({
@@ -165,49 +186,50 @@ export function useBankingInfoForm(props) {
     setFormState((p) => ({ ...p, bankCountry }));
     setCurrentPaymentOption(currentPaymentOption);
   };
-  const onSubmit = async (event) => {
-    var _a, _b, _c, _d;
-    let formData = {};
-    let validationErrors = {};
-    const controls = event.target.getFormControls();
-    controls.forEach((control) => {
-      if (!control.name || !control.id)
-        return;
-      const key = control.name;
-      const value = control.value;
-      JSONPointer.set(formData, key, value);
-      if (control.required && !value) {
-        JSONPointer.set(validationErrors, key, { type: "required" });
-      }
-    });
-    setErrors({ inputErrors: validationErrors });
-    if (Object.keys(validationErrors).length) {
-      return;
-    }
+  const runMutation = async (formData, token) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     setLoading(true);
     try {
       if (!currentPaymentOption)
         throw new Error("No currentPaymentOption");
-      const input = {
-        setImpactPublisherWithdrawalSettingsInput: {
-          user: {
-            id: user.id,
-            accountId: user.accountId,
-          },
-          ...formData,
-          paymentMethod: getPaymentMethod(currentPaymentOption),
-          paymentSchedulingType: paymentScheduleChecked,
+      const body = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
         },
+        ...formData,
+        paymentMethod: getPaymentMethod(currentPaymentOption),
+        paymentSchedulingType: paymentScheduleChecked,
       };
-      const response = await saveWithdrawalSettings(input);
-      if (!response || ((_a = response) === null || _a === void 0 ? void 0 : _a.message)) {
+      let response = null;
+      let success = null;
+      let validationErrors = null;
+      // Call difference mutations based on whether the user is updating
+      // the info for setting it for the first time
+      if (isPartner) {
+        response = await updateWithdrawalSettings({
+          updateImpactPublisherWithdrawalSettingsInput: {
+            ...body,
+            accessKey: token,
+          },
+        });
+        success = (_b = (_a = response) === null || _a === void 0 ? void 0 : _a.updateImpactPublisherWithdrawalSettings) === null || _b === void 0 ? void 0 : _b.success;
+        validationErrors = (_d = (_c = response) === null || _c === void 0 ? void 0 : _c.updateImpactPublisherWithdrawalSettings) === null || _d === void 0 ? void 0 : _d.validationErrors;
+      }
+      else {
+        response = await saveWithdrawalSettings({
+          setImpactPublisherWithdrawalSettingsInput: {
+            ...body,
+          },
+        });
+        success = (_f = (_e = response) === null || _e === void 0 ? void 0 : _e.setImpactPublisherWithdrawalSettings) === null || _f === void 0 ? void 0 : _f.success;
+        validationErrors = (_h = (_g = response) === null || _g === void 0 ? void 0 : _g.setImpactPublisherWithdrawalSettings) === null || _h === void 0 ? void 0 : _h.validationErrors;
+      }
+      if (!response || ((_j = response) === null || _j === void 0 ? void 0 : _j.message)) {
         throw new Error();
       }
-      else if (!((_b = response
-        .setImpactPublisherWithdrawalSettings) === null || _b === void 0 ? void 0 : _b.success)) {
-        console.error("Validation failed: ", (_c = response
-          .setImpactPublisherWithdrawalSettings) === null || _c === void 0 ? void 0 : _c.validationErrors);
-        const validationErrors = (_d = response.setImpactPublisherWithdrawalSettings) === null || _d === void 0 ? void 0 : _d.validationErrors;
+      else if (!success) {
+        console.error("Validation failed: ", validationErrors);
         const mappedValidationErrors = validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.reduce((agg, error) => {
           return {
             ...agg,
@@ -233,6 +255,39 @@ export function useBankingInfoForm(props) {
       setLoading(false);
     }
   };
+  const onSubmit = async (event) => {
+    let formData = {};
+    let validationErrors = {};
+    const controls = event.target.getFormControls();
+    controls.forEach((control) => {
+      if (!control.name || !control.id)
+        return;
+      const key = control.name;
+      const value = control.value;
+      JSONPointer.set(formData, key, value);
+      if (control.required && !value) {
+        JSONPointer.set(validationErrors, key, { type: "required" });
+      }
+    });
+    setErrors({ inputErrors: validationErrors });
+    if (Object.keys(validationErrors).length) {
+      return;
+    }
+    let token = undefined;
+    if (isPartner) {
+      setShowVerification(true);
+      token = await new Promise((res) => {
+        const cb = (e) => {
+          e.stopPropagation();
+          host.removeEventListener(VERIFICATION_EVENT_KEY, cb);
+          res(e.detail.token);
+        };
+        host.addEventListener(VERIFICATION_EVENT_KEY, cb);
+      });
+      setShowVerification(false);
+    }
+    await runMutation(formData, token);
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -259,11 +314,12 @@ export function useBankingInfoForm(props) {
       setCountrySearch,
     },
     states: {
+      showVerification,
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
       hideSteps: !!context.hideSteps,
       saveDisabled: !paymentMethodChecked || !paymentScheduleChecked,
       locale,
-      isPartner: !!((_g = (_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) === null || _g === void 0 ? void 0 : _g.withdrawalSettings),
+      isPartner,
       feeCap,
       paymentMethodFeeLabel,
       disabled: loading,