@saasquatch/mint-components 1.8.0-98 → 1.8.0

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

@@ -1,12 +1,9 @@
-import { useLocale, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useLocale, useMutation, useParent, useParentQueryValue, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
 import { gql } from "graphql-request";
 import JSONPointer from "jsonpointer";
 import { intl } from "../../../global/global";
-import { useParentQueryValue } from "../../../utils/useParentQuery";
-import { useParent, useParentValue } from "../../../utils/useParentState";
-import { FINANCE_NETWORK_SETTINGS_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
+import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {
   USD: "USD20.00",
@@ -26,205 +23,6 @@ export const paypalFeeMap = {
 const ACH_PAYMENT_METHOD = 3;
 const WIRE_PAYMENT_METHOD = 5;
 const PAYPAL_PAYMENT_METHOD = 7;
-export function getFormMap({ props, getValidationErrorMessage, }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
-  const { errors, ...formState } = props.states.formState;
-  const country = props.states.bankCountry;
-  return {
-    0: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text" }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.beneficiaryAccountName) === null || _c === void 0 ? void 0 : _c.type,
-          label: props.text.beneficiaryAccountNameLabel,
-        }),
-      })))),
-    },
-    1: {
-      input: (h("sl-select", Object.assign({ required: true, label: props.text.bankAccountTypeLabel, name: "/bankAccountType", id: "bankAccountType", key: "bankAccountType" }, (((_d = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _d === void 0 ? void 0 : _d.bankAccountType) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _e === void 0 ? void 0 : _e.bankAccountType) === null || _f === void 0 ? void 0 : _f.type,
-          label: props.text.bankAccountTypeLabel,
-        }),
-      })),
-        h("sl-menu-item", { value: "CHECKING" }, props.text.checkingSelectItemLabel),
-        h("sl-menu-item", { value: "SAVINGS" }, props.text.savingsSelectItemLabel))),
-    },
-    2: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.bankAccountNumberLabel, name: "/bankAccountNumber", id: "bankAccountNumber", key: "bankAccountNumber", value: formState.bankAccountNumber, type: "text" }, (((_g = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _g === void 0 ? void 0 : _g.bankAccountNumber) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_j = (_h = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _h === void 0 ? void 0 : _h.bankAccountNumber) === null || _j === void 0 ? void 0 : _j.type,
-          label: props.text.bankAccountNumberLabel,
-        }),
-      })))),
-    },
-    3: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.ibanLabel, name: "/bankAccountNumber", id: "iban", key: "iban", type: "text", value: formState.bankAccountNumber }, (((_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.bankAccountNumber) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_m = (_l = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _l === void 0 ? void 0 : _l.bankAccountNumber) === null || _m === void 0 ? void 0 : _m.type,
-          label: props.text.ibanLabel,
-        }),
-      })))),
-    },
-    4: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.swiftCodeLabel, name: "/swiftCode", id: "swiftCode", key: "swiftCode", type: "text" }, (((_o = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _o === void 0 ? void 0 : _o.swiftCode) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.swiftCode) === null || _q === void 0 ? void 0 : _q.type,
-          label: props.text.swiftCodeLabel,
-        }),
-      })))),
-    },
-    5: {
-      input: (h("sl-input", Object.assign({ required: true, label: intl.formatMessage({
-          id: "routingCodeText",
-          defaultMessage: props.text.routingCodeLabel,
-        }, {
-          country,
-        }), name: "/routingCode", id: "routingCode", key: "routingCode", type: "text" }, (((_r = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _r === void 0 ? void 0 : _r.routingCode) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_t = (_s = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _s === void 0 ? void 0 : _s.routingCode) === null || _t === void 0 ? void 0 : _t.type,
-          label: intl.formatMessage({
-            id: "routingCodeErrorText",
-            defaultMessage: props.text.routingCodeLabel,
-          }, {
-            country,
-          }),
-        }),
-      })))),
-    },
-    6: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.bankNameLabel, name: "/bankName", id: "bankName", key: "bankName", type: "text" }, (((_u = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _u === void 0 ? void 0 : _u.bankName) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_w = (_v = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _v === void 0 ? void 0 : _v.bankName) === null || _w === void 0 ? void 0 : _w.type,
-          label: props.text.bankNameLabel,
-        }),
-      })))),
-    },
-    7: {
-      input: [
-        h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_x = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _x === void 0 ? void 0 : _x.beneficiaryClassification) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_z = (_y = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _y === void 0 ? void 0 : _y.beneficiaryClassification) === null || _z === void 0 ? void 0 : _z.type,
-            label: props.text.classificationLabel,
-          }),
-        })),
-          h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
-          h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
-          h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel)),
-        h("sl-input", Object.assign({ required: true, label: intl.formatMessage({
-            id: "fxWireText",
-            defaultMessage: props.text.taxPayerIdLabel,
-          }, {
-            country,
-          }), type: "text", name: "/taxPayerId", id: "taxPayerId", key: "taxPayerId" }, (((_0 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _0 === void 0 ? void 0 : _0.taxPayerId) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_2 = (_1 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _1 === void 0 ? void 0 : _1.taxPayerId) === null || _2 === void 0 ? void 0 : _2.type,
-            label: props.text.taxPayerIdLabel,
-          }),
-        }))),
-      ],
-    },
-    8: {
-      input: (h("sl-select", Object.assign({ required: true, label: props.text.classificationCPFLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_3 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _3 === void 0 ? void 0 : _3.beneficiaryClassification) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_5 = (_4 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _4 === void 0 ? void 0 : _4.beneficiaryClassification) === null || _5 === void 0 ? void 0 : _5.type,
-          label: props.text.classificationCPFLabel,
-        }),
-      })),
-        h("sl-menu-item", { value: "CPF" }, "CPF"),
-        h("sl-menu-item", { value: "CNPJ" }, "CNPJ"))),
-    },
-    9: {
-      input: (h("sl-input", Object.assign({ key: "patronymicName", required: true, label: props.text.patronymicNameLabel, name: "/patronymicName", id: "patronymicName", type: "text" }, (((_6 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _6 === void 0 ? void 0 : _6.patronymicName) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_8 = (_7 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _7 === void 0 ? void 0 : _7.patronymicName) === null || _8 === void 0 ? void 0 : _8.type,
-          label: props.text.patronymicNameLabel,
-        }),
-      })))),
-    },
-    10: {
-      input: (h("sl-input", Object.assign({ key: "voCode", label: props.text.voCodeLabel, name: "/voCode", id: "voCode", type: "text" }, (((_9 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _9 === void 0 ? void 0 : _9.voCode) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_11 = (_10 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _10 === void 0 ? void 0 : _10.voCode) === null || _11 === void 0 ? void 0 : _11.type,
-          label: props.text.voCodeLabel,
-        }),
-      })))),
-    },
-    11: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.agencyCodeLabel, name: "/agencyCode", id: "agencyCode", key: "agencyCode", type: "text" }, (((_12 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _12 === void 0 ? void 0 : _12.agencyCode) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_14 = (_13 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _13 === void 0 ? void 0 : _13.agencyCode) === null || _14 === void 0 ? void 0 : _14.type,
-          label: props.text.agencyCodeLabel,
-        }),
-      })))),
-    },
-    12: {
-      input: [
-        h("sl-input", Object.assign({ required: true, label: props.text.bankAddressLabel, name: "/bankAddress", id: "bankAddress", key: "bankAddress", type: "text" }, (((_15 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _15 === void 0 ? void 0 : _15.bankAddress) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_17 = (_16 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _16 === void 0 ? void 0 : _16.bankAddress) === null || _17 === void 0 ? void 0 : _17.type,
-            label: props.text.bankAddressLabel,
-          }),
-        }))),
-        h("sl-input", Object.assign({ required: true, label: props.text.bankCityLabel, name: "/bankCity", id: "bankCity", key: "bankCity", type: "text" }, (((_18 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _18 === void 0 ? void 0 : _18.bankCity) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_20 = (_19 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _19 === void 0 ? void 0 : _19.bankCity) === null || _20 === void 0 ? void 0 : _20.type,
-            label: props.text.bankCityLabel,
-          }),
-        }))),
-        h("sl-input", Object.assign({ required: true, label: props.text.bankStateLabel, name: "/bankState", id: "bankState", key: "bankState", type: "text" }, (((_21 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _21 === void 0 ? void 0 : _21.bankState) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_23 = (_22 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _22 === void 0 ? void 0 : _22.bankState) === null || _23 === void 0 ? void 0 : _23.type,
-            label: props.text.bankStateLabel,
-          }),
-        }))),
-        h("sl-input", Object.assign({ required: true, label: props.text.bankPostalCodeLabel, name: "/bankPostalCode", id: "bankPostalCode", key: "bankPostalCode", type: "text" }, (((_24 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _24 === void 0 ? void 0 : _24.bankPostalCode) && {
-          class: "error-input",
-          helpText: getValidationErrorMessage({
-            type: (_26 = (_25 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _25 === void 0 ? void 0 : _25.bankPostalCode) === null || _26 === void 0 ? void 0 : _26.type,
-            label: props.text.bankPostalCodeLabel,
-          }),
-        }))),
-      ],
-    },
-    13: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.branchCodeLabel, name: "/branchCode", id: "branchCode", key: "branchCode", type: "text" }, (((_27 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _27 === void 0 ? void 0 : _27.branchCode) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_29 = (_28 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _28 === void 0 ? void 0 : _28.branchCode) === null || _29 === void 0 ? void 0 : _29.type,
-          label: props.text.branchCodeLabel,
-        }),
-      })))),
-    },
-    14: {
-      input: (h("sl-select", Object.assign({ required: true, label: props.text.classificationLabel, name: "/beneficiaryClassification", id: "beneficiaryClassification", key: "beneficiaryClassification" }, (((_30 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _30 === void 0 ? void 0 : _30.beneficiaryClassification) && {
-        class: "error-input",
-        helpText: getValidationErrorMessage({
-          type: (_32 = (_31 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _31 === void 0 ? void 0 : _31.beneficiaryClassification) === null || _32 === void 0 ? void 0 : _32.type,
-          label: props.text.classificationLabel,
-        }),
-      })),
-        h("sl-menu-item", { value: "BUSINESS" }, props.text.businessSelectItemLabel),
-        h("sl-menu-item", { value: "INDIVIDUAL" }, props.text.individualSelectItemLabel),
-        h("sl-menu-item", { value: "FOREIGN" }, props.text.foreignSelectItemLabel))),
-    },
-  };
-}
 export function getFormInputs({ bitset, formMap }) {
   // Convert bitset to binary representation
   const binary = bitset.toString(2).padStart(Object.keys(formMap).length, "0");
@@ -271,9 +69,10 @@ export function useBankingInfoForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const locale = useLocale();
   const user = useUserIdentity();
-  const formRef = useRef(null);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = useParentValue(SORTED_COUNTRIES_NAMESPACE);
+  const formRef = useRef(null);
   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);
@@ -283,6 +82,8 @@ export function useBankingInfoForm(props) {
   const [errors, setErrors] = useState({});
   const [_paymentMethodChecked, _setPaymentMethodChecked] = useState(undefined);
   const [paymentScheduleChecked, setPaymentScheduleChecked] = useState(undefined);
+  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 feeCap = paypalFeeMap[currency] || "";
   const paymentOptions = (_d = paymentOptionsData === null || paymentOptionsData === void 0 ? void 0 : paymentOptionsData.impactFinanceNetworkSettings) === null || _d === void 0 ? void 0 : _d.data;
@@ -297,29 +98,6 @@ export function useBankingInfoForm(props) {
     }),
   };
   const paymentMethodFeeLabel = paymentMethodFeeMap[currentPaymentOption === null || currentPaymentOption === void 0 ? void 0 : currentPaymentOption.defaultFinancePaymentMethodId];
-  const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
-  // filter out any duplicate countries and null countryCode
-  const availableCountries = new Set(paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.map((option) => option.countryCode).filter((value) => value));
-  const getCountryObj = (country) => {
-    // @ts-ignore DisplayNames not in Intl type
-    const name = new Intl.DisplayNames([intlLocale], {
-      type: "region",
-    }).of(country);
-    return {
-      code: country,
-      name,
-    };
-  };
-  const sortByName = (a, b) => a.name < b.name ? -1 : 1;
-  const _topCountries = ["CA", "GB", "US"];
-  const countries = Array.from(availableCountries)
-    .map((c) => getCountryObj(c))
-    .sort(sortByName)
-    .reduce((prev, countryObj) => {
-    if (_topCountries.includes(countryObj.code))
-      return [countryObj, ...prev];
-    return [...prev, countryObj];
-  }, []);
   const hasPayPal = !!(paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.find((option) => option.defaultFinancePaymentMethodId === PAYPAL_PAYMENT_METHOD));
   const paymentMethodChecked = !hasPayPal
     ? "toBankAccount"
@@ -335,6 +113,7 @@ export function useBankingInfoForm(props) {
     // Use currentPaymentOption and initialise form with userData
     let initialData = {
       bankCountry: (withdrawalSettings === null || withdrawalSettings === void 0 ? void 0 : withdrawalSettings.bankCountry) || publisherCountry,
+      paymentMethod: "BANK_TRANSFER",
     };
     if (withdrawalSettings && ((_j = (_h = (_g = userData.user) === null || _g === void 0 ? void 0 : _g.impactConnection) === null || _h === void 0 ? void 0 : _h.publisher) === null || _j === void 0 ? void 0 : _j.brandedSignup)) {
       initialData = {
@@ -346,22 +125,39 @@ export function useBankingInfoForm(props) {
         paymentDay: withdrawalSettings.paymentDay,
       };
     }
-    const currentPaymentOption = paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.find((paymentOption) => paymentOption.countryCode === initialData.bankCountry);
-    setCurrentPaymentOption(currentPaymentOption);
-    setPaymentScheduleChecked(initialData.paymentSchedulingType);
-    setFormState(initialData);
+    const currentPaymentOption = paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.find((paymentOption) => {
+      if (initialData.paymentMethod === "PAYPAL" &&
+        paymentOption.defaultFinancePaymentMethodId === 7)
+        return true;
+      if (paymentOption.countryCode !== initialData.bankCountry)
+        return false;
+      return true;
+    });
+    updateBankCountry(currentPaymentOption === null || currentPaymentOption === void 0 ? void 0 : currentPaymentOption.countryCode);
     setPaymentMethodChecked(initialData.paymentMethod === "PAYPAL"
       ? "toPayPalAccount"
       : "toBankAccount");
-    updateBankCountry(currentPaymentOption === null || currentPaymentOption === void 0 ? void 0 : currentPaymentOption.countryCode);
+    setCurrentPaymentOption(currentPaymentOption);
+    setPaymentScheduleChecked(initialData.paymentSchedulingType);
+    setFormState(initialData);
   }, [paymentOptions, userData, setCurrentPaymentOption, setFormState]);
+  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]);
   const updateBankCountry = (bankCountry) => {
     const currentPaymentOption = paymentOptions === null || paymentOptions === void 0 ? void 0 : paymentOptions.find((paymentOption) => {
       if (paymentOption.countryCode === bankCountry)
         return true;
       return false;
     });
-    setFormState((p) => ({ bankCountry, ...p }));
+    setFormState((p) => ({ ...p, bankCountry }));
     setCurrentPaymentOption(currentPaymentOption);
   };
   const onSubmit = async (event) => {
@@ -387,7 +183,7 @@ export function useBankingInfoForm(props) {
     try {
       if (!currentPaymentOption)
         throw new Error("No currentPaymentOption");
-      const response = await saveWithdrawalSettings({
+      const input = {
         setImpactPublisherWithdrawalSettingsInput: {
           user: {
             id: user.id,
@@ -397,7 +193,8 @@ export function useBankingInfoForm(props) {
           paymentMethod: getPaymentMethod(currentPaymentOption),
           paymentSchedulingType: paymentScheduleChecked,
         },
-      });
+      };
+      const response = await saveWithdrawalSettings(input);
       if (!response || ((_a = response) === null || _a === void 0 ? void 0 : _a.message)) {
         throw new Error();
       }
@@ -454,6 +251,7 @@ export function useBankingInfoForm(props) {
       setPaymentMethodChecked,
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
+      setCountrySearch,
     },
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
@@ -480,8 +278,11 @@ export function useBankingInfoForm(props) {
       bitset: (currentPaymentOption === null || currentPaymentOption === void 0 ? void 0 : currentPaymentOption.withdrawalSettingId) || 0,
       currency,
       thresholds: ((_h = currentPaymentOption === null || currentPaymentOption === void 0 ? void 0 : currentPaymentOption.thresholdOptions) === null || _h === void 0 ? void 0 : _h.split(",")) || [],
-      countries,
+      countries: filteredCountries,
+      allCountries: countries,
       hasPayPal,
+      bankCountry: formState.bankCountry,
+      countrySearch,
     },
     refs: {
       formRef,

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

@@ -63,8 +63,8 @@ export const DocusignIframe = ({ states, callbacks, text, }) => {
   if (states.urlLoading)
     return h(DocusignLoadingView, null);
   const callback = useCallback((e) => {
-    // TODO: CHANGE THIS WHEN ACTUAL URL IS AVAILABLE
-    if (e.origin !== "https://staging.referralsaasquatch.com")
+    var _a;
+    if (!((_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes("referralsaasquatch.com")))
       return;
     if (!e.data)
       return;

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

@@ -110,6 +110,10 @@ const style = {
   RadioText: {
     fontSize: "var(--sl-font-size-small)",
   },
+  PageDescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-medium)",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -149,7 +153,8 @@ export const DocusignFormView = (props) => {
           id: "formStep",
           defaultMessage: text.formStep,
         }, { step: states.step, count: FORM_STEPS }))),
-        h("h3", null, text.taxForm))),
+        h("h3", null, text.taxForm),
+        h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     states.loadingError && (h("div", null,
       h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
@@ -191,7 +196,6 @@ export const DocusignFormView = (props) => {
       h("div", null,
         h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
           h("sl-icon", { class: classes.InfoIcon, slot: "icon", name: "info-circle" }),
-          text.banner),
-        slots.docusignIframeSlot,
-        !states.hideBackButton && (h("sl-button", { class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.cancelButton)))))));
+          text.docusignSessionWarning),
+        slots.docusignIframeSlot)))));
 };