OM-104: creating business config form implemente

src/actions.js

@@ -173,15 +173,43 @@ export function assignVouchers(phCode, workers, dateRanges, clientMutationLabel)
   );
 }
 
-// export function manageVoucherPrice() {}
-
-// export function fetchVoucherPrices(modulesManager, params) {
-// const payload = formatPageQueryWithCount('workerVoucher', params, WORKER_VOUCHER_PROJECTION(modulesManager));
-// return graphql(payload, ACTION_TYPE.SEARCH_VOUCHER_PRICES);
-// }
-
-// export const clearVoucherPrices = () => (dispatch) => {
-//   dispatch({
-//     type: CLEAR(ACTION_TYPE.SEARCH_VOUCHER_PRICES),
-//   });
-// };
+export function manageVoucherPrice(key, value, dateValidFrom, dateValidTo, clientMutationLabel) {
+  const mutationInput = `
+  ${key ? `key: "${key}"` : ''}
+  ${value ? `value: "${value}"` : ''}
+  ${dateValidFrom ? `dateValidFrom: "${dateValidFrom}"` : ''}
+  ${dateValidTo ? `dateValidTo: "${dateValidTo}"` : ''}
+  `;
+  const mutation = formatMutation('createBusinessConfig', mutationInput, clientMutationLabel);
+  const requestedDateTime = new Date();
+
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.MANAGE_VOUCHER_PRICE), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.MANAGE_VOUCHER_PRICE,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
+export function fetchMutation(clientMutationId) {
+  return graphqlWithVariables(
+    `
+    query fetchMutation($clientMutationId: String!) {
+      mutationLogs(clientMutationId: $clientMutationId) {
+        edges {
+          node {
+            id
+            status
+            error
+          }
+        }
+      }
+    }
+    `,
+    { clientMutationId },
+  );
+}

src/components/PriceManagementForm.js

@@ -33,7 +33,7 @@ function PriceManagementForm({
               // NOTE: maxDate cannot be passed if endDate does not exist.
               // Passing any other falsy value will block months manipulation.
               // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(edited?.endDate ? { maxDate: edited.endDate } : null)}
+            {...(edited?.validTo ? { maxDate: edited.validTo } : null)}
           />
         </Grid>
         <Grid xs={3} className={classes.item}>
@@ -48,7 +48,7 @@ function PriceManagementForm({
               // NOTE: minDate cannot be passed if startDate does not exist.
               // Passing any other falsy value will block months manipulation.
               // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(edited?.startDate ? { minDate: edited.startDate } : null)}
+            {...(edited?.validFrom ? { minDate: edited.validFrom } : null)}
           />
         </Grid>
       </Grid>

src/components/VoucherPriceManagementForm.js

@@ -7,12 +7,12 @@ import {
 import { makeStyles } from '@material-ui/styles';
 
 import {
-  useModulesManager, useTranslations, journalize,
-  // coreAlert,
+  useModulesManager, useTranslations, journalize, parseData, coreAlert,
 } from '@openimis/fe-core';
-import { MODULE_NAME } from '../constants';
 import PriceManagementForm from './PriceManagementForm';
 import VoucherPriceSearcher from './VoucherPriceSearcher';
+import { fetchMutation, manageVoucherPrice } from '../actions';
+import { MODULE_NAME, VOUCHER_PRICE_MANAGEMENT_BUSINESS_KEY } from '../constants';
 
 export const useStyles = makeStyles((theme) => ({
   paper: { ...theme.paper.paper, margin: '10px 0 0 0' },
@@ -31,12 +31,15 @@ function VoucherPriceManagementForm() {
   const modulesManager = useModulesManager();
   const dispatch = useDispatch();
   const classes = useStyles();
-  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
   const [priceManagement, setPriceManagement] = useState({});
+  const [priceManagementLoading, setPriceManagementLoading] = useState(false);
   const { mutation, submittingMutation } = useSelector((state) => state.workerVoucher);
 
   const priceManagementBlocked = (priceManagement) => !priceManagement?.price
-  || !priceManagement?.validFrom || !priceManagement?.validTo;
+  || !priceManagement?.validFrom
+  || !priceManagement?.validTo
+  || priceManagementLoading;
 
   const fetchVoucherPrices = async (params) => {
     try {
@@ -48,12 +51,45 @@ function VoucherPriceManagementForm() {
   };
 
   const onPriceManagementChange = async () => {
+    setPriceManagementLoading(true);
     try {
-      // TODO: alert if error
-      // < ----- >
-      await fetchVoucherPrices();
+      const { payload } = await dispatch(
+        manageVoucherPrice(
+          VOUCHER_PRICE_MANAGEMENT_BUSINESS_KEY,
+          priceManagement?.price,
+          priceManagement?.validFrom,
+          priceManagement?.validTo,
+          'Manage Voucher Price',
+        ),
+      );
+
+      const { clientMutationId } = payload.data.createBusinessConfig;
+      const mutationResponse = await dispatch(fetchMutation(clientMutationId));
+      const currentMutation = parseData(mutationResponse.payload.data.mutationLogs)?.[0];
+
+      if (currentMutation.error) {
+        const errorDetails = JSON.parse(currentMutation.error);
+
+        dispatch(coreAlert(
+          formatMessage('workerVoucher.menu.priceManagement'),
+          formatMessage(errorDetails?.detail || 'NOT_FOUND'),
+        ));
+        return;
+      }
+
+      dispatch(coreAlert(
+        formatMessage('workerVoucher.menu.priceManagement'),
+        formatMessageWithValues('workerVoucher.priceManagement.success', {
+          price: priceManagement.price,
+          dateFrom: priceManagement.validFrom,
+          dateTo: priceManagement.validTo,
+        }),
+      ));
+      setPriceManagement({});
     } catch (error) {
       throw new Error(`[VOUCHER_PRICE_MANAGEMENT]: Price change failed. ${error}`);
+    } finally {
+      setPriceManagementLoading(false);
     }
   };
 

src/constants.js

@@ -15,6 +15,7 @@ export const CONTAINS_LOOKUP = 'Icontains';
 export const WORKER_THRESHOLD = 3;
 export const VOUCHER_QUANTITY_THRESHOLD = 1000;
 export const USER_ECONOMIC_UNIT_STORAGE_KEY = 'userEconomicUnit';
+export const VOUCHER_PRICE_MANAGEMENT_BUSINESS_KEY = 'VOUCHER_PRICE_MANAGEMENT_KEY';
 
 const WORKER_VOUCHER_STATUS = {
   AWAITING_PAYMENT: 'AWAITING_PAYMENT',

src/reducer.js

@@ -161,7 +161,7 @@ function reducer(
     case SUCCESS(ACTION_TYPE.ASSIGN_VOUCHERS):
       return dispatchMutationResp(state, 'assignVouchers', action);
     case SUCCESS(ACTION_TYPE.MANAGE_VOUCHER_PRICE):
-      return dispatchMutationResp(state, 'manageVoucherPrice', action);
+      return dispatchMutationResp(state, 'createBusinessConfig', action);
     default:
       return state;
   }

src/translations/en.json

@@ -71,5 +71,7 @@
   "workerVoucher.close": "Cancel",
   "workerVoucher.searcher.title": "{count} Voucher Prices",
   "workerVoucher.searcher.price": "Price",
-  "workerVoucher.filter.date": "Date"
+  "workerVoucher.filter.date": "Date",
+  "business_config.validation.date_range_overlap": "Unable to create the voucher price for the specified period. There is an existing voucher price defined within the selected date range.",
+  "workerVoucher.priceManagement.success": "The voucher price has been successfully set at {price}$ for the period from {dateFrom} to {dateTo}."
 }