Terms and conditions checkbox

frontend/src/components/TermsAndConditions.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'react'
+import CloseIcon from './alert/CloseIcon'
+
+interface Props {
+  close: () => void
+}
+
+const TermsAndConditions: FunctionComponent<Props> = ({ close }) => {
+  return (
+    <div className="bg-gray-300 inset-1/4 fixed text-justify rounded-md">
+      <div className="absolute top-0 right-0">
+        <CloseIcon
+          color="text-black"
+          onClick={() => {
+            close()
+          }}
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-center text-2xl">Terms & Conditions</h3>
+        Placeholder text for terms and conitions
+      </div>
+    </div>
+  )
+}
+
+export default TermsAndConditions

frontend/src/hooks/useUser.tsx

@@ -0,0 +1,23 @@
+import { headers, SERVER_URL, throwOnProblem } from './useAuth'
+
+const updateTermsAndConditions = ({
+  id,
+  termsAndConditionsAcceptedAt,
+}: {
+  id: number
+  termsAndConditionsAcceptedAt: Date
+}) =>
+  fetch(`${SERVER_URL}/user/termsandcond/${id}`, {
+    credentials: 'include',
+    method: 'PATCH',
+    headers: {
+      ...headers,
+    },
+    body: JSON.stringify(termsAndConditionsAcceptedAt),
+  }).then(throwOnProblem(`Updating terms and conditions failed!`))
+
+export const useUser = () => {
+  return {
+    updateTermsAndConditions,
+  }
+}

frontend/src/pages/groups/GroupCreatePage.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../../hooks/useAuth'
+import { useUser } from '../../hooks/useUser'
 import LayoutWithNav from '../../layouts/LayoutWithNav'
 import {
   AllGroupsDocument,
@@ -12,8 +13,9 @@ import { setEmptyFieldsToUndefined } from '../../utils/setEmptyFieldsToUndefined
 import GroupForm from './GroupForm'
 
 const GroupCreatePage: FunctionComponent = () => {
-  const { refreshMe } = useAuth()
+  const { refreshMe, me: profile } = useAuth()
   const navigate = useNavigate()
+  const user = useUser()
 
   const [addGroup, { loading: mutationIsLoading, error: mutationError }] =
     useCreateGroupMutation()
@@ -30,6 +32,14 @@ const GroupCreatePage: FunctionComponent = () => {
         refetchQueries: [{ query: AllGroupsDocument }],
       })
 
+      // updated user with termsAndConditionsAcceptedAt time
+      if (profile != undefined) {
+        user.updateTermsAndConditions({
+          id: profile.id,
+          termsAndConditionsAcceptedAt: input.termsAndConditionsAcceptedAt,
+        })
+      }
+
       // Because we cache the association between a group captain and their
       // group, we need to refresh that association when they create their first
       // group.
@@ -65,6 +75,7 @@ const GroupCreatePage: FunctionComponent = () => {
             onSubmit={onSubmit}
             isLoading={mutationIsLoading}
             submitButtonLabel="Create group"
+            renderTermsAndConditions={true}
           />
         </main>
       </div>

frontend/src/pages/groups/GroupEditPage.tsx

@@ -75,6 +75,7 @@ const GroupEditPage: FunctionComponent = () => {
             submitButtonLabel="Save changes"
             onSubmit={onSubmit}
             defaultValues={originalGroupData}
+            renderTermsAndConditions={false}
           />
         </main>
       </div>

frontend/src/pages/groups/GroupForm.tsx

@@ -3,19 +3,22 @@ import {
   PropsWithChildren,
   ReactNode,
   useEffect,
+  useState,
 } from 'react'
 import { useForm } from 'react-hook-form'
 import Button from '../../components/Button'
 import SelectField from '../../components/forms/SelectField'
 import TextArea from '../../components/forms/TextArea'
 import TextField from '../../components/forms/TextField'
+import TermsAndConditions from '../../components/TermsAndConditions'
 import { GROUP_TYPE_OPTIONS } from '../../data/constants'
 import { useAuth } from '../../hooks/useAuth'
 import { useCountries } from '../../hooks/useCountries'
 import { useRegions } from '../../hooks/useRegions'
 import { GroupCreateInput, GroupQuery, GroupType } from '../../types/api-types'
 import { formatRegion } from '../../utils/format'
 import { stripIdAndTypename } from '../../utils/types'
+import TermsAndCondCheckbox from './TermsAndCondCheckbox'
 
 interface Props {
   /**
@@ -35,6 +38,11 @@ interface Props {
    * The callback triggered when the user submits the form
    */
   onSubmit: (input: GroupCreateInput) => void
+  /**
+   * If true, checkbox for terms and conditions will be displayed
+   * We don't want to display checkbox terms and conditions on update page
+   */
+  renderTermsAndConditions: boolean
 }
 
 /**
@@ -44,6 +52,10 @@ const GroupForm: FunctionComponent<PropsWithChildren<Props>> = (props) => {
   const { me: profile } = useAuth()
   const countries = useCountries()
   const regions = useRegions()
+  const [showTermsAndCond, setShowTermsAndCond] = useState<boolean>(false)
+  const [timeTcChecked, setTimeTcChecked] = useState<Date | null>(null)
+
+  console.log(profile)
 
   const {
     register,
@@ -73,6 +85,10 @@ const GroupForm: FunctionComponent<PropsWithChildren<Props>> = (props) => {
       input.groupType = GroupType.Regular
     }
 
+    if (timeTcChecked !== null) {
+      //input.termsAndConditionsAcceptedAt = timeTcChecked
+    }
+
     props.onSubmit({
       ...input,
       // FIXME: for some reasons, servingRegions will be `false` in no item is selected
@@ -81,8 +97,32 @@ const GroupForm: FunctionComponent<PropsWithChildren<Props>> = (props) => {
     })
   })
 
+  function handleTcChange() {
+    if (timeTcChecked === null) {
+      setTimeTcChecked(new Date())
+    } else {
+      setTimeTcChecked(null)
+    }
+  }
+
+  let termsAndConditions
+  if (props.renderTermsAndConditions) {
+    termsAndConditions = (
+      <TermsAndCondCheckbox
+        handleTcChange={handleTcChange}
+        timeTcChecked={timeTcChecked}
+        setShowTermsAndCond={setShowTermsAndCond}
+      />
+    )
+  } else {
+    termsAndConditions = null
+  }
+
   return (
     <form onSubmit={submitForm}>
+      {showTermsAndCond ? (
+        <TermsAndConditions close={() => setShowTermsAndCond(false)} />
+      ) : null}
       <fieldset className="space-y-4">
         <TextField
           label="Group name"
@@ -174,6 +214,7 @@ const GroupForm: FunctionComponent<PropsWithChildren<Props>> = (props) => {
           register={register}
           errors={errors}
         />
+        {termsAndConditions}
       </fieldset>
 
       <fieldset className="mt-12">
@@ -199,7 +240,10 @@ const GroupForm: FunctionComponent<PropsWithChildren<Props>> = (props) => {
         variant="primary"
         type="submit"
         className="mt-6"
-        disabled={props.isLoading}
+        disabled={
+          props.isLoading ||
+          (timeTcChecked === null && props.renderTermsAndConditions)
+        }
       >
         {props.submitButtonLabel}
       </Button>

frontend/src/pages/groups/TermsAndCondCheckbox.tsx

@@ -0,0 +1,33 @@
+import { FunctionComponent } from 'react'
+import CheckboxField from '../../components/forms/CheckboxField'
+
+interface Props {
+  timeTcChecked: Date | null
+  handleTcChange: () => void
+  setShowTermsAndCond: (tc: boolean) => void
+}
+
+const TermsAndCondCheckbox: FunctionComponent<Props> = ({
+  timeTcChecked,
+  handleTcChange,
+  setShowTermsAndCond,
+}) => {
+  return (
+    <div className="flex flex-row">
+      <CheckboxField
+        label=""
+        checked={timeTcChecked === null ? false : true}
+        onChange={handleTcChange}
+        className="cursor-pointer"
+      />
+      <a
+        className="cursor-pointer text-blue-500"
+        onClick={() => setShowTermsAndCond(true)}
+      >
+        &nbsp;I accept terms and conditions
+      </a>
+    </div>
+  )
+}
+
+export default TermsAndCondCheckbox