(fix) SJT-126 Billing module On editing a charge item, the system dup…

…licating items (fix) SJT-126 Billing module On editing a charge item, the system dup…
IntelliSOFT-Consulting · Dec 16, 2024 · 602dfe5 · 602dfe5
2 parents 4ec8d8c + 2bd9754
commit 602dfe5
Show file tree

Hide file tree

Showing 5 changed files with 455 additions and 245 deletions.
diff --git a/packages/esm-billing-app/package.json b/packages/esm-billing-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ehospital/esm-billing-app",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Billing frontend module for use in O3",
   "browser": "dist/ehospital-esm-billing-app.js",
   "main": "src/index.ts",
@@ -121,5 +121,5 @@
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
   },
   "packageManager": "[email protected]",
-  "gitHead": "578616b07289665afcb7569f0390d1c0c569a7cf"
+  "gitHead": "caab2f747b2171410773637bb6fe0a1923dab97e"
 }
diff --git a/...es/esm-billing-app/src/billable-services/billables/commodity/commodity-form.workspace.tsx b/...es/esm-billing-app/src/billable-services/billables/commodity/commodity-form.workspace.tsx
@@ -15,6 +15,8 @@ import { formatBillableServicePayloadForSubmission, mapInputToPayloadSchema } fr
 import { createBillableSerice } from '../../billable-service.resource';
 import { handleMutate } from '../../utils';
 
+import LeftPanel from '../../../left-panel/left-panel.component';
+
 const CommodityForm: React.FC<{editingService?: any; onClose: () => void}> = ({
   editingService,
   onClose
@@ -96,6 +98,8 @@ const CommodityForm: React.FC<{editingService?: any; onClose: () => void}> = ({
   };
 
   return (
+    <>
+    <LeftPanel />
     <FormProvider {...formMethods}>
       <form onSubmit={handleSubmit(onSubmit, handleError)} className={styles.form}>
         <div className={styles.formContainer}>
@@ -149,6 +153,7 @@ const CommodityForm: React.FC<{editingService?: any; onClose: () => void}> = ({
         </ButtonSet>
       </form>
     </FormProvider>
+    </>
   );
 };
 

diff --git a/packages/esm-billing-app/src/billable-services/billables/services/service-form.scss b/packages/esm-billing-app/src/billable-services/billables/services/service-form.scss
@@ -1,6 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .form {
   display: flex;
@@ -9,51 +10,128 @@
   height: 100%;
 }
 
-.formContainer {
+.section {
+  margin: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: layout.$spacing-05;
+}
+
+.container {
   margin: layout.$spacing-05;
 }
 
-.tablet {
-  padding: layout.$spacing-06 layout.$spacing-05;
-  background-color: colors.$white;
+.paymentContainer {
+  margin: layout.$layout-01;
+  padding: layout.$layout-01;
+  width: 70%;
+  border-right: 1px solid colors.$cool-gray-40;
 }
 
-.desktop {
-  padding: 0;
+.paymentButtons {
+  margin: layout.$layout-01 0;
 }
 
-.paymentMethods {
-  display: flex;
-  flex-direction: column;
-  row-gap: layout.$spacing-05;
-}
-
-.searchResults {
-  position: absolute;
-  top: 2.625rem;
-  z-index: 99;
-  height: 16rem;
-  padding: 0.5rem;
-  overflow-y: scroll;
-  background-color: colors.$white;
-  border: 1px solid colors.$gray-30;
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  align-items: flex-start;
+  column-gap: layout.$spacing-05;
+  margin: 0.625rem 0;
   width: 100%;
 }
 
-.searchItem {
-  padding: 0.5rem;
-  color: colors.$gray-70;
+.paymentTotals {
+  margin-top: layout.$spacing-01;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+}
+
+.errorPaymentContainer {
+  margin: layout.$spacing-04;
+  min-height: layout.$spacing-09;
+}
+
+.removeButtonContainer {
+  display: flex;
+  align-self: center;
   cursor: pointer;
-  @include type.type-style('label-01');
-  border-bottom: 1px solid colors.$gray-30;
-  &:hover {
-    background-color: colors.$gray-20;
+  margin-left: layout.$spacing-07;
+}
+
+.removeButton {
+  color: colors.$red-60;
+}
+
+.service {
+  padding: layout.$spacing-05 layout.$spacing-04;
+}
+
+.conceptsList {
+  background-color: $ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid $ui-03;
+
+  li:hover {
+    background-color: $ui-03;
   }
 }
 
-.formGroupWithConcept {
-  position: relative;
+.emptyResults {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  min-height: layout.$spacing-05;
+  border: 1px solid $ui-03;
 }
-.formStackControl {
-  row-gap: layout.$layout-01;
+
+.conceptLabel {
+  @include type.type-style('label-02');
+  margin: layout.$spacing-05;
 }
+
+.errorContainer {
+  margin: layout.$spacing-05;
+}
+
+.serviceError {
+  :global(.cds--search-input):focus {
+    outline: 2.5px solid $danger;
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: $danger;
+    }
+  }
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: $danger;
+  margin-top: 0.5rem;
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}
+
+.errorMessage {
+  color: red;
+  font-size: 0.875rem;
+}
+