-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (150 loc) · 5.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PCI Task Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.question {
margin-bottom: 15px;
}
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
display: none;
}
.result ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h1>PCI 4.0 Task Quiz</h1>
<div class="question">
<label for="initialQuestion"
>1. Do you have offer your shopper stored credit cards?</label
><br />
<input type="radio" name="initialQuestion" value="storedyes" /> Yes<br />
<input type="radio" name="initialQuestion" value="storedno" /> No
</div>
<div class="question">
<label for="question1">2. What kind of checkout are you using</label
><br />
<input type="radio" name="question1" value="task1" /> OOTB Checkout<br />
<input type="radio" name="question1" value="task2" /> Custom Checkout<br />
<input type="radio" name="question1" value="task3" /> Headless Checkout
</div>
<div class="question">
<label for="question2">3. What theme are you using?</label><br />
<input type="radio" name="question2" value="task4" /> Cornerstone, Peak,
Capacity, Fortune, Merchant<br />
<input type="radio" name="question2" value="task5" /> Marketplace Theme
<br />
<input type="radio" name="question2" value="task6" /> Customized Theme
</div>
<div class="question">
<label for="question3"
>4. Are you using inline scripts in Script Manager?</label
><br />
<input type="radio" name="question3" value="task7" /> Yes<br />
<input type="radio" name="question3" value="task8" /> No
</div>
<div class="question">
<label for="question4"
>4. Are you using external scripts in Script Manager?</label
><br />
<input type="radio" name="question4" value="task9" /> Yes<br />
<input type="radio" name="question4" value="task10" /> No
</div>
<button onclick="generateTasks()">Get My Tasks</button>
<div class="result" id="result"></div>
<script>
function generateTasks() {
const initialAnswer = document.querySelector(
'input[name="initialQuestion"]:checked'
);
const selectedAnswers = document.querySelectorAll(
'input[type="radio"]:checked'
);
const tasks = [];
// Determine time of day preference
const paymentPages = initialAnswer
? initialAnswer.value === "storedyes"
? "Stored Payment Method My Account pages and checkout"
: "checkout"
: "checkout";
// Always include these default tasks at the top of the list
const defaultTasks = [
"Enable the CSP nonce in your control panel settings",
"Obtain inventory for first party checkout scripts",
"Obtain inventory for payment integration scripts",
"Obtain inventory for first party data analytics scripts",
];
tasks.push(...defaultTasks);
selectedAnswers.forEach((answer) => {
switch (answer.value) {
case "task1":
break;
case "task2":
tasks.push(
"Update to the latest Checkout JS.",
"Add SRI hash to custom checkout loader JS"
);
break;
case "task3":
tasks.push(
"You are entirely responsible for PCI 4.0 compliance."
);
break;
case "task4":
tasks.push(
"Update to the latest version of the theme.",
"Obtain inventory for theme scripts from BigCommerce"
);
break;
case "task5":
tasks.push(
"Confirm with theme partner that latest version of theme is compatible with nonce",
"Update to the latest version of the theme.",
"Obtain inventory for theme scripts from Theme Developer"
);
break;
case "task6":
tasks.push(
`Add integrity hash to any external scripts in the theme files on ${paymentPages}.`,
`Add the nonce to any scripts in the theme files on ${paymentPages}.`,
`Move any scripts in the theme files to Script Manager (Optional)`
);
break;
case "task7":
tasks.push(
`Create inventory for inline scripts in Script Manager that live on ${paymentPages}`,
`Determine process to monitor for any changes to inline scripts that live on ${paymentPages}`
);
break;
case "task8":
tasks.push();
break;
case "task9":
tasks.push(
`Create inventory for external scripts in Script Manager that live on ${paymentPages}`,
`Add SRI hashes to external scripts in Script Manager that live on ${paymentPages}`
);
break;
}
});
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `<h3>Your Tasks:</h3><ul>${tasks
.map((task) => `<li><input type='checkbox'> ${task}</li>`)
.join("")}</ul>`;
resultDiv.style.display = "block";
}
</script>
</body>
</html>