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

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

@@ -55,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
      */
@@ -260,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,
@@ -490,7 +572,7 @@ export class PartnerInfoModal {
       "mutable": false,
       "complexType": {
         "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; }[]; }; }",
+        "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",
@@ -521,13 +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,
@@ -537,6 +620,9 @@ function useDemoPartnerInfoModal(props) {
       success: false,
       filteredCountries: [],
       filteredCurrencies: [],
+      allowBankingCollection,
+      checkboxError: "",
+      disabled: false,
     },
     callbacks: {
       onCountryChange: (e) => {
@@ -553,6 +639,9 @@ function useDemoPartnerInfoModal(props) {
         if (value)
           setCurrency(value);
       },
+      onCheckboxChange: (e) => {
+        setAllowBankingCollection(e.target.checked);
+      },
       setCountrySearch: () => { },
       setCurrencySearch: () => { },
       onSubmit: () => {

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

@@ -121,6 +121,8 @@ export function usePartnerInfoModal(props) {
     variables: { filter: {} },
   });
   const [startImpactConnection, { loading: connectLoading, errors: connectErrors },] = useMutation(START_IMPACT_CONNECTION);
+  const [allowBankingCollection, setAllowBankingCollection] = useState(false);
+  const [checkboxError, setCheckboxError] = useState("");
   // No pre-filled country, use locale to determine countryCode instead
   const [countryCode, setCountryCode] = 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(/^.*_/, ""));
@@ -195,13 +197,24 @@ export function usePartnerInfoModal(props) {
     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: {
@@ -255,10 +268,14 @@ export function usePartnerInfoModal(props) {
       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,

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

@@ -264,7 +264,7 @@ const vanillaStyle = `
     }
 `;
 export 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, } = props;
   const { classes } = sheet;
   const bankingCollectionText = intl.formatMessage({
@@ -435,11 +435,6 @@ export const UserInfoFormView = (props) => {
             _t.map((c) => (h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
               c.currencyCode,
               " - ",
-              c.displayName)))),
-          h("div", { class: classes.CheckboxWrapper },
-            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) && (h("p", { class: classes.ErrorText }, formatErrorMessage(text.termsAndConditionsLabel, formState.errors.allowBankingCollection))))),
+              c.displayName))))),
         h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
 };