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

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

@@ -0,0 +1,330 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../../utils/utils";
+import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
+import { useWidgetCodeVerification } from "./useCodeVerification";
+export class WidgetCodeVerification {
+  constructor() {
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyCodeHeaderText = "Enter the code sent to email@example.com from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     */
+    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     */
+    this.resendCodeLabel = "Resend code";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code link
+     */
+    // AL: TODO connect route to resend verification code
+    this.resendCodeLink = "/resend-code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Link text displayed under the verify button
+     * @uiName Use different email text
+     */
+    this.useDifferentEmailText = "Use a different email";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     */
+    this.invalidCodeText = " Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     */
+    this.verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoWidgetCodeVerification(this)
+      : useWidgetCodeVerification(this);
+    return h(WidgetCodeVerificationView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-code-verification"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "verifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-code-header-text",
+      "reflect": false,
+      "defaultValue": "\"Enter the code sent to email@example.com from our referral provider, impact.com.\""
+    },
+    "reverifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reverify code widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reverify-code-header-text",
+      "reflect": false,
+      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
+    },
+    "resendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code text",
+            "name": "uiName"
+          }],
+        "text": "Text displayed under verify button"
+      },
+      "attribute": "resend-code-text",
+      "reflect": false,
+      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
+    },
+    "resendCodeLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code label",
+            "name": "uiName"
+          }],
+        "text": "The link that appears in the resend code link"
+      },
+      "attribute": "resend-code-label",
+      "reflect": false,
+      "defaultValue": "\"Resend code\""
+    },
+    "resendCodeLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code link",
+            "name": "uiName"
+          }],
+        "text": "The link that appears in the resend code link"
+      },
+      "attribute": "resend-code-link",
+      "reflect": false,
+      "defaultValue": "\"/resend-code\""
+    },
+    "codeResentSuccessfullyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code text",
+            "name": "uiName"
+          }],
+        "text": "Link text displayed under verify button"
+      },
+      "attribute": "code-resent-successfully-text",
+      "reflect": false,
+      "defaultValue": "\"Another code has been sent to {email}\""
+    },
+    "useDifferentEmailText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Use different email text",
+            "name": "uiName"
+          }],
+        "text": "Link text displayed under the verify button"
+      },
+      "attribute": "use-different-email-text",
+      "reflect": false,
+      "defaultValue": "\"Use a different email\""
+    },
+    "invalidCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Invalid code text",
+            "name": "uiName"
+          }],
+        "text": "Error text displayed under verification input"
+      },
+      "attribute": "invalid-code-text",
+      "reflect": false,
+      "defaultValue": "\" Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
+    },
+    "verifyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-text",
+      "reflect": false,
+      "defaultValue": "\"Verify\""
+    },
+    "networkErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Network error message",
+            "name": "uiName"
+          }],
+        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
+      },
+      "attribute": "network-error-message",
+      "reflect": false,
+      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<WidgetCodeVerificationViewProps>",
+        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; codeResent?: boolean; }; refs?: { codeWrapperRef: any; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../../global/demo"
+          },
+          "WidgetCodeVerificationViewProps": {
+            "location": "import",
+            "path": "./sqm-code-verification-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoWidgetCodeVerification(props) {
+  return deepmerge({
+    states: {
+      loading: false,
+      email: "",
+      verifyFailed: false,
+    },
+    refs: {
+      codeWrapperRef: () => { },
+    },
+    callbacks: {
+      submitCode: async () => { },
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/useCodeVerification.js

@@ -0,0 +1,144 @@
+import { useMutation, useParent, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useHost, useState } from "@saasquatch/stencil-hooks";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_EVENT_KEY, } from "../keys";
+import { useVerificationEmailMutation } from "../sqm-email-verification/useEmailVerification";
+import { gql } from "graphql-request";
+// TODO: Move to component-boilerplate
+export const VerifyEmailWithCodeMutation = gql `
+  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
+    verifyUserEmail(user: $user, code: $code) {
+      verifiedEmail
+      accessKey
+    }
+  }
+`;
+export function useCodeVerificationMutation() {
+  const user = useUserIdentity();
+  const [request, { loading, data, errors }] = useMutation(VerifyEmailWithCodeMutation);
+  const verifyUserWithCodeMutation = async (code) => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+        code,
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Failed to verify user", e);
+      return null;
+    }
+  };
+  return [verifyUserWithCodeMutation, { loading, data, errors }];
+}
+export function useWidgetCodeVerification(props) {
+  const host = useHost();
+  const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
+  const email = useParentValue(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailSent, setEmailSent] = useState(false);
+  const [emailResent, setEmailResent] = useState(false);
+  const [codeRef, setCodeRef] = useState(null);
+  const [validationError, setValidationError] = useState(false);
+  // TODO: Need to handle error states for these errors
+  const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] = useCodeVerificationMutation();
+  const [request, { loading: resendLoading, data, errors: resendErrors }] = useVerificationEmailMutation();
+  useEffect(() => {
+    if (!codeRef)
+      return;
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    codeElements.forEach((element, idx) => {
+      element.addEventListener("focus", (e) => {
+        e.target.select();
+      });
+      element.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && e.target.value === "") {
+          codeElements[Math.max(0, idx - 1)].focus();
+        }
+      });
+      element.addEventListener("input", (e) => {
+        const input = e.target.value;
+        if (!input)
+          return;
+        if (idx === codeElements.length - 1) {
+          e.target.value = input.slice(-1);
+          return;
+        }
+        if (input.length > 1) {
+          const rest = input.slice(1);
+          e.target.value = input.slice(0, 1);
+          codeElements[idx + 1].value = rest;
+          codeElements[idx + 1].dispatchEvent(new Event("input"));
+        }
+        codeElements[idx + 1].focus();
+      });
+    });
+  }, [codeRef]);
+  const reset = () => {
+    setShowCode(false);
+    setValidationError(false);
+  };
+  const resendEmail = async () => {
+    // TODO: Error checks, depends on what mutation is set up as
+    const result = await request();
+    if (emailSent) {
+      setEmailResent(true);
+      setTimeout(() => {
+        setEmailResent(false);
+      }, 500);
+    }
+    setEmailSent(true);
+  };
+  const submitCode = async () => {
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    if (codeElements.find((el) => !el.value)) {
+      setValidationError(true);
+      return;
+    }
+    let code = "";
+    codeElements.forEach((element) => {
+      code = `${code}${element.value}`;
+    });
+    setValidationError(false);
+    // Only 123456 passes for a valid code rn
+    const res = await verifyUser(code);
+    if (res) {
+      const event = new CustomEvent(VERIFICATION_EVENT_KEY, {
+        detail: { token: res.verifyUserEmail.accessKey },
+        composed: true,
+        bubbles: true,
+      });
+      host.dispatchEvent(event);
+      reset();
+    }
+    else {
+      setValidationError(true);
+    }
+  };
+  useEffect(() => {
+    // email should already exist if user has completed email-verification
+    if (!email)
+      resendEmail();
+  }, []);
+  return {
+    refs: {
+      codeWrapperRef: setCodeRef,
+    },
+    states: {
+      email,
+      emailResent,
+      loading: verifyLoading || resendLoading,
+      verifyFailed: !!validationError,
+    },
+    callbacks: {
+      resendEmail,
+      submitCode,
+    },
+    text: props.getTextProps(),
+  };
+}

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Email Verification",
+};
+const defaultProps = {
+  email: "",
+  error: "",
+  loading: false,
+};
+export const Default = () => (h("sqm-email-verification", { demoData: {} }));
+export const Loading = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      loading: true,
+    },
+  } }));
+export const Error = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      error: "Email is invalid",
+    },
+  } }));

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

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+const style = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+    maxWidth: "320px",
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+  ErrorInput: {
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function WidgetEmailVerificationView(props) {
+  const { states, callbacks, text } = props;
+  const renderLoadingSkeleton = () => {
+    return (h("div", { class: sheet.classes.Wrapper },
+      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+  };
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
+      " ",
+      h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
+      h("sl-form", { "onSl-submit": callbacks.submitEmail },
+        h("div", { class: sheet.classes.InputsContainer },
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", required: true }, (states.error
+            ? {
+              class: sheet.classes.ErrorInput,
+              helpText: "Please enter a valid email",
+            }
+            : {}))),
+          h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
+}