@saasquatch/mint-components 1.13.0-9 → 1.13.0

package/dist/cjs/usePortalLogin-63d896d1.js

@@ -0,0 +1,74 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const utils = require('./utils-6847bc06.js');
+
+function usePortalLogin(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  const [request, { loading, errors, data }] = index_module.je();
+  const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = index_module.hn();
+  const [error, setError] = stencilHooks_module.useState("");
+  const urlParams = new URLSearchParams(index_module.jn.location.search);
+  const nextPageOverride = urlParams.get("nextPage");
+  const googleSubmit = async (e) => {
+    var _a, _b, _c, _d;
+    if (!((_a = e.detail) === null || _a === void 0 ? void 0 : _a.credential))
+      return;
+    const result = await loginWithGoogle({ idToken: e.detail.credential });
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_b = result === null || result === void 0 ? void 0 : result["response"]) === null || _b === void 0 ? void 0 : _b["error"]))
+        if ((_c = result === null || result === void 0 ? void 0 : result["response"]) === null || _c === void 0 ? void 0 : _c["errors"].some((error) => { var _a; return ((_a = error === null || error === void 0 ? void 0 : error["extensions"]) === null || _a === void 0 ? void 0 : _a["message"]) === "Invalid Credentials."; })) {
+          setError(props.googleUserNotRegisteredError);
+        }
+        else {
+          setError(props.networkErrorMessage);
+        }
+      return;
+    }
+    if ((_d = result.authenticateManagedIdentityWithGoogle) === null || _d === void 0 ? void 0 : _d.token) {
+      urlParams.delete("nextPage");
+      const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+      index_module.jn.push(url.href);
+    }
+  };
+  const submit = async (event) => {
+    var _a, _b;
+    setError("");
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.jsonpointer.set(formData, key, value);
+    });
+    const variables = { email: formData.email, password: formData.password };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_a = result === null || result === void 0 ? void 0 : result["response"]) === null || _a === void 0 ? void 0 : _a["error"]))
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_b = result.authenticateManagedIdentityWithEmailAndPassword) === null || _b === void 0 ? void 0 : _b.token) {
+      urlParams.delete("nextPage");
+      const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+      index_module.jn.push(url.href);
+    }
+  };
+  const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+    error;
+  const googleErrorMessage = ((_l = (_k = (_j = (_h = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.extensions) === null || _l === void 0 ? void 0 : _l.message) || ((_p = (_o = (_m = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _m === void 0 ? void 0 : _m.errors) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.message) ||
+    error;
+  return {
+    states: {
+      loading: loading || gLoading,
+      error: errorMessage || googleErrorMessage,
+      registerPath: props.registerPath,
+      forgotPasswordPath: props.forgotPasswordPath,
+    },
+    callbacks: {
+      googleSubmit,
+      submit,
+    },
+  };
+}
+
+exports.usePortalLogin = usePortalLogin;

package/dist/cjs/{usePortalRegistrationForm-a89d736e.js → usePortalRegistrationForm-f25d89e7.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-57703088.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
+const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `

package/dist/cjs/{useReferralTable-283d2316.js → useReferralTable-7c3f9600.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-57703088.js');
-const reRender = require('./re-render-35b016ed.js');
-const useChildElements = require('./useChildElements-854cd1e5.js');
+const index_module = require('./index.module-ee84433d.js');
+const reRender = require('./re-render-b324deab.js');
+const useChildElements = require('./useChildElements-1b35d945.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";

package/dist/cjs/{useRegistrationFormState-986b5ea1.js → useRegistrationFormState-7b820f0c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-57703088.js');
+const index_module = require('./index.module-ee84433d.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-95a82767.js

@@ -0,0 +1,173 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+
+const UserLookupQuery = index_module.dist.gql `
+  query userLookup {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+const ParticipantVerificationEmailMutation = index_module.dist.gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+const ImpactVerificationEmailMutation = index_module.dist.gql `
+  mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
+    requestImpactPublisherEmail2FA(user: $user) {
+      success
+    }
+  }
+`;
+const VerifyUserEmailMutation = index_module.dist.gql `
+  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
+    verifyUserEmail(user: $user, code: $code) {
+      id
+      accountId
+      email
+      emailVerified
+    }
+  }
+`;
+const SubmitImpactCodeMutation = index_module.dist.gql `
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
+      verifiedEmail
+      accessKey
+    }
+  }
+`;
+// ! It's important when using this hook to ensure initialisation
+// ! is done before calling any mutations
+function useVerificationEmail() {
+  const userIdentity = index_module.J();
+  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
+  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
+    participant: false,
+    impact: false,
+  });
+  const [fetch] = index_module.Xe(UserLookupQuery);
+  // Send mutations
+  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = index_module.$e(ParticipantVerificationEmailMutation);
+  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = index_module.$e(ImpactVerificationEmailMutation);
+  const sendLoading = participantEmailLoading || impactEmailLoading;
+  const sendErrors = participantEmailErrors || impactEmailErrors;
+  // Verification mutations
+  const [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = index_module.$e(VerifyUserEmailMutation);
+  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.$e(SubmitImpactCodeMutation);
+  const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
+  const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
+  const [initialized, setInitialized] = stencilHooks_module.useState(false);
+  const initialise = async () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    try {
+      const lookup = await fetch({});
+      if (!lookup || lookup instanceof Error)
+        throw new Error();
+      setHasEmails({
+        participant: !!((_a = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _a === void 0 ? void 0 : _a.email),
+        impact: !!((_d = (_c = (_b = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.email),
+      });
+      setVerificationEmail(((_g = (_f = (_e = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user) === null || _g === void 0 ? void 0 : _g.email) || ((_h = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _h === void 0 ? void 0 : _h.email) ||
+        null);
+      setInitialized(true);
+    }
+    catch (e) {
+      console.error("Could not initialise verification", e);
+    }
+  };
+  const sendVerificationEmail = async () => {
+    let result = null;
+    if (!initialized)
+      return result;
+    if (!hasEmails.participant && !hasEmails.impact)
+      return result;
+    try {
+      const request = hasEmails.impact ? sendImpactEmail : sendParticipantEmail;
+      const res = await request({
+        user: {
+          id: userIdentity.id,
+          accountId: userIdentity.accountId,
+        },
+      });
+      if (res instanceof Error || !res)
+        throw new Error();
+      result = hasEmails.impact
+        ? res.requestImpactPublisherEmail2FA
+        : res.requestUserEmailVerification;
+    }
+    catch (e) {
+      console.error("Could not send verification email", e);
+    }
+    finally {
+      return result;
+    }
+  };
+  const verifyVerificationEmail = async (code) => {
+    var _a;
+    let result = null;
+    if (!initialized)
+      return result;
+    if (!hasEmails.participant && !hasEmails.impact)
+      return result;
+    try {
+      const request = hasEmails.impact ? submitImpactCode : verifyUserEmail;
+      const res = await request({
+        user: {
+          id: userIdentity.id,
+          accountId: userIdentity.accountId,
+        },
+        code,
+      });
+      if (res instanceof Error || !res)
+        throw new Error();
+      result = {
+        success: true,
+        accessKey: hasEmails.impact
+          ? (_a = res.submitImpactPublisherEmail2FACode) === null || _a === void 0 ? void 0 : _a.accessKey : undefined,
+      };
+    }
+    catch (e) {
+      console.error("Could not verify email", e);
+    }
+    finally {
+      return result;
+    }
+  };
+  stencilHooks_module.useEffect(() => {
+    if (!initialized)
+      initialise();
+  }, []);
+  return {
+    initialized,
+    verificationEmail,
+    send: [
+      sendVerificationEmail,
+      { loading: sendLoading, errors: sendErrors },
+    ],
+    verify: [
+      verifyVerificationEmail,
+      { loading: verifyLoading, errors: verifyErrors },
+    ],
+  };
+}
+
+exports.useVerificationEmail = useVerificationEmail;

package/dist/cjs/{utilities-c135f16f.js → utilities-78f5e169.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-57703088.js');
+const index_module = require('./index.module-ee84433d.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "./components/sqm-referral-codes/sqm-referral-codes.js",
     "./components/sqm-pagination/sqm-pagination.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",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
     "./components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js",
@@ -49,6 +50,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-payout-button-scroll/sqm-payout-button-scroll.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
     "./components/sqm-portal-change-password/sqm-portal-change-password.js",
     "./components/sqm-portal-container/sqm-portal-container.js",
@@ -56,9 +58,10 @@
     "./components/sqm-portal-footer/sqm-portal-footer.js",
     "./components/sqm-portal-forgot-password/sqm-portal-forgot-password.js",
     "./components/sqm-portal-frame/sqm-portal-frame.js",
+    "./components/sqm-portal-login/sqm-portal-login.js",
+    "./components/sqm-portal-google-login/sqm-portal-google-login.js",
     "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
     "./components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js",
-    "./components/sqm-portal-login/sqm-portal-login.js",
     "./components/sqm-portal-logout/sqm-portal-logout.js",
     "./components/sqm-portal-profile/sqm-portal-profile.js",
     "./components/sqm-portal-protected-route/sqm-portal-protected-route.js",
@@ -111,6 +114,10 @@
     "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
     "./components/sqm-user-name/sqm-user-name.js",
+    "./components/sqm-widget-verification/sqm-widget-verification-controller.js",
+    "./components/sqm-widget-verification/sqm-widget-verification.js",
+    "./components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js",
+    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
     "./components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js",
     "./components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js"
   ],

package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js

@@ -3,7 +3,7 @@ import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock,
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
-  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Wrapper: AuthWrapper,
   Column: AuthColumn,
   HostBlock: HostBlock,
   ":host": {

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -709,9 +709,12 @@ const payoutBalanceQuery = () => {
       query payoutBalance {
         viewer: viewer {
           ... on User {
-            publisher {
-              payoutsAccount {
-                balance
+            id
+            impactConnection {
+              publisher {
+                payoutsAccount {
+                  balance
+                }
               }
             }
           }

package/dist/collection/components/sqm-google-sign-in/sqm-google-sign-in.js

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { useEffect, useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Event, h, Prop } from "@stencil/core";
+import { Component, Event, h, Prop, Element, } from "@stencil/core";
 import { useGoogleSignIn } from "./useGoogleSignIn";
 /**
  * @uiName Google Sign-In Button
@@ -9,6 +9,7 @@ import { useGoogleSignIn } from "./useGoogleSignIn";
  */
 export class GoogleSignIn {
   constructor() {
+    this.googleButtonDiv = null;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -25,14 +26,7 @@ export class GoogleSignIn {
     const { setGoogleButtonDiv } = isDemo()
       ? useDemoGoogleSignIn(this)
       : useGoogleSignIn(this);
-    console.log(setGoogleButtonDiv);
-    return (h("div", null,
-      h("style", null, `
-          #googleSignIn {
-            max-width: 402px;
-            width: 100%
-          }`),
-      h("div", { id: "googleSignIn", ref: setGoogleButtonDiv })));
+    return (h("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
   }
   static get is() { return "sqm-google-sign-in"; }
   static get encapsulation() { return "shadow"; }
@@ -56,6 +50,26 @@ export class GoogleSignIn {
       },
       "attribute": "text",
       "reflect": false
+    },
+    "googleButtonDiv": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement | null",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{
@@ -74,6 +88,7 @@ export class GoogleSignIn {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
 }
 function useDemoGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);
@@ -105,7 +120,6 @@ function useDemoGoogleSignIn(props) {
     google.accounts.id.renderButton(googleButtonDiv, {
       theme: "outline",
       size: "large",
-      width: 400,
       text: props.text,
       click_listener: cb,
     });

package/dist/collection/components/sqm-google-sign-in/useGoogleSignIn.js

@@ -3,6 +3,31 @@ import { useState, useEffect } from "@saasquatch/stencil-hooks";
 export function useGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);
   const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
+  const [buttonWidth, setButtonWidth] = useState(400);
+  let timeoutId = null;
+  // Update the width based on the container's size
+  const updateWidth = () => {
+    if (googleButtonDiv) {
+      setButtonWidth(googleButtonDiv.clientWidth);
+    }
+  };
+  useEffect(() => {
+    if (!googleButtonDiv)
+      return;
+    // Create a ResizeObserver to track width changes
+    const resizeObserver = new ResizeObserver(() => {
+      // Mimic debounce for efficiency
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        updateWidth();
+      }, 50);
+    });
+    resizeObserver.observe(googleButtonDiv);
+    updateWidth();
+    return () => resizeObserver.disconnect();
+  }, [googleButtonDiv]);
   useEffect(() => {
     const cb = () => {
       // @ts-expect-error
@@ -30,33 +55,15 @@ export function useGoogleSignIn(props) {
   useEffect(() => {
     if (!googleButtonDiv || !loaded)
       return;
-    let googleSignInContainer = document.getElementById("googleSignIn");
-    let renderGoogleTimeout;
-    const renderGoogleButton = () => {
-      if (googleSignInContainer) {
-        googleSignInContainer.innerHTML = ""; // clear contents of Google button container
-        let w = googleSignInContainer.offsetWidth; // get current container's width
-        //@ts-expect-error
-        google.accounts.id.renderButton(googleButtonDiv, {
-          theme: "outline",
-          size: "large",
-          width: w,
-          text: props.text,
-        });
-      }
-    };
-    renderGoogleButton();
-    const handleResize = () => {
-      clearTimeout(renderGoogleTimeout);
-      renderGoogleTimeout = setTimeout(renderGoogleButton, 100);
-    };
-    window.addEventListener("resize", handleResize);
-    // Cleanup function to remove the event listener and clear the timeout
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      clearTimeout(renderGoogleTimeout);
-    };
-  }, [googleButtonDiv, loaded]);
+    //@ts-expect-error
+    google.accounts.id.renderButton(googleButtonDiv, {
+      theme: "outline",
+      size: "large",
+      text: props.text,
+      height: 40,
+      width: buttonWidth,
+    });
+  }, [googleButtonDiv, loaded, buttonWidth]);
   return {
     setGoogleButtonDiv,
   };

package/dist/collection/components/sqm-payout-button-scroll/PayoutButtonScroll.stories.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Payout Scroll Button",
+};
+const defaultProps = {
+  payoutSettingsComplete: true,
+};
+export const CompletedTaxForm = () => (h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps, payoutSettingsComplete: true } } }));
+export const CompletedTaxFormWithStatsContainer = () => (h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
+  h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
+      h("p", null, "Cash Balance"))),
+  h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps, payoutSettingsComplete: true } } })));

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Wrapper: {
+    maxWidth: "200px",
+    marginLeft: "auto",
+  },
+  PayoutButtonDescription: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PayoutButtonScrollView(props) {
+  const { text, states } = props;
+  if (!states.payoutSettingsComplete)
+    return h("div", null);
+  return (h("div", { class: sheet.classes.Wrapper },
+    h("style", { type: "text/css" }, styleString),
+    h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
+    h("p", { class: sheet.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+}

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js

@@ -0,0 +1,122 @@
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { getProps } from "../../utils/utils";
+import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
+import deepmerge from "deepmerge";
+import { usePayoutButton } from "./usePayoutButton";
+/**
+ * @uiName Payout Button Scroll
+ */
+export class PayoutButtonScroll {
+  constructor() {
+    /**
+     * @uiName Payout button text
+     */
+    this.payoutButtonText = "Payouts & Tax Settings";
+    /**
+     * Description text under payout button
+     * @uiName Payout button description text
+     */
+    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
+    return h(PayoutButtonScrollView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-payout-button-scroll"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "payoutButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "payout-button-text",
+      "reflect": false,
+      "defaultValue": "\"Payouts & Tax Settings\""
+    },
+    "payoutButtonDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Payout button description text",
+            "name": "uiName"
+          }],
+        "text": "Description text under payout button"
+      },
+      "attribute": "payout-button-description",
+      "reflect": false,
+      "defaultValue": "\"Check your payout settings to see when you\u2019ll get paid out next\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PayoutButtonScrollViewProps>",
+        "resolved": "{ states?: { payoutSettingsComplete: boolean; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "PayoutButtonScrollViewProps": {
+            "location": "import",
+            "path": "./sqm-payout-button-scroll-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useDemoPayoutButtonScroll(props) {
+  return deepmerge({
+    states: {
+      payoutSettingsComplete: false,
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}