@saasquatch/mint-components 2.3.1-1 → 2.3.1-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/{ShadowViewAddon-e7267a6c.js → ShadowViewAddon-331ac9e4.js} +1 -1
  2. package/dist/cjs/sqm-big-stat_47.cjs.entry.js +1 -1
  3. package/dist/cjs/sqm-email-verification_2.cjs.entry.js +30 -6
  4. package/dist/cjs/{sqm-partner-info-modal-view-243aad7b.js → sqm-partner-info-modal-view-d9e8e36d.js} +10 -3
  5. package/dist/cjs/sqm-stencilbook.cjs.entry.js +34 -4
  6. package/dist/collection/components/sqm-partner-info-modal/PartnerInfoModal.stories.js +28 -0
  7. package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js +11 -4
  8. package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal.js +1 -1
  9. package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js +29 -5
  10. package/dist/collection/components/sqm-share-link/ShareLink.stories.js +1 -1
  11. package/dist/collection/components/sqm-share-link/sqm-share-link-view.js +1 -1
  12. package/dist/esm/{ShadowViewAddon-86e90a47.js → ShadowViewAddon-ae0cd8b9.js} +1 -1
  13. package/dist/esm/sqm-big-stat_47.entry.js +1 -1
  14. package/dist/esm/sqm-email-verification_2.entry.js +30 -6
  15. package/dist/esm/{sqm-partner-info-modal-view-8f141a4f.js → sqm-partner-info-modal-view-fe4d156f.js} +11 -4
  16. package/dist/esm/sqm-stencilbook.entry.js +34 -4
  17. package/dist/esm-es5/{ShadowViewAddon-86e90a47.js → ShadowViewAddon-ae0cd8b9.js} +1 -1
  18. package/dist/esm-es5/sqm-big-stat_47.entry.js +1 -1
  19. package/dist/esm-es5/sqm-email-verification_2.entry.js +1 -1
  20. package/dist/esm-es5/sqm-partner-info-modal-view-fe4d156f.js +1 -0
  21. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  22. package/dist/mint-components/mint-components.esm.js +1 -1
  23. package/dist/mint-components/{p-61f7bf8a.entry.js → p-3876d5dc.entry.js} +6 -6
  24. package/dist/mint-components/p-3a609260.js +1 -0
  25. package/dist/mint-components/{p-70fafcf2.js → p-3d2fe16b.js} +1 -1
  26. package/dist/mint-components/{p-55847fc2.system.entry.js → p-59d28332.system.entry.js} +1 -1
  27. package/dist/mint-components/{p-1c540c01.system.entry.js → p-7100a32d.system.entry.js} +1 -1
  28. package/dist/mint-components/{p-10fed7ad.entry.js → p-86874f64.entry.js} +2 -2
  29. package/dist/mint-components/{p-167fe178.system.js → p-87f119f0.system.js} +1 -1
  30. package/dist/mint-components/p-a028fdb7.system.js +1 -0
  31. package/dist/mint-components/{p-23c94ea7.entry.js → p-b1dcabb0.entry.js} +1 -1
  32. package/dist/mint-components/p-bfb00685.system.js +1 -1
  33. package/dist/mint-components/{p-285f6aa2.system.entry.js → p-ede41e5e.system.entry.js} +1 -1
  34. package/dist/types/components/sqm-partner-info-modal/PartnerInfoModal.stories.d.ts +2 -0
  35. package/dist/types/components/sqm-partner-info-modal/sqm-partner-info-modal-view.d.ts +5 -0
  36. package/docs/docs.docx +0 -0
  37. package/package.json +1 -1
  38. package/dist/esm-es5/sqm-partner-info-modal-view-8f141a4f.js +0 -1
  39. package/dist/mint-components/p-a094da68.js +0 -1
  40. package/dist/mint-components/p-e7f45f18.system.js +0 -1
@@ -4292,7 +4292,7 @@ function ShareLinkView(props) {
4292
4292
  lineHeight: "var(--sl-input-height-medium)",
4293
4293
  },
4294
4294
  EditInput: {
4295
- maxWidth: "248px",
4295
+ maxWidth: "260px",
4296
4296
  width: "100%",
4297
4297
  "&::part(base)": {
4298
4298
  border: "none",
@@ -29,7 +29,7 @@ const useInstantAccessRegistration = require('./useInstantAccessRegistration-239
29
29
  const useLeadFormState = require('./useLeadFormState-bf49984b.js');
30
30
  const utilities = require('./utilities-fcdb9504.js');
31
31
  const ErrorView = require('./ErrorView-ee7b0f36.js');
32
- const ShadowViewAddon = require('./ShadowViewAddon-e7267a6c.js');
32
+ const ShadowViewAddon = require('./ShadowViewAddon-331ac9e4.js');
33
33
  require('./sqm-portal-container-view-757f921b.js');
34
34
  const data = require('./data-89ac73dd.js');
35
35
  const keys = require('./keys-5a2c9ed2.js');
@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
11
11
  const JSS = require('./JSS-8503a151.js');
12
12
  const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');
13
13
  const data = require('./data-89ac73dd.js');
14
- const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-243aad7b.js');
14
+ const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-d9e8e36d.js');
15
15
  const keys = require('./keys-5a2c9ed2.js');
16
16
  const eventKeys = require('./eventKeys-7af4df4d.js');
17
17
  const parseStates = require('./parseStates-d1effc19.js');
@@ -505,9 +505,16 @@ function usePartnerInfoModal(props) {
505
505
  const user = userData === null || userData === void 0 ? void 0 : userData.user;
506
506
  const { data: currenciesData, loading: currenciesLoading } = index_module.wn(GET_CURRENCIES, { variables: { locale } });
507
507
  const { data: countriesData, loading: countriesLoading } = index_module.wn(GET_COUNTRIES, {});
508
+ const [shouldDisplayNameFields, setShouldDisplayNameFields] = domContextHooks_module.useState(null);
509
+ domContextHooks_module.useEffect(() => {
510
+ if (shouldDisplayNameFields === null && user) {
511
+ setShouldDisplayNameFields(!user.firstName || !user.lastName);
512
+ }
513
+ }, [user, shouldDisplayNameFields]);
514
+ const [firstName, setFirstName] = domContextHooks_module.useState((user === null || user === void 0 ? void 0 : user.firstName) || "");
515
+ const [lastName, setLastName] = domContextHooks_module.useState((user === null || user === void 0 ? void 0 : user.lastName) || "");
508
516
  // No pre-filled country, use locale to determine countryCode instead
509
- 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) ||
510
- locale.replace(/^.*_/, ""));
517
+ 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(/^.*_/, ""));
511
518
  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) || "");
512
519
  const { data: financeNetworkData } = index_module.wn(data.GET_FINANCE_NETWORK_SETTINGS, {
513
520
  variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
@@ -583,6 +590,14 @@ function usePartnerInfoModal(props) {
583
590
  }
584
591
  }, [currencySearch, currencies]);
585
592
  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
593
+ function onFirstNameChange(e) {
594
+ const value = e.target.value;
595
+ setFirstName(value);
596
+ }
597
+ function onLastNameChange(e) {
598
+ const value = e.target.value;
599
+ setLastName(value);
600
+ }
586
601
  function onCountryChange(e) {
587
602
  var _a, _b;
588
603
  const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
@@ -606,7 +621,11 @@ function usePartnerInfoModal(props) {
606
621
  }
607
622
  async function onSubmit() {
608
623
  var _a, _b;
609
- if (!allowBankingCollection || !countryCode || !currency) {
624
+ if (!allowBankingCollection ||
625
+ !countryCode ||
626
+ !currency ||
627
+ !firstName ||
628
+ !lastName) {
610
629
  setError(props.missingFieldsErrorText);
611
630
  return;
612
631
  }
@@ -621,8 +640,8 @@ function usePartnerInfoModal(props) {
621
640
  id: user.id,
622
641
  accountId: user.accountId,
623
642
  },
624
- firstName: user.firstName,
625
- lastName: user.lastName,
643
+ firstName,
644
+ lastName,
626
645
  countryCode,
627
646
  currency,
628
647
  };
@@ -657,7 +676,10 @@ function usePartnerInfoModal(props) {
657
676
  open: showModal,
658
677
  loading: userLoading || countriesLoading || currenciesLoading,
659
678
  submitting: connectLoading,
679
+ shouldDisplayNameFields,
660
680
  isExistingPartner,
681
+ firstName,
682
+ lastName,
661
683
  countryCode,
662
684
  currency,
663
685
  error,
@@ -668,6 +690,8 @@ function usePartnerInfoModal(props) {
668
690
  disabled: userLoading || connectLoading,
669
691
  },
670
692
  callbacks: {
693
+ onFirstNameChange,
694
+ onLastNameChange,
671
695
  onCountryChange,
672
696
  onCurrencyChange,
673
697
  onCheckboxChange,
@@ -30,6 +30,12 @@ const style = {
30
30
  gap: "var(--sl-spacing-medium)",
31
31
  marginTop: "var(--sl-spacing-large)",
32
32
  },
33
+ NameInput: {
34
+ "&::part(label)": {
35
+ fontWeight: "var(--sl-font-weight-normal)",
36
+ fontSize: "var(--sl-input-label-font-size-medium)",
37
+ },
38
+ },
33
39
  ErrorMessage: {
34
40
  marginTop: "var(--sl-spacing-x-small)",
35
41
  },
@@ -97,11 +103,12 @@ function PartnerInfoModalContentView(props) {
97
103
  termsAndConditionsLink: (index.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
98
104
  });
99
105
  return (index.h("div", null,
100
- index.h("style", { type: "text/css" },
101
- " ",
102
- styleString),
106
+ index.h("style", { type: "text/css" }, styleString),
103
107
  index.h("div", { class: sheet.classes.FormFields },
104
108
  description,
109
+ states.shouldDisplayNameFields && (index.h(index.Fragment, null,
110
+ 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 }),
111
+ 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 }))),
105
112
  index.h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
106
113
  (!!states.countryCode && states.isExistingPartner), required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
107
114
  index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
@@ -35,12 +35,12 @@ require('./utilities-fcdb9504.js');
35
35
  const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-a767b044.js');
36
36
  require('./ErrorView-ee7b0f36.js');
37
37
  const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
38
- const ShadowViewAddon = require('./ShadowViewAddon-e7267a6c.js');
38
+ const ShadowViewAddon = require('./ShadowViewAddon-331ac9e4.js');
39
39
  const sqmPortalContainerView = require('./sqm-portal-container-view-757f921b.js');
40
40
  const sqmUserInfoFormView = require('./sqm-user-info-form-view-c5f9b79b.js');
41
41
  const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-88de1b78.js');
42
42
  require('./data-89ac73dd.js');
43
- const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-243aad7b.js');
43
+ const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-d9e8e36d.js');
44
44
 
45
45
  /**
46
46
  * lodash (Custom Build) <https://lodash.com/>
@@ -14293,7 +14293,7 @@ const defaultCustomizeProps = {
14293
14293
  isSaving: false,
14294
14294
  characterLimit: 30,
14295
14295
  minCharacters: 3,
14296
- charactersRemaining: 15,
14296
+ charactersRemaining: 30,
14297
14297
  editLimitText: "You can edit your link up to 5 times.",
14298
14298
  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
14299
14299
  supportLinkText: "Support",
@@ -19290,6 +19290,8 @@ const demoCurrencies = [
19290
19290
  { currencyCode: "AUD", displayName: "Australian Dollar" },
19291
19291
  ];
19292
19292
  const noopCallbacks = {
19293
+ onFirstNameChange: (e) => console.log("First name changed:", e),
19294
+ onLastNameChange: (e) => console.log("Last name changed:", e),
19293
19295
  onCountryChange: (e) => console.log("Country changed:", e),
19294
19296
  onCurrencyChange: (e) => console.log("Currency changed:", e),
19295
19297
  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
@@ -19322,6 +19324,9 @@ const defaultProps$y = {
19322
19324
  loading: false,
19323
19325
  submitting: false,
19324
19326
  isExistingPartner: false,
19327
+ shouldDisplayNameFields: false,
19328
+ firstName: "",
19329
+ lastName: "",
19325
19330
  countryCode: "",
19326
19331
  currency: "",
19327
19332
  error: "",
@@ -19439,6 +19444,29 @@ const SQMComponentNewPartner = () => {
19439
19444
  states: { open: true, isExistingPartner: false },
19440
19445
  } }));
19441
19446
  };
19447
+ const PartnerHasFirstAndLastName = () => {
19448
+ const props = {
19449
+ ...defaultProps$y,
19450
+ states: {
19451
+ ...defaultProps$y.states,
19452
+ firstName: "John",
19453
+ lastName: "Doe",
19454
+ },
19455
+ };
19456
+ return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
19457
+ };
19458
+ const PartnerHasFirstNameOnly = () => {
19459
+ const props = {
19460
+ ...defaultProps$y,
19461
+ states: {
19462
+ ...defaultProps$y.states,
19463
+ firstName: "John",
19464
+ lastName: "",
19465
+ shouldDisplayNameFields: true,
19466
+ },
19467
+ };
19468
+ return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
19469
+ };
19442
19470
 
19443
19471
  const PartnerInfoModal = /*#__PURE__*/Object.freeze({
19444
19472
  __proto__: null,
@@ -19453,7 +19481,9 @@ const PartnerInfoModal = /*#__PURE__*/Object.freeze({
19453
19481
  ValidationError: ValidationError$1,
19454
19482
  Closed: Closed,
19455
19483
  SQMComponentExistingPartner: SQMComponentExistingPartner,
19456
- SQMComponentNewPartner: SQMComponentNewPartner
19484
+ SQMComponentNewPartner: SQMComponentNewPartner,
19485
+ PartnerHasFirstAndLastName: PartnerHasFirstAndLastName,
19486
+ PartnerHasFirstNameOnly: PartnerHasFirstNameOnly
19457
19487
  });
19458
19488
 
19459
19489
  const WidgetVerification_stories = {
@@ -20,6 +20,8 @@ const demoCurrencies = [
20
20
  { currencyCode: "AUD", displayName: "Australian Dollar" },
21
21
  ];
22
22
  const noopCallbacks = {
23
+ onFirstNameChange: (e) => console.log("First name changed:", e),
24
+ onLastNameChange: (e) => console.log("Last name changed:", e),
23
25
  onCountryChange: (e) => console.log("Country changed:", e),
24
26
  onCurrencyChange: (e) => console.log("Currency changed:", e),
25
27
  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
@@ -52,6 +54,9 @@ const defaultProps = {
52
54
  loading: false,
53
55
  submitting: false,
54
56
  isExistingPartner: false,
57
+ shouldDisplayNameFields: false,
58
+ firstName: "",
59
+ lastName: "",
55
60
  countryCode: "",
56
61
  currency: "",
57
62
  error: "",
@@ -169,3 +174,26 @@ export const SQMComponentNewPartner = () => {
169
174
  states: { open: true, isExistingPartner: false },
170
175
  } }));
171
176
  };
177
+ export const PartnerHasFirstAndLastName = () => {
178
+ const props = {
179
+ ...defaultProps,
180
+ states: {
181
+ ...defaultProps.states,
182
+ firstName: "John",
183
+ lastName: "Doe",
184
+ },
185
+ };
186
+ return h(PartnerInfoModalView, Object.assign({}, props));
187
+ };
188
+ export const PartnerHasFirstNameOnly = () => {
189
+ const props = {
190
+ ...defaultProps,
191
+ states: {
192
+ ...defaultProps.states,
193
+ firstName: "John",
194
+ lastName: "",
195
+ shouldDisplayNameFields: true,
196
+ },
197
+ };
198
+ return h(PartnerInfoModalView, Object.assign({}, props));
199
+ };
@@ -1,4 +1,4 @@
1
- import { h } from "@stencil/core";
1
+ import { Fragment, h } from "@stencil/core";
2
2
  import { createStyleSheet } from "../../styling/JSS";
3
3
  import { intl } from "../../global/global";
4
4
  const style = {
@@ -27,6 +27,12 @@ const style = {
27
27
  gap: "var(--sl-spacing-medium)",
28
28
  marginTop: "var(--sl-spacing-large)",
29
29
  },
30
+ NameInput: {
31
+ "&::part(label)": {
32
+ fontWeight: "var(--sl-font-weight-normal)",
33
+ fontSize: "var(--sl-input-label-font-size-medium)",
34
+ },
35
+ },
30
36
  ErrorMessage: {
31
37
  marginTop: "var(--sl-spacing-x-small)",
32
38
  },
@@ -94,11 +100,12 @@ export function PartnerInfoModalContentView(props) {
94
100
  termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
95
101
  });
96
102
  return (h("div", null,
97
- h("style", { type: "text/css" },
98
- " ",
99
- styleString),
103
+ h("style", { type: "text/css" }, styleString),
100
104
  h("div", { class: sheet.classes.FormFields },
101
105
  description,
106
+ states.shouldDisplayNameFields && (h(Fragment, null,
107
+ 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 }),
108
+ 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 }))),
102
109
  h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
103
110
  (!!states.countryCode && states.isExistingPartner), required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
104
111
  h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
@@ -573,7 +573,7 @@ export class PartnerInfoModal {
573
573
  "mutable": false,
574
574
  "complexType": {
575
575
  "original": "DemoData<PartnerInfoModalResult>",
576
- "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; }; }",
576
+ "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; }; }",
577
577
  "references": {
578
578
  "DemoData": {
579
579
  "location": "import",
@@ -82,9 +82,16 @@ export function usePartnerInfoModal(props) {
82
82
  const user = userData === null || userData === void 0 ? void 0 : userData.user;
83
83
  const { data: currenciesData, loading: currenciesLoading } = useQuery(GET_CURRENCIES, { variables: { locale } });
84
84
  const { data: countriesData, loading: countriesLoading } = useQuery(GET_COUNTRIES, {});
85
+ const [shouldDisplayNameFields, setShouldDisplayNameFields] = useState(null);
86
+ useEffect(() => {
87
+ if (shouldDisplayNameFields === null && user) {
88
+ setShouldDisplayNameFields(!user.firstName || !user.lastName);
89
+ }
90
+ }, [user, shouldDisplayNameFields]);
91
+ const [firstName, setFirstName] = useState((user === null || user === void 0 ? void 0 : user.firstName) || "");
92
+ const [lastName, setLastName] = useState((user === null || user === void 0 ? void 0 : user.lastName) || "");
85
93
  // No pre-filled country, use locale to determine countryCode instead
86
- 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) ||
87
- locale.replace(/^.*_/, ""));
94
+ 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(/^.*_/, ""));
88
95
  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) || "");
89
96
  const { data: financeNetworkData } = useQuery(GET_FINANCE_NETWORK_SETTINGS, {
90
97
  variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
@@ -160,6 +167,14 @@ export function usePartnerInfoModal(props) {
160
167
  }
161
168
  }, [currencySearch, currencies]);
162
169
  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
170
+ function onFirstNameChange(e) {
171
+ const value = e.target.value;
172
+ setFirstName(value);
173
+ }
174
+ function onLastNameChange(e) {
175
+ const value = e.target.value;
176
+ setLastName(value);
177
+ }
163
178
  function onCountryChange(e) {
164
179
  var _a, _b;
165
180
  const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
@@ -183,7 +198,11 @@ export function usePartnerInfoModal(props) {
183
198
  }
184
199
  async function onSubmit() {
185
200
  var _a, _b;
186
- if (!allowBankingCollection || !countryCode || !currency) {
201
+ if (!allowBankingCollection ||
202
+ !countryCode ||
203
+ !currency ||
204
+ !firstName ||
205
+ !lastName) {
187
206
  setError(props.missingFieldsErrorText);
188
207
  return;
189
208
  }
@@ -198,8 +217,8 @@ export function usePartnerInfoModal(props) {
198
217
  id: user.id,
199
218
  accountId: user.accountId,
200
219
  },
201
- firstName: user.firstName,
202
- lastName: user.lastName,
220
+ firstName,
221
+ lastName,
203
222
  countryCode,
204
223
  currency,
205
224
  };
@@ -234,7 +253,10 @@ export function usePartnerInfoModal(props) {
234
253
  open: showModal,
235
254
  loading: userLoading || countriesLoading || currenciesLoading,
236
255
  submitting: connectLoading,
256
+ shouldDisplayNameFields,
237
257
  isExistingPartner,
258
+ firstName,
259
+ lastName,
238
260
  countryCode,
239
261
  currency,
240
262
  error,
@@ -245,6 +267,8 @@ export function usePartnerInfoModal(props) {
245
267
  disabled: userLoading || connectLoading,
246
268
  },
247
269
  callbacks: {
270
+ onFirstNameChange,
271
+ onLastNameChange,
248
272
  onCountryChange,
249
273
  onCurrencyChange,
250
274
  onCheckboxChange,
@@ -121,7 +121,7 @@ const defaultCustomizeProps = {
121
121
  isSaving: false,
122
122
  characterLimit: 30,
123
123
  minCharacters: 3,
124
- charactersRemaining: 15,
124
+ charactersRemaining: 30,
125
125
  editLimitText: "You can edit your link up to 5 times.",
126
126
  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
127
127
  supportLinkText: "Support",
@@ -66,7 +66,7 @@ export function ShareLinkView(props) {
66
66
  lineHeight: "var(--sl-input-height-medium)",
67
67
  },
68
68
  EditInput: {
69
- maxWidth: "248px",
69
+ maxWidth: "260px",
70
70
  width: "100%",
71
71
  "&::part(base)": {
72
72
  border: "none",
@@ -4290,7 +4290,7 @@ function ShareLinkView(props) {
4290
4290
  lineHeight: "var(--sl-input-height-medium)",
4291
4291
  },
4292
4292
  EditInput: {
4293
- maxWidth: "248px",
4293
+ maxWidth: "260px",
4294
4294
  width: "100%",
4295
4295
  "&::part(base)": {
4296
4296
  border: "none",
@@ -25,7 +25,7 @@ import { u as useInstantAccessRegistration } from './useInstantAccessRegistratio
25
25
  import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-6214b2d9.js';
26
26
  import { i as isEmpty } from './utilities-cbd8f2eb.js';
27
27
  import { E as ErrorView } from './ErrorView-74cb3af8.js';
28
- import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, c as BaseRegistrationFormView, R as ReferralIframeView, i as RewardExchangeView, Y as demoRewardExchange, G as useShareButton, a as ShareButtonView, K as useShareLink, J as ShareLinkView, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-86e90a47.js';
28
+ import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, c as BaseRegistrationFormView, R as ReferralIframeView, i as RewardExchangeView, Y as demoRewardExchange, G as useShareButton, a as ShareButtonView, K as useShareLink, J as ShareLinkView, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-ae0cd8b9.js';
29
29
  import './sqm-portal-container-view-200c9df8.js';
30
30
  import { T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, f as FINANCE_NETWORK_SETTINGS_NAMESPACE, g as GET_FINANCE_NETWORK_SETTINGS, h as CURRENCIES_QUERY_NAMESPACE, i as GET_CURRENCIES } from './data-8698cbc6.js';
31
31
  import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE, b as SHOW_PARTNER_MODAL_NAMESPACE, P as PARTNER_CREATED_NAMESPACE, V as VERIFICATION_PARENT_NAMESPACE } from './keys-1054056a.js';
@@ -7,7 +7,7 @@ import { g as getProps } from './utils-334c1e34.js';
7
7
  import { c as createStyleSheet } from './JSS-67b5cff8.js';
8
8
  import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
9
9
  import { g as GET_FINANCE_NETWORK_SETTINGS } from './data-8698cbc6.js';
10
- import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-8f141a4f.js';
10
+ import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-fe4d156f.js';
11
11
  import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE, P as PARTNER_CREATED_NAMESPACE } from './keys-1054056a.js';
12
12
  import { T as TAX_FORM_UPDATED_EVENT_KEY } from './eventKeys-f76b6a03.js';
13
13
  import { p as parseStates } from './parseStates-ed75e224.js';
@@ -501,9 +501,16 @@ function usePartnerInfoModal(props) {
501
501
  const user = userData === null || userData === void 0 ? void 0 : userData.user;
502
502
  const { data: currenciesData, loading: currenciesLoading } = wn(GET_CURRENCIES, { variables: { locale } });
503
503
  const { data: countriesData, loading: countriesLoading } = wn(GET_COUNTRIES, {});
504
+ const [shouldDisplayNameFields, setShouldDisplayNameFields] = useState(null);
505
+ useEffect(() => {
506
+ if (shouldDisplayNameFields === null && user) {
507
+ setShouldDisplayNameFields(!user.firstName || !user.lastName);
508
+ }
509
+ }, [user, shouldDisplayNameFields]);
510
+ const [firstName, setFirstName] = useState((user === null || user === void 0 ? void 0 : user.firstName) || "");
511
+ const [lastName, setLastName] = useState((user === null || user === void 0 ? void 0 : user.lastName) || "");
504
512
  // No pre-filled country, use locale to determine countryCode instead
505
- 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) ||
506
- locale.replace(/^.*_/, ""));
513
+ 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(/^.*_/, ""));
507
514
  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) || "");
508
515
  const { data: financeNetworkData } = wn(GET_FINANCE_NETWORK_SETTINGS, {
509
516
  variables: { filter: countryCode ? { countryCode_eq: countryCode } : {} },
@@ -579,6 +586,14 @@ function usePartnerInfoModal(props) {
579
586
  }
580
587
  }, [currencySearch, currencies]);
581
588
  const impactConnection = user === null || user === void 0 ? void 0 : user.impactConnection;
589
+ function onFirstNameChange(e) {
590
+ const value = e.target.value;
591
+ setFirstName(value);
592
+ }
593
+ function onLastNameChange(e) {
594
+ const value = e.target.value;
595
+ setLastName(value);
596
+ }
582
597
  function onCountryChange(e) {
583
598
  var _a, _b;
584
599
  const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
@@ -602,7 +617,11 @@ function usePartnerInfoModal(props) {
602
617
  }
603
618
  async function onSubmit() {
604
619
  var _a, _b;
605
- if (!allowBankingCollection || !countryCode || !currency) {
620
+ if (!allowBankingCollection ||
621
+ !countryCode ||
622
+ !currency ||
623
+ !firstName ||
624
+ !lastName) {
606
625
  setError(props.missingFieldsErrorText);
607
626
  return;
608
627
  }
@@ -617,8 +636,8 @@ function usePartnerInfoModal(props) {
617
636
  id: user.id,
618
637
  accountId: user.accountId,
619
638
  },
620
- firstName: user.firstName,
621
- lastName: user.lastName,
639
+ firstName,
640
+ lastName,
622
641
  countryCode,
623
642
  currency,
624
643
  };
@@ -653,7 +672,10 @@ function usePartnerInfoModal(props) {
653
672
  open: showModal,
654
673
  loading: userLoading || countriesLoading || currenciesLoading,
655
674
  submitting: connectLoading,
675
+ shouldDisplayNameFields,
656
676
  isExistingPartner,
677
+ firstName,
678
+ lastName,
657
679
  countryCode,
658
680
  currency,
659
681
  error,
@@ -664,6 +686,8 @@ function usePartnerInfoModal(props) {
664
686
  disabled: userLoading || connectLoading,
665
687
  },
666
688
  callbacks: {
689
+ onFirstNameChange,
690
+ onLastNameChange,
667
691
  onCountryChange,
668
692
  onCurrencyChange,
669
693
  onCheckboxChange,
@@ -1,4 +1,4 @@
1
- import { h } from './index-38ad4957.js';
1
+ import { h, F as Fragment } from './index-38ad4957.js';
2
2
  import { i as intl } from './global-32d00a6e.js';
3
3
  import { c as createStyleSheet } from './JSS-67b5cff8.js';
4
4
 
@@ -28,6 +28,12 @@ const style = {
28
28
  gap: "var(--sl-spacing-medium)",
29
29
  marginTop: "var(--sl-spacing-large)",
30
30
  },
31
+ NameInput: {
32
+ "&::part(label)": {
33
+ fontWeight: "var(--sl-font-weight-normal)",
34
+ fontSize: "var(--sl-input-label-font-size-medium)",
35
+ },
36
+ },
31
37
  ErrorMessage: {
32
38
  marginTop: "var(--sl-spacing-x-small)",
33
39
  },
@@ -95,11 +101,12 @@ function PartnerInfoModalContentView(props) {
95
101
  termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
96
102
  });
97
103
  return (h("div", null,
98
- h("style", { type: "text/css" },
99
- " ",
100
- styleString),
104
+ h("style", { type: "text/css" }, styleString),
101
105
  h("div", { class: sheet.classes.FormFields },
102
106
  description,
107
+ states.shouldDisplayNameFields && (h(Fragment, null,
108
+ 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 }),
109
+ 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 }))),
103
110
  h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
104
111
  (!!states.countryCode && states.isExistingPartner), required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
105
112
  h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
@@ -31,12 +31,12 @@ import './utilities-cbd8f2eb.js';
31
31
  import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f84c04cf.js';
32
32
  import './ErrorView-74cb3af8.js';
33
33
  import { Q as QrCodeView } from './sqm-qr-code-view-ce476721.js';
34
- import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-86e90a47.js';
34
+ import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-ae0cd8b9.js';
35
35
  import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-200c9df8.js';
36
36
  import { I as InvoiceTableView, T as TaxAndCashDashboardView$1, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-ceb3917a.js';
37
37
  import { L as LeadInputFieldView } from './sqm-lead-input-field-view-671ff96f.js';
38
38
  import './data-8698cbc6.js';
39
- import { P as PartnerInfoModalView } from './sqm-partner-info-modal-view-8f141a4f.js';
39
+ import { P as PartnerInfoModalView } from './sqm-partner-info-modal-view-fe4d156f.js';
40
40
 
41
41
  /**
42
42
  * lodash (Custom Build) <https://lodash.com/>
@@ -14289,7 +14289,7 @@ const defaultCustomizeProps = {
14289
14289
  isSaving: false,
14290
14290
  characterLimit: 30,
14291
14291
  minCharacters: 3,
14292
- charactersRemaining: 15,
14292
+ charactersRemaining: 30,
14293
14293
  editLimitText: "You can edit your link up to 5 times.",
14294
14294
  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
14295
14295
  supportLinkText: "Support",
@@ -19286,6 +19286,8 @@ const demoCurrencies = [
19286
19286
  { currencyCode: "AUD", displayName: "Australian Dollar" },
19287
19287
  ];
19288
19288
  const noopCallbacks = {
19289
+ onFirstNameChange: (e) => console.log("First name changed:", e),
19290
+ onLastNameChange: (e) => console.log("Last name changed:", e),
19289
19291
  onCountryChange: (e) => console.log("Country changed:", e),
19290
19292
  onCurrencyChange: (e) => console.log("Currency changed:", e),
19291
19293
  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
@@ -19318,6 +19320,9 @@ const defaultProps$y = {
19318
19320
  loading: false,
19319
19321
  submitting: false,
19320
19322
  isExistingPartner: false,
19323
+ shouldDisplayNameFields: false,
19324
+ firstName: "",
19325
+ lastName: "",
19321
19326
  countryCode: "",
19322
19327
  currency: "",
19323
19328
  error: "",
@@ -19435,6 +19440,29 @@ const SQMComponentNewPartner = () => {
19435
19440
  states: { open: true, isExistingPartner: false },
19436
19441
  } }));
19437
19442
  };
19443
+ const PartnerHasFirstAndLastName = () => {
19444
+ const props = {
19445
+ ...defaultProps$y,
19446
+ states: {
19447
+ ...defaultProps$y.states,
19448
+ firstName: "John",
19449
+ lastName: "Doe",
19450
+ },
19451
+ };
19452
+ return h(PartnerInfoModalView, Object.assign({}, props));
19453
+ };
19454
+ const PartnerHasFirstNameOnly = () => {
19455
+ const props = {
19456
+ ...defaultProps$y,
19457
+ states: {
19458
+ ...defaultProps$y.states,
19459
+ firstName: "John",
19460
+ lastName: "",
19461
+ shouldDisplayNameFields: true,
19462
+ },
19463
+ };
19464
+ return h(PartnerInfoModalView, Object.assign({}, props));
19465
+ };
19438
19466
 
19439
19467
  const PartnerInfoModal = /*#__PURE__*/Object.freeze({
19440
19468
  __proto__: null,
@@ -19449,7 +19477,9 @@ const PartnerInfoModal = /*#__PURE__*/Object.freeze({
19449
19477
  ValidationError: ValidationError$1,
19450
19478
  Closed: Closed,
19451
19479
  SQMComponentExistingPartner: SQMComponentExistingPartner,
19452
- SQMComponentNewPartner: SQMComponentNewPartner
19480
+ SQMComponentNewPartner: SQMComponentNewPartner,
19481
+ PartnerHasFirstAndLastName: PartnerHasFirstAndLastName,
19482
+ PartnerHasFirstNameOnly: PartnerHasFirstNameOnly
19453
19483
  });
19454
19484
 
19455
19485
  const WidgetVerification_stories = {