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

package/dist/cjs/sqm-email-verification_2.cjs.entry.js

@@ -9,10 +9,12 @@ const index_module = require('./index.module-42d413d9.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-f274fdf2.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-e3faede9.js');
+const sqmTextSpanView = require('./sqm-text-span-view-8a32dd8c.js');
+const data = require('./data-6b5095f8.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-464c52c9.js');
 const keys = require('./keys-cff24974.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
+const parseStates = require('./parseStates-d1effc19.js');
 const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
 
 const UpsertUserEmailMutation = index_module.dist.gql `
@@ -149,11 +151,9 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     position: "relative",
     flexDirection: "column",
-    maxWidth: "320px",
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   SkeletonOne: {
     width: "50%",
@@ -431,19 +431,11 @@ const GET_USER_PARTNER_INFO = index_module.dist.gql `
         customFields
         impactConnection {
           connected
+          connectionStatus
           publisher {
-            phoneNumber
-            phoneNumberCountryCode
+            id
             countryCode
             currency
-            requiredTaxDocumentType
-            currentTaxDocument {
-              type
-              status
-            }
-            withdrawalSettings {
-              paymentMethod
-            }
           }
         }
       }
@@ -496,6 +488,32 @@ const CONNECT_PARTNER = index_module.dist.gql `
     }
   }
 `;
+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 {
@@ -504,33 +522,56 @@ const GET_BRAND_NAME = index_module.dist.gql `
   }
 `;
 function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  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 [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.$e(CONNECT_PARTNER);
-  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) || "");
+  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) || "");
-  console.log(countryCode, currency, "initial country and currency state"); // TEMP
+  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(((_e = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _e === void 0 ? void 0 : _e.data) || []);
-  const [filteredCurrencies, setFilteredCurrencies] = domContextHooks_module.useState(((_f = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _f === void 0 ? void 0 : _f.data) || []);
+  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);
-  const countries = ((_g = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _g === void 0 ? void 0 : _g.data) || [];
-  const currencies = ((_h = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _h === void 0 ? void 0 : _h.data) || [];
-  console.log(user, "user data from partner info query"); // TEMP
   domContextHooks_module.useEffect(() => {
     var _a;
-    if (userData && ((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher)) {
-      setCountryCode(user.impactConnection.publisher.countryCode);
-      setCurrency(user.impactConnection.publisher.currency);
-    }
-  }, [userData]);
+    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;
@@ -569,13 +610,24 @@ 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: {
@@ -589,13 +641,13 @@ function usePartnerInfoModal(props) {
         countryCode,
         currency,
       };
-      const result = await connectImpactPartner({ vars });
+      const result = await startImpactConnection({ vars });
       if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
         setError(props.networkErrorText);
         return;
       }
       const connectionResult = result
-        .createImpactConnection;
+        .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(". ");
@@ -606,34 +658,37 @@ function usePartnerInfoModal(props) {
       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);
     }
   }
-  console.log(success, "success state in partner info modal");
   const showModal = !success &&
     !userLoading &&
-    (!(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected) || !(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher));
-  console.log(showModal, "showModal condition in partner info modal"); // TEMP
+    (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.connected) || (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher),
+      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
       countryCode,
       currency,
       error,
       success,
-      brandName: ((_j = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _j === void 0 ? void 0 : _j.companyName) || "",
+      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,
@@ -687,6 +742,22 @@ const PartnerInfoModal = class {
      * @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
      */
@@ -721,6 +792,18 @@ const PartnerInfoModal = class {
      * @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() { }
@@ -728,10 +811,12 @@ const PartnerInfoModal = class {
     return utils.getProps(this);
   }
   render() {
-    // AL: TODO add usePartnerInfoModal
     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));
   }
 };
@@ -739,10 +824,14 @@ 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: true,
+      open: false,
       loading: false,
       submitting: false,
       isExistingPartner: false,
@@ -752,6 +841,9 @@ function useDemoPartnerInfoModal(props) {
       success: false,
       filteredCountries: [],
       filteredCurrencies: [],
+      allowBankingCollection,
+      checkboxError: "",
+      disabled: false,
     },
     callbacks: {
       onCountryChange: (e) => {
@@ -768,6 +860,9 @@ function useDemoPartnerInfoModal(props) {
         if (value)
           setCurrency(value);
       },
+      onCheckboxChange: (e) => {
+        setAllowBankingCollection(e.target.checked);
+      },
       setCountrySearch: () => { },
       setCurrencySearch: () => { },
       onSubmit: () => {
@@ -792,7 +887,7 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_email_verification = WidgetEmailVerification;

package/dist/cjs/sqm-partner-info-modal-view-464c52c9.js

@@ -0,0 +1,135 @@
+'use strict';
+
+const index = require('./index-8277cbb3.js');
+const global = require('./global-0f8b1267.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "480px",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+      overflow: "visible",
+    },
+    "&::part(overlay)": {
+      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-large)",
+  },
+  ErrorMessage: {
+    color: "var(--sqm-danger-color-text, #d32f2f)",
+    fontSize: "var(--sl-font-size-small)",
+    marginTop: "var(--sl-spacing-x-small)",
+  },
+  SearchInput: {
+    "&::part(base)": {
+      border: "none",
+      borderBottom: "1px solid var(--sl-color-neutral-300)",
+      borderRadius: "0",
+    },
+  },
+  DescriptionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    margin: "0",
+    "& > p": {
+      margin: "0",
+    },
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  SubmitButton: {
+    width: "100%",
+    marginTop: "var(--sl-spacing-large)",
+  },
+};
+function PartnerInfoModalContentView(props) {
+  var _a, _b;
+  const { states, callbacks, text } = props;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const description = states.isExistingPartner ? (index.h("span", { class: sheet.classes.DescriptionContainer },
+    index.h("p", null, text.descriptionExistingPartner),
+    index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
+  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" },
+      " ",
+      styleString),
+    index.h("div", { class: sheet.classes.FormFields },
+      description,
+      index.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 },
+        index.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) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
+      index.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 },
+        index.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) => (index.h("sl-menu-item", { value: c.currencyCode },
+          c.currencyCode,
+          " - ",
+          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 ||
+        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
+}
+function PartnerInfoModalView(props) {
+  const { states, text, callbacks } = props;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  if (!states.open)
+    return index.h("div", null);
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      " ",
+      styleString),
+    index.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();
+        }
+      } },
+      index.h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
+        ? text.modalHeaderExistingPartner
+        : text.modalHeader),
+      index.h(PartnerInfoModalContentView, Object.assign({}, props)))));
+}
+
+exports.PartnerInfoModalContentView = PartnerInfoModalContentView;
+exports.PartnerInfoModalView = PartnerInfoModalView;