Diluted distance travelled report (#848)

#847 plugin restricted diluted distance travelled report

src/app/components/Header/plugins.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Menu, Icon } from "semantic-ui-react";
 import { getOrganisation, IGetOrgResult } from "apollo/modules/organisation";
 import { Link } from "react-router-dom";
+import { pluginActive } from "helpers/organisation";
 
 interface IProps {
   org?: IGetOrgResult;
@@ -11,12 +12,8 @@ interface IProps {
 const buttonTitle = "SVE"; // name of product, so not translating
 
 const HeaderPluginsInner = (p: IProps): JSX.Element[] => {
-  const plugins = p.org?.getOrganisation?.plugins;
-  const pluginActive = (pluginID: string): boolean => {
-    return plugins && plugins.findIndex((p) => p.id === pluginID) != -1;
-  };
   const items: JSX.Element[] = [];
-  if (pluginActive("sve")) {
+  if (pluginActive(p.org?.getOrganisation, "sve")) {
     items.push(
       <Menu.Item
         as={Link}

src/app/components/ServiceReport/index.tsx

@@ -33,7 +33,13 @@ interface IProp extends IUserReportOptions, IURLConnector, IReportOptions {
   isCanvasSnapshotPossible?: boolean;
 }
 
-const reportOpts = (p: IProp): IReportOptions => ({ minRecords: 2, ...p });
+const reportOpts = (
+  p: IUserReportOptions,
+  minRecords?: number
+): IReportOptions => ({
+  minRecords: minRecords ?? 2,
+  ...p,
+});
 
 const isCategoryAggregationAvailable = (props: IProp): boolean => {
   if (props.report.error || props.report.loading) {
@@ -115,13 +121,16 @@ const ServiceInnerConnected = connect(
   UrlConnector
 )(ServiceInnerWithSpinners);
 
-const ServiceInnerWithReport = getReport<IProp>(
-  (p) => reportOpts(p),
-  "report"
+const ServiceInnerWithQuestionnaire = getOutcomeSet<IProp>(
+  (p) => p.questionnaire
 )(ServiceInnerConnected);
 
-const ServiceReport = getOutcomeSet<IUserReportOptions>((p) => p.questionnaire)(
-  ServiceInnerWithReport
-);
+export const ServiceReport = getReport<IUserReportOptions>(
+  (p) => reportOpts(p),
+  "report"
+)(ServiceInnerWithQuestionnaire);
 
-export { ServiceReport };
+export const DilutedServiceReport = getReport<IUserReportOptions>(
+  (p) => reportOpts(p, 1),
+  "report"
+)(ServiceInnerWithQuestionnaire);

src/app/containers/Report/index.tsx

@@ -10,18 +10,21 @@ import {
   reportURL,
 } from "containers/Report/helpers";
 import { DeltaReport } from "components/DeltaReport";
-import { ServiceReport } from "components/ServiceReport";
+import { DilutedServiceReport, ServiceReport } from "components/ServiceReport";
 import { StatusReport } from "components/StatusReport";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { EndOfReportTour } from "components/TourReports";
 import { BaselineReport } from "components/BaselineReport";
+import { IGetOrgResult, getOrganisation } from "apollo/modules/organisation";
+import { pluginActive } from "helpers/organisation";
 const { connect } = require("react-redux");
 
 export enum SubPage {
   DIST,
   CHANGE,
   STATUS,
   BASELINE,
+  DILUTED_DIST, // distance travelled, including beneficiaries with only 1 record
 }
 
 interface IProps extends IURLConnector, WithTranslation {
@@ -37,6 +40,7 @@ interface IProps extends IURLConnector, WithTranslation {
     search: string;
   };
   child: SubPage;
+  org?: IGetOrgResult;
 }
 
 const getReportOptionsFromProps = (p: IProps): IUserReportOptions => {
@@ -71,7 +75,7 @@ class ReportInner extends React.Component<IProps, null> {
   }
 
   public render(): JSX.Element {
-    const { t, child } = this.props;
+    const { t, child, org } = this.props;
     const options = getReportOptionsFromProps(this.props);
     let inner: JSX.Element = <ServiceReport {...options} />;
     if (child === SubPage.CHANGE) {
@@ -83,6 +87,9 @@ class ReportInner extends React.Component<IProps, null> {
     if (child === SubPage.BASELINE) {
       inner = <BaselineReport {...options} />;
     }
+    if (child == SubPage.DILUTED_DIST) {
+      inner = <DilutedServiceReport {...options} />;
+    }
     return (
       <div>
         <SecondaryMenu signpost={t("Impact Report")}>
@@ -93,6 +100,15 @@ class ReportInner extends React.Component<IProps, null> {
             <Icon name="road" />
             {t("Distance Travelled")}
           </Menu.Item>
+          {pluginActive(org?.getOrganisation, "diluted_report") && (
+            <Menu.Item
+              active={child === SubPage.DILUTED_DIST}
+              onClick={this.innerPageSetter(SubPage.DILUTED_DIST)}
+            >
+              <Icon name="road" />
+              {"~ " + t("Distance Travelled")}
+            </Menu.Item>
+          )}
           <Menu.Item
             active={child === SubPage.CHANGE}
             onClick={this.innerPageSetter(SubPage.CHANGE)}
@@ -129,4 +145,5 @@ class ReportInner extends React.Component<IProps, null> {
   }
 }
 
-export const Report = withTranslation()(ReportInner);
+const ReportWithOrg = getOrganisation(ReportInner, "org");
+export const Report = withTranslation()(ReportWithOrg);

src/app/helpers/organisation.ts

@@ -0,0 +1,6 @@
+import { IOrganisation } from "models/organisation";
+
+export const pluginActive = (org: IOrganisation, plugin: string): boolean => {
+  const plugins = org?.plugins;
+  return plugins && plugins.findIndex((p) => p.id === plugin) != -1;
+};