Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -27,6 +27,7 @@ import {
   PaymentMadeAction,
   AbilitySubject,
 } from '../../../common/abilityOption';
+import { BillMenuItem } from './utils';
 
 import { safeCallback, compose } from 'utils';
 
@@ -50,6 +51,14 @@ function BillDetailActionsBar({
     closeDrawer('bill-drawer');
   };
 
+  // Handle convert to vendor credit.
+  const handleConvertToVendorCredit = () => {
+    history.push(`/vendor-credits/new?from_bill_id=${billId}`, {
+      billId: billId,
+    });
+    closeDrawer('bill-drawer');
+  };
+
   // Handle delete bill.
   const onDeleteBill = () => {
     openAlert('bill-delete', { billId });
@@ -92,6 +101,14 @@ function BillDetailActionsBar({
             onClick={safeCallback(onDeleteBill)}
           />
         </Can>
+        <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+          <NavbarDivider />
+          <BillMenuItem
+            payload={{
+              onConvert: handleConvertToVendorCredit,
+            }}
+          />
+        </Can>
       </NavbarGroup>
     </DrawerActionsBar>
   );

src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -1,51 +1,27 @@
 import React from 'react';
-import styled from 'styled-components';
-
 import {
-  TotalLineBorderStyle,
+  CommercialDocFooter,
-  TotalLineTextStyle,
-  FormatNumber,
   T,
-  TotalLines,
+  If,
-  TotalLine,
+  DetailsMenu,
-} from '../../../components';
+  DetailItem,
+} from 'components';
+
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
- * Bill read-only details footer.
+ * Bill detail footer.
+ * @returns {React.JSX}
  */
-export function BillDetailFooter() {
+export default function BillDetailFooter() {
   const { bill } = useBillDrawerContext();
-
   return (
-    <BillDetailsFooterRoot>
+    <CommercialDocFooter>
-      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={bill.note}>
-          title={<T id={'bill.details.subtotal'} />}
+          <DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
-          value={<FormatNumber value={bill.amont} />}
+        </If>
-          borderStyle={TotalLineBorderStyle.SingleDark}
+      </DetailsMenu>
-        />
+    </CommercialDocFooter>
-        <TotalLine
-          title={<T id={'bill.details.total'} />}
-          value={bill.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-        <TotalLine
-          title={<T id={'bill.details.payment_amount'} />}
-          value={bill.formatted_payment_amount}
-        />
-        <TotalLine
-          title={<T id={'bill.details.due_amount'} />}
-          value={bill.formatted_due_amount}
-        />
-      </BillTotalLines>
-    </BillDetailsFooterRoot>
   );
 }
-
-export const BillDetailsFooterRoot = styled.div``;
-
-export const BillTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/BillDrawer/BillDetailTab.js

@@ -4,8 +4,8 @@ import { CommercialDocBox } from 'components';
 
 import BillDetailHeader from './BillDetailHeader';
 import BillDetailTable from './BillDetailTable';
-import { BillDetailFooter } from './BillDetailFooter';
+import { BillDetailTableFooter } from './BillDetailTableFooter';
-
+import BillDetailFooter from './BillDetailFooter';
 
 /**
  * Bill detail panel tab.
@@ -15,6 +15,7 @@ export default function BillDetailTab() {
     <CommercialDocBox>
       <BillDetailHeader />
       <BillDetailTable />
+      <BillDetailTableFooter />
       <BillDetailFooter />
     </CommercialDocBox>
   );

src/containers/Drawers/BillDrawer/BillDetailTableFooter.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+  T,
+  TotalLines,
+  TotalLine,
+} from '../../../components';
+import { useBillDrawerContext } from './BillDrawerProvider';
+
+/**
+ * Bill read-only details table footer.
+ */
+export function BillDetailTableFooter() {
+  const { bill } = useBillDrawerContext();
+
+  return (
+    <BillDetailsFooterRoot>
+      <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'bill.details.subtotal'} />}
+          value={<FormatNumber value={bill.amont} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'bill.details.total'} />}
+          value={bill.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'bill.details.payment_amount'} />}
+          value={bill.formatted_payment_amount}
+        />
+        <TotalLine
+          title={<T id={'bill.details.due_amount'} />}
+          value={bill.formatted_due_amount}
+        />
+      </BillTotalLines>
+    </BillDetailsFooterRoot>
+  );
+}
+
+export const BillDetailsFooterRoot = styled.div``;
+
+export const BillTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/BillDrawer/utils.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Intent, Tag } from '@blueprintjs/core';
+import {
-
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Intent,
+  Tag,
+} from '@blueprintjs/core';
 import {
   FormatNumberCell,
   FormattedMessage as T,
   Choose,
+  Icon,
 } from '../../../components';
 
 /**
@@ -73,7 +82,7 @@ export function BillDetailsStatus({ bill }) {
         <Choose>
           <Choose.When condition={bill.is_overdue}>
             <StatusTag intent={Intent.WARNING} round={true}>
-              Overdue
+              <T id={'overdue'} />
             </StatusTag>
           </Choose.When>
           <Choose.Otherwise>
@@ -92,6 +101,29 @@ export function BillDetailsStatus({ bill }) {
   );
 }
 
+export const BillMenuItem = ({ payload: { onConvert } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onConvert}
+            text={<T id={'convert_to_vendor_credit'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};
+
 const StatusTag = styled(Tag)`
   min-width: 65px;
   text-align: center;

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail footer
+ * @returns {React.JSX}
+ */
+export default function CreditNoteDetailFooter() {
+  const { creditNote } = useCreditNoteDetailDrawerContext();
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={creditNote.terms_conditions}>
+          <DetailItem label={<T id={'credit_note.drawer.terms_conditions'} />}>
+            {creditNote.terms_conditions}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js

@@ -4,7 +4,8 @@ import { CommercialDocBox } from 'components';
 
 import CreditNoteDetailHeader from './CreditNoteDetailHeader';
 import CreditNoteDetailTable from './CreditNoteDetailTable';
-import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+import CreditNoteDetailTableFooter from './CreditNoteDetailTableFooter';
+import CreditNoteDetailFooter from './CreditNoteDetailFooter';
 
 /**
  * Credit note details panel.
@@ -14,7 +15,8 @@ export default function CreditNoteDetailPanel() {
     <CommercialDocBox>
       <CreditNoteDetailHeader />
       <CreditNoteDetailTable />
-      <CreditNoteDetailDrawerFooter />
+      <CreditNoteDetailTableFooter />
+      <CreditNoteDetailFooter />
     </CommercialDocBox>
   );
 }

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.js

@@ -14,7 +14,7 @@ import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvid
 /**
  * Credit note details panel footer.
  */
-export default function CreditNoteDetailDrawerFooter() {
+export default function CreditNoteDetailTableFooter() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
 
   return (

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -1,43 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import {
+  CommercialDocFooter,
   T,
-  TotalLines,
+  If,
-  TotalLine,
+  DetailsMenu,
-  TotalLineBorderStyle,
+  DetailItem,
-  TotalLineTextStyle,
-  FormatNumber,
 } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
- * Estimate details panel footer content.
+ * Estimate details footer.
+ * @returns {React.JSX}
  */
 export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
   
   return (
-    <EstimateDetailsFooterRoot>
+    <CommercialDocFooter>
-      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={estimate.terms_conditions}>
-          title={<T id={'estimate.details.subtotal'} />}
+          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
-          value={<FormatNumber value={estimate.amount} />}
+            {estimate.terms_conditions}
-          borderStyle={TotalLineBorderStyle.SingleDark}
+          </DetailItem>
-        />
+        </If>
-        <TotalLine
+        <If condition={estimate.note}>
-          title={<T id={'estimate.details.total'} />}
+          <DetailItem label={<T id={'estimate.details.note'} />}>
-          value={estimate.formatted_amount}
+            {estimate.note}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
+          </DetailItem>
-          textStyle={TotalLineTextStyle.Bold}
+        </If>
-        />
+      </DetailsMenu>
-      </EstimateTotalLines>
+    </CommercialDocFooter>
-    </EstimateDetailsFooterRoot>
   );
 }
-
-export const EstimateDetailsFooterRoot = styled.div``;
-
-export const EstimateTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js

@@ -4,13 +4,16 @@ import { CommercialDocBox } from 'components';
 
 import EstimateDetailHeader from './EstimateDetailHeader';
 import EstimateDetailTable from './EstimateDetailTable';
+import EstimateDetailTableFooter from './EstimateDetailTableFooter';
 import EstimateDetailFooter from './EstimateDetailFooter';
 
+
 export default function EstimateDetailTab() {
   return (
     <CommercialDocBox>
       <EstimateDetailHeader />
       <EstimateDetailTable />
+      <EstimateDetailTableFooter />
       <EstimateDetailFooter />
     </CommercialDocBox>
   );

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate details panel footer content.
+ */
+export default function EstimateDetailTableFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'estimate.details.subtotal'} />}
+          value={<FormatNumber value={estimate.amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'estimate.details.total'} />}
+          value={estimate.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
+  );
+}
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js

@@ -5,7 +5,7 @@ export const useInventoryAdjustmentEntriesColumns = () =>
   React.useMemo(
     () => [
       {
-        Header: intl.get('product_and_service'),
+        Header: intl.get('inventory_adjustment.column.product'),
         accessor: 'item.name',
         width: 150,
         className: 'name',

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -14,7 +14,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Can, Icon, DrawerActionsBar, FormattedMessage as T } from 'components';
+import {
+  If,
+  Can,
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+} from 'components';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
@@ -48,6 +54,14 @@ function InvoiceDetailActionsBar({
     closeDrawer('invoice-detail-drawer');
   };
 
+  // Handle convert to invoice.
+  const handleConvertToCreitNote = () => {
+    history.push(`/credit-notes/new?from_invoice_id=${invoiceId}`, {
+      invoiceId: invoiceId,
+    });
+    closeDrawer('invoice-detail-drawer');
+  };
+
   // Handle delete sale invoice.
   const handleDeleteInvoice = () => {
     openAlert('invoice-delete', { invoiceId });
@@ -124,6 +138,7 @@ function InvoiceDetailActionsBar({
               onBadDebt: handleBadDebtInvoice,
               onCancelBadDebt: handleCancelBadDebtInvoice,
               onNotifyViaSMS: handleNotifyViaSMS,
+              onConvert: handleConvertToCreitNote,
             }}
           />
         </Can>

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -76,7 +76,7 @@ export const useInvoiceReadonlyEntriesColumns = () =>
  * @returns {React.JSX}
  */
 export const BadDebtMenuItem = ({
-  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
+  payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS, onConvert },
 }) => {
   const { invoice } = useInvoiceDetailDrawerContext();
 
@@ -104,6 +104,12 @@ export const BadDebtMenuItem = ({
               />
             </Choose.When>
           </Choose>
+          <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+            <MenuItem
+              onClick={onConvert}
+              text={<T id={'convert_to_credit_note'} />}
+            />
+          </Can>
           <Can I={SaleInvoiceAction.NotifyBySms} a={AbilitySubject.Invoice}>
             <MenuItem
               onClick={onNotifyViaSMS}
@@ -135,12 +141,12 @@ export function InvoiceDetailsStatus({ invoice }) {
         <Choose>
           <Choose.When condition={invoice.is_overdue}>
             <StatusTag intent={Intent.WARNING} round={true}>
-              Overdue
+              <T id={'overdue'} />
             </StatusTag>
           </Choose.When>
           <Choose.Otherwise>
             <StatusTag intent={Intent.PRIMARY} round={true}>
-              Delivered
+              <T id={'delivered'} />
             </StatusTag>
           </Choose.Otherwise>
         </Choose>

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import {
-  FormatNumber,
+  CommercialDocFooter,
-  TotalLineTextStyle,
-  TotalLineBorderStyle,
   T,
-  TotalLine,
+  If,
-  TotalLines,
+  DetailsMenu,
+  DetailItem,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -19,28 +17,14 @@ export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
   
   return (
-    <PaymentReceiveDetailsFooterRoot>
+    <CommercialDocFooter>
-      <PaymentReceiveTotalLines
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        labelColWidth={'180px'}
+        <If condition={paymentReceive.statement}>
-        amountColWidth={'180px'}
+          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
-      >
+            {paymentReceive.statement}
-        <TotalLine
+          </DetailItem>
-          title={<T id={'payment_receive.details.subtotal'} />}
+        </If>
-          value={<FormatNumber value={paymentReceive.amount} />}
+      </DetailsMenu>
-        />
+    </CommercialDocFooter>
-        <TotalLine
-          title={<T id={'payment_receive.details.total'} />}
-          value={paymentReceive.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-      </PaymentReceiveTotalLines>
-    </PaymentReceiveDetailsFooterRoot>
   );
 }
-
-export const PaymentReceiveDetailsFooterRoot = styled.div``;
-
-export const PaymentReceiveTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js

@@ -5,6 +5,7 @@ import { CommercialDocBox } from 'components';
 
 import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
 import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailTableFooter from './PaymentReceiveDetailTableFooter';
 import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
 
 /**
@@ -17,6 +18,7 @@ export default function PaymentReceiveDetailTab() {
       <CommercialDocBox>
         <PaymentReceiveDetailHeader />
         <PaymentReceiveDetailTable />
+        <PaymentReceiveDetailTableFooter />
         <PaymentReceiveDetailFooter />
       </CommercialDocBox>
     </PaymentReceiveDetailsTabPanelRoot>

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  FormatNumber,
+  TotalLineTextStyle,
+  TotalLineBorderStyle,
+  T,
+  TotalLine,
+  TotalLines,
+} from 'components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail table footer.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailTableFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <PaymentReceiveDetailsFooterRoot>
+      <PaymentReceiveTotalLines
+        labelColWidth={'180px'}
+        amountColWidth={'180px'}
+      >
+        <TotalLine
+          title={<T id={'payment_receive.details.subtotal'} />}
+          value={<FormatNumber value={paymentReceive.amount} />}
+        />
+        <TotalLine
+          title={<T id={'payment_receive.details.total'} />}
+          value={paymentReceive.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentReceiveTotalLines>
+    </PaymentReceiveDetailsFooterRoot>
+  );
+}
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js

@@ -1,51 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
-
 import {
+  CommercialDocFooter,
   T,
-  TotalLines,
+  If,
-  TotalLine,
+  DetailsMenu,
-  TotalLineBorderStyle,
+  DetailItem,
-  TotalLineTextStyle,
-  FormatNumber,
 } from 'components';
+
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 
 /**
- * Receipts read-only details footer.
+ * Receipt details footer
+ * @returns {React.JSX}
  */
-export function ReceiptDetailFooter() {
+export default function ReceiptDetailFooter() {
   const { receipt } = useReceiptDetailDrawerContext();
 
   return (
-    <ReceiptDetailsFooterRoot>
+    <CommercialDocFooter>
-      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={receipt.statement}>
-          title={<T id={'receipt.details.subtotal'} />}
+          <DetailItem label={<T id={'receipt.details.statement'} />}>
-          value={<FormatNumber value={receipt.amount} />}
+            {receipt.statement}
-        />
+          </DetailItem>
-        <TotalLine
+        </If>
-          title={<T id={'receipt.details.total'} />}
+        <If condition={receipt.receipt_message}>
-          value={receipt.formatted_amount}
+          <DetailItem label={<T id={'receipt.details.receipt_message'} />}>
-          borderStyle={TotalLineBorderStyle.DoubleDark}
+            {receipt.receipt_message}
-          textStyle={TotalLineTextStyle.Bold}
+          </DetailItem>
-        />
+        </If>
-        <TotalLine
+      </DetailsMenu>
-          title={<T id={'receipt.details.payment_amount'} />}
+    </CommercialDocFooter>
-          value={receipt.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-        />
-        <TotalLine
-          title={<T id={'receipt.details.due_amount'} />}
-          value={'0'}
-        />
-      </ReceiptTotalLines>
-    </ReceiptDetailsFooterRoot>
   );
 }
-
-export const ReceiptDetailsFooterRoot = styled.div``;
-
-export const ReceiptTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js

@@ -5,7 +5,8 @@ import { CommercialDocBox } from 'components';
 
 import ReceiptDetailHeader from './ReceiptDetailHeader';
 import ReceiptDetailTable from './ReceiptDetailTable';
-import { ReceiptDetailFooter } from './ReceiptDetailFooter';
+import ReceiptDetailTableFooter from './ReceiptDetailTableFooter';
+import ReceiptDetailFooter from './ReceiptDetailFooter';
 
 export default function ReceiptDetailTab() {
   return (
@@ -13,6 +14,7 @@ export default function ReceiptDetailTab() {
       <CommercialDocBox>
         <ReceiptDetailHeader />
         <ReceiptDetailTable />
+        <ReceiptDetailTableFooter />
         <ReceiptDetailFooter />
       </CommercialDocBox>
     </ReceiptDetailsOverviewRoot>

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+/**
+ * Receipts read-only details table footer.
+ */
+export default function ReceiptDetailTableFooter() {
+  const { receipt } = useReceiptDetailDrawerContext();
+
+  return (
+    <ReceiptDetailsFooterRoot>
+      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'receipt.details.subtotal'} />}
+          value={<FormatNumber value={receipt.amount} />}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.total'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.payment_amount'} />}
+          value={receipt.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+        />
+        <TotalLine
+          title={<T id={'receipt.details.due_amount'} />}
+          value={'0'}
+        />
+      </ReceiptTotalLines>
+    </ReceiptDetailsFooterRoot>
+  );
+}
+
+export const ReceiptDetailsFooterRoot = styled.div``;
+
+export const ReceiptTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -70,6 +70,11 @@ function BillsDataTable({
     history.push(`/bills/${bill.id}/edit`);
   };
 
+  // Handle convert to vendor credit.
+  const handleConvertToVendorCredit = ({ id }) => {
+    history.push(`/vendor-credits/new?from_bill_id=${id}`, { billId: id });
+  };
+
   // Handle bill delete action.
   const handleDeleteBill = (bill) => {
     openAlert('bill-delete', { billId: bill.id });
@@ -137,6 +142,7 @@ function BillsDataTable({
           onQuick: handleQuickPaymentMade,
           onAllocateLandedCost: handleAllocateLandedCost,
           onViewDetails: handleViewDetailBill,
+          onConvert: handleConvertToVendorCredit,
         }}
       />
     </DashboardContentTable>

src/containers/Purchases/Bills/BillsLanding/components.js

@@ -34,6 +34,7 @@ export function ActionsMenu({
     onOpen,
     onDelete,
     onQuick,
+    onConvert,
     onViewDetails,
     onAllocateLandedCost,
   },
@@ -53,6 +54,11 @@ export function ActionsMenu({
           text={intl.get('edit_bill')}
           onClick={safeCallback(onEdit, original)}
         />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('convert_to_vendor_credit')}
+          onClick={safeCallback(onConvert, original)}
+        />
 
         <If condition={!original.is_open}>
           <MenuItem

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { isEmpty } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
@@ -50,6 +50,7 @@ function VendorCreditNoteForm({
     isNewMode,
     submitPayload,
     vendorCredit,
+    bill,
     createVendorCreditMutate,
     editVendorCreditMutate,
   } = useVendorCreditNoteFormContext();
@@ -72,6 +73,9 @@ function VendorCreditNoteForm({
             ...(vendorcreditAutoIncrement && {
               vendor_credit_number: vendorCreditNumber,
             }),
+            ...transformToEditForm({
+              ...pick(bill, ['vendor_id', 'entries']),
+            }),
           }),
     }),
     [vendorCredit, base_currency],

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
+import { transformToEditForm } from './utils';
 import {
   useCreateVendorCredit,
   useEditVendorCredit,
@@ -8,6 +10,7 @@ import {
   useItems,
   useVendors,
   useSettingsVendorCredits,
+  useBill,
 } from 'hooks/query';
 
 const VendorCreditNoteFormContext = React.createContext();
@@ -16,6 +19,10 @@ const VendorCreditNoteFormContext = React.createContext();
  * Vendor Credit note data provider.
  */
 function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
+  const { state } = useLocation();
+  
+  const billId = state?.billId;
+
   // Handle fetching the items table based on the given query.
   const {
     data: { items },
@@ -39,6 +46,11 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
       enabled: !!vendorCreditId,
     });
 
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
 
@@ -56,6 +68,7 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
     vendorCredit,
     submitPayload,
     isNewMode,
+    bill,
 
     isVendorCreditLoading,
 
@@ -70,7 +83,8 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
         isVendorCreditLoading ||
         isItemsLoading ||
         isVendorsLoading ||
-        isVendorCreditLoading
+        isVendorCreditLoading ||
+        isBillLoading
       }
       name={'vendor-credit-form'}
     >

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js

@@ -56,6 +56,7 @@ function CreditNoteForm({
     isNewMode,
     submitPayload,
     creditNote,
+    newCreditNote,
     createCreditNoteMutate,
     editCreditNoteMutate,
   } = useCreditNoteFormContext();
@@ -74,6 +75,7 @@ function CreditNoteForm({
               credit_note_number: creditNumber,
             }),
             entries: orderingLinesIndexes(defaultCreditNote.entries),
+            ...newCreditNote,
           }),
     }),
     [],

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js

@@ -11,6 +11,7 @@ import {
   useItems,
   useCustomers,
   useSettingsCreditNotes,
+  useInvoice,
 } from 'hooks/query';
 
 const CreditNoteFormContext = React.createContext();
@@ -19,6 +20,9 @@ const CreditNoteFormContext = React.createContext();
  * Credit note data provider.
  */
 function CreditNoteFormProvider({ creditNoteId, ...props }) {
+  const { state } = useLocation();
+  const invoiceId = state?.invoiceId;
+
   // Handle fetch customers data table or list
   const {
     data: { customers },
@@ -33,13 +37,17 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     page_size: 10000,
   });
 
-  // Handle fetch vendor credit details.
+  // Handle fetch  credit details.
   const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
     creditNoteId,
     {
       enabled: !!creditNoteId,
     },
   );
+  // Handle fetch invoice detail.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
 
   // Handle fetching settings.
   useSettingsCreditNotes();
@@ -54,6 +62,12 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
   // Determines whether the form in new mode.
   const isNewMode = !creditNoteId;
 
+  const newCreditNote = !isEmpty(invoice)
+    ? transformToEditForm({
+        ...pick(invoice, ['customer_id', 'entries']),
+      })
+    : [];
+
   // Provider payload.
   const provider = {
     items,
@@ -61,6 +75,7 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     creditNote,
     submitPayload,
     isNewMode,
+    newCreditNote,
 
     isItemsLoading,
     isCustomersLoading,
@@ -70,11 +85,14 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
     setSubmitPayload,
   };
 
+  const isLoading =
+    isItemsLoading ||
+    isCustomersLoading ||
+    isCreditNoteLoading ||
+    isInvoiceLoading;
+
   return (
-    <DashboardInsider
+    <DashboardInsider loading={isLoading} name={'credit-note-form'}>
-      loading={isItemsLoading || isCustomersLoading || isCreditNoteLoading}
-      name={'credit-note-form'}
-    >
       <CreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -74,6 +74,11 @@ function InvoicesDataTable({
     history.push(`/invoices/${invoice.id}/edit`);
   };
 
+  // Handle convert to credit note.
+  const handleConvertToCreitNote = ({ id }) => {
+    history.push(`/credit-notes/new?from_invoice_id=${id}`, { invoiceId: id });
+  };
+
   // handle quick payment receive.
   const handleQuickPaymentReceive = ({ id }) => {
     openDialog('quick-payment-receive', { invoiceId: id });
@@ -147,6 +152,7 @@ function InvoicesDataTable({
           onQuick: handleQuickPaymentReceive,
           onViewDetails: handleViewDetailInvoice,
           onPrint: handlePrintInvoice,
+          onConvert: handleConvertToCreitNote,
         }}
       />
     </DashboardContentTable>

src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -124,7 +124,7 @@ export function ActionsMenu({
     onEdit,
     onDeliver,
     onDelete,
-    onDrawer,
+    onConvert,
     onQuick,
     onViewDetails,
     onPrint,
@@ -145,6 +145,11 @@ export function ActionsMenu({
           text={intl.get('edit_invoice')}
           onClick={safeCallback(onEdit, original)}
         />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
 
         <If condition={!original.is_delivered}>
           <MenuItem

src/lang/ar/index.json

@@ -1659,8 +1659,11 @@
   "transactions": "معاملات ",
   "item.drawer_transactions_by": "معاملات حسب :",
   "item.drawer_quantity_sold": "الكمية المباعة",
-  "journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك "
+  "journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك ",
-
+  "inventory_adjustment.column.product":"المنتج",
+  "convert_to_credit_note":"تحويل إلى إشعار الدائن",
+  "convert_to_vendor_credit":"تحويل إلى إشعار المدين",
+  "overdue":"Overdue"
 }
 
 

src/lang/en/index.json

@@ -1195,6 +1195,7 @@
   "payment_receive.details.payment_number": "Payment #",
   "payment_receive.details.total": "TOTAL",
   "payment_receive.details.subtotal": "Subtotal",
+  "payment_receive.details.statement": "Statement",
   "estimate.details.estimate_number": "Estimate #",
   "estimate.details.subtotal": "Subtotal",
   "estimate.details.total": "TOTAL",
@@ -1202,12 +1203,15 @@
   "estimate.details.due_amount": "Due amount",
   "estimate.details.note": "Note",
   "estimate.details.created_at": "Created at",
+  "estimate.details.terms_conditions": "Terms & Conditions",
   "receipt.details.receipt_number": "Receipt #",
   "receipt.details.subtotal": "Subtotal",
   "receipt.details.total": "TOTAL",
   "receipt.details.payment_amount": "Payment amount",
   "receipt.details.due_amount": "Due amount",
   "receipt.details.created_at": "Created at",
+  "receipt.details.receipt_message": "Receipt Message",
+  "receipt.details.statement": "Statement",
   "invoice.details.created_at": "Created at",
   "invoice.details.total": "TOTAL",
   "invoice.details.subtotal": "Subtotal",
@@ -1523,6 +1527,7 @@
   "credit_note.drawer.label_subtotal": "Subtotal",
   "credit_note.drawer.label_refund_transactions": "Refund Transactions",
   "credit_note.drawer.label_invoices_reconciled": "Invoices Reconciled",
+  "credit_note.drawer.terms_conditions": "Terms Conditions",
  
   "sidebar_vendor_credits": "Vendor Credits",
   "vendor_credits.lable_vendor_credit_list": "Vendor Credits List",
@@ -1655,5 +1660,10 @@
   "item.drawer_transactions_by": "Transactions by:",
   "item.drawer_quantity_sold": "Quantity Sold",
   "role_name": "Role name",
-  "journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency"
+  "journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency",
+  "inventory_adjustment.column.product":"Product",
+  "convert_to_credit_note":"Convert to Credit Note",
+  "convert_to_vendor_credit":"Convert to Vendor Credit",
+  "overdue":"Overdue"
+  
 }

src/routes/dashboard.js

@@ -646,6 +646,21 @@ export const getDashboardRoutes = () => [
     defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+  {
+    path: `/credit-notes/new/?from_invoice_id=/:id`,
+    component: lazy(() =>
+      import(
+        '../containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormPage'
+      ),
+    ),
+    name: 'credit-note-new',
+    breadcrumb: intl.get('credit_note.label.new_credit_note'),
+    backLink: true,
+    sidebarExpand: false,
+    pageTitle: intl.get('credit_note.label.new_credit_note'),
+    defaultSearchResource: RESOURCES_TYPES.CREDIT_NOTE,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
   {
     path: '/credit-notes/new',
     component: lazy(() =>
@@ -773,6 +788,21 @@ export const getDashboardRoutes = () => [
     defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+  {
+    path: '/vendor-credits/new/?from_bill_id=/:id',
+    component: lazy(() =>
+      import(
+        'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
+      ),
+    ),
+    name: 'vendor-credits-new',
+    backLink: true,
+    sidebarExpand: false,
+    breadcrumb: intl.get('vendor_credits.label.new_vendor_credit'),
+    pageTitle: intl.get('vendor_credits.label.new_vendor_credit'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
   {
     path: '/vendor-credits/new',
     component: lazy(() =>