Create financial reports guide

src/components/PeriodicReports/FinancialReportGuide.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@material-ui/core';
+import React from 'react';
+import { ProjectOverviewFragment } from '../../scenes/Projects/Overview/ProjectOverview.generated';
+import {
+  EditableProjectField,
+  UpdateProjectDialog,
+} from '../../scenes/Projects/Update';
+import { Many } from '../../util';
+import { useDialog } from '../Dialog';
+import { ButtonLink } from '../Routing';
+
+const ReportGuideAction = {
+  SET_RANGE: 'SET_RANGE',
+  ADD_MANAGING_PARTNER: 'ADD_MANAGING_PARTNER',
+  SET_REPORT_FREQUENCY: 'SET_REPORT_FREQUENCY',
+};
+
+export const FinancialReportGuide = ({
+  project,
+}: {
+  project: ProjectOverviewFragment;
+}) => {
+  const [editState, editField, fieldsBeingEdited] =
+    useDialog<Many<EditableProjectField>>();
+  let action;
+
+  if (!project.mouRange.value.start || !project.mouRange.value.end) {
+    action = ReportGuideAction.SET_RANGE;
+  } else if (project.partnerships.items.length === 0) {
+    action = ReportGuideAction.ADD_MANAGING_PARTNER;
+  } else {
+    action = ReportGuideAction.SET_REPORT_FREQUENCY;
+  }
+  return (
+    <>
+      {action === ReportGuideAction.SET_RANGE ? (
+        <Button color="primary" onClick={() => editField('mouRange')}>
+          Set date range
+        </Button>
+      ) : action === ReportGuideAction.ADD_MANAGING_PARTNER ? (
+        <ButtonLink color="primary" to={'partnerships'}>
+          Add managing partner
+        </ButtonLink>
+      ) : (
+        <ButtonLink color="primary" to={'partnerships'}>
+          Set reporting frequency
+        </ButtonLink>
+      )}
+      <UpdateProjectDialog
+        {...editState}
+        project={project}
+        editFields={fieldsBeingEdited}
+      />
+    </>
+  );
+};

src/components/PeriodicReports/PeriodicReportCard.tsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { AssignmentOutlined, BarChart, ShowChart } from '@material-ui/icons';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { ReportType } from '../../api';
 import {
@@ -69,10 +69,18 @@ export interface PeriodicReportCardProps {
   dueNext?: SecuredPeriodicReportFragment;
   disableIcon?: boolean;
   hasDetailPage?: boolean;
+  cardAction?: ReactNode;
 }
 
 const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
-  const { type, dueCurrently, dueNext, disableIcon, hasDetailPage } = props;
+  const {
+    type,
+    dueCurrently,
+    dueNext,
+    disableIcon,
+    hasDetailPage,
+    cardAction,
+  } = props;
   const classes = useStyles();
 
   const currentFile = dueCurrently?.value?.reportFile;
@@ -138,6 +146,7 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
           <ButtonLink color="primary" to={link}>
             View Reports
           </ButtonLink>
+          {cardAction}
           {needsUpload ? (
             <Tooltip
               title={

src/scenes/Projects/Overview/ProjectOverview.tsx

@@ -30,6 +30,7 @@ import { LanguageEngagementListItemFragment } from '../../../components/Language
 import { List, useListQuery } from '../../../components/List';
 import { PartnershipSummary } from '../../../components/PartnershipSummary';
 import { PeriodicReportCard } from '../../../components/PeriodicReports';
+import { FinancialReportGuide } from '../../../components/PeriodicReports/FinancialReportGuide';
 import { ProjectChangeRequestSummary } from '../../../components/ProjectChangeRequestSummary';
 import { ProjectMembersSummary } from '../../../components/ProjectMembersSummary';
 import { Redacted } from '../../../components/Redacted';
@@ -41,6 +42,7 @@ import { CreateInternshipEngagement } from '../../Engagement/InternshipEngagemen
 import { CreateLanguageEngagement } from '../../Engagement/LanguageEngagement/Create/CreateLanguageEngagement';
 import { useProjectCurrentDirectory, useUploadProjectFiles } from '../Files';
 import { ProjectListQueryVariables } from '../List/projects.generated';
+import { FinancialReportsDocument } from '../Reports/ProjectReports.generated';
 import { EditableProjectField, UpdateProjectDialog } from '../Update';
 import { ProjectWorkflowDialog } from '../Update/ProjectWorkflowDialog';
 import { useProjectId } from '../useProjectId';
@@ -159,6 +161,10 @@ export const ProjectOverview: FC = () => {
     },
   });
 
+  const { data: financialReportsData } = useQuery(FinancialReportsDocument, {
+    variables: { projectId, changeset: changesetId },
+  });
+
   const projectName = projectOverviewData?.project.name;
   const isTranslation = projectOverviewData
     ? projectOverviewData.project.__typename === 'TranslationProject'
@@ -496,6 +502,15 @@ export const ProjectOverview: FC = () => {
                   projectOverviewData?.project.currentFinancialReportDue
                 }
                 dueNext={projectOverviewData?.project.nextFinancialReportDue}
+                cardAction={
+                  projectOverviewData?.project &&
+                  financialReportsData?.project.reports.canRead === true &&
+                  financialReportsData.project.reports.items.length === 0 && (
+                    <FinancialReportGuide
+                      project={projectOverviewData.project}
+                    />
+                  )
+                }
               />
             </Grid>
             <Grid item xs={12} md={6}>

src/scenes/Projects/Reports/ProjectReports.graphql

@@ -16,6 +16,7 @@ query FinancialReports($projectId: ID!, $changeset: ID) {
       items {
         ...PeriodicReport
       }
+      canRead
     }
   }
 }