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

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

@@ -1,557 +0,0 @@
-import { useParentState } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Host, Prop } from "@stencil/core";
-import debugFn from "debug";
-import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
-import { getProps } from "../../utils/utils";
-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 Gate
- * @slots [{"name":"not-verified","title":"Not verified template"},{"name":"verified","title":"Verified template"}]
- * @canvasRenderer always-replace
- * @exampleGroup Widget Verification
- * @example Widget Verification Gate - <sqm-widget-verification><template slot="verified"><sqm-tax-and-cash></sqm-tax-and-cash></template></sqm-widget-verification>
- */
-export class WidgetVerification {
-  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                CODE STEP PROPS
-  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-  constructor() {
-    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Verify email widget header text
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_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
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
-    /**
-     * @uiName Send code to email alert description
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
-    /**
-     * @uiName Email input label
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_emailLabel = "Email";
-    /**
-     * @uiName Send code button text
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_sendCodeText = "Send code";
-    /**
-     * @uiName Send code button text
-     * @uiGroup Email Verification Step
-     */
-    this.emailStep_emailValidationErrorText = "Please enter a valid email";
-    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-                  EMAIL STEP PROPS
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-    /**
-     * @uiName Verify code widget header text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * @uiName Reverify code widget header text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * Text displayed under verify button
-     * @uiName Resend code text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code label
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_resendCodeLabel = "Resend code";
-    /**
-     * Link text displayed under verify button
-     * @uiName Resend code text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Error text displayed under verification input
-     * @uiName Invalid code text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
-    /**
-     * @uiName Verify code button text
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_verifyText = "Verify";
-    /**
-     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
-     * @uiName Network error message
-     * @uiGroup Code Verification Step
-     */
-    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    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]);
-    // useEffect(() => {
-    //   const host = useHost();
-    //   const callback = (e: CustomEvent) => {
-    //     e.stopPropagation();
-    //     setContext({ token: e.detail.token });
-    //   };
-    //   host.addEventListener(VERIFICATION_EVENT_KEY, callback);
-    //   return () => {
-    //     host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
-    //   };
-    // }, []);
-    return (h(Host, null,
-      h("div", { ref: setSlot, style: { display: "contents" } },
-        h("template", { slot: "not-verified" },
-          h("sqm-widget-verification-internal", Object.assign({}, getProps(this)))),
-        h("slot", { name: "not-verified" }),
-        h("slot", { name: "verified" })),
-      h("div", { ref: setContainer },
-        h("slot", { name: "shown" }))));
-  }
-  static get is() { return "sqm-widget-verification"; }
-  static get properties() { return {
-    "emailStep_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": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_verify-email-header-text",
-      "reflect": false,
-      "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
-    },
-    "emailStep_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": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_send-code-error-header",
-      "reflect": false,
-      "defaultValue": "\"There was an error sending your code.\""
-    },
-    "emailStep_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": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_send-code-error-description",
-      "reflect": false,
-      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
-    },
-    "emailStep_emailLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Email input label",
-            "name": "uiName"
-          }, {
-            "text": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_email-label",
-      "reflect": false,
-      "defaultValue": "\"Email\""
-    },
-    "emailStep_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": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_send-code-text",
-      "reflect": false,
-      "defaultValue": "\"Send code\""
-    },
-    "emailStep_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": "Email Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "email-step_email-validation-error-text",
-      "reflect": false,
-      "defaultValue": "\"Please enter a valid email\""
-    },
-    "codeStep_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": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "code-step_verify-code-header-text",
-      "reflect": false,
-      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
-    },
-    "codeStep_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": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "code-step_reverify-code-header-text",
-      "reflect": false,
-      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
-    },
-    "codeStep_resendCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code text",
-            "name": "uiName"
-          }, {
-            "text": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": "Text displayed under verify button"
-      },
-      "attribute": "code-step_resend-code-text",
-      "reflect": false,
-      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
-    },
-    "codeStep_resendCodeLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code label",
-            "name": "uiName"
-          }, {
-            "text": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": "The link that appears in the resend code link"
-      },
-      "attribute": "code-step_resend-code-label",
-      "reflect": false,
-      "defaultValue": "\"Resend code\""
-    },
-    "codeStep_codeResentSuccessfullyText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code text",
-            "name": "uiName"
-          }, {
-            "text": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": "Link text displayed under verify button"
-      },
-      "attribute": "code-step_code-resent-successfully-text",
-      "reflect": false,
-      "defaultValue": "\"Another code has been sent to {email}\""
-    },
-    "codeStep_invalidCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Invalid code text",
-            "name": "uiName"
-          }, {
-            "text": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": "Error text displayed under verification input"
-      },
-      "attribute": "code-step_invalid-code-text",
-      "reflect": false,
-      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
-    },
-    "codeStep_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": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "code-step_verify-text",
-      "reflect": false,
-      "defaultValue": "\"Verify\""
-    },
-    "codeStep_networkErrorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Network error message",
-            "name": "uiName"
-          }, {
-            "text": "Code Verification Step",
-            "name": "uiGroup"
-          }],
-        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
-      },
-      "attribute": "code-step_network-error-message",
-      "reflect": false,
-      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
-    }
-  }; }
-}