CM-26: addressing issues and improving user experience

src/components/BenefitPlanHeadPanel.js

@@ -4,15 +4,13 @@ import { connect } from 'react-redux';
 import {
   withModulesManager,
   FormPanel,
-  TextAreaInput,
   NumberInput,
   ValidatedTextInput,
   ValidatedTextAreaInput,
   PublishedComponent,
 } from '@openimis/fe-core';
 import { injectIntl } from 'react-intl';
 import { withTheme, withStyles } from '@material-ui/core/styles';
-import isJsonString from '../util/json-validate';
 import { MAX_CODE_LENGTH } from '../constants';
 import {
   benefitPlanCodeSetValid,
@@ -56,7 +54,6 @@ class BenefitPlanHeadPanel extends FormPanel {
       isBenefitPlanSchemaValid,
       isBenefitPlanSchemaValidating,
       benefitPlanSchemaValidationError,
-      benefitPlanSchemaValidationErrorMessage,
     } = this.props;
     const benefitPlan = { ...edited };
 
@@ -109,6 +106,7 @@ class BenefitPlanHeadPanel extends FormPanel {
             required
             onChange={(v) => this.updateAttribute('dateValidFrom', v)}
             value={benefitPlan?.dateValidFrom ?? ''}
+            maxDate={benefitPlan?.dateValidTo ?? ''}
           />
         </Grid>
         <Grid item xs={3} className={classes.item}>
@@ -119,6 +117,7 @@ class BenefitPlanHeadPanel extends FormPanel {
             required
             onChange={(v) => this.updateAttribute('dateValidTo', v)}
             value={benefitPlan?.dateValidTo ?? ''}
+            minDate={benefitPlan?.dateValidFrom ?? new Date().getDate()}
           />
         </Grid>
         <Grid item xs={3} className={classes.item}>
@@ -146,7 +145,7 @@ class BenefitPlanHeadPanel extends FormPanel {
             label="benefitPlan.schema"
             onChange={(v) => this.updateAttribute('beneficiaryDataSchema', v)}
             value={benefitPlan?.beneficiaryDataSchema}
-            codeTakenLabel={benefitPlanSchemaValidationErrorMessage}
+            codeTakenLabel="socialProtection.validation.benefitPlan.invalidSchema"
             itemQueryIdentifier="bfSchema"
             action={benefitPlanSchemaValidationCheck}
             clearAction={benefitPlanSchemaValidationClear}
@@ -157,15 +156,6 @@ class BenefitPlanHeadPanel extends FormPanel {
             validationError={benefitPlanSchemaValidationError}
           />
         </Grid>
-        <Grid item xs={3} className={classes.item}>
-          <TextAreaInput
-            module="socialProtection"
-            label="benefitPlan.jsonExt"
-            onChange={(v) => this.updateAttribute('jsonExt', v)}
-            value={benefitPlan?.jsonExt}
-            error={!!benefitPlan?.jsonExt && !isJsonString(benefitPlan?.jsonExt)}
-          />
-        </Grid>
       </Grid>
     );
   }

src/components/BenefitPlanSearcher.js

@@ -6,6 +6,7 @@ import {
   formatMessageWithValues,
   Searcher,
   coreConfirm,
+  clearConfirm,
   journalize,
   withHistory,
   historyPush,
@@ -30,6 +31,7 @@ function BenefitPlanSearcher({
   history,
   rights,
   coreConfirm,
+  clearConfirm,
   confirmed,
   journalize,
   submittingMutation,
@@ -70,6 +72,7 @@ function BenefitPlanSearcher({
     if (benefitPlanToDelete && confirmed !== null) {
       setBenefitPlanToDelete(null);
     }
+    return () => confirmed && clearConfirm(false);
   }, [confirmed]);
 
   useEffect(() => {
@@ -207,6 +210,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators(
     fetchBenefitPlans,
     deleteBenefitPlan,
     coreConfirm,
+    clearConfirm,
     journalize,
   },
   dispatch,

src/pages/BenefitPlanPage.js

@@ -5,12 +5,14 @@ import {
   formatMessage,
   formatMessageWithValues,
   coreConfirm,
+  clearConfirm,
   journalize,
   withModulesManager,
 } from '@openimis/fe-core';
 import { injectIntl } from 'react-intl';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import _ from 'lodash';
 import { withTheme, withStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { RIGHT_BENEFICIARY_SEARCH, RIGHT_BENEFIT_PLAN_UPDATE } from '../constants';
@@ -20,7 +22,6 @@ import {
 import BenefitPlanHeadPanel from '../components/BenefitPlanHeadPanel';
 import BenefitPlanTabPanel from '../components/BenefitPlanTabPanel';
 import { ACTION_TYPE } from '../reducer';
-import isJsonString from '../util/json-validate';
 
 const styles = (theme) => ({
   page: theme.page,
@@ -37,6 +38,7 @@ function BenefitPlanPage({
   deleteBenefitPlan,
   updateBenefitPlan,
   coreConfirm,
+  clearConfirm,
   confirmed,
   submittingMutation,
   mutation,
@@ -58,7 +60,10 @@ function BenefitPlanPage({
     }
   }, [benefitPlanUuid]);
 
-  useEffect(() => confirmed && confirmedAction(), [confirmed]);
+  useEffect(() => {
+    if (confirmed) confirmedAction();
+    return () => confirmed && clearConfirm(null);
+  }, [confirmed]);
 
   const back = () => history.goBack();
 
@@ -87,26 +92,26 @@ function BenefitPlanPage({
   const isMandatoryFieldsEmpty = () => {
     if (
       !!editedBenefitPlan?.code
-            && !!editedBenefitPlan?.name
-            && !!editedBenefitPlan?.dateValidFrom
-            && !!editedBenefitPlan?.dateValidTo
+      && !!editedBenefitPlan?.name
+      && !!editedBenefitPlan?.dateValidFrom
+      && !!editedBenefitPlan?.dateValidTo
     ) {
       return false;
     }
     return true;
   };
   const isValid = () => (
     (editedBenefitPlan?.code ? isBenefitPlanCodeValid : true)
-            && (editedBenefitPlan?.name ? isBenefitPlanNameValid : true)
-            && (editedBenefitPlan?.beneficiaryDataSchema ? isBenefitPlanSchemaValid : true));
+    && (editedBenefitPlan?.name ? isBenefitPlanNameValid : true)
+    && (editedBenefitPlan?.beneficiaryDataSchema ? isBenefitPlanSchemaValid : true));
 
-  const canSave = () => {
-    if (!isMandatoryFieldsEmpty() && isValid() && editedBenefitPlan?.jsonExt) {
-      return isJsonString(editedBenefitPlan.jsonExt);
-    }
+  const doesBenefitPlanChange = () => {
+    if (_.isEqual(benefitPlan, editedBenefitPlan)) return false;
     return true;
   };
 
+  const canSave = () => !isMandatoryFieldsEmpty() && isValid() && doesBenefitPlanChange();
+
   const handleSave = () => {
     if (benefitPlan?.id) {
       updateBenefitPlan(
@@ -164,9 +169,7 @@ function BenefitPlanPage({
         canSave={canSave}
         save={handleSave}
         HeadPanel={BenefitPlanHeadPanel}
-        Panels={
-                        rights.includes(RIGHT_BENEFICIARY_SEARCH) ? [BenefitPlanTabPanel] : []
-                    }
+        Panels={rights.includes(RIGHT_BENEFICIARY_SEARCH) ? [BenefitPlanTabPanel] : []}
         rights={rights}
         actions={actions}
         setConfirmedAction={setConfirmedAction}
@@ -203,6 +206,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   deleteBenefitPlan,
   updateBenefitPlan,
   coreConfirm,
+  clearConfirm,
   journalize,
 }, dispatch);
 

src/reducer.js

@@ -291,7 +291,6 @@ function reducer(
             isValidating: true,
             isValid: false,
             validationError: null,
-            validationErrorMessage: null,
           },
         },
       };
@@ -304,7 +303,6 @@ function reducer(
             isValidating: false,
             isValid: action.payload?.data.isValid.isValid,
             validationError: formatGraphQLError(action.payload),
-            validationErrorMessage: action.payload?.data.isValid.errorMessage,
           },
         },
       };
@@ -329,7 +327,6 @@ function reducer(
             isValidating: false,
             isValid: false,
             validationError: null,
-            validationErrorMessage: null,
           },
         },
       };

src/translations/en.json

@@ -27,8 +27,8 @@
   "socialProtection.beneficiary.status.ACTIVE": "ACTIVE",
   "socialProtection.beneficiary.status.GRADUATED": "GRADUATED",
   "socialProtection.beneficiary.status.SUSPENDED": "SUSPENDED",
-  "socialProtection.benefitPlan.saveButton.tooltip.enabled": "Enabled",
-  "socialProtection.benefitPlan.saveButton.tooltip.disabled": "Disabled",
+  "socialProtection.benefitPlan.saveButton.tooltip.enabled": "Save changes",
+  "socialProtection.benefitPlan.saveButton.tooltip.disabled": "Save changes",
   "socialProtection.benefitPlan.benefitPlanHelmet": "Benefit Plan",
   "socialProtection.benefitPlan.code.alreadyTaken": "The code is already taken",
   "socialProtection.benefitPlan.name.alreadyTaken": "The name is already taken",
@@ -40,11 +40,13 @@
   "socialProtection.mainMenuSocialProtection": "Social Protection",
   "socialProtection.menu.socialProtection.benefitPlans": "Benefit Plans",
   "socialProtection.advancedFilters": "Advanced Filters",
+  "socialProtection.createButton.tooltip": "Create",
   "socialProtection.download": "Download",
   "socialProtection.export.firstName": "first_name",
   "socialProtection.export.lastName": "last_name",
   "socialProtection.export.dob": "dob",
   "socialProtection.export.dateCreated": "date_created",
   "socialProtection.export.label": "Download",
-  "socialProtection.export.filename": "beneficiaries_export"
-}
+  "socialProtection.export.filename": "beneficiaries_export",
+  "socialProtection.validation.benefitPlan.invalidSchema": "Invalid schema"
+}