@saasquatch/mint-components 2.1.9-6 → 2.1.9-8

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

@@ -30,10 +30,10 @@ const ErrorView = require('./ErrorView-ee7b0f36.js');
 const ShadowViewAddon = require('./ShadowViewAddon-d679ec76.js');
 require('./sqm-portal-container-view-70a47420.js');
 const data = require('./data-e83f8a41.js');
-const parseStates = require('./parseStates-d1effc19.js');
-const extractProps = require('./extractProps-fd93ba62.js');
+const keys = require('./keys-cff24974.js');
 require('./eventKeys-7af4df4d.js');
 const usePayoutStatus = require('./usePayoutStatus-cf050a03.js');
+const parseStates = require('./parseStates-d1effc19.js');
 
 /**
  *
@@ -6394,6 +6394,24 @@ function useTaskCardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+/**
+ * Util function for getting just the props with a certain prefix.
+ * @param props Text props on stencil component
+ * @param prefix Prefix denoting which group the text prop belongs to
+ * @returns A new object with all keys with the prefix provided. The prefix is removed from each key.
+ */
+function extractProps(props, prefix) {
+  const keys = Object.keys(props).filter((k) => k.startsWith(prefix));
+  const formattedProps = keys.reduce((prev, k) => {
+    const key = k.replace(prefix, "");
+    return {
+      ...prev,
+      [key]: props[k],
+    };
+  }, {});
+  return formattedProps;
+}
+
 function getCurrentStep(user) {
   var _a, _b;
   if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
@@ -7678,7 +7696,7 @@ const TaxAndCashMonolith = class {
   getGeneralStepTextProps(prefix) {
     const props = utils.getProps(this);
     return {
-      ...extractProps.extractProps(props, prefix),
+      ...extractProps(props, prefix),
       generalErrorTitle: props.generalErrorTitle,
       generalErrorDescription: props.generalErrorDescription,
       fieldRequiredError: props.fieldRequiredError,
@@ -7941,6 +7959,351 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const USER_LOOKUP = index_module.dist.gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
+        impactConnection {
+          connected
+        }
+      }
+    }
+  }
+`;
+function useWidgetVerification() {
+  const userIdentity = index_module.J();
+  const [showCode, setShowCode] = 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 [fetch] = index_module.Xe(USER_LOOKUP);
+  domContextHooks_module.useEffect(() => {
+    const checkUser = async () => {
+      var _a, _b, _c, _d, _e;
+      try {
+        const res = await fetch({});
+        if (!res || res instanceof Error)
+          throw new Error();
+        // Flow changed to send email -> verify code -> show early partner creation modal
+        const emailVerified = ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified);
+        const isConnected = (_e = (_d = res === null || res === void 0 ? void 0 : res.viewer) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.connected;
+        if (isConnected) {
+          // Partner already created, show widget content
+          setContext(true);
+        }
+        else if (emailVerified) {
+          // Email verified but no partner yet, show partner modal
+          setShowPartnerModal(true);
+        }
+      }
+      catch (e) {
+        console.error("Could not fetch user information:", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setShowPartnerModal(true);
+  };
+  const onPartnerModalComplete = () => {
+    setShowPartnerModal(false);
+    setContext(true);
+  };
+  return { showCode, showPartnerModal, onVerification, onPartnerModalComplete, loading };
+}
+
+const WidgetVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification AND sqm-partner-info-modal
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    GENERAL PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @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
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify email widget header text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    /**
+     * @uiName Email input label
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailValidationErrorText = "Please enter a valid email";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    CODE STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    PARTNER CREATION STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName New partner header
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_modalHeader = "Let's get you ready for rewards";
+    /**
+     * @uiName Existing partner header
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_modalHeaderExistingPartner = "We found an existing account";
+    /**
+     * @uiName New partner description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_descriptionNewPartner = "Confirm your country and currency now to get your future rewards faster.";
+    /**
+     * @uiName Existing partner description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_descriptionExistingPartner = "We found an account with this email on our referral program provider, impact.com. Please confirm your country and currency now to get your future rewards faster.";
+    /**
+     * @uiName Existing partner support description
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_supportDescriptionExistingPartner = "If this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    /**
+     * @uiName Country label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_countryLabel = "Country";
+    /**
+     * @uiName Currency label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_currencyLabel = "Currency";
+    /**
+     * @uiName Submit button label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_submitButtonLabel = "Submit";
+    /**
+     * @uiName Confirm button label
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_confirmButtonLabel = "Confirm";
+    /**
+     * @uiName Search country placeholder
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_searchCountryPlaceholder = "Search for a country";
+    /**
+     * @uiName Search currency placeholder
+     * @uiGroup Partner Creation Step
+     */
+    this.createPartnerStep_searchCurrencyPlaceholder = "Search for a currency";
+    /**
+     * @uiName Network error text
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Missing fields error text
+     * @uiGroup Partner Creation Step
+     * @uiWidget textArea
+     */
+    this.createPartnerStep_missingFieldsErrorText = "Please select both a country and currency.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
+     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
+     * @componentState { "title": "Step 3: Create Partner", "props": { "showPartnerModal": true }, "dependencies": ["sqm-partner-info-modal"], "uiGroup": "Partner Creation Step" }
+     */
+    this.stateController = "{}";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = utils.getProps(this);
+    return extractProps(props, prefix);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
+      : useWidgetVerification();
+    if (props.loading)
+      return index.h("sl-spinner", null);
+    if (props.showPartnerModal) {
+      return (index.h("sqm-partner-info-modal", Object.assign({}, this.getStepTextProps("createPartnerStep_"))));
+    }
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "480px",
+        },
+        "&::part(title)": {
+          fontSize: "var(--sl-font-size-x-large)",
+          fontWeight: "600",
+          padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+          overflow: "visible",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+        },
+        "&::part(overlay)": {
+          background: "rgba(0, 0, 0, 0.5)",
+        },
+        "&::part(close-button)": {
+          display: "none",
+        },
+      },
+    };
+    const sheet = JSS.createStyleSheet(style);
+    const styleString = sheet.toString();
+    const generalText = this.getStepTextProps("general_");
+    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
+        color: "var(--sl-color-neutral-500)",
+        fontSize: "var(--sl-font-size-medium)",
+        margin: "0",
+      } }, generalText.verifyEmailDescription), props.showCode ? (index.h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: props.showCode, label: "Let's get your started for rewards", "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();
+        }
+      } }, index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))))) : (index.h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: props.showCode, label: "Let's get your started for rewards", "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();
+        }
+      } }, index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_")))))));
+  }
+};
+function useDemoWidgetVerificationInternal(props) {
+  const [showCode, setShowCode] = index_module.In({
+    namespace: keys.SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = index_module.In({
+    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const states = parseStates.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const onVerification = () => {
+    setContext(true);
+  };
+  return cjs.cjs({
+    showCode,
+    showPartnerModal: false,
+    onVerification,
+    onPartnerModalComplete: () => { },
+    loading: false,
+  }, formatted || {}, { arrayMerge: (_, a) => a });
+}
+
 exports.sqm_big_stat = BigStat;
 exports.sqm_brand = BrandComponent;
 exports.sqm_brand_selector = SqmBrandSelector;
@@ -7986,3 +8349,4 @@ exports.sqm_tax_and_cash = TaxAndCashMonolith;
 exports.sqm_timeline = Timeline;
 exports.sqm_timeline_entry = TimelineReward;
 exports.sqm_user_name = UserName;
+exports.sqm_widget_verification = WidgetVerification;

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

@@ -65,7 +65,6 @@ const style = {
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   FooterContainer: {
     display: "flex",
@@ -143,9 +142,9 @@ function WidgetCodeVerificationView(props) {
           index.h("sl-input", { class: inputClass, name: "code" }),
           index.h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      index.h("div", { class: sheet.classes.FooterContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
+        index.h("div", { class: sheet.classes.FooterContainer },
+          index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)),
+        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)))));
 }
 
 const VerifyEmailWithCodeMutation = index_module.dist.gql `

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

@@ -10,10 +10,10 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-f274fdf2.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-e3faede9.js');
-const parseStates = require('./parseStates-d1effc19.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-cd758f12.js');
 const keys = require('./keys-cff24974.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
+const parseStates = require('./parseStates-d1effc19.js');
 const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
 
 const UpsertUserEmailMutation = index_module.dist.gql `
@@ -150,11 +150,9 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     position: "relative",
     flexDirection: "column",
-    maxWidth: "320px",
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   SkeletonOne: {
     width: "50%",
@@ -625,7 +623,7 @@ function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
-      isExistingPartner: (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected) || (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher),
+      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
       countryCode,
       currency,
       error,
@@ -727,7 +725,7 @@ const PartnerInfoModal = class {
     /**
      * @undocumented
      * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
-     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true } } }
+     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true, "countryCode": "US", "currency": "USD" } } }
      * @componentState { "title": "Connected (hidden)", "props": { "states": { "open": false } } }
      */
     this.stateController = "{}";
@@ -749,10 +747,9 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = domContextHooks_module.useState("US");
   const [currency, setCurrency] = domContextHooks_module.useState("");
   const [error, setError] = domContextHooks_module.useState("");
-  const parsed = parseStates.parseStates(props.stateController) || {};
-  // If editor wraps under tag name, extract it; otherwise use directly
-  const stateOverrides = parsed["sqm-partner-info-modal"] || parsed;
-  console.log("stateController raw:", props.stateController, "parsed:", parsed, "overrides:", stateOverrides); // TEMP
+  const parsed = parseStates.parseStates(props.stateController);
+  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
+  // @ts-ignore
   return cjs.cjs({
     states: {
       brandName: "Test Brand",
@@ -806,7 +803,7 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, stateOverrides || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_email_verification = WidgetEmailVerification;

package/dist/cjs/{sqm-partner-info-modal-view-e3faede9.js → sqm-partner-info-modal-view-cd758f12.js}

@@ -14,7 +14,7 @@ const style = {
       padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large)",
+      padding: "0 var(--sl-spacing-x-large)",
       fontSize: "var(--sl-font-size-small)",
       overflow: "visible",
     },
@@ -22,7 +22,6 @@ const style = {
       display: "flex",
       flexDirection: "column",
       gap: "var(--sl-spacing-small)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
     },
     "&::part(overlay)": {
       background: "rgba(0, 0, 0, 0.5)",

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

@@ -38,7 +38,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js'
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-923ff8d9.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');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-cd758f12.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -18859,6 +18859,31 @@ const PartnerInfoModal = /*#__PURE__*/Object.freeze({
   FullStackDemo: FullStackDemo
 });
 
+const WidgetVerification_stories = {
+  title: "Components/Widget Verification",
+};
+const Step1Email = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: false },
+  }) }));
+const Step2Code = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: true },
+  }) }));
+const Step3PartnerModal = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showPartnerModal: true },
+  }) }));
+const Loading$h = () => (index.h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { loading: true },
+  }) }));
+
+const WidgetVerification = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': WidgetVerification_stories,
+  Step1Email: Step1Email,
+  Step2Code: Step2Code,
+  Step3PartnerModal: Step3PartnerModal,
+  Loading: Loading$h
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21553,6 +21578,7 @@ const stories = [
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
   PartnerInfoModal,
+  WidgetVerification,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

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",
@@ -54,7 +55,6 @@
     "./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/sqm-partner-info-modal-view.js

@@ -11,7 +11,7 @@ const style = {
       padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large)",
+      padding: "0 var(--sl-spacing-x-large)",
       fontSize: "var(--sl-font-size-small)",
       overflow: "visible",
     },
@@ -19,7 +19,6 @@ const style = {
       display: "flex",
       flexDirection: "column",
       gap: "var(--sl-spacing-small)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
     },
     "&::part(overlay)": {
       background: "rgba(0, 0, 0, 0.5)",

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

@@ -5,7 +5,7 @@ import deepmerge from "deepmerge";
 import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
-import { usePartnerInfoModal } from "./usePartnerInfoModal";
+import { usePartnerInfoModal, } from "./usePartnerInfoModal";
 /**
  * @uiName Partner Info Modal
  * @exampleGroup Tax and Cash
@@ -92,7 +92,7 @@ export class PartnerInfoModal {
     /**
      * @undocumented
      * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
-     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true } } }
+     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true, "countryCode": "US", "currency": "USD" } } }
      * @componentState { "title": "Connected (hidden)", "props": { "states": { "open": false } } }
      */
     this.stateController = "{}";
@@ -445,7 +445,7 @@ export class PartnerInfoModal {
             "text": "{ \"title\": \"New partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": false } } }",
             "name": "componentState"
           }, {
-            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true } } }",
+            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true, \"countryCode\": \"US\", \"currency\": \"USD\" } } }",
             "name": "componentState"
           }, {
             "text": "{ \"title\": \"Connected (hidden)\", \"props\": { \"states\": { \"open\": false } } }",
@@ -461,16 +461,16 @@ export class PartnerInfoModal {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<PartnerInfoModalViewProps>",
+        "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; }[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "PartnerInfoModalViewProps": {
+          "PartnerInfoModalResult": {
             "location": "import",
-            "path": "./sqm-partner-info-modal-view"
+            "path": "./usePartnerInfoModal"
           }
         }
       },
@@ -493,10 +493,9 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = useState("US");
   const [currency, setCurrency] = useState("");
   const [error, setError] = useState("");
-  const parsed = parseStates(props.stateController) || {};
-  // If editor wraps under tag name, extract it; otherwise use directly
-  const stateOverrides = parsed["sqm-partner-info-modal"] || parsed;
-  console.log("stateController raw:", props.stateController, "parsed:", parsed, "overrides:", stateOverrides); // TEMP
+  const parsed = parseStates(props.stateController);
+  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
+  // @ts-ignore
   return deepmerge({
     states: {
       brandName: "Test Brand",
@@ -550,5 +549,5 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, stateOverrides || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
 }

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

@@ -210,7 +210,7 @@ export function usePartnerInfoModal(props) {
       open: showModal,
       loading: userLoading || countriesLoading || currenciesLoading,
       submitting: connectLoading,
-      isExistingPartner: (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected) || (impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher),
+      isExistingPartner: impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.publisher,
       countryCode,
       currency,
       error,