@saasquatch/mint-components 1.14.6-2 → 1.14.6-21

package/dist/collection/components/sqm-lead-form/sqm-lead-form.js

@@ -11,13 +11,6 @@ import { useLeadForm } from "./useLeadForm";
 export class LeadForm {
   constructor() {
     this.ignored = true;
-    /**
-     * Redirect participants to this page from their verification email
-     *
-     * @uiName Submission redirect
-     * @uiWidget pageSelect
-     */
-    this.nextPage = "/";
     /**
      * @uiName Email field label
      */
@@ -34,18 +27,42 @@ export class LeadForm {
      * @uiName Submit button text
      */
     this.submitLabel = "Submit";
+    /**
+     * @uiName Submit another form button label
+     */
+    this.resubmitFormLabel = "Refer Another Friend";
     /**
      * @uiName Header text
      */
-    this.pageLabel = "Submit your information";
+    this.pageLabel = "Refer your friend";
     this.formKey = "lead-form";
+    /**
+     * Optional support link for error messages.
+     */
+    this.supportLink = "Support";
+    /**
+     * Header text shown on successful submission.
+     */
+    this.submitSuccessHeader = "Referral submitted";
+    /**
+     * Description text shown on successful submission.
+     */
+    this.submitSuccessDescription = "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.";
+    /**
+     * Header text shown when an error occurs.
+     */
+    this.submitErrorHeader = "An error occurred while submitting";
+    /**
+     * Description text shown when an error occurs.
+     */
+    this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
     /**
      * The message to be displayed when a required field is not filled.
      *
      * @uiName Required field message
      * @uiWidget textArea
      */
-    this.requiredFieldErrorMessage = "Cannot be empty";
+    this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
     /**
      * The message to be displayed when a the form submission fails unexpectedly.
      *
@@ -71,39 +88,23 @@ export class LeadForm {
       formData: h("slot", { name: "formData" }),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
+      resubmitFormLabel: this.resubmitFormLabel,
       pageLabel: this.pageLabel,
+      supportLink: this.supportLink,
+      submitSuccessHeader: this.submitSuccessHeader,
+      submitSuccessDescription: this.submitSuccessDescription,
+      submitErrorHeader: this.submitErrorHeader,
+      submitErrorDescription: this.submitErrorDescription,
       invalidEmailErrorMessage: this.invalidEmailErrorMessage,
       requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
     };
     return (h(LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
   static get is() { return "sqm-lead-form"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "nextPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Submission redirect",
-            "name": "uiName"
-          }, {
-            "text": "pageSelect",
-            "name": "uiWidget"
-          }],
-        "text": "Redirect participants to this page from their verification email"
-      },
-      "attribute": "next-page",
-      "reflect": false,
-      "defaultValue": "\"/\""
-    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -188,6 +189,27 @@ export class LeadForm {
       "reflect": false,
       "defaultValue": "\"Submit\""
     },
+    "resubmitFormLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit another form button label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "resubmit-form-label",
+      "reflect": false,
+      "defaultValue": "\"Refer Another Friend\""
+    },
     "pageLabel": {
       "type": "string",
       "mutable": false,
@@ -207,7 +229,7 @@ export class LeadForm {
       },
       "attribute": "page-label",
       "reflect": false,
-      "defaultValue": "\"Submit your information\""
+      "defaultValue": "\"Refer your friend\""
     },
     "formKey": {
       "type": "string",
@@ -227,6 +249,96 @@ export class LeadForm {
       "reflect": false,
       "defaultValue": "\"lead-form\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional support link for error messages."
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"Support\""
+    },
+    "submitSuccessHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Header text shown on successful submission."
+      },
+      "attribute": "submit-success-header",
+      "reflect": false,
+      "defaultValue": "\"Referral submitted\""
+    },
+    "submitSuccessDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Description text shown on successful submission."
+      },
+      "attribute": "submit-success-description",
+      "reflect": false,
+      "defaultValue": "\"Our team will contact your friend to see if they\u2019re a good fit. In the meantime, you can track this referral on Activity page.\""
+    },
+    "submitErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Header text shown when an error occurs."
+      },
+      "attribute": "submit-error-header",
+      "reflect": false,
+      "defaultValue": "\"An error occurred while submitting\""
+    },
+    "submitErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Description text shown when an error occurs."
+      },
+      "attribute": "submit-error-description",
+      "reflect": false,
+      "defaultValue": "\"Please try again later. If the problem continues, contact {supportLink}\""
+    },
     "requiredFieldErrorMessage": {
       "type": "string",
       "mutable": false,
@@ -249,7 +361,7 @@ export class LeadForm {
       },
       "attribute": "required-field-error-message",
       "reflect": false,
-      "defaultValue": "\"Cannot be empty\""
+      "defaultValue": "\"Please enter a valid {fieldLabel}\""
     },
     "networkErrorMessage": {
       "type": "string",
@@ -304,7 +416,7 @@ export class LeadForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeadFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; leadFormState: LeadFormState; referralCode: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; submitLabel?: string; pageLabel?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
+        "resolved": "{ states?: { error: string; success: boolean; loading: boolean; leadFormState: LeadFormState; referralCode: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; submitLabel?: string; resubmitFormLabel?: string; pageLabel?: string; supportLink?: string; submitSuccessHeader?: string; submitSuccessDescription?: string; submitErrorHeader?: string; submitErrorDescription?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -339,12 +451,14 @@ function useRegisterDemo(props) {
     states: {
       error: "",
       loading: false,
+      success: false,
     },
     callbacks: {
       submit: async (_event) => {
         console.log("submit");
       },
       inputFunction: () => { },
+      resetForm: () => { },
     },
     refs: {
       formRef: {},

package/dist/collection/components/sqm-lead-form/sqm-lead-input-field-view.js

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+import { ErrorStyles } from "../../global/mixins";
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function LeadInputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { states, content } = props;
+  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    fieldLabel,
+  });
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value) {
+          return getRequiredFieldErrorMessage({
+            fieldLabel: content.fieldLabel,
+          });
+        }
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
+        content.requiredFieldErrorMessage,
+    }
+      : [])))));
+}

package/dist/collection/components/sqm-lead-form/sqm-lead-input-field.js

@@ -0,0 +1,228 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
+import { LeadInputFieldView, } from "./sqm-lead-input-field-view";
+import { useLeadInputField } from "./useLeadInputField";
+/**
+ * @uiName Lead Form Input Field
+ * @validParents ["sqm-lead-form"]
+ * @exampleGroup Microsite Components
+ * @example Lead Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
+ */
+export class LeadInputField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Input type
+     * @uiType string
+     * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
+     */
+    this.fieldType = "text";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.fieldOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const missingProps = getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const { states } = isDemo()
+      ? useLeadInputFieldDemo(this)
+      : useLeadInputField();
+    return (h(LeadInputFieldView, { states: states, content: content }));
+  }
+  static get is() { return "sqm-lead-input-field"; }
+  static get properties() { return {
+    "fieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input name attribute",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }],
+        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
+      },
+      "attribute": "field-name",
+      "reflect": false
+    },
+    "fieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "field-label",
+      "reflect": false
+    },
+    "fieldType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"text\" | \"date\" | \"tel\"",
+        "resolved": "\"date\" | \"tel\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"text\", \"date\", \"tel\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Text\", \"Date\", \"Phone Number\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "field-type",
+      "reflect": false,
+      "defaultValue": "\"text\""
+    },
+    "requiredFieldErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Required field message",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "The message to be displayed when a required field is not filled."
+      },
+      "attribute": "required-field-error-message",
+      "reflect": false,
+      "defaultValue": "\"Please enter a {fieldLabel}\""
+    },
+    "fieldOptional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": ""
+      },
+      "attribute": "field-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<LeadInputFieldViewProps>",
+        "resolved": "{ states?: { leadFormState?: LeadFormState; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; requiredFieldErrorMessage: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "LeadInputFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-lead-input-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useLeadInputFieldDemo(props) {
+  return deepmerge({
+    states: {
+      leadForState: {},
+    },
+    content: {
+      fieldName: props.fieldName,
+      fieldLabel: props.fieldLabel,
+      fieldType: props.fieldType,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-lead-form/useLeadDropdownField.js

@@ -0,0 +1,10 @@
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { LEAD_FORM_STATE_CONTEXT } from "./useLeadFormState";
+export function useLeadDropdownField() {
+  const leadFormState = useDomContext(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}

package/dist/collection/components/sqm-lead-form/useLeadForm.js

@@ -1,5 +1,5 @@
-import { navigation, useMutation } from "@saasquatch/component-boilerplate";
-import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
+import { useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useCallback, useEffect, useRef, useState, } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import jsonpointer from "jsonpointer";
 import { AsYouType } from "libphonenumber-js";
@@ -11,11 +11,25 @@ const SUBMIT_LEAD = gql `
     }
   }
 `;
+const GET_USER_DETAILS = gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
 export function useLeadForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const formRef = useRef(null);
   const { leadFormState, setLeadFormState } = useLeadFormState({});
+  const programId = useProgramId();
+  const user = useUserIdentity();
+  const { data: userDetails } = useQuery(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  console.log({ userDetails });
   const [submitLead, { loading, errors, data }] = useMutation(SUBMIT_LEAD);
+  const [success, setSuccess] = useState(false);
   useEffect(() => {
     if (!formRef.current)
       return;
@@ -26,6 +40,7 @@ export function useLeadForm(props) {
     };
   }, [formRef.current]);
   const submit = async (event) => {
+    var _a;
     let formControls = event.target.getFormControls();
     let formData = {};
     let validationErrors = {};
@@ -58,7 +73,6 @@ export function useLeadForm(props) {
       validationErrors: {},
     });
     formData = { ...formData };
-    const redirectPath = props.nextPage;
     const variables = {
       key: props.formKey,
       formData,
@@ -73,8 +87,8 @@ export function useLeadForm(props) {
         error: "",
         validationErrors: {},
       });
-      if (result.success) {
-        navigation.push(props.nextPage);
+      if ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
+        setSuccess(true);
       }
     }
     catch (error) {
@@ -93,6 +107,18 @@ export function useLeadForm(props) {
     const asYouType = new AsYouType("US");
     e.target.value = asYouType.input(e.target.value);
   }, []);
+  function resetForm() {
+    var _a, _b;
+    setLeadFormState({
+      loading: false,
+      error: "",
+      validationErrors: {},
+    });
+    (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
+      c.value = "";
+    });
+    setSuccess(false);
+  }
   let errorMessage = "";
   if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
     errorMessage = props.networkErrorMessage;
@@ -104,16 +130,19 @@ export function useLeadForm(props) {
     errorMessage =
       ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.error);
   }
+  console.log({ errors, errorMessage });
   return {
     states: {
       loading,
       error: errorMessage,
+      success,
       leadFormState,
-      referralCode: "ABC123",
+      referralCode: ((_k = userDetails === null || userDetails === void 0 ? void 0 : userDetails.viewer) === null || _k === void 0 ? void 0 : _k.referralCode) || "",
     },
     callbacks: {
       submit,
       inputFunction,
+      resetForm,
     },
     refs: {
       formRef,

package/dist/collection/components/sqm-lead-form/useLeadInputField.js

@@ -0,0 +1,10 @@
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { LEAD_FORM_STATE_CONTEXT } from "./useLeadFormState";
+export function useLeadInputField() {
+  const leadFormState = useDomContext(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -98,6 +98,8 @@ import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalR
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as QRCode from "../sqm-qr-code/QRCode.stories";
 import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
+import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
+import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -201,6 +203,8 @@ const stories = [
   PayoutStatusAlert,
   QRCode,
   LeadForm,
+  LeadInputField,
+  LeadFormDropdownField,
 ];
 /**
  * For internal documentation