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

package/dist/cjs/{sqm-big-stat_45.cjs.entry.js → sqm-big-stat_46.cjs.entry.js}

@@ -27,7 +27,7 @@ const useInstantAccessRegistration = require('./useInstantAccessRegistration-239
 const useLeadFormState = require('./useLeadFormState-b4c2ab5b.js');
 const utilities = require('./utilities-fcdb9504.js');
 const ErrorView = require('./ErrorView-ee7b0f36.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1d15cdf7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-5ce32291.js');
 require('./sqm-portal-container-view-70a47420.js');
 const data = require('./data-8c8a08f6.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
@@ -2837,6 +2837,333 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
+const GET_USER_PARTNER_INFO = index_module.dist.gql `
+  query getUserPartnerInfo {
+    user: viewer {
+      ... on User {
+        id
+        firstName
+        lastName
+        email
+        countryCode
+        customFields
+        impactConnection {
+          connected
+          publisher {
+            countryCode
+            currency
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_COUNTRIES = index_module.dist.gql `
+  query getCountries {
+    impactPayoutCountries(limit: 1000) {
+      data {
+        countryCode
+        displayName
+      }
+    }
+  }
+`;
+const GET_CURRENCIES = index_module.dist.gql `
+  query currencies($locale: RSLocale) {
+    currencies(limit: 300) {
+      data {
+        displayName(locale: $locale)
+        currencyCode
+      }
+    }
+  }
+`;
+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 GET_BRAND_NAME = index_module.dist.gql `
+  query getTenantSettings {
+    tenantSettings {
+      companyName
+    }
+  }
+`;
+function usePartnerInfoModal(props) {
+  var _a, _b, _c, _d;
+  const user = index_module.J();
+  const locale = index_module.L();
+  const { data: userData, loading: userLoading, refetch, } = index_module.wn(GET_USER_PARTNER_INFO, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: currenciesData } = index_module.wn(GET_CURRENCIES, { variables: { locale } }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: countriesData } = index_module.wn(GET_COUNTRIES, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: tenantSettingsData } = index_module.wn(GET_BRAND_NAME, {});
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.$e(CONNECT_PARTNER);
+  const [countryCode, setCountryCode] = domContextHooks_module.useState("");
+  const [currency, setCurrency] = domContextHooks_module.useState("");
+  const [error, setError] = domContextHooks_module.useState("");
+  const [success, setSuccess] = domContextHooks_module.useState(false);
+  console.log(user, "user identity in create partner modal"); // TEMP
+  console.log(userData, "user data from partner info query"); // TEMP
+  const impactConnection = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection;
+  function onCountryChange(e) {
+    var _a, _b;
+    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+    if (!value)
+      return;
+    setCountryCode(value);
+    setCurrency("");
+    setError("");
+  }
+  function onCurrencyChange(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)
+      return;
+    setCurrency(value);
+    setError("");
+  }
+  async function onSubmit() {
+    var _a, _b;
+    if (!countryCode || !currency) {
+      setError(props.missingFieldsErrorText);
+      return;
+    }
+    setError("");
+    // AL TODO: How to create impact connection if we dont have address, postalCode, and city?
+    try {
+      const vars = {
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        firstName: userData.user.firstName,
+        lastName: userData.user.lastName,
+        countryCode,
+        currency,
+      };
+      const result = await connectImpactPartner({ vars });
+      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
+        setError(props.networkErrorText);
+        return;
+      }
+      const connectionResult = result
+        .createImpactConnection;
+      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);
+        console.error("Failed to create Impact connection:", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
+        return;
+      }
+      // Success
+      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
+      await refetch();
+      setSuccess(true);
+    }
+    catch (e) {
+      console.error("Partner creation error:", e);
+      setError(props.networkErrorText);
+    }
+  }
+  const shouldShow = !success && !userLoading && !(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected);
+  return {
+    states: {
+      open: shouldShow,
+      loading: userLoading,
+      submitting: connectLoading,
+      isExistingPartner: !!(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected),
+      countryCode,
+      currency,
+      error,
+      success,
+      brandName: ((_b = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _b === void 0 ? void 0 : _b.companyName) || "",
+      filteredCountries: ((_c = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _c === void 0 ? void 0 : _c.data) || [],
+      filteredCurrencies: ((_d = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _d === void 0 ? void 0 : _d.data) || [],
+    },
+    callbacks: {
+      onCountryChange,
+      onCurrencyChange,
+      onCountrySearch: () => { },
+      onCurrencySearch: () => { },
+      onSubmit,
+      onClose: () => setSuccess(true),
+    },
+    text: props.getTextProps(),
+  };
+}
+
+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
+     *
+     * @uiName New partner header
+     * @uiWidget textArea
+     */
+    this.modalBrandHeader = "Welcome to {brandName} Program!";
+    /**
+     * Description for new partner setup
+     *
+     * @uiName New partner description
+     * @uiWidget textArea
+     */
+    this.descriptionNewPartner = "We just need a bit more information about you before you start earning cash!";
+    /**
+     * Description for existing partner confirmation
+     *
+     * @uiName Existing partner description
+     * @uiWidget textArea
+     */
+    this.descriptionExistingPartner = "We noticed you are already an Impact.com partner, please confirm your information.";
+    /**
+     * @uiName Country label
+     */
+    this.countryLabel = "Country";
+    /**
+     * @uiName Currency label
+     */
+    this.currencyLabel = "Currency";
+    /**
+     * @uiName Submit button label
+     */
+    this.submitButtonLabel = "Submit";
+    /**
+     * @uiName Confirm button label
+     */
+    this.confirmButtonLabel = "Confirm";
+    /**
+     * @uiName Search country placeholder
+     */
+    this.searchCountryPlaceholder = "Search for a country";
+    /**
+     * @uiName Search currency placeholder
+     */
+    this.searchCurrencyPlaceholder = "Search for a currency";
+    /**
+     * @uiName Network error text
+     * @uiWidget textArea
+     */
+    this.networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Missing fields error text
+     * @uiWidget textArea
+     */
+    this.missingFieldsErrorText = "Please select both a country and currency.";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    // AL: TODO add usePartnerInfoModal
+    const props = index_module.isDemo()
+      ? useDemoPartnerInfoModal(this)
+      : usePartnerInfoModal(this);
+    return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+  }
+};
+function useDemoPartnerInfoModal(props) {
+  const [countryCode, setCountryCode] = domContextHooks_module.useState("US");
+  const [currency, setCurrency] = domContextHooks_module.useState("");
+  const [error, setError] = domContextHooks_module.useState("");
+  const demoCountries = [
+    { countryCode: "US", displayName: "United States" },
+    { countryCode: "CA", displayName: "Canada" },
+    { countryCode: "GB", displayName: "United Kingdom" },
+    { countryCode: "AU", displayName: "Australia" },
+    { countryCode: "DE", displayName: "Germany" },
+  ];
+  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" },
+  ];
+  return cjs.cjs({
+    states: {
+      brandName: "Test Brand",
+      open: true,
+      loading: false,
+      submitting: false,
+      isExistingPartner: false,
+      countryCode,
+      currency,
+      error,
+      success: false,
+      filteredCountries: demoCountries,
+      filteredCurrencies: demoCurrencies,
+    },
+    callbacks: {
+      onCountryChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value) {
+          setCountryCode(value);
+          setCurrency("");
+        }
+      },
+      onCurrencyChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value)
+          setCurrency(value);
+      },
+      onCountrySearch: () => { },
+      onCurrencySearch: () => { },
+      onSubmit: () => {
+        if (!countryCode || !currency) {
+          setError(props.missingFieldsErrorText);
+          return;
+        }
+        setError("");
+      },
+      onClose: () => { },
+    },
+    text: {
+      modalBrandHeader: props.modalBrandHeader,
+      descriptionNewPartner: props.descriptionNewPartner,
+      descriptionExistingPartner: props.descriptionExistingPartner,
+      countryLabel: props.countryLabel,
+      currencyLabel: props.currencyLabel,
+      submitButtonLabel: props.submitButtonLabel,
+      confirmButtonLabel: props.confirmButtonLabel,
+      searchCountryPlaceholder: props.searchCountryPlaceholder,
+      searchCurrencyPlaceholder: props.searchCurrencyPlaceholder,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const style$1 = {
   Wrapper: {
     maxWidth: "200px",
@@ -7951,6 +8278,7 @@ exports.sqm_link_button = LinkButton;
 exports.sqm_marketing_emails_checkbox = MarketingEmailsCheckbox;
 exports.sqm_name_fields = NameFields;
 exports.sqm_navigation_menu = NavigationMenu;
+exports.sqm_partner_info_modal = PartnerInfoModal;
 exports.sqm_payout_button_scroll = PayoutButtonScroll;
 exports.sqm_payout_status_alert = PayoutStatusAlert;
 exports.sqm_portal_change_marketing = PortalChangeMarketing;

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

@@ -33,7 +33,7 @@ require('./utilities-fcdb9504.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-6b1acd90.js');
 require('./ErrorView-ee7b0f36.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1d15cdf7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-5ce32291.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-53306f6e.js');
 const data = require('./data-8c8a08f6.js');
@@ -18700,6 +18700,162 @@ const UserInfoFormView = /*#__PURE__*/Object.freeze({
   DisabledForm: DisabledForm
 });
 
+const PartnerInfoModal_stories = {
+  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),
+  onCountrySearch: (v) => console.log("Country search:", v),
+  onCurrencySearch: (v) => console.log("Currency search:", v),
+  onSubmit: () => console.log("Submit"),
+  onClose: () => console.log("Close"),
+};
+const defaultText$1 = {
+  modalBrandHeader: "Welcome to {brandName} Program!",
+  descriptionNewPartner: "We just need a bit more information about you before you start earning cash!",
+  descriptionExistingPartner: "We noticed you are already an Impact.com partner, please confirm your information.",
+  countryLabel: "Country",
+  currencyLabel: "Currency",
+  submitButtonLabel: "Submit",
+  confirmButtonLabel: "Confirm",
+  searchCountryPlaceholder: "Search for a country",
+  searchCurrencyPlaceholder: "Search for a currency",
+};
+const defaultProps$y = {
+  states: {
+    open: true,
+    loading: false,
+    submitting: false,
+    isExistingPartner: false,
+    countryCode: "",
+    currency: "",
+    error: "",
+    success: false,
+    brandName: "Test Brand",
+    filteredCountries: demoCountries,
+    filteredCurrencies: demoCurrencies,
+  },
+  callbacks: noopCallbacks,
+  text: defaultText$1,
+};
+const NewPartnerEmpty = () => {
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, defaultProps$y));
+};
+const NewPartnerPrefilled = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "US",
+      currency: "",
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const NewPartnerFullySelected = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "US",
+      currency: "USD",
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const ExistingPartnerConfirm = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      isExistingPartner: true,
+      countryCode: "CA",
+      currency: "CAD",
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const Submitting = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "GB",
+      currency: "GBP",
+      submitting: true,
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const WithError$3 = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "US",
+      currency: "USD",
+      error: "An error occurred while creating your partner account. Please try again.",
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const ValidationError$1 = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "",
+      currency: "",
+      error: "Please select both a country and currency.",
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const Closed = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      open: false,
+    },
+  };
+  return index.h(ShadowViewAddon.PartnerInfoModalView, Object.assign({}, props));
+};
+const FullStackDemo = () => {
+  return (index.h("sqm-partner-info-modal", { "brand-name": "Acme", "header-new-partner": "Welcome to {brandName} Program!", "description-new-partner": "We just need a bit more information about you before you start earning cash!", "submit-button-label": "Submit" }));
+};
+
+const PartnerInfoModal = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PartnerInfoModal_stories,
+  NewPartnerEmpty: NewPartnerEmpty,
+  NewPartnerPrefilled: NewPartnerPrefilled,
+  NewPartnerFullySelected: NewPartnerFullySelected,
+  ExistingPartnerConfirm: ExistingPartnerConfirm,
+  Submitting: Submitting,
+  WithError: WithError$3,
+  ValidationError: ValidationError$1,
+  Closed: Closed,
+  FullStackDemo: FullStackDemo
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21393,6 +21549,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
+  PartnerInfoModal,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -54,6 +54,7 @@
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
     "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js",
+    "./components/sqm-partner-info-modal/sqm-partner-info-modal.js",
     "./components/sqm-payout-button-scroll/sqm-payout-button-scroll.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
     "./components/sqm-portal-change-marketing/sqm-portal-change-marketing.js",

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

@@ -0,0 +1,143 @@
+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),
+  onCountrySearch: (v) => console.log("Country search:", v),
+  onCurrencySearch: (v) => console.log("Currency search:", v),
+  onSubmit: () => console.log("Submit"),
+  onClose: () => console.log("Close"),
+};
+const defaultText = {
+  modalBrandHeader: "Welcome to {brandName} Program!",
+  descriptionNewPartner: "We just need a bit more information about you before you start earning cash!",
+  descriptionExistingPartner: "We noticed you are already an Impact.com partner, please confirm your information.",
+  countryLabel: "Country",
+  currencyLabel: "Currency",
+  submitButtonLabel: "Submit",
+  confirmButtonLabel: "Confirm",
+  searchCountryPlaceholder: "Search for a country",
+  searchCurrencyPlaceholder: "Search for a currency",
+};
+const defaultProps = {
+  states: {
+    open: true,
+    loading: false,
+    submitting: false,
+    isExistingPartner: false,
+    countryCode: "",
+    currency: "",
+    error: "",
+    success: false,
+    brandName: "Test Brand",
+    filteredCountries: demoCountries,
+    filteredCurrencies: demoCurrencies,
+  },
+  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 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 FullStackDemo = () => {
+  return (h("sqm-partner-info-modal", { "brand-name": "Acme", "header-new-partner": "Welcome to {brandName} Program!", "description-new-partner": "We just need a bit more information about you before you start earning cash!", "submit-button-label": "Submit" }));
+};