@saasquatch/mint-components 1.14.5 → 1.14.6-1

package/dist/cjs/{sqm-big-stat_41.cjs.entry.js → sqm-big-stat_42.cjs.entry.js}

@@ -23,7 +23,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-c0a5fdf8.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-feeac99b.js');
 
@@ -1344,6 +1344,220 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
+const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
+function useLeadFormState(formState) {
+  const host = index_module._();
+  const [leadFormState, setLeadFormState] = stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT, formState);
+  stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
+  return { leadFormState, setLeadFormState };
+}
+
+const SUBMIT_LEAD = index_module.dist.gql `
+  mutation submitForm($formSubmissionInput: FormSubmissionInput) {
+    submitForm(formSubmissionInput: $formSubmissionInput) {
+      success
+    }
+  }
+`;
+function useLeadForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = stencilHooks_module.useRef(null);
+  const { leadFormState, setLeadFormState } = useLeadFormState({});
+  const [submitLead, { loading, errors, data }] = index_module.$e(SUBMIT_LEAD);
+  stencilHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if (Object.keys(validationErrors).length) {
+      setLeadFormState({ loading: false, error: "", validationErrors });
+      // early return for validation errors
+      return;
+    }
+    setLeadFormState({
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    formData = { ...formData };
+    const variables = {
+      key: props.formKey,
+      formData,
+    };
+    try {
+      const result = await submitLead({ formSubmissionInput: variables });
+      if (result instanceof Error) {
+        throw result;
+      }
+      setLeadFormState({
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      if (result.success) {
+        index_module.jn.push(props.nextPage);
+      }
+    }
+    catch (error) {
+      setLeadFormState({
+        loading: false,
+        error: props.networkErrorMessage,
+        validationErrors: {},
+      });
+    }
+  };
+  const inputFunction = index_module.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    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);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      leadFormState,
+      referralCode: "ABC123",
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const LeadForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page from their verification email
+     *
+     * @uiName Submission redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @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 Header text
+     */
+    this.pageLabel = "Submit your information";
+    this.formKey = "lead-form";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * The message to be displayed when a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed when the email used is invalid or blocked.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = index_module.isDemo()
+      ? useRegisterDemo(this)
+      : useLeadForm(this);
+    const content = {
+      formData: index.h("slot", { name: "formData" }),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+    };
+    return (index.h(ShadowViewAddon.LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const GET_LEADERBOARD = index_module.dist.gql `
   query (
     $type: String!
@@ -3044,7 +3258,7 @@ const PortalRegister = class {
   disconnectedCallback() { }
   render() {
     const { states, callbacks, refs } = index_module.isDemo()
-      ? useRegisterDemo(this)
+      ? useRegisterDemo$1(this)
       : usePortalRegister(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
@@ -3067,7 +3281,7 @@ const PortalRegister = class {
     return (index.h(ShadowViewAddon.PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
 };
-function useRegisterDemo(props) {
+function useRegisterDemo$1(props) {
   return cjs.cjs({
     states: {
       error: "",
@@ -5201,6 +5415,7 @@ exports.sqm_hero_image = HeroImage;
 exports.sqm_hook_story_container = SqmHookStoryContainer;
 exports.sqm_image = Image;
 exports.sqm_input_field = InputField;
+exports.sqm_lead_form = LeadForm;
 exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;
 exports.sqm_marketing_emails_checkbox = MarketingEmailsCheckbox;

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -35,7 +35,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-c0a5fdf8.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
 
@@ -15831,6 +15831,117 @@ const QRCode = /*#__PURE__*/Object.freeze({
   DownloadError: DownloadError
 });
 
+const LeadForm_stories = {
+  title: "Components/Lead Form",
+};
+const defaultProps$t = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const errorProps$c = {
+  states: {
+    error: "Something went wrong. Please try again.",
+    leadFormState: {},
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const loadingProps$9 = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: true,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const slottedProps$2 = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+    formData: (index.h("div", null,
+      index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
+      index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+  },
+};
+const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$t));
+const LeadSubmitWithError = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, errorProps$c));
+const LeadSubmitLoading = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, loadingProps$9));
+const FieldsHidden$2 = () => {
+  return (index.h("sqm-lead-form", { demoData: {
+      states: {
+        leadFormState: {},
+        error: "",
+        loading: true,
+        referralCode: "ABC123",
+      },
+    } }));
+};
+const SlottedInputs$2 = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, slottedProps$2));
+
+const LeadForm = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadForm_stories,
+  Default: Default$r,
+  LeadSubmitWithError: LeadSubmitWithError,
+  LeadSubmitLoading: LeadSubmitLoading,
+  FieldsHidden: FieldsHidden$2,
+  SlottedInputs: SlottedInputs$2
+});
+
 /**
  *
  * Themes
@@ -15843,7 +15954,7 @@ const QRCode = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$r = `
+const Default$s = `
  // No CSS
 `;
 const Orangey = `
@@ -15877,7 +15988,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$r,
+  Default: Default$s,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18568,6 +18679,7 @@ const stories = [
   PayoutButtonScroll,
   PayoutStatusAlert,
   QRCode,
+  LeadForm,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -42,6 +42,7 @@
     "./components/sqm-invoice-table/columns/sqm-invoice-table-data-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
+    "./components/sqm-lead-form/sqm-lead-form.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",

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

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import { LeadFormView } from "./sqm-lead-form-view";
+export default {
+  title: "Components/Lead Form",
+};
+const defaultProps = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const errorProps = {
+  states: {
+    error: "Something went wrong. Please try again.",
+    leadFormState: {},
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const loadingProps = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: true,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+  },
+};
+const slottedProps = {
+  states: {
+    leadFormState: {},
+    error: "",
+    loading: false,
+    referralCode: "ABC123",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Submit your information",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+    formData: (h("div", null,
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+  },
+};
+export const Default = () => h(LeadFormView, Object.assign({}, defaultProps));
+export const LeadSubmitWithError = () => h(LeadFormView, Object.assign({}, errorProps));
+export const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps));
+export const FieldsHidden = () => {
+  return (h("sqm-lead-form", { demoData: {
+      states: {
+        leadFormState: {},
+        error: "",
+        loading: true,
+        referralCode: "ABC123",
+      },
+    } }));
+};
+export const SlottedInputs = () => h(LeadFormView, Object.assign({}, slottedProps));

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

@@ -0,0 +1,85 @@
+import { h } from "@stencil/core";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
+import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+const style = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function LeadFormView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "text", name: "/lastName", label: content.firstNameLabel || "First Name", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+        } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.firstName) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "text", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+        } }, (((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.lastName) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.leadFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.lastName) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_k = (_j = states.leadFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_m = (_l = states.leadFormState) === null || _l === void 0 ? void 0 : _l.validationErrors) === null || _m === void 0 ? void 0 : _m.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      h("input", { type: "hidden", hidden: true, name: "/rsReferralCode", value: states.referralCode }),
+      content.formData,
+      h("div", { class: sheet.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register")))));
+}