CM-715: added benefits tab to visualize benefits

src/components/BenefitsTab.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Tab } from '@material-ui/core';
+import {
+  formatMessage, PublishedComponent,
+} from '@openimis/fe-core';
+import { BENEFITS_TAB_VALUE, BENEFITS_CONTRIBUTION_KEY } from '../constants';
+
+function BenefitsTabLabel({
+  intl, onChange, tabStyle, isSelected, individual,
+}) {
+  if (!individual) return null;
+  return (
+    <Tab
+      onChange={onChange}
+      className={tabStyle(BENEFITS_TAB_VALUE)}
+      selected={isSelected(BENEFITS_TAB_VALUE)}
+      value={BENEFITS_TAB_VALUE}
+      label={formatMessage(intl, 'individual', 'benefits.label')}
+    />
+  );
+}
+
+function BenefitsTabPanel({
+  value, individual, rights, classes,
+}) {
+  if (!individual) return null;
+  return (
+    <PublishedComponent
+      pubRef="policyHolder.TabPanel"
+      module="individual"
+      index={BENEFITS_TAB_VALUE}
+      value={value}
+    >
+      <PublishedComponent
+        pubRef={BENEFITS_CONTRIBUTION_KEY}
+        individualUuid={individual?.id}
+        rights={rights}
+        classes={classes}
+      />
+    </PublishedComponent>
+  );
+}
+
+export { BenefitsTabLabel, BenefitsTabPanel };

src/constants.js

@@ -28,12 +28,14 @@ export const INDIVIDUAL_CHANGELOG_TAB_VALUE = 'IndividualChangelogTab';
 export const INDIVIDUAL_TASK_TAB_VALUE = 'IndividualTaskTab';
 export const GROUP_CHANGELOG_TAB_VALUE = 'GroupChangelogTab';
 export const GROUP_TASK_TAB_VALUE = 'GroupTaskTab';
+export const BENEFITS_TAB_VALUE = 'BenefitTaskTab';
 export const INDIVIDUAL_TABS_LABEL_CONTRIBUTION_KEY = 'individual.TabPanel.label';
 export const INDIVIDUAL_TABS_PANEL_CONTRIBUTION_KEY = 'individual.TabPanel.panel';
 
 export const BENEFIT_PLAN_TABS_LABEL_CONTRIBUTION_KEY = 'individual.BenefitPlansListTabLabel';
 export const BENEFIT_PLAN_TABS_PANEL_CONTRIBUTION_KEY = 'individual.BenefitPlansListTabPanel';
 export const TASK_CONTRIBUTION_KEY = 'tasksManagement.tasks';
+export const BENEFITS_CONTRIBUTION_KEY = 'payroll.benefitConsumptionPayrollSearcher';
 
 export const BENEFICIARY_STATUS = {
   POTENTIAL: 'POTENTIAL',
@@ -54,6 +56,7 @@ export const GROUP_INDIVIDUAL_ROLES_LIST = [
 export const BENEFIT_PLAN_LABEL = 'BenefitPlan';
 export const INDIVIDUAL_LABEL = 'Individual';
 export const GROUP_LABEL = 'Group';
+export const BENEFITS_LABEL = 'Benefits';
 
 export const INDIVIDUAL_MODULE_NAME = 'individual';
 

src/index.js

@@ -39,6 +39,7 @@ import {
 import { GROUP_LABEL, INDIVIDUAL_LABEL } from './constants';
 import { GroupCreateTaskItemFormatters, GroupCreateTaskTableHeaders } from './components/tasks/GroupCreateTasks';
 import IndividualsUploadDialog from './components/dialogs/IndividualsUploadDialog';
+import { BenefitsTabLabel, BenefitsTabPanel } from './components/BenefitsTab';
 
 const ROUTE_INDIVIDUALS = 'individuals';
 const ROUTE_INDIVIDUAL = 'individuals/individual';
@@ -83,6 +84,7 @@ const DEFAULT_CONFIG = {
     GroupChangelogTabLabel,
     GroupTaskTabLabel,
     IndividalTaskTabLabel,
+    BenefitsTabLabel,
   ],
   'individual.TabPanel.panel': [
     IndividualsListTabPanel,
@@ -91,6 +93,7 @@ const DEFAULT_CONFIG = {
     IndividalChangelogTabPanel,
     GroupTaskTabPanel,
     IndividalTaskTabPanel,
+    BenefitsTabPanel,
   ],
   'individual.BenefitPlansListTabLabel': [BENEFIT_PLAN_TABS_LABEL_REF_KEY],
   'individual.BenefitPlansListTabPanel': [BENEFIT_PLAN_TABS_PANEL_REF_KEY],

src/translations/en.json

@@ -20,6 +20,9 @@
     "lastName": "Last Name",
     "dob": "Day of birth",
     "mandatoryFieldsEmptyError": "* These fields are required",
+    "benefits": {
+      "label": "Benefits"
+    },
     "delete": {
       "confirm": {
         "title": "Delete {firstName} {lastName}?",