@saasquatch/mint-components 1.12.0-8 → 1.12.0

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

@@ -1,7 +1,7 @@
-import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
-import { n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
-import './index.module-6c840c4e.js';
-import { a as useRequestRerender } from './re-render-1bcfd0de.js';
+import { h, c as Host, r as registerInstance } from './index-014ddfa3.js';
+import { n as h$1 } from './stencil-hooks.module-576d7f01.js';
+import './index.module-32d2bf62.js';
+import { a as useRequestRerender } from './re-render-6977623c.js';
 
 const TabView = ({}, children) => {
   return h(Host, null, children);

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

@@ -1,9 +1,9 @@
-import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
-import { u as useMemo, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
-import { T } from './index.module-6c840c4e.js';
-import { u as useRerenderListener } from './re-render-1bcfd0de.js';
-import { u as useChildElements } from './useChildElements-fc84e640.js';
+import { h, c as Host, r as registerInstance } from './index-014ddfa3.js';
+import { u as useMemo, f as useEffect, n as h$1 } from './stencil-hooks.module-576d7f01.js';
+import { _ } from './index.module-32d2bf62.js';
 import { g as getProps } from './utils-334c1e34.js';
+import { u as useRerenderListener } from './re-render-6977623c.js';
+import { u as useChildElements } from './useChildElements-dd86d4a4.js';
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
@@ -37,7 +37,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements();
-  const host = T();
+  const host = _();
   const tick = useRerenderListener();
   const tabs = useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")

package/dist/esm/{sqm-text-span-view-8d140661.js → sqm-text-span-view-d6e03f93.js}

@@ -1,4 +1,4 @@
-import { h } from './index-17b4da69.js';
+import { h } from './index-014ddfa3.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {

package/dist/esm/sqm-text-span.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
+import { r as registerInstance, h as h$1 } from './index-014ddfa3.js';
+import { n as h } from './stencil-hooks.module-576d7f01.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
+import { T as TextSpanView } from './sqm-text-span-view-d6e03f93.js';
 
 const Text = class {
   constructor(hostRef) {

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

@@ -0,0 +1,109 @@
+import { r as registerInstance, h as h$1, c as Host } from './index-014ddfa3.js';
+import { b as browser, n as h, k as useState, f as useEffect } from './stencil-hooks.module-576d7f01.js';
+import { C as Cn, u as useCallback } from './index.module-32d2bf62.js';
+import { a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
+
+const debug = 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) {
+    registerInstance(this, hostRef);
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const [context, setContext] = Cn({
+      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$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
+  }
+};
+
+export { WidgetVerificationController as sqm_widget_verification_controller };

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

@@ -1,46 +1,86 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { b as browser, n as h, k as useState, f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
-import { F as Fn, b as useCallback } from './index.module-6c840c4e.js';
+import { r as registerInstance, h as h$1 } from './index-014ddfa3.js';
+import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-576d7f01.js';
+import { d as dist, Q, C as Cn, w as wn, X as Xe, i as isDemo } from './index.module-32d2bf62.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
+import { e as extractProps } from './extractProps-ae1afbb3.js';
+import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 
-const debug = 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 = dist.gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
+      }
+    }
   }
-  return () => {
-    parentObserver.disconnect();
-    childTemplateObserver.disconnect();
+`;
+function useWidgetVerification() {
+  const userIdentity = Q();
+  const [showCode, setShowCode] = Cn({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = Cn({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+  });
+  const setContext = wn(VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = useState(true);
+  const [fetch] = Xe(USER_LOOKUP);
+  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) {
     registerInstance(this, hostRef);
     // ! 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
@@ -72,8 +112,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
@@ -122,85 +162,38 @@ const WidgetVerification = class {
     h(this);
   }
   disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = getProps(this);
+    return extractProps(props, prefix);
+  }
   render() {
-    const [context, setContext] = Fn({
-      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$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("template", { slot: "not-verified" }, h$1("sqm-widget-verification-internal", Object.assign({}, getProps(this)))), h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
+    const { showCode, onVerification, loading } = isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerification();
+    if (loading)
+      return h$1("sl-spinner", null);
+    const generalText = this.getStepTextProps("general_");
+    return (h$1("div", null, h$1("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), h$1("p", { style: {
+        color: "var(--sl-color-neutral-500)",
+        fontSize: "var(--sl-font-size-medium)",
+        margin: "0",
+      } }, generalText.verifyEmailDescription), showCode ? (h$1("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h$1("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
   }
 };
+function useDemoWidgetVerificationInternal() {
+  const [showCode, setShowCode] = Cn({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = Cn({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = wn(VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
+}
 
 export { WidgetVerification as sqm_widget_verification };

package/dist/esm/{stencil-hooks.module-ac12ca1c.js → stencil-hooks.module-576d7f01.js}

@@ -1,4 +1,4 @@
-import { g as getElement, a as getRenderingRef, f as forceUpdate } from './index-17b4da69.js';
+import { g as getElement, a as getRenderingRef, f as forceUpdate } from './index-014ddfa3.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/esm/{useChildElements-fc84e640.js → useChildElements-dd86d4a4.js}

@@ -1,8 +1,8 @@
-import { k as useState, u as useMemo } from './stencil-hooks.module-ac12ca1c.js';
-import { T } from './index.module-6c840c4e.js';
+import { k as useState, u as useMemo } from './stencil-hooks.module-576d7f01.js';
+import { _ } from './index.module-32d2bf62.js';
 
 function useChildElements() {
-  const host = T();
+  const host = _();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/esm/{useInstantAccessRegistration-8b0a4556.js → useInstantAccessRegistration-82ac94b9.js}

@@ -1,13 +1,13 @@
-import { k as useState } from './stencil-hooks.module-ac12ca1c.js';
-import { C as Cn } from './index.module-6c840c4e.js';
+import { k as useState } from './stencil-hooks.module-576d7f01.js';
+import { e as mn } from './index.module-32d2bf62.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import { u as useRegistrationFormState } from './useRegistrationFormState-849e27f7.js';
+import { u as useRegistrationFormState } from './useRegistrationFormState-6e89095a.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();
-  const [request, { loading, errors, data }] = Cn();
+  const [request, { loading, errors, data }] = mn();
   const [error, setError] = useState("");
   const submit = async (event) => {
     var _a;