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

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

@@ -0,0 +1,251 @@
+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"]
+ */
+export class LeadInputField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
+    /**
+     * @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
+    },
+    "optionalLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Optional label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "optional-label",
+      "reflect": false,
+      "defaultValue": "\"(optional)\""
+    },
+    "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; optionalLabel: 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/useCheckboxField.js

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

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

@@ -0,0 +1,155 @@
+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";
+import { useLeadFormState } from "./useLeadFormState";
+const SUBMIT_LEAD = gql `
+  mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
+    submitForm(formSubmissionInput: $formSubmissionInput) {
+      success
+    }
+  }
+`;
+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, _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);
+  const [submitLead, { loading, errors, data }] = useMutation(SUBMIT_LEAD);
+  const [success, setSuccess] = useState(false);
+  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) => {
+    var _a;
+    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.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        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.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: {},
+    });
+    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 ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
+        setSuccess(true);
+      }
+    }
+    catch (error) {
+      setLeadFormState({
+        loading: false,
+        error: props.networkErrorMessage,
+        validationErrors: {},
+      });
+    }
+  };
+  const inputFunction = 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("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) => {
+      var _a;
+      if (((_a = c.input) === null || _a === void 0 ? void 0 : _a.type) === "checkbox") {
+        c.checked = false;
+        c.value = false;
+      }
+      else {
+        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;
+  }
+  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,
+      success,
+      leadFormState,
+      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/useLeadFormState.js

@@ -0,0 +1,10 @@
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useDomContextState } from "@saasquatch/dom-context-hooks";
+export const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
+const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
+export function useLeadFormState(formState) {
+  const host = useHost();
+  const [leadFormState, setLeadFormState] = useDomContextState(host, LEAD_FORM_STATE_CONTEXT, formState);
+  useDomContextState(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
+  return { leadFormState, setLeadFormState };
+}

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-leaderboard/Leaderboard.stories.js

@@ -368,43 +368,6 @@ export const ReferralLeaderboard = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const ReferralLeaderboardWithCustomStyles = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        ...defaultStyles,
-        rankheading: "Rank",
-        usersheading: "User",
-        statsheading: "Referrals",
-        showRank: true,
-        textColor: "white",
-        borderColor: "white",
-        background: "slateblue",
-        borderRadius: 18,
-        viewingUserHighlightColor: "yellow",
-        viewingUserHighlightTextColor: "slateblue",
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        firstName: "Viktor",
-        lastInitial: "V",
-        textValue: "82",
-        rank: 1,
-        rowNumber: 1,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
 export const ReferralLeaderboardWithMaxWidth = () => {
   const props = {
     states: {

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -1,71 +1,65 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
-export function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
-  const style = {
-    Leaderboard: {
-      "& table": {
-        width: "100%",
-        borderCollapse: "collapse",
-        background: styles.background || "transparent",
-        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
-      },
-      "& th": {
-        textAlign: "left",
-        padding: "var(--sl-spacing-medium)",
-        paddingTop: "0",
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& tr:not(:first-child)": {
-        borderTop: `var(--sqm-bordr-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
-      },
-      "& td": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-normal)",
-      },
-      "& .ellipses": {
-        textAlign: "left",
-        padding: "0",
-        color: styles.textColor || "var(--sqm-text)",
-        paddingLeft: "25%",
-      },
-      "& .highlight": {
-        background: styles.viewingUserHighlightColor ||
-          "var(--sqm-accent-color-background)",
-        "& td, th": {
-          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
-        },
-      },
-      "& td, th": {
-        color: styles.textColor || "var(--sqm-text)",
-        padding: "var(--sl-spacing-medium)",
-      },
-      "& .User": {
-        width: "100%",
-      },
-      "& .Score": {
-        width: "auto",
-        whiteSpace: "nowrap",
-      },
-      "& .Rank": {
-        whiteSpace: "nowrap",
-      },
-      "& .fullWidth": {
-        width: "100%",
-      },
+const style = {
+  Leaderboard: {
+    "& table": {
+      width: "100%",
+      borderCollapse: "collapse",
     },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
+    "& th": {
+      textAlign: "left",
+      padding: "var(--sl-spacing-medium)",
+      paddingTop: "0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& tr:not(:first-child)": {
+      borderTop: "1px solid var(--sl-color-neutral-200)",
+    },
+    "& td": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    "& .ellipses": {
+      textAlign: "left",
+      padding: "0",
+      color: "var(--sl-color-neutral-500)",
+      paddingLeft: "25%",
+    },
+    "& .highlight": {
+      background: "var(--sl-color-primary-50)",
+    },
+    "& td, th": {
+      color: "var(--sl-color-gray-800)",
+      padding: "var(--sl-spacing-medium)",
+    },
+    "& .User": {
+      width: "100%",
+    },
+    "& .Score": {
+      width: "auto",
+      whiteSpace: "nowrap",
+    },
+    "& .Rank": {
+      whiteSpace: "nowrap",
+    },
+    "& .fullWidth": {
+      width: "100%",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
   :host{
     display: block;
   }
 `;
+export function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
   if (states.isEssentials) {
     return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
   }