@saasquatch/mint-components 1.15.0-99 → 1.16.0-0

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

@@ -0,0 +1,495 @@
+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 { LeadFormView } from "./sqm-lead-form-view";
+import { useLeadForm } from "./useLeadForm";
+/**
+ * @uiName Lead Form
+ * @canvasRenderer always-replace
+ * @slots [{"name":"formData","title":"Additional Fields"}]
+ */
+export class LeadForm {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName First Name field label
+     */
+    this.firstNameLabel = "First name";
+    /**
+     * @uiName Last Name field label
+     */
+    this.lastNameLabel = "Last name";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Submit";
+    /**
+     * @uiName Submit another form button label
+     */
+    this.resubmitFormLabel = "Refer Another Friend";
+    /**
+     * @uiName Header text
+     */
+    this.pageLabel = "Refer your friend";
+    /**
+     * Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms.
+     * @uiName Form key
+     */
+    this.formKey = "lead-form";
+    /**
+     * Optional support link text for error messages.
+     * @uiName Support link text
+     */
+    this.supportLinkText = "Support";
+    /**
+     * Header text shown on successful lead submission.
+     * @uiName Submit success header
+     */
+    this.submitSuccessHeader = "Lead submitted";
+    /**
+     * Description text shown on successful lead submission.
+     * @uiName Submit success description
+     */
+    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 if an error occurs.
+     * @uiName Submit error header
+     */
+    this.submitErrorHeader = "An error occurred while submitting";
+    /**
+     * Description text shown if an error occurs.
+     * @uiName Submit error description
+     */
+    this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
+    /**
+     * The message to be displayed if a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
+    /**
+     * The message to be displayed if a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed if the email used is invalid.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo(this)
+      : useLeadForm(this);
+    const content = {
+      formData: h("slot", { name: "formData" }),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      resubmitFormLabel: this.resubmitFormLabel,
+      pageLabel: this.pageLabel,
+      supportLinkText: this.supportLinkText,
+      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 {
+    "emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-label",
+      "reflect": false,
+      "defaultValue": "\"Email\""
+    },
+    "firstNameLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "First Name field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "first-name-label",
+      "reflect": false,
+      "defaultValue": "\"First name\""
+    },
+    "lastNameLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Last Name field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "last-name-label",
+      "reflect": false,
+      "defaultValue": "\"Last name\""
+    },
+    "submitLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "submit-label",
+      "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "page-label",
+      "reflect": false,
+      "defaultValue": "\"Refer your friend\""
+    },
+    "formKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Form key",
+            "name": "uiName"
+          }],
+        "text": "Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms."
+      },
+      "attribute": "form-key",
+      "reflect": false,
+      "defaultValue": "\"lead-form\""
+    },
+    "supportLinkText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": "Optional support link text for error messages."
+      },
+      "attribute": "support-link-text",
+      "reflect": false,
+      "defaultValue": "\"Support\""
+    },
+    "submitSuccessHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit success header",
+            "name": "uiName"
+          }],
+        "text": "Header text shown on successful lead submission."
+      },
+      "attribute": "submit-success-header",
+      "reflect": false,
+      "defaultValue": "\"Lead submitted\""
+    },
+    "submitSuccessDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit success description",
+            "name": "uiName"
+          }],
+        "text": "Description text shown on successful lead 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": "Submit error header",
+            "name": "uiName"
+          }],
+        "text": "Header text shown if 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": "Submit error description",
+            "name": "uiName"
+          }],
+        "text": "Description text shown if 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,
+      "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 if a required field is not filled."
+      },
+      "attribute": "required-field-error-message",
+      "reflect": false,
+      "defaultValue": "\"Please enter a valid {fieldLabel}\""
+    },
+    "networkErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Network error message",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "The message to be displayed if a the form submission fails unexpectedly."
+      },
+      "attribute": "network-error-message",
+      "reflect": false,
+      "defaultValue": "\"Network request failed.\""
+    },
+    "invalidEmailErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Invalid email message",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "The message to be displayed if the email used is invalid."
+      },
+      "attribute": "invalid-email-error-message",
+      "reflect": false,
+      "defaultValue": "\"Must be a valid email address\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<LeadFormViewProps>",
+        "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; supportLinkText?: string; submitSuccessHeader?: string; submitSuccessDescription?: string; submitErrorHeader?: string; submitErrorDescription?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "LeadFormViewProps": {
+            "location": "import",
+            "path": "./sqm-lead-form-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useRegisterDemo(props) {
+  return deepmerge({
+    states: {
+      error: "",
+      loading: false,
+      success: false,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+      resetForm: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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-medium)",
+  },
+};
+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", { class: sheet.classes.FieldContainer, 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 ? ` ${content.optionalLabel}` : ""}` }, (!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 && !content.fieldOptional) {
+          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,
+    }
+      : [])))));
+}