Parental leave - Review screen action buttons

libs/application/core/src/types/Form.ts

@@ -103,6 +103,7 @@ export interface FieldBaseProps {
   application: Application
   showFieldName?: boolean
   goToScreen?: (id: string) => void
+  refetch?: () => void
 }
 
 export type RepeaterProps = {

libs/application/core/src/types/StateMachine.ts

@@ -17,6 +17,7 @@ export enum DefaultEvents {
   REJECT = 'REJECT',
   SUBMIT = 'SUBMIT',
   ABORT = 'ABORT',
+  EDIT = 'EDIT',
 }
 
 export type ReadWriteValues =

libs/application/templates/parental-leave/src/fields/InReviewSteps/index.tsx

@@ -1,11 +1,39 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
+import { useMutation } from '@apollo/client'
 import { useLocale } from '@island.is/localization'
 
-import { FieldBaseProps } from '@island.is/application/core'
-import { Box, Button, Text } from '@island.is/island-ui/core'
+import {
+  FieldBaseProps,
+  getValueViaPath,
+  MessageFormatter,
+} from '@island.is/application/core'
+import {
+  Box,
+  Button,
+  DialogPrompt,
+  Text,
+  toast,
+} from '@island.is/island-ui/core'
+import ReviewSection, { reviewSectionState } from './ReviewSection'
+import Review from '../Review'
 
 import { mm } from '../../lib/messages'
-import ReviewSection, { reviewSectionState } from './ReviewSection'
+import { YES } from '../../constants'
+
+import { SUBMIT_APPLICATION } from '@island.is/application/graphql'
+
+function handleError(error: string, formatMessage: MessageFormatter): void {
+  toast.error(
+    formatMessage(
+      {
+        id: 'application.system:submit.error',
+        defaultMessage: 'Eitthvað fór úrskeiðis: {error}',
+        description: 'Error message on submit',
+      },
+      { error },
+    ),
+  )
+}
 
 type stateMapEntry = { [key: string]: reviewSectionState }
 type statesMap = {
@@ -21,6 +49,7 @@ const statesMap: statesMap = {
     vinnumalastofnunApproval: reviewSectionState.complete,
   },
   employer: {
+    employerWaitingToAssign: reviewSectionState.inProgress,
     employerApproval: reviewSectionState.inProgress,
     employerRequiresAction: reviewSectionState.requiresAction,
     vinnumalastofnunApproval: reviewSectionState.complete,
@@ -32,64 +61,140 @@ const statesMap: statesMap = {
   },
 }
 
-const InReviewSteps: FC<FieldBaseProps> = ({ application }) => {
+const InReviewSteps: FC<FieldBaseProps> = ({ application, refetch }) => {
+  const [submitApplication, { loading: loadingSubmit }] = useMutation(
+    SUBMIT_APPLICATION,
+    {
+      onError: (e) => handleError(e.message, formatMessage),
+    },
+  )
+
   const { formatMessage } = useLocale()
+  const [screenState, setScreenState] = useState<'steps' | 'viewApplication'>(
+    'steps',
+  )
+
+  const isRequestingRights =
+    (getValueViaPath(
+      application.answers,
+      'requestRights.isRequestingRights',
+    ) as string) === YES
+
+  const steps = [
+    {
+      state: statesMap['otherParent'][application.state],
+      title: formatMessage(mm.reviewScreen.otherParentTitle),
+      description: formatMessage(mm.reviewScreen.otherParentDesc),
+    },
+    {
+      state: statesMap['employer'][application.state],
+      title: formatMessage(mm.reviewScreen.employerTitle),
+      description: formatMessage(mm.reviewScreen.employerDesc),
+    },
+    {
+      state: statesMap['vinnumalastofnun'][application.state],
+      title: formatMessage(mm.reviewScreen.deptTitle),
+      description: formatMessage(mm.reviewScreen.deptDesc),
+    },
+  ]
+
+  if (!isRequestingRights) steps.shift()
 
   return (
     <Box marginBottom={10}>
-      <Box>
-        <Text as="div">
-          {formatMessage(mm.reviewScreen.desc)}{' '}
+      <Box display="flex" justifyContent="spaceBetween">
+        <Text>
+          {(screenState === 'steps' && formatMessage(mm.reviewScreen.desc)) ||
+            formatMessage(mm.reviewScreen.descReview)}
+        </Text>
+        <Box>
           <Box display="inlineBlock" marginLeft={1} marginRight={2}>
             <Button
               colorScheme="default"
               iconType="filled"
-              // TODO: Add onClick in next PR
+              onClick={() =>
+                setScreenState(
+                  (screenState === 'steps' && 'viewApplication') || 'steps',
+                )
+              }
               size="small"
               type="button"
               variant="text"
             >
-              {formatMessage(mm.reviewScreen.buttonsView)}
+              {(screenState === 'steps' &&
+                formatMessage(mm.reviewScreen.buttonsView)) ||
+                formatMessage(mm.reviewScreen.buttonsViewProgress)}
             </Button>
           </Box>
           <Box display="inlineBlock">
-            <Button
-              colorScheme="default"
-              iconType="filled"
-              // TODO: Add onClick in next PR
-              size="small"
-              type="button"
-              variant="text"
-            >
-              {formatMessage(mm.reviewScreen.buttonsEdit)}
-            </Button>
+            <DialogPrompt
+              baseId="editApplicationDialog"
+              title={formatMessage(mm.reviewScreen.editApplicationModalTitle)}
+              description={formatMessage(
+                mm.reviewScreen.editApplicationModalDesc,
+              )}
+              ariaLabel={formatMessage(
+                mm.reviewScreen.editApplicationModalAria,
+              )}
+              disclosureElement={
+                <Button
+                  colorScheme="default"
+                  iconType="filled"
+                  size="small"
+                  type="button"
+                  variant="text"
+                  icon="pencil"
+                  loading={loadingSubmit}
+                  disabled={loadingSubmit}
+                >
+                  {formatMessage(mm.reviewScreen.buttonsEdit)}
+                </Button>
+              }
+              onConfirm={async () => {
+                const res = await submitApplication({
+                  variables: {
+                    input: {
+                      id: application.id,
+                      event: 'EDIT',
+                      answers: application.answers,
+                    },
+                  },
+                })
+
+                if (res?.data) {
+                  // Takes them back to the editable Review screen
+                  refetch && refetch()
+                }
+              }}
+              buttonTextConfirm={formatMessage(
+                mm.reviewScreen.editApplicationModalConfirmButton,
+              )}
+              buttonTextCancel={formatMessage(
+                mm.reviewScreen.editApplicationModalCancelButton,
+              )}
+            />
           </Box>
-        </Text>
+        </Box>
       </Box>
 
-      <Box marginTop={7} marginBottom={8}>
-        <ReviewSection
-          application={application}
-          index={1}
-          state={statesMap['otherParent'][application.state]}
-          title={formatMessage(mm.reviewScreen.otherParentTitle)}
-          description={formatMessage(mm.reviewScreen.otherParentDesc)}
-        />
-        <ReviewSection
-          application={application}
-          index={2}
-          state={statesMap['employer'][application.state]}
-          title={formatMessage(mm.reviewScreen.employerTitle)}
-          description={formatMessage(mm.reviewScreen.employerDesc)}
-        />
-        <ReviewSection
-          application={application}
-          index={3}
-          state={statesMap['vinnumalastofnun'][application.state]}
-          title={formatMessage(mm.reviewScreen.deptTitle)}
-          description={formatMessage(mm.reviewScreen.deptDesc)}
-        />
-      </Box>
+      {(screenState === 'steps' && (
+        <Box marginTop={7} marginBottom={8}>
+          {steps.map((step, index) => {
+            return (
+              <ReviewSection
+                key={index}
+                application={application}
+                index={index + 1}
+                {...step}
+              />
+            )
+          })}
+        </Box>
+      )) || (
+        <Box marginTop={7} marginBottom={8}>
+          <Review application={application} editable={false} />
+        </Box>
+      )}
     </Box>
   )
 }