@saasquatch/mint-components 1.12.1-0 → 1.12.1-10

package/dist/cjs/sqm-portal-change-marketing.cjs.entry.js

@@ -0,0 +1,221 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./global-02e50f09.js');
+const index_module = require('./index.module-df530553.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+const cjs = require('./cjs-1066ec21.js');
+const JSS = require('./JSS-8503a151.js');
+const utils = require('./utils-6847bc06.js');
+const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmCheckboxFieldView = require('./sqm-checkbox-field-view-e0a31f2a.js');
+
+function PortalProfileView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-xxx-large)",
+    },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    index.h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      index.h(sqmCheckboxFieldView.CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      index.h("sl-button", { type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, error))))));
+}
+
+const GET_USER = index_module.dist.gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        marketingEmailOptIn
+      }
+    }
+  }
+`;
+const UPSERT_USER = index_module.dist.gql `
+  mutation ($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      marketingEmailOptIn
+    }
+  }
+`;
+// view doesn't tolerate undefined, even when we're loading
+const defaultFormState = {
+  marketingEmailOptIn: false,
+  errors: {},
+  error: "",
+};
+function usePortalProfile(props) {
+  const userIdent = index_module.Q();
+  const [success, setSuccess] = stencilHooks_module.useState(false);
+  const [userData, setUserData] = stencilHooks_module.useState(undefined);
+  const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
+  const userDataResponse = index_module.yn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER);
+  stencilHooks_module.useEffect(() => {
+    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
+      return;
+    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
+      setFormState((state) => {
+        var _a, _b, _c;
+        return ({
+          ...state,
+          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
+        });
+      });
+    }
+    else {
+      setUserData((state) => {
+        var _a;
+        return ({
+          ...state,
+          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
+        });
+      });
+      if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data)
+        setSuccess(true);
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
+    setFormState({
+      ...defaultFormState,
+      ...(_a = userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer,
+      ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
+    });
+  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
+      setFormState({
+        ...(_b = userDataResponse.data) === null || _b === void 0 ? void 0 : _b.viewer,
+        error: props.networkRequestMessage,
+      });
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
+  const onSubmit = (event) => {
+    var _a;
+    setSuccess(false);
+    const formData = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.jsonpointer.set(formData, key, value);
+    });
+    upsertUser({
+      id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
+      accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
+      marketingEmailOptIn: formData.marketingEmailOptIn,
+    });
+    setFormState((s) => ({ ...s, errors: {}, error: "" }));
+    return;
+  };
+  return {
+    states: {
+      success,
+      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
+      submitDisabled: false,
+      formState,
+      user: userData,
+      text: {
+        emailPreferencesHeader: props.emailPreferencesHeader,
+        marketingCheckboxLabel: props.marketingCheckboxLabel,
+        submitChangeButtonText: props.submitChangeButtonText,
+      },
+    },
+    callbacks: {
+      onSubmit,
+      setChecked: (value) => setFormState({ ...formState, marketingEmailOptIn: value }),
+    },
+  };
+}
+
+const PortalChangeMarketing = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Email preferences header
+     */
+    this.emailPreferencesHeader = "Email preferences";
+    /**
+     * @uiName Marketing checkbox label
+     */
+    this.marketingCheckboxLabel = "I want to receive marketing emails and promotions for this referral program from impact.com";
+    /**
+     * @uiName Submit changes button text
+     */
+    this.submitChangeButtonText = "Save";
+    /**
+     * @uiName Network request error message
+     * Displayed when the page fails to load due to a network error. The participant can try refreshing the page.
+     */
+    this.networkRequestMessage = "An error occurred while loading this page. Please refresh the page.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.isDemo()
+      ? usePortalProfileDemo(utils.getProps(this))
+      : usePortalProfile(utils.getProps(this));
+    return index.h(PortalProfileView, Object.assign({}, props));
+  }
+};
+function usePortalProfileDemo(props) {
+  return cjs.cjs({
+    states: {
+      success: false,
+      loading: false,
+      submitDisabled: false,
+      user: {
+        id: "01",
+        accountId: "111100000",
+        marketingEmailOptIn: false,
+      },
+      text: {
+        emailPreferencesHeader: props.emailPreferencesHeader,
+        marketingCheckboxLabel: props.marketingCheckboxLabel,
+        submitChangeButtonText: props.submitChangeButtonText,
+      },
+      formState: {
+        marketingEmailOptIn: false,
+        errors: null,
+        error: "",
+      },
+    },
+    callbacks: {
+      onSubmit: (e) => console.log(e),
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_portal_change_marketing = PortalChangeMarketing;

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

@@ -61,6 +61,7 @@ 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) => {
@@ -106,6 +107,7 @@ function usePortalRegistrationForm(props) {
       validationErrors: {},
     });
     const { email, password } = formData;
+    console.log("form data is ", formData);
     delete formData.email;
     delete formData.password;
     delete formData.confirmPassword;

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

@@ -22,6 +22,7 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-921704fb.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-a125ec5f.js');
+const sqmCheckboxFieldView = require('./sqm-checkbox-field-view-e0a31f2a.js');
 const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-292b5bf4.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
@@ -29,7 +30,7 @@ require('./utilities-cec9dd36.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-621348a6.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-c3e91cee.js');
+const ShadowViewAddon = require('./ShadowViewAddon-63b78308.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-e3b03a00.js');
 
@@ -10183,7 +10184,7 @@ const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"
 
 const leadSubmitTemplate = "<sqm-referral-iframe></sqm-referral-iframe>\n";
 
-const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n";
+const editProfileTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n  <sqm-portal-change-marketing></sqm-portal-change-marketing>\n</sqm-portal-container>\n";
 
 const activityTemplate = "<sqm-portal-protected-route\n  require-email-verification=\"true\"\n  redirect-to=\"/login\"\n  redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n  <sqm-text> <h1>Activity</h1></sqm-text>\n  <sqm-stat-container space=\"xxxx-large\"\n    ><sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/referralsCount\"\n      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n    >\n    <sqm-big-stat\n      flex-reverse=\"true\"\n      alignment=\"left\"\n      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n    >\n  </sqm-stat-container>\n  <sqm-referral-table>\n    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n    <sqm-referral-table-date-column\n      column-title=\"Referred\"\n      date-shown=\"dateReferralStarted\"\n    ></sqm-referral-table-date-column> </sqm-referral-table\n></sqm-portal-container>\n";
 
@@ -10747,7 +10748,7 @@ const defaultProps$b = {
     checked: false,
   },
   content: {
-    checkboxName: "agree",
+    checkboxName: "terms",
     checkboxLabel: "By signing up you agree to the {labelLink}",
     checkboxLabelLink: "https://example.com",
     checkboxLabelLinkText: "Terms and Conditions",
@@ -10780,16 +10781,16 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$c = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$b))));
-const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+const Default$c = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b))));
+const DefaultChecked = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
     ...defaultProps$b.states,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$b, { content: {
+const CustomLabel = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { content: {
     ...defaultProps$b.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$4 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+const Error$4 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
     ...defaultProps$b.states,
     registrationFormState: {
       validationErrors: {
@@ -10797,7 +10798,7 @@ const Error$4 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView
       },
     },
   } }))));
-const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
+const CustomError = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
     ...defaultProps$b.states,
     registrationFormState: {
       validationErrors: {
@@ -10845,7 +10846,7 @@ const CheckboxField = /*#__PURE__*/Object.freeze({
   TermsAndConditionsLongCustomLabel: TermsAndConditionsLongCustomLabel
 });
 
-const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n  A checkbox that is used to opt in for referral program marketing emails.\n\n    Background: A user is on the portal registration page\n        Given a user is viewing the \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has the following fields\n            | fields                      |\n            | first name                  |\n            | last name                   |\n            | email                       |\n            | password                    |\n            | Marketing Emails Checkbox   |\n    \n    @motivating\n    Scenario: Checkbox is optional by default\n        Given the user is filling out the registration form\n        And the name fields have valid input\n        And the email field has valid input\n        And the password field has valid input\n        And the checkbox is not checked\n        When they try to register\n        Then the form is submitted\n        And there is no error for the checkbox\n\n    Scenario: The form field name is provided by default\n        Given the customer has added a marketing emails checkbox to their registration form\n        Then the field name is automatically set to \"marketing-emails\"\n        And the name is configurable \n\n\n\n  ";
+const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n    A checkbox that is used to opt in for referral program marketing emails.\n\n    Background: A user is on the portal registration page\n        Given a user is viewing the \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has the following fields\n            | fields                    |\n            | first name                |\n            | last name                 |\n            | email                     |\n            | password                  |\n            | Marketing Emails Checkbox |\n\n    @motivating\n    Scenario: Checkbox is optional by default\n        Given the user is filling out the registration form\n        And the name fields have valid input\n        And the email field has valid input\n        And the password field has valid input\n        And the checkbox is not checked\n        When they try to register\n        Then the form is submitted\n        And there is no error for the checkbox\n\n    Scenario: The form field name is provided by default\n        Given the customer has added a marketing emails checkbox to their registration form\n        Then the field name is automatically set to \"marketingEmailOptIn\"\n        And the name is not configurable";
 
 const MarketingEmailsCheckbox_stories = {
   title: "Components/Marketing Emails Checkbox",

package/dist/collection/collection-manifest.json

@@ -48,6 +48,7 @@
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
     "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
+    "./components/sqm-portal-change-marketing/sqm-portal-change-marketing.js",
     "./components/sqm-portal-change-password/sqm-portal-change-password.js",
     "./components/sqm-portal-container/sqm-portal-container.js",
     "./components/sqm-portal-email-verification/sqm-portal-email-verification.js",

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

@@ -17,7 +17,7 @@ const defaultProps = {
     checked: false,
   },
   content: {
-    checkboxName: "agree",
+    checkboxName: "terms",
     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

@@ -54,19 +54,10 @@ export function CheckboxFieldView(props) {
     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: 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,
-      }))))));
+      } }, (!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), required: false }), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
 }

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

@@ -6,29 +6,23 @@ import { getProps } from "../../utils/utils";
 import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-view";
 import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
 /**
- * @uiName Form Checkbox Field
+ * @uiName Marketing Emails Checkbox Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
  * @exampleGroup Microsite Components
- * @example Form Checkbox Field - <sqm-marketing-emails-checkbox checkbox-label="I would like to receive marketing and promotional emails for this referral program" required="false" name="marketing-emails" ></sqm-marketing-emails-checkbox>
+ * @example Marketing Emails Checkbox - <sqm-marketing-emails-checkbox slot="emailOptIn" name="marketingEmails" checkbox-label="I would like to receive marketing and promotional emails for this referral program" required="false" name="marketing-emails" required="false" ></sqm-marketing-emails-checkbox>
  */
 export class MarketingEmailsCheckbox {
   constructor() {
     this.ignored = true;
-    /**
-     * This name is used as the key for this form field on submission. The name must be unique within this specific form.
-     * @uiName Checkbox name attribute
-     * @required
-     */
-    this.checkboxName = "marketing-emails";
     /**
      * @uiName Checkbox label
      * @uiWidget textArea
      */
     this.checkboxLabel = "I would like to receive marketing and promotional emails for this referral program";
     /**
-     * @uiName Required
+     * @undocumented
      */
-    this.checkboxRequired = false;
+    this.checkboxName = "marketingEmailOptIn";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -43,30 +37,6 @@ export class MarketingEmailsCheckbox {
   }
   static get is() { return "sqm-marketing-emails-checkbox"; }
   static get properties() { return {
-    "checkboxName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Checkbox name attribute",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "required"
-          }],
-        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
-      },
-      "attribute": "checkbox-name",
-      "reflect": false,
-      "defaultValue": "\"marketing-emails\""
-    },
     "checkboxLabel": {
       "type": "string",
       "mutable": false,
@@ -91,26 +61,26 @@ export class MarketingEmailsCheckbox {
       "reflect": false,
       "defaultValue": "\"I would like to receive marketing and promotional emails for this referral program\""
     },
-    "checkboxRequired": {
-      "type": "boolean",
+    "checkboxName": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
-            "text": "Required",
-            "name": "uiName"
+            "text": undefined,
+            "name": "undocumented"
           }],
         "text": ""
       },
-      "attribute": "checkbox-required",
+      "attribute": "checkbox-name",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"marketingEmailOptIn\""
     },
     "demoData": {
       "type": "unknown",

package/dist/collection/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+import { CheckboxFieldView } from "../sqm-checkbox-field/sqm-checkbox-field-view";
+export function PortalProfileView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-xxx-large)",
+    },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h(TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      h(CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      h("sl-button", { type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, error))))));
+}