90 |
91 |
Personal Info
92 |
Please provide your name, email address, and phone number
93 |
94 |
95 |
96 |
127 |
131 | {
135 | const { name, email, number } = input;
136 | const emailPattern =
137 | /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
138 | const numberPattern = /^\d+$/;
139 | const namePattern = /\w+/;
140 |
141 | name.value == ""
142 | ? setInput((prev) => {
143 | return { ...prev, name: { ...prev.name, missing: true } };
144 | })
145 | : setInput((prev) => {
146 | return {
147 | ...prev,
148 | name: { ...prev.name, missing: false },
149 | };
150 | });
151 | email.value == ""
152 | ? setInput((prev) => {
153 | return {
154 | ...prev,
155 | email: { ...prev.email, missing: true },
156 | };
157 | })
158 | : setInput((prev) => {
159 | return {
160 | ...prev,
161 | email: { ...prev.email, missing: false },
162 | };
163 | });
164 | number.value == ""
165 | ? setInput((prev) => {
166 | return {
167 | ...prev,
168 | number: { ...prev.number, missing: true },
169 | };
170 | })
171 | : setInput((prev) => {
172 | return {
173 | ...prev,
174 | number: { ...prev.number, missing: false },
175 | };
176 | });
177 |
178 | if (
179 | namePattern.test(name.value) &&
180 | emailPattern.test(email.value) &&
181 | numberPattern.test(number.value)
182 | ) {
183 | dispatch(nextStep());
184 | return;
185 | } else {
186 | namePattern.test(name.value)
187 | ? setInput((prev) => {
188 | return { ...prev, name: { ...prev.name, valid: true } };
189 | })
190 | : setInput((prev) => {
191 | return {
192 | ...prev,
193 | name: { ...prev.name, valid: false },
194 | };
195 | });
196 | emailPattern.test(email.value)
197 | ? setInput((prev) => {
198 | return {
199 | ...prev,
200 | email: { ...prev.email, valid: true },
201 | };
202 | })
203 | : setInput((prev) => {
204 | return {
205 | ...prev,
206 | email: { ...prev.email, valid: false },
207 | };
208 | });
209 | numberPattern.test(number.value)
210 | ? setInput((prev) => {
211 | return {
212 | ...prev,
213 | number: { ...prev.number, valid: true },
214 | };
215 | })
216 | : setInput((prev) => {
217 | return {
218 | ...prev,
219 | number: { ...prev.number, valid: false },
220 | };
221 | });
222 | return;
223 | }
224 | }}
225 | >
226 | Next Step
227 |
228 |
229 |
233 |
234 |
Select your plan
235 |
You have the option of monthly or yearly billing.
236 |
237 |
238 |
239 |
240 | dispatch(prevStep())}
244 | >
245 | Go Back
246 |
247 | {
251 | if (selectedPlan.type == "") return;
252 | dispatch(nextStep());
253 | }}
254 | >
255 | Next Step
256 |
257 |
258 |
289 |
290 |
Finishing up
291 |
Double-check everything looks OK before confirming.
292 |
293 |
294 |
295 |
296 |
297 | {selectedPlan.type}
298 | {`(${monthlyBilling ? "monthly" : "yearly"})`}
299 |
300 | {
302 | dispatch(prevStep());
303 | dispatch(prevStep());
304 | }}
305 | >
306 | Change
307 |
308 |
309 |
{`$${
310 | monthlyBilling ? selectedPlan.price : selectedPlan.price * 10
311 | }/${monthlyBilling ? "mo" : "yr"}`}
312 |
313 | {addOns.map((addOn) => {
314 | if (addOn.selected) {
315 | return (
316 |
317 | {addOn.type}
318 | {`+$${
319 | monthlyBilling ? addOn.price : addOn.price * 10
320 | }/${monthlyBilling ? "mo" : "yr"}`}
321 |
322 | );
323 | }
324 | })}
325 |
326 |
327 | {`Total (per ${
328 | monthlyBilling ? "month" : "year"
329 | })`}
330 |
{`+${total}/${
331 | monthlyBilling ? "mo" : "yr"
332 | }`}
333 |
334 |
335 | dispatch(prevStep())}
339 | >
340 | Go Back
341 |
342 | {
346 | dispatch(nextStep());
347 | }}
348 | >
349 | Confirm
350 |
351 |
352 |
358 |