Add attestation checkbox

Author: jboolean

frontend/src/screens/App/screens/Corrections/components/SelectAlternates.less

@@ -72,3 +72,11 @@
   .linkButton();
   margin-top: 1rem;
 }
+
+.attestedLabel {
+  margin-top: 1rem;
+  display: block;
+  input {
+    margin-right: 0.5rem;
+  }
+}

frontend/src/screens/App/screens/Corrections/components/SelectAlternates.tsx

@@ -22,6 +22,8 @@ export default function SelectAlternates({
     toggleAlternateSelection,
     selectAllAlternates,
     deselectAllAlternates,
+    alternatesAttested,
+    setAlternatesAttested,
   } = useCorrectionsStore();
   const { isLoginValidated } = useLoginStore();
 
@@ -31,6 +33,10 @@ export default function SelectAlternates({
     toggleAlternateSelection(identifier);
   };
 
+  const handleAttestedChange = (): void => {
+    setAlternatesAttested(!alternatesAttested);
+  };
+
   return (
     <div>
       {!isEmpty(alternatesSelections) ? (
@@ -85,6 +91,19 @@ export default function SelectAlternates({
                 Deselect All
               </button>
             </div>
+            <label className={stylesheet.attestedLabel}>
+              <input
+                type="checkbox"
+                id="attested"
+                name="attested"
+                checked={alternatesAttested}
+                onChange={handleAttestedChange}
+                disabled={!isLoginValidated}
+                required
+              />
+              I&rsquo;ve reviewed these other photos and selected any of the
+              same place
+            </label>
           </div>
         </FieldSet>
       ) : (

frontend/src/screens/App/screens/Corrections/stores/CorrectionsStore.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 
+import { isEmpty } from 'lodash';
 import useLoginStore from 'shared/stores/LoginStore';
 import { getAlternatePhotos, getPhoto, Photo } from 'shared/utils/photosApi';
 import {
@@ -14,6 +15,7 @@ interface State {
   photoId: string | null;
   photo: Photo | null;
   alternatesSelections: Record<string, boolean>;
+  alternatesAttested: boolean;
 
   isMapOpen: boolean;
   correctedLng: number | null;
@@ -34,6 +36,7 @@ interface Actions {
   toggleAlternateSelection: (identifier: string) => void;
   selectAllAlternates: () => void;
   deselectAllAlternates: () => void;
+  setAlternatesAttested: (attested: boolean) => void;
   openMap: () => void;
   closeMap: () => void;
   setCorrectedLngLat: (lng: number, lat: number) => void;
@@ -49,6 +52,7 @@ const useCorrectionsStore = create(
     photoId: null,
     photo: null,
     alternatesSelections: {},
+    alternatesAttested: false,
     isMapOpen: false,
     correctedLng: null,
     correctedLat: null,
@@ -124,6 +128,12 @@ const useCorrectionsStore = create(
       });
     },
 
+    setAlternatesAttested: (attested: boolean) => {
+      set((draft) => {
+        draft.alternatesAttested = attested;
+      });
+    },
+
     openMap: () => {
       set((draft) => {
         draft.isMapOpen = true;
@@ -196,17 +206,20 @@ export function useCorrectionsStoreComputeds(): ComputedState {
     correctedLat,
     correctedLng,
     correctionType,
+    alternatesSelections,
+    alternatesAttested,
   } = useCorrectionsStore();
   const defaultGeocode = photo?.effectiveGeocode;
   return {
     previousLng: defaultGeocode?.lngLat.lng ?? null,
     previousLat: defaultGeocode?.lngLat.lat ?? null,
     previousAddress: photo?.address ?? null,
     canSubmit:
-      (correctionType === 'geocode' &&
+      (alternatesAttested || isEmpty(alternatesSelections)) &&
+      ((correctionType === 'geocode' &&
         correctedLat !== null &&
         correctedLng !== null) ||
-      (correctionType === 'address' && correctedAddress !== null),
+        (correctionType === 'address' && correctedAddress !== null)),
   };
 }