@saasquatch/mint-components 2.1.8 → 2.1.9-1

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

@@ -3,41 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8277cbb3.js');
-require('./global-b7b1b8fe.js');
+require('./global-0f8b1267.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-0f7948af.js');
+require('./useReferralCodes-89c2b972.js');
 require('./mixins-4761d472.js');
 const copyTextView = require('./copy-text-view-bb2c0ea7.js');
 require('./sqm-text-span-view-f274fdf2.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-424e406a.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-90cd89e3.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-020f661c.js');
 const GenericTableView = require('./GenericTableView-be5648e4.js');
-require('./useChildElements-041127d7.js');
+require('./useChildElements-89bc50a9.js');
 const luxon = require('./luxon-c1ad356a.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-e9f2a454.js');
 require('./index-8c6255f5.js');
 require('./imageUrl-a7880cab.js');
 const emailRegistrationView = require('./email-registration-view-306c8878.js');
-const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-0af2a157.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-d90f8941.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-67fd7934.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-f330d641.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-6616e3e0.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-49b152dd.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c81fe7f1.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-639337e3.js');
-require('./utilities-fcdb9504.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-20693e59.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-2b4b92da.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-bfdbb98d.js');
+require('./utilities-096934ea.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-a26deae6.js');
+const ShadowViewAddon = require('./ShadowViewAddon-d679ec76.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');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-0cd7ebdb.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-efa08934.js');
+const data = require('./data-e83f8a41.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-e3faede9.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -10704,7 +10705,6 @@ const props$1 = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
-      codeParam: "rsCode",
     },
   },
 };
@@ -18701,6 +18701,164 @@ 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),
+  setCountrySearch: (v) => console.log("Country search:", v),
+  setCurrencySearch: (v) => console.log("Currency search:", v),
+  onSubmit: () => console.log("Submit"),
+  onClose: () => console.log("Close"),
+};
+const defaultText$1 = {
+  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.",
+  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(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, defaultProps$y));
+};
+const NewPartnerPrefilled = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "US",
+      currency: "",
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const NewPartnerFullySelected = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "US",
+      currency: "USD",
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const ExistingPartnerConfirm = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      isExistingPartner: true,
+      countryCode: "CA",
+      currency: "CAD",
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const Submitting = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      countryCode: "GB",
+      currency: "GBP",
+      submitting: true,
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.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(sqmPartnerInfoModalView.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(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
+};
+const Closed = () => {
+  const props = {
+    ...defaultProps$y,
+    states: {
+      ...defaultProps$y.states,
+      open: false,
+    },
+  };
+  return index.h(sqmPartnerInfoModalView.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 () {
@@ -21394,6 +21552,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
+  PartnerInfoModal,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8277cbb3.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-require('./index.module-f8c8495f.js');
-const reRender = require('./re-render-72a0ef45.js');
+require('./index.module-42d413d9.js');
+const reRender = require('./re-render-69bde9ee.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -4,10 +4,10 @@ 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-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-72a0ef45.js');
-const useChildElements = require('./useChildElements-041127d7.js');
+const reRender = require('./re-render-69bde9ee.js');
+const useChildElements = require('./useChildElements-89bc50a9.js');
 
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/cjs/{sqm-user-info-form-view-53306f6e.js → sqm-user-info-form-view-efa08934.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
+const global = require('./global-0f8b1267.js');
 const JSS = require('./JSS-8503a151.js');
-const data = require('./data-8c8a08f6.js');
+const data = require('./data-e83f8a41.js');
 
 const style = {
   Description: {
@@ -1905,8 +1905,13 @@ 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"
   function isDisabledPartnerInput(field) {
     var _a;
+    if (data$1.partnerData.phoneNumber === "0000000" &&
+      (field === "phoneNumber" || field === "phoneNumberCountryCode")) {
+      return false;
+    }
     return states.isPartner && !!((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
   }
   function isDisabledUserInput(field) {

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

@@ -4,7 +4,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-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = domContextHooks_module.browser("sq:widget-verification");

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

@@ -4,7 +4,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-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
@@ -38,6 +38,7 @@ function useWidgetVerification() {
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
   const [loading, setLoading] = domContextHooks_module.useState(true);
+  const [showPartnerModal, setShowPartnerModal] = domContextHooks_module.useState(false);
   const [fetch] = index_module.Xe(USER_LOOKUP);
   domContextHooks_module.useEffect(() => {
     const checkUser = async () => {
@@ -61,9 +62,13 @@ function useWidgetVerification() {
     checkUser();
   }, []);
   const onVerification = () => {
+    setShowPartnerModal(true);
+  };
+  const onPartnerModalComplete = () => {
+    setShowPartnerModal(false);
     setContext(true);
   };
-  return { showCode, onVerification, loading };
+  return { showCode, showPartnerModal, onVerification, onPartnerModalComplete, loading };
 }
 
 const WidgetVerification = class {
@@ -183,6 +188,9 @@ const WidgetVerification = class {
       : useWidgetVerification();
     if (props.loading)
       return index.h("sl-spinner", null);
+    if (props.showPartnerModal) {
+      return index.h("sqm-partner-info-modal", null);
+    }
     const generalText = this.getStepTextProps("general_");
     return (index.h("div", null, index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
         color: "var(--sl-color-neutral-500)",
@@ -208,7 +216,7 @@ function useDemoWidgetVerificationInternal(props) {
   const onVerification = () => {
     setContext(true);
   };
-  return cjs.cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
+  return cjs.cjs({ showCode, showPartnerModal: false, onVerification, onPartnerModalComplete: () => { }, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/{useChildElements-041127d7.js → useChildElements-89bc50a9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-2398df36.js → useInstantAccessRegistration-651aa95b.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-4fe5b770.js');
+const useRegistrationFormState = require('./useRegistrationFormState-a223f597.js');
 
 function useInstantAccessRegistration(props) {
   const locale = index_module.L();

package/dist/cjs/{useLeadFormState-b4c2ab5b.js → useLeadFormState-76d3b511.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
+const global = require('./global-0f8b1267.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/cjs/{usePayoutStatus-0192fccd.js → usePayoutStatus-cf050a03.js}

@@ -1,9 +1,8 @@
 'use strict';
 
 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 index_module = require('./index.module-42d413d9.js');
+const eventKeys = require('./eventKeys-7af4df4d.js');
 
 var toArray = function toArray(a) {
   var ret = Array(a.length);
@@ -1062,10 +1061,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,7 +1108,6 @@ function usePayoutStatus(props) {
   };
 }
 
-exports.TAX_FORM_UPDATED_EVENT_KEY = TAX_FORM_UPDATED_EVENT_KEY;
 exports.VERIFF_COMPLETE_EVENT_KEY = VERIFF_COMPLETE_EVENT_KEY;
 exports.getStatus = getStatus;
 exports.usePayoutStatus = usePayoutStatus;

package/dist/cjs/{usePortalRegistrationForm-23ee2d62.js → usePortalRegistrationForm-31822dc4.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-4fe5b770.js');
+const useRegistrationFormState = require('./useRegistrationFormState-a223f597.js');
 
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.

package/dist/cjs/{useReferralCodes-0f7948af.js → useReferralCodes-89c2b972.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(

package/dist/cjs/{useReferralTable-6e9de0d5.js → useReferralTable-d3ddfd05.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-8277cbb3.js');
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
-const reRender = require('./re-render-72a0ef45.js');
-const useChildElements = require('./useChildElements-041127d7.js');
+const index_module = require('./index.module-42d413d9.js');
+const reRender = require('./re-render-69bde9ee.js');
+const useChildElements = require('./useChildElements-89bc50a9.js');
 
 const debug = domContextHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";

package/dist/cjs/{useRegistrationFormState-4fe5b770.js → useRegistrationFormState-a223f597.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";

package/dist/cjs/{useVerificationEmail-5d19aa99.js → useVerificationEmail-994bc32f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {

package/dist/cjs/{utilities-fcdb9504.js → utilities-096934ea.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
+const index_module = require('./index.module-42d413d9.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

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,145 @@
+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),
+  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.",
+  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" }));
+};