Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed onclick hidden values #10917

Merged
merged 8 commits into from
Sep 14, 2023
Merged

Fixed onclick hidden values #10917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a66c3f0
fixed onclick hidden values
deathcave Sep 7, 2023
eb671eb
fixed page owner to apply css
deathcave Sep 7, 2023
78894bd
fixed pretty format
deathcave Sep 7, 2023
fa71753
fixed ci build issue
deathcave Sep 7, 2023
97e88d0
removed demo variable
deathcave Sep 7, 2023
40a5da2
Merge branch 'main' into fixOnClick
kennylam Sep 11, 2023
ccfcd28
Merge branch 'main' into fixOnClick
kennylam Sep 14, 2023
c9f4a6d
Merge branch 'main' into fixOnClick
kodiakhq[bot] Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ export const Default = (args) => {
questionchoices,
enableAllOptIn,
bpidLegalText,
hiddenEmail,
hiddenPhone,
} = args?.NoticeChoice ?? {};
return html`
<dds-notice-choice
Expand All @@ -92,6 +94,8 @@ export const Default = (args) => {
terms-condition-link="${termsConditionLink}"
?enable-all-opt-in=${enableAllOptIn}
bpid-legal-text="${bpidLegalText}"
.hiddenEmail="${hiddenEmail}"
.hiddenPhone="${hiddenPhone}"
@dds-notice-choice-change=${onChange}></dds-notice-choice>
`;
};
Expand Down
63 changes: 24 additions & 39 deletions packages/web-components/src/components/notice-choice/notice-choice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
NC_HIDDEN_PHONE: worldWideContent.cc_default_status,
};

@property({ reflect: true })
hiddenEmail = '';

@property({ reflect: true })
hiddenPhone = '';

prepareCheckboxes() {
if (this.ncData) {
const OptInContent = this.ncData;
Expand Down Expand Up @@ -238,6 +244,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {

private checkBoxChange($event: any) {
const id = $event.target.id;

const checked = $event.target.checked;
const newValues = {
...this.values,
Expand All @@ -248,7 +255,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
this.changed = true;
const hiddenFieldName = `NC_HIDDEN_${id}`;
const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
this.values['checkBoxStatus'] = hiddenFieldStatus;
this.values[id] = {};
this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
this._onChange(hiddenFieldName, hiddenFieldStatus);
}
static get stableSelector() {
Expand Down Expand Up @@ -282,7 +290,6 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
}
preTextTemplate() {
if (this.ncData) {
const lang = this.locale;
const country = this.country.toLocaleLowerCase();
const ecmTranslateContent = this.ncData;
let preText = ecmTranslateContent.preText;
Expand All @@ -305,35 +312,6 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
preText = ecmTranslateContent.country[country.toLowerCase()].preText;
}

const opt_out_url =
'https://www.ibm.com/account/reg/' +
country +
'-' +
lang +
'/signup?formid=urx-42537';

const noticeChoiceRegex = {
optoutMath: new RegExp('<optout>.*</optout>', 'g'),
optoutReplace: new RegExp('<optout>|</optout>', 'g'),
};
const optOutLink = preText.match(noticeChoiceRegex.optoutMath);
if (optOutLink) {
const optoutAnrTagHtml = optOutLink[0].replace(
noticeChoiceRegex.optoutReplace,
''
);
const optoutReplaceValue =
"<a href='" +
opt_out_url +
"' target='_blank' class='ibm-tooltip' >" +
optoutAnrTagHtml +
'</a>';
preText = preText.replace(
noticeChoiceRegex.optoutMath,
optoutReplaceValue
);
}

return html`${unsafeHTML(preText)}`;
} else {
return html``;
Expand All @@ -345,7 +323,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
let postText = this.ncData.postText;

if (postText) {
postText = '<p>' + postText + '</p>';
postText = '<p part="ncPostText">' + postText + '</p>';
}

if (this.termsConditionLink) {
Expand All @@ -359,7 +337,10 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
}
}
if (postText !== '') {
postText = "<div id='ncPostTextContainer'>" + postText + '</div>';
postText =
"<div part='ncPostTextContainer' id='ncPostTextContainer'>" +
postText +
'</div>';
}
return html`${unsafeHTML(postText)}`;
} else {
Expand All @@ -375,8 +356,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
}
render() {
return html`<section class="${prefix}--nc">
<p id="ncHeading" class="${ddsPrefix}--nc__pre-text">${this.preTextTemplate()} </p>
<div class="${prefix}--checkbox-group">
<p part='ncHeading' id="ncHeading" class="${ddsPrefix}--nc__pre-text">${this.preTextTemplate()} </p>
<div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
${
Object.keys(this.checkboxes).length !== 0
? Object.keys(this.checkboxes).length > 0 &&
Expand All @@ -385,19 +366,23 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
const checkbox = this.checkboxes[key];
const hiddenBox = {
id: 'NC_HIDDEN_' + key,
value: this.values['checkBoxStatus']
? this.values['checkBoxStatus']
value: this.values[key]['checkBoxStatus']
? this.values[key]['checkBoxStatus']
: this.values[key]
? 'PERMISSION'
: 'UNCHANGED',
};
key === 'EMAIL' ? (this.hiddenEmail = hiddenBox.value) : '';
key === 'PHONE' ? (this.hiddenPhone = hiddenBox.value) : '';
return this.checkBoxTemplate(checkbox, checked, hiddenBox);
})
: 'Loading ...'
: ''
}

</div>
<div class="${prefix}--nc__post-text"
<div part='${prefix}--nc__post-text' class="${prefix}--nc__post-text"
>${this.postTextTemplate()}</div>

</div>
${this.getBpidLegalText()}
</section>`;
Expand Down
Loading