feat: add option to store information in localstorage

src/components/Areas/Submit/index.tsx

@@ -32,7 +32,7 @@ const selectErrorCount = (state: State): number => {
   return errors.length;
 };
 
-export const Submit = () => {
+export const Submit = (props: { onSubmit?: () => void }) => {
   const dispatch = useDispatch();
   const errorCount = useSelector(selectErrorCount);
   const isValid = errorCount === 0;
@@ -59,13 +59,15 @@ export const Submit = () => {
   const download = async () => {
     handleInteraction();
     if (isValid) {
+      props.onSubmit?.();
       dispatch(downloadFormAction());
     }
   };
 
   const send = async () => {
     handleInteraction();
     if (isValid) {
+      props.onSubmit?.();
       dispatch(emailFormAction());
     }
   };

src/components/Main.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { colors } from 'constants/colors';
 
@@ -8,8 +8,40 @@ import { BankInfo } from './Areas/Bank';
 import { ExtraInfo } from './Areas/Extra';
 import { Submit } from './Areas/Submit';
 import { UserInfo } from './Areas/User';
+import SaveInfoPrompt from './SaveInfoPrompt';
+import { useDispatch, useSelector } from 'react-redux';
+import { formDataUpdated } from '../redux/reducers/formReducer';
 
 export const Main = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const formData = localStorage.getItem('formData');
+    if (formData) {
+      dispatch(formDataUpdated(JSON.parse(formData)));
+    }
+  }, [dispatch]);
+
+  // On submit, save form data to local storage
+  const form = useSelector((state) => ({
+    fullname: state.form.fullname,
+    email: state.form.email,
+    type: state.form.type,
+    intent: state.form.intent,
+    cardDetails: state.form.cardDetails,
+    account: state.form.account,
+    committee: state.form.committee,
+  }));
+
+  const saveInfo = useSelector((state) => state.form.saveInfo || false);
+  const onFormSubmit = () => {
+    if (saveInfo) {
+      localStorage.setItem('formData', JSON.stringify(form));
+    } else {
+      localStorage.removeItem('formData');
+    }
+  };
+
   return (
     <main>
       <Area header="Personinformasjon">
@@ -25,7 +57,8 @@ export const Main = () => {
         <Attachments />
       </Area>
       <Area header="">
-        <Submit />
+        <SaveInfoPrompt />
+        <Submit onSubmit={onFormSubmit} />
       </Area>
     </main>
   );

src/components/SaveInfoPrompt.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Checkbox } from '@dotkomonline/design-system';
+import { useDispatch } from '../redux/hooks';
+import { formDataUpdated } from '../redux/reducers/formReducer';
+import { useSelector } from 'react-redux';
+
+export default function SaveInfoPrompt() {
+  const dispatch = useDispatch();
+  const value = useSelector((state) => state.form.saveInfo || false);
+
+  return (
+    <Checkbox
+      label="Lagre informasjon til neste gang?"
+      onChange={() => dispatch(formDataUpdated({ saveInfo: !value }))}
+    />
+  );
+}

src/form/state.ts

@@ -19,6 +19,7 @@ export interface IState {
   comments: string | null;
   attachments: File[];
   mode: SendMode;
+  saveInfo: boolean;
 }
 
 export const INITIAL_STATE: IState = {
@@ -34,6 +35,7 @@ export const INITIAL_STATE: IState = {
   comments: null,
   attachments: [],
   mode: 'download',
+  saveInfo: false,
 };
 
 export interface IDeserializedState {