Merge branch 'develop' into feature/OM-347

openimis · Oct 23, 2024 · a590339 · a590339
2 parents 7064cb8 + c838669
commit a590339
Show file tree

Hide file tree

Showing 27 changed files with 611 additions and 237 deletions.
diff --git a/src/actions.js b/src/actions.js
@@ -5,11 +5,13 @@ import {
   graphqlWithVariables,
   formatGQLString,
   parseData,
+  decodeId,
 } from '@openimis/fe-core';
 import { ACTION_TYPE } from './reducer';
 import {
   CLEAR, ERROR, REQUEST, SUCCESS,
 } from './utils/action-type';
+import { EMPTY_STRING } from './constants';
 
 const WORKER_VOUCHER_PROJECTION = (modulesManager) => [
   'id',
@@ -44,14 +46,21 @@ const WORKER_PROJECTION = (modulesManager) => [
   'photo { photo }',
 ];
 
-// TODO: Adjust the group projection after BE changes
-// eslint-disable-next-line no-unused-vars
 export const GROUP_PROJECTION = (modulesManager) => [
   'id',
-  'uuid',
-  'otherNames',
-  'lastName',
-  // `workers {${WORKER_PROJECTION(modulesManager)}}`,
+  'name',
+  'isDeleted',
+  'dateCreated',
+  `policyholder ${modulesManager.getProjection('policyHolder.PolicyHolderPicker.projection')}`,
+  `groupWorkers {
+    edges {
+      node {
+        isDeleted,
+        insuree ${modulesManager.getProjection('insuree.InsureePicker.projection')},
+      }
+    }
+    totalCount
+  }`,
 ];
 
 function formatGraphQLDateRanges(dateRanges) {
@@ -546,15 +555,13 @@ export function validateMConnectWorker(nationalId, economicUnitCode) {
 
 export function fetchGroupsAction(modulesManager, params) {
   const queryParams = [...params];
-  // TODO: Change to `group` after BE changes
-  const payload = formatPageQueryWithCount('worker', queryParams, GROUP_PROJECTION(modulesManager));
+  const payload = formatPageQueryWithCount('groupOfWorker', queryParams, GROUP_PROJECTION(modulesManager));
   return graphql(payload, ACTION_TYPE.GET_GROUPS);
 }
 
 export function fetchGroup(modulesManager, params) {
   const queryParams = [...params];
-  // TODO: Change to `group` after BE changes
-  const payload = formatPageQueryWithCount('worker', queryParams, GROUP_PROJECTION(modulesManager));
+  const payload = formatPageQueryWithCount('groupOfWorker', queryParams, GROUP_PROJECTION(modulesManager));
   return graphql(payload, ACTION_TYPE.GET_GROUP);
 }
 
@@ -564,12 +571,80 @@ export const clearGroup = () => (dispatch) => {
   });
 };
 
-// TODO: Adjust the group mutation after BE changes
-export function createGroup() {}
+export function createGroup(economicUnit, groupToCreate, clientMutationLabel) {
+  const workersChfIds = groupToCreate?.workers?.map((worker) => worker.chfId) ?? [];
+  const workerChfIdsString = workersChfIds.map((chfId) => `"${chfId}"`).join(', ');
 
-export function updateGroup() {}
+  const mutationInput = `
+    ${economicUnit.code ? `economicUnitCode: "${economicUnit.code}"` : EMPTY_STRING}
+    ${groupToCreate.name ? `name: "${formatGQLString(groupToCreate.name)}"` : EMPTY_STRING}
+    ${workerChfIdsString.length ? `insureesChfId: [${workerChfIdsString}]` : EMPTY_STRING}
+  `;
 
-export function deleteGroup() {}
+  const mutation = formatMutation('createOrUpdateGroupOfWorkers', mutationInput, clientMutationLabel);
+  const requestedDateTime = new Date();
+
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.CREATE_GROUP), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.CREATE_GROUP,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
+export function updateGroup(economicUnit, groupToUpdate, clientMutationLabel) {
+  const workersChfIds = groupToUpdate?.workers?.map((worker) => worker.chfId) ?? [];
+  const workerChfIdsString = workersChfIds.map((chfId) => `"${chfId}"`).join(', ');
+
+  const mutationInput = `
+    ${groupToUpdate.id ? `id: "${decodeId(groupToUpdate.id)}"` : EMPTY_STRING}
+    ${economicUnit.code ? `economicUnitCode: "${economicUnit.code}"` : EMPTY_STRING}
+    ${groupToUpdate.name ? `name: "${formatGQLString(groupToUpdate.name)}"` : EMPTY_STRING}
+    ${workerChfIdsString.length ? `insureesChfId: [${workerChfIdsString}]` : EMPTY_STRING}
+  `;
+
+  const mutation = formatMutation('createOrUpdateGroupOfWorkers', mutationInput, clientMutationLabel);
+  const requestedDateTime = new Date();
+
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.UPDATE_GROUP), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.UPDATE_GROUP,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
+export function deleteGroup(economicUnit, groupsToDelete, clientMutationLabel) {
+  const groupsUuids = groupsToDelete.map((group) => decodeId(group.id));
+  const groupUuidsString = groupsUuids.map((uuid) => `"${uuid}"`).join(', ');
+
+  const mutationInput = `
+    ${economicUnit.code ? `economicUnitCode: "${economicUnit.code}"` : EMPTY_STRING}
+    ${groupsToDelete.length ? `uuids: [${groupUuidsString}]` : EMPTY_STRING}
+  `;
+
+  const mutation = formatMutation('deleteGroupOfWorkers', mutationInput, clientMutationLabel);
+  const requestedDateTime = new Date();
+
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.DELETE_GROUP), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.DELETE_GROUP,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
 
 export function fetchPublicVoucherDetails(modulesManager, voucherUuid) {
   // TODO | OM-347: Implement the query here after BE changes

diff --git a/src/components/MPayBillButton.js b/src/components/MPayBillButton.js
@@ -22,13 +22,12 @@ function MPayBillButton({ bill }) {
   return (
     <Grid item>
       <Button
-        size="small"
         variant="contained"
         color="primary"
         startIcon={<AccountBalanceIcon />}
         onClick={handleOnClick}
       >
-        <Typography variant="subtitle1">{formatMessage('workerVoucher.MPayBillButton')}</Typography>
+        <Typography variant="body2">{formatMessage('workerVoucher.MPayBillButton')}</Typography>
       </Button>
     </Grid>
   );

diff --git a/src/components/VoucherAcquirementForm.js b/src/components/VoucherAcquirementForm.js
@@ -54,12 +54,11 @@ function VoucherAcquirementForm() {
                 <PublishedComponent
                   pubRef="workerVoucher.VoucherAcquirementMethodPicker"
                   label="workerVoucher.acquirement.method"
-                  nullLabel="workerVoucher.acquirement.method.NONE"
                   acquirementMethod={acquirementMethod}
                   setAcquirementMethod={setAcquirementMethod}
                   readOnly={!genericVoucherEnabled}
                   required
-                  withNull
+                  withNull={false}
                   withLabel
                 />
               </Grid>

diff --git a/src/components/VoucherAcquirementGenericVoucher.js b/src/components/VoucherAcquirementGenericVoucher.js
@@ -5,6 +5,7 @@ import {
   Button, Divider, Grid, Tooltip, Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
 import {
   coreAlert,
@@ -148,12 +149,13 @@ function VoucherAcquirementGenericVoucher() {
           >
             <span>
               <Button
-                variant="outlined"
-                style={{ border: 0 }}
+                variant="contained"
+                color="primary"
                 onClick={onVoucherAcquire}
+                startIcon={<ShoppingCartIcon />}
                 disabled={acquirementBlocked(voucherAcquirement)}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>
             </span>
           </Tooltip>

diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js
@@ -5,6 +5,7 @@ import {
   Button, Divider, Grid, Tooltip, Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
 import {
   coreAlert,
@@ -31,6 +32,12 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
+  listItem: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+  },
 }));
 
 function VoucherAcquirementSpecificWorker() {
@@ -155,12 +162,13 @@ function VoucherAcquirementSpecificWorker() {
           >
             <span>
               <Button
-                variant="outlined"
-                style={{ border: 0 }}
+                variant="contained"
+                color="primary"
                 onClick={onVoucherAcquire}
+                startIcon={<ShoppingCartIcon />}
                 disabled={acquirementBlocked(voucherAcquirement)}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>
             </span>
           </Tooltip>

diff --git a/src/components/VoucherAssignmentForm.js b/src/components/VoucherAssignmentForm.js
@@ -5,9 +5,16 @@ import {
   Divider, Grid, Paper, Typography, Button, Tooltip,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
 
 import {
-  coreAlert, useModulesManager, useTranslations, journalize, historyPush, useHistory,
+  coreAlert,
+  useModulesManager,
+  useTranslations,
+  journalize,
+  historyPush,
+  useHistory,
+  InfoButton,
 } from '@openimis/fe-core';
 import { assignVouchers, voucherAssignmentValidation } from '../actions';
 import { MODULE_NAME, REF_ROUTE_WORKER_VOUCHERS, USER_ECONOMIC_UNIT_STORAGE_KEY } from '../constants';
@@ -24,6 +31,18 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
+  listItem: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+  },
+  infoSection: {
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  },
 }));
 
 function VoucherAssignmentForm() {
@@ -48,11 +67,13 @@ function VoucherAssignmentForm() {
     setIsConfirmationModalOpen((prevState) => !prevState);
     setAssignmentSummaryLoading(true);
     try {
-      const { payload } = await dispatch(voucherAssignmentValidation(
-        voucherAssignment?.employer?.code,
-        voucherAssignment?.workers,
-        voucherAssignment?.dateRanges,
-      ));
+      const { payload } = await dispatch(
+        voucherAssignmentValidation(
+          voucherAssignment?.employer?.code,
+          voucherAssignment?.workers,
+          voucherAssignment?.dateRanges,
+        ),
+      );
       setAssignmentSummary(payload);
     } catch (error) {
       throw new Error(`[VOUCHER_ASSIGNMENT]: Validation error. ${error}`);
@@ -64,12 +85,14 @@ function VoucherAssignmentForm() {
   const onAssignmentConfirmation = async () => {
     setIsAssignmentLoading(true);
     try {
-      await dispatch(assignVouchers(
-        voucherAssignment?.employer?.code,
-        voucherAssignment?.workers,
-        voucherAssignment?.dateRanges,
-        'Assign Vouchers',
-      ));
+      await dispatch(
+        assignVouchers(
+          voucherAssignment?.employer?.code,
+          voucherAssignment?.workers,
+          voucherAssignment?.dateRanges,
+          'Assign Vouchers',
+        ),
+      );
       historyPush(modulesManager, history, REF_ROUTE_WORKER_VOUCHERS);
       dispatch(
         coreAlert(
@@ -101,7 +124,10 @@ function VoucherAssignmentForm() {
     if (storedUserEconomicUnit) {
       const userEconomicUnit = JSON.parse(storedUserEconomicUnit);
       setVoucherAssignment((prevState) => ({
-        ...prevState, employer: userEconomicUnit, workers: [], dateRanges: [],
+        ...prevState,
+        employer: userEconomicUnit,
+        workers: [],
+        dateRanges: [],
       }));
     }
   }, [setVoucherAssignment, economicUnit]);
@@ -112,7 +138,14 @@ function VoucherAssignmentForm() {
         <Paper className={classes.paper}>
           <Grid xs={12}>
             <Grid container className={classes.paperHeaderTitle}>
-              <Typography variant="h5">{formatMessage('workerVoucher.menu.voucherAssignment')}</Typography>
+              <div className={classes.infoSection}>
+                <InfoButton
+                  content={formatMessage('VoucherAssignmentForm.form.moreInfo')}
+                  iconSize="large"
+                  maxWidth="large"
+                />
+                <Typography variant="h5">{formatMessage('workerVoucher.menu.voucherAssignment')}</Typography>
+              </div>
               <Tooltip
                 title={
                   assignmentBlocked(voucherAssignment)
@@ -122,12 +155,13 @@ function VoucherAssignmentForm() {
               >
                 <span>
                   <Button
-                    variant="outlined"
-                    style={{ border: 0 }}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AssignmentIndIcon />}
                     onClick={onVoucherAssign}
                     disabled={assignmentBlocked(voucherAssignment)}
                   >
-                    <Typography variant="subtitle1">{formatMessage('workerVoucher.assign.voucher')}</Typography>
+                    <Typography variant="body2">{formatMessage('workerVoucher.assign.voucher')}</Typography>
                   </Button>
                 </span>
               </Tooltip>

diff --git a/src/components/VoucherDetailsPanel.js b/src/components/VoucherDetailsPanel.js
@@ -72,7 +72,7 @@ function VoucherDetailsPanel({
                     handlePrint(null, () => voucherPrintTemplateRef.current);
                   }}
                 >
-                  <Typography variant="subtitle1">{formatMessage('workerVoucher.printVoucher')}</Typography>
+                  <Typography variant="body2">{formatMessage('workerVoucher.printVoucher')}</Typography>
                 </Button>
               )}
               <Button
@@ -83,7 +83,7 @@ function VoucherDetailsPanel({
                 startIcon={<ReceiptIcon />}
                 onClick={redirectToTheLinkedBill}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.navigateToTheBill.tooltip')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.navigateToTheBill.tooltip')}</Typography>
               </Button>
             </Grid>
           )}

diff --git a/src/components/VoucherSearcher.js b/src/components/VoucherSearcher.js
@@ -217,6 +217,7 @@ function VoucherSearcher({ downloadWorkerVoucher, fetchWorkerVouchers, clearWork
         exportFileFormats={EXPORT_FILE_FORMATS}
         exportFileFormat={exportFileFormat}
         setExportFileFormat={setExportFileFormat}
+        downloadWithIconButton
       />
       {failedExport && (
         <Dialog open={failedExport} fullWidth maxWidth="sm">