@saasquatch/mint-components 1.13.0-8 → 1.13.0

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

@@ -0,0 +1,301 @@
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
+import { useState, 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";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
+export class WidgetCodeVerification {
+  constructor() {
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyCodeHeaderText = "Enter the code sent to {email} 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";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.codeResentSuccessfullyText = "Another code has been sent to {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} 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\""
+    },
+    "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}\""
+    },
+    "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?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: 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": ""
+      }
+    },
+    "onVerification": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(token: string) => any",
+        "resolved": "(token: string) => any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = useState(false);
+  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  return deepmerge({
+    states: {
+      loading: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: false,
+      verifyFailed: false,
+    },
+    refs: {
+      codeWrapperRef: () => { },
+    },
+    callbacks: {
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,153 @@
+import { useMutation, useParent, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useHost, useState } from "@saasquatch/stencil-hooks";
+import { gql } from "graphql-request";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, } from "../keys";
+import { useVerificationEmail } from "../useVerificationEmail";
+export const VerifyEmailWithCodeMutation = gql `
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(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);
+  const [emailError, setEmailError] = useState(false);
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
+  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.data;
+        if (!input)
+          return;
+        if (idx === codeElements.length - 1) {
+          e.target.value = input.slice(0, 1);
+          return;
+        }
+        if (input.length > 1) {
+          const rest = input.slice(1);
+          e.target.value = input.slice(0, 1);
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
+        }
+        codeElements[idx + 1].focus();
+      });
+    });
+  }, [codeRef]);
+  const reset = () => {
+    setShowCode(false);
+    setValidationError(false);
+  };
+  const resendEmail = async () => {
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
+    }
+    if (emailSent)
+      setEmailResent(true);
+    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}`;
+    });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    setValidationError(false);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
+      reset();
+    }
+    else {
+      setValidationError(true);
+    }
+  };
+  useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
+    // email should already exist if user has completed email-verification
+    if (!email)
+      resendEmail();
+    else
+      setEmailSent(true);
+  }, [initialized]);
+  return {
+    refs: {
+      codeWrapperRef: setCodeRef,
+    },
+    states: {
+      email: verificationEmail,
+      emailResent,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
+      verifyFailed: !!validationError,
+    },
+    callbacks: {
+      resendEmail,
+      submitCode,
+    },
+    text: props.getTextProps(),
+  };
+}

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

@@ -0,0 +1,58 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Widget Email Verification",
+};
+const defaultProps = {
+  email: "",
+  error: false,
+  loading: false,
+  initialLoading: false,
+  sendCodeError: false,
+};
+export const Default = () => (h("sqm-email-verification", { demoData: {} }));
+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,
+      initialLoading: true,
+    },
+  } }));
+export const SaveLoading = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      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,
+      error: true,
+    },
+  } }));
+export const SendCodeError = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      sendCodeError: true,
+    },
+  } }));

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

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { intl } from "../../../global/global";
+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",
+  },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "&::part(message)": {},
+  },
+  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.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("b", null, text.sendCodeErrorHeader),
+      h("br", null),
+      intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
+    states.initialLoading ? (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", disabled: !!states.email || states.loading }, (states.error
+            ? {
+              class: sheet.classes.ErrorInput,
+              helpText: text.emailValidationErrorText,
+            }
+            : {}))),
+          h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
+}