@saasquatch/mint-components 1.12.0-8 → 1.12.1-0

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

@@ -1,156 +0,0 @@
-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);
-  // // TODO: Need to handle error states for these errors
-  // const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] =
-  //   useCodeVerificationMutation();
-  const { initialized, 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(-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,
-      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

@@ -1,42 +0,0 @@
-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("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 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

@@ -1,91 +0,0 @@
-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",
-  },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
-  },
-  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),
-      text.sendCodeErrorDescription)),
-    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)))))));
-}

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

@@ -1,226 +0,0 @@
-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 Send code to email alert description
-     */
-    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
-    /**
-     * @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.\""
-    },
-    "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 support team.\""
-    },
-    "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

@@ -1,126 +0,0 @@
-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!) {
-    user(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({
-        user: {
-          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(),
-  };
-}