Skip to content

Commit

Permalink
Merge e507426 into feat/cwc-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibmdotcom-bot
ibmdotcom-bot committed Oct 4, 2023
2 parents f09b2db + e507426 commit 99b0c2b
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 9 deletions.
14 changes: 14 additions & 0 deletions packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand All @@ -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) => {
Expand All @@ -81,6 +91,8 @@ export const Default = (args) => {
email,
termsConditionLink,
questionchoices,
hideErrorMessages,
showLegalNotice,
enableAllOptIn,
bpidLegalText,
hiddenEmail,
Expand All @@ -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}"
Expand Down
8 changes: 4 additions & 4 deletions packages/web-components/src/components/notice-choice/country-settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand All @@ -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' },
Expand Down
124 changes: 119 additions & 5 deletions packages/web-components/src/components/notice-choice/notice-choice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 = {};

Expand All @@ -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.
*/
Expand Down Expand Up @@ -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;
Expand All @@ -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.
Expand Down Expand Up @@ -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;
}
}
}

Expand All @@ -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<TemplateResult> = [];

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`
<span>
<div class="${prefix}--form-item bx--checkbox-wrapper">
<p part=${legalTextName} class=${legalTextName}>
<input
type="checkbox"
class="${prefix}--checkbox"
id="${mandatoryCheckbox.mrs_field}"
name="${mandatoryCheckbox.mrs_field}"
@change="${this.checkBoxLegalChange}" />
<label
for="${mandatoryCheckbox.mrs_field}"
class="${prefix}--checkbox-label ${prefix}--nc__checkbox-${mandatoryCheckbox.mrs_field}"
><span class="${prefix}--checkbox-label-text" dir="auto"
>${mandatoryCheckbox.text}
</span>
</label>
${!this.hideErrorMessage && this.preventFormSubmission
? html`<span
class="nc-error"
style="color:#da1e28;font-size:.75rem"
>${mandatoryCheckbox.error}</span
>`
: ''}
</p>
</div>
</span>
`;
itemTemplates.push(mandatoryCheckboxTemplate);
}
}

return itemTemplates;
}

checkBoxTemplate(checkbox, checked, hiddenBox) {
this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
return html`<span>
<div class="${prefix}--form-item bx--checkbox-wrapper">
<input
Expand Down Expand Up @@ -369,7 +470,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
const anrTagHtml = matchedValue[0].replace(/<tc>|<\/tc>/g, '');
const link = `<a href='${this.termsConditionLink}' target='_blank' class='ibm-tooltip' >${anrTagHtml}</a>`;
const reg = new RegExp('<tc>' + anrTagHtml + '</tc>', 'g');
postText = postText + originalValue.replace(reg, link);

postText =
postText +
originalValue
.replace(reg, link)
.replace(/<p>/g, '<p part="nc-trial-text" id="nc-trial-text">');
}
}
if (postText !== '') {
Expand All @@ -392,7 +498,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
}
render() {
return html`<section class="${prefix}--nc">
<p part='ncHeading' id="ncHeading" class="${ddsPrefix}--nc__pre-text">${this.preTextTemplate()} </p>
<p part='ncHeading' id="ncHeading" class="${ddsPrefix}--nc__pre-text">${
this.showLegalNotice ? this.countryBasedLegalNotice() : ''
} ${this.preTextTemplate()} </p>
<div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
${
Object.keys(this.checkboxes).length !== 0
Expand All @@ -418,7 +526,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
</div>
<div part='${prefix}--nc__post-text' class="${prefix}--nc__post-text"
>${this.postTextTemplate()}</div>
<input type='hidden' id="preventFormSubmission" name="preventFormSubmission" value=${
this.preventFormSubmission
} />
</div>
${this.getBpidLegalText()}
</section>`;
Expand Down Expand Up @@ -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)) {
Expand Down
7 changes: 7 additions & 0 deletions packages/web-components/src/components/notice-choice/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
Expand Down

0 comments on commit 99b0c2b

Please sign in to comment.