@saasquatch/mint-components 1.12.0-3 → 1.12.0-4

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
 const index_module = require('./index.module-236d0403.js');
+const utils = require('./utils-6847bc06.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = stencilHooks_module.browser("sq:widget-verification");
@@ -35,8 +36,93 @@ function useTemplateChildren({ parent, callback }) {
   };
 }
 const WidgetVerification = class {
+  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                CODE STEP PROPS
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    // ! 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.";
     stencilHooks_module.h(this);
   }
   disconnectedCallback() { }
@@ -120,7 +206,7 @@ const WidgetVerification = class {
         host.removeEventListener(keys.VERIFICATION_EVENT_KEY, callback);
       };
     }, []);
-    return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("template", { slot: "not-verified" }, index.h("sqm-widget-verification-internal", null)), index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
+    return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("template", { slot: "not-verified" }, index.h("sqm-widget-verification-internal", Object.assign({}, utils.getProps(this)))), index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
   }
 };
 

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

@@ -1,10 +1,11 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
+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() {
     /**
@@ -260,18 +261,22 @@ export class WidgetCodeVerification {
   }; }
 }
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = useState(false);
+  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
       loading: false,
-      email: "",
-      verifyFailed: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
     },
     refs: {
       codeWrapperRef: () => { },
     },
     callbacks: {
-      resendEmail: async () => { },
-      submitCode: async () => { },
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext({ token: "TOKEN" }),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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
  */
@@ -208,16 +209,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-widget-verification-internal.js

@@ -1,27 +1,290 @@
-import { useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { isDemo, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
+import { Component, h, Prop } from "@stencil/core";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "./keys";
+import { getProps } from "../../utils/utils";
+import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
+function useWidgetVerificationInternal() {
+  const userIdentity = useUserIdentity();
+  const [showCode, setShowCode] = useParentState({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = useParentState({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+  });
+  return { showCode };
+}
 export class WidgetVerificationInternal {
   constructor() {
     withHooks(this);
   }
   disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = getProps(this);
+    return extractProps(props, prefix);
+  }
   render() {
-    const userIdentity = useUserIdentity();
-    const [showCode, setShowCode] = useParentState({
-      namespace: SHOW_CODE_NAMESPACE,
-      initialValue: false,
-    });
-    const [email, setEmail] = useParentState({
-      namespace: VERIFICATION_EMAIL_NAMESPACE,
-      initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
-    });
+    const { showCode } = isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerificationInternal();
     if (showCode) {
-      return h("sqm-code-verification", null);
+      return (h("sqm-code-verification", Object.assign({}, this.getStepTextProps("codeStep_"))));
     }
-    return h("sqm-email-verification", null);
+    return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
   static get is() { return "sqm-widget-verification-internal"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "emailStep_verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_verify-email-header-text",
+      "reflect": false
+    },
+    "emailStep_sendCodeErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-header",
+      "reflect": false
+    },
+    "emailStep_sendCodeErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-description",
+      "reflect": false
+    },
+    "emailStep_emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_email-label",
+      "reflect": false
+    },
+    "emailStep_sendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-text",
+      "reflect": false
+    },
+    "emailStep_emailValidationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_email-validation-error-text",
+      "reflect": false
+    },
+    "codeStep_verifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_verify-code-header-text",
+      "reflect": false
+    },
+    "codeStep_reverifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_reverify-code-header-text",
+      "reflect": false
+    },
+    "codeStep_resendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_resend-code-text",
+      "reflect": false
+    },
+    "codeStep_resendCodeLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_resend-code-label",
+      "reflect": false
+    },
+    "codeStep_codeResentSuccessfullyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_code-resent-successfully-text",
+      "reflect": false
+    },
+    "codeStep_invalidCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_invalid-code-text",
+      "reflect": false
+    },
+    "codeStep_verifyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_verify-text",
+      "reflect": false
+    },
+    "codeStep_networkErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_network-error-message",
+      "reflect": false
+    }
+  }; }
+}
+function useDemoWidgetVerificationInternal() {
+  const [showCode, setShowCode] = useParentState({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = useParentState({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  return { showCode };
 }