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

package/dist/cjs/utils-a8e0bd9b.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const index = require('./index-8277cbb3.js');
+const global = require('./global-0f8b1267.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "35px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sqm-skeleton", { width: "45%", height: "40px !important" }),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("sqm-skeleton", { width: "15%" }),
+      index.h("sqm-skeleton", { width: "25%", height: "30px !important" })),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "15%" }),
+    index.h("sqm-skeleton", { width: "80px", height: "30px !important" })));
+};
+
+function validTaxDocument(requiredType) {
+  const validTypes = ["W9", "W8BENE", "W8BEN"];
+  if (validTypes.includes(requiredType))
+    return true;
+  return false;
+}
+const objectIsFull = (obj) => {
+  return !Object.keys(obj).find((k) => obj[k] == undefined);
+};
+const taxTypeToName = (taxType) => {
+  switch (taxType) {
+    case "W9":
+      return "W-9";
+    case "W8BEN":
+    case "W8BENE":
+      return "W-8";
+    default:
+      return "";
+  }
+};
+function validateBillingField(regex, value) {
+  const trimmed = value.trim();
+  const idx = trimmed.search(regex);
+  return idx > -1;
+}
+const formatErrorMessage = (fieldName, errorMessage) => {
+  return global.intl.formatMessage({
+    id: fieldName,
+    defaultMessage: errorMessage,
+  }, {
+    fieldName,
+  });
+};
+function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}
+
+exports.LoadingView = LoadingView;
+exports.formatErrorMessage = formatErrorMessage;
+exports.getCountryObj = getCountryObj;
+exports.objectIsFull = objectIsFull;
+exports.taxTypeToName = taxTypeToName;
+exports.validTaxDocument = validTaxDocument;
+exports.validateBillingField = validateBillingField;

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
     "./components/sqm-referral-codes/sqm-referral-codes.js",
     "./components/sqm-pagination/sqm-pagination.js",
+    "./components/sqm-partner-info-modal/sqm-partner-info-modal.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
@@ -54,7 +55,6 @@
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
     "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js",
-    "./components/sqm-partner-info-modal/sqm-partner-info-modal.js",
     "./components/sqm-payout-button-scroll/sqm-payout-button-scroll.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
     "./components/sqm-portal-change-marketing/sqm-portal-change-marketing.js",

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,
@@ -140,6 +148,3 @@ export const Closed = () => {
   };
   return h(PartnerInfoModalView, Object.assign({}, props));
 };
-export const FullStackDemo = () => {
-  return (h("sqm-partner-info-modal", { "brand-name": "Acme", "header-new-partner": "Welcome to {brandName} Program!", "description-new-partner": "We just need a bit more information about you before you start earning cash!", "submit-button-label": "Submit" }));
-};

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

@@ -1,41 +1,31 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
 const style = {
   Dialog: {
     "&::part(panel)": {
       maxWidth: "480px",
     },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
     "&::part(body)": {
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large)",
+      padding: "0 var(--sl-spacing-x-large)",
       fontSize: "var(--sl-font-size-small)",
       overflow: "visible",
     },
-    "&::part(footer)": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
-    },
     "&::part(overlay)": {
-      background: "rgba(0, 0, 0, 0.5)",
-    },
-    "&::part(close-button)": {
-      display: "none",
+      background: "var(--sl-overlay-background-color)",
     },
   },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-large) 0 0 0",
+    margin: "0",
+  },
   FormFields: {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-medium)",
-    "& > *": {
-      flex: 1,
-    },
+    marginTop: "var(--sl-spacing-large)",
   },
   ErrorMessage: {
     color: "var(--sqm-danger-color-text, #d32f2f)",
@@ -53,51 +43,87 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-small)",
+    margin: "0",
     "& > p": {
       margin: "0",
     },
   },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  SubmitButton: {
+    width: "100%",
+    marginTop: "var(--sl-spacing-large)",
+  },
 };
-export function PartnerInfoModalView(props) {
+export function PartnerInfoModalContentView(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return h("div", null);
-  const description = states.isExistingPartner ? (h("div", { class: sheet.classes.DescriptionContainer },
+  const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
     h("p", null, text.descriptionExistingPartner),
-    h("p", null, text.supportDescriptionExistingPartner))) : (h("p", null,
-    " ",
-    text.descriptionNewPartner));
+    h("p", null, text.supportDescriptionExistingPartner))) : (h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
-    h("style", { type: "text/css" }, styleString),
-    description,
+  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" },
+      " ",
+      styleString),
     h("div", { class: sheet.classes.FormFields },
-      h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCountryChange },
+      description,
+      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
             var _a;
             callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
           } }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
         _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
-      h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCurrencyChange },
+      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
-        _b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
+        _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
+          c.currencyCode,
+          " - ",
+          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, style: { width: "100%" }, 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;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  if (!states.open)
+    return h("div", null);
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      " ",
+      styleString),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
+        ? text.modalHeaderExistingPartner
+        : text.modalHeader, "onSl-request-close": (e) => {
+        e.preventDefault();
+      }, "onSl-hide": (e) => {
+        var _a;
+        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
+          e.preventDefault();
+        }
+      } },
+      h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
+        ? text.modalHeaderExistingPartner
+        : text.modalHeader),
+      h(PartnerInfoModalContentView, Object.assign({}, props)))));
 }

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

@@ -2,13 +2,14 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
-import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
-import { usePartnerInfoModal } from "./usePartnerInfoModal";
+import { PartnerInfoModalContentView, PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
+import { usePartnerInfoModal, } from "./usePartnerInfoModal";
 /**
  * @uiName Partner Info Modal
  * @exampleGroup Tax and Cash
- * @validParents ["sqm-portal-container", "sqm-portal-frame", "div", "sqb-program-section", "sqb-conditional-section"]
+ * @validParents ["sqm-portal-container", "sqm-portal-frame", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section"]
  * @example Partner Info Modal - <sqm-partner-info-modal></sqm-partner-info-modal>
  */
 export class PartnerInfoModal {
@@ -54,6 +55,22 @@ export class PartnerInfoModal {
      * @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
      */
@@ -88,6 +105,18 @@ export class PartnerInfoModal {
      * @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 = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -95,10 +124,12 @@ export class PartnerInfoModal {
     return getProps(this);
   }
   render() {
-    // AL: TODO add usePartnerInfoModal
     const props = isDemo()
       ? useDemoPartnerInfoModal(this)
       : usePartnerInfoModal(this);
+    if (this.inModal) {
+      return h(PartnerInfoModalContentView, Object.assign({}, props));
+    }
     return h(PartnerInfoModalView, Object.assign({}, props));
   }
   static get is() { return "sqm-partner-info-modal"; }
@@ -245,6 +276,72 @@ export class PartnerInfoModal {
       "reflect": false,
       "defaultValue": "\"If this is a mistake, please contact Support or sign up for this referral program with a different email.\""
     },
+    "allowBankingCollection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Terms and conditions checkbox",
+            "name": "uiName"
+          }],
+        "text": "Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}."
+      },
+      "attribute": "allow-banking-collection",
+      "reflect": false,
+      "defaultValue": "\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\""
+    },
+    "termsAndConditionsLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Terms and conditions text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "The link text that appears in the terms and conditions checkbox"
+      },
+      "attribute": "terms-and-conditions-label",
+      "reflect": false,
+      "defaultValue": "\"terms and conditions\""
+    },
+    "termsAndConditionsLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Terms and conditions link",
+            "name": "uiName"
+          }],
+        "text": "The link that appears in the terms and conditions checkbox"
+      },
+      "attribute": "terms-and-conditions-link",
+      "reflect": false,
+      "defaultValue": "\"https://terms.advocate.impact.com/PayoutTermsAndConditions.html\""
+    },
     "countryLabel": {
       "type": "string",
       "mutable": false,
@@ -419,20 +516,71 @@ export class PartnerInfoModal {
       "reflect": false,
       "defaultValue": "\"Please select both a country and currency.\""
     },
+    "inModal": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": "Used to render in another modal."
+      },
+      "attribute": "in-modal",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"New partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": false } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true, \"countryCode\": \"US\", \"currency\": \"USD\" } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Connected (hidden)\", \"props\": { \"states\": { \"open\": false } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<PartnerInfoModalViewProps>",
-        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; brandName: string; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; }; }",
+        "original": "DemoData<PartnerInfoModalResult>",
+        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; brandName: string; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; checkboxError: string; disabled: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "PartnerInfoModalViewProps": {
+          "PartnerInfoModalResult": {
             "location": "import",
-            "path": "./sqm-partner-info-modal-view"
+            "path": "./usePartnerInfoModal"
           }
         }
       },
@@ -455,10 +603,14 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = useState("US");
   const [currency, setCurrency] = useState("");
   const [error, setError] = useState("");
+  const [allowBankingCollection, setAllowBankingCollection] = useState(false);
+  const parsed = parseStates(props.stateController);
+  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
+  // @ts-ignore
   return deepmerge({
     states: {
       brandName: "Test Brand",
-      open: true,
+      open: false,
       loading: false,
       submitting: false,
       isExistingPartner: false,
@@ -468,6 +620,9 @@ function useDemoPartnerInfoModal(props) {
       success: false,
       filteredCountries: [],
       filteredCurrencies: [],
+      allowBankingCollection,
+      checkboxError: "",
+      disabled: false,
     },
     callbacks: {
       onCountryChange: (e) => {
@@ -484,6 +639,9 @@ function useDemoPartnerInfoModal(props) {
         if (value)
           setCurrency(value);
       },
+      onCheckboxChange: (e) => {
+        setAllowBankingCollection(e.target.checked);
+      },
       setCountrySearch: () => { },
       setCurrencySearch: () => { },
       onSubmit: () => {
@@ -508,5 +666,5 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
 }