@saasquatch/mint-components 1.13.0-9 → 1.13.0

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

@@ -10,6 +10,7 @@ import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
@@ -213,7 +214,16 @@ export class BankingInfoForm {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our Support team or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
+    /**
+     * Text for verify email dialog
+     * @uiName Verify email header
+     */
+    this.verifyEmailHeaderText = "Verify your email";
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -225,7 +235,7 @@ export class BankingInfoForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed under a field that is missing required information.
      * @uiName Empty form field error message
@@ -236,6 +246,10 @@ export class BankingInfoForm {
      * @uiName Form field error message
      */
     this.fieldInvalidError = "{fieldName} is invalid";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Continue button label
      */
@@ -308,22 +322,60 @@ export class BankingInfoForm {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        position: "relative",
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(title)": {
+          padding: "var(--sl-spacing-large) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
+        },
+        "&::part(base)": {
+          position: "absolute",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-large) 0 var(--sl-spacing-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",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    const verifyDescription = intl.formatMessage({
+      id: "codeResentSuccessfully",
+      defaultMessage: props.text.verifyEmailDescriptionText,
+    }, {
+      email: props.states.email,
+    });
     return (h(Host, null,
+      h("style", { type: "text/css" }, styleString),
+      props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide, label: props.text.verifyEmailHeaderText },
+        h("sqm-code-verification", { verifyCodeHeaderText: verifyDescription, reverifyCodeHeaderText: verifyDescription, onVerification: props.callbacks.onVerification }))) : 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),
-          countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
+          countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
               label: props.text.bankLocationLabel,
             }),
           })),
-            h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+            h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
@@ -334,14 +386,14 @@ export class BankingInfoForm {
             }), (_f = (_e = props.states) === null || _e === void 0 ? void 0 : _e.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
           paymentMethodSlot: (h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
-          paymentThresholdSelectSlot: (h("sl-select", Object.assign({ required: true, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
+          paymentThresholdSelectSlot: (h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.paymentThreshold) === null || _l === void 0 ? void 0 : _l.type,
               label: props.text.paymentThresholdSelectLabel,
             }),
           })), props.states.thresholds.map((t) => (h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
-          paymentFixedDaySelectSlot: (h("sl-select", Object.assign({ required: true, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
+          paymentFixedDaySelectSlot: (h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_r = (_q = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _q === void 0 ? void 0 : _q.paymentDay) === null || _r === void 0 ? void 0 : _r.type,
@@ -350,7 +402,7 @@ export class BankingInfoForm {
           })),
             h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText),
             h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
-          paypalInputSlot: (h("sl-input", Object.assign({ required: true, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
+          paypalInputSlot: (h("sl-input", Object.assign({ required: true, disabled: props.states.saveLoading, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_0 = (_z = (_y = (_x = props.states.formState) === null || _x === void 0 ? void 0 : _x.errors) === null || _y === void 0 ? void 0 : _y.inputErrors) === null || _z === void 0 ? void 0 : _z.paypalEmailAddress) === null || _0 === void 0 ? void 0 : _0.type,
@@ -1310,7 +1362,49 @@ export class BankingInfoForm {
       },
       "attribute": "is-partner-alert-description",
       "reflect": false,
-      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our Support team or sign up for this referral program with a different email.\""
+      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.\""
+    },
+    "verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email header",
+            "name": "uiName"
+          }],
+        "text": "Text for verify email dialog"
+      },
+      "attribute": "verify-email-header-text",
+      "reflect": false,
+      "defaultValue": "\"Verify your email\""
+    },
+    "verifyEmailDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-email-description-text",
+      "reflect": false,
+      "defaultValue": "\"Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.\""
     },
     "generalErrorTitle": {
       "type": "string",
@@ -1358,7 +1452,7 @@ export class BankingInfoForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "fieldRequiredError": {
       "type": "string",
@@ -1402,6 +1496,27 @@ export class BankingInfoForm {
       "reflect": false,
       "defaultValue": "\"{fieldName} is invalid\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "continueButton": {
       "type": "string",
       "mutable": false,
@@ -1497,7 +1612,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; email?: string; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1608,6 +1723,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -1616,6 +1732,7 @@ function useDemoBankingInfoForm(props) {
       setPaymentScheduleChecked,
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
+      onVerification: () => { },
     },
     text: props.getTextProps(),
     refs: {

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

@@ -1,9 +1,11 @@
-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";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {
   USD: "USD20.00",
@@ -50,6 +52,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)
@@ -66,7 +83,8 @@ function parseImpactThreshold(threshold) {
   return parsed.toString();
 }
 export function useBankingInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const host = useHost();
   const locale = useLocale();
   const user = useUserIdentity();
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
@@ -76,6 +94,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 +106,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 +187,52 @@ 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) {
+        if (!token)
+          return; // Require token for this mutation
+        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,
@@ -222,6 +247,8 @@ export function useBankingInfoForm(props) {
         });
         return;
       }
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -233,6 +260,45 @@ 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);
+  };
+  const onVerification = async (token) => {
+    host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
+      detail: { token },
+      bubbles: false,
+    }));
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -257,13 +323,16 @@ export function useBankingInfoForm(props) {
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
+      onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     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,
@@ -288,6 +357,7 @@ export function useBankingInfoForm(props) {
       hasPayPal,
       bankCountry: formState.bankCountry,
       countrySearch,
+      email: (_j = userData === null || userData === void 0 ? void 0 : userData.user) === null || _j === void 0 ? void 0 : _j.email,
     },
     refs: {
       formRef,

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -20,6 +20,14 @@ const style = {
   MessageContainer: {
     maxWidth: "400px",
   },
+  IFrameContainer: {
+    "@media screen and (max-width: 440px)": {
+      position: "absolute",
+      width: "100vw",
+      left: "-30px",
+      zIndex: "9999",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -61,6 +69,7 @@ export const DocusignLoadingView = () => {
       h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
 export const DocusignIframe = ({ states, data, callbacks, text, }) => {
+  const { classes } = sheet;
   const [iFrameHeight, setiFrameHeight] = useState("100%");
   const allowedDomains = [
     "referralsaasquatch.com",
@@ -83,7 +92,7 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
     return () => {
       window.removeEventListener("message", callback, false);
     };
-  }, []);
+  }, [iFrameHeight]);
   if (states.urlLoading)
     return h(DocusignLoadingView, null);
   if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
@@ -91,5 +100,9 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
   }
   if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
     return h(DocusignExpiredView, { text: text });
-  return (h("iframe", { scrolling: "yes", frameBorder: "0", src: data.documentUrl, width: "100%", height: iFrameHeight }));
+  // Wrap iFrame with container that shares the same height to push other elements down when absolute positioned
+  return (h("div", { style: { height: iFrameHeight } },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: classes.IFrameContainer },
+      h("iframe", { scrolling: "yes", frameBorder: "0", width: "100%", src: data.documentUrl, height: iFrameHeight }))));
 };

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

@@ -160,12 +160,22 @@ export const DocusignFormView = (props) => {
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.loadingErrorAlertHeader),
         h("br", null),
-        text.error.loadingErrorAlertDescription))),
+        intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
     ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.ErrorAlertContainer },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("strong", null, text.error.generalTitle),
       h("br", null),
-      text.error.generalDescription)),
+      intl.formatMessage({
+        id: "generalDescription",
+        defaultMessage: text.error.generalDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     h("div", null,
       h("div", null,
         h("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),

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

@@ -34,6 +34,10 @@ export class DocusignForm {
      * @uiWidget textArea
      */
     this.taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * Displayed at the top of the page to individuals joining a US program who reside outside the country.
      * @uiName W-8 BEN tax form description
@@ -77,7 +81,7 @@ export class DocusignForm {
      * @uiName Docusign form error message
      * @uiWidget textArea
      */
-    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.";
+    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
     /**
      * @uiName Refresh page button label
      */
@@ -93,7 +97,7 @@ export class DocusignForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -105,7 +109,7 @@ export class DocusignForm {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
@@ -240,6 +244,27 @@ export class DocusignForm {
       "reflect": false,
       "defaultValue": "\"Participants based in the US need to submit a {documentType} form.\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "taxFormDescriptionIndividualParticipant": {
       "type": "string",
       "mutable": false,
@@ -421,7 +446,7 @@ export class DocusignForm {
       },
       "attribute": "docusign-error",
       "reflect": false,
-      "defaultValue": "\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\""
+      "defaultValue": "\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.\""
     },
     "refreshButton": {
       "type": "string",
@@ -490,7 +515,7 @@ export class DocusignForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "loadingErrorAlertHeader": {
       "type": "string",
@@ -538,7 +563,7 @@ export class DocusignForm {
       },
       "attribute": "loading-error-alert-description",
       "reflect": false,
-      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
     },
     "taxAndPayoutsDescription": {
       "type": "string",

package/dist/collection/components/tax-and-cash/sqm-docusign-form/useDocusignForm.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const GET_TAX_DOCUMENT = gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -101,6 +102,8 @@ export function useDocusignForm(props) {
       // @ts-expect-error: no data type for result
       if (!result.completeImpactPublisherTaxDocument.success)
         throw new Error();
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       setShowExitButton(true);
     }
     catch (e) {