@saasquatch/mint-components 1.13.0-9 → 1.13.0

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

@@ -0,0 +1,251 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { useWidgetEmailVerification } from "./useEmailVerification";
+import { WidgetEmailVerificationView, } from "./sqm-email-verification-view";
+import { getProps } from "../../../utils/utils";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
+import deepmerge from "deepmerge";
+import { SHOW_CODE_NAMESPACE } from "../keys";
+/**
+ * @uiName Widget Verification Gate
+ */
+export class WidgetEmailVerification {
+  constructor() {
+    /**
+     * @uiName Verify email widget header text
+     */
+    this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     */
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
+    /**
+     * @uiName Send code to email alert description
+     */
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
+    /**
+     * @uiName Email input label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     */
+    this.sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     */
+    this.emailValidationErrorText = "Please enter a valid email";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoWidgetEmailVerification(this)
+      : useWidgetEmailVerification(this);
+    return h(WidgetEmailVerificationView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-email-verification"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-email-header-text",
+      "reflect": false,
+      "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
+    },
+    "sendCodeErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code to email alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "send-code-error-header",
+      "reflect": false,
+      "defaultValue": "\"There was an error sending your code\""
+    },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
+    "sendCodeErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code to email alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "send-code-error-description",
+      "reflect": false,
+      "defaultValue": "\"Please try again. If this problem continues, contact our program {supportLink}.\""
+    },
+    "emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email input label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-label",
+      "reflect": false,
+      "defaultValue": "\"Email\""
+    },
+    "sendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "send-code-text",
+      "reflect": false,
+      "defaultValue": "\"Send code\""
+    },
+    "emailValidationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-validation-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please enter a valid email\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<WidgetEmailVerificationViewProps>",
+        "resolved": "{ states?: { error: boolean; initialLoading: boolean; loading: boolean; email: string; sendCodeError: boolean; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../../global/demo"
+          },
+          "WidgetEmailVerificationViewProps": {
+            "location": "import",
+            "path": "./sqm-email-verification-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoWidgetEmailVerification(props) {
+  const setShowCode = useSetParent(SHOW_CODE_NAMESPACE);
+  return deepmerge({
+    states: {
+      error: true,
+      initialLoading: false,
+      loading: false,
+      email: "test@example.com",
+      sendCodeError: true,
+    },
+    callbacks: {
+      submitEmail: async () => setShowCode(true),
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,126 @@
+import { useMutation, useParent, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
+import { useVerificationEmail } from "../useVerificationEmail";
+export const UpsertUserEmailMutation = gql `
+  mutation upsertUser($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+export const UserLookupQuery = gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+export function useUpsertUserEmail() {
+  const user = useUserIdentity();
+  const [request, { loading: loading, data, errors }] = useMutation(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
+    try {
+      const result = await request({
+        userInput: {
+          id: user.id,
+          accountId: user.accountId,
+          email,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not set email on user", e);
+      return undefined;
+    }
+  };
+  return [
+    upsertUserEmail,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+export function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
+  const [error, setError] = useState(false);
+  const [mutationError, setMutationError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = useState(true);
+  const { data, loading: initialLoading } = useQuery(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
+    else {
+      // This is used to let the code verification widget know an email was already sent
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+    setLoading(false);
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}

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

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