@saasquatch/mint-components 1.12.0-8 → 1.12.0

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

@@ -3,6 +3,7 @@ import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import * as ShareButton from "../sqm-share-button/ShareButton.stories";
 import * as EmptyState from "../sqm-empty/EmptyState.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
 import * as ShareLink from "../sqm-share-link/ShareLink.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
 import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
@@ -69,6 +70,7 @@ import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
 import * as Tabs from "../sqm-tabs/Tabs.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
 import * as EmailRegistration from "../views/EmailRegistration.stories";
 import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
 import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
@@ -87,6 +89,7 @@ import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-v
 import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
 import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -97,6 +100,7 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
+  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -165,6 +169,8 @@ const stories = [
   Tabs,
   ShareCode,
   CouponCode,
+  ReferralCode,
+  ReferralCodes,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,

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

@@ -28,7 +28,7 @@ const vanillaStyle = `
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
+    font-weight: var(--sl-font-weight-bold);
     color: var(--sl-color-neutral-800);
     margin: 0;
   }

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

@@ -8,7 +8,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

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

@@ -286,8 +286,8 @@ function useDemoWidgetCodeVerification(props) {
       loading: false,
       email: "test@example.com",
       emailResent,
-      resendError: true,
-      verifyFailed: true,
+      resendError: false,
+      verifyFailed: false,
     },
     refs: {
       codeWrapperRef: () => { },

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

@@ -46,10 +46,7 @@ export function useWidgetCodeVerification(props) {
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
   const [emailError, setEmailError] = useState(false);
-  // // TODO: Need to handle error states for these errors
-  // const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] =
-  //   useCodeVerificationMutation();
-  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -69,7 +66,7 @@ export function useWidgetCodeVerification(props) {
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-1);
+          e.target.value = input.slice(0, 1);
           return;
         }
         if (input.length > 1) {
@@ -140,7 +137,7 @@ export function useWidgetCodeVerification(props) {
       codeWrapperRef: setCodeRef,
     },
     states: {
-      email,
+      email: verificationEmail,
       emailResent,
       resendError: sendErrors || verifyErrors,
       initialiseLoading: !initialized,

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

@@ -10,12 +10,17 @@ const defaultProps = {
   sendCodeError: false,
 };
 export const Default = () => (h("sqm-email-verification", { demoData: {} }));
-export const EmailIsPrefilled = () => (h("sqm-email-verification", { demoData: {
-    states: {
-      ...defaultProps,
-      email: "test@example.com",
-    },
-  } }));
+export const EmailIsPrefilled = () => (h("div", null,
+  h("sqm-text", null,
+    h("h4", null, "Verify your email")),
+  h("sqm-text", null,
+    h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps,
+        email: "test@example.com",
+      },
+    } })));
 export const Loading = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,
@@ -28,6 +33,17 @@ export const SaveLoading = () => (h("sqm-email-verification", { demoData: {
       loading: true,
     },
   } }));
+export const WithHeader = () => (h("div", null,
+  h("sqm-text", null,
+    h("h4", null, "Verify your email")),
+  h("sqm-text", null,
+    h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps,
+        email: "test@example.com",
+      },
+    } })));
 export const InvalidEmail = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { intl } from "../../../global/global";
 const style = {
   Wrapper: {
     display: "flex",
@@ -20,10 +21,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -76,12 +74,18 @@ export function WidgetEmailVerificationView(props) {
     states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("b", null, text.sendCodeErrorHeader),
-      text.sendCodeErrorDescription)),
+      h("br", null),
+      intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
       h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       h("sl-form", { "onSl-submit": callbacks.submitEmail },
         h("div", { class: sheet.classes.InputsContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email || "", type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
             ? {
               class: sheet.classes.ErrorInput,
               helpText: text.emailValidationErrorText,

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

@@ -18,11 +18,15 @@ export class WidgetEmailVerification {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Send code to email alert description
      */
-    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */
@@ -90,7 +94,28 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-header",
       "reflect": false,
-      "defaultValue": "\"There was an error sending your code.\""
+      "defaultValue": "\"There was an error sending your code\""
+    },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
     },
     "sendCodeErrorDescription": {
       "type": "string",
@@ -111,7 +136,7 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-description",
       "reflect": false,
-      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
+      "defaultValue": "\"Please try again. If this problem continues, contact our program {supportLink}.\""
     },
     "emailLabel": {
       "type": "string",

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

@@ -5,7 +5,7 @@ import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
 import { useVerificationEmail } from "../useVerificationEmail";
 export const UpsertUserEmailMutation = gql `
   mutation upsertUser($userInput: UserInput!) {
-    user(userInput: $userInput) {
+    upsertUser(userInput: $userInput) {
       id
       accountId
       email
@@ -35,7 +35,7 @@ export function useUpsertUserEmail() {
   const upsertUserEmail = async (email) => {
     try {
       const result = await request({
-        user: {
+        userInput: {
           id: user.id,
           accountId: user.accountId,
           email,

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js

@@ -0,0 +1,120 @@
+import { useParentState } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
+import { Component, h, Host } from "@stencil/core";
+import debugFn from "debug";
+import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
+const debug = debugFn("sq:widget-verification");
+function useTemplateChildren({ parent, callback }) {
+  const parentObserver = new MutationObserver(listenForTemplateChanges);
+  const childTemplateObserver = new MutationObserver(callback);
+  parentObserver.observe(parent, {
+    childList: true,
+    // We only care about immediate children templates
+    subtree: false,
+  });
+  listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
+  function listenForTemplateChanges(mutationList) {
+    var _a;
+    // Be smart, only look at the mutation list
+    (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
+      childTemplateObserver.observe(t.content, {
+        childList: true,
+        attributes: true,
+        // Look deep into the templates for re-rendering
+        subtree: true,
+      });
+    });
+  }
+  return () => {
+    parentObserver.disconnect();
+    childTemplateObserver.disconnect();
+  };
+}
+/**
+ * @uiName Widget Verification Controller
+ * @slots [{"name":"not-verified","title":"Not Verified template"},{"name":"verified","title":"Verified template"}]
+ * @canvasRenderer always-replace
+ * @exampleGroup Widget Verification
+ * @example Widget Verification Controller - <sqm-widget-verification-controller><template slot="not-verified"><sqm-widget-verification></sqm-widget-verification></template><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification-controller>
+ */
+export class WidgetVerificationController {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const [context, setContext] = useParentState({
+      namespace: VERIFICATION_PARENT_NAMESPACE,
+      initialValue: false,
+    });
+    const [container, setContainer] = useState(undefined);
+    const [slot, setSlot] = useState(undefined);
+    const updateTemplates = useCallback(() => {
+      const isAuth = context;
+      const templates = slot.querySelectorAll(`template`);
+      const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
+      if (template) {
+        // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
+        const newContent = template.innerHTML || template.firstElementChild.outerHTML;
+        // if template contents are an exact match
+        if (newContent === container.innerHTML) {
+          debug("don't rerender");
+        }
+        else if (template) {
+          container.innerHTML = newContent;
+        }
+      }
+      const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
+      // if editing in raisins
+      if (plopTargets.length) {
+        const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
+        const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
+        loggedOutPlopTargets.forEach((target, i) => {
+          if (isAuth) {
+            target.style.display = "none";
+            return;
+          }
+          // Place last plop target at the bottom of the parent
+          if (i === loggedOutPlopTargets.length - 1) {
+            target.style.bottom = "0px";
+            target.style.left = "0px";
+            target.style.right = "0px";
+            target.style.position = "absolute";
+          }
+          target.style.height = "25px";
+        });
+        loggedInPlopTargets.forEach((target, i) => {
+          if (!isAuth) {
+            target.style.display = "none";
+            return;
+          }
+          // Place last plop target at the bottom of the parent
+          if (i === loggedInPlopTargets.length - 1) {
+            target.style.bottom = "0px";
+            target.style.left = "0px";
+            target.style.right = "0px";
+            target.style.position = "absolute";
+          }
+          target.style.height = "25px";
+        });
+      }
+    }, [container, slot, context]);
+    useEffect(() => {
+      if (!container || !slot) {
+        debug("DOM not ready:");
+        return;
+      }
+      // Run on first render
+      updateTemplates();
+      return useTemplateChildren({ parent: slot, callback: updateTemplates });
+    }, [slot, container, context]);
+    return (h(Host, null,
+      h("div", { ref: setSlot, style: { display: "contents" } },
+        h("slot", { name: "not-verified" }),
+        h("slot", { name: "verified" })),
+      h("div", { ref: setContainer },
+        h("slot", { name: "shown" }))));
+  }
+  static get is() { return "sqm-widget-verification-controller"; }
+}

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

@@ -1,53 +1,34 @@
-import { useParentState } from "@saasquatch/component-boilerplate";
+import { isDemo, useParentState, useSetParent, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Host, Prop } from "@stencil/core";
-import debugFn from "debug";
-import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
+import { Component, h, Prop } from "@stencil/core";
 import { getProps } from "../../utils/utils";
-const debug = debugFn("sq:widget-verification");
-function useTemplateChildren({ parent, callback }) {
-  const parentObserver = new MutationObserver(listenForTemplateChanges);
-  const childTemplateObserver = new MutationObserver(callback);
-  parentObserver.observe(parent, {
-    childList: true,
-    // We only care about immediate children templates
-    subtree: false,
-  });
-  listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
-  function listenForTemplateChanges(mutationList) {
-    var _a;
-    // Be smart, only look at the mutation list
-    (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
-      childTemplateObserver.observe(t.content, {
-        childList: true,
-        attributes: true,
-        // Look deep into the templates for re-rendering
-        subtree: true,
-      });
-    });
-  }
-  return () => {
-    parentObserver.disconnect();
-    childTemplateObserver.disconnect();
-  };
-}
+import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
+import { useWidgetVerification } from "./useWidgetVerification";
 /**
- * @uiName Widget Verification Gate
- * @slots [{"name":"not-verified","title":"Not verified template"},{"name":"verified","title":"Verified template"}]
- * @canvasRenderer always-replace
+ * @uiName Widget Verification Flow
  * @exampleGroup Widget Verification
- * @example Widget Verification Gate - <sqm-widget-verification><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification>
+ * @example Widget Verification Flow - <sqm-widget-verification></sqm-widget-verification>
  */
 export class WidgetVerification {
-  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                CODE STEP PROPS
-  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   constructor() {
     // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+                    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
@@ -79,8 +60,8 @@ export class WidgetVerification {
      */
     this.emailStep_emailValidationErrorText = "Please enter a valid email";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /**
      * @uiName Verify code widget header text
      * @uiGroup Code Verification Step
@@ -129,94 +110,77 @@ export class WidgetVerification {
     withHooks(this);
   }
   disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = getProps(this);
+    return extractProps(props, prefix);
+  }
   render() {
-    const [context, setContext] = useParentState({
-      namespace: VERIFICATION_PARENT_NAMESPACE,
-      initialValue: false,
-    });
-    const [container, setContainer] = useState(undefined);
-    const [slot, setSlot] = useState(undefined);
-    const updateTemplates = useCallback(() => {
-      const isAuth = context;
-      const templates = slot.querySelectorAll(`template`);
-      const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
-      if (template) {
-        // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
-        const newContent = template.innerHTML || template.firstElementChild.outerHTML;
-        // if template contents are an exact match
-        if (newContent === container.innerHTML) {
-          debug("don't rerender");
-        }
-        else if (template) {
-          container.innerHTML = newContent;
-        }
-      }
-      const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
-      // if editing in raisins
-      if (plopTargets.length) {
-        const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
-        const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
-        loggedOutPlopTargets.forEach((target, i) => {
-          if (isAuth) {
-            target.style.display = "none";
-            return;
-          }
-          // Place last plop target at the bottom of the parent
-          if (i === loggedOutPlopTargets.length - 1) {
-            target.style.bottom = "0px";
-            target.style.left = "0px";
-            target.style.right = "0px";
-            target.style.position = "absolute";
-          }
-          target.style.height = "25px";
-        });
-        loggedInPlopTargets.forEach((target, i) => {
-          if (!isAuth) {
-            target.style.display = "none";
-            return;
-          }
-          // Place last plop target at the bottom of the parent
-          if (i === loggedInPlopTargets.length - 1) {
-            target.style.bottom = "0px";
-            target.style.left = "0px";
-            target.style.right = "0px";
-            target.style.position = "absolute";
-          }
-          target.style.height = "25px";
-        });
-      }
-    }, [container, slot, context]);
-    useEffect(() => {
-      if (!container || !slot) {
-        debug("DOM not ready:");
-        return;
-      }
-      // Run on first render
-      updateTemplates();
-      return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
-    // useEffect(() => {
-    //   const host = useHost();
-    //   const callback = (e: CustomEvent) => {
-    //     e.stopPropagation();
-    //     setContext({ token: e.detail.token });
-    //   };
-    //   host.addEventListener(VERIFICATION_EVENT_KEY, callback);
-    //   return () => {
-    //     host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
-    //   };
-    // }, []);
-    return (h(Host, null,
-      h("div", { ref: setSlot, style: { display: "contents" } },
-        h("template", { slot: "not-verified" },
-          h("sqm-widget-verification-internal", Object.assign({}, getProps(this)))),
-        h("slot", { name: "not-verified" }),
-        h("slot", { name: "verified" })),
-      h("div", { ref: setContainer },
-        h("slot", { name: "shown" }))));
+    const { showCode, onVerification, loading } = isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerification();
+    if (loading)
+      return h("sl-spinner", null);
+    const generalText = this.getStepTextProps("general_");
+    return (h("div", null,
+      h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
+      h("p", { style: {
+          color: "var(--sl-color-neutral-500)",
+          fontSize: "var(--sl-font-size-medium)",
+          margin: "0",
+        } }, generalText.verifyEmailDescription),
+      showCode ? (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
   }
   static get is() { return "sqm-widget-verification"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "general_verifyEmailHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General verify widget header text",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_verify-email-header",
+      "reflect": false,
+      "defaultValue": "\"Verify your email\""
+    },
+    "general_verifyEmailDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General verify widget description text",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_verify-email-description",
+      "reflect": false,
+      "defaultValue": "\"To get your cash paid out directly to your bank account, please complete your account setup\""
+    },
     "emailStep_verifyEmailHeaderText": {
       "type": "string",
       "mutable": false,
@@ -555,3 +519,18 @@ export class WidgetVerification {
     }
   }; }
 }
+function useDemoWidgetVerificationInternal() {
+  const [showCode, setShowCode] = useParentState({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = useParentState({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
+}