@saasquatch/mint-components 1.6.1 → 1.6.2-10

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -0,0 +1,429 @@
+import { isDemo, navigation } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view";
+import { usePortalRegistrationForm } from "./usePortalRegistrationForm";
+/**
+ * @uiName Microsite Registration
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ */
+export class PortalRegistrationForm {
+  constructor() {
+    this.ignored = true;
+    /**
+     * Page participants are navigated to after registration.
+     *
+     * @uiName Registration Redirect Path
+     */
+    this.nextPage = "/";
+    /**
+     * The page that participants are redirected to from the verification email.
+     *
+     * @uiName Email Redirection Path
+     */
+    this.redirectPath = "/verifyEmail";
+    /**
+     * @uiName Email Field Label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password Field Label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit Button Text
+     */
+    this.submitLabel = "Register";
+    /**
+     * @uiName Login Button Text
+     */
+    this.loginLabel = "Sign in";
+    /**
+     * @uiName Confirm Password Label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * Show or hide the confirm password input.
+     *
+     * @uiName Show Confirm Password Field
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Enable Password Validation
+     */
+    this.enablePasswordValidation = true;
+    /**
+     * Hide default input fields to use custom fields.
+     *
+     * @uiName Hide Default Inputs
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Header Text
+     */
+    this.pageLabel = "Register";
+    /**
+     * Login button redirection path.
+     *
+     * @uiName Login Redirect Path
+     */
+    this.loginPath = "/login";
+    /**
+     * Microsite Registration Form Key
+     *
+     * @uiName Form Key
+     */
+    this.formKey = "microsite-registration-form";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo(this)
+      : usePortalRegistrationForm(this);
+    const content = {
+      formData: h("slot", { name: "formData" }),
+      secondaryButton: (h("slot", { name: "secondaryButton" },
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
+      terms: h("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+    };
+    return (h(PortalRegistrationFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+  static get is() { return "sqm-portal-registration-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": "Registration Redirect Path",
+            "name": "uiName"
+          }],
+        "text": "Page participants are navigated to after registration."
+      },
+      "attribute": "next-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
+    "redirectPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email Redirection Path",
+            "name": "uiName"
+          }],
+        "text": "The page that participants are redirected to from the verification email."
+      },
+      "attribute": "redirect-path",
+      "reflect": false,
+      "defaultValue": "\"/verifyEmail\""
+    },
+    "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\""
+    },
+    "passwordLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password Field Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "password-label",
+      "reflect": false,
+      "defaultValue": "\"Password\""
+    },
+    "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": "\"Register\""
+    },
+    "loginLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Login Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "login-label",
+      "reflect": false,
+      "defaultValue": "\"Sign in\""
+    },
+    "confirmPasswordLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirm Password Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirm-password-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm Password\""
+    },
+    "confirmPassword": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show Confirm Password Field",
+            "name": "uiName"
+          }],
+        "text": "Show or hide the confirm password input."
+      },
+      "attribute": "confirm-password",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "enablePasswordValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Enable Password Validation",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "enable-password-validation",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "hideInputs": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide Default Inputs",
+            "name": "uiName"
+          }],
+        "text": "Hide default input fields to use custom fields."
+      },
+      "attribute": "hide-inputs",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "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": "\"Register\""
+    },
+    "loginPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Login Redirect Path",
+            "name": "uiName"
+          }],
+        "text": "Login button redirection path."
+      },
+      "attribute": "login-path",
+      "reflect": false,
+      "defaultValue": "\"/login\""
+    },
+    "formKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Form Key",
+            "name": "uiName"
+          }],
+        "text": "Microsite Registration Form Key"
+      },
+      "attribute": "form-key",
+      "reflect": false,
+      "defaultValue": "\"microsite-registration-form\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PortalRegistrationFormViewProps>",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "PortalRegistrationFormViewProps": {
+            "location": "import",
+            "path": "./sqm-portal-registration-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,
+      confirmPassword: true,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: "/login",
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -0,0 +1,160 @@
+import jsonpointer from "jsonpointer";
+import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
+import { navigation, useQuery, useRegisterViaRegistrationFormMutation, } from "@saasquatch/component-boilerplate";
+import { AsYouType } from "libphonenumber-js";
+import { useValidationState } from "../sqm-portal-register/useValidationState";
+import { gql } from "graphql-request";
+import { useRegistrationFormState, } from "./useRegistrationFormState";
+const RegistrationFormQuery = gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
+`;
+export function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+  const formRef = useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState({});
+  const { validationState, setValidationState } = useValidationState({});
+  const [request, { loading, errors, data, formError }] = useRegisterViaRegistrationFormMutation();
+  const queryResponse = useQuery(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  useEffect(() => {
+    var _a, _b, _c;
+    const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
+    const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
+    const disabledMessage = ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+      "The registration form is currently disabled.";
+    const formState = {
+      loading: formLoading,
+      disabled,
+      disabledMessage,
+      initialData,
+    };
+    setRegistrationFormState(formState);
+  }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData, formLoading]);
+  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;
+      // control.value = initialData[key] || control.value;
+      jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, "Cannot be empty");
+      }
+      // 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 ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: "Passwords do not match.",
+      };
+    }
+    setValidationState({ error: "", validationErrors });
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      return;
+    }
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    const redirectPath = props.redirectPath;
+    const variables = {
+      key: props.formKey,
+      formData: {
+        email,
+        password,
+        redirectPath,
+        ...formData,
+      },
+    };
+    try {
+      await request(variables);
+    }
+    catch (error) {
+      setValidationState({ error: "Network request failed." });
+    }
+  };
+  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);
+  }, []);
+  useEffect(() => {
+    var _a;
+    const managedIdentityResponse = (_a = data === null || data === void 0 ? void 0 : data.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => result.formHandler.namespace === "identity");
+    if (managedIdentityResponse &&
+      managedIdentityResponse.result.results.length &&
+      managedIdentityResponse.result.results[0].success &&
+      managedIdentityResponse.result.results[0].data.token) {
+      navigation.push(props.nextPage);
+    }
+  }, [data === null || data === void 0 ? void 0 : data.submitForm]);
+  useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  let errorMessage = "";
+  if (((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false) {
+    errorMessage =
+      ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+        "The registration form is disabled";
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = "Network request failed";
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors.length)) {
+    errorMessage = "Network request failed";
+  }
+  else {
+    errorMessage =
+      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.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) || ((_o = (_m = (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.response) === null || _k === void 0 ? void 0 : _k.errors) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.extensions) === null || _o === void 0 ? void 0 : _o.message) || ((_r = (_q = (_p = errors === null || errors === void 0 ? void 0 : errors.response) === null || _p === void 0 ? void 0 : _p.errors) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      validationState,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}

package/dist/collection/components/sqm-portal-registration-form/useRegistrationFormState.js

@@ -0,0 +1,8 @@
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useDomContextState } from "@saasquatch/dom-context-hooks";
+export const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+export function useRegistrationFormState(formState) {
+  const host = useHost();
+  const [registrationFormState, setRegistrationFormState] = useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  return { registrationFormState, setRegistrationFormState };
+}