diff --git a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts index a3335df7b81..5fec717ca8d 100644 --- a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts +++ b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts @@ -56,6 +56,14 @@ const stateList = { Alabama: 'AL', California: 'CA', }; +const hideErrorMessages = { + true: 'true', + false: 'false', +}; +const showLegalNotices = { + true: 'true', + false: 'false', +}; const onChange = (event: CustomEvent) => { console.log(event.detail); }; @@ -71,6 +79,8 @@ const props = () => ({ ), bpidLegalText: text('BPID Legal Text', ''), onChange: action('dds-notice-choice-change'), + hideErrorMessages: select('Hide Error Messages', hideErrorMessages, 'false'), + showLegalNotice: select('Show Legal Notice', showLegalNotices, 'true'), }); export const Default = (args) => { @@ -81,6 +91,8 @@ export const Default = (args) => { email, termsConditionLink, questionchoices, + hideErrorMessages, + showLegalNotice, enableAllOptIn, bpidLegalText, hiddenEmail, @@ -94,6 +106,8 @@ export const Default = (args) => { state="${state}" email=${email} terms-condition-link="${termsConditionLink || ''}" + hide-error-message="${hideErrorMessages}" + show-legal-notice=${showLegalNotice} ?enable-all-opt-in=${enableAllOptIn} bpid-legal-text="${bpidLegalText}" .hiddenEmail="${hiddenEmail}" diff --git a/packages/web-components/src/components/notice-choice/country-settings.ts b/packages/web-components/src/components/notice-choice/country-settings.ts index 8c642bcaff8..e92626db2ad 100644 --- a/packages/web-components/src/components/notice-choice/country-settings.ts +++ b/packages/web-components/src/components/notice-choice/country-settings.ts @@ -44,7 +44,7 @@ const countrySettings = { pt: { status: 'OPT_IN', lang: 'pt', email: 'opt-in', phone: 'opt-in' }, ar: { status: 'OPT_IN', lang: 'es', email: 'opt-in', phone: 'opt-out' }, bo: { status: 'OPT_IN', lang: 'es', email: 'opt-out', phone: 'opt-out' }, - br: { status: 'OPT_IN', lang: 'pt', email: 'opt-in', phone: 'opt-out' }, + br: { status: 'OPT_IN', lang: 'pt', email: 'opt-out', phone: 'opt-out' }, cl: { status: 'OPT_IN', lang: 'es', email: 'opt-out', phone: 'opt-out' }, co: { status: 'OPT_IN', lang: 'es', email: 'opt-in', phone: 'opt-in' }, do: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, @@ -88,7 +88,7 @@ const countrySettings = { om: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, pk: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, pl: { status: 'OPT_IN', lang: 'pl', email: 'opt-in', phone: 'opt-in' }, - qa: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, + qa: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-in' }, ro: { status: 'OPT_IN', lang: 'ro', email: 'opt-in', phone: 'opt-out' }, rs: { status: 'OPT_IN', lang: 'sr', email: 'opt-in', phone: 'opt-out' }, me: { status: 'OPT_IN', lang: 'sr', email: 'opt-in', phone: 'opt-out' }, @@ -126,7 +126,7 @@ const countrySettings = { ci: { status: 'OPT_IN', lang: 'fr', email: 'opt-out', phone: 'opt-out' }, ck: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, cm: { status: 'OPT_IN', lang: 'fr', email: 'opt-in', phone: 'opt-out' }, - cr: { status: 'OPT_IN', lang: 'es', email: 'opt-out', phone: 'opt-out' }, + cr: { status: 'OPT_IN', lang: 'es', email: 'opt-in', phone: 'opt-in' }, cu: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, cv: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, cx: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, @@ -146,7 +146,7 @@ const countrySettings = { gi: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, gl: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, gm: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, - gn: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, + gn: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-in' }, gp: { status: 'OPT_IN', lang: 'en', email: 'opt-out', phone: 'opt-out' }, gq: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, gs: { status: 'OPT_IN', lang: 'en', email: 'opt-in', phone: 'opt-out' }, diff --git a/packages/web-components/src/components/notice-choice/notice-choice.ts b/packages/web-components/src/components/notice-choice/notice-choice.ts index 0c12934a2a6..582d19bd540 100644 --- a/packages/web-components/src/components/notice-choice/notice-choice.ts +++ b/packages/web-components/src/components/notice-choice/notice-choice.ts @@ -8,7 +8,7 @@ */ import { checkPreferencesv3, loadContent } from './services'; -import { html, LitElement, property } from 'lit-element'; +import { html, LitElement, property, TemplateResult } from 'lit-element'; import { emailRegExp, pwsValueMap, @@ -67,6 +67,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { @property({ type: String, attribute: 'email' }) email = ''; + @property({ type: Boolean, attribute: 'hide-error-message' }) + hideErrorMessage = false; + + @property({ type: Boolean, attribute: 'show-legal-notice' }) + showLegalNotice = true; + @property({ type: Object, attribute: false }) checkboxes = {}; @@ -82,6 +88,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { @property({ type: Object, attribute: false }) optInContent = {}; + @property({ type: Boolean, attribute: false }) + preventFormSubmission = false; + /** * End properties for passed attributes. */ @@ -171,7 +180,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { } const hiddenFieldName = `NC_HIDDEN_${key}`; newValues[hiddenFieldName] = option[hiddenFieldName]; - this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : null); + + this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT'); }); if (JSON.stringify(this.values) !== JSON.stringify(newValues)) { this.values = newValues; @@ -183,6 +193,11 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { if (splitValue == 'en') { this.preText = this.preTextTemplate(); } + this.preventFormSubmission = false; + if (this.ncData?.mandatoryCheckbox[this.country?.toLocaleLowerCase()]) { + this.preventFormSubmission = true; + this._onChange('preventFormSubmission', 'formSubmissionNo'); + } /** * @description if the user already interacted with the checkboxes, * skip country default selection. @@ -275,6 +290,18 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { } break; } + case 'hide-error-message': { + if (oldVal !== newVal) { + this.hideErrorMessage = JSON.parse(newVal); + this.countryBasedLegalNotice(); + } + + break; + } + case 'show-legal-notice': { + this.showLegalNotice = JSON.parse(newVal); + break; + } } } @@ -294,12 +321,86 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { this.values[id] = {}; this.values[id]['checkBoxStatus'] = hiddenFieldStatus; this._onChange(hiddenFieldName, hiddenFieldStatus); + this._onChange( + `${hiddenFieldName}_VALUE`, + `NC_HIDDEN_${hiddenFieldStatus}` + ); } static get stableSelector() { return `${ddsPrefix}--notice-choice`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader + checkBoxLegalChange($event: any) { + const legalCheckbox = $event.target; + const isChecked = legalCheckbox.checked; + const legalTextError = legalCheckbox.parentNode.querySelector('.nc-error'); + const qChinaPIPl = isChecked ? 'qChinaPIPlYes' : 'qChinaPIPlNo'; + + if (legalTextError) { + legalTextError.style.display = isChecked ? 'none' : ''; + } + + legalCheckbox.value = isChecked ? 1 : 0; + this.preventFormSubmission = !isChecked; + const preventFormSubmissionValue = isChecked + ? 'formSubmissionYes' + : 'formSubmissionNo'; + this._onChange('preventFormSubmission', preventFormSubmissionValue); + this._onChange('Q_CHINA_PIPL', qChinaPIPl); + } + + countryBasedLegalNotice() { + const country = this.country.toLocaleLowerCase(); + const itemTemplates: Array = []; + + if ( + this.ncData?.mandatoryCheckbox && + this.ncData.mandatoryCheckbox[country] + ) { + const mandatoryCheckboxes: { [key: string]: any } = + this.ncData.mandatoryCheckbox[country]; + + for (const [key, mandatoryCheckbox] of Object.entries( + mandatoryCheckboxes + )) { + const legalTextName = key.replace(/([A-Z]+)/g, '-$1').toLowerCase(); + let mandatoryCheckboxTemplate = html` + +
+

+ + + ${!this.hideErrorMessage && this.preventFormSubmission + ? html`${mandatoryCheckbox.error}` + : ''} +

+
+ + `; + itemTemplates.push(mandatoryCheckboxTemplate); + } + } + + return itemTemplates; + } + checkBoxTemplate(checkbox, checked, hiddenBox) { + this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`); return html`
|<\/tc>/g, ''); const link = `${anrTagHtml}`; const reg = new RegExp('' + anrTagHtml + '', 'g'); - postText = postText + originalValue.replace(reg, link); + + postText = + postText + + originalValue + .replace(reg, link) + .replace(/

/g, '

'); } } if (postText !== '') { @@ -392,7 +498,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { } render() { return html`

-

${this.preTextTemplate()}

+

${ + this.showLegalNotice ? this.countryBasedLegalNotice() : '' + } ${this.preTextTemplate()}

${ Object.keys(this.checkboxes).length !== 0 @@ -418,7 +526,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
${this.postTextTemplate()}
- +
${this.getBpidLegalText()} `; @@ -523,6 +633,10 @@ class NoticeChoice extends StableSelectorMixin(LitElement) { const pwsFieldsMap = { NC_HIDDEN_EMAIL: 'permission_email', NC_HIDDEN_PHONE: 'permission_phone', + preventFormSubmission: 'preventFormSubmission', + Q_CHINA_PIPL: 'Q_CHINA_PIPL', + NC_HIDDEN_EMAIL_VALUE: 'NC_HIDDEN_EMAIL', + NC_HIDDEN_PHONE_VALUE: 'NC_HIDDEN_PHONE', }; if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) { diff --git a/packages/web-components/src/components/notice-choice/utils.ts b/packages/web-components/src/components/notice-choice/utils.ts index d94b63e1cf8..06c373f4585 100644 --- a/packages/web-components/src/components/notice-choice/utils.ts +++ b/packages/web-components/src/components/notice-choice/utils.ts @@ -57,6 +57,13 @@ export function pwsValueMap(value) { OPT_OUT: 'no', PERMISSION: 'yes', SUPPRESSION: 'no', + formSubmissionYes: 'false', + formSubmissionNo: 'true', + qChinaPIPlYes: 'true', + qChinaPIPlNo: 'false', + NC_HIDDEN_PERMISSION: 'PERMISSION', + NC_HIDDEN_SUPPRESSION: 'SUPPRESSION', + NC_HIDDEN_UNCHANGED: 'UNCHANGED', }[value] || null ); }