@saasquatch/mint-components 2.1.9-1 → 2.1.9-11

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

@@ -1907,12 +1907,12 @@ const UserInfoFormView = (props) => {
   }
   // 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" &&
+    var _a, _b;
+    if (((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a.phoneNumber) === "0000000" &&
       (field === "phoneNumber" || field === "phoneNumberCountryCode")) {
       return false;
     }
-    return states.isPartner && !!((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
+    return states.isPartner && !!((_b = data$1.partnerData) === null || _b === void 0 ? void 0 : _b[field]);
   }
   function isDisabledUserInput(field) {
     var _a;
@@ -1948,14 +1948,6 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { loading: states.loading, type: "info" },
-        index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
-        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
-          id: "isPartnerAlertDescription",
-          defaultMessage: text.isPartnerAlertDescription,
-        }, {
-          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {

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

@@ -2,13 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8277cbb3.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-42d413d9.js');
-const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
-const extractProps = require('./extractProps-e9c55ba8.js');
+const index = require('./index-fd67d7bc.js');
+const domContextHooks_module = require('./dom-context-hooks.module-224e09d4.js');
+const index_module = require('./index.module-c79bd5b0.js');
+require('./jss-preset-default.esm-b48f0c33.js');
+const JSS = require('./JSS-518e9b4d.js');
+const utils = require('./utils-e326d1b5.js');
+const cjs = require('./cjs-2bf512b9.js');
 const keys = require('./keys-cff24974.js');
+const parseStates = require('./parseStates-d1effc19.js');
+const extractProps = require('./extractProps-fd93ba62.js');
 
 const USER_LOOKUP = index_module.dist.gql `
   query checkUserVerification {
@@ -22,6 +25,9 @@ const USER_LOOKUP = index_module.dist.gql `
           email
           emailVerified
         }
+        impactConnection {
+          connected
+        }
       }
     }
   }
@@ -42,15 +48,22 @@ function useWidgetVerification() {
   const [fetch] = index_module.Xe(USER_LOOKUP);
   domContextHooks_module.useEffect(() => {
     const checkUser = async () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e;
       try {
         const res = await fetch({});
         if (!res || res instanceof Error)
           throw new Error();
-        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
-          setContext(true);
-        else if ((_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)
+        // 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);
@@ -74,7 +87,7 @@ function useWidgetVerification() {
 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
+    // ! 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
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -122,7 +135,7 @@ const WidgetVerification = class {
      */
     this.emailStep_emailValidationErrorText = "Please enter a valid email";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                    EMAIL STEP PROPS
+                    CODE STEP PROPS
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /**
      * @uiName Verify code widget header text
@@ -169,10 +182,86 @@ const WidgetVerification = class {
      * @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);
@@ -188,15 +277,58 @@ 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 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("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("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))))));
+    const partnerText = this.getStepTextProps("createPartnerStep_");
+    const dialogLabel = props.showPartnerModal
+      ? partnerText.modalHeader
+      : generalText.verifyEmailHeader;
+    const renderStepContent = () => {
+      if (props.showPartnerModal) {
+        return (index.h("sqm-partner-info-modal", Object.assign({ embedded: true }, partnerText)));
+      }
+      if (props.showCode) {
+        return (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_"))));
+      }
+      return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))));
+    };
+    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: true, label: dialogLabel, "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();
+        }
+      } }, renderStepContent())));
   }
 };
 function useDemoWidgetVerificationInternal(props) {
@@ -209,14 +341,20 @@ function useDemoWidgetVerificationInternal(props) {
     initialValue: undefined,
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
-  const states = extractProps.parseStates(props.stateController);
+  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 });
+  return cjs.cjs({
+    showCode,
+    showPartnerModal: false,
+    onVerification,
+    onPartnerModalComplete: () => { },
+    loading: false,
+  }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_widget_verification = WidgetVerification;

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)",
@@ -59,14 +58,11 @@ const style = {
     },
   },
 };
-export function PartnerInfoModalView(props) {
+export function PartnerInfoModalContent(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return h("div", null);
   const description = states.isExistingPartner ? (h("div", { class: sheet.classes.DescriptionContainer },
     h("p", null, text.descriptionExistingPartner),
     h("p", null, text.supportDescriptionExistingPartner))) : (h("p", null,
@@ -75,17 +71,7 @@ export function PartnerInfoModalView(props) {
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
+  return [
     h("style", { type: "text/css" }, styleString),
     description,
     h("div", { class: sheet.classes.FormFields },
@@ -99,5 +85,24 @@ export function PartnerInfoModalView(props) {
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
         _b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
     states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
+    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel),
+  ];
+}
+export function PartnerInfoModalView(props) {
+  const { states, text } = props;
+  const sheet = createStyleSheet(style);
+  console.log(states, "partner info modal states"); // TEMP
+  if (!states.open)
+    return h("div", null);
+  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, 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();
+      }
+    } },
+    h(PartnerInfoModalContent, Object.assign({}, props))));
 }

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

@@ -2,9 +2,10 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 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 { PartnerInfoModalContent, PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
+import { usePartnerInfoModal, } from "./usePartnerInfoModal";
 /**
  * @uiName Partner Info Modal
  * @exampleGroup Tax and Cash
@@ -88,6 +89,19 @@ export class PartnerInfoModal {
      * @uiWidget textArea
      */
     this.missingFieldsErrorText = "Please select both a country and currency.";
+    /**
+     * When true, renders only the form content without its own sl-dialog wrapper.
+     * Used when embedded inside another dialog (e.g. sqm-widget-verification).
+     * @undocumented
+     */
+    this.embedded = false;
+    /**
+     * @undocumented
+     * @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
+     * @componentState { "title": "Existing partner", "props": { "states": { "open": true, "isExistingPartner": true, "countryCode": "US", "currency": "USD" } } }
+     * @componentState { "title": "Connected (hidden)", "props": { "states": { "open": false } } }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -99,6 +113,9 @@ export class PartnerInfoModal {
     const props = isDemo()
       ? useDemoPartnerInfoModal(this)
       : usePartnerInfoModal(this);
+    if (this.embedded) {
+      return h(PartnerInfoModalContent, Object.assign({}, props));
+    }
     return h(PartnerInfoModalView, Object.assign({}, props));
   }
   static get is() { return "sqm-partner-info-modal"; }
@@ -419,20 +436,71 @@ export class PartnerInfoModal {
       "reflect": false,
       "defaultValue": "\"Please select both a country and currency.\""
     },
+    "embedded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": "When true, renders only the form content without its own sl-dialog wrapper.\nUsed when embedded inside another dialog (e.g. sqm-widget-verification)."
+      },
+      "attribute": "embedded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"New partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": false } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Existing partner\", \"props\": { \"states\": { \"open\": true, \"isExistingPartner\": true, \"countryCode\": \"US\", \"currency\": \"USD\" } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Connected (hidden)\", \"props\": { \"states\": { \"open\": false } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "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"
           }
         }
       },
@@ -455,6 +523,9 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = useState("US");
   const [currency, setCurrency] = useState("");
   const [error, setError] = useState("");
+  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",
@@ -508,5 +579,5 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
 }

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

@@ -1,7 +1,8 @@
-import { useLocale, useMutation, useQuery, } from "@saasquatch/component-boilerplate";
+import { useLocale, useMutation, useQuery, useSetParent, } from "@saasquatch/component-boilerplate";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
+import { VERIFICATION_PARENT_NAMESPACE } from "../sqm-widget-verification/keys";
 // new field under impactConnection:{ resolvedByEmail: boolean } - determines if connection came from managed identity
 export const GET_USER_PARTNER_INFO = gql `
   query getUserPartnerInfo {
@@ -91,6 +92,7 @@ const GET_BRAND_NAME = gql `
 export function usePartnerInfoModal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const locale = useLocale();
+  const setVerificationContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   const { data: userData, loading: userLoading, refetch, } = useQuery(GET_USER_PARTNER_INFO, {});
   const user = userData === null || userData === void 0 ? void 0 : userData.user;
   const { data: currenciesData, loading: currenciesLoading } = useQuery(GET_CURRENCIES, { variables: { locale } });
@@ -191,6 +193,7 @@ export function usePartnerInfoModal(props) {
       window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setSuccess(true);
+      setVerificationContext(true);
     }
     catch (e) {
       console.error("Partner creation error:", e);
@@ -207,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,

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -108,6 +108,7 @@ import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
 import * as PartnerInfoModal from "../sqm-partner-info-modal/PartnerInfoModal.stories";
+import * as WidgetVerification from "../sqm-widget-verification/WidgetVerification.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -220,6 +221,7 @@ const stories = [
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
   PartnerInfoModal,
+  WidgetVerification,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-widget-verification/WidgetVerification.stories.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Verification",
+};
+export const Step1Email = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: false },
+  }) }));
+export const Step2Code = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showCode: true },
+  }) }));
+export const Step3PartnerModal = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { showPartnerModal: true },
+  }) }));
+export const Loading = () => (h("sqm-widget-verification", { stateController: JSON.stringify({
+    "sqm-widget-verification": { loading: true },
+  }) }));

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -54,7 +54,6 @@ const style = {
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   FooterContainer: {
     display: "flex",
@@ -132,7 +131,7 @@ export function WidgetCodeVerificationView(props) {
           h("sl-input", { class: inputClass, name: "code" }),
           h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        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)),
-      h("div", { class: sheet.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText)))));
+        h("div", { class: sheet.classes.FooterContainer },
+          h(TextSpanView, { type: "p" }, resendCodeText)),
+        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)))));
 }

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -14,11 +14,9 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     position: "relative",
     flexDirection: "column",
-    maxWidth: "320px",
   },
   ContinueButton: {
     width: "100%",
-    maxWidth: "100px",
   },
   SkeletonOne: {
     width: "50%",