@saasquatch/mint-components 1.12.0-2 → 1.12.0-20

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

@@ -1,12 +1,14 @@
 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, VERIFICATION_EVENT_KEY, } from "../keys";
-import { useVerificationEmailMutation } from "../sqm-email-verification/useEmailVerification";
-// TODO: Move to component-boilerplate
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, } from "../keys";
+import { useVerificationEmail } from "../useVerificationEmail";
 export const VerifyEmailWithCodeMutation = gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
       verifiedEmail
       accessKey
     }
@@ -44,9 +46,7 @@ export function useWidgetCodeVerification(props) {
   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 [request, { loading: resendLoading, data, errors: resendErrors }] = useVerificationEmailMutation();
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -62,18 +62,20 @@ export function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-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].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
         }
         codeElements[idx + 1].focus();
       });
@@ -84,7 +86,10 @@ export function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    const result = await request();
+    // 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;
@@ -104,16 +109,13 @@ export function useWidgetCodeVerification(props) {
     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);
-    // 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);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
       reset();
     }
     else {
@@ -121,21 +123,25 @@ export function useWidgetCodeVerification(props) {
     }
   };
   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,
+      email: verificationEmail,
       emailResent,
-      resendError: !!(resendErrors === null || resendErrors === void 0 ? void 0 : resendErrors.message) || emailError,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {

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

@@ -10,12 +10,17 @@ const defaultProps = {
   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 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,
@@ -28,6 +33,17 @@ export const SaveLoading = () => (h("sqm-email-verification", { demoData: {
       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,

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

@@ -1,6 +1,7 @@
 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",
@@ -20,10 +21,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -76,12 +74,18 @@ export function WidgetEmailVerificationView(props) {
     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)),
+      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
+          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,

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

@@ -3,8 +3,9 @@ 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 } from "@saasquatch/component-boilerplate";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
+import { SHOW_CODE_NAMESPACE } from "../keys";
 /**
  * @uiName Widget Verification Gate
  */
@@ -17,11 +18,15 @@ export class WidgetEmailVerification {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    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 support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */
@@ -89,7 +94,28 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-header",
       "reflect": false,
-      "defaultValue": "\"There was an error sending your code.\""
+      "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",
@@ -110,7 +136,7 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-description",
       "reflect": false,
-      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
+      "defaultValue": "\"Please try again. If this problem continues, contact our program {supportLink}.\""
     },
     "emailLabel": {
       "type": "string",
@@ -208,16 +234,17 @@ export class WidgetEmailVerification {
   }; }
 }
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = useSetParent(SHOW_CODE_NAMESPACE);
   return deepmerge({
     states: {
-      error: "",
+      error: true,
+      initialLoading: false,
       loading: false,
-      email: "",
-      isEmailPrefilled: false,
-      sendCodeError: false,
+      email: "test@example.com",
+      sendCodeError: true,
     },
     callbacks: {
-      submitEmail: async () => { },
+      submitEmail: async () => setShowCode(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -2,16 +2,10 @@ import { useMutation, useParent, useQuery, useUserIdentity, } from "@saasquatch/
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
-export const VerificationEmailMutation = gql `
-  mutation requestUserEmailVerification($user: UserIdInput!) {
-    requestUserEmailVerification(user: $user) {
-      success
-    }
-  }
-`;
+import { useVerificationEmail } from "../useVerificationEmail";
 export const UpsertUserEmailMutation = gql `
   mutation upsertUser($userInput: UserInput!) {
-    user(userInput: $userInput) {
+    upsertUser(userInput: $userInput) {
       id
       accountId
       email
@@ -25,47 +19,23 @@ export const UserLookupQuery = gql `
         id
         accountId
         email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
       }
     }
   }
 `;
-// TODO: Move to component-boilerplate
-export function useVerificationEmailMutation() {
-  const user = useUserIdentity();
-  const [request, { loading: loading, data, errors }] = useMutation(VerificationEmailMutation);
-  const sendVerificationEmailMutation = async () => {
-    try {
-      const result = await request({
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-      });
-      if (result instanceof Error || !result)
-        throw new Error();
-      return result;
-    }
-    catch (e) {
-      console.error("Could not send verification email", e);
-      return undefined;
-    }
-  };
-  return [
-    sendVerificationEmailMutation,
-    {
-      loading,
-      data,
-      errors,
-    },
-  ];
-}
 export function useUpsertUserEmail() {
   const user = useUserIdentity();
   const [request, { loading: loading, data, errors }] = useMutation(UpsertUserEmailMutation);
   const upsertUserEmail = async (email) => {
     try {
       const result = await request({
-        user: {
+        userInput: {
           id: user.id,
           accountId: user.accountId,
           email,
@@ -95,9 +65,9 @@ export function useWidgetEmailVerification(props) {
   const [emailExists, setEmailExists] = useState(false);
   const [error, setError] = useState(false);
   const [mutationError, setMutationError] = useState(false);
-  const [sendVerificationEmailMutation] = useVerificationEmailMutation();
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
   const [upsertUserEmail] = useUpsertUserEmail();
-  const [loading, setLoading] = useState(false);
+  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(() => {
@@ -105,6 +75,10 @@ export function useWidgetEmailVerification(props) {
       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))
@@ -123,8 +97,11 @@ export function useWidgetEmailVerification(props) {
       if (!result || !result.user.email)
         setError(true);
     }
-    const result = await sendVerificationEmailMutation();
-    if (!result || !result.requestUserEmailVerification.success)
+    // 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
@@ -139,7 +116,7 @@ export function useWidgetEmailVerification(props) {
     },
     states: {
       loading,
-      initialLoading,
+      initialLoading: initialLoading && !initialized,
       error,
       email: data === null || data === void 0 ? void 0 : data.viewer.email,
       sendCodeError: mutationError,

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"; }
+}