@saasquatch/mint-components 1.12.0-15 → 1.12.0-20

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -1724,7 +1724,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
 const style$2 = {
   Wrapper: {
     maxWidth: "200px",
-    border: "1px solid black",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -1738,7 +1738,7 @@ function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return index.h("div", null);
-  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
+  return (index.h("div", { class: sheet$2.classes.Wrapper },
     index.h("style", { type: "text/css" }, styleString$2),
     index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
     index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));

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

@@ -121,7 +121,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/cjs/{sqm-invoice-table-view-b0602970.js → sqm-invoice-table-view-4fcf021f.js}

@@ -709,6 +709,7 @@ const stepFourProps = {
     saveDisabled: false,
     thresholds: [],
     loadingError: false,
+    email: "test@example.com",
     formState: {
       paymentMethodChecked: "toBankAccount",
     },

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

@@ -30,7 +30,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-b0602970.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-4fcf021f.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -14417,6 +14417,7 @@ const bankingFormProps = {
     thresholds: [],
     currency: "USD",
     loadingError: false,
+    email: "test@example.com",
   },
   callbacks: {
     onVerificationHide: () => { },
@@ -14730,6 +14731,22 @@ const BankingInfoFormWithFixedDayPaymentScheduleLoading = () => {
       },
     } }));
 };
+const BankingInfoFormVerififyIdentityModal = () => {
+  return (index.h("sqm-banking-info-form", { demoData: {
+      ...bankingFormProps,
+      states: {
+        ...bankingFormProps.states,
+        isPartner: true,
+        showVerification: true,
+        formState: {
+          ...bankingFormProps.states.formState,
+          bankCountry: "US",
+          paymentScheduleChecked: "FIXED_DAY",
+        },
+        currency: "USD",
+      },
+    } }));
+};
 
 const BankingInfoForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14755,7 +14772,8 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
   BankingInfoFormWithBalanceThresholdPaymentScheduleLoading: BankingInfoFormWithBalanceThresholdPaymentScheduleLoading,
   BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
   BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
-  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading
+  BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
+  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
 });
 
 const InvoiceTableCell_stories = {
@@ -15014,12 +15032,17 @@ const defaultProps$k = {
   sendCodeError: false,
 };
 const Default$i = () => (index.h("sqm-email-verification", { demoData: {} }));
-const EmailIsPrefilled = () => (index.h("sqm-email-verification", { demoData: {
-    states: {
-      ...defaultProps$k,
-      email: "test@example.com",
-    },
-  } }));
+const EmailIsPrefilled = () => (index.h("div", null,
+  index.h("sqm-text", null,
+    index.h("h4", null, "Verify your email")),
+  index.h("sqm-text", null,
+    index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  index.h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps$k,
+        email: "test@example.com",
+      },
+    } })));
 const Loading$7 = () => (index.h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$k,
@@ -15032,6 +15055,17 @@ const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
       loading: true,
     },
   } }));
+const WithHeader$1 = () => (index.h("div", null,
+  index.h("sqm-text", null,
+    index.h("h4", null, "Verify your email")),
+  index.h("sqm-text", null,
+    index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
+  index.h("sqm-email-verification", { demoData: {
+      states: {
+        ...defaultProps$k,
+        email: "test@example.com",
+      },
+    } })));
 const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$k,
@@ -15052,6 +15086,7 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
   EmailIsPrefilled: EmailIsPrefilled,
   Loading: Loading$7,
   SaveLoading: SaveLoading,
+  WithHeader: WithHeader$1,
   InvalidEmail: InvalidEmail,
   SendCodeError: SendCodeError
 });

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

@@ -0,0 +1,113 @@
+'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 WidgetVerificationController = 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: false,
+    });
+    const [container, setContainer] = stencilHooks_module.useState(undefined);
+    const [slot, setSlot] = stencilHooks_module.useState(undefined);
+    const updateTemplates = index_module.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]);
+    stencilHooks_module.useEffect(() => {
+      if (!container || !slot) {
+        debug("DOM not ready:");
+        return;
+      }
+      // Run on first render
+      updateTemplates();
+      return useTemplateChildren({ parent: slot, callback: updateTemplates });
+    }, [slot, container, context]);
+    return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, 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_controller = WidgetVerificationController;

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

@@ -7,44 +7,70 @@ const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 const index_module = require('./index.module-b8d9d0ba.js');
 const utils = require('./utils-6847bc06.js');
 const keys = require('./keys-cff24974.js');
+const extractProps = require('./extractProps-fd93ba62.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,
-      });
-    });
+const USER_LOOKUP = index_module.dist.gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
+      }
+    }
   }
-  return () => {
-    parentObserver.disconnect();
-    childTemplateObserver.disconnect();
+`;
+function useWidgetVerificationInternal() {
+  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,
+  });
+  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = stencilHooks_module.useState(true);
+  const [fetch] = index_module.an(USER_LOOKUP);
+  stencilHooks_module.useEffect(() => {
+    const checkUser = async () => {
+      var _a, _b, _c;
+      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)
+          setContext(true);
+      }
+      catch (e) {
+        console.error("Could not fetch user information:", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setContext(true);
   };
+  return { showCode, onVerification, loading };
 }
 const WidgetVerification = class {
-  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                CODE STEP PROPS
-  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /**
      * @uiName Verify email widget header text
      * @uiGroup Email Verification Step
@@ -76,8 +102,8 @@ const WidgetVerification = class {
      */
     this.emailStep_emailValidationErrorText = "Please enter a valid email";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
     /**
      * @uiName Verify code widget header text
      * @uiGroup Code Verification Step
@@ -126,85 +152,37 @@ const WidgetVerification = class {
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = utils.getProps(this);
+    return extractProps.extractProps(props, prefix);
+  }
   render() {
-    const [context, setContext] = index_module.Fn({
-      namespace: keys.VERIFICATION_PARENT_NAMESPACE,
-      initialValue: false,
-    });
-    const [container, setContainer] = stencilHooks_module.useState(undefined);
-    const [slot, setSlot] = stencilHooks_module.useState(undefined);
-    const updateTemplates = index_module.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]);
-    stencilHooks_module.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 (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", Object.assign({}, utils.getProps(this)))), index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
+    const { showCode, onVerification, loading } = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerificationInternal();
+    // TODO: Shoelace spinner is throwing errors
+    if (loading)
+      return index.h("div", null);
+    if (showCode) {
+      return (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
+    }
+    return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
 };
+function useDemoWidgetVerificationInternal() {
+  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: undefined,
+  });
+  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
+}
 
 exports.sqm_widget_verification = WidgetVerification;

package/dist/collection/collection-manifest.json

@@ -108,7 +108,7 @@
     "./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-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",

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

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Wrapper: {
     maxWidth: "200px",
-    border: "1px solid black",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -17,7 +17,7 @@ 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 },
+  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-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-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,