feat: add paid amount attr and formatting to SaleReceipt transformer

packages/server/src/models/SaleReceipt.ts

@@ -55,6 +55,9 @@ export default class SaleReceipt extends mixin(TenantModel, [
       'discountAmount',
       'discountPercentage',
 
+      'paid',
+      'paidLocal',
+
       'isClosed',
       'isDraft',
     ];
@@ -130,6 +133,22 @@ export default class SaleReceipt extends mixin(TenantModel, [
     return this.adjustment * this.exchangeRate;
   }
 
+  /**
+   * Receipt paid amount.
+   * @returns {number}
+   */
+  get paid() {
+    return this.total;
+  }
+
+  /**
+   * Receipt paid amount in local currency.
+   * @returns {number}
+   */
+  get paidLocal() {
+    return this.paid * this.exchangeRate;
+  }
+
   /**
    * Detarmine whether the sale receipt closed.
    * @return {boolean}

packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts

@@ -24,6 +24,7 @@ export class SaleReceiptTransformer extends Transformer {
       'formattedReceiptDate',
       'formattedClosedAtDate',
       'formattedCreatedAt',
+      'paidFormatted',
       'entries',
       'attachments',
     ];
@@ -130,6 +131,18 @@ export class SaleReceiptTransformer extends Transformer {
     return receipt.discountPercentage ? `${receipt.discountPercentage}%` : '';
   };
 
+  /**
+   * Retrieves formatted paid amount.
+   * @param receipt
+   * @returns {string}
+   */
+  protected paidFormatted = (receipt: ISaleReceipt): string => {
+    return formatNumber(receipt.paid, {
+      currencyCode: receipt.currencyCode,
+      excerptZero: true,
+    });
+  };
+
   /**
    * Retrieves formatted adjustment amount.
    * @param receipt

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx

@@ -5,14 +5,12 @@ import styled from 'styled-components';
 import { defaultTo } from 'lodash';
 
 import {
-  ButtonLink,
   CustomerDrawerLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
   ExchangeRateDetailItem,
   Row,
   Col,
-  FormatDate,
   DetailsMenu,
   DetailItem,
 } from '@/components';
@@ -66,6 +64,7 @@ export default function ReceiptDetailHeader() {
             />
           </DetailsMenu>
         </Col>
+
         <Col xs={6}>
           <DetailsMenu
             direction={'horizantal'}

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx

@@ -8,7 +8,6 @@ import {
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FormatNumber,
 } from '@/components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
@@ -51,8 +50,8 @@ export default function ReceiptDetailTableFooter() {
         />
         <TotalLine
           title={<T id={'receipt.details.payment_amount'} />}
-          value={receipt.formatted_amount}
+          value={receipt.paid_formatted}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
+          borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'receipt.details.due_amount'} />}