@saasquatch/mint-components 1.12.1-5 → 1.12.1-7

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

@@ -0,0 +1,70 @@
+import { useState } from "@saasquatch/universal-hooks";
+import jsonpointer from "jsonpointer";
+import decode from "jwt-decode";
+import { useRegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
+export function usePortalGoogleRegistrationForm(props) {
+  const [emailValidationError, setEmailValidationError] = useState(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState();
+  const [showRegistrationForm, setShowRegistrationForm] = useState({
+    mode: "base",
+  });
+  const handleEmailSubmit = async (event) => {
+    const formControls = event.target.getFormControls();
+    let formData = {};
+    let errorMessage = null;
+    formControls.forEach((control) => {
+      if (!control.name || control.name !== "/email")
+        return;
+      jsonpointer.set(formData, control.name, control.value);
+      if (control.required && !control.value)
+        errorMessage = props.requiredFieldErrorMessage;
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({
+          control,
+          key: "email",
+          value: control.value,
+        });
+        if (validationError)
+          errorMessage = validationError;
+      }
+    });
+    if (errorMessage) {
+      setEmailValidationError(errorMessage);
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      initialData: {
+        ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
+        ...formData,
+      },
+    });
+    setShowRegistrationForm({ mode: "manual" });
+  };
+  const handleGoogleInit = (event) => {
+    try {
+      const res = decode(event.detail);
+      // TODO: Double check
+      setRegistrationFormState({
+        ...registrationFormState,
+        initialData: {
+          ...registrationFormState.initialData,
+          email: res.payload.email,
+          firstName: res.payload.given_name,
+          lastName: res.payload.family_name,
+        },
+      });
+      setShowRegistrationForm({ mode: "google" });
+    }
+    catch (e) {
+      console.error("Failed to decode Google Sign In credential JWT:", e);
+    }
+  };
+  return {
+    showRegistrationForm,
+    emailValidationError,
+    handleGoogleInit,
+    handleEmailSubmit,
+  };
+}

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

@@ -13,7 +13,9 @@ const defaultProps = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: { pageLabel: "Sign in to your account" },
+  content: {
+    pageLabel: "Sign in to your account",
+  },
 };
 const errorProps = {
   states: {
@@ -25,7 +27,9 @@ const errorProps = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: { pageLabel: "Sign in to your account" },
+  content: {
+    pageLabel: "Sign in to your account",
+  },
 };
 const loadingProps = {
   states: {
@@ -37,8 +41,28 @@ const loadingProps = {
   callbacks: {
     submit: async (e) => await e,
   },
-  content: { pageLabel: "Sign in to your account" },
+  content: {
+    pageLabel: "Sign in to your account",
+  },
 };
-export const Default = () => h(PortalLoginView, Object.assign({}, defaultProps));
+export const Default = () => (h("sqm-portal-login", { showGoogleLogin: false, demoData: { ...defaultProps } }));
+export const IsGoogle = () => (
+// <sqm-portal-login
+//   showGoogleLogin
+//   demoData={{
+//     ...defaultProps,
+//     content: {
+//       googleButton: <sl-button>Sign in with Google</sl-button>,
+//     },
+//     states: { ...defaultProps.states },
+//   }}
+// ></sqm-portal-login>
+h(PortalLoginView, Object.assign({}, defaultProps, { content: {
+    secondaryButton: (h("span", null,
+      "Don't have an account?",
+      " ",
+      h("sl-button", { style: { width: "60px" }, size: "large", type: "text" }, "Register"))),
+    googleButton: h("sl-button", null, "Sign in with Google"),
+  } })));
 export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
 export const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));

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

@@ -13,7 +13,13 @@ const style = {
     color: "#AAAAAA",
     margin: "0",
   },
-  ButtonsContainer: AuthButtonsContainer,
+  ButtonsContainer: {
+    ...AuthButtonsContainer,
+    gap: "var(--sl-spacing-medium)",
+    "& > *": {
+      margin: "0 !important",
+    },
+  },
 };
 const vanillaStyle = `
 :host {
@@ -41,5 +47,7 @@ export function PortalLoginView(props) {
         h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
+        content.googleButton && h("sl-menu-divider", null),
+        content.googleButton,
         content.secondaryButton))));
 }

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

@@ -1,9 +1,10 @@
 import { isDemo, navigation } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { PortalLoginView } from "./sqm-portal-login-view";
 import { usePortalLogin } from "./usePortalLogin";
+import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Microsite Login
  */
@@ -59,6 +60,14 @@ export class PortalLogin {
      * Displayed when the login fails due to a network error. The participant can try refreshing the page.
      */
     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?";
+    /**
+     * @undocumented
+     */
+    this.showGoogleLogin = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -66,11 +75,25 @@ export class PortalLogin {
     const { states, callbacks } = isDemo()
       ? useLoginDemo(this)
       : usePortalLogin(this);
+    const styles = {
+      RegisterButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = createStyleSheet(styles);
+    const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
         h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      googleButton: this.showGoogleLogin ? (h("sqm-google-sign-in", { onInitComplete: (res) => console.log(res) })) : null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("style", null, styleString),
+        this.showGoogleLogin ? (h("span", null,
+          this.registerCTA,
+          " ",
+          h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel))) : (h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel)))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -303,12 +326,54 @@ 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?\""
+    },
+    "showGoogleLogin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      },
+      "attribute": "show-google-login",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalLoginViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { googleButton?: VNode; forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -345,11 +410,23 @@ function useLoginDemo(props) {
       loading: false,
       forgotPasswordPath: "/forgotPassword",
       registerPath: "/register",
+      showLoginForm: "manual",
     },
     callbacks: {
       submit: async (_event) => {
         console.log("submit");
       },
     },
+    content: {
+      googleButton: null,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
+function useGoogleDemo() {
+  const [showLoginForm, setShowLoginForm] = useState({
+    mode: "manual",
+  });
+  return {
+    showLoginForm,
+  };
+}

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -31,7 +31,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegisterView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
@@ -61,9 +61,12 @@ export function PortalRegisterView(props) {
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
+        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
+      }
+        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || content.requiredFieldErrorMessage,
+        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view";
 export default {
-  title: "Components/Microsite Register Form New",
+  title: "Components/Microsite Portal Register",
 };
 const defaultProps = {
   states: {
@@ -96,10 +96,6 @@ export const FieldsHidden = () => {
     } }));
 };
 export const SlottedInputs = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps)));
-export const RegisterWithMarketingEmailsCheckbox = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
-    ...defaultProps.content,
-    emailOptIn: (h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
-  } })));
 export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
     ...defaultProps.content,
     terms: (h("p", null,

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

@@ -31,7 +31,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegistrationFormView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
@@ -45,8 +45,8 @@ export function PortalRegistrationFormView(props) {
       ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled) ? (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error)))),
-      content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), required: true, validationError: ({ value }) => {
+      states.showNameFields && h("sqm-name-fields", null),
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: true, required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -54,27 +54,29 @@ export function PortalRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.email) ? {
-        value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.email,
+        } }, (((_c = (_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.initialData) === null || _c === void 0 ? void 0 : _c.email) ? {
+        value: (_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.email,
       }
-        : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
+        : {}), (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.email) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
+        helpText: ((_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.validationErrors) === null || _j === void 0 ? void 0 : _j.email) ||
           content.requiredFieldErrorMessage,
       }
         : [])))),
-      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
-        value: (_q = (_p = states.registrationFormState) === null || _p === void 0 ? void 0 : _p.initialData) === null || _q === void 0 ? void 0 : _q.confirmPassword,
+      !(states.hideInputs || states.hidePasswords) && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
+      content.passwordField,
+      !(states.hideInputs || states.hidePasswords) &&
+        states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.disabled), required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
+        value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
       }
-        : {}), (((_s = (_r = states.registrationFormState) === null || _r === void 0 ? void 0 : _r.validationErrors) === null || _s === void 0 ? void 0 : _s.confirmPassword) ? {
+        : {}), (((_r = (_q = states.registrationFormState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_u = (_t = states.registrationFormState) === null || _t === void 0 ? void 0 : _t.validationErrors) === null || _u === void 0 ? void 0 : _u.confirmPassword) || content.requiredFieldErrorMessage,
+        helpText: ((_t = (_s = states.registrationFormState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
-      content.emailOptIn,
+      content.formData,
       content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, disabled: (_v = states.registrationFormState) === null || _v === void 0 ? void 0 : _v.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }

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

@@ -6,7 +6,7 @@ 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"},{"name":"emailOptIn","title":"Email Opt-in Fields"}]
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
  */
 export class PortalRegistrationForm {
   constructor() {
@@ -59,6 +59,12 @@ export class PortalRegistrationForm {
      * @uiName Hide default fields
      */
     this.hideInputs = false;
+    /**
+     * Shows the first name and last name fields
+     *
+     * @uiName Show name fields
+     */
+    this.showNameFields = false;
     /**
      * @uiName Header text
      */
@@ -141,7 +147,6 @@ export class PortalRegistrationForm {
       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" }),
-      emailOptIn: h("slot", { name: "emailOptIn" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -380,6 +385,27 @@ export class PortalRegistrationForm {
       "reflect": false,
       "defaultValue": "false"
     },
+    "showNameFields": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show name fields",
+            "name": "uiName"
+          }],
+        "text": "Shows the first name and last name fields"
+      },
+      "attribute": "show-name-fields",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "pageLabel": {
       "type": "string",
       "mutable": false,
@@ -699,7 +725,7 @@ export class PortalRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; showNameFields?: boolean; 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; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -736,6 +762,7 @@ function useRegisterDemo(props) {
       loading: false,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs || false,
+      showNameFields: props.showNameFields || false,
       customPasswordField: false,
       loginPath: "/login",
     },

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

@@ -51,7 +51,6 @@ export function usePortalRegistrationForm(props) {
   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();
-    console.log("Test 123");
     let formData = {};
     let validationErrors = {};
     formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
@@ -97,7 +96,6 @@ export function usePortalRegistrationForm(props) {
       validationErrors: {},
     });
     const { email, password } = formData;
-    console.log("form data is ", formData);
     delete formData.email;
     delete formData.password;
     delete formData.confirmPassword;
@@ -197,6 +195,7 @@ export function usePortalRegistrationForm(props) {
       registrationFormState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
+      showNameFields: props.showNameFields,
       loginPath: props.loginPath,
       enablePasswordValidation: !props.disablePasswordValidation,
     },

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -21,6 +21,21 @@ const sharebutton = (slot) => {
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
       h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
+const shareButtonsWithPromoCodes = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      h("sub", null, "Share with your friends:"),
+      h("sqm-share-code", null),
+      h("sqm-share-link", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
+      h("sqm-portal-container", { gap: "x-small" },
+        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
+        h("sqm-pagination", null)))));
+};
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },
     count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
@@ -43,6 +58,11 @@ export const TimelineAndShareButtons = () => {
     timeline("left", 3),
     sharebutton("right")));
 };
+export const OneTimeUsePromoCodes = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 4),
+    shareButtonsWithPromoCodes("right")));
+};
 export const StartAlignment = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "start" },
     timeline("left", 4),

package/dist/collection/components/sqm-referral-code/ReferralCode.stories.js

@@ -0,0 +1,60 @@
+import { h } from "@stencil/core";
+import { CopyTextView } from "../views/copy-text-view";
+import scenario from "./ReferralCode.feature";
+export default {
+  title: "Components/Referral Code",
+  parameters: {
+    scenario,
+  },
+};
+export const ReferralCode = () => {
+  return (h("sqm-referral-code", { tooltiptext: "Copied to Clipboard" }));
+};
+export const ShowNotificationText = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
+};
+export const ShowNotificationTextWithButton = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
+};
+export const ShowNotificationTextWithButtonBelow = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-below" }));
+};
+export const CustomTooltipText = () => {
+  return (h("sqm-referral-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+export const TextAlignCenter = () => {
+  return h("sqm-referral-code", { textAlign: "center" });
+};
+export const TextAlignRight = () => {
+  return h("sqm-referral-code", { textAlign: "right" });
+};
+export const CustomTooltipDuration = () => {
+  return (h("sqm-referral-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+export const CopyButton = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    isCopyIcon: false,
+    buttonStyle: "button-outside",
+  })));
+};
+export const CopyButtonBelow = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    buttonStyle: "button-below",
+  })));
+};
+export const Error = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    disabled: true,
+    open: true,
+    tooltiptext: "Copied!",
+    error: true,
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};