@saasquatch/mint-components 2.0.8 → 2.0.9-0

package/dist/{esm/AsYouType-46f67d0d.js → cjs/usePortalRegistrationForm-8ed0d753.js}

@@ -1,3 +1,10 @@
+'use strict';
+
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
 // https://github.com/catamphetamine/libphonenumber-js/issues/239
@@ -3869,4 +3876,211 @@ function AsYouType$1(country) {
 AsYouType$1.prototype = Object.create(AsYouType.prototype, {});
 AsYouType$1.prototype.constructor = AsYouType$1;
 
-export { AsYouType$1 as A };
+const RegistrationFormQuery = index_module.dist.gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
+`;
+function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = domContextHooks_module.useRef(null);
+  const locale = index_module.L();
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const [request, { loading, errors, data, formError }] = index_module.Oe();
+  const queryResponse = index_module.wn(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  domContextHooks_module.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) ||
+      props.formDisabledErrorMessage;
+    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]);
+  domContextHooks_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) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    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.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 ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    const redirectPath = props.redirectPath;
+    const _googleOAuthIdToken = registrationFormState._googleOAuthIdToken;
+    const variables = {
+      key: props.formKey,
+      formData: {
+        ...(_googleOAuthIdToken ? { _googleOAuthIdToken } : {}),
+        locale,
+        email,
+        password,
+        redirectPath,
+        ...formData,
+      },
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => { var _a; return ((_a = result === null || result === void 0 ? void 0 : result.formHandler) === null || _a === void 0 ? void 0 : _a.namespace) === "identity"; });
+      if (managedIdentityResponse &&
+        managedIdentityResponse.result.results.length &&
+        managedIdentityResponse.result.results[0].success &&
+        managedIdentityResponse.result.results[0].data.token) {
+        index_module.jn.push(props.nextPage);
+      }
+      else if (
+      // check for blocked email error response
+      ((_b = result.submitForm) === null || _b === void 0 ? void 0 : _b.results.length) === 1 &&
+        ((_f = (_e = (_d = (_c = result.submitForm) === null || _c === void 0 ? void 0 : _c.results[0]) === null || _d === void 0 ? void 0 : _d.result) === null || _e === void 0 ? void 0 : _e.results) === null || _f === void 0 ? void 0 : _f.length) === 1 &&
+        ((_l = (_k = (_j = (_h = (_g = result.submitForm) === null || _g === void 0 ? void 0 : _g.results[0]) === null || _h === void 0 ? void 0 : _h.result) === null || _j === void 0 ? void 0 : _j.results) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.success) ===
+          false && ((_s = (_r = (_q = (_p = (_o = (_m = result.submitForm) === null || _m === void 0 ? void 0 : _m.results[0]) === null || _o === void 0 ? void 0 : _o.result) === null || _p === void 0 ? void 0 : _p.results) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) === null || _s === void 0 ? void 0 : _s.startsWith("Blocked email"))) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: {
+            email: props.invalidEmailErrorMessage,
+          },
+        });
+      }
+    }
+    catch (error) {
+      // check for invalid email
+      if ((_t = error === null || error === void 0 ? void 0 : error.message) === null || _t === void 0 ? void 0 : _t.includes("is not a valid email address")) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: { email: props.invalidEmailErrorMessage },
+        });
+      }
+      else {
+        setRegistrationFormState({
+          ...registrationFormState,
+          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$1("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  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) ||
+        props.formDisabledErrorMessage;
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  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 = props.networkErrorMessage;
+  }
+  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) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      enablePasswordValidation: !props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+exports.AsYouType = AsYouType$1;
+exports.usePortalRegistrationForm = usePortalRegistrationForm;

package/dist/collection/components/sqm-portal-google-login/GoogleLoginForm.stories.js

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Microsite Google Login",
+};
+const demoProps = {
+  states: {
+    error: "",
+    loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
+    showLoginForm: "manual",
+  },
+  callbacks: {
+    googleSubmit: async () => {
+      console.log("google submit");
+    },
+    submit: async (_event) => {
+      console.log("submit");
+    },
+  },
+  content: {
+    googleButton: null,
+  },
+};
+export const Default = () => {
+  return h("sqm-portal-google-login", null);
+};
+export const WithError = () => {
+  return (h("sqm-portal-google-login", { demoData: {
+      states: { ...demoProps.states, error: "This is an error message" },
+    } }));
+};
+export const Loading = () => {
+  return (h("sqm-portal-google-login", { demoData: {
+      states: { ...demoProps.states, loading: true },
+    } }));
+};

package/dist/collection/components/sqm-portal-google-login/sqm-portal-google-login.js

@@ -405,9 +405,10 @@ export class PortalGoogleLogin {
   }; }
 }
 function useLoginDemo(props) {
+  var _a, _b;
   return deepmerge({
     states: {
-      error: "",
+      error: ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.error) || "",
       loading: false,
       forgotPasswordPath: "/forgotPassword",
       registerPath: "/register",

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

@@ -81,7 +81,7 @@ const loadingProps = {
     },
   },
 };
-export const Default = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps)));
+export const Default = () => (h("sqm-portal-google-registration-form", null));
 export const RegisterWithError = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps)));
 export const RegisterLoading = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps)));
 export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -61,10 +61,6 @@ export class PortalLogin {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
-    /**
-     * @uiName Register CTA
-     */
-    this.registerCTA = "Don't have an account?";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -320,27 +316,6 @@ export class PortalLogin {
       "reflect": false,
       "defaultValue": "\"An error occurred while logging you in. Please refresh the page and try again.\""
     },
-    "registerCTA": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Register CTA",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "register-c-t-a",
-      "reflect": false,
-      "defaultValue": "\"Don't have an account?\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

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

@@ -49,6 +49,7 @@ import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
 import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
 import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
+import * as PortalGoogleLoginFormStories from "../sqm-portal-google-login/GoogleLoginForm.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
 import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
@@ -196,6 +197,7 @@ const stories = [
   ChangeMarketing,
   BaseRegistrationForm,
   PortalGoogleRegistrationFormStories,
+  PortalGoogleLoginFormStories,
   WidgetEmailVerification,
   WidgetCodeVerification,
   PayoutButtonScroll,