@saasquatch/mint-components 2.2.0 → 2.3.0-10

package/dist/cjs/{usePayoutStatus-0192fccd.js → useIndirectTaxForm-112914a0.js}

@@ -2,8 +2,10 @@
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 const index_module = require('./index.module-f8c8495f.js');
-
-const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
+const jsonpointer = require('./jsonpointer-11327262.js');
+const subregions = require('./subregions-984e30d7.js');
+const data = require('./data-89ac73dd.js');
+const eventKeys = require('./eventKeys-7af4df4d.js');
 
 var toArray = function toArray(a) {
   var ret = Array(a.length);
@@ -1062,10 +1064,10 @@ function usePayoutStatus(props) {
   }, [data]);
   domContextHooks_module.useEffect(() => {
     const cb = () => refetch();
-    window.addEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
+    window.addEventListener(eventKeys.TAX_FORM_UPDATED_EVENT_KEY, cb);
     window.addEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
     return () => {
-      window.removeEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
+      window.removeEventListener(eventKeys.TAX_FORM_UPDATED_EVENT_KEY, cb);
       window.removeEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
     };
   }, []);
@@ -1109,8 +1111,295 @@ function usePayoutStatus(props) {
   };
 }
 
-exports.TAX_FORM_UPDATED_EVENT_KEY = TAX_FORM_UPDATED_EVENT_KEY;
+const CONNECT_PARTNER = index_module.dist.gql `
+  mutation createImpactConnection($vars: ImpactConnectionInput!) {
+    createImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const COMPLETE_PARTNER = index_module.dist.gql `
+  mutation completeImpactConnection($vars: ImpactConnectionInput!) {
+    completeImpactConnection(impactConnectionInput: $vars) {
+      success
+      validationErrors {
+        field
+        message
+      }
+      user {
+        id
+        accountId
+        impactConnection {
+          connected
+          publisher {
+            brandedSignup
+            requiredTaxDocumentType
+            currentTaxDocument {
+              type
+              status
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function getOption(countries, countryCode) {
+  if (!countries)
+    return;
+  if (countries.find((c) => c.countryCode === countryCode)) {
+    return "otherRegion";
+  }
+  else {
+    return "notRegistered";
+  }
+}
+function useIndirectTaxForm(props) {
+  var _a, _b, _c, _d, _e;
+  const user = index_module.J();
+  const locale = index_module.L();
+  const formRef = domContextHooks_module.useRef(null);
+  const context = index_module.Fn(data.TAX_FORM_CONTEXT_NAMESPACE);
+  const [step, setStep] = index_module.Pn(data.TAX_CONTEXT_NAMESPACE);
+  const [connectImpactPartner, { loading: connectLoading }] = index_module.$e(CONNECT_PARTNER);
+  const [completeImpactPartner, { loading: completeLoading }] = index_module.$e(COMPLETE_PARTNER);
+  const userForm = index_module.Fn(data.USER_FORM_CONTEXT_NAMESPACE);
+  const { data: userData, refetch, errors: userError, } = index_module.$n(data.USER_QUERY_NAMESPACE);
+  const { data: _countriesRes, loading: countriesLoading } = index_module.$n(data.COUNTRIES_QUERY_NAMESPACE);
+  const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
+  const _countries = domContextHooks_module.useMemo(() => { var _a, _b; return (_b = (_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((country) => subregions.getCountryObj({ countryCode: country.countryCode, locale: intlLocale })); }, [(_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data]);
+  const [loading, setLoading] = domContextHooks_module.useState(false);
+  const [formState, setFormState] = domContextHooks_module.useState({});
+  const [errors, setErrors] = domContextHooks_module.useState({});
+  const [countrySearch, setCountrySearch] = domContextHooks_module.useState("");
+  const [filteredCountries, setFilteredCountries] = domContextHooks_module.useState(_countries || []);
+  const [option, setOption] = domContextHooks_module.useState("notRegistered");
+  const publisher = (_c = (_b = userData === null || userData === void 0 ? void 0 : userData.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher;
+  domContextHooks_module.useEffect(() => {
+    // reset redirect hash
+    window.location.hash = "";
+  }, []);
+  domContextHooks_module.useEffect(() => {
+    var _a;
+    if (!((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxCountryCode))
+      return;
+    const _option = getOption(_countries, publisher.taxInformation.indirectTaxCountryCode);
+    setOption(_option);
+  }, [publisher, _countries]);
+  domContextHooks_module.useEffect(() => {
+    if (countrySearch.trim() === "") {
+      setFilteredCountries(_countries || []);
+    }
+    else {
+      setFilteredCountries((_countries === null || _countries === void 0 ? void 0 : _countries.filter((c) => c.displayName.toLowerCase().includes(countrySearch.toLowerCase()))) || []);
+    }
+  }, [countrySearch, _countries]);
+  domContextHooks_module.useEffect(() => {
+    var _a, _b;
+    const user = userData === null || userData === void 0 ? void 0 : userData.user;
+    if (!user)
+      return;
+    if ((_b = (_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.taxInformation) {
+      setFormState({
+        province: user.impactConnection.publisher.taxInformation.indirectTaxRegion,
+        subRegion: user.impactConnection.publisher.taxInformation.indirectTaxRegion,
+        hasQst: !!user.impactConnection.publisher.taxInformation.additionalTaxId,
+        qstNumber: user.impactConnection.publisher.taxInformation.additionalTaxId,
+        hasSubRegionTaxNumber: !!user.impactConnection.publisher.taxInformation.withholdingTaxId,
+        subRegionTaxNumber: user.impactConnection.publisher.taxInformation.withholdingTaxId,
+        selectedRegion: user.impactConnection.publisher.taxInformation.indirectTaxCountryCode,
+        indirectTaxNumber: user.impactConnection.publisher.taxInformation.indirectTaxId,
+      });
+    }
+    else {
+      setFormState({
+        selectedRegion: (user === null || user === void 0 ? void 0 : user.countryCode) || (userForm === null || userForm === void 0 ? void 0 : userForm.countryCode),
+      });
+    }
+  }, [userData, userForm]);
+  const onFormChange = (field, 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;
+    if (!value)
+      console.error("Could not detect select change");
+    setFormState((p) => ({ ...p, [field]: value }));
+  };
+  async function connectPartner(formData) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const vars = {
+      user: {
+        id: user.id,
+        accountId: user.accountId,
+      },
+      firstName: userForm.firstName,
+      lastName: userForm.lastName,
+      countryCode: userForm.countryCode,
+      currency: userForm.currency,
+      address: userForm.address,
+      city: userForm.city,
+      state: userForm.state,
+      postalCode: userForm.postalCode,
+      phoneNumber: userForm.phoneNumber,
+      phoneNumberCountryCode: userForm.phoneNumberCountryCode,
+      indirectTaxCountryCode: formData.selectedRegion,
+      indirectTaxRegion: formData.province || formData.subRegion,
+      indirectTaxId: formData.indirectTaxNumber,
+      additionalTaxId: formData.qstNumber,
+      withholdingTaxId: formData.subRegionTaxNumber,
+    };
+    // If the partner has already been started call completeImpactConnection
+    // to fill in the remaining details. Otherwise create from scratch.
+    let result = null;
+    let connectionResult;
+    if (((_b = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.connectionStatus) === "STARTED") {
+      result = await completeImpactPartner({
+        vars,
+      });
+      connectionResult = (_c = result) === null || _c === void 0 ? void 0 : _c.completeImpactConnection;
+    }
+    else {
+      result = await connectImpactPartner({
+        vars,
+      });
+      connectionResult = (_d = result) === null || _d === void 0 ? void 0 : _d.createImpactConnection;
+    }
+    if (!result || ((_e = result) === null || _e === void 0 ? void 0 : _e.message))
+      throw new Error();
+    if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
+      // Output backend errors to console for now
+      console.error("Failed to create Impact connection: ", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
+      throw new Error();
+    }
+    await refetch();
+    const resultPublisher = (_g = (_f = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher;
+    const hasValidCurrentDocument = subregions.validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
+    // Fire form change event
+    window.dispatchEvent(new Event(eventKeys.TAX_FORM_UPDATED_EVENT_KEY));
+    return {
+      resultPublisher,
+      hasValidCurrentDocument,
+    };
+  }
+  const onSubmit = async (event) => {
+    if (!option) {
+      setErrors({ taxDetails: true });
+      return;
+    }
+    let formData = { taxOption: option };
+    let validationErrors = {};
+    const controls = event.target.getFormControls();
+    controls.forEach((control) => {
+      if (!control.name || !control.id)
+        return;
+      if (option === "notRegistered")
+        return; // Don't include fields for notRegistered option
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, true);
+      }
+    });
+    setErrors(validationErrors);
+    if (Object.keys(validationErrors).length) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const { resultPublisher, hasValidCurrentDocument } = await connectPartner(formData);
+      if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
+        !hasValidCurrentDocument) {
+        // Go to docusign form
+        setStep("/3");
+      }
+      else {
+        if (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.brandedSignup) {
+          // Go to banking information form
+          setStep("/4");
+        }
+        else {
+          // Go right to the dashboard
+          setStep("/dashboard");
+        }
+      }
+    }
+    catch (e) {
+      setErrors({ general: true });
+    }
+    finally {
+      setLoading(false);
+    }
+  };
+  const onBack = () => {
+    setStep(context.overrideBackStep || "/1");
+  };
+  return {
+    states: {
+      step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
+      hideSteps: context.hideSteps,
+      disabled: loading || countriesLoading || connectLoading || completeLoading,
+      loading: loading || connectLoading || countriesLoading || completeLoading,
+      isPartner: !!((_e = (_d = userData === null || userData === void 0 ? void 0 : userData.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher),
+      loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
+      formState: {
+        checked: option,
+        errors,
+      },
+    },
+    callbacks: {
+      onBack,
+      onSubmit,
+      onFormChange,
+      onChange: setOption,
+      setCountrySearch,
+      onQstToggle: () => setFormState((p) => ({ ...p, hasQst: !p.hasQst })),
+      onSpainToggle: () => setFormState((p) => ({
+        ...p,
+        hasSubRegionTaxNumber: !p.hasSubRegionTaxNumber,
+      })),
+    },
+    data: {
+      esRegions: subregions.INDIRECT_TAX_SPAIN_REGIONS,
+      countries: filteredCountries,
+      allCountries: _countries,
+      provinces: subregions.INDIRECT_TAX_PROVINCES,
+    },
+    text: props.getTextProps(),
+    refs: {
+      formRef,
+    },
+    slotProps: {
+      formState: {
+        ...formState,
+        errors,
+      },
+    },
+  };
+}
+
+exports.COMPLETE_PARTNER = COMPLETE_PARTNER;
+exports.CONNECT_PARTNER = CONNECT_PARTNER;
 exports.VERIFF_COMPLETE_EVENT_KEY = VERIFF_COMPLETE_EVENT_KEY;
 exports.getStatus = getStatus;
+exports.useIndirectTaxForm = useIndirectTaxForm;
 exports.usePayoutStatus = usePayoutStatus;
 exports.useVeriffApp = useVeriffApp;

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
     "./components/sqm-referral-codes/sqm-referral-codes.js",
     "./components/sqm-pagination/sqm-pagination.js",
+    "./components/sqm-partner-info-modal/sqm-partner-info-modal.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js",
     "./components/sqm-referral-table/sqm-referral-table.js",

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

@@ -0,0 +1,171 @@
+import { h } from "@stencil/core";
+import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
+export default {
+  title: "Components/Partner Info Modal",
+};
+const demoCountries = [
+  { countryCode: "US", displayName: "United States" },
+  { countryCode: "CA", displayName: "Canada" },
+  { countryCode: "GB", displayName: "United Kingdom" },
+  { countryCode: "AU", displayName: "Australia" },
+  { countryCode: "DE", displayName: "Germany" },
+  { countryCode: "FR", displayName: "France" },
+  { countryCode: "JP", displayName: "Japan" },
+];
+const demoCurrencies = [
+  { currencyCode: "USD", displayName: "US Dollar" },
+  { currencyCode: "CAD", displayName: "Canadian Dollar" },
+  { currencyCode: "GBP", displayName: "British Pound" },
+  { currencyCode: "EUR", displayName: "Euro" },
+  { currencyCode: "AUD", displayName: "Australian Dollar" },
+];
+const noopCallbacks = {
+  onCountryChange: (e) => console.log("Country changed:", e),
+  onCurrencyChange: (e) => console.log("Currency changed:", e),
+  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
+  setCountrySearch: (v) => console.log("Country search:", v),
+  setCurrencySearch: (v) => console.log("Currency search:", v),
+  onSubmit: () => console.log("Submit"),
+  onClose: () => console.log("Close"),
+};
+const defaultText = {
+  modalHeader: "Let's get you ready for rewards",
+  modalHeaderExistingPartner: "We found an existing account",
+  descriptionNewPartner: "Confirm your country and currency now to get your future rewards faster.",
+  descriptionExistingPartner: "We noticed you are already an Impact.com partner, please confirm your information.",
+  supportDescriptionExistingPartner: "If this is a mistake, please contact Support or sign up for this referral program with a different email.",
+  supportLink: "Support",
+  countryLabel: "Country",
+  currencyLabel: "Currency",
+  submitButtonLabel: "Submit",
+  confirmButtonLabel: "Confirm",
+  searchCountryPlaceholder: "Search for a country",
+  searchCurrencyPlaceholder: "Search for a currency",
+  bankingCollectionText: "",
+  allowBankingCollection: "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information",
+  termsAndConditionsLabel: "terms and conditions",
+  termsAndConditionsLink: "https://terms.advocate.impact.com/PayoutTermsAndConditions.html",
+};
+const defaultProps = {
+  states: {
+    open: true,
+    loading: false,
+    submitting: false,
+    isExistingPartner: false,
+    countryCode: null,
+    currency: null,
+    error: "",
+    success: false,
+    filteredCountries: demoCountries,
+    filteredCurrencies: demoCurrencies,
+    allowBankingCollection: false,
+    disabled: false,
+  },
+  callbacks: noopCallbacks,
+  text: defaultText,
+};
+export const NewPartnerEmpty = () => {
+  return h(PartnerInfoModalView, Object.assign({}, defaultProps));
+};
+export const NewPartnerPrefilled = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const NewPartnerFullySelected = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "USD",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const ExistingPartnerConfirm = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      isExistingPartner: true,
+      countryCode: "CA",
+      currency: "CAD",
+    },
+  };
+  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,
+    states: {
+      ...defaultProps.states,
+      countryCode: "GB",
+      currency: "GBP",
+      submitting: true,
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const WithError = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "US",
+      currency: "USD",
+      error: "An error occurred while creating your partner account. Please try again.",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const ValidationError = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      countryCode: "",
+      currency: "",
+      error: "Please select both a country and currency.",
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const Closed = () => {
+  const props = {
+    ...defaultProps,
+    states: {
+      ...defaultProps.states,
+      open: false,
+    },
+  };
+  return h(PartnerInfoModalView, Object.assign({}, props));
+};
+export const SQMComponentExistingPartner = () => {
+  return (h("sqm-partner-info-modal", { "support-link": "Support", "support-description-existing-partner": "If this is a mistake, please contact {supportLink} or sign up for this referral program with a different email.", "allow-banking-collection": "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information", "terms-and-conditions-label": "terms and conditions", "terms-and-conditions-link": "https://terms.advocate.impact.com/PayoutTermsAndConditions.html", demoData: {
+      states: { open: true, isExistingPartner: true },
+    } }));
+};
+export const SQMComponentNewPartner = () => {
+  return (h("sqm-partner-info-modal", { demoData: {
+      states: { open: true, isExistingPartner: false },
+    } }));
+};

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

@@ -0,0 +1,149 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
+const style = {
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "480px",
+    },
+    "&::part(body)": {
+      padding: "0 var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+      overflow: "visible",
+    },
+    "&::part(overlay)": {
+      background: "var(--sl-overlay-background-color)",
+    },
+  },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-large) 0 0 0",
+    margin: "0",
+  },
+  FormFields: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-large)",
+  },
+  ErrorMessage: {
+    marginTop: "var(--sl-spacing-x-small)",
+  },
+  SearchInput: {
+    "&::part(base)": {
+      border: "none",
+      borderBottom: "1px solid var(--sl-color-neutral-300)",
+      borderRadius: "0",
+    },
+  },
+  SelectMenu: {
+    maxHeight: "300px",
+  },
+  DescriptionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    margin: "0",
+    "& > p": {
+      margin: "0",
+    },
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  Checkbox: {
+    "&::part(label)": {
+      fontSize: "var(--sl-font-size-small)",
+    },
+  },
+  SubmitButton: {
+    width: "100%",
+    marginTop: "var(--sl-spacing-large)",
+    "&::part(base)": {
+      color: "var(--sqm-primary-button-color)",
+      backgroundColor: "var(--sqm-primary-button-background)",
+      border: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+  },
+};
+export function PartnerInfoModalContentView(props) {
+  var _a, _b;
+  const { states, callbacks, text } = props;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const supportMessage = intl.formatMessage({
+    id: "supportDescriptionExistingPartner",
+    defaultMessage: text.supportDescriptionExistingPartner,
+  }, {
+    supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+  });
+  const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
+    h("p", null, text.descriptionExistingPartner),
+    h("p", null, supportMessage))) : (h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
+  const buttonLabel = states.isExistingPartner
+    ? text.confirmButtonLabel
+    : text.submitButtonLabel;
+  const bankingCollectionText = intl.formatMessage({
+    id: "bankingCollectionText",
+    defaultMessage: text.allowBankingCollection,
+  }, {
+    termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
+  });
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      " ",
+      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.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.currency && 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); } }),
+        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))))),
+      h("div", { class: sheet.classes.CheckboxWrapper },
+        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 ||
+        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
+}
+export function PartnerInfoModalView(props) {
+  const { states, text, callbacks } = props;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  if (!states.open)
+    return h("div", null);
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      " ",
+      styleString),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
+        ? text.modalHeaderExistingPartner
+        : text.modalHeader, "onSl-request-close": (e) => {
+        e.preventDefault();
+      }, "onSl-hide": (e) => {
+        var _a;
+        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
+          e.preventDefault();
+        }
+      }, "onSl-initial-focus": callbacks.onInitialFocus },
+      h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
+        ? text.modalHeaderExistingPartner
+        : text.modalHeader),
+      h(PartnerInfoModalContentView, Object.assign({}, props)))));
+}