Skip to content

Commit 1936a8d

Browse files
committed
fix(foxy-template-config-form): reorder csp sections
1 parent 326981e commit 1936a8d

File tree

4 files changed

+49
-49
lines changed

4 files changed

+49
-49
lines changed

src/elements/public/TemplateConfigForm/TemplateConfigForm.stories.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,14 @@ const summary: Summary = {
9696
'checkout-fields-group-three:custom-checkout-field-requirements-coupon-entry',
9797

9898
'csp',
99-
'csp-group-one',
100-
'csp-group-one:csp-enable-csp',
101-
'csp-group-one:csp-policy-enforce-reporting-endpoint',
102-
'csp-group-one:csp-policy-enforce-script-src',
10399
'csp-group-two',
104-
'csp-group-two:csp-enable-ro-csp',
105-
'csp-group-two:csp-policy-report-reporting-endpoint',
106-
'csp-group-two:csp-policy-report-script-src',
100+
'csp-group-two:csp-enable-csp',
101+
'csp-group-two:csp-policy-enforce-reporting-endpoint',
102+
'csp-group-two:csp-policy-enforce-script-src',
103+
'csp-group-one',
104+
'csp-group-one:csp-enable-ro-csp',
105+
'csp-group-one:csp-policy-report-reporting-endpoint',
106+
'csp-group-one:csp-policy-report-script-src',
107107

108108
'analytics-config',
109109
'analytics-config:analytics-config-usage',

src/elements/public/TemplateConfigForm/TemplateConfigForm.test.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1100,7 +1100,7 @@ describe('TemplateConfigForm', () => {
11001100
const layout = html`<foxy-template-config-form></foxy-template-config-form>`;
11011101
const element = await fixture<Form>(layout);
11021102
const control = element.renderRoot.querySelector<InternalSwitchControl>(
1103-
'[infer="csp"] [infer="csp-group-one"] foxy-internal-switch-control[infer="csp-enable-csp"]'
1103+
'[infer="csp"] [infer="csp-group-two"] foxy-internal-switch-control[infer="csp-enable-csp"]'
11041104
);
11051105

11061106
expect(control).to.exist;
@@ -1139,7 +1139,7 @@ describe('TemplateConfigForm', () => {
11391139
await element.requestUpdate();
11401140

11411141
const control = element.renderRoot.querySelector(
1142-
'[infer="csp"] [infer="csp-group-one"] foxy-internal-text-control[infer="csp-policy-enforce-reporting-endpoint"]'
1142+
'[infer="csp"] [infer="csp-group-two"] foxy-internal-text-control[infer="csp-policy-enforce-reporting-endpoint"]'
11431143
);
11441144

11451145
expect(control).to.exist;
@@ -1159,7 +1159,7 @@ describe('TemplateConfigForm', () => {
11591159
await element.requestUpdate();
11601160

11611161
const control = element.renderRoot.querySelector(
1162-
'[infer="csp"] [infer="csp-group-one"] foxy-internal-editable-list-control[infer="csp-policy-enforce-script-src"]'
1162+
'[infer="csp"] [infer="csp-group-two"] foxy-internal-editable-list-control[infer="csp-policy-enforce-script-src"]'
11631163
);
11641164

11651165
expect(control).to.exist;
@@ -1174,7 +1174,7 @@ describe('TemplateConfigForm', () => {
11741174
const layout = html`<foxy-template-config-form></foxy-template-config-form>`;
11751175
const element = await fixture<Form>(layout);
11761176
const control = element.renderRoot.querySelector<InternalSwitchControl>(
1177-
'[infer="csp"] [infer="csp-group-two"] foxy-internal-switch-control[infer="csp-enable-ro-csp"]'
1177+
'[infer="csp"] [infer="csp-group-one"] foxy-internal-switch-control[infer="csp-enable-ro-csp"]'
11781178
);
11791179

11801180
expect(control).to.exist;
@@ -1213,7 +1213,7 @@ describe('TemplateConfigForm', () => {
12131213
await element.requestUpdate();
12141214

12151215
const control = element.renderRoot.querySelector(
1216-
'[infer="csp"] [infer="csp-group-two"] foxy-internal-text-control[infer="csp-policy-report-reporting-endpoint"]'
1216+
'[infer="csp"] [infer="csp-group-one"] foxy-internal-text-control[infer="csp-policy-report-reporting-endpoint"]'
12171217
);
12181218

12191219
expect(control).to.exist;
@@ -1233,7 +1233,7 @@ describe('TemplateConfigForm', () => {
12331233
await element.requestUpdate();
12341234

12351235
const control = element.renderRoot.querySelector(
1236-
'[infer="csp"] [infer="csp-group-two"] foxy-internal-editable-list-control[infer="csp-policy-report-script-src"]'
1236+
'[infer="csp"] [infer="csp-group-one"] foxy-internal-editable-list-control[infer="csp-policy-report-script-src"]'
12371237
);
12381238

12391239
expect(control).to.exist;

src/elements/public/TemplateConfigForm/TemplateConfigForm.ts

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -706,45 +706,45 @@ export class TemplateConfigForm extends Base<Data> {
706706
json-template=${this.__defaultJSON}
707707
json-path="csp.usage"
708708
property="json"
709-
infer="csp-enable-csp"
710-
.getValue=${this.__cspUsageGetValue}
711-
.setValue=${this.__cspUsageSetValue}
709+
infer="csp-enable-ro-csp"
710+
.getValue=${this.__cspRoUsageGetValue}
711+
.setValue=${this.__cspRoUsageSetValue}
712712
>
713713
</foxy-internal-switch-control>
714714
715-
${formCspUsage === 'enforce' || formCspUsage === 'both'
715+
${formCspUsage === 'report' || formCspUsage === 'both'
716716
? html`
717717
<foxy-internal-text-control
718718
json-template=${this.__defaultJSON}
719-
json-path="csp.policy_enforce.reporting_endpoint"
719+
json-path="csp.policy_report.reporting_endpoint"
720720
property="json"
721721
layout="summary-item"
722-
infer="csp-policy-enforce-reporting-endpoint"
722+
infer="csp-policy-report-reporting-endpoint"
723723
>
724724
</foxy-internal-text-control>
725725
726726
<foxy-internal-editable-list-control
727727
json-template=${this.__defaultJSON}
728-
json-path="csp.policy_enforce.script_src"
728+
json-path="csp.policy_report.script_src"
729729
property="json"
730730
layout="summary-item"
731-
infer="csp-policy-enforce-script-src"
731+
infer="csp-policy-report-script-src"
732732
simple-value
733733
>
734734
</foxy-internal-editable-list-control>
735735
736-
${dataCspUsage === 'none' || dataCspUsage === 'report'
736+
${dataCspUsage === 'none' || dataCspUsage === 'enforce'
737737
? html`
738738
<div
739-
class="flex items-start bg-error-10"
739+
class="flex items-start bg-primary-10"
740740
style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
741741
>
742-
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /></svg>`}
742+
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>`}
743743
<p>
744744
<foxy-i18n infer="" key="warning"></foxy-i18n>
745745
<a
746746
target="_blank"
747-
class="inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-error-50"
747+
class="inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
748748
href="https://wiki.foxycart.com/v/2.0/content_security_policy"
749749
>
750750
wiki.foxycart.com
@@ -762,45 +762,45 @@ export class TemplateConfigForm extends Base<Data> {
762762
json-template=${this.__defaultJSON}
763763
json-path="csp.usage"
764764
property="json"
765-
infer="csp-enable-ro-csp"
766-
.getValue=${this.__cspRoUsageGetValue}
767-
.setValue=${this.__cspRoUsageSetValue}
765+
infer="csp-enable-csp"
766+
.getValue=${this.__cspUsageGetValue}
767+
.setValue=${this.__cspUsageSetValue}
768768
>
769769
</foxy-internal-switch-control>
770770
771-
${formCspUsage === 'report' || formCspUsage === 'both'
771+
${formCspUsage === 'enforce' || formCspUsage === 'both'
772772
? html`
773773
<foxy-internal-text-control
774774
json-template=${this.__defaultJSON}
775-
json-path="csp.policy_report.reporting_endpoint"
775+
json-path="csp.policy_enforce.reporting_endpoint"
776776
property="json"
777777
layout="summary-item"
778-
infer="csp-policy-report-reporting-endpoint"
778+
infer="csp-policy-enforce-reporting-endpoint"
779779
>
780780
</foxy-internal-text-control>
781781
782782
<foxy-internal-editable-list-control
783783
json-template=${this.__defaultJSON}
784-
json-path="csp.policy_report.script_src"
784+
json-path="csp.policy_enforce.script_src"
785785
property="json"
786786
layout="summary-item"
787-
infer="csp-policy-report-script-src"
787+
infer="csp-policy-enforce-script-src"
788788
simple-value
789789
>
790790
</foxy-internal-editable-list-control>
791791
792-
${dataCspUsage === 'none' || dataCspUsage === 'enforce'
792+
${dataCspUsage === 'none' || dataCspUsage === 'report'
793793
? html`
794794
<div
795-
class="flex items-start bg-primary-10"
795+
class="flex items-start bg-error-10"
796796
style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
797797
>
798-
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>`}
798+
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /></svg>`}
799799
<p>
800800
<foxy-i18n infer="" key="warning"></foxy-i18n>
801801
<a
802802
target="_blank"
803-
class="inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
803+
class="inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-error-50"
804804
href="https://wiki.foxycart.com/v/2.0/content_security_policy"
805805
>
806806
wiki.foxycart.com

src/static/translations/template-config-form/en.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -417,20 +417,20 @@
417417
"csp-group-one": {
418418
"label": "",
419419
"helper_text": "",
420-
"warning": "This is security-related functionality that, when enabled, can stop custom scripts from loading on your checkout. Ensure you include any domains as custom script sources above, and review the documentation for this functionality:",
421-
"csp-enable-csp": {
422-
"label": "Enable Content Security Policy",
423-
"helper_text": "Protects your checkout page by blocking remote content that isn’t explicitly allowed. Scripts and assets loaded by Foxy (including payment gateways and analytics) are always allowed, regardless of the settings below.",
420+
"warning": "Please review the documentation for this functionality to ensure you understand potential impacts:",
421+
"csp-enable-ro-csp": {
422+
"label": "Enable Report-Only Content Security Policy",
423+
"helper_text": "Test your policy without blocking content. This mode logs violations of the rules below, but still allows the content to load. As with enforced mode, Foxy-managed content (e.g., gateways, analytics) is always allowed and excluded from reporting.",
424424
"checked": "Yes",
425425
"unchecked": "No"
426426
},
427-
"csp-policy-enforce-script-src": {
427+
"csp-policy-report-script-src": {
428428
"label": "Custom script sources",
429429
"placeholder": "example.com, *.example.com",
430430
"helper_text": "",
431431
"v8n_too_long": "Domain names must not exceed 1000 characters."
432432
},
433-
"csp-policy-enforce-reporting-endpoint": {
433+
"csp-policy-report-reporting-endpoint": {
434434
"label": "Reporting URL",
435435
"helper_text": "",
436436
"placeholder": "Optional",
@@ -440,20 +440,20 @@
440440
"csp-group-two": {
441441
"label": "",
442442
"helper_text": "",
443-
"warning": "Please review the documentation for this functionality to ensure you understand potential impacts:",
444-
"csp-enable-ro-csp": {
445-
"label": "Enable Report-Only Content Security Policy",
446-
"helper_text": "Test your policy without blocking content. This mode logs violations of the rules below, but still allows the content to load. As with enforced mode, Foxy-managed content (e.g., gateways, analytics) is always allowed and excluded from reporting.",
443+
"warning": "This is security-related functionality that, when enabled, can stop custom scripts from loading on your checkout. Ensure you include any domains as custom script sources above, and review the documentation for this functionality:",
444+
"csp-enable-csp": {
445+
"label": "Enable Content Security Policy",
446+
"helper_text": "Protects your checkout page by blocking remote content that isn’t explicitly allowed. Scripts and assets loaded by Foxy (including payment gateways and analytics) are always allowed, regardless of the settings below.",
447447
"checked": "Yes",
448448
"unchecked": "No"
449449
},
450-
"csp-policy-report-script-src": {
450+
"csp-policy-enforce-script-src": {
451451
"label": "Custom script sources",
452452
"placeholder": "example.com, *.example.com",
453453
"helper_text": "",
454454
"v8n_too_long": "Domain names must not exceed 1000 characters."
455455
},
456-
"csp-policy-report-reporting-endpoint": {
456+
"csp-policy-enforce-reporting-endpoint": {
457457
"label": "Reporting URL",
458458
"helper_text": "",
459459
"placeholder": "Optional",

0 commit comments

Comments
 (0)