@saasquatch/mint-components 1.11.1-0 → 1.12.0-0

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
+require('./index.module-b8d9d0ba.js');
+const reRender = require('./re-render-5bde3d2e.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const reRender = require('./re-render-5bde3d2e.js');
+const useChildElements = require('./useChildElements-410d2435.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
@@ -41,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module._();
+  const host = index_module.T();
   const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const keys = require('./keys-cff24974.js');
+
+const WidgetVerificationInternal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const userIdentity = index_module.K();
+    const [showCode, setShowCode] = index_module.Fn({
+      namespace: keys.SHOW_CODE_NAMESPACE,
+      initialValue: false,
+    });
+    const [email, setEmail] = index_module.Fn({
+      namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
+      initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+    });
+    if (showCode) {
+      return index.h("sqm-code-verification", null);
+    }
+    return index.h("sqm-email-verification", null);
+  }
+};
+
+exports.sqm_widget_verification_internal = WidgetVerificationInternal;

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

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const keys = require('./keys-cff24974.js');
+
+const debug = stencilHooks_module.browser("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();
+  };
+}
+const WidgetVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const [context, setContext] = index_module.Fn({
+      namespace: keys.VERIFICATION_PARENT_NAMESPACE,
+      initialValue: undefined,
+    });
+    const authToken = context === null || context === void 0 ? void 0 : context.token;
+    const [container, setContainer] = stencilHooks_module.useState(undefined);
+    const [slot, setSlot] = stencilHooks_module.useState(undefined);
+    if (!authToken)
+      debug("No user identity available");
+    const updateTemplates = index_module.useCallback(() => {
+      const isAuth = !!authToken;
+      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, authToken]);
+    stencilHooks_module.useEffect(() => {
+      if (!container || !slot) {
+        debug("DOM not ready:");
+        return;
+      }
+      // Run on first render
+      updateTemplates();
+      return useTemplateChildren({ parent: slot, callback: updateTemplates });
+    }, [slot, container, authToken]);
+    stencilHooks_module.useEffect(() => {
+      const host = stencilHooks_module.l();
+      const callback = (e) => {
+        e.stopPropagation();
+        setContext({ token: e.detail.token });
+      };
+      host.addEventListener(keys.VERIFICATION_EVENT_KEY, callback);
+      return () => {
+        host.removeEventListener(keys.VERIFICATION_EVENT_KEY, callback);
+      };
+    }, []);
+    return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("template", { slot: "not-verified" }, index.h("sqm-widget-verification-internal", null)), index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
+  }
+};
+
+exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/{useChildElements-e0d44916.js → useChildElements-410d2435.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 function useChildElements() {
-  const host = index_module._();
+  const host = index_module.T();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/useEmailVerification-30a1c7f6.js

@@ -0,0 +1,75 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const keys = require('./keys-cff24974.js');
+
+const VerificationEmailMutation = index_module.dist.gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+// TODO: Move to component-boilerplate
+function useVerificationEmailMutation() {
+  const user = index_module.K();
+  const [request, { loading, data, errors }] = index_module.xe(VerificationEmailMutation);
+  const sendVerificationEmailMutation = async () => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not send verification email", e);
+      return undefined;
+    }
+  };
+  return [
+    sendVerificationEmailMutation,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = index_module.Mn(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [sendVerificationEmailMutation, { loading, data, errors }] = useVerificationEmailMutation();
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    const formData = e.detail.formData;
+    const toAddress = formData.get("email").toString();
+    const result = await sendVerificationEmailMutation();
+    if (!result || !result.requestUserEmailVerification.success)
+      setError(true);
+    else {
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      error: error && props.errorText,
+      email,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+exports.useVerificationEmailMutation = useVerificationEmailMutation;
+exports.useWidgetEmailVerification = useWidgetEmailVerification;

package/dist/cjs/{useInstantAccessRegistration-bbe746d1.js → useInstantAccessRegistration-ccf81eae.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
+const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);
   const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState();
-  const [request, { loading, errors, data }] = index_module.mn();
+  const [request, { loading, errors, data }] = index_module.Cn();
   const [error, setError] = stencilHooks_module.useState("");
   const submit = async (event) => {
     var _a;

package/dist/cjs/{useReferralTable-a76adb0d.js → useReferralTable-824ac152.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const reRender = require('./re-render-5bde3d2e.js');
+const useChildElements = require('./useChildElements-410d2435.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -245,8 +245,8 @@ const GET_IMPACT_TAX = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.Q();
-  const programIdContext = index_module.H();
+  const user = index_module.K();
+  const programIdContext = index_module.z();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -268,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.L();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.yn(GET_REFERRER_DATA, {
+  const locale = index_module.Q();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.yn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.kn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/cjs/{useRegistrationFormState-876ed65d.js → useRegistrationFormState-f9ce55be.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {
-  const host = index_module._();
+  const host = index_module.T();
   const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/cjs/{utilities-cec9dd36.js → utilities-f7de6c04.js}

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

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "./components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js",
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.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",
@@ -46,8 +47,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-referral-codes/sqm-referral-codes.js",
-    "./components/sqm-pagination/sqm-pagination.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",
@@ -66,7 +66,6 @@
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
-    "./components/sqm-referral-code/sqm-referral-code.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -109,6 +108,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-internal.js",
+    "./components/sqm-widget-verification/sqm-widget-verification.js",
+    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
+    "./components/sqm-widget-verification/sqm-code-verification/sqm-code-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"
   ],
@@ -119,13 +122,6 @@
   },
   "collections": [],
   "bundles": [
-    {
-      "components": [
-        "sqm-pagination",
-        "sqm-referral-code",
-        "sqm-referral-codes"
-      ]
-    },
     {
       "components": [
         "sqm-rewards-table",

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -475,7 +475,7 @@ export class CouponCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -122,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Payout Scroll Button",
+};
+const defaultProps = {
+  payoutSettingsComplete: false,
+};
+export const Default = () => (h("sqm-payout-button-scroll", { demoData: { states: defaultProps } }));
+export const CompletedTaxForm = () => (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,22 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Wrapper: {
+    maxWidth: "200px",
+  },
+  PayoutButtonDescription: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-small)",
+  },
+};
+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", { part: "sqm-base", 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,105 @@
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { getProps } from "../../utils/utils";
+import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Payout Button Scroll
+ */
+export class PayoutButtonScroll {
+  constructor() {
+    this.payoutButtonText = "Payouts & Tax Settings";
+    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 = useDemoPayoutButtonScroll(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": ""
+      },
+      "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": ""
+      },
+      "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 });
+}

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

@@ -0,0 +1,44 @@
+import { gql } from "graphql-request";
+import { useQuery } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+const GET_PAYOUT_DETAILS = gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export function usePayoutButton(props) {
+  const { data, refetch } = useQuery(GET_PAYOUT_DETAILS, {});
+  const [completed, setCompleted] = useState(false);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!data)
+      return;
+    const hasCompleted = (_c = (_b = (_a = data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutAccount;
+    setCompleted(hasCompleted);
+  }, [data]);
+  useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: completed,
+    },
+    text: props.getTextProps(),
+  };
+}