Code-4-Community · kirtanakrishnan · Nov 2, 2023 · Dec 7, 2023
@@ -20,6 +20,7 @@ import SurveyPage from './pages/survey/SurveyPage';
 import theme from './theme';
 import LandingPageRedirect from './components/LandingPageRedirect';
 import Footer from './components/footer/Footer';
+import CreateSurvey from './components/createSurvey/CreateSurvey';
 
 const queryClient = new QueryClient();
 
@@ -53,6 +54,7 @@ const App: React.FC<AppProps> = () => (
                 <Route path="dashboard" element={<ResearcherLandingPage />} />
                 <Route path="add-new-admin" element={<AddAdminPage />} />
               </Route>
+              <Route path="/create-survey" element={<CreateSurvey />} />
               <Route path="/survey/:survey_uuid/:reviewer_uuid" element={<SurveyPage />} />
               <Route path="/survey/confirmation" element={<ThankYou />} />
               <Route path="/survey/confirm-reviewer" element={<ReviewerConfirmationPage />} />

@@ -0,0 +1,61 @@
+body {
+    position: relative;
+    width: 1440px;
+    height: 900px;
+    background: #FFFFFF;
+}
+
+#sidebar {
+    position: absolute;
+    visibility: hidden;
+    width: 361px;
+    height: 900px;
+    left: 0px;
+    top: 0px;
+
+    background: #C4C4C4;
+}
+
+img {
+    position: absolute;
+    width: 249px;
+    height: 74px;
+    left: 460px;
+    top: 254px;
+}
+
+hr {
+    position: absolute;
+    width: 520px;
+    height: 0px;
+    left: 460px;
+    top: 355px;
+
+    border: 2px solid #417671;
+}
+
+#emailBody {
+    position: absolute;
+    width: 453px;
+    height: 252px;
+    left: 460px;
+    top: 382px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 17px;
+    color: #000;
+}
+
+a {
+    color: #D46136;
+}
+
+.resetPassword {
+    color: #D46136;
+    position: absolute;
+
+}
+
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="forgotPassword.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+    </head>
+
+
+    <body>
+
+        <div id="sidebar">
+
+        </div>
+
+        <div id="emailHeader">
+            <img src="../components/logoBig.svg">
+            <hr>
+        </div>
+
+        <div id="emailBody">
+            <p>
+                Hello! We received a request to change your password for the J-PAL recommendation letter program.
+            </p>
+
+            <p>
+                If you did not make this request, you can ignore this email.
+            </p>
+
+            <button>
+                Reset Password
+                <a href="resetPassword"></a>
+            </button>
+
+            <p>
+                Thank you,
+                <br>[asdf]
+            </p>
+        </div>
+    </div>
+
+
+    </body>
+
+
+
+
+
+
+
+
+
+
+
+
+
+</html>
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Container } from '@chakra-ui/react';
+
+const CreateSurvey: React.FC = () => (
+
+        <Container maxW="7xl" mt={12}>
+            Create Survey Flow
+        </Container>
+
+
+
+);
+
+export default CreateSurvey;
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+import { Checkbox, FormControl, FormErrorMessage, FormLabel, Text, Stack } from '@chakra-ui/react';
+
+interface CheckboxOption {
+  label: string;
+  value: string;
+}
+
+interface CheckboxFieldProps {
+  fieldName: string;
+  displayName: string;
+  isRequired: boolean;
+  options: CheckboxOption[];
+  defaultValue?: string;
+}
+
+const CheckboxField: React.FC<CheckboxFieldProps> = ({
+  fieldName,
+  displayName,
+  isRequired,
+  options,
+  defaultValue,
+}) => (
+  <Field name={fieldName} validate={isRequired && ((value: any) => (value ? undefined : 'Required'))}>
+    {({ field, form }: FieldProps<string>) => (
+      <FormControl isInvalid={Boolean(form.errors[fieldName] && (form.touched[fieldName] || form.submitCount > 0))}>
+        <FormLabel htmlFor={fieldName} aria-label={displayName || fieldName}>
+          {displayName || fieldName}
+        </FormLabel>
+
+        <Stack direction="column" spacing={2}>
+          {options.map(({ label, value }) => (
+            <Checkbox
+              key={value}
+              isChecked={field.value === value}
+              onChange={() => {
+                form.setFieldValue(fieldName, field.value === value ? '' : value);
+              }}
+              data-testid={`${fieldName}-${value}`}
+            >
+              <Text fontSize={{ base: 'xs', sm: 'xs', md: 'sm' }}>{label}</Text>
+            </Checkbox>
+          ))}
+        </Stack>
+
+        <FormErrorMessage>{form.errors[fieldName]}</FormErrorMessage>
+      </FormControl>
+    )}
+  </Field>
+);
+
+export default CheckboxField;
+
+
+
+
+
@@ -3,6 +3,9 @@ import React from 'react';
 import { render } from '../../test-utils';
 import DEFAULT_QUESTIONS from './defaultQuestions';
 import SurveyForm from './SurveyForm';
+import createCheckboxQuestion from "./SurveyForm";
+import isCheckboxQuestion from "./SurveyForm";
+
 
 describe('SurveyForm', () => {
   const YOUTH_NAME = 'Nash Ville';
@@ -69,4 +72,4 @@ describe('SurveyForm', () => {
     screen.getByTestId('go-back-button').click();
     expect(mockGoBack).toHaveBeenCalled();
   });
-});
+});
@@ -5,6 +5,7 @@ import React from 'react';
 import { Question, Response } from '../../api/dtos/survey-assignment.dto';
 import Form, { FormValues } from '../form/Form';
 import MultipleChoiceField from '../form/MultipleChoiceField';
+import CheckboxField from '../form/CheckboxField';
 
 /**
  * Makes a string safe for use with Formik by removing all periods.
@@ -39,7 +40,39 @@ function invalidResponses(
   return invalid;
 }
 
+/* Converting yes/no questions to checkboxes */
+function createCheckboxQuestion(questions: Question[]): Question {
+  const checkboxQuestion: Question = {
+    question: 'Check off the box if you agree with the question',
+    options: [],
+  };
+
+  questions.forEach((question) =>   {
+    if (question.options.length === 2  && question.options.includes('Yes') && question.options.includes('No')) {
+      // delete the yes/no question
+      questions.splice(questions.indexOf(question), 1);
+
+      // add title of deleted question to option in checkboxQuestion
+      checkboxQuestion.options.push(question.question);
+    }
+  });
+
+  return checkboxQuestion;
+
+}
+
+/* Checks if a question is a checkbox question */ 
+function isCheckboxQuestion(question: Question): boolean {
+  return (
+    question.question === 'Check off the box if you agree with the question'
+  );
+}
+
+
+
 function formValuesToResponses(questions: Question[], values: FormValues): Response[] {
+  const checkboxQuestion = createCheckboxQuestion(questions);
+  questions.push(checkboxQuestion);
   const responses = Object.entries(values).map(([formikSafeQuestion, selectedOption]) => {
     const question = fromFormikSafeFieldName(formikSafeQuestion);
     if (selectedOption === undefined) {
@@ -70,13 +103,17 @@ function responsesToFormValues(responses: Response[]): FormValues {
   );
 }
 
+
+
 const SurveyForm: React.FC<SurveyFormProps> = ({
   youthName,
   questions,
   continueAndSaveResponses,
   goBack,
   savedResponses,
 }) => (
+
+
   <Stack direction={{ base: 'column', md: 'row' }} justify="left">
     <IconButton
       marginTop="10"
@@ -115,7 +152,10 @@ const SurveyForm: React.FC<SurveyFormProps> = ({
             <Text color="white">Please fill out all questions.</Text>
           </Box>
 
+
+
           {questions.map((question) => (
+
             <Box
               borderWidth="1px"
               borderRadius="2xl"
@@ -125,16 +165,30 @@ const SurveyForm: React.FC<SurveyFormProps> = ({
               width="full"
               key={question.question}
             >
-              <MultipleChoiceField
-                displayName={pupa(question.question, { subject: youthName.split(' ')[0] })}
-                fieldName={toFormikSafeFieldName(question.question)}
-                options={question.options.map((option) => ({ label: option, value: option }))}
-                isRequired
-                defaultValue={
-                  savedResponses &&
-                  savedResponses.find((r) => r.question === question.question)?.selectedOption
-                }
-              />
+              {isCheckboxQuestion(question) ? (
+                <CheckboxField
+                  fieldName={question.question}
+                  displayName={question.question}
+                  options={question.options.map((option) => ({ label: option, value: option }))}
+                  isRequired
+                  defaultValue={
+                    savedResponses &&
+                    savedResponses.find((r) => r.question === question.question)?.selectedOption
+                  }
+                />
+              ) : (
+                <MultipleChoiceField
+                  displayName={pupa(question.question, { subject: youthName.split(' ')[0] })}
+                  fieldName={toFormikSafeFieldName(question.question)}
+                  options={question.options.map((option) => ({ label: option, value: option }))}
+                  isRequired
+                  defaultValue={
+                    savedResponses &&
+                    savedResponses.find((r) => r.question === question.question)?.selectedOption
+                  }
+                />
+              )}
+
             </Box>
           ))}
         </VStack>