@saasquatch/mint-components 1.15.3 → 1.15.4-1

package/dist/cjs/{sqm-base-registration-form-view-8029d30e.js → sqm-base-registration-form-view-66f99821.js}

@@ -40,6 +40,7 @@ sqm-portal-register {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (index.h("div", { class: sheet.classes.Wrapper },
     index.h("style", { type: "text/css" },
@@ -47,10 +48,8 @@ function BaseRegistrationFormView(props) {
       styleString),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -58,7 +57,13 @@ function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       index.h("div", { class: sheet.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         index.h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js

@@ -11,7 +11,7 @@ const JSS = require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-0aa82125.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8029d30e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-66f99821.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
 require('./AsYouType-6788393a.js');
 const usePortalRegistrationForm = require('./usePortalRegistrationForm-f25d89e7.js');
@@ -75,7 +75,6 @@ function jwtDecode(token, options) {
 }
 
 function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = stencilHooks_module.useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationFormState.useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = stencilHooks_module.useState({
     mode: "base",
@@ -83,33 +82,41 @@ function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
       if (!control.name)
         return;
-      jsonpointer.jsonpointer.set(formData, control.name, control.value);
-      // only validate email field
-      if (control.name !== "/email")
-        return;
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -139,8 +146,9 @@ function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };
@@ -296,7 +304,7 @@ const PortalGoogleRegistrationForm = class {
     };
     const sheet = JSS.createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = index_module.isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = index_module.isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
       googleButton: (index.h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -321,14 +329,16 @@ const PortalGoogleRegistrationForm = class {
     };
     if (showRegistrationForm.mode === "base") {
       return (index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
+      }, callbacks: callbacks,
+      // Show terms only on first screen
+      content: { ...content, terms: null }, refs: refs }));
   }
 };
 function useRegisterDemo(props) {
@@ -364,7 +374,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return cjs.cjs({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -28,7 +28,7 @@ const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7ebb426a.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8029d30e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-66f99821.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
 require('./utilities-78f5e169.js');
@@ -15640,7 +15640,7 @@ const BaseRegistrationForm_stories = {
 };
 const defaultProps$q = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -15660,7 +15660,7 @@ const defaultProps$q = {
 const errorProps$a = {
   ...defaultProps$q,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 const Default$o = () => {

package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -25,7 +25,7 @@ const defaultProps = {
 const errorProps = {
   ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 export const Default = () => {

package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js

@@ -37,6 +37,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -44,10 +45,8 @@ export function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -55,7 +54,13 @@ export function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -8,7 +8,7 @@ import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
  * @uiName Form Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -8,7 +8,7 @@ import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
  * @uiName Form Dropdown Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @slots [{"name":"", "title":"Drop Down Option"}]
  * @exampleGroup Microsite Components
  * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>

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

@@ -8,7 +8,7 @@ import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
  * @uiName Form Input Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */

package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js

@@ -7,7 +7,7 @@ import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-vie
 import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
 /**
  * @uiName Marketing Emails Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @requiredFeatures ["MARKETING_EMAILS"]
  */
 export class MarketingEmailsCheckbox {

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -3,13 +3,13 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
 import { usePasswordField } from "./usePasswordField";
-import { getProps } from "../../utils/utils";
 /**
  * @uiName Form Password Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
  */

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

@@ -2,11 +2,11 @@ import { isDemo, navigation } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { createStyleSheet } from "../../styling/JSS";
 import { BaseRegistrationFormView } from "../sqm-base-registration/sqm-base-registration-form-view";
 import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
 import { usePortalRegistrationForm } from "../sqm-portal-registration-form/usePortalRegistrationForm";
 import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationForm";
-import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Google Registration
  * @canvasRenderer always-replace
@@ -161,7 +161,7 @@ export class PortalGoogleRegistrationForm {
     };
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: h("slot", { name: "formData" }),
       googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -192,14 +192,16 @@ export class PortalGoogleRegistrationForm {
     };
     if (showRegistrationForm.mode === "base") {
       return (h(BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (h(PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
+      }, callbacks: callbacks, 
+      // Show terms only on first screen
+      content: { ...content, terms: null }, refs: refs }));
   }
   static get is() { return "sqm-portal-google-registration-form"; }
   static get encapsulation() { return "shadow"; }
@@ -874,7 +876,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return deepmerge({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -1,9 +1,8 @@
 import { useState } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { jwtDecode } from "jwt-decode";
+import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = useState({
     mode: "base",
@@ -11,33 +10,41 @@ export function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
       if (!control.name)
         return;
-      jsonpointer.set(formData, control.name, control.value);
-      // only validate email field
-      if (control.name !== "/email")
-        return;
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -67,8 +74,9 @@ export function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };

package/dist/esm/{sqm-base-registration-form-view-dafba287.js → sqm-base-registration-form-view-d81e316a.js}

@@ -38,6 +38,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -45,10 +46,8 @@ function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
       content.formData,
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -56,7 +55,13 @@ function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/esm/sqm-portal-google-registration-form.entry.js

@@ -7,7 +7,7 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-83f90fa1.js';
 import './sqm-text-span-view-ca32495e.js';
 import { a as useRegistrationForm } from './useRegistrationFormState-d6f33135.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-dafba287.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-d81e316a.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-3c1f6000.js';
 import './AsYouType-46f67d0d.js';
 import { u as usePortalRegistrationForm } from './usePortalRegistrationForm-4b35a357.js';
@@ -71,7 +71,6 @@ function jwtDecode(token, options) {
 }
 
 function usePortalGoogleRegistrationForm(props) {
-  const [emailValidationError, setEmailValidationError] = useState(null);
   const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
   const [showRegistrationForm, setShowRegistrationForm] = useState({
     mode: "base",
@@ -79,33 +78,41 @@ function usePortalGoogleRegistrationForm(props) {
   const handleEmailSubmit = async (event) => {
     const formControls = event.target.getFormControls();
     let formData = {};
-    let errorMessage = null;
+    let validationErrors = {};
     formControls.forEach((control) => {
       if (!control.name)
         return;
-      jsonpointer.set(formData, control.name, control.value);
-      // only validate email field
-      if (control.name !== "/email")
-        return;
-      if (control.required && !control.value)
-        errorMessage = props.requiredFieldErrorMessage;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // errorMessage = props.requiredFieldErrorMessage;
       if (typeof control.validationError === "function") {
         const validate = control.validationError;
         const validationError = validate({
           control,
-          key: "email",
-          value: control.value,
+          key,
+          value,
         });
         if (validationError)
-          errorMessage = validationError;
+          jsonpointer.set(validationErrors, key, validationError);
       }
     });
-    if (errorMessage) {
-      setEmailValidationError(errorMessage);
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
       return;
     }
     setRegistrationFormState({
       ...registrationFormState,
+      validationErrors: {},
       initialData: {
         ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
         ...formData,
@@ -135,8 +142,9 @@ function usePortalGoogleRegistrationForm(props) {
     }
   };
   return {
+    registrationFormState,
     showRegistrationForm,
-    emailValidationError,
+    validationErrors: registrationFormState.validationErrors,
     handleGoogleInit,
     handleEmailSubmit,
   };
@@ -292,7 +300,7 @@ const PortalGoogleRegistrationForm = class {
     };
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
-    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
       googleButton: (h$1("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
@@ -317,14 +325,16 @@ const PortalGoogleRegistrationForm = class {
     };
     if (showRegistrationForm.mode === "base") {
       return (h$1(BaseRegistrationFormView, { states: {
-          error: emailValidationError,
+          validationErrors,
         }, callbacks: { handleEmailSubmit }, content: content }));
     }
     return (h$1(PortalRegistrationFormView, { states: {
         ...states,
         emailDisabled: true,
         hidePasswords: showRegistrationForm.mode === "google",
-      }, callbacks: callbacks, content: content, refs: refs }));
+      }, callbacks: callbacks,
+      // Show terms only on first screen
+      content: { ...content, terms: null }, refs: refs }));
   }
 };
 function useRegisterDemo(props) {
@@ -360,7 +370,7 @@ function useGoogleDemo(props) {
     mode: "base",
   });
   return cjs({
-    emailValidationError: false,
+    validationErrors: {},
     handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
     showRegistrationForm,
     handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),

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

@@ -24,7 +24,7 @@ import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-vi
 import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-35b4353b.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-3d3182f1.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
-import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-dafba287.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-d81e316a.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-3c1f6000.js';
 import { P as PortalProfileView } from './sqm-portal-profile-view-93003974.js';
 import './utilities-5b0ca040.js';
@@ -15636,7 +15636,7 @@ const BaseRegistrationForm_stories = {
 };
 const defaultProps$q = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -15656,7 +15656,7 @@ const defaultProps$q = {
 const errorProps$a = {
   ...defaultProps$q,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 const Default$o = () => {

package/dist/esm-es5/sqm-base-registration-form-view-d81e316a.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,s=1,a=arguments.length;s<a;s++){t=arguments[s];for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r))e[r]=t[r]}return e};return __assign.apply(this,arguments)};import{h}from"./index-91e7729f.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";import{A as AuthWrapper,a as AuthColumn,H as HostBlock,b as AuthButtonsContainer,E as ErrorStyles}from"./mixins-83f90fa1.js";import{T as TextSpanView}from"./sqm-text-span-view-ca32495e.js";var style={Wrapper:AuthWrapper,Column:AuthColumn,HostBlock:HostBlock,":host":{margin:"0 auto",width:"100%"},ButtonsContainer:__assign(__assign({},AuthButtonsContainer),{gap:"var(--sl-spacing-medium)","& > *":{margin:"0 !important"}}),ErrorStyle:ErrorStyles};var vanillaStyle="\nsqm-portal-register {\n  margin: 0 auto;\n  width: 100%;\n  display: block;\n}\n\n:host{\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n";var sheet=createStyleSheet(style);var styleString=sheet.toString();function BaseRegistrationFormView(e){var t,s;var a=e.states,r=e.content,i=e.callbacks;return h("div",{class:sheet.classes.Wrapper},h("style",{type:"text/css"},vanillaStyle,styleString),h(TextSpanView,{type:"h3"},r.pageLabel),h("sl-form",{class:sheet.classes.Column,"onSl-submit":i.handleEmailSubmit,novalidate:true},r.formData,h("sl-input",Object.assign({exportparts:"label: input-label, base: input-base",type:"email",name:"/email",label:r.emailLabel||"Email",required:true,validationError:function(e){var t=e.value;if(!t){return r.requiredFieldErrorMessage}if(!t.includes("@")){return r.invalidEmailErrorMessage}}},((t=a===null||a===void 0?void 0:a.validationErrors)===null||t===void 0?void 0:t.email)?{class:sheet.classes.ErrorStyle,helpText:((s=a===null||a===void 0?void 0:a.validationErrors)===null||s===void 0?void 0:s.email)||r.requiredFieldErrorMessage}:[])),r.terms,h("div",{class:sheet.classes.ButtonsContainer},h("sl-button",{submit:true,exportparts:"base: primarybutton-base",type:"primary",style:{margin:"0"}},r.submitLabel||"Register"),h("sl-menu-divider",{style:{margin:"0"}}),r.googleButton,r.secondaryButton)))}export{BaseRegistrationFormView as B};