@saasquatch/mint-components 1.12.1-4 → 1.12.1-6

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
+const index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+require('./index.module-ccf9bd9c.js');
+const reRender = require('./re-render-1e63c82b.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 const utils = require('./utils-6847bc06.js');
+const reRender = require('./re-render-1e63c82b.js');
+const useChildElements = require('./useChildElements-438cf387.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
@@ -41,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module._();
+  const host = index_module.T();
   const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")

package/dist/cjs/{sqm-text-span-view-e1cd9bd3.js → sqm-text-span-view-a22f50aa.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-3cf5ef3d.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmTextSpanView = require('./sqm-text-span-view-a22f50aa.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/{stencil-hooks.module-72742a0b.js → stencil-hooks.module-ece1ee46.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-3cf5ef3d.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/{useChildElements-e0d44916.js → useChildElements-438cf387.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 
 function useChildElements() {
-  const host = index_module._();
+  const host = index_module.T();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/{useInstantAccessRegistration-bbe746d1.js → useInstantAccessRegistration-7d91867a.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
+const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);
   const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState();
-  const [request, { loading, errors, data }] = index_module.mn();
+  const [request, { loading, errors, data }] = index_module.Cn();
   const [error, setError] = stencilHooks_module.useState("");
   const submit = async (event) => {
     var _a;

package/dist/cjs/usePortalRegistrationForm-b9a28240.js

@@ -0,0 +1,214 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const useRegistrationFormState = require('./useRegistrationFormState-5911d016.js');
+const AsYouType = require('./AsYouType-6788393a.js');
+
+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 = stencilHooks_module.useRef(null);
+  const locale = index_module.Q();
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const [request, { loading, errors, data, formError }] = index_module.Te();
+  const queryResponse = index_module.En(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  stencilHooks_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]);
+  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) => {
+    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 variables = {
+      key: props.formKey,
+      formData: {
+        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.xn.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.AsYouType("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,
+      hideNameFields: props.hideNameFields,
+      loginPath: props.loginPath,
+      enablePasswordValidation: !props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+exports.usePortalRegistrationForm = usePortalRegistrationForm;

package/dist/cjs/{useReferralTable-a76adb0d.js → useReferralTable-6b4920f9.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const index = require('./index-3cf5ef3d.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
+const reRender = require('./re-render-1e63c82b.js');
+const useChildElements = require('./useChildElements-438cf387.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -245,8 +245,8 @@ const GET_IMPACT_TAX = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.Q();
-  const programIdContext = index_module.H();
+  const user = index_module.K();
+  const programIdContext = index_module.z();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -268,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.L();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.yn(GET_REFERRER_DATA, {
+  const locale = index_module.Q();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.yn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.kn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/cjs/{useRegistrationFormState-876ed65d.js → useRegistrationFormState-5911d016.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {
-  const host = index_module._();
+  const host = index_module.T();
   const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/cjs/{utilities-cec9dd36.js → utilities-27e9535b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-ece1ee46.js');
+const index_module = require('./index.module-ccf9bd9c.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/collection-manifest.json

@@ -3,6 +3,8 @@
     "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js",
     "./components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js",
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
+    "./components/sqm-referral-codes/sqm-referral-codes.js",
+    "./components/sqm-pagination/sqm-pagination.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
@@ -22,6 +24,7 @@
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-empty/sqm-empty.js",
     "./components/sqm-form-message/sqm-form-message.js",
+    "./components/sqm-google-sign-in/sqm-google-sign-in.js",
     "./components/sqm-graphql-client-provider/sqm-graphql-client-provider.js",
     "./components/sqm-header-logo/sqm-header-logo.js",
     "./components/sqm-hero/sqm-hero.js",
@@ -42,7 +45,6 @@
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",
     "./components/sqm-logout-current-user/sqm-logout-current-user.js",
-    "./components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
@@ -54,17 +56,19 @@
     "./components/sqm-portal-footer/sqm-portal-footer.js",
     "./components/sqm-portal-forgot-password/sqm-portal-forgot-password.js",
     "./components/sqm-portal-frame/sqm-portal-frame.js",
+    "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
+    "./components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js",
     "./components/sqm-portal-login/sqm-portal-login.js",
     "./components/sqm-portal-logout/sqm-portal-logout.js",
     "./components/sqm-portal-profile/sqm-portal-profile.js",
     "./components/sqm-portal-protected-route/sqm-portal-protected-route.js",
-    "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
     "./components/sqm-portal-reset-password/sqm-portal-reset-password.js",
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
+    "./components/sqm-referral-code/sqm-referral-code.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -117,6 +121,13 @@
   },
   "collections": [],
   "bundles": [
+    {
+      "components": [
+        "sqm-pagination",
+        "sqm-referral-code",
+        "sqm-referral-codes"
+      ]
+    },
     {
       "components": [
         "sqm-rewards-table",

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

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+import { BaseRegistrationFormView, } from "./sqm-base-registration-form-view";
+export default {
+  title: "Components/Microsite Base Registration",
+};
+const defaultProps = {
+  states: {
+    error: "",
+  },
+  callbacks: {
+    handleEmailSubmit: () => console.log("Submit!"),
+  },
+  content: {
+    pageLabel: "Register",
+    requiredFieldErrorMessage: "Cannot be empty",
+    invalidEmailErrorMessage: "Must be a valid email address",
+    googleButton: h("sl-button", null, "Register with Google"),
+    secondaryButton: (h("span", null,
+      "Already have an account?",
+      " ",
+      h("sl-button", { padding: "0", style: { width: "60px" }, size: "large", type: "text" }, "Sign in"),
+      " ")),
+  },
+};
+const errorProps = {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
+  },
+};
+export const Default = () => {
+  return h(BaseRegistrationFormView, Object.assign({}, defaultProps));
+};
+export const EmailError = () => {
+  return h(BaseRegistrationFormView, Object.assign({}, errorProps));
+};

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

@@ -0,0 +1,63 @@
+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,
+    gap: "var(--sl-spacing-medium)",
+    "& > *": {
+      margin: "0 !important",
+    },
+  },
+  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 BaseRegistrationFormView(props) {
+  const { states, content, callbacks } = props;
+  return (h("div", { class: sheet.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      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))),
+      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }),
+      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" } }),
+        content.googleButton,
+        content.secondaryButton))));
+}

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

@@ -17,6 +17,7 @@ const defaultProps = {
     checked: false,
   },
   content: {
+    checkboxName: "agree",
     checkboxLabel: "By signing up you agree to the {labelLink}",
     checkboxLabelLink: "https://example.com",
     checkboxLabelLinkText: "Terms and Conditions",

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

@@ -51,13 +51,22 @@ export function CheckboxFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/marketingEmails`, checked: states.checked, "onSl-change": (e) => {
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }), intl.formatMessage({
-      id: "marketingEmails" + "-message",
-      defaultMessage: content.checkboxLabel,
-    }, {
-      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      ? {
+        class: sheet.classes.ErrorStyle,
+      }
+      : [])),
+      intl.formatMessage({
+        id: content.checkboxName + "-message",
+        defaultMessage: content.checkboxLabel,
+      }, {
+        labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+      }),
+      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
+        id: `errorMessage-${content.checkboxName}`,
+        defaultMessage: content.errorMessage,
+      }))))));
 }