Skip to content

Commit 7296320

Browse files
twilkhootwilkhoo
authored
Registrant Experience: Review Information Step (Additional Info) (#246)
* Add and implement EditCardHeader * Edit styles in additional question groups to support responsiveness * Add additional info edit card and edit prop names for consistency * Make all styles consistent. * Lint * Add error validation on save
1 parent 08750f6 commit 7296320

File tree

17 files changed

+460
-129
lines changed

17 files changed

+460
-129
lines changed

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/AdditionalInfo/QuestionCards/CamperQuestionsCard.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const CamperQuestionsCard = ({
2828
}: CamperQuestionsCardProps): React.ReactElement => {
2929
const mdWrapWidth = campSpecificFormQuestions.length > 1 ? "47%" : "100%";
3030

31-
const handleMultipleChoiceUpdate = (
31+
const handleMultipleChoiceChange = (
3232
choice: string,
3333
question: FormQuestion,
3434
) => {
@@ -63,14 +63,13 @@ const CamperQuestionsCard = ({
6363

6464
return (
6565
<QuestionsCardWrapper title={`${camper.firstName} ${camper.lastName}`}>
66-
<VStack py="24px">
67-
<Wrap width="100%" px="20px" justify="space-between">
66+
<VStack px={{ sm: "5", lg: "20" }} py={4}>
67+
<Wrap width="100%" justify="space-between">
6868
{campSpecificFormQuestions.map((question) => (
6969
<WrapItem
7070
key={`additional_info_question_${question.id}`}
7171
width={{ sm: "100%", md: mdWrapWidth }}
72-
px="20px"
73-
py="12px"
72+
py={4}
7473
>
7574
{question.type === "Text" && (
7675
<TextInputGroup
@@ -84,15 +83,15 @@ const CamperQuestionsCard = ({
8483
<MultiselectGroup
8584
formResponses={camper.formResponses}
8685
question={question}
87-
dispatchFormResponseAction={handleSelectionChange}
86+
handleSelectionChange={handleSelectionChange}
8887
nextClicked={nextClicked}
8988
/>
9089
)}
9190
{question.type === "MultipleChoice" && (
9291
<MultipleChoiceGroup
9392
formResponses={camper.formResponses}
9493
question={question}
95-
handleMultipleChoiceUpdate={handleMultipleChoiceUpdate}
94+
handleMultipleChoiceChange={handleMultipleChoiceChange}
9695
nextClicked={nextClicked}
9796
/>
9897
)}

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/AdditionalInfo/QuestionCards/EarlyDropOffLatePickupCard.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
WrapItem,
1111
} from "@chakra-ui/react";
1212
import React from "react";
13+
import RequiredAsterisk from "../../../../../common/RequiredAsterisk";
1314
import QuestionsCardWrapper from "./QuestionsCardWrapper";
1415

1516
type EarlyDropOffLatePickupCardProps = {
@@ -32,10 +33,18 @@ const EarlyDropOffLatePickupCard = ({
3233
return (
3334
<QuestionsCardWrapper title="Early Drop-off and Late Pick-up">
3435
<Wrap>
35-
<WrapItem px="40px" py="12px">
36-
<FormControl isRequired isInvalid={invalid}>
37-
<FormLabel fontWeight="bold" fontSize="18px">
38-
Do your camper(s) require early drop-off or late pick-up?
36+
<WrapItem px={{ sm: "5", lg: "20" }} py={4}>
37+
<FormControl isInvalid={invalid}>
38+
<FormLabel textStyle={{ sm: "xSmallBold", lg: "buttonSemiBold" }}>
39+
Do your camper(s) require early drop-off or late pick-up?{" "}
40+
<Text
41+
as="span"
42+
color="text.critical.100"
43+
fontSize="xs"
44+
verticalAlign="super"
45+
>
46+
<RequiredAsterisk />
47+
</Text>
3948
</FormLabel>
4049
<Text
4150
textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}
@@ -55,10 +64,18 @@ const EarlyDropOffLatePickupCard = ({
5564
>
5665
<VStack alignItems="flex-start">
5766
<Radio value="true" colorScheme="green">
58-
Yes
67+
<Text
68+
textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}
69+
>
70+
Yes
71+
</Text>
5972
</Radio>
6073
<Radio value="false" colorScheme="green">
61-
No
74+
<Text
75+
textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}
76+
>
77+
No
78+
</Text>
6279
</Radio>
6380
</VStack>
6481
</RadioGroup>

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/AdditionalInfo/QuestionCards/QuestionsCardWrapper.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Text } from "@chakra-ui/react";
1+
import { Box, Flex, Text } from "@chakra-ui/react";
22
import React from "react";
33

44
type QuestionsCardWrapperProps = {
@@ -13,7 +13,7 @@ const QuestionsCardWrapper = ({
1313
return (
1414
<Box
1515
width="100%"
16-
backgroundColor="background.grey.200"
16+
backgroundColor="background.grey.500"
1717
marginY={10}
1818
boxShadow="lg"
1919
rounded="xl"
@@ -23,11 +23,13 @@ const QuestionsCardWrapper = ({
2323
<Box
2424
backgroundColor="background.white.100"
2525
borderTopRadius={10}
26-
px="40px"
27-
py="12px"
2826
borderBottomWidth={1}
2927
>
30-
<Text textStyle="displaySmallSemiBold">{title}</Text>
28+
<Flex py={6} px={{ sm: "5", lg: "20" }} alignItems="center">
29+
<Text textStyle={{ sm: "xSmallBold", lg: "displayLarge" }}>
30+
{title}
31+
</Text>
32+
</Flex>
3133
</Box>
3234
{children}
3335
</Box>

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/AdditionalInfo/additionalInfoReducer.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,15 @@ export const useAdditionalInfoDispatcher = (
4141
return dispatch;
4242
};
4343

44+
export const checkAdditionalQuestionsAnsweredSingleCamper = (
45+
camper: RegistrantExperienceCamper,
46+
requiredQuestions: string[],
47+
): boolean => {
48+
return requiredQuestions.every(
49+
(question) => camper.formResponses?.get(question) ?? false,
50+
);
51+
};
52+
4453
export const checkAdditionalQuestionsAnswered = (
4554
campers: RegistrantExperienceCamper[],
4655
campSpecificFormQuestions: FormQuestion[],
@@ -55,8 +64,6 @@ export const checkAdditionalQuestionsAnswered = (
5564
.map((question) => question.question);
5665

5766
return campers.every((camper) =>
58-
requiredQuestions.every(
59-
(question) => camper.formResponses?.get(question) ?? false,
60-
),
67+
checkAdditionalQuestionsAnsweredSingleCamper(camper, requiredQuestions),
6168
);
6269
};

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/AdditionalInfo/edlpSessionRegistration.tsx‎

Lines changed: 53 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,9 @@ const EDLPSessionRegistration = ({
196196
{/* Each accordionButton must be wrapped in a heading tag */}
197197
<h2>
198198
<AccordionButton
199-
bg="white"
200-
padding={{ base: "12px 20px", sm: "16px 40px", md: "32px 80px" }}
199+
bg="background.white.100"
200+
px={{ sm: "5", lg: "20" }}
201+
py={{ sm: "4", lg: "8" }}
201202
borderRadius="10px"
202203
_expanded={{
203204
borderBottomRadius: "0",
@@ -207,17 +208,17 @@ const EDLPSessionRegistration = ({
207208
<Box as="span" flex="1" textAlign="left">
208209
<Text
209210
as="span"
210-
textStyle={{ base: "xSmallBold", md: "displayMediumBold" }}
211+
textStyle={{ sm: "xSmallBold", lg: "displayLarge" }}
211212
>
212213
Session:{" "}
213214
</Text>
214215
<Text
215216
as="span"
216-
textStyle={{ base: "xSmallBold", md: "displayMediumBold" }}
217+
textStyle={{ sm: "xSmallBold", lg: "displayLarge" }}
217218
>
218219
{getFormattedDateString(session.dates)}
219220
</Text>
220-
<Text textStyle={{ base: "xSmallRegular", md: "buttonRegular" }}>
221+
<Text textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}>
221222
{formatAMPM(camp.startTime)} - {formatAMPM(camp.endTime)}
222223
</Text>
223224
</Box>
@@ -228,35 +229,51 @@ const EDLPSessionRegistration = ({
228229
<AccordionPanel padding="0">
229230
<Hide below="600px">
230231
<Box
231-
padding={{ base: "12px 20px", sm: "16px 40px", md: "32px 80px" }}
232+
padding={{ sm: "16px 40px", lg: "32px 80px" }}
233+
bg="background.grey.500"
232234
>
233-
<Table
234-
variant="simple"
235-
colorScheme="blackAlpha"
236-
background="#FBFBFB"
237-
size="sm"
238-
>
235+
<Table variant="simple" colorScheme="blackAlpha" size="sm">
239236
<Thead>
240237
<Tr textAlign="left">
241238
<Td color="text.default.100" border="none" padding="3px">
242-
Date
239+
<Text
240+
textStyle={{ sm: "xSmallBold", lg: "buttonSemiBold" }}
241+
>
242+
Date
243+
</Text>
243244
</Td>
244245
<Td color="text.default.100" border="none" padding="3px">
245-
Early Dropoff
246+
<Text
247+
textStyle={{ sm: "xSmallBold", lg: "buttonSemiBold" }}
248+
>
249+
Early Dropoff
250+
</Text>
246251
</Td>
247252
<Td color="text.default.100" border="none" padding="3px">
248-
Late Pickup
253+
<Text
254+
textStyle={{ sm: "xSmallBold", lg: "buttonSemiBold" }}
255+
>
256+
Late Pickup
257+
</Text>
249258
</Td>
250259
<Td color="text.default.100" border="none" padding="3px">
251-
Cost/Child
260+
<Text
261+
textStyle={{ sm: "xSmallBold", lg: "buttonSemiBold" }}
262+
>
263+
Cost/Child
264+
</Text>
252265
</Td>
253266
</Tr>
254267
</Thead>
255268
<Tbody>
256269
{session.dates.map((date: string, dateIndex: number) => {
257270
return (
258271
<Tr key={`${date}_edlp_row`}>
259-
<Td border="none" textStyle="buttonRegular" padding="3px">
272+
<Td
273+
border="none"
274+
textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}
275+
padding="3px"
276+
>
260277
{getFormattedSingleDateString(date)}
261278
</Td>
262279
<Td border="none" padding="3px">
@@ -266,6 +283,10 @@ const EDLPSessionRegistration = ({
266283
dateIndex,
267284
false,
268285
)}
286+
textStyle={{
287+
sm: "xSmallRegular",
288+
lg: "buttonRegular",
289+
}}
269290
onChange={(event) => {
270291
onSelectEDLP(
271292
Number(event.target.value),
@@ -284,6 +305,10 @@ const EDLPSessionRegistration = ({
284305
<Select
285306
width="120px"
286307
defaultValue={getDefaultSelectOption(dateIndex, true)}
308+
textStyle={{
309+
sm: "xSmallRegular",
310+
lg: "buttonRegular",
311+
}}
287312
onChange={(event) => {
288313
onSelectEDLP(
289314
Number(event.target.value),
@@ -298,7 +323,11 @@ const EDLPSessionRegistration = ({
298323
{getLpOptions(date)}
299324
</Select>
300325
</Td>
301-
<Td border="none" padding="3px">
326+
<Td
327+
border="none"
328+
textStyle={{ sm: "xSmallRegular", lg: "buttonRegular" }}
329+
padding="3px"
330+
>
302331
${getTotalEdlpCostForDay(date)}
303332
</Td>
304333
</Tr>
@@ -370,19 +399,21 @@ const EDLPSessionRegistration = ({
370399
})}
371400
</Hide>
372401
<Box
373-
bg="white"
374-
padding={{ base: "12px 20px", sm: "16px 40px", md: "32px 80px" }}
402+
bg="background.white.100"
403+
px={{ sm: "5", lg: "20" }}
404+
py={{ sm: "4", lg: "8" }}
375405
borderBottomRadius="10px"
406+
borderTop="1px solid #EEEFF1"
376407
>
377408
<Text
378409
as="span"
379-
textStyle={{ base: "xSmallBold", md: "displayMediumBold" }}
410+
textStyle={{ sm: "xSmallBold", lg: "displayMediumBold" }}
380411
>
381412
Total Cost:{" "}
382413
</Text>
383414
<Text
384415
as="span"
385-
textStyle={{ base: "xSmallRegular", md: "displayMediumRegular" }}
416+
textStyle={{ sm: "xSmallRegular", lg: "displayMediumRegular" }}
386417
>
387418
${getTotalEdlpCostForSession()} per camper
388419
</Text>

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/PersonalInfo/CamperCard.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const CamperCard = ({
5858

5959
const [nextClicked, setNextClicked] = useState(false);
6060

61-
const handleMultipleChoiceUpdate = (
61+
const handleMultipleChoiceChange = (
6262
choice: string,
6363
question: FormQuestion,
6464
) => {
@@ -159,8 +159,14 @@ const CamperCard = ({
159159
}
160160

161161
return (
162-
<Box boxShadow="lg" rounded="xl" borderWidth={1} width="100%">
163-
<Box backgroundColor="#FFFFFF" rounded="xl">
162+
<Box
163+
boxShadow="lg"
164+
rounded="xl"
165+
borderWidth={1}
166+
width="100%"
167+
backgroundColor="background.grey.500"
168+
>
169+
<Box backgroundColor="background.white.100" rounded="xl">
164170
<Heading textStyle="displayLarge">
165171
<Flex py={6} px={{ sm: "5", lg: "20" }} alignItems="center">
166172
<Text textStyle={{ sm: "xSmallBold", lg: "displayLarge" }}>
@@ -339,8 +345,6 @@ const CamperCard = ({
339345
<WrapItem
340346
key={`personal_info_question_${question.question}`}
341347
width={{ sm: "100%", md: mdWrapWidth }}
342-
px="20px"
343-
py="12px"
344348
>
345349
{question.type === "Text" && (
346350
<TextInputGroup
@@ -354,15 +358,15 @@ const CamperCard = ({
354358
<MultiselectGroup
355359
formResponses={camper.formResponses}
356360
question={question}
357-
dispatchFormResponseAction={handleSelectionChange}
361+
handleSelectionChange={handleSelectionChange}
358362
nextClicked={nextClicked}
359363
/>
360364
)}
361365
{question.type === "MultipleChoice" && (
362366
<MultipleChoiceGroup
363367
formResponses={camper.formResponses}
364368
question={question}
365-
handleMultipleChoiceUpdate={handleMultipleChoiceUpdate}
369+
handleMultipleChoiceChange={handleMultipleChoiceChange}
366370
nextClicked={nextClicked}
367371
/>
368372
)}

‎frontend/src/components/pages/RegistrantExperience/RegistrationSteps/PersonalInfo/ContactCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const ContactCard = ({
5353
}: ContactCardProps): React.ReactElement => {
5454
const mdWrapWidth = emergencyContactQuestions.length > 1 ? "47%" : "100%";
5555

56-
const handleMultipleChoiceUpdate = (
56+
const handleMultipleChoiceChange = (
5757
choice: string,
5858
question: FormQuestion,
5959
) => {
@@ -297,15 +297,15 @@ const ContactCard = ({
297297
<MultiselectGroup
298298
formResponses={camper.formResponses}
299299
question={question}
300-
dispatchFormResponseAction={handleSelectionChange}
300+
handleSelectionChange={handleSelectionChange}
301301
nextClicked={nextClicked}
302302
/>
303303
)}
304304
{question.type === "MultipleChoice" && (
305305
<MultipleChoiceGroup
306306
formResponses={camper.formResponses}
307307
question={question}
308-
handleMultipleChoiceUpdate={handleMultipleChoiceUpdate}
308+
handleMultipleChoiceChange={handleMultipleChoiceChange}
309309
nextClicked={nextClicked}
310310
/>
311311
)}

0 commit comments

Comments
 (0)