Add view to mark bookings completed when in PendingBookings status (#14)

Signed-off-by: Sean Sundberg <[email protected]>

src/components/EnabledButton/EnabledButton.tsx

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React, {MouseEventHandler, ReactNode} from 'react';
+import { Button } from '@carbon/react';
+
+export interface EnabledButtonProps {
+    enabled: boolean
+    type?: 'button' | 'submit' | 'reset'
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+    onClick?: MouseEventHandler<HTMLButtonElement>
+    children: ReactNode | ReactNode[]
+}
+
+export const EnabledButton: React.FunctionComponent<EnabledButtonProps> = ({enabled, type, size, onClick, children}: EnabledButtonProps) => {
+    if (!enabled) {
+        return (<></>)
+    }
+
+    return (<Button type={type || 'submit'} size={size || 'sm'} onClick={onClick}>{children}</Button>)
+}

src/components/EnabledButton/index.ts

@@ -0,0 +1 @@
+export * from './EnabledButton'

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './Stack'
 export * from './UIShell'
 export * from './HydrateAtoms';
 export * from './InfoRow';
+export * from './EnabledButton';

src/models/family-allowance.model.ts

@@ -32,19 +32,27 @@ export interface ActivityModel {
 }
 
 export enum FamilyAllowanceStatus {
-    ReadyForReview = 'Ready for Review',
-    NeedsInfo = 'Needs Info',
+    ReadyForReview = 'ReadyForReview',
+    NeedsInfo = 'NeedsInfo',
     Reviewed = 'Reviewed',
+    PendingApproval = 'PendingApproval',
     Approved = 'Approved',
+    Denied = 'Denied',
+    PendingBookings = 'PendingBookings',
+    CompletedBookings = 'CompletedBookings',
     Closed = 'Closed'
 }
 
 export enum FamilyAllowanceStatusFilter {
     All = 'All',
-    ReadyForReview = 'Ready for Review',
-    NeedsInfo = 'Needs Info',
+    ReadyForReview = 'ReadyForReview',
+    NeedsInfo = 'NeedsInfo',
     Reviewed = 'Reviewed',
+    PendingApproval = 'PendingApproval',
     Approved = 'Approved',
+    Denied = 'Denied',
+    PendingBookings = 'PendingBookings',
+    CompletedBookings = 'CompletedBookings',
     Closed = 'Closed'
 }
 

src/services/family-allowance-case/family-allowance-case.api.ts

@@ -10,4 +10,6 @@ export abstract class FamilyAllowanceCaseApi {
 
     abstract markFamilyAllowanceCaseReadyForReview(id: string): Promise<FamilyAllowanceModel>;
 
+    abstract markFamilyAllowanceCaseBookingsComplete(id: string, comment?: string): Promise<FamilyAllowanceModel>
+
 }

src/services/family-allowance-case/family-allowance-case.graphql.ts

@@ -384,6 +384,101 @@ mutation MarkReadyForReview($id: ID!) {
 `
 type ReturnTypeMutationReadyForReview = {markFamilyAllowanceCaseReadyForReview: FamilyAllowanceModel}
 
+const MUTATION_MARK_BOOKINGS_COMPLETE = gql`
+mutation MarkBookingsComplete($id: ID!, $comment: String) {
+    markFamilyAllowanceCaseBookingsComplete(id: $id, comment: $comment) {
+        id
+        status
+        changeType
+        applicant {
+            id
+            firstName
+            lastName
+            emailAddress
+            phoneNumber
+            employeeId
+            gender
+            maritalStatus
+            mailingAddress {
+                addressLine1
+                addressLine2
+                canton
+                city
+                country
+                postalCode
+            }
+        }
+        spouse {
+            id
+            firstName
+            lastName
+            emailAddress
+            phoneNumber
+            gender
+            maritalStatus
+            mailingAddress {
+                addressLine1
+                addressLine2
+                canton
+                city
+                country
+                postalCode
+            }
+            employmentStatus
+            marriedToApplicant
+        }
+        otherParents {
+            id
+            firstName
+            lastName
+            emailAddress
+            phoneNumber
+            gender
+            maritalStatus
+            mailingAddress {
+                addressLine1
+                addressLine2
+                canton
+                city
+                country
+                postalCode
+            }
+            employmentStatus
+        }
+        dependents {
+            id
+            firstName
+            lastName
+            birthDate
+            gender
+            father {
+                firstName
+                lastName
+            }
+            mother {
+                firstName
+                lastName
+            }
+            livesWithApplicant
+            relationshipToApplicant
+        }
+        requiredInformation {
+            id
+            description
+            completed
+        }
+        supportingDocuments {
+            id
+            name
+            url
+            type
+            description
+        }
+    }
+}
+`
+type ReturnTypeMutationBookingsComplete = {markFamilyAllowanceCaseBookingsComplete: FamilyAllowanceModel}
+
 
 export class FamilyAllowanceCaseGraphql implements FamilyAllowanceCaseApi {
     client: ApolloClient<unknown>;
@@ -440,4 +535,17 @@ export class FamilyAllowanceCaseGraphql implements FamilyAllowanceCaseApi {
             })
     }
 
+    async markFamilyAllowanceCaseBookingsComplete(id: string, comment?: string): Promise<FamilyAllowanceModel> {
+        return this.client
+            .mutate<ReturnTypeMutationBookingsComplete>({
+                mutation: MUTATION_MARK_BOOKINGS_COMPLETE,
+                variables: {id, comment},
+                refetchQueries: [{query: QUERY_LIST_CASES}, {query: QUERY_GET_CASE, variables: {id}}],
+                awaitRefetchQueries: true,
+            })
+            .then(async (result: FetchResult<ReturnTypeMutationBookingsComplete>) => {
+                return result.data?.markFamilyAllowanceCaseBookingsComplete
+            })
+    }
+
 }

src/services/schema.gql

@@ -20,16 +20,16 @@ type Address {
 }
 
 type Dependent {
-  id: ID!
-  firstName: String!
-  lastName: String!
   birthDate: String!
-  gender: String!
   father: Person
-  mother: Person
+  firstName: String!
+  gender: String!
+  governmentId: String!
+  id: ID!
+  lastName: String!
   livesWithApplicant: Boolean!
+  mother: Person
   relationshipToApplicant: FamilyAllowanceRelationship!
-  governmentId: String!
 }
 
 type Employee {
@@ -46,25 +46,26 @@ type Employee {
 }
 
 type FamilyAllowance {
-  id: ID!
-  status: FamilyAllowanceStatus!
-  changeType: FamilyAllowanceType!
   applicant: Employee!
-  spouse: Spouse
-  otherParents: [OtherParent!]
+  changeType: FamilyAllowanceType!
+  compensationOfficeId: String
   dependents: [Dependent!]!
+  history: [Activity!]!
+  id: ID!
+  otherParents: [OtherParent!]
   requiredInformation: [RequiredInformation!]!
+  spouse: Spouse
+  status: FamilyAllowanceStatus!
   supportingDocuments: [FamilyAllowanceDocument!]!
-  history: [Activity!]!
 }
 
 """Document that supports the Family Allowance Case"""
 type FamilyAllowanceDocument {
+  description: String
   id: ID!
   name: String!
   type: String!
   url: String!
-  description: String
 }
 
 enum FamilyAllowanceEmploymentStatus {
@@ -89,7 +90,11 @@ enum FamilyAllowanceRelationship {
 enum FamilyAllowanceStatus {
   Approved
   Closed
+  CompletedBookings
+  Denied
   NeedsInfo
+  PendingApproval
+  PendingBookings
   ReadyForReview
   Reviewed
 }
@@ -98,7 +103,11 @@ enum FamilyAllowanceStatusFilter {
   All
   Approved
   Closed
+  CompletedBookings
+  Denied
   NeedsInfo
+  PendingApproval
+  PendingBookings
   ReadyForReview
   Reviewed
 }
@@ -116,6 +125,7 @@ type Greeting {
 }
 
 type Mutation {
+  markFamilyAllowanceCaseBookingsComplete(comment: String, id: ID!): FamilyAllowance!
   markFamilyAllowanceCaseReadyForReview(id: ID!): FamilyAllowance!
   reviewFamilyAllowanceCase(id: ID!, input: ReviewInput!): FamilyAllowance!
   updateRequiredInformation(caseId: ID!, completed: Boolean!, infoId: ID!): FamilyAllowance!

src/views/CaseView/CaseDetailView/CaseDetailView.tsx

@@ -9,6 +9,7 @@ import {SupportingDocumentsView} from "./SupportingDocumentsView";
 import {CaseHeadingView} from "./CaseHeadingView";
 import {ApplicantPanel, DependentsPanel, OtherParentsPanel, SpousePanel} from "./Panels";
 import {FamilyAllowanceModel} from "../../../models";
+import {MarkBookingsComplete} from "./MarkBookingsComplete";
 
 export interface CaseDetailViewProps {
     familyAllowanceCase: FamilyAllowanceModel
@@ -21,6 +22,7 @@ export const CaseDetailView: React.FunctionComponent<CaseDetailViewProps> = (pro
         <div>
             <CaseHeadingView status={data.status} changeType={data.changeType} />
             <RequiredInformationView caseId={data.id} status={data.status} requiredInformation={data.requiredInformation} />
+            <MarkBookingsComplete caseId={data.id} status={data.status} />
             <Tabs>
                 <TabList aria-label="Family Application Case sections">
                     <Tab>Applicant</Tab>

src/views/CaseView/CaseDetailView/MarkBookingsComplete/MarkBookingsComplete.tsx

@@ -0,0 +1,47 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React, {FormEvent} from 'react';
+import {Form} from "@carbon/react";
+import {useSetAtom} from "jotai";
+
+import {familyAllowanceCaseAtom} from "../../../../atoms";
+import {EnabledButton, Stack} from "../../../../components";
+import {FamilyAllowanceStatus} from "../../../../models";
+import {familyAllowanceCaseApi, FamilyAllowanceCaseApi} from "../../../../services";
+
+export interface MarkBookingsCompleteProps {
+    caseId: string;
+    status: FamilyAllowanceStatus;
+}
+
+export const MarkBookingsComplete: React.FunctionComponent<MarkBookingsCompleteProps> = ({caseId, status}: MarkBookingsCompleteProps) => {
+    const setFamilyAllowanceCase = useSetAtom(familyAllowanceCaseAtom)
+
+    const enabled = FamilyAllowanceStatus[status] === FamilyAllowanceStatus.PendingBookings
+
+    if (!enabled) {
+        return (<></>)
+    }
+
+    const service: FamilyAllowanceCaseApi = familyAllowanceCaseApi()
+
+    const updateCaseStatusToCompleted = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        service
+            .markFamilyAllowanceCaseBookingsComplete(caseId)
+            .then(setFamilyAllowanceCase)
+    }
+
+    return (
+        <div style={{padding: '20px 0'}}>
+            <Form className="" onSubmit={updateCaseStatusToCompleted}>
+                <Stack gap={3}>
+                    <EnabledButton enabled={enabled}>Bookings completed</EnabledButton>
+                </Stack>
+            </Form>
+        </div>
+    )
+
+}

src/views/CaseView/CaseDetailView/MarkBookingsComplete/index.ts

@@ -0,0 +1 @@
+export * from './MarkBookingsComplete'

src/views/CaseView/CaseDetailView/RequiredInformationView/RequiredInformationView.tsx

@@ -1,11 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import React, {FormEvent} from 'react';
-import {Button, Checkbox, Form, FormGroup} from "@carbon/react";
+import {Checkbox, Form, FormGroup} from "@carbon/react";
 import {useSetAtom} from "jotai";
 
 import {familyAllowanceCaseAtom} from "../../../../atoms";
-import {Stack} from "../../../../components";
+import {EnabledButton, Stack} from "../../../../components";
 import {FamilyAllowanceStatus, RequiredInformationModel} from "../../../../models";
 import {familyAllowanceCaseApi, FamilyAllowanceCaseApi} from "../../../../services";
 
@@ -15,14 +15,6 @@ export interface RequiredInformationViewProps {
     requiredInformation?: RequiredInformationModel[];
 }
 
-const MyButton = ({enabled}: {enabled: boolean}) => {
-    if (!enabled) {
-        return (<></>)
-    }
-
-    return (<Button type="submit" size="sm">Submit for review</Button>)
-}
-
 export const RequiredInformationView: React.FunctionComponent<RequiredInformationViewProps> = ({status, caseId, requiredInformation}: RequiredInformationViewProps) => {
     const setFamilyAllowanceCase = useSetAtom(familyAllowanceCaseAtom)
 
@@ -71,7 +63,7 @@ export const RequiredInformationView: React.FunctionComponent<RequiredInformatio
                     <FormGroup legendText="Required information" style={{textAlign: 'left', padding: '10px 0'}}>
                         {data.map(info => (<RequiredInfoCheckbox key={info.id} info={info} enabled={enabled} />))}
                     </FormGroup>
-                    <MyButton enabled={enabled} />
+                    <EnabledButton enabled={enabled}>Submit for review</EnabledButton>
                 </Stack>
             </Form>
         </div>