close visit checkbox ui fix

Author: donaldkibet

src/config-schema.ts

@@ -127,17 +127,17 @@ export const configSchema = {
       'Enable or disable stock deduction during the dispensing process. Requires the stock management module to be installed and configured.',
     _default: false,
   },
-  closeVisitOnDispense: {
+  endVisitOnDispense: {
     enabled: {
       _type: Type.Boolean,
       _description:
-        'Enables or disables the automatic closure of the current visit upon medication dispensing. When set to true, the system will attempt to close the visit after a successful medication dispense, subject to the conditions specified in the "visitTypes" config.',
+        'Enables or disables the ending of the current visit upon medication dispensing. When set to true, the system will attempt to end the visit after a successful medication dispense, subject to the conditions specified in the "visitTypes" config.',
       _default: false,
     },
     visitTypesUuids: {
       _type: Type.Array,
       _description:
-        'Specifies a list of visit type UUIDs that are eligible for automatic closure upon medication dispensing. If enabled, only visits of these types will be closed automatically. An empty array means no visit types are eligible for automatic closure. This setting is only relevant when "enabled" is set to true.',
+        'Specifies a list of visit type UUIDs that are eligible for ending upon medication dispensing. If enabled, only visits of these types will be closed. An empty array means no visit types are eligible for closure. This setting is only relevant when "enabled" is set to true.',
       _default: [],
     },
   },
@@ -183,7 +183,7 @@ export interface PharmacyConfig {
     };
   };
   enableStockDispense: boolean;
-  closeVisitOnDispense?: {
+  endVisitOnDispense?: {
     enabled: boolean;
     visitTypesUuids: Array<string>;
   };

src/forms/dispense-form-handler.tsx

@@ -96,14 +96,14 @@ class StockDispenseHandler extends Handler {
   }
 }
 
-class CloseCurrentVisitHandler extends Handler {
+class EndCurrentVisitHandler extends Handler {
   async handle(request) {
     const { currentVisit, abortController, closeVisitOnDispense, response, t, config } = request;
 
     try {
       const visitTypes = await getVisitTypes().toPromise();
       const shouldCloseVisit =
-        shouldCloseVisitOnDispense(currentVisit, visitTypes, response.status, config) && closeVisitOnDispense;
+        shouldEndVisitOnDispense(currentVisit, visitTypes, response.status, config) && closeVisitOnDispense;
 
       if (shouldCloseVisit) {
         const updateResponse = await updateVisit(
@@ -170,7 +170,7 @@ class FinalResponseHandler extends Handler {
 const setupChain = () => {
   const medicationDispenseHandler = new MedicationDispenseHandler();
   const stockDispenseHandler = new StockDispenseHandler();
-  const closeActiveVisitHandler = new CloseCurrentVisitHandler();
+  const closeActiveVisitHandler = new EndCurrentVisitHandler();
   const finalResponseHandler = new FinalResponseHandler();
 
   medicationDispenseHandler
@@ -195,7 +195,7 @@ export const executeMedicationDispenseChain = (params) => {
  * @param {object} config - The configuration object.
  * @returns {boolean} - Returns true if the current visit should be closed, false otherwise.
  */
-function shouldCloseVisitOnDispense(currentVisit, visitTypes, status, config): boolean {
+function shouldEndVisitOnDispense(currentVisit, visitTypes, status, config): boolean {
   if (!currentVisit || !visitTypes) return false;
 
   const hasAllowedVisitType = visitTypes.some((vt) => vt.uuid === currentVisit.visitType.uuid);

src/forms/dispense-form.component.tsx

@@ -125,13 +125,13 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
   useEffect(checkIsValid, [medicationDispensePayload, quantityRemaining, inventoryItem]);
 
   const isButtonDisabled = (config.enableStockDispense ? !inventoryItem : false) || !isValid || isSubmitting;
-  const shouldShowCloseVisitCheckbox = useMemo(() => {
+  const shouldEndCurrentVisitCheckbox = useMemo(() => {
     return (
-      config.closeVisitOnDispense &&
+      config.endVisitOnDispense &&
       currentVisit &&
-      config.closeVisitOnDispense.visitTypesUuids.includes(currentVisit.visitType.uuid)
+      config.endVisitOnDispense.visitTypesUuids.includes(currentVisit.visitType.uuid)
     );
-  }, [config.closeVisitOnDispense, currentVisit]);
+  }, [config.endVisitOnDispense, currentVisit]);
 
   const bannerState = useMemo(() => {
     if (patient) {
@@ -178,7 +178,7 @@ const DispenseForm: React.FC<DispenseFormProps> = ({
                   updateInventoryItem={setInventoryItem}
                 />
               )}
-              {shouldShowCloseVisitCheckbox && (
+              {shouldEndCurrentVisitCheckbox && (
                 <Layer>
                   <Checkbox
                     className={styles.closeVisitCheckBox}

src/forms/forms.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 // TO DO Move this styles to style - guide
 // https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
@@ -156,5 +157,7 @@ $color-blue-30: #a6c8ff;
 .closeVisitCheckBox {
   & label {
     @include type.type-style('label-01');
+    margin-top: spacing.$spacing-05;
+    color: colors.$gray-70;
   }
 }