Add email prompt when finalizing election

packages/frontend/src/components/ConfirmationDialogProvider.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
 import { StyledButton } from './styles';
+import { useSubstitutedTranslation } from './util';
 // Built from this example buth with MUI dialogs: https://akashhamirwasia.com/blog/building-expressive-confirm-dialog-api-in-react/
 // Uses a context provider to allow any component to access a confirm dialog component using the useConfirm hook
 // Example: 
@@ -21,25 +22,27 @@ import { StyledButton } from './styles';
 interface ConfirmData {
     title: string
     message: string
+    cancel?: string
+    submit?: string
 }
 
 type confirmContext = (data: ConfirmData) => Promise<boolean>
 
 const ConfirmDialog = createContext<confirmContext>(null);
 
 export function ConfirmDialogProvider({ children }) {
-
-
-    const [state, setState] = useState({ isOpen: false, title: '', message: '' });
+    const [state, setState] = useState({ isOpen: false, title: '', message: '', submit: null, cancel: null});
     const fn = useRef((choice: boolean) => { });
 
+    const {t} = useSubstitutedTranslation();
+
     const confirm = useCallback(
         (data: ConfirmData) => {
             return new Promise((resolve: (value: boolean) => void) => {
-                setState({ ...data, isOpen: true });
+                setState({ ...state, ...data, isOpen: true });
                 fn.current = (choice) => {
                     resolve(choice);
-                    setState({ isOpen: false, title: '', message: '' });
+                    setState({ isOpen: false, title: '', message: '', submit: null, cancel: null });
                 };
             });
         },
@@ -60,18 +63,18 @@ export function ConfirmDialogProvider({ children }) {
                 <DialogActions>
                     <StyledButton
                         type='button'
-                        variant="contained"
+                        variant="outlined"
                         width="100%"
                         fullWidth={false}
                         onClick={() => fn.current(false)}>
-                        Cancel
+                        {state['cancel'] ?? t('keyword.cancel')}
                     </StyledButton>
                     <StyledButton
                         type='button'
                         variant="contained"
                         fullWidth={false}
                         onClick={() => fn.current(true)}>
-                        Submit
+                        {state['submit'] ?? t('keyword.submit')}
                     </StyledButton>
                 </DialogActions>
             </Dialog>

packages/frontend/src/components/Election/Admin/AdminHome.tsx

@@ -42,6 +42,7 @@ const AdminHome = () => {
     const { error, isPending, makeRequest: postElection } = usePostElection()
 
     const confirm = useConfirm()
+    const emailConfirm = useConfirm()
 
     const hasPermission = (requiredPermission: string) => {
         return (permissions && permissions.includes(requiredPermission))
@@ -56,6 +57,18 @@ const AdminHome = () => {
         } catch (err) {
             console.error(err)
         }
+
+        const currentTime = new Date();
+        if (
+            election.settings.voter_access === 'closed' &&
+            election.settings.invitation === 'email' &&
+            (!election.start_time || currentTime.getTime() > new Date(election.start_time).getTime()) &&
+            (!election.end_time || currentTime.getTime() < new Date(election.end_time).getTime())
+        ){
+            if(await emailConfirm(t('admin_home.finalize_email_confirm'))){
+                navigate(`/${election.election_id}/admin/voters`)
+            }
+        }
     }
 
     const archiveElection = async () => {

packages/frontend/src/components/styles.tsx

@@ -50,11 +50,11 @@ export const StyledButton = (props) => (
             p: 1,
             m: 0,
             boxShadow: 2,
-            backgroundColor: 'primary.main',
+            //backgroundColor: 'primary.main',
             fontFamily: 'Montserrat, Verdana, sans-serif',
             fontWeight: 'bold',
             fontSize: 18,
-            color: 'primary.contrastText',
+            //color: 'primary.contrastText',
         }}
         {...props}
     >

packages/frontend/src/i18n/en.yaml

@@ -765,6 +765,12 @@ admin_home:
   finalize_confirm:
     title: Confirm Finalize Election
     message: Are you sure you want to finalize your election? Once finalized you won't be able to edit it.
+
+  finalize_email_confirm:
+    title: Send Email Blast
+    message: You can send emails from the voters tab at anytime. Would you like to notify your voters? 
+    cancel: 'No, not now'
+    submit: 'Yes, take me to the voters tab'
 
   duplicate_confirm:
     title: Confirm Duplicate Election
@@ -900,6 +906,7 @@ keyword:
 
   save: Save
   cancel: Cancel
+  submit: Submit
 
   # This is used in tables and charts
   total: Total