Skip to content

Commit

Permalink
Fixed hidden field status
Browse files Browse the repository at this point in the history
  • Loading branch information
@deathcave
deathcave committed Nov 28, 2024
1 parent 998b7d5 commit 32c6e01
Showing 1 changed file with 111 additions and 107 deletions.
218 changes: 111 additions & 107 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 @@ -104,6 +104,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
@property({ type: Boolean, attribute: false })
telephonePrechecked = false;

@property({ type: Boolean, attribute: false })
combinedEmailPhonePrechecked = false;

/**
* End properties for passed attributes.
*/
Expand Down Expand Up @@ -218,7 +221,17 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
const hiddenFieldName = `NC_HIDDEN_${key}`;
newValues[hiddenFieldName] = option[hiddenFieldName];

this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');
if (this.combineEmailPhone) {
this._onChange(
hiddenFieldName,
newValues.EMAIL ? 'OPT_IN' : 'OPT_OUT'
);
} else {
this._onChange(
hiddenFieldName,
newValues[key] ? 'OPT_IN' : 'OPT_OUT'
);
}
});
if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {
this.values = newValues;
Expand All @@ -236,7 +249,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
const mrsField = this.ncData?.mandatoryCheckbox[countyCode]
.countryTransferText
? this.ncData?.mandatoryCheckbox[countyCode].countryTransferText
.mrs_field
.mrs_field
: this.ncData?.mandatoryCheckbox[countyCode].chinaPIPLtext.mrs_field;
this._onChange(mrsField, 'countyBasedCheckedNo');

Expand All @@ -257,6 +270,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
* @description
* change checkbox checked option based on new country.
*/

this.setDefaultSelections();
}
}
Expand Down Expand Up @@ -366,21 +380,21 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
this.emailPrechecked && !checked
? 'CU'
: !this.emailPrechecked && checked
? 'UC'
: this.emailPrechecked && checked
? 'CC'
: 'UU';
? 'UC'
: this.emailPrechecked && checked
? 'CC'
: 'UU';

break;
case 'PHONE':
statusPrechecked =
this.telephonePrechecked && checked
? 'CC'
: this.telephonePrechecked && !checked
? 'CU'
: !this.telephonePrechecked && checked
? 'UC'
: 'UU';
? 'CU'
: !this.telephonePrechecked && checked
? 'UC'
: 'UU';

break;
}
Expand Down Expand Up @@ -412,8 +426,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
const mrsField = this.ncData?.mandatoryCheckbox[countyCode]
.countryTransferText
? this.ncData?.mandatoryCheckbox[
this.isMandatoryCheckboxDisplayed.countryCode
].countryTransferText.mrs_field
this.isMandatoryCheckboxDisplayed.countryCode
].countryTransferText.mrs_field
: this.ncData?.mandatoryCheckbox[countyCode].chinaPIPLtext.mrs_field;
legalCheckbox.value = isChecked ? 1 : 0;
this.preventFormSubmission = !isChecked;
Expand Down Expand Up @@ -464,13 +478,13 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
</span>
</label>
${!this.hideErrorMessage && this.preventFormSubmission
? html`<span
? html`<span
class="nc-error"
part="error"
style="color:#da1e28;font-size:.75rem"
>${mandatoryCheckbox.error}</span
>`
: ''}
: ''}
</p>
</div>
</span>
Expand Down Expand Up @@ -626,33 +640,23 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
Object.keys(this.checkboxes).map((id) => {
newValues[id] = !!checked;
this.values = newValues;

console.log(this.combinedEmailPhonePrechecked)
const hiddenFieldName = `NC_HIDDEN_${id}`;
const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
this.values[id] = {};
this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
let statusPrechecked = '';
switch (id) {
case 'EMAIL':
statusPrechecked =
this.emailPrechecked && !checked
? 'CU'
: !this.emailPrechecked && checked
? 'UC'
: this.emailPrechecked && checked
? 'CC'
: 'UU';

break;
case 'PHONE':
statusPrechecked =
this.telephonePrechecked && checked
? 'CC'
: this.telephonePrechecked && !checked
this.combinedEmailPhonePrechecked && !checked
? 'CU'
: !this.telephonePrechecked && checked
? 'UC'
: 'UU';
: !this.combinedEmailPhonePrechecked && checked
? 'UC'
: this.combinedEmailPhonePrechecked && checked
? 'CC'
: 'UU';

break;
}
Expand All @@ -662,7 +666,6 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
`${hiddenFieldName}_VALUE`,
`NC_HIDDEN_${hiddenFieldStatus}`
);
console.log('Test ME');
});
}
renderCheckbox(preText, checked) {
Expand Down Expand Up @@ -711,35 +714,38 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
${this.countryBasedLegalNotice()} ${this.combinedPreTextTemplate()}
</p>
${Object.keys(this.checkboxes).map((key) => {
const checked = this.values.EMAIL;
const punsStatus = getPunsStatus(key, checked);
const hiddenBox = {
id: `NC_HIDDEN_${key}`,
value: this.values[key]['checkBoxStatus']
? this.values[key]['checkBoxStatus']
: this.values[key]
? 'PERMISSION'
: 'SUPPRESSION',
};
const checked = this.values.EMAIL;
const punsStatus = getPunsStatus(key, checked);
const hiddenBox = {
id: `NC_HIDDEN_${key}`,
value: this.values[key]['checkBoxStatus']
? this.values[key]['checkBoxStatus']
: this.values.EMAIL
? 'PERMISSION'
: 'SUPPRESSION',
};
if (typeof checked !== 'object') {
this.combinedEmailPhonePrechecked = checked ? true : false;
}
this._onChange(
`NC_${key === 'PHONE' ? 'TELE' : key}_DETAIL`,
`${key}_${punsStatus}`
);
this._onChange(
`NC_${key === 'PHONE' ? 'TELE' : key}_DETAIL`,
`${key}_${punsStatus}`
);
this._onChange(
`${hiddenBox.id}_VALUE`,
`NC_HIDDEN_${hiddenBox.value}`
);
this._onChange(
`${hiddenBox.id}_VALUE`,
`NC_HIDDEN_${hiddenBox.value}`
);
return createHiddenInput(hiddenBox.id, hiddenBox.value);
})}
return createHiddenInput(hiddenBox.id, hiddenBox.value);
})}
<div part="${prefix}--nc__post-text" class="${prefix}--nc__post-text">
${this.postTextTemplate()}
</div>
${createHiddenInput(
'preventFormSubmission',
this.preventFormSubmission
)}
'preventFormSubmission',
this.preventFormSubmission
)}
<input
type="hidden"
id="preventFormSubmission"
Expand All @@ -753,17 +759,17 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
if (
this.isMandatoryCheckboxDisplayed.isDisplayed &&
this.country.toLocaleLowerCase() !==
this.isMandatoryCheckboxDisplayed.countryCode
this.isMandatoryCheckboxDisplayed.countryCode
) {
const mrsField = this.ncData?.mandatoryCheckbox[
this.isMandatoryCheckboxDisplayed.countryCode
].countryTransferText
? this.ncData?.mandatoryCheckbox[
this.isMandatoryCheckboxDisplayed.countryCode
].countryTransferText.mrs_field
this.isMandatoryCheckboxDisplayed.countryCode
].countryTransferText.mrs_field
: this.ncData?.mandatoryCheckbox[
this.isMandatoryCheckboxDisplayed.countryCode
].chinaPIPLtext.mrs_field;
this.isMandatoryCheckboxDisplayed.countryCode
].chinaPIPLtext.mrs_field;
this._onChange(mrsField, 'countyBasedCheckedNo');
}

Expand All @@ -774,57 +780,55 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
return html`<section class="${prefix}--nc" part="section">
<p part='ncHeading' id="ncHeading" class="${c4dPrefix}--nc__pre-text">${this.countryBasedLegalNotice()} ${this.preTextTemplate()} </p>
<div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
${
Object.keys(this.checkboxes).length !== 0
? Object.keys(this.checkboxes).length > 0 &&
Object.keys(this.checkboxes).map((key) => {
const checked = this.values[key];
const checkbox = this.checkboxes[key];
const punsStatus = this.values[key]['punsStatus']
? this.values[key]['punsStatus']
: checked
? 'CC'
: 'UU';
const hiddenBox = {
id: 'NC_HIDDEN_' + key,
value: this.values[key]['checkBoxStatus']
? this.values[key]['checkBoxStatus']
: this.values[key]
? 'PERMISSION'
: 'SUPPRESSION',
};
switch (key) {
case 'EMAIL':
this.hiddenEmail = hiddenBox.value;
this.ncEmailDetail = punsStatus;
if (typeof checked !== 'object') {
this.emailPrechecked = checked ? true : false;
}
break;
case 'PHONE':
this.hiddenPhone = hiddenBox.value;
this.ncTeleDetail = punsStatus;
if (typeof checked !== 'object') {
this.telephonePrechecked = checked ? true : false;
}
break;
}
const punsValue = key === 'PHONE' ? 'TELE' : key;
this._onChange(
`NC_${punsValue}_DETAIL`,
`${key}_${punsStatus}`
);
return this.checkBoxTemplate(checkbox, checked, hiddenBox);
})
: ''
}
${Object.keys(this.checkboxes).length !== 0
? Object.keys(this.checkboxes).length > 0 &&
Object.keys(this.checkboxes).map((key) => {
const checked = this.values[key];
const checkbox = this.checkboxes[key];
const punsStatus = this.values[key]['punsStatus']
? this.values[key]['punsStatus']
: checked
? 'CC'
: 'UU';
const hiddenBox = {
id: 'NC_HIDDEN_' + key,
value: this.values[key]['checkBoxStatus']
? this.values[key]['checkBoxStatus']
: this.values[key]
? 'PERMISSION'
: 'SUPPRESSION',
};
switch (key) {
case 'EMAIL':
this.hiddenEmail = hiddenBox.value;
this.ncEmailDetail = punsStatus;
if (typeof checked !== 'object') {
this.emailPrechecked = checked ? true : false;
}
break;
case 'PHONE':
this.hiddenPhone = hiddenBox.value;
this.ncTeleDetail = punsStatus;
if (typeof checked !== 'object') {
this.telephonePrechecked = checked ? true : false;
}
break;
}
const punsValue = key === 'PHONE' ? 'TELE' : key;
this._onChange(
`NC_${punsValue}_DETAIL`,
`${key}_${punsStatus}`
);
return this.checkBoxTemplate(checkbox, checked, hiddenBox);
})
: ''
}
</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
} />
<input type='hidden' id="preventFormSubmission" name="preventFormSubmission" value=${this.preventFormSubmission
} />
</div>
</section>`;
}
Expand Down

0 comments on commit 32c6e01

Please sign in to comment.