@openmrs/esm-billing-app 1.0.2-pre.112 → 1.0.2-pre.1124

package/src/billing-form/billing-form.scss

@@ -73,6 +73,9 @@
 
 .grid {
   margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
 }
 
 .row {
@@ -85,3 +88,143 @@
 .spacer {
   margin-top: layout.$spacing-05;
 }
+
+.selectedItemsContainer {
+  margin-top: layout.$spacing-05;
+  
+  h4 {
+    margin-bottom: layout.$spacing-05;
+    color: $text-02;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+  
+  .itemCard {
+    border: 1px solid $ui-03;
+    border-radius: layout.$spacing-02;
+    padding: layout.$spacing-05;
+    margin-bottom: layout.$spacing-05;
+    background-color: $ui-01;
+    
+    .itemHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: layout.$spacing-05;
+      
+      .itemName {
+        font-weight: 600;
+        font-size: 1rem;
+        color: $text-02;
+      }
+    }
+    
+      .itemControls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: layout.$spacing-05;
+      margin-top: layout.$spacing-03;
+      align-items: flex-end;      .controlSection {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        
+        &:first-child {
+          flex: 1 1 auto;
+          min-width: 250px;
+        }
+        
+        &:nth-child(2) {
+          flex: 0 0 140px;
+          width: 140px;
+        }
+        
+        &:last-child {
+          flex: 0 0 180px;
+          width: 180px;
+          margin-left: auto;
+          text-align: right;
+        }
+        
+        label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          margin-bottom: layout.$spacing-03;
+          color: $text-02;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        :global(.cds--list-box),
+        :global(.cds--number),
+        :global(.cds--combo-box),
+        :global(.cds--list-box__wrapper),
+        :global(.cds--list-box__field) {
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+        
+        .priceDisplay,
+        .totalDisplay {
+          font-size: 0.875rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          color: $text-02;
+          padding: layout.$spacing-03 0;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+  
+  .grandTotal {
+    text-align: right;
+    padding: layout.$spacing-05;
+    border-top: 2px solid $interactive-01;
+    margin-top: layout.$spacing-05;
+    background-color: $ui-01;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: $text-02;
+  }
+}
+
+@media (max-width: 1056px) {
+  .selectedItemsContainer {
+    .itemCard {
+      .itemControls {
+        .controlSection {
+          &:nth-child(2) {
+            flex: 1 1 100%;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .selectedItemsContainer {
+    .itemCard {
+      padding: layout.$spacing-04;
+      
+      .itemControls {
+        flex-direction: column;
+        gap: layout.$spacing-03;
+        
+        .controlSection {
+          &:first-child,
+          &:nth-child(2),
+          &:last-child {
+            flex: 1 1 100%;
+            width: 100%;
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

package/src/billing-form/visit-attributes/visit-attributes-form.component.tsx

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { ComboBox, InlineLoading, RadioButton, RadioButtonGroup, TextInput } from '@carbon/react';
+import { ComboBox, InlineLoading, RadioButton, RadioButtonGroup, Stack, TextInput } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { usePaymentMethods } from '../billing-form.resource';
 import styles from './visit-attributes-form.scss';
@@ -31,14 +31,14 @@ const visitAttributesFormSchema = z.object({
 
 const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes, setPaymentMethod }) => {
   const { t } = useTranslation();
-  const { patientCatergory, catergoryConcepts, nonPayingPatientCategories } = useConfig();
+  const { patientCategory, categoryConcepts, nonPayingPatientCategories } = useConfig();
   const { control, getValues, watch } = useForm<VisitAttributesFormValue>({
     mode: 'all',
     defaultValues: {},
     resolver: zodResolver(visitAttributesFormSchema),
   });
 
-  const [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory] = watch([
+  const [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategoryValue] = watch([
     'paymentDetails',
     'paymentMethods',
     'insuranceScheme',
@@ -49,21 +49,29 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
   const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentMethods();
   const patientCategoryOptions = useMemo(() => {
     return Object.entries(nonPayingPatientCategories ?? {}).map(([key, uuid]) => ({
-      text: key,
+      // t('childUnder5', 'Child under 5')
+      // t('student', 'Student')
+      text: t(key),
       uuid,
     }));
-  }, [nonPayingPatientCategories]);
+  }, [nonPayingPatientCategories, t]);
 
   const createVisitAttributesPayload = useCallback(() => {
-    const { paymentDetails, paymentMethods, insuranceScheme, policyNumber, patientCategory } = getValues();
+    const {
+      paymentDetails,
+      paymentMethods,
+      insuranceScheme,
+      policyNumber,
+      patientCategory: patientCategoryValue,
+    } = getValues();
     setPaymentMethod?.(paymentMethods);
 
     const formPayload = [
-      { uuid: patientCatergory.paymentDetails, value: paymentDetails },
-      { uuid: patientCatergory.paymentMethods, value: paymentMethods },
-      { uuid: patientCatergory.insuranceScheme, value: insuranceScheme },
-      { uuid: patientCatergory.policyNumber, value: policyNumber },
-      { uuid: patientCatergory.patientCategory, value: patientCategory },
+      { uuid: patientCategory.paymentDetails, value: paymentDetails },
+      { uuid: patientCategory.paymentMethods, value: paymentMethods },
+      { uuid: patientCategory.insuranceScheme, value: insuranceScheme },
+      { uuid: patientCategory.policyNumber, value: policyNumber },
+      { uuid: patientCategory.patientCategory, value: patientCategoryValue },
     ];
 
     const visitAttributesPayload = formPayload.filter(
@@ -75,11 +83,11 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
     }));
   }, [
     getValues,
-    patientCatergory.insuranceScheme,
-    patientCatergory.patientCategory,
-    patientCatergory.paymentDetails,
-    patientCatergory.paymentMethods,
-    patientCatergory.policyNumber,
+    patientCategory.insuranceScheme,
+    patientCategory.patientCategory,
+    patientCategory.paymentDetails,
+    patientCategory.paymentMethods,
+    patientCategory.policyNumber,
     setPaymentMethod,
   ]);
 
@@ -90,7 +98,7 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
     paymentMethods,
     insuranceSchema,
     policyNumber,
-    patientCategory,
+    patientCategoryValue,
     setAttributes,
     createVisitAttributesPayload,
   ]);
@@ -100,59 +108,59 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
       <InlineLoading
         status="active"
         iconDescription={t('loadingDescription', 'Loading')}
-        description={t('loading', 'Loading data...')}
+        description={t('loading', 'Loading data') + '...'}
       />
     );
   }
 
   return (
-    <section>
-      <div className={styles.sectionTitle}>{t('paymentDetails', 'Payment Details')}</div>
+    <Stack className={styles.stack} gap={5}>
       <Controller
         name="paymentDetails"
         control={control}
         render={({ field }) => (
           <RadioButtonGroup
+            className={styles.radioButtonGroup}
+            legendText={t('paymentDetails', 'Payment details')}
+            name="payment-details"
             onChange={(selected) => field.onChange(selected)}
-            orientation="vertical"
-            legendText={t('paymentDetails', 'Payment Details')}
-            name="payment-details">
-            <RadioButton labelText="Paying" value={catergoryConcepts.payingDetails} id="radio-1" />
-            <RadioButton labelText="Non paying" value={catergoryConcepts.nonPayingDetails} id="radio-2" />
+            orientation="vertical">
+            <RadioButton labelText={t('paying', 'Paying')} value={categoryConcepts.payingDetails} id="radio-1" />
+            <RadioButton
+              labelText={t('nonPaying', 'Non paying')}
+              value={categoryConcepts.nonPayingDetails}
+              id="radio-2"
+            />
           </RadioButtonGroup>
         )}
       />
-
-      {paymentDetails === catergoryConcepts.payingDetails && (
+      {paymentDetails === categoryConcepts.payingDetails && (
         <Controller
           control={control}
           name="paymentMethods"
           render={({ field }) => (
             <ComboBox
-              className={styles.sectionField}
-              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
               id="paymentMethods"
               items={paymentModes}
               itemToString={(item) => (item ? item.name : '')}
-              titleText={t('paymentMethods', 'Payment methods')}
+              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
               placeholder={t('selectPaymentMethod', 'Select payment method')}
+              titleText={t('paymentMethod', 'Payment method')}
             />
           )}
         />
       )}
-
-      {paymentMethods === catergoryConcepts.insuranceDetails && paymentDetails === catergoryConcepts.payingDetails && (
+      {paymentMethods === categoryConcepts.insuranceDetails && paymentDetails === categoryConcepts.payingDetails && (
         <>
           <Controller
             control={control}
             name="insuranceScheme"
             render={({ field }) => (
               <TextInput
-                className={styles.sectionField}
-                onChange={(e) => field.onChange(e.target.value)}
                 id="insurance-scheme"
-                type="text"
                 labelText={t('insuranceScheme', 'Insurance scheme')}
+                onChange={(e) => field.onChange(e.target.value)}
+                type="text"
               />
             )}
           />
@@ -161,19 +169,17 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
             name="policyNumber"
             render={({ field }) => (
               <TextInput
-                className={styles.sectionField}
-                onChange={(e) => field.onChange(e.target.value)}
                 {...field}
                 id="policy-number"
-                type="text"
                 labelText={t('policyNumber', 'Policy number')}
+                onChange={(e) => field.onChange(e.target.value)}
+                type="text"
               />
             )}
           />
         </>
       )}
-
-      {paymentDetails === catergoryConcepts.nonPayingDetails && (
+      {paymentDetails === categoryConcepts.nonPayingDetails && (
         <Controller
           control={control}
           name="patientCategory"
@@ -190,7 +196,7 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
           )}
         />
       )}
-    </section>
+    </Stack>
   );
 };
 

package/src/billing-form/visit-attributes/visit-attributes-form.scss

@@ -1,6 +1,6 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 
 .sectionContainer {
   margin: 0 layout.$spacing-03;
@@ -11,12 +11,25 @@
   color: colors.$gray-70;
   margin: 0 0 layout.$spacing-03 0;
 }
+
 .visitAttributesContainer {
   row-gap: layout.$spacing-03;
   display: flex;
   flex-direction: column;
 }
 
-.sectionField {
-  margin-top: layout.$spacing-03;
+.radioButtonGroup {
+  :global(.cds--radio-button-group) {
+    :global(.cds--radio-button-wrapper) {
+      margin-bottom: layout.$spacing-03;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.stack {
+  margin-bottom: layout.$spacing-05;
 }