@saasquatch/mint-components 2.1.9-20 → 2.1.9-21

package/dist/cjs/{sqm-partner-info-modal-view-d5c997e6.js → sqm-partner-info-modal-view-464c52c9.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 const index = require('./index-8277cbb3.js');
+const global = require('./global-0f8b1267.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {
@@ -50,6 +51,11 @@ const style = {
       margin: "0",
     },
   },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
   SubmitButton: {
     width: "100%",
     marginTop: "var(--sl-spacing-large)",
@@ -66,6 +72,12 @@ function PartnerInfoModalContentView(props) {
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
+  const bankingCollectionText = global.intl.formatMessage({
+    id: "bankingCollectionText",
+    defaultMessage: text.allowBankingCollection,
+  }, {
+    termsAndConditionsLink: (index.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
+  });
   return (index.h("div", null,
     index.h("style", { type: "text/css" },
       " ",
@@ -83,9 +95,15 @@ function PartnerInfoModalContentView(props) {
         _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode },
           c.currencyCode,
           " - ",
-          c.displayName))))),
+          c.displayName)))),
+      index.h("div", { class: sheet.classes.CheckboxWrapper },
+        index.h("sl-checkbox", { checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
+        states.checkboxError && (index.h("p", { class: sheet.classes.ErrorMessage }, states.checkboxError)))),
     states.error && index.h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
+    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
+        !states.countryCode ||
+        !states.currency ||
+        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
 }
 function PartnerInfoModalView(props) {
   const { states, text, callbacks } = props;

package/dist/cjs/sqm-partner-info-modal.cjs.entry.js

@@ -0,0 +1,493 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fd67d7bc.js');
+require('./global-746daf93.js');
+const domContextHooks_module = require('./dom-context-hooks.module-224e09d4.js');
+const index_module = require('./index.module-c79bd5b0.js');
+require('./GoogleFonts-039d880f.js');
+require('./jss-preset-default.esm-b48f0c33.js');
+require('./JSS-518e9b4d.js');
+const utils = require('./utils-e326d1b5.js');
+const cjs = require('./cjs-2bf512b9.js');
+const data = require('./data-61e58813.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-2c4eef62.js');
+const keys = require('./keys-cff24974.js');
+const eventKeys = require('./eventKeys-7af4df4d.js');
+const parseStates = require('./parseStates-d1effc19.js');
+
+// new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
+const GET_USER_PARTNER_INFO = index_module.dist.gql `
+  query getUserPartnerInfo {
+    user: viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+        customFields
+        impactConnection {
+          connected
+          connectionStatus
+          publisher {
+            id
+            countryCode
+            currency
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_COUNTRIES = index_module.dist.gql `
+  query getCountries {
+    impactPayoutCountries(limit: 1000) {
+      data {
+        countryCode
+        displayName
+      }
+    }
+  }
+`;
+const GET_CURRENCIES = index_module.dist.gql `
+  query currencies($locale: RSLocale) {
+    currencies(limit: 300) {
+      data {
+        displayName(locale: $locale)
+        currencyCode
+      }
+    }
+  }
+`;
+const CONNECT_PARTNER = index_module.dist.gql `
+  mutation createImpactConnection($vars: ImpactConnectionInput!) {
+    createImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const START_IMPACT_CONNECTION = index_module.dist.gql `
+  mutation startImpactConnection($vars: ImpactConnectionInput!) {
+    startImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_BRAND_NAME = index_module.dist.gql `
+  query getTenantSettings {
+    tenantSettings {
+      companyName
+    }
+  }
+`;
+function usePartnerInfoModal(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const locale = index_module.L();
+  const setVerificationContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const { data: userData, loading: userLoading, refetch, } = index_module.wn(GET_USER_PARTNER_INFO, {});
+  const user = userData === null || userData === void 0 ? void 0 : userData.user;
+  const { data: currenciesData, loading: currenciesLoading } = index_module.wn(GET_CURRENCIES, { variables: { locale } });
+  const { data: countriesData, loading: countriesLoading } = index_module.wn(GET_COUNTRIES, {});
+  const { data: tenantSettingsData } = index_module.wn(GET_BRAND_NAME, {});
+  const { data: financeNetworkData } = index_module.wn(data.GET_FINANCE_NETWORK_SETTINGS, {
+    variables: { filter: {} },
+  });
+  const [startImpactConnection, { loading: connectLoading, errors: connectErrors },] = index_module.$e(START_IMPACT_CONNECTION);
+  const [allowBankingCollection, setAllowBankingCollection] = domContextHooks_module.useState(false);
+  const [checkboxError, setCheckboxError] = domContextHooks_module.useState("");
+  // No pre-filled country, use locale to determine countryCode instead
+  const [countryCode, setCountryCode] = domContextHooks_module.useState(((_b = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.countryCode) ||
+    locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = domContextHooks_module.useState(((_d = (_c = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher) === null || _d === void 0 ? void 0 : _d.currency) || "");
+  const countries = ((_e = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _e === void 0 ? void 0 : _e.data) || [];
+  // copied from useTaxAndCash for displaying currencies based on country - could be in helper?
+  const currencies = domContextHooks_module.useMemo(() => {
+    var _a, _b;
+    const allValidCurrencies = (_b = (_a = financeNetworkData === null || financeNetworkData === void 0 ? void 0 : financeNetworkData.impactFinanceNetworkSettings) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.reduce((agg, settings) => {
+      var _a, _b;
+      const currency = (_b = (_a = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.find((c) => c.currencyCode === settings.currency);
+      if (!currency)
+        return agg;
+      if (agg.find((c) => c.currencyCode === settings.currency))
+        return agg;
+      if (countryCode && settings.countryCode !== countryCode)
+        return agg;
+      return [...agg, currency];
+    }, []);
+    return (allValidCurrencies || []).sort((a, b) => a.displayName.localeCompare(b.displayName));
+  }, [financeNetworkData, currenciesData, countryCode]);
+  const [countrySearch, setCountrySearch] = domContextHooks_module.useState("");
+  const [currencySearch, setCurrencySearch] = domContextHooks_module.useState("");
+  const [filteredCountries, setFilteredCountries] = domContextHooks_module.useState(((_f = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _f === void 0 ? void 0 : _f.data) || []);
+  const [filteredCurrencies, setFilteredCurrencies] = domContextHooks_module.useState(currencies || []);
+  console.log(userData, "userData partner info modal");
+  const [error, setError] = domContextHooks_module.useState("");
+  const [success, setSuccess] = domContextHooks_module.useState(false);
+  domContextHooks_module.useEffect(() => {
+    var _a;
+    const publisher = (_a = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (!userData || !publisher)
+      return;
+    setCountryCode(publisher.countryCode);
+    setCurrency(publisher.currency);
+  }, [userData, user]);
+  domContextHooks_module.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]);
+  domContextHooks_module.useEffect(() => {
+    if (!(currencies === null || currencies === void 0 ? void 0 : currencies.length))
+      return;
+    if (currencySearch.trim() === "") {
+      setFilteredCurrencies(currencies || []);
+    }
+    else {
+      setFilteredCurrencies(currencies.filter((c) => c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())) || []);
+    }
+  }, [currencySearch, currencies]);
+  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onCountryChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCountryCode(value);
+    setCurrency("");
+    setError("");
+  }
+  function onCurrencyChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCurrency(value);
+    setError("");
+  }
+  function onCheckboxChange(e) {
+    const checked = e.target.checked;
+    setAllowBankingCollection(checked);
+    if (checked)
+      setCheckboxError("");
+  }
+  async function onSubmit() {
+    var _a, _b;
+    if (!allowBankingCollection) {
+      setCheckboxError(props.missingFieldsErrorText);
+      return;
+    }
+    if (!countryCode || !currency) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    setError("");
+    setCheckboxError("");
+    try {
+      const vars = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        firstName: user.firstName,
+        lastName: user.lastName,
+        // phoneNumber: null,
+        // phoneNumberCountryCode: null,
+        countryCode,
+        currency,
+      };
+      const result = await startImpactConnection({ vars });
+      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
+        setError(props.networkErrorText);
+        return;
+      }
+      const connectionResult = result
+        .startImpactConnection;
+      console.log(result, connectionResult, "result and connectionResult from creating partner from modal");
+      if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
+        const validationMsg = (_b = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors) === null || _b === void 0 ? void 0 : _b.map((e) => e.message).join(". ");
+        setError(validationMsg || props.networkErrorText);
+        console.error("Failed to create Impact connection:", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
+        return;
+      }
+      window.dispatchEvent(new Event(eventKeys.TAX_FORM_UPDATED_EVENT_KEY));
+      await refetch();
+      setSuccess(true);
+      setVerificationContext(true);
+    }
+    catch (e) {
+      console.error("Partner creation error:", e);
+      setError(props.networkErrorText);
+    }
+  }
+  const showModal = !success &&
+    !userLoading &&
+    (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connectionStatus) === "NOT_STARTED";
+  return {
+    states: {
+      open: showModal,
+      loading: userLoading || countriesLoading || currenciesLoading,
+      submitting: connectLoading,
+      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
+      countryCode,
+      currency,
+      error,
+      success,
+      brandName: ((_g = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _g === void 0 ? void 0 : _g.companyName) || "",
+      filteredCountries: filteredCountries || [],
+      filteredCurrencies: filteredCurrencies || [],
+      allowBankingCollection,
+      checkboxError,
+      disabled: userLoading || connectLoading,
+    },
+    callbacks: {
+      onCountryChange,
+      onCurrencyChange,
+      onCheckboxChange,
+      setCurrencySearch,
+      setCountrySearch,
+      onSubmit,
+      onClose: () => setSuccess(true),
+    },
+    text: props.getTextProps(),
+  };
+}
+
+const PartnerInfoModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Brand name shown in the modal header
+     *
+     * @uiName Brand name
+     */
+    this.brandName = "";
+    /**
+     * Header text when user has no existing partner
+     *
+     * @uiName New partner header
+     * @uiWidget textArea
+     */
+    this.modalHeader = "Let's get you ready for rewards";
+    /**
+     * Header text when user has an existing partner
+     *
+     * @uiName Existing partner header
+     * @uiWidget textArea
+     */
+    this.modalHeaderExistingPartner = "We found an existing account";
+    /**
+     * Description for new partner setup
+     *
+     * @uiName New partner description
+     * @uiWidget textArea
+     */
+    this.descriptionNewPartner = "Confirm your country and currency now to get your future rewards faster.";
+    /**
+     * Description for existing partner confirmation
+     *
+     * @uiName Existing partner description
+     * @uiWidget textArea
+     */
+    this.descriptionExistingPartner = "We found an account with this email on our referral program provider, impact.com. Please confirm your country and currency now to get your future rewards faster.";
+    /**
+     * Support description for existing partner confirmation
+     *
+     * @uiName Existing partner support description
+     * @uiWidget textArea
+     */
+    this.supportDescriptionExistingPartner = "If this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    /**
+     * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
+     * @uiName Terms and conditions checkbox
+     */
+    this.allowBankingCollection = "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information";
+    /**
+     * The link text that appears in the terms and conditions checkbox
+     * @uiName Terms and conditions text
+     * @uiWidget textArea
+     */
+    this.termsAndConditionsLabel = "terms and conditions";
+    /**
+     * The link that appears in the terms and conditions checkbox
+     * @uiName Terms and conditions link
+     */
+    this.termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    /**
+     * @uiName Country label
+     */
+    this.countryLabel = "Country";
+    /**
+     * @uiName Currency label
+     */
+    this.currencyLabel = "Currency";
+    /**
+     * @uiName Submit button label
+     */
+    this.submitButtonLabel = "Submit";
+    /**
+     * @uiName Confirm button label
+     */
+    this.confirmButtonLabel = "Confirm";
+    /**
+     * @uiName Search country placeholder
+     */
+    this.searchCountryPlaceholder = "Search for a country";
+    /**
+     * @uiName Search currency placeholder
+     */
+    this.searchCurrencyPlaceholder = "Search for a currency";
+    /**
+     * @uiName Network error text
+     * @uiWidget textArea
+     */
+    this.networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Missing fields error text
+     * @uiWidget textArea
+     */
+    this.missingFieldsErrorText = "Please select both a country and currency.";
+    /**
+     * Used to render in another modal.
+     * @undocumented
+     */
+    this.inModal = false;
+    /**
+     * @undocumented
+     * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
+     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true, "countryCode": "US", "currency": "USD" } } }
+     * @componentState { "title": "Connected (hidden)", "props": { "states": { "open": false } } }
+     */
+    this.stateController = "{}";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoPartnerInfoModal(this)
+      : usePartnerInfoModal(this);
+    if (this.inModal) {
+      return index.h(sqmPartnerInfoModalView.PartnerInfoModalContentView, Object.assign({}, props));
+    }
+    return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+  }
+};
+function useDemoPartnerInfoModal(props) {
+  const [countryCode, setCountryCode] = domContextHooks_module.useState("US");
+  const [currency, setCurrency] = domContextHooks_module.useState("");
+  const [error, setError] = domContextHooks_module.useState("");
+  const [allowBankingCollection, setAllowBankingCollection] = domContextHooks_module.useState(false);
+  const parsed = parseStates.parseStates(props.stateController);
+  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
+  // @ts-ignore
+  return cjs.cjs({
+    states: {
+      brandName: "Test Brand",
+      open: false,
+      loading: false,
+      submitting: false,
+      isExistingPartner: false,
+      countryCode,
+      currency,
+      error,
+      success: false,
+      filteredCountries: [],
+      filteredCurrencies: [],
+      allowBankingCollection,
+      checkboxError: "",
+      disabled: false,
+    },
+    callbacks: {
+      onCountryChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value) {
+          setCountryCode(value);
+          setCurrency("");
+        }
+      },
+      onCurrencyChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value)
+          setCurrency(value);
+      },
+      onCheckboxChange: (e) => {
+        setAllowBankingCollection(e.target.checked);
+      },
+      setCountrySearch: () => { },
+      setCurrencySearch: () => { },
+      onSubmit: () => {
+        if (!countryCode || !currency) {
+          setError(props.missingFieldsErrorText);
+          return;
+        }
+        setError("");
+      },
+      onClose: () => { },
+    },
+    text: {
+      modalHeader: props.modalHeader,
+      descriptionNewPartner: props.descriptionNewPartner,
+      descriptionExistingPartner: props.descriptionExistingPartner,
+      countryLabel: props.countryLabel,
+      currencyLabel: props.currencyLabel,
+      submitButtonLabel: props.submitButtonLabel,
+      confirmButtonLabel: props.confirmButtonLabel,
+      searchCountryPlaceholder: props.searchCountryPlaceholder,
+      searchCurrencyPlaceholder: props.searchCurrencyPlaceholder,
+      supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
+      modalHeaderExistingPartner: props.modalHeaderExistingPartner,
+    },
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_partner_info_modal = PartnerInfoModal;

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -35,11 +35,11 @@ require('./ErrorView-ee7b0f36.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
 const ShadowViewAddon = require('./ShadowViewAddon-2b3f51be.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-db47a968.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-01bf2f41.js');
 const utils = require('./utils-a8e0bd9b.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
 require('./data-6b5095f8.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-d5c997e6.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-464c52c9.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -18724,6 +18724,7 @@ const demoCurrencies = [
 const noopCallbacks = {
   onCountryChange: (e) => console.log("Country changed:", e),
   onCurrencyChange: (e) => console.log("Currency changed:", e),
+  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
   setCountrySearch: (v) => console.log("Country search:", v),
   setCurrencySearch: (v) => console.log("Currency search:", v),
   onSubmit: () => console.log("Submit"),
@@ -18741,6 +18742,10 @@ const defaultText$1 = {
   confirmButtonLabel: "Confirm",
   searchCountryPlaceholder: "Search for a country",
   searchCurrencyPlaceholder: "Search for a currency",
+  bankingCollectionText: "",
+  allowBankingCollection: "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information",
+  termsAndConditionsLabel: "terms and conditions",
+  termsAndConditionsLink: "https://terms.advocate.impact.com/PayoutTermsAndConditions.html",
 };
 const defaultProps$y = {
   states: {
@@ -18755,6 +18760,9 @@ const defaultProps$y = {
     brandName: "Test Brand",
     filteredCountries: demoCountries,
     filteredCurrencies: demoCurrencies,
+    allowBankingCollection: false,
+    checkboxError: "",
+    disabled: false,
   },
   callbacks: noopCallbacks,
   text: defaultText$1,

package/dist/cjs/{sqm-user-info-form-view-db47a968.js → sqm-user-info-form-view-01bf2f41.js}

@@ -1883,7 +1883,7 @@ const vanillaStyle$1 = `
     }
 `;
 const UserInfoFormView = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
   const { states, states: { formState }, callbacks, text, refs, data: data$1, } = props;
   const { classes } = sheet$1;
   const bankingCollectionText = global.intl.formatMessage({
@@ -2054,12 +2054,7 @@ const UserInfoFormView = (props) => {
             _t.map((c) => (index.h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
               c.currencyCode,
               " - ",
-              c.displayName)))),
-          index.h("div", { class: classes.CheckboxWrapper },
-            index.h("sl-checkbox", { checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
-                e.target.value = e.target.checked;
-              }, disabled: states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
-            ((_u = formState.errors) === null || _u === void 0 ? void 0 : _u.allowBankingCollection) && (index.h("p", { class: classes.ErrorText }, utils.formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
+              c.displayName))))),
         index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };
 

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

@@ -22,6 +22,7 @@ const demoCurrencies = [
 const noopCallbacks = {
   onCountryChange: (e) => console.log("Country changed:", e),
   onCurrencyChange: (e) => console.log("Currency changed:", e),
+  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
   setCountrySearch: (v) => console.log("Country search:", v),
   setCurrencySearch: (v) => console.log("Currency search:", v),
   onSubmit: () => console.log("Submit"),
@@ -39,6 +40,10 @@ const defaultText = {
   confirmButtonLabel: "Confirm",
   searchCountryPlaceholder: "Search for a country",
   searchCurrencyPlaceholder: "Search for a currency",
+  bankingCollectionText: "",
+  allowBankingCollection: "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information",
+  termsAndConditionsLabel: "terms and conditions",
+  termsAndConditionsLink: "https://terms.advocate.impact.com/PayoutTermsAndConditions.html",
 };
 const defaultProps = {
   states: {
@@ -53,6 +58,9 @@ const defaultProps = {
     brandName: "Test Brand",
     filteredCountries: demoCountries,
     filteredCurrencies: demoCurrencies,
+    allowBankingCollection: false,
+    checkboxError: "",
+    disabled: false,
   },
   callbacks: noopCallbacks,
   text: defaultText,

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
 const style = {
   Dialog: {
     "&::part(panel)": {
@@ -47,6 +48,11 @@ const style = {
       margin: "0",
     },
   },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
   SubmitButton: {
     width: "100%",
     marginTop: "var(--sl-spacing-large)",
@@ -63,6 +69,12 @@ export function PartnerInfoModalContentView(props) {
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
+  const bankingCollectionText = intl.formatMessage({
+    id: "bankingCollectionText",
+    defaultMessage: text.allowBankingCollection,
+  }, {
+    termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
+  });
   return (h("div", null,
     h("style", { type: "text/css" },
       " ",
@@ -80,9 +92,15 @@ export function PartnerInfoModalContentView(props) {
         _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
           c.currencyCode,
           " - ",
-          c.displayName))))),
+          c.displayName)))),
+      h("div", { class: sheet.classes.CheckboxWrapper },
+        h("sl-checkbox", { checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
+        states.checkboxError && (h("p", { class: sheet.classes.ErrorMessage }, states.checkboxError)))),
     states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
+    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
+        !states.countryCode ||
+        !states.currency ||
+        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
 }
 export function PartnerInfoModalView(props) {
   const { states, text, callbacks } = props;