@saasquatch/mint-components 2.2.0-0 → 2.2.0-1

package/dist/cjs/sqm-big-stat_46.cjs.entry.js

@@ -31,7 +31,7 @@ const ShadowViewAddon = require('./ShadowViewAddon-2b3f51be.js');
 require('./sqm-portal-container-view-70a47420.js');
 const utils$1 = require('./utils-a8e0bd9b.js');
 const data = require('./data-6b5095f8.js');
-const keys = require('./keys-cff24974.js');
+const keys = require('./keys-5a2c9ed2.js');
 require('./eventKeys-7af4df4d.js');
 const usePayoutStatus = require('./usePayoutStatus-cf050a03.js');
 const parseStates = require('./parseStates-d1effc19.js');
@@ -6419,7 +6419,6 @@ function getCurrentStep(user) {
     return "/1";
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, payoutsAccount, } = user.impactConnection.publisher;
-  console.log(user.impactConnection, "publisher data in useTaxAndCash to determine step new new");
   if (user.impactConnection.connectionStatus === "STARTED") {
     return "/1";
   }
@@ -6651,11 +6650,6 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 1 Properties
      */
     this.step1_currency = "Currency";
-    /**
-     * @uiName Currency field help text
-     * @uiGroup Step 1 Properties
-     */
-    this.step1_currencyHelpText = "Choose your preferred payout currency";
     /**
      * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
      * @uiName Terms and conditions checkbox
@@ -7975,18 +7969,20 @@ const USER_LOOKUP = index_module.dist.gql `
   }
 `;
 function useWidgetVerification() {
-  const userIdentity = index_module.J();
-  const [showCode, setShowCode] = index_module.In({
+  const [showCode] = index_module.In({
     namespace: keys.SHOW_CODE_NAMESPACE,
     initialValue: false,
   });
-  const [email, setEmail] = index_module.In({
-    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
-    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
-  });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
   const [loading, setLoading] = domContextHooks_module.useState(true);
-  const [showPartnerModal, setShowPartnerModal] = domContextHooks_module.useState(false);
+  const [showPartnerModal, setShowPartnerModal] = index_module.In({
+    namespace: keys.SHOW_PARTNER_MODAL_NAMESPACE,
+    initialValue: false,
+  });
+  const [partnerCreated, setPartnerCreated] = index_module.In({
+    namespace: keys.PARTNER_CREATED_NAMESPACE,
+    initialValue: false,
+  });
   const [fetch] = index_module.Xe(USER_LOOKUP);
   domContextHooks_module.useEffect(() => {
     const checkUser = async () => {
@@ -8021,9 +8017,20 @@ function useWidgetVerification() {
   };
   const onPartnerModalComplete = () => {
     setShowPartnerModal(false);
+    setPartnerCreated(false);
     setContext(true);
   };
-  return { showCode, showPartnerModal, onVerification, onPartnerModalComplete, loading };
+  domContextHooks_module.useEffect(() => {
+    if (partnerCreated)
+      onPartnerModalComplete();
+  }, [partnerCreated]);
+  return {
+    showCode,
+    showPartnerModal,
+    onVerification,
+    onPartnerModalComplete,
+    loading,
+  };
 }
 
 const style$3 = {
@@ -8066,16 +8073,6 @@ const WidgetVerification = class {
      * @uiGroup General Text
      */
     this.general_widgetHeaderWithPartnerCreation = "Let's get you ready for rewards";
-    /**
-     * @uiName General verify widget header text
-     * @uiGroup General Text
-     */
-    this.general_verifyEmailHeader = "Verify your email";
-    /**
-     * @uiName General verify widget description text
-     * @uiGroup General Text
-     */
-    this.general_verifyEmailDescription = "To get your cash paid out directly to your bank account, please complete your account setup";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                     EMAIL STEP PROPS
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -8260,7 +8257,6 @@ const WidgetVerification = class {
     if (props.showPartnerModal && ((_a = partnerState === null || partnerState === void 0 ? void 0 : partnerState.states) === null || _a === void 0 ? void 0 : _a.open) === false) {
       return index.h("div", null);
     }
-    // const generalText = this.getStepTextProps("general_");
     const partnerText = this.getStepTextProps("createPartnerStep_");
     const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
     const renderStepContent = () => {

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 const sqmTextSpanView = require('./sqm-text-span-view-8a32dd8c.js');
-const keys = require('./keys-cff24974.js');
+const keys = require('./keys-5a2c9ed2.js');
 const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
 
 const style = {

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

@@ -11,8 +11,8 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-8a32dd8c.js');
 const data = require('./data-6b5095f8.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-540886b4.js');
-const keys = require('./keys-cff24974.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-431ff976.js');
+const keys = require('./keys-5a2c9ed2.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
 const parseStates = require('./parseStates-d1effc19.js');
 const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
@@ -417,7 +417,6 @@ function useDemoWidgetEmailVerification(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-// new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
 const GET_USER_PARTNER_INFO = index_module.dist.gql `
   query getUserPartnerInfo {
     user: viewer {
@@ -514,30 +513,22 @@ const START_IMPACT_CONNECTION = index_module.dist.gql `
     }
   }
 `;
-const GET_BRAND_NAME = index_module.dist.gql `
-  query getTenantSettings {
-    tenantSettings {
-      companyName
-    }
-  }
-`;
 function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const locale = index_module.L();
-  const setVerificationContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  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 { data: tenantSettingsData } = index_module.wn(GET_BRAND_NAME, {});
   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 [startImpactConnection, { loading: connectLoading }] = 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) || "");
+  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 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?
@@ -611,13 +602,11 @@ function usePartnerInfoModal(props) {
   function onCheckboxChange(e) {
     const checked = e.target.checked;
     setAllowBankingCollection(checked);
-    if (checked)
-      setCheckboxError("");
   }
   async function onSubmit() {
     var _a, _b;
     if (!allowBankingCollection) {
-      setCheckboxError(props.missingFieldsErrorText);
+      setError(props.missingFieldsErrorText);
       return;
     }
     if (!countryCode || !currency) {
@@ -625,7 +614,10 @@ function usePartnerInfoModal(props) {
       return;
     }
     setError("");
-    setCheckboxError("");
+    if (!user) {
+      setError(props.networkErrorText);
+      return;
+    }
     try {
       const vars = {
         user: {
@@ -634,8 +626,6 @@ function usePartnerInfoModal(props) {
         },
         firstName: user.firstName,
         lastName: user.lastName,
-        // phoneNumber: null,
-        // phoneNumberCountryCode: null,
         countryCode,
         currency,
       };
@@ -646,7 +636,6 @@ function usePartnerInfoModal(props) {
       }
       const connectionResult = result
         .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(". ");
         setError(validationMsg || props.networkErrorText);
@@ -655,8 +644,8 @@ function usePartnerInfoModal(props) {
       }
       window.dispatchEvent(new Event(eventKeys.TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
+      setPartnerCreated === null || setPartnerCreated === void 0 ? void 0 : setPartnerCreated(true);
       setSuccess(true);
-      setVerificationContext(true);
     }
     catch (e) {
       console.error("Partner creation error:", e);
@@ -671,16 +660,14 @@ function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
-      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
+      isExistingPartner: !!(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher),
       countryCode,
       currency,
       error,
       success,
-      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: {
@@ -699,12 +686,6 @@ function usePartnerInfoModal(props) {
 const PartnerInfoModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Brand name shown in the modal header
-     *
-     * @uiName Brand name
-     */
-    this.brandName = "";
     /**
      * Header text when user has no existing partner
      *
@@ -828,7 +809,6 @@ function useDemoPartnerInfoModal(props) {
   // @ts-ignore
   return cjs.cjs({
     states: {
-      brandName: "Test Brand",
       open: false,
       loading: false,
       submitting: false,
@@ -840,7 +820,6 @@ function useDemoPartnerInfoModal(props) {
       filteredCountries: [],
       filteredCurrencies: [],
       allowBankingCollection,
-      checkboxError: "",
       disabled: false,
     },
     callbacks: {

package/dist/cjs/{sqm-partner-info-modal-view-540886b4.js → sqm-partner-info-modal-view-431ff976.js}

@@ -31,8 +31,6 @@ const style = {
     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: {
@@ -59,6 +57,11 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
+  Checkbox: {
+    "&::part(label)": {
+      fontSize: "var(--sl-font-size-small)",
+    },
+  },
   SubmitButton: {
     width: "100%",
     marginTop: "var(--sl-spacing-large)",
@@ -87,22 +90,24 @@ function PartnerInfoModalContentView(props) {
       styleString),
     index.h("div", { class: sheet.classes.FormFields },
       description,
-      index.h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
+      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) => {
             var _a;
             callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
           } }),
         index.h("div", { class: sheet.classes.SelectMenu }, (_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 },
+      index.h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.currency, 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); } }),
+        index.h("div", { class: sheet.classes.SelectMenu }, (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 : _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode },
           c.currencyCode,
           " - ",
-          c.displayName)))),
+          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-checkbox", { class: sheet.classes.Checkbox, checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText))),
+    states.error && (index.h("div", { class: sheet.classes.ErrorMessage },
+      index.h("sqm-form-message", { class: sheet.classes.ErrorMessage, type: "error" },
+        index.h("p", { part: "alert-description" }, states.error)))),
     index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
         !states.countryCode ||
         !states.currency ||

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

@@ -35,11 +35,11 @@ require('./ErrorView-ee7b0f36.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
 const ShadowViewAddon = require('./ShadowViewAddon-2b3f51be.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-01bf2f41.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-f1127a60.js');
 const utils = require('./utils-a8e0bd9b.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
 require('./data-6b5095f8.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-540886b4.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-431ff976.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -18455,7 +18455,6 @@ const defaultText = {
   region: "Region",
   postalCode: "Postal Code",
   currency: "Currency",
-  currencyHelpText: "Select your preferred currency for payouts",
   allowBankingCollection: "I agree to the {termsAndConditionsLink}",
   personalInformation: "Personal Information",
   continueButton: "Continue",
@@ -18778,15 +18777,13 @@ const defaultProps$y = {
     loading: false,
     submitting: false,
     isExistingPartner: false,
-    countryCode: "",
-    currency: "",
+    countryCode: null,
+    currency: null,
     error: "",
     success: false,
-    brandName: "Test Brand",
     filteredCountries: demoCountries,
     filteredCurrencies: demoCurrencies,
     allowBankingCollection: false,
-    checkboxError: "",
     disabled: false,
   },
   callbacks: noopCallbacks,
@@ -18829,6 +18826,18 @@ const ExistingPartnerConfirm = () => {
   };
   return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
 };
+const ExistingPartnerEmpty = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      isExistingPartner: true,
+      countryCode: "",
+      currency: "",
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
 const Submitting = () => {
   const props = {
     ...defaultProps$y,
@@ -18883,6 +18892,7 @@ const PartnerInfoModal = /*#__PURE__*/Object.freeze({
   NewPartnerPrefilled: NewPartnerPrefilled,
   NewPartnerFullySelected: NewPartnerFullySelected,
   ExistingPartnerConfirm: ExistingPartnerConfirm,
+  ExistingPartnerEmpty: ExistingPartnerEmpty,
   Submitting: Submitting,
   WithError: WithError$3,
   ValidationError: ValidationError$1,

package/dist/cjs/{sqm-user-info-form-view-01bf2f41.js → sqm-user-info-form-view-f1127a60.js}

@@ -1906,7 +1906,7 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  // when creating an impact connection without sending phoneNumber data, the impactAPI defaults the value to "000000" and the phoneNumberCountryCode to "DZ"
+  // when creating an impact connection without sending phoneNumber data, the impactAPI defaults the value to "0000000" and the phoneNumberCountryCode to "DZ"
   function isDisabledPartnerInput(field) {
     var _a, _b;
     if (((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a.phoneNumber) === "0000000" &&
@@ -2036,7 +2036,7 @@ const UserInfoFormView = (props) => {
             helpText: utils.formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency") }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: utils.formatErrorMessage(text.currency, formState.errors.currency),
           }

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8277cbb3.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 const index_module = require('./index.module-42d413d9.js');
-const keys = require('./keys-cff24974.js');
+const keys = require('./keys-5a2c9ed2.js');
 
 const debug = domContextHooks_module.browser("sq:widget-verification");
 function useTemplateChildren({ parent, callback }) {

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

@@ -51,15 +51,13 @@ const defaultProps = {
     loading: false,
     submitting: false,
     isExistingPartner: false,
-    countryCode: "",
-    currency: "",
+    countryCode: null,
+    currency: null,
     error: "",
     success: false,
-    brandName: "Test Brand",
     filteredCountries: demoCountries,
     filteredCurrencies: demoCurrencies,
     allowBankingCollection: false,
-    checkboxError: "",
     disabled: false,
   },
   callbacks: noopCallbacks,
@@ -102,6 +100,18 @@ export const ExistingPartnerConfirm = () => {
   };
   return h(PartnerInfoModalView, Object.assign({}, props));
 };
+export const ExistingPartnerEmpty = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      isExistingPartner: true,
+      countryCode: "",
+      currency: "",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
 export const Submitting = () => {
   const props = {
     ...defaultProps,

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

@@ -28,8 +28,6 @@ const style = {
     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: {
@@ -56,6 +54,11 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
+  Checkbox: {
+    "&::part(label)": {
+      fontSize: "var(--sl-font-size-small)",
+    },
+  },
   SubmitButton: {
     width: "100%",
     marginTop: "var(--sl-spacing-large)",
@@ -84,22 +87,24 @@ export function PartnerInfoModalContentView(props) {
       styleString),
     h("div", { class: sheet.classes.FormFields },
       description,
-      h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
+      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) => {
             var _a;
             callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
           } }),
         h("div", { class: sheet.classes.SelectMenu }, (_a = states.filteredCountries) === null || _a === void 0 ? void 0 : _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))))),
-      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
-        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
-        _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
+      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.currency, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
+        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }),
+        h("div", { class: sheet.classes.SelectMenu }, (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 : _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
           c.currencyCode,
           " - ",
-          c.displayName)))),
+          c.displayName))))),
       h("div", { class: sheet.classes.CheckboxWrapper },
-        h("sl-checkbox", { checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
-        states.checkboxError && (h("p", { class: sheet.classes.ErrorMessage }, states.checkboxError)))),
-    states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
+        h("sl-checkbox", { class: sheet.classes.Checkbox, checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText))),
+    states.error && (h("div", { class: sheet.classes.ErrorMessage },
+      h("sqm-form-message", { class: sheet.classes.ErrorMessage, type: "error" },
+        h("p", { part: "alert-description" }, states.error)))),
     h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
         !states.countryCode ||
         !states.currency ||

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

@@ -14,12 +14,6 @@ import { usePartnerInfoModal, } from "./usePartnerInfoModal";
  */
 export class PartnerInfoModal {
   constructor() {
-    /**
-     * Brand name shown in the modal header
-     *
-     * @uiName Brand name
-     */
-    this.brandName = "";
     /**
      * Header text when user has no existing partner
      *
@@ -135,27 +129,6 @@ export class PartnerInfoModal {
   static get is() { return "sqm-partner-info-modal"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "brandName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Brand name",
-            "name": "uiName"
-          }],
-        "text": "Brand name shown in the modal header"
-      },
-      "attribute": "brand-name",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
     "modalHeader": {
       "type": "string",
       "mutable": false,
@@ -572,7 +545,7 @@ export class PartnerInfoModal {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PartnerInfoModalResult>",
-        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; brandName: string; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; allowBankingCollection: boolean; checkboxError: string; disabled: boolean; }; }",
+        "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; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -609,7 +582,6 @@ function useDemoPartnerInfoModal(props) {
   // @ts-ignore
   return deepmerge({
     states: {
-      brandName: "Test Brand",
       open: false,
       loading: false,
       submitting: false,
@@ -621,7 +593,6 @@ function useDemoPartnerInfoModal(props) {
       filteredCountries: [],
       filteredCurrencies: [],
       allowBankingCollection,
-      checkboxError: "",
       disabled: false,
     },
     callbacks: {