@saasquatch/mint-components 2.3.1 → 2.4.0

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

@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');
 const data = require('./data-89ac73dd.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-243aad7b.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-431100ad.js');
 const keys = require('./keys-5a2c9ed2.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
 const parseStates = require('./parseStates-d1effc19.js');
@@ -498,17 +498,19 @@ const START_IMPACT_CONNECTION = index_module.dist.gql `
   }
 `;
 function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const locale = index_module.L();
   const setPartnerCreated = index_module.En(keys.PARTNER_CREATED_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 [shouldDisplayNameFields, setShouldDisplayNameFields] = domContextHooks_module.useState(false);
+  const [firstName, setFirstName] = domContextHooks_module.useState((_a = user === null || user === void 0 ? void 0 : user.firstName) !== null && _a !== void 0 ? _a : "");
+  const [lastName, setLastName] = domContextHooks_module.useState((_b = user === null || user === void 0 ? void 0 : user.lastName) !== null && _b !== void 0 ? _b : "");
   // 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 [countryCode, setCountryCode] = 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.countryCode) || locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = domContextHooks_module.useState(((_f = (_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.currency) || "");
   const { data: financeNetworkData } = index_module.wn(data.GET_FINANCE_NETWORK_SETTINGS, {
     variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
   });
@@ -527,7 +529,7 @@ function usePartnerInfoModal(props) {
       return a.displayName.localeCompare(b.displayName);
     });
   }, [countriesData]);
-  const isExistingPartner = !!((_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher);
+  const isExistingPartner = !!((_g = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher);
   const _currencies = domContextHooks_module.useMemo(() => {
     var _a, _b, _c;
     // if isExistingPartner, grab all currencies since select is disabled anyways
@@ -554,14 +556,21 @@ function usePartnerInfoModal(props) {
   const [filteredCurrencies, setFilteredCurrencies] = domContextHooks_module.useState(currencies || []);
   const [error, setError] = domContextHooks_module.useState("");
   const [success, setSuccess] = domContextHooks_module.useState(false);
+  const [initialized, setInitialized] = 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)
+    if (initialized || !user)
       return;
-    setCountryCode(publisher.countryCode);
-    setCurrency(publisher.currency);
-  }, [userData, user]);
+    setShouldDisplayNameFields(!user.firstName || !user.lastName);
+    setFirstName(user.firstName || "");
+    setLastName(user.lastName || "");
+    const publisher = (_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (publisher) {
+      setCountryCode(publisher.countryCode);
+      setCurrency(publisher.currency);
+    }
+    setInitialized(true);
+  }, [user, initialized]);
   domContextHooks_module.useEffect(() => {
     if (!(countries === null || countries === void 0 ? void 0 : countries.length))
       return;
@@ -583,6 +592,14 @@ function usePartnerInfoModal(props) {
     }
   }, [currencySearch, currencies]);
   const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onFirstNameChange(e) {
+    const value = e.target.value;
+    setFirstName(value);
+  }
+  function onLastNameChange(e) {
+    const value = e.target.value;
+    setLastName(value);
+  }
   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;
@@ -606,7 +623,10 @@ function usePartnerInfoModal(props) {
   }
   async function onSubmit() {
     var _a, _b;
-    if (!allowBankingCollection || !countryCode || !currency) {
+    if (!allowBankingCollection ||
+      !countryCode ||
+      !currency ||
+      (shouldDisplayNameFields && (!firstName || !lastName))) {
       setError(props.missingFieldsErrorText);
       return;
     }
@@ -621,8 +641,8 @@ function usePartnerInfoModal(props) {
           id: user.id,
           accountId: user.accountId,
         },
-        firstName: user.firstName,
-        lastName: user.lastName,
+        firstName,
+        lastName,
         countryCode,
         currency,
       };
@@ -657,7 +677,10 @@ function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
+      shouldDisplayNameFields,
       isExistingPartner,
+      firstName,
+      lastName,
       countryCode,
       currency,
       error,
@@ -668,6 +691,8 @@ function usePartnerInfoModal(props) {
       disabled: userLoading || connectLoading,
     },
     callbacks: {
+      onFirstNameChange,
+      onLastNameChange,
       onCountryChange,
       onCurrencyChange,
       onCheckboxChange,

package/dist/cjs/{sqm-partner-info-modal-view-243aad7b.js → sqm-partner-info-modal-view-431100ad.js}

@@ -30,6 +30,12 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     marginTop: "var(--sl-spacing-large)",
   },
+  NameInput: {
+    "&::part(label)": {
+      fontWeight: "var(--sl-font-weight-normal)",
+      fontSize: "var(--sl-input-label-font-size-medium)",
+    },
+  },
   ErrorMessage: {
     marginTop: "var(--sl-spacing-x-small)",
   },
@@ -97,11 +103,12 @@ function PartnerInfoModalContentView(props) {
     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("style", { type: "text/css" }, styleString),
     index.h("div", { class: sheet.classes.FormFields },
       description,
+      states.shouldDisplayNameFields && (index.h(index.Fragment, null,
+        index.h("sl-input", { exportparts: "label: input-label, base: input-base", class: sheet.classes.NameInput, label: "First Name", value: states.firstName, "onSl-input": callbacks.onFirstNameChange, disabled: states.submitting, required: true }),
+        index.h("sl-input", { exportparts: "label: input-label, base: input-base", class: sheet.classes.NameInput, label: "Last Name", value: states.lastName, "onSl-input": callbacks.onLastNameChange, disabled: states.submitting, required: true }))),
       index.h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
           (!!states.countryCode && 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) => {
@@ -123,7 +130,9 @@ function PartnerInfoModalContentView(props) {
     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)));
+        !states.allowBankingCollection ||
+        (states.shouldDisplayNameFields &&
+          (!states.firstName || !states.lastName)), onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
 }
 function PartnerInfoModalView(props) {
   const { states, text, callbacks } = props;

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

@@ -40,7 +40,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-757f921b.js'
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-c5f9b79b.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-88de1b78.js');
 require('./data-89ac73dd.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-243aad7b.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-431100ad.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -19290,6 +19290,8 @@ const demoCurrencies = [
   { currencyCode: "AUD", displayName: "Australian Dollar" },
 ];
 const noopCallbacks = {
+  onFirstNameChange: (e) => console.log("First name changed:", e),
+  onLastNameChange: (e) => console.log("Last name changed:", e),
   onCountryChange: (e) => console.log("Country changed:", e),
   onCurrencyChange: (e) => console.log("Currency changed:", e),
   onCheckboxChange: (e) => console.log("Checkbox changed:", e),
@@ -19322,6 +19324,9 @@ const defaultProps$y = {
     loading: false,
     submitting: false,
     isExistingPartner: false,
+    shouldDisplayNameFields: false,
+    firstName: "",
+    lastName: "",
     countryCode: "",
     currency: "",
     error: "",
@@ -19439,6 +19444,39 @@ const SQMComponentNewPartner = () => {
       states: { open: true, isExistingPartner: false },
     } }));
 };
+const PartnerHasFirstAndLastName = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      firstName: "John",
+      lastName: "Doe",
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const PartnerHasFirstNameOnly = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      firstName: "John",
+      lastName: "",
+      shouldDisplayNameFields: true,
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const Loading$i = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      loading: true,
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
 
 const PartnerInfoModal = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -19453,7 +19491,10 @@ const PartnerInfoModal = /*#__PURE__*/Object.freeze({
   ValidationError: ValidationError$1,
   Closed: Closed,
   SQMComponentExistingPartner: SQMComponentExistingPartner,
-  SQMComponentNewPartner: SQMComponentNewPartner
+  SQMComponentNewPartner: SQMComponentNewPartner,
+  PartnerHasFirstAndLastName: PartnerHasFirstAndLastName,
+  PartnerHasFirstNameOnly: PartnerHasFirstNameOnly,
+  Loading: Loading$i
 });
 
 const WidgetVerification_stories = {
@@ -19468,7 +19509,7 @@ const Step2Code = () => (index.h("sqm-widget-verification", { stateController: J
 const Step3PartnerModal = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
     "sqm-widget-verification": { showPartnerModal: true },
   }) }));
-const Loading$i = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
+const Loading$j = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
     "sqm-widget-verification": { loading: true },
   }) }));
 
@@ -19478,7 +19519,7 @@ const WidgetVerification = /*#__PURE__*/Object.freeze({
   Step1Email: Step1Email,
   Step2Code: Step2Code,
   Step3PartnerModal: Step3PartnerModal,
-  Loading: Loading$i
+  Loading: Loading$j
 });
 
 const scenario$G = "@owner:zach @author:zach\nFeature: User Attribute\n  Displays a user's custom field value.\n\n  Background: A user exists\n    Given a user is logged in\n    And the user has custom fields\n\n  @motivating\n  Scenario: A custom field value is displayed\n    Given the component has prop \"value\" with value \"firstName\"\n    And the user has a custom field \"firstName\" with value \"John\"\n    When the component is rendered\n    Then the text \"John\" is displayed\n\n  @landmine\n  Scenario: Nothing is rendered when the custom field does not exist\n    Given the component has prop \"value\" with value \"nonExistentField\"\n    And the user does not have a custom field \"nonExistentField\"\n    Then component is not rendered\n    And nothing is displayed\n\n  @motivating\n  Scenario: Nothing is rendered while user data is loading\n    Given the component is loading user data\n    When the component is rendered\n    Then component is not rendered\n    And nothing is displayed\n\n  @motivating\n  Scenario Outline: Optional styling props can be applied to customize the text appearance\n    Given the component has prop <prop> with value <value>\n    When the component is rendered\n    Then the text is displayed with <cssProperty> set to <value>\n\n    Examples:\n      | prop         | value       | cssProperty |\n      | fontSize     | 24          | font-size   |\n      | color        | #E91E63   | color       |\n      | fontWeight   | 700         | font-weight |\n\n  @minutia\n  Scenario: Style props are optional and default to no custom styling\n    Given the component has no style props set\n    When the component is rendered\n    Then the text is displayed with default browser styles\n";
@@ -19509,7 +19550,7 @@ const InvalidValue = () => {
       } }),
     index.h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Below")));
 };
-const Loading$j = () => {
+const Loading$k = () => {
   return (index.h("sqm-user-attribute", { demoData: {
       loading: true,
       value: "impact.com",
@@ -19530,7 +19571,7 @@ const UserAttribute = /*#__PURE__*/Object.freeze({
   'default': UserAttribute_stories,
   Default: Default$x,
   InvalidValue: InvalidValue,
-  Loading: Loading$j,
+  Loading: Loading$k,
   WithCustomStyles: WithCustomStyles
 });
 

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

@@ -20,6 +20,8 @@ const demoCurrencies = [
   { currencyCode: "AUD", displayName: "Australian Dollar" },
 ];
 const noopCallbacks = {
+  onFirstNameChange: (e) => console.log("First name changed:", e),
+  onLastNameChange: (e) => console.log("Last name changed:", e),
   onCountryChange: (e) => console.log("Country changed:", e),
   onCurrencyChange: (e) => console.log("Currency changed:", e),
   onCheckboxChange: (e) => console.log("Checkbox changed:", e),
@@ -52,6 +54,9 @@ const defaultProps = {
     loading: false,
     submitting: false,
     isExistingPartner: false,
+    shouldDisplayNameFields: false,
+    firstName: "",
+    lastName: "",
     countryCode: "",
     currency: "",
     error: "",
@@ -169,3 +174,36 @@ export const SQMComponentNewPartner = () => {
       states: { open: true, isExistingPartner: false },
     } }));
 };
+export const PartnerHasFirstAndLastName = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      firstName: "John",
+      lastName: "Doe",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const PartnerHasFirstNameOnly = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      firstName: "John",
+      lastName: "",
+      shouldDisplayNameFields: true,
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const Loading = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      loading: true,
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
 const style = {
@@ -27,6 +27,12 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     marginTop: "var(--sl-spacing-large)",
   },
+  NameInput: {
+    "&::part(label)": {
+      fontWeight: "var(--sl-font-weight-normal)",
+      fontSize: "var(--sl-input-label-font-size-medium)",
+    },
+  },
   ErrorMessage: {
     marginTop: "var(--sl-spacing-x-small)",
   },
@@ -94,11 +100,12 @@ export function PartnerInfoModalContentView(props) {
     termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
   });
   return (h("div", null,
-    h("style", { type: "text/css" },
-      " ",
-      styleString),
+    h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.FormFields },
       description,
+      states.shouldDisplayNameFields && (h(Fragment, null,
+        h("sl-input", { exportparts: "label: input-label, base: input-base", class: sheet.classes.NameInput, label: "First Name", value: states.firstName, "onSl-input": callbacks.onFirstNameChange, disabled: states.submitting, required: true }),
+        h("sl-input", { exportparts: "label: input-label, base: input-base", class: sheet.classes.NameInput, label: "Last Name", value: states.lastName, "onSl-input": callbacks.onLastNameChange, disabled: states.submitting, required: true }))),
       h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
           (!!states.countryCode && 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) => {
@@ -120,7 +127,9 @@ export function PartnerInfoModalContentView(props) {
     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)));
+        !states.allowBankingCollection ||
+        (states.shouldDisplayNameFields &&
+          (!states.firstName || !states.lastName)), onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
 }
 export function PartnerInfoModalView(props) {
   const { states, text, callbacks } = props;

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

@@ -573,7 +573,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; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; disabled: boolean; }; }",
+        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; shouldDisplayNameFields: boolean; firstName: string; lastName: string; countryCode: string; currency: string; error: string; success: boolean; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; disabled: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -75,17 +75,19 @@ const START_IMPACT_CONNECTION = gql `
   }
 `;
 export function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const locale = useLocale();
   const setPartnerCreated = useSetParent(PARTNER_CREATED_NAMESPACE);
   const { data: userData, loading: userLoading, refetch, } = useQuery(GET_USER_PARTNER_INFO, {});
   const user = userData === null || userData === void 0 ? void 0 : userData.user;
   const { data: currenciesData, loading: currenciesLoading } = useQuery(GET_CURRENCIES, { variables: { locale } });
   const { data: countriesData, loading: countriesLoading } = useQuery(GET_COUNTRIES, {});
+  const [shouldDisplayNameFields, setShouldDisplayNameFields] = useState(false);
+  const [firstName, setFirstName] = useState((_a = user === null || user === void 0 ? void 0 : user.firstName) !== null && _a !== void 0 ? _a : "");
+  const [lastName, setLastName] = useState((_b = user === null || user === void 0 ? void 0 : user.lastName) !== null && _b !== void 0 ? _b : "");
   // 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(/^.*_/, ""));
-  const [currency, setCurrency] = 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 [countryCode, setCountryCode] = 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.countryCode) || locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = useState(((_f = (_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.currency) || "");
   const { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
     variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
   });
@@ -104,7 +106,7 @@ export function usePartnerInfoModal(props) {
       return a.displayName.localeCompare(b.displayName);
     });
   }, [countriesData]);
-  const isExistingPartner = !!((_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher);
+  const isExistingPartner = !!((_g = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher);
   const _currencies = useMemo(() => {
     var _a, _b, _c;
     // if isExistingPartner, grab all currencies since select is disabled anyways
@@ -131,14 +133,21 @@ export function usePartnerInfoModal(props) {
   const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
+  const [initialized, setInitialized] = useState(false);
   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)
+    if (initialized || !user)
       return;
-    setCountryCode(publisher.countryCode);
-    setCurrency(publisher.currency);
-  }, [userData, user]);
+    setShouldDisplayNameFields(!user.firstName || !user.lastName);
+    setFirstName(user.firstName || "");
+    setLastName(user.lastName || "");
+    const publisher = (_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (publisher) {
+      setCountryCode(publisher.countryCode);
+      setCurrency(publisher.currency);
+    }
+    setInitialized(true);
+  }, [user, initialized]);
   useEffect(() => {
     if (!(countries === null || countries === void 0 ? void 0 : countries.length))
       return;
@@ -160,6 +169,14 @@ export function usePartnerInfoModal(props) {
     }
   }, [currencySearch, currencies]);
   const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onFirstNameChange(e) {
+    const value = e.target.value;
+    setFirstName(value);
+  }
+  function onLastNameChange(e) {
+    const value = e.target.value;
+    setLastName(value);
+  }
   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;
@@ -183,7 +200,10 @@ export function usePartnerInfoModal(props) {
   }
   async function onSubmit() {
     var _a, _b;
-    if (!allowBankingCollection || !countryCode || !currency) {
+    if (!allowBankingCollection ||
+      !countryCode ||
+      !currency ||
+      (shouldDisplayNameFields && (!firstName || !lastName))) {
       setError(props.missingFieldsErrorText);
       return;
     }
@@ -198,8 +218,8 @@ export function usePartnerInfoModal(props) {
           id: user.id,
           accountId: user.accountId,
         },
-        firstName: user.firstName,
-        lastName: user.lastName,
+        firstName,
+        lastName,
         countryCode,
         currency,
       };
@@ -234,7 +254,10 @@ export function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
+      shouldDisplayNameFields,
       isExistingPartner,
+      firstName,
+      lastName,
       countryCode,
       currency,
       error,
@@ -245,6 +268,8 @@ export function usePartnerInfoModal(props) {
       disabled: userLoading || connectLoading,
     },
     callbacks: {
+      onFirstNameChange,
+      onLastNameChange,
       onCountryChange,
       onCurrencyChange,
       onCheckboxChange,

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

@@ -7,7 +7,7 @@ import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 import { g as GET_FINANCE_NETWORK_SETTINGS } from './data-8698cbc6.js';
-import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-8f141a4f.js';
+import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-34d4be5b.js';
 import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE, P as PARTNER_CREATED_NAMESPACE } from './keys-1054056a.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY } from './eventKeys-f76b6a03.js';
 import { p as parseStates } from './parseStates-ed75e224.js';
@@ -494,17 +494,19 @@ const START_IMPACT_CONNECTION = dist.gql `
   }
 `;
 function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const locale = L();
   const setPartnerCreated = En(PARTNER_CREATED_NAMESPACE);
   const { data: userData, loading: userLoading, refetch, } = wn(GET_USER_PARTNER_INFO, {});
   const user = userData === null || userData === void 0 ? void 0 : userData.user;
   const { data: currenciesData, loading: currenciesLoading } = wn(GET_CURRENCIES, { variables: { locale } });
   const { data: countriesData, loading: countriesLoading } = wn(GET_COUNTRIES, {});
+  const [shouldDisplayNameFields, setShouldDisplayNameFields] = useState(false);
+  const [firstName, setFirstName] = useState((_a = user === null || user === void 0 ? void 0 : user.firstName) !== null && _a !== void 0 ? _a : "");
+  const [lastName, setLastName] = useState((_b = user === null || user === void 0 ? void 0 : user.lastName) !== null && _b !== void 0 ? _b : "");
   // 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(/^.*_/, ""));
-  const [currency, setCurrency] = 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 [countryCode, setCountryCode] = 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.countryCode) || locale.replace(/^.*_/, ""));
+  const [currency, setCurrency] = useState(((_f = (_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.currency) || "");
   const { data: financeNetworkData } = wn(GET_FINANCE_NETWORK_SETTINGS, {
     variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
   });
@@ -523,7 +525,7 @@ function usePartnerInfoModal(props) {
       return a.displayName.localeCompare(b.displayName);
     });
   }, [countriesData]);
-  const isExistingPartner = !!((_e = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher);
+  const isExistingPartner = !!((_g = user === null || user === void 0 ? void 0 : user.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher);
   const _currencies = useMemo(() => {
     var _a, _b, _c;
     // if isExistingPartner, grab all currencies since select is disabled anyways
@@ -550,14 +552,21 @@ function usePartnerInfoModal(props) {
   const [filteredCurrencies, setFilteredCurrencies] = useState(currencies || []);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
+  const [initialized, setInitialized] = useState(false);
   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)
+    if (initialized || !user)
       return;
-    setCountryCode(publisher.countryCode);
-    setCurrency(publisher.currency);
-  }, [userData, user]);
+    setShouldDisplayNameFields(!user.firstName || !user.lastName);
+    setFirstName(user.firstName || "");
+    setLastName(user.lastName || "");
+    const publisher = (_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher;
+    if (publisher) {
+      setCountryCode(publisher.countryCode);
+      setCurrency(publisher.currency);
+    }
+    setInitialized(true);
+  }, [user, initialized]);
   useEffect(() => {
     if (!(countries === null || countries === void 0 ? void 0 : countries.length))
       return;
@@ -579,6 +588,14 @@ function usePartnerInfoModal(props) {
     }
   }, [currencySearch, currencies]);
   const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
+  function onFirstNameChange(e) {
+    const value = e.target.value;
+    setFirstName(value);
+  }
+  function onLastNameChange(e) {
+    const value = e.target.value;
+    setLastName(value);
+  }
   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;
@@ -602,7 +619,10 @@ function usePartnerInfoModal(props) {
   }
   async function onSubmit() {
     var _a, _b;
-    if (!allowBankingCollection || !countryCode || !currency) {
+    if (!allowBankingCollection ||
+      !countryCode ||
+      !currency ||
+      (shouldDisplayNameFields && (!firstName || !lastName))) {
       setError(props.missingFieldsErrorText);
       return;
     }
@@ -617,8 +637,8 @@ function usePartnerInfoModal(props) {
           id: user.id,
           accountId: user.accountId,
         },
-        firstName: user.firstName,
-        lastName: user.lastName,
+        firstName,
+        lastName,
         countryCode,
         currency,
       };
@@ -653,7 +673,10 @@ function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
+      shouldDisplayNameFields,
       isExistingPartner,
+      firstName,
+      lastName,
       countryCode,
       currency,
       error,
@@ -664,6 +687,8 @@ function usePartnerInfoModal(props) {
       disabled: userLoading || connectLoading,
     },
     callbacks: {
+      onFirstNameChange,
+      onLastNameChange,
       onCountryChange,
       onCurrencyChange,
       onCheckboxChange,