diff --git a/packages/emails/advocate-marketing-email.html b/packages/emails/advocate-marketing-email.html new file mode 100644 index 0000000000..3d2aa15c3f --- /dev/null +++ b/packages/emails/advocate-marketing-email.html @@ -0,0 +1,1122 @@ + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ +
+ + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + diff --git a/packages/mint-components/CHANGELOG.md b/packages/mint-components/CHANGELOG.md index 92f55effaa..6f5bec868e 100644 --- a/packages/mint-components/CHANGELOG.md +++ b/packages/mint-components/CHANGELOG.md @@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [1.13.3] - 2025-05-22 + +### Changed + +- \ + - Added email opt-in slot to portal registration form + +### Added + +- \ + - checkbox to be used in the registration form to change the user's opt-in status +- \ + - checkbox to be used in the edit profile form to change the user's opt-in status + ## [1.13.2] - 2025-04-03 ### Changed @@ -1130,7 +1144,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - \ - \ -[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.13.2...HEAD +[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.13.3...HEAD +[1.13.3]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.13.3 [1.13.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.13.2 [1.13.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.13.1 [1.13.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.13.0 diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index 293d2540ac..444ba880d3 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.13.2", + "version": "1.13.3", "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg", "raisins": "docs/raisins.json", diff --git a/packages/mint-components/src/components/sqm-checkbox-field/CheckboxField.stories.tsx b/packages/mint-components/src/components/sqm-checkbox-field/CheckboxField.stories.tsx index c0a1aac6ad..4d52b9dac0 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/CheckboxField.stories.tsx +++ b/packages/mint-components/src/components/sqm-checkbox-field/CheckboxField.stories.tsx @@ -25,7 +25,7 @@ const defaultProps: CheckboxFieldViewProps = { checked: false, }, content: { - checkboxName: "agree", + checkboxName: "terms", checkboxLabel: "By signing up you agree to the {labelLink}", checkboxLabelLink: "https://example.com", checkboxLabelLinkText: "Terms and Conditions", diff --git a/packages/mint-components/src/components/sqm-checkbox-field/readme.md b/packages/mint-components/src/components/sqm-checkbox-field/readme.md index b96a7aad75..41257ff931 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/readme.md +++ b/packages/mint-components/src/components/sqm-checkbox-field/readme.md @@ -7,15 +7,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | -| `checkboxLabel` | `checkbox-label` | | `string` | `"By signing up you agree to the {labelLink}"` | -| `checkboxLabelLink` | `checkbox-label-link` | Used with link text if the checkbox label contains {labelLink} | `string` | `"https://example.com"` | -| `checkboxLabelLinkText` | `checkbox-label-link-text` | | `string` | `"Terms and Conditions"` | -| `checkboxName` | `checkbox-name` | This name is used as the key for this form field on submission. The name must be unique within this specific form. | `string` | `undefined` | -| `checkboxOptional` | `checkbox-optional` | | `boolean` | `false` | -| `demoData` | -- | | `{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }` | `undefined` | -| `errorMessage` | `error-message` | | `string` | `"Must be checked"` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | +| `checkboxLabel` | `checkbox-label` | | `string` | `"By signing up you agree to the {labelLink}"` | +| `checkboxLabelLink` | `checkbox-label-link` | Used with link text if the checkbox label contains {labelLink} | `string` | `"https://example.com"` | +| `checkboxLabelLinkText` | `checkbox-label-link-text` | | `string` | `"Terms and Conditions"` | +| `checkboxName` | `checkbox-name` | This name is used as the key for this form field on submission. The name must be unique within this specific form. | `string` | `undefined` | +| `checkboxOptional` | `checkbox-optional` | | `boolean` | `false` | +| `demoData` | -- | | `{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }` | `undefined` | +| `errorMessage` | `error-message` | | `string` | `"Must be checked"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx index 18c518f9e8..01ec4689c5 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx +++ b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx @@ -15,7 +15,7 @@ export interface CheckboxFieldViewProps { checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; - errorMessage: string; + errorMessage?: string; }; callbacks: { setChecked: Function; @@ -85,16 +85,12 @@ export function CheckboxFieldView(props: CheckboxFieldViewProps) { e.target.value = e.target.checked; callbacks.setChecked(e.target.value); }} - {...(!content.checkboxOptional ? { required: true } : [])} + {...(!content.checkboxOptional ? { required: false } : [])} disabled={ states.registrationFormState?.loading || states.registrationFormState?.disabled } - {...(!states.checked && validationErrors?.[content.checkboxName] - ? { - class: sheet.classes.ErrorStyle, - } - : [])} + required={false} > {intl.formatMessage( { @@ -109,14 +105,6 @@ export function CheckboxFieldView(props: CheckboxFieldViewProps) { ), } )} - {!states.checked && validationErrors?.[content.checkboxName] && ( -

- {intl.formatMessage({ - id: `errorMessage-${content.checkboxName}`, - defaultMessage: content.errorMessage, - })} -

- )} ); diff --git a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx index 478cd39cc2..18eafa4b52 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx +++ b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx @@ -15,7 +15,7 @@ import { useCheckboxField } from "./useCheckboxField"; * @uiName Form Checkbox Field * @validParents ["sqm-portal-register","sqm-portal-registration-form"] * @exampleGroup Microsite Components - * @example Form Checkbox Field - + * @example Form Checkbox Field - */ @Component({ tag: "sqm-checkbox-field", @@ -42,17 +42,17 @@ export class CheckboxField { * * @uiName Checkbox label link */ - @Prop() checkboxLabelLink: string = "https://example.com"; + @Prop() checkboxLabelLink?: string = "https://example.com"; /** * @uiName Checkbox label link lext */ - @Prop() checkboxLabelLinkText: string = "Terms and Conditions"; + @Prop() checkboxLabelLinkText?: string = "Terms and Conditions"; /** * @uiName Unchecked error message */ - @Prop() errorMessage: string = "Must be checked"; + @Prop() errorMessage?: string = "Must be checked"; /** * @uiName Optional diff --git a/packages/mint-components/src/components/sqm-form-message/readme.md b/packages/mint-components/src/components/sqm-form-message/readme.md index 04d7023732..a5c63501aa 100644 --- a/packages/mint-components/src/components/sqm-form-message/readme.md +++ b/packages/mint-components/src/components/sqm-form-message/readme.md @@ -21,6 +21,7 @@ - [sqm-coupon-code](../sqm-coupon-code) - [sqm-edit-profile](../sqm-edit-profile) - [sqm-instant-access-registration](../sqm-instant-access-registration) + - [sqm-portal-change-marketing](../sqm-portal-change-marketing) - [sqm-portal-change-password](../sqm-portal-change-password) - [sqm-portal-email-verification](../sqm-portal-email-verification) - [sqm-portal-forgot-password](../sqm-portal-forgot-password) @@ -42,6 +43,7 @@ graph TD; sqm-coupon-code --> sqm-form-message sqm-edit-profile --> sqm-form-message sqm-instant-access-registration --> sqm-form-message + sqm-portal-change-marketing --> sqm-form-message sqm-portal-change-password --> sqm-form-message sqm-portal-email-verification --> sqm-form-message sqm-portal-forgot-password --> sqm-form-message diff --git a/packages/mint-components/src/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.tsx b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.tsx new file mode 100644 index 0000000000..8bad4d8531 --- /dev/null +++ b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.tsx @@ -0,0 +1,13 @@ +import { h } from "@stencil/core"; +import scenario from "./sqm-marketing-emails-checkbox.feature"; + +export default { + title: "Components/Marketing Emails Checkbox", + parameters: { + scenario, + }, +}; + +export const Default = () => { + return ; +}; diff --git a/packages/mint-components/src/components/sqm-marketing-emails-checkbox/readme.md b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/readme.md new file mode 100644 index 0000000000..bc1a721444 --- /dev/null +++ b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/readme.md @@ -0,0 +1,32 @@ +# sqm-marketing-emails-checkbox + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| `checkboxLabel` | `checkbox-label` | | `string` | `"I would like to receive marketing and promotional emails for this referral program"` | +| `checkboxName` | `checkbox-name` | | `string` | `"marketingEmailOptIn"` | +| `demoData` | -- | | `{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }` | `undefined` | + + +## Dependencies + +### Used by + + - [sqm-stencilbook](../sqm-stencilbook) + +### Graph +```mermaid +graph TD; + sqm-stencilbook --> sqm-marketing-emails-checkbox + style sqm-marketing-emails-checkbox fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.feature b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.feature new file mode 100644 index 0000000000..4784b69d8e --- /dev/null +++ b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.feature @@ -0,0 +1,47 @@ +@owner:zach +@author:zach +Feature: Marketing Emails Checkbox + + A checkbox that is used to opt in for marketing emails. + + Background: The microsite registration form contains a marketing emails checkbox + + Scenario: The registration form can be configured to include a marketing emails checkbox + Given a user is viewing the "/register" + And "/register" contains the registration form + And they have added a marketing emails checkbox to the form in the content editor + Then the registration form has the following fields + | fields | + | first name | + | last name | + | email | + | password | + | Marketing Emails Checkbox | + + + Scenario: The user can opt in to marketing emails + Given the user is filling out the registration form + And the fields have valid input + And the marketing emails checkbox is checked + When they try to register + Then the form is submitted + And there are no errors + And the "marketingEmailOptIn" value is set to true + And the user is opted in to marketing emails + + + @motivating + Scenario: Checkbox is optional by default + Given the user is filling out the registration form + And the name fields have valid input + And the email field has valid input + And the password field has valid input + And the checkbox is not checked + When they try to register + Then the form is submitted + And there is no error for the checkbox + + Scenario: The form field name is provided by default + Given the customer has added a marketing emails checkbox to their registration form + Then the field name is automatically set to "marketingEmailOptIn" + And the name is not configurable \ No newline at end of file diff --git a/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.tsx b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.tsx new file mode 100644 index 0000000000..6ed0e70e31 --- /dev/null +++ b/packages/mint-components/src/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.tsx @@ -0,0 +1,82 @@ +import { isDemo } from "@saasquatch/component-boilerplate"; +import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, h, Prop, State } from "@stencil/core"; +import deepmerge from "deepmerge"; +import { DemoData } from "../../global/demo"; +import { getProps } from "../../utils/utils"; +import { + CheckboxFieldView, + CheckboxFieldViewProps, +} from "../sqm-checkbox-field/sqm-checkbox-field-view"; +import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField"; + +/** + * @uiName Marketing Emails Checkbox Field + * @validParents ["sqm-portal-register","sqm-portal-registration-form"] + * @requiredFeatures ["MARKETING_EMAILS"] + */ +@Component({ + tag: "sqm-marketing-emails-checkbox", +}) +export class MarketingEmailsCheckbox { + @State() + ignored = true; + + /** + * @uiName Checkbox label + * @uiWidget textArea + */ + @Prop() checkboxLabel: string = + "I would like to receive marketing and promotional emails for this referral program"; + + /** + * @undocumented + */ + @Prop() checkboxName: string = "marketingEmailOptIn"; + + /** + * @undocumented + * @uiType object + */ + @Prop() demoData?: DemoData; + + constructor() { + withHooks(this); + } + + disconnectedCallback() {} + + render() { + const content = { + ...getProps(this), + }; + + const { states, callbacks } = isDemo() + ? useCheckboxFieldDemo(this) + : useCheckboxField(this); + return ( + + ); + } +} +function useCheckboxFieldDemo( + props: MarketingEmailsCheckbox +): Partial { + return deepmerge( + { + states: { + registrationFormState: {}, + checked: false, + }, + callbacks: { + setChecked: () => {}, + }, + }, + props.demoData || {}, + { arrayMerge: (_, a) => a } + ); +} diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/ChangeMarketing.stories.tsx b/packages/mint-components/src/components/sqm-portal-change-marketing/ChangeMarketing.stories.tsx new file mode 100644 index 0000000000..2247eaeb5c --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/ChangeMarketing.stories.tsx @@ -0,0 +1,76 @@ +import { h } from "@stencil/core"; +import { ChangeMarktingView } from "./sqm-portal-change-marketing-view"; + +export default { + title: "Components/Change Marketing Emails Status", +}; + +const defaultProps = { + states: { + success: false, + loading: false, + submitDisabled: false, + formState: { + marketingEmailOptIn: false, + errors: null, + error: "", + }, + user: { + id: "zach", + accountId: "zach", + marketingEmailOptIn: false, + }, + text: { + emailPreferencesHeader: "Email preferences", + marketingCheckboxLabel: + "I want to receive marketing emails and promotions for this referral program from impact.com", + submitChangeButtonText: "Save", + successMessage: "Opt-in preference has been changed.", + }, + }, + callbacks: { + onSubmit: (props: any) => console.log(props), + setChecked: (value: boolean) => console.log(value), + }, +}; + +export const Default = () => { + return ; +}; + +export const Loading = () => { + return ( + + ); +}; + +export const Error = () => { + return ( + + ); +}; + +export const Success = () => { + return ( + + ); +}; diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md new file mode 100644 index 0000000000..18667924e9 --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md @@ -0,0 +1,40 @@ +# sqm-portal-profile + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; formState: { marketingEmailOptIn: boolean; errors: any; error: string; }; user: { id: string; accountId: string; marketingEmailOptIn: boolean; }; text: { emailPreferencesHeader: string; marketingCheckboxLabel: string; submitChangeButtonText: string; successMessage: string; }; }; }` | `undefined` | +| `emailPreferencesHeader` | `email-preferences-header` | | `string` | `"Email preferences"` | +| `marketingCheckboxLabel` | `marketing-checkbox-label` | | `string` | `"I want to receive marketing emails and promotions for this referral program from impact.com"` | +| `networkRequestMessage` | `network-request-message` | Displayed when the page fails to load due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while loading this page. Please refresh the page."` | +| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `"Save"` | +| `successMessage` | `success-message` | | `string` | `"Opt-in preference has been changed."` | + + +## Dependencies + +### Used by + + - [sqm-stencilbook](../sqm-stencilbook) + +### Depends on + +- [sqm-form-message](../sqm-form-message) + +### Graph +```mermaid +graph TD; + sqm-portal-change-marketing --> sqm-form-message + sqm-stencilbook --> sqm-portal-change-marketing + style sqm-portal-change-marketing fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.tsx b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.tsx new file mode 100644 index 0000000000..564672f607 --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.tsx @@ -0,0 +1,115 @@ +import { h } from "@stencil/core"; +import { createStyleSheet } from "../../styling/JSS"; +import { CheckboxFieldView } from "../sqm-checkbox-field/sqm-checkbox-field-view"; +import { TextSpanView } from "../sqm-text-span/sqm-text-span-view"; + +export interface ChangeMarketingViewProps { + states: { + success: boolean; + loading: boolean; + submitDisabled: boolean; + formState: { + marketingEmailOptIn: boolean; + errors: any; + error: string; + }; + user: { + id: string; + accountId: string; + marketingEmailOptIn: boolean; + }; + text: { + emailPreferencesHeader: string; + marketingCheckboxLabel: string; + submitChangeButtonText: string; + successMessage: string; + }; + }; + callbacks: { + onSubmit: (props: any) => void; + setChecked: (value: boolean) => void; + }; +} + +export function ChangeMarktingView(props: ChangeMarketingViewProps) { + const { states, callbacks } = props; + + const { text, formState } = states; + + const { error } = formState; + + const style = { + Container: { + display: "flex", + flexDirection: "column", + gap: "var(--sl-spacing-x-small)", + padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)", + }, + + SubmitButton: { marginBottom: "var(--sl-spacing-medium)" }, + + Error: { + "&::part(erroralert-base)": { + "margin-bottom": "15px", + }, + }, + Success: { + "&::part(successalert-base)": { + "margin-bottom": "15px", + }, + }, + }; + + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); + + return ( +
+ + + {text.emailPreferencesHeader} + + + + + {text.submitChangeButtonText} + + {error && ( + +
{error}
+ + )} + {states.success && ( + +
{states.text.successMessage}
+ + )} + +
+ ); +} diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.feature b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.feature new file mode 100644 index 0000000000..b6e7c935e0 --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.feature @@ -0,0 +1,40 @@ +@owner:sam +@author:sam +Feature: Portal Change Marketing Opt-in Status + + A small form that is used to opt in or out of marketing emails. + + Background: A user is on the portal edit profile page + Given a user is viewing the "/editProfile" + And "/editProfile" contains the "" component with default props + And the heading "Email preferences" is shown + And a checkbox with the following label is shown + """ + I want to receive marketing emails and promotions for this referral program from impact.com + """ + And a "Save" button is shown + + + @motivating + Scenario Outline: Checkbox value is based off the logged in user's opt in status + Given the user sees the email preferences component + And the user opted into marketing emails + Then the checkbox + Examples: + | mayBe | isChecked | + | is | is checked | + | is not | is not checked | + + @motivating + Scenario Outline: User can change their opt in status + Given the user sees the email preferences component + And the user opted into marketing emails + When the user the checkbox + And save is clicked + Then the participant's "marketingEmailOptIn" status is + When the page is refreshed + Then the checkbox is + Examples: + | mayBe | checks | status | newStatus | + | is not | checks | true | checked | + | is not | unchecks | false | unchecked | \ No newline at end of file diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.tsx b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.tsx new file mode 100644 index 0000000000..d2a52b18c0 --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/sqm-portal-change-marketing.tsx @@ -0,0 +1,107 @@ +import { Component, h, Prop, State } from "@stencil/core"; +import { withHooks } from "@saasquatch/stencil-hooks"; +import { + ChangeMarktingView, + ChangeMarketingViewProps, +} from "./sqm-portal-change-marketing-view"; +import { usePortalProfile } from "./usePortalChangeMarketing"; +import { getProps } from "../../utils/utils"; +import { isDemo } from "@saasquatch/component-boilerplate"; +import { DemoData } from "../../global/demo"; +import deepmerge from "deepmerge"; + +/** + * @uiName Change Marketing Opt in Status + * @requiredFeatures ["MARKETING_EMAILS"] + */ +@Component({ + tag: "sqm-portal-change-marketing", + shadow: true, +}) +export class PortalChangeMarketing { + @State() + ignored = true; + + /** + * @uiName Email preferences header + */ + @Prop() emailPreferencesHeader: string = "Email preferences"; + + /** + * @uiName Marketing checkbox label + */ + @Prop() marketingCheckboxLabel: string = + "I want to receive marketing emails and promotions for this referral program from impact.com"; + + /** + * @uiName Submit changes button text + */ + @Prop() submitChangeButtonText: string = "Save"; + + /** + * Displayed when the page fails to load due to a network error. The participant can try refreshing the page. + * + * @uiName Network request error message + */ + @Prop() networkRequestMessage: string = + "An error occurred while loading this page. Please refresh the page."; + + /** + * @uiName Successful update message + */ + @Prop() successMessage: string = "Opt-in preference has been changed."; + + /** + * @undocumented + * @uiType object + */ + @Prop() demoData?: DemoData; + + constructor() { + withHooks(this); + } + disconnectedCallback() {} + + render() { + const props = isDemo() + ? usePortalProfileDemo(getProps(this)) + : usePortalProfile(getProps(this)); + return ; + } +} + +function usePortalProfileDemo( + props: PortalChangeMarketing +): ChangeMarketingViewProps { + return deepmerge( + { + states: { + success: false, + loading: false, + submitDisabled: false, + user: { + id: "01", + accountId: "111100000", + marketingEmailOptIn: false, + }, + text: { + emailPreferencesHeader: props.emailPreferencesHeader, + marketingCheckboxLabel: props.marketingCheckboxLabel, + submitChangeButtonText: props.submitChangeButtonText, + successMessage: props.successMessage, + }, + formState: { + marketingEmailOptIn: false, + errors: null, + error: "", + }, + }, + callbacks: { + onSubmit: (e) => console.log(e), + setChecked: () => {}, + }, + }, + props.demoData || {}, + { arrayMerge: (_, a) => a } + ); +} diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/usePortalChangeMarketing.ts b/packages/mint-components/src/components/sqm-portal-change-marketing/usePortalChangeMarketing.ts new file mode 100644 index 0000000000..1ef85d914f --- /dev/null +++ b/packages/mint-components/src/components/sqm-portal-change-marketing/usePortalChangeMarketing.ts @@ -0,0 +1,138 @@ +import { + useMutation, + useQuery, + useUserIdentity, +} from "@saasquatch/component-boilerplate"; +import { useEffect, useState } from "@saasquatch/universal-hooks"; +import { gql } from "graphql-request"; +import jsonpointer from "jsonpointer"; +import { PortalChangeMarketing } from "./sqm-portal-change-marketing"; +import { ChangeMarketingViewProps } from "./sqm-portal-change-marketing-view"; + +const GET_USER = gql` + query { + viewer { + ... on User { + id + accountId + marketingEmailOptIn + } + } + } +`; + +const UPSERT_USER = 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: "", +}; + +export function usePortalProfile( + props: PortalChangeMarketing +): ChangeMarketingViewProps { + const userIdent = useUserIdentity(); + + const [success, setSuccess] = useState(false); + + const [userData, setUserData] = useState(undefined); + + const [formState, setFormState] = useState<{ + marketingEmailOptIn: boolean; + errors: any; + error: string; + }>(defaultFormState); + + const userDataResponse = useQuery(GET_USER, {}, !userIdent?.jwt); + + const [upsertUser, upsertUserResponse] = useMutation(UPSERT_USER); + + useEffect(() => { + if (upsertUserResponse?.loading) return; + + if (upsertUserResponse?.errors) { + setFormState((state) => ({ + ...state, + error: upsertUserResponse?.errors?.response?.errors?.[0].message, + })); + } else { + setUserData((state) => ({ + ...state, + ...upsertUserResponse?.data?.upsertUser, + })); + if (upsertUserResponse?.data) setSuccess(true); + } + }, [upsertUserResponse?.loading]); + + useEffect(() => { + setUserData((data) => ({ ...data, ...userDataResponse?.data?.viewer })); + + setFormState({ + ...defaultFormState, + ...userDataResponse.data?.viewer, + ...upsertUserResponse.data?.upsertUser, + }); + }, [userDataResponse?.data]); + + useEffect(() => { + if (upsertUserResponse?.errors?.message) { + setFormState({ + ...userDataResponse.data?.viewer, + error: props.networkRequestMessage, + }); + } + }, [upsertUserResponse?.errors]); + + const onSubmit = (event) => { + setSuccess(false); + + const formData = event.detail?.formData; + formData?.forEach((value, key) => { + jsonpointer.set(formData, key, value); + }); + + upsertUser({ + userInput: { + id: userIdent?.id, + accountId: userIdent?.accountId, + marketingEmailOptIn: Boolean(formData.marketingEmailOptIn), + }, + }); + setFormState((s) => ({ ...s, errors: {}, error: "" })); + return; + }; + + return { + states: { + success, + loading: userDataResponse?.loading || upsertUserResponse.loading, + submitDisabled: false, + formState, + user: userData, + text: { + emailPreferencesHeader: props.emailPreferencesHeader, + marketingCheckboxLabel: props.marketingCheckboxLabel, + submitChangeButtonText: props.submitChangeButtonText, + successMessage: props.successMessage, + }, + }, + callbacks: { + onSubmit, + setChecked: (value: boolean) => + setFormState({ ...formState, marketingEmailOptIn: value }), + }, + }; +} diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md index 9a54682eec..6383c5ff5c 100644 --- a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md +++ b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md @@ -7,17 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined` | -| `emailVerificationHeader` | `email-verification-header` | | `string` | `"Verify your email"` | -| `networkErrorMessage` | `network-error-message` | | `string` | `"An error occurred while verifying your password. Please refresh the page."` | -| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `"/verifyEmail"` | -| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `"Re-send Email"` | -| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `"Checking verification status"` | -| `verificationResentMessage` | `verification-resent-message` | | `string` | `"Your verification email has been resent successfully"` | -| `verificationStatusMessage` | `verification-status-message` | | `string` | `"Checking verification status in {countdown}"` | -| `verifyMessage` | `verify-message` | | `string` | `"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email."` | +| Property | Attribute | Description | Type | Default | +| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined` | +| `emailVerificationHeader` | `email-verification-header` | | `string` | `"Verify your email"` | +| `networkErrorMessage` | `network-error-message` | Displayed when your verification email fails to send due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while verifying your password. Please refresh the page."` | +| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `"/verifyEmail"` | +| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `"Re-send Email"` | +| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `"Checking verification status"` | +| `verificationResentMessage` | `verification-resent-message` | | `string` | `"Your verification email has been resent successfully"` | +| `verificationStatusMessage` | `verification-status-message` | | `string` | `"Checking verification status in {countdown}"` | +| `verifyMessage` | `verify-message` | | `string` | `"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email."` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification.tsx b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification.tsx index 9608e411cf..2ae2e1b160 100644 --- a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification.tsx +++ b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification.tsx @@ -67,8 +67,8 @@ export class PortalEmailVerification { "Your verification email has been resent successfully"; /** - * @uiName Network error message * Displayed when your verification email fails to send due to a network error. The participant can try refreshing the page. + * @uiName Network error message */ @Prop() networkErrorMessage: string = "An error occurred while verifying your password. Please refresh the page."; diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md index dee609a52b..11b3f34d9d 100644 --- a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md +++ b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md @@ -7,17 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }` | `undefined` | -| `emailLabel` | `email-label` | | `string` | `"Email"` | -| `headerText` | `header-text` | | `string` | `"Enter your email below to receive a password reset link."` | -| `loginPath` | `login-path` | | `string` | `"/login"` | -| `loginText` | `login-text` | | `string` | `"Sign In"` | -| `networkErrorMessage` | `network-error-message` | | `string` | `"An error occurred while loading this page. Please refresh the page."` | -| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `"/resetPassword"` | -| `submitLabel` | `submit-label` | | `string` | `"Request Password Reset"` | -| `successAlertText` | `success-alert-text` | | `string` | `"If an account with that email exists, a password reset email will be sent."` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }` | `undefined` | +| `emailLabel` | `email-label` | | `string` | `"Email"` | +| `headerText` | `header-text` | | `string` | `"Enter your email below to receive a password reset link."` | +| `loginPath` | `login-path` | | `string` | `"/login"` | +| `loginText` | `login-text` | | `string` | `"Sign In"` | +| `networkErrorMessage` | `network-error-message` | Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while loading this page. Please refresh the page."` | +| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `"/resetPassword"` | +| `submitLabel` | `submit-label` | | `string` | `"Request Password Reset"` | +| `successAlertText` | `success-alert-text` | | `string` | `"If an account with that email exists, a password reset email will be sent."` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password.tsx b/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password.tsx index 275e6c425f..06b2e332e5 100644 --- a/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password.tsx +++ b/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password.tsx @@ -60,8 +60,8 @@ export class PortalForgotPassword { @Prop() loginText: string = "Sign In"; /** - * @uiName Network error message * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page. + * @uiName Network error message */ @Prop() networkErrorMessage: string = "An error occurred while loading this page. Please refresh the page."; diff --git a/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx b/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx index bbd028e25f..18c2e02782 100644 --- a/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx +++ b/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx @@ -78,8 +78,8 @@ export class PortalLogin { @Prop() pageLabel: string = "Sign in to your account"; /** - * @uiName Network error message * Displayed when the login fails due to a network error. The participant can try refreshing the page. + * @uiName Network error message */ @Prop() networkErrorMessage: string = "An error occurred while logging you in. Please refresh the page and try again."; diff --git a/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx b/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx index b143123d8f..8c45aaa66e 100644 --- a/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx +++ b/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx @@ -132,6 +132,18 @@ export const SlottedInputs = () => ( ); +export const RegisterWithMarketingEmailsCheckbox = () => ( + + ), + }} + /> +); + export const TermsAndConditions = () => ( )} + {content.emailOptIn} {content.terms}
), terms: , + emailOptIn: , emailLabel: this.emailLabel, passwordLabel: this.passwordLabel, submitLabel: this.submitLabel, diff --git a/packages/mint-components/src/components/sqm-portal-registration-form/usePortalRegistrationForm.tsx b/packages/mint-components/src/components/sqm-portal-registration-form/usePortalRegistrationForm.tsx index 756535d688..4f9f7eaed2 100644 --- a/packages/mint-components/src/components/sqm-portal-registration-form/usePortalRegistrationForm.tsx +++ b/packages/mint-components/src/components/sqm-portal-registration-form/usePortalRegistrationForm.tsx @@ -88,7 +88,6 @@ export function usePortalRegistrationForm(props: PortalRegistrationForm) { const submit = async (event: any) => { let formControls = event.target.getFormControls(); - let formData: Record = {}; let validationErrors: Record = {}; diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md index 741336d8c3..87754a376f 100644 --- a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md +++ b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md @@ -7,28 +7,28 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -| `codeInvalidText` | `code-invalid-text` | | `string` | `"The password reset code is invalid or has expired, please try again."` | -| `confirmPassword` | `confirm-password` | | `boolean` | `false` | -| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `"Confirm Password"` | -| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `"Continue"` | -| `demoData` | -- | | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; resetSuccessText?: string; passwordMismatchText?: string; codeInvalidText?: string; }; }; }` | `undefined` | -| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `"Password must meet the following requirements:"` | -| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `"/"` | -| `hasErrorText` | `has-error-text` | | `string` | `"contain at least 1 number or symbol"` | -| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `"contain at least 1 lowercase character"` | -| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `"Password has met all requirements"` | -| `minErrorText` | `min-error-text` | | `string` | `"be a minimum of 8 characters"` | -| `networkErrorMessage` | `network-error-message` | | `string` | `"An error occurred while resetting your password. Please refresh the page and try again."` | -| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `"/"` | -| `passwordFieldLabel` | `password-field-label` | | `string` | `"New Password"` | -| `passwordMismatchText` | `password-mismatch-text` | | `string` | `"Passwords do not match."` | -| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `"Password reset"` | -| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `"Reset Password"` | -| `resetPasswordHeader` | `reset-password-header` | | `string` | `"Reset your password"` | -| `resetSuccessText` | `reset-success-text` | | `string` | `"Your password has been reset and you are being redirected. If you are not redirected, please click Continue."` | -| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `"contain at least 1 uppercase character"` | +| Property | Attribute | Description | Type | Default | +| ----------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | +| `codeInvalidText` | `code-invalid-text` | | `string` | `"The password reset code is invalid or has expired, please try again."` | +| `confirmPassword` | `confirm-password` | | `boolean` | `false` | +| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `"Confirm Password"` | +| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `"Continue"` | +| `demoData` | -- | | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; resetSuccessText?: string; passwordMismatchText?: string; codeInvalidText?: string; }; }; }` | `undefined` | +| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `"Password must meet the following requirements:"` | +| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `"/"` | +| `hasErrorText` | `has-error-text` | | `string` | `"contain at least 1 number or symbol"` | +| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `"contain at least 1 lowercase character"` | +| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `"Password has met all requirements"` | +| `minErrorText` | `min-error-text` | | `string` | `"be a minimum of 8 characters"` | +| `networkErrorMessage` | `network-error-message` | Displayed when the password reset fails due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while resetting your password. Please refresh the page and try again."` | +| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `"/"` | +| `passwordFieldLabel` | `password-field-label` | | `string` | `"New Password"` | +| `passwordMismatchText` | `password-mismatch-text` | | `string` | `"Passwords do not match."` | +| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `"Password reset"` | +| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `"Reset Password"` | +| `resetPasswordHeader` | `reset-password-header` | | `string` | `"Reset your password"` | +| `resetSuccessText` | `reset-success-text` | | `string` | `"Your password has been reset and you are being redirected. If you are not redirected, please click Continue."` | +| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `"contain at least 1 uppercase character"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password.tsx b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password.tsx index 42d00038c5..864ddcde79 100644 --- a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password.tsx +++ b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password.tsx @@ -129,8 +129,8 @@ export class PortalResetPassword { "Your password has been reset and you are being redirected. If you are not redirected, please click Continue."; /** - * @uiName Network error message * Displayed when the password reset fails due to a network error. The participant can try refreshing the page. + * @uiName Network error message */ @Prop() networkErrorMessage: string = "An error occurred while resetting your password. Please refresh the page and try again."; diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md index 22350d6488..de05c6f176 100644 --- a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md +++ b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md @@ -7,16 +7,16 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -| `continueText` | `continue-text` | | `string` | `"Continue"` | -| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` | -| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `"/"` | -| `networkErrorMessage` | `network-error-message` | | `string` | `"An error occurred while verifying your email. Please refresh the page and try again."` | -| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `"/"` | -| `verifyEmailText` | `verify-email-text` | | `string` | `"Verify your email"` | -| `verifyInvalidText` | `verify-invalid-text` | | `string` | `"The email verification code is invalid or has expired, please try again."` | -| `verifySuccessText` | `verify-success-text` | | `string` | `"Your email has been verified and you are being redirected. If you are not redirected, please click Continue."` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | +| `continueText` | `continue-text` | | `string` | `"Continue"` | +| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` | +| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `"/"` | +| `networkErrorMessage` | `network-error-message` | Displayed when the email verification fails due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while verifying your email. Please refresh the page and try again."` | +| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `"/"` | +| `verifyEmailText` | `verify-email-text` | | `string` | `"Verify your email"` | +| `verifyInvalidText` | `verify-invalid-text` | | `string` | `"The email verification code is invalid or has expired, please try again."` | +| `verifySuccessText` | `verify-success-text` | | `string` | `"Your email has been verified and you are being redirected. If you are not redirected, please click Continue."` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/sqm-portal-verify-email.tsx b/packages/mint-components/src/components/sqm-portal-verify-email/sqm-portal-verify-email.tsx index 8c560e5e31..269e735c27 100644 --- a/packages/mint-components/src/components/sqm-portal-verify-email/sqm-portal-verify-email.tsx +++ b/packages/mint-components/src/components/sqm-portal-verify-email/sqm-portal-verify-email.tsx @@ -67,8 +67,8 @@ export class PortalVerifyEmail { @Prop() continueText: string = "Continue"; /** - * @uiName Network error message * Displayed when the email verification fails due to a network error. The participant can try refreshing the page. + * @uiName Network error message */ @Prop() networkErrorMessage: string = "An error occurred while verifying your email. Please refresh the page and try again."; diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md index c01beeaa2c..739f10e3ee 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/readme.md +++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md @@ -36,6 +36,8 @@ - [sqm-password-field](../sqm-password-field) - [sqm-portal-login](../sqm-portal-login) - [sqm-portal-register](../sqm-portal-register) +- [sqm-checkbox-field](../sqm-checkbox-field) +- [sqm-portal-change-marketing](../sqm-portal-change-marketing) - [sqm-table-row](../sqm-table-row) - [sqm-table-cell](../sqm-table-cell) - [sqm-referral-table-user-cell](../sqm-referral-table/cells) @@ -49,7 +51,7 @@ - [sqm-hero](../sqm-hero) - [sqm-portal-change-password](../sqm-portal-change-password) - [sqm-referral-iframe](../sqm-referral-iframe) -- [sqm-checkbox-field](../sqm-checkbox-field) +- [sqm-marketing-emails-checkbox](../sqm-marketing-emails-checkbox) - [sqm-name-fields](../sqm-name-fields) - [sqm-dropdown-field](../sqm-dropdown-field) - [sqm-input-field](../sqm-input-field) @@ -126,6 +128,8 @@ graph TD; sqm-stencilbook --> sqm-password-field sqm-stencilbook --> sqm-portal-login sqm-stencilbook --> sqm-portal-register + sqm-stencilbook --> sqm-checkbox-field + sqm-stencilbook --> sqm-portal-change-marketing sqm-stencilbook --> sqm-table-row sqm-stencilbook --> sqm-table-cell sqm-stencilbook --> sqm-referral-table-user-cell @@ -139,7 +143,7 @@ graph TD; sqm-stencilbook --> sqm-hero sqm-stencilbook --> sqm-portal-change-password sqm-stencilbook --> sqm-referral-iframe - sqm-stencilbook --> sqm-checkbox-field + sqm-stencilbook --> sqm-marketing-emails-checkbox sqm-stencilbook --> sqm-name-fields sqm-stencilbook --> sqm-dropdown-field sqm-stencilbook --> sqm-input-field @@ -201,6 +205,7 @@ graph TD; sqm-portal-login --> sqm-form-message sqm-portal-register --> sqm-form-message sqm-portal-register --> sqm-password-field + sqm-portal-change-marketing --> sqm-form-message sqm-referral-table --> sqm-empty sqm-referral-table --> sqm-table-row sqm-referral-table --> sqm-table-cell diff --git a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx index e9dfd584cd..1b39b4e2cc 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx +++ b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx @@ -27,6 +27,7 @@ import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories"; import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories"; import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories"; +import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories"; import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories"; import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories"; import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories"; @@ -34,6 +35,7 @@ import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail import * as AssetCard from "../sqm-asset-card/AssetCard.stories"; import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories"; import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories"; +import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories"; import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories"; import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories"; import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories"; @@ -49,6 +51,7 @@ import * as Hero from "../sqm-hero/Hero.stories"; import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories"; import * as NameFields from "../sqm-name-fields/NameFields.stories"; import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories"; +import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories"; import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories"; import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories"; import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories"; @@ -152,6 +155,7 @@ const stories = [ ReferralIframe, NameFields, CheckboxField, + MarketingEmailsCheckbox, DropdownField, InputField, RewardExchangeList, @@ -187,6 +191,8 @@ const stories = [ TaxFormSlots, PayoutDetailsCard, BankingInfoForm, + NewPortalRegistrationForm, + ChangeMarketing, BaseRegistrationForm, PortalRegistrationForm, PortalGoogleRegistrationFormStories, diff --git a/packages/mint-components/src/templates/EditProfile.html b/packages/mint-components/src/templates/EditProfile.html index 47ed535521..10f57150f8 100644 --- a/packages/mint-components/src/templates/EditProfile.html +++ b/packages/mint-components/src/templates/EditProfile.html @@ -8,3 +8,6 @@ > + + +