@saasquatch/mint-components 1.12.0-8 → 1.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.12.0-8",
+  "version": "1.12.0",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -71,12 +71,13 @@
   },
   "dependencies": {
     "@raisins/stencil-docs-target": "^1.1.1",
-    "@saasquatch/component-boilerplate": "^1.6.8-0",
+    "@saasquatch/component-boilerplate": "^1.6.8",
     "@saasquatch/dom-context-hooks": "^1.0.5",
     "@saasquatch/shoelace": "^1.0.0",
     "@saasquatch/stencil-hooks": "^2.0.2",
     "@saasquatch/stencilbook": "^1.1.0",
     "@saasquatch/universal-hooks": "^1.0.0",
+    "@veriff/incontext-sdk": "^2.3.1",
     "babel-polyfill": "^6.26.0",
     "canvas-confetti": "^1.4.0",
     "color2k": "^1.2.4",

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -1,345 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const global = require('./global-c3637175.js');
-const index_module = require('./index.module-b8d9d0ba.js');
-const cjs = require('./cjs-1066ec21.js');
-const mixins = require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const utils = require('./utils-6847bc06.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
-const keys = require('./keys-cff24974.js');
-const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
-
-const style = {
-  Wrapper: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  InputsContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    position: "relative",
-    flexDirection: "column",
-  },
-  CodeInputContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-  },
-  CodeInput: {
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  CodeInputError: {
-    ...mixins.ErrorStyles,
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  ErrorText: {
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-font-size-small)",
-    margin: "0",
-  },
-  ContinueButton: {
-    width: "100%",
-    maxWidth: "100px",
-  },
-  FooterContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  SkeletonOne: {
-    width: "50%",
-    height: "16px",
-  },
-  SkeletonTwo: {
-    width: "30%",
-    height: "34px",
-  },
-  SkeletonThree: {
-    width: "15%",
-    height: "24px",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-
-
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function WidgetCodeVerificationView(props) {
-  const { states, refs, callbacks, text } = props;
-  const resendCodeText = global.intl.formatMessage({
-    id: "resendCodeText",
-    defaultMessage: text.resendCodeText,
-  }, {
-    resendCodeLink: (index.h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
-        e.preventDefault();
-        callbacks.resendEmail();
-      } }, text.resendCodeLabel)),
-  });
-  const codeResentSuccessfully = global.intl.formatMessage({
-    id: "codeResentSuccessfully",
-    defaultMessage: text.codeResentSuccessfullyText,
-  }, {
-    email: states.email,
-  });
-  const inputClass = states.verifyFailed
-    ? sheet.classes.CodeInputError
-    : sheet.classes.CodeInput;
-  return (index.h("div", { part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h("div", { class: sheet.classes.Wrapper },
-      index.h("div", { class: sheet.classes.HeaderContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
-          id: `emailHeaderText`,
-          defaultMessage: states.verifyFailed
-            ? text.reverifyCodeHeaderText
-            : text.verifyCodeHeaderText,
-        }, { email: states.email }))),
-      states.emailResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        index.h("b", null, codeResentSuccessfully))),
-      index.h("div", { class: sheet.classes.InputsContainer },
-        index.h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
-          index.h("sl-input", { class: inputClass, name: "code" }),
-          index.h("sl-input", { class: inputClass, name: "code" }),
-          index.h("sl-input", { class: inputClass, name: "code" }),
-          index.h("sl-input", { class: inputClass, name: "code" }),
-          index.h("sl-input", { class: inputClass, name: "code" }),
-          index.h("sl-input", { class: inputClass, name: "code" })),
-        states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      index.h("div", { class: sheet.classes.FooterContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
-}
-
-const VerifyEmailWithCodeMutation = index_module.dist.gql `
-  mutation submitImpactPublisherEmail2FACode(
-    $user: UserIdInput!
-    $code: String!
-  ) {
-    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
-      verifiedEmail
-      accessKey
-    }
-  }
-`;
-function useWidgetCodeVerification(props) {
-  const host = stencilHooks_module.l();
-  const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
-  const email = index_module.Dn(keys.VERIFICATION_EMAIL_NAMESPACE);
-  const [emailSent, setEmailSent] = stencilHooks_module.useState(false);
-  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
-  const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
-  const [validationError, setValidationError] = stencilHooks_module.useState(false);
-  const [emailError, setEmailError] = stencilHooks_module.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.useVerificationEmail();
-  stencilHooks_module.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);
-    }
-  };
-  stencilHooks_module.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(),
-  };
-}
-
-const WidgetCodeVerification = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @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.";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return utils.getProps(this);
-  }
-  render() {
-    const props = index_module.isDemo()
-      ? useDemoWidgetCodeVerification(this)
-      : useWidgetCodeVerification(this);
-    return index.h(WidgetCodeVerificationView, Object.assign({}, props));
-  }
-};
-function useDemoWidgetCodeVerification(props) {
-  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
-  const setVerifiedContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
-  return cjs.cjs({
-    states: {
-      loading: false,
-      email: "test@example.com",
-      emailResent,
-      resendError: true,
-      verifyFailed: true,
-    },
-    refs: {
-      codeWrapperRef: () => { },
-    },
-    callbacks: {
-      resendEmail: async () => setEmailResent(true),
-      submitCode: async () => setVerifiedContext(true),
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-exports.sqm_code_verification = WidgetCodeVerification;

package/dist/cjs/sqm-widget-verification-internal.cjs.entry.js

@@ -1,103 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
-const utils = require('./utils-6847bc06.js');
-const keys = require('./keys-cff24974.js');
-const extractProps = require('./extractProps-fd93ba62.js');
-
-const USER_LOOKUP = index_module.dist.gql `
-  query checkUserVerification {
-    viewer {
-      ... on User {
-        id
-        accountId
-        email
-        emailVerified
-      }
-    }
-  }
-`;
-function useWidgetVerificationInternal() {
-  const userIdentity = index_module.K();
-  const [showCode, setShowCode] = index_module.Fn({
-    namespace: keys.SHOW_CODE_NAMESPACE,
-    initialValue: false,
-  });
-  const [email, setEmail] = index_module.Fn({
-    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
-    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
-  });
-  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
-  const [loading, setLoading] = stencilHooks_module.useState(true);
-  const [fetch] = index_module.an(USER_LOOKUP);
-  stencilHooks_module.useEffect(() => {
-    const checkUser = async () => {
-      var _a;
-      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);
-      }
-      catch (e) {
-        console.error("Could not fetch user information:", e);
-      }
-      finally {
-        setLoading(false);
-      }
-    };
-    checkUser();
-  }, []);
-  const onVerification = () => {
-    setContext(true);
-  };
-  return { showCode, onVerification, loading };
-}
-const WidgetVerificationInternal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  getStepTextProps(prefix) {
-    const props = utils.getProps(this);
-    return extractProps.extractProps(props, prefix);
-  }
-  render() {
-    const { showCode, onVerification, loading } = index_module.isDemo()
-      ? useDemoWidgetVerificationInternal()
-      : useWidgetVerificationInternal();
-    // TODO: Shoelace spinner is throwing errors
-    if (loading)
-      return index.h("div", null);
-    // if (loading) {
-    //   return <sl-spinner style="font-size: 2rem;"></sl-spinner>;
-    // }
-    if (showCode) {
-      return (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
-    }
-    return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
-  }
-};
-function useDemoWidgetVerificationInternal() {
-  const [showCode, setShowCode] = index_module.Fn({
-    namespace: keys.SHOW_CODE_NAMESPACE,
-    initialValue: false,
-  });
-  const [email, setEmail] = index_module.Fn({
-    namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
-    initialValue: undefined,
-  });
-  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
-  const onVerification = () => {
-    setContext(true);
-  };
-  return { showCode, onVerification, loading: false };
-}
-
-exports.sqm_widget_verification_internal = WidgetVerificationInternal;