fix: Multi-lines transactions statements

packages/webapp/src/components/Details/index.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 
 import '@/style/components/Details.scss';
 
@@ -24,7 +24,7 @@ export function DetailsMenu({
 }) {
   return (
     <div
-      className={classNames(
+      className={clsx(
         'details-menu',
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
@@ -44,16 +44,24 @@ export function DetailsMenu({
 /**
  * Detail item.
  */
-export function DetailItem({ label, children, name, align, className }) {
+export function DetailItem({
+  label,
+  children,
+  name,
+  align,
+  multiline,
+  className,
+}) {
   const { minLabelSize } = useDetailsMenuContext();
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'detail-item',
         {
           [`detail-item--${name}`]: name,
           [`align-${align}`]: align,
+          [`detail-item--multilines`]: multiline,
         },
         className,
       )}
@@ -66,7 +74,7 @@ export function DetailItem({ label, children, name, align, className }) {
       >
         {label}
       </div>
-      <div>{children}</div>
+      <div className={clsx('detail-item__content')}>{children}</div>
     </div>
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function MakeJournalFormFooterLeft() {
         <FEditableText
           name={'description'}
           placeholder={intl.get('make_jorunal.decscrption.placeholder')}
+          multiline
+          fastField
         />
       </DescriptionFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Drawers/BillDrawer/BillDetailFooter.tsx

@@ -20,7 +20,9 @@ export default function BillDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={bill.note}>
-          <DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
+          <DetailItem label={<T id={'note'} />} multiline>
+            {bill.note}
+          </DetailItem>
         </If>
       </DetailsMenu>
     </CommercialDocFooter>

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx

@@ -9,7 +9,10 @@ export function CashflowTransactionDrawerFooter() {
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <DetailItem label={<T id={'cash_flow.drawer.label.statement'} />}>
+        <DetailItem
+          label={<T id={'cash_flow.drawer.label.statement'} />}
+          multiline
+        >
           {cashflowTransaction.description}
         </DetailItem>
       </DetailsMenu>

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx

@@ -21,11 +21,15 @@ export default function CreditNoteDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={creditNote.terms_conditions}>
-          <DetailItem label={<T id={'note'} />} children={creditNote.note} />
+          <DetailItem
+            label={<T id={'note'} />}
+            children={creditNote.note}
+            multiline
+          />
         </If>
 
         <If condition={creditNote.terms_conditions}>
-          <DetailItem label={<T id={'terms_conditions'} />}>
+          <DetailItem label={<T id={'terms_conditions'} />} multiline>
             {creditNote.terms_conditions}
           </DetailItem>
         </If>

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx

@@ -16,17 +16,20 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
  */
 export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
-  
+
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={estimate.terms_conditions}>
-          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
+          <DetailItem
+            label={<T id={'estimate.details.terms_conditions'} />}
+            multiline
+          >
             {estimate.terms_conditions}
           </DetailItem>
         </If>
         <If condition={estimate.note}>
-          <DetailItem label={<T id={'estimate.details.note'} />}>
+          <DetailItem label={<T id={'estimate.details.note'} />} multiline>
             {estimate.note}
           </DetailItem>
         </If>

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx

@@ -23,13 +23,16 @@ export function InvoiceDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={invoice.terms_conditions}>
-          <DetailItem label={<T id={'terms_conditions'} />}>
+          <DetailItem label={<T id={'terms_conditions'} />} multiline>
             {invoice.terms_conditions}
           </DetailItem>
         </If>
 
         <If condition={invoice.invoice_message}>
-          <DetailItem label={<T id={'invoice.details.invoice_message'} />}>
+          <DetailItem
+            label={<T id={'invoice.details.invoice_message'} />}
+            multiline
+          >
             {invoice.invoice_message}
           </DetailItem>
         </If>

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx

@@ -20,7 +20,10 @@ export function PaymentMadeDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={paymentMade.statement}>
-          <DetailItem label={<T id={'payment_made.details.statement'} />}>
+          <DetailItem
+            label={<T id={'payment_made.details.statement'} />}
+            multiline
+          >
             {paymentMade.statement}
           </DetailItem>
         </If>

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx

@@ -16,12 +16,15 @@ import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
  */
 export default function PaymentReceiveDetailFooter() {
   const { paymentReceive } = usePaymentReceiveDetailContext();
-  
+
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={paymentReceive.statement}>
-          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
+          <DetailItem
+            label={<T id={'payment_receive.details.statement'} />}
+            multiline
+          >
             {paymentReceive.statement}
           </DetailItem>
         </If>

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

@@ -21,12 +21,15 @@ export default function ReceiptDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
         <If condition={receipt.statement}>
-          <DetailItem label={<T id={'receipt.details.statement'} />}>
+          <DetailItem label={<T id={'receipt.details.statement'} />} multiline>
             {receipt.statement}
           </DetailItem>
         </If>
         <If condition={receipt.receipt_message}>
-          <DetailItem label={<T id={'receipt.details.receipt_message'} />}>
+          <DetailItem
+            label={<T id={'receipt.details.receipt_message'} />}
+            multiline
+          >
             {receipt.receipt_message}
           </DetailItem>
         </If>

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.tsx

@@ -16,7 +16,11 @@ export function VendorCreditDetailFooter() {
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'150px'}>
         <If condition={vendorCredit.note}>
-          <DetailItem label={<T id={'note'} />} children={vendorCredit.note} />
+          <DetailItem
+            label={<T id={'note'} />}
+            children={vendorCredit.note}
+            multiline
+          />
         </If>
       </DetailsMenu>
     </CommercialDocFooter>

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx

@@ -14,6 +14,8 @@ export function ExpenseFormFooterLeft() {
         <FEditableText
           name={'description'}
           placeholder={<T id={'expenses.decscrption.placeholder'} />}
+          multiline
+          fastField
         />
       </DescriptionFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function BillFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('bill_form.label.note.placeholder')}
+          fastField
+          multiline
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function VendorCreditNoteFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('vendor_credit_form.note.placeholder')}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx

@@ -20,7 +20,8 @@ export function PaymentMadeFormFooterLeft() {
         <FEditableText
           name={'statement'}
           placeholder={intl.get('payment_made.form.internal_note.placeholder')}
-          fastField={true}
+          fastField
+          multiline
         />
       </InternalNoteFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function CreditNoteFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('credit_note.label_customer_note.placeholder')}
+          multiline
+          fastField
         />
       </CreditNoteMsgFormGroup>
       {/* --------- Terms and conditions --------- */}
@@ -27,6 +29,8 @@ export function CreditNoteFormFooterLeft() {
           placeholder={intl.get(
             'credit_note.label_terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx

@@ -16,6 +16,8 @@ export function EstimateFormFooterLeft() {
         <FEditableText
           name={'note'}
           placeholder={intl.get('estimate_form.customer_note.placeholder')}
+          multiline
+          fastField
         />
       </EstimateMsgFormGroup>
 
@@ -26,7 +28,11 @@ export function EstimateFormFooterLeft() {
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={intl.get('estimate_form.terms_and_conditions.placeholder')}
+          placeholder={intl.get(
+            'estimate_form.terms_and_conditions.placeholder',
+          )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function InvoiceFormFooterLeft() {
         <FEditableText
           name={'invoice_message'}
           placeholder={intl.get('invoice_form.invoice_message.placeholder')}
+          fastField
+          multiline
         />
       </InvoiceMsgFormGroup>
 
@@ -28,6 +30,8 @@ export function InvoiceFormFooterLeft() {
           placeholder={intl.get(
             'invoice_form.terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx

@@ -18,7 +18,8 @@ export function PaymentReceiveFormFootetLeft() {
           placeholder={intl.get(
             'payment_receive_form.internal_note.placeholder',
           )}
-          fastField={true}
+          fastField
+          multiline
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx

@@ -16,6 +16,8 @@ export function ReceiptFormFooterLeft() {
         <FEditableText
           name={'receipt_message'}
           placeholder={intl.get('receipt_form.receipt_message.placeholder')}
+          multiline
+          fastField
         />
       </ReceiptMsgFormGroup>
 
@@ -29,6 +31,8 @@ export function ReceiptFormFooterLeft() {
           placeholder={intl.get(
             'receipt_form.terms_and_conditions.placeholder',
           )}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx

@@ -15,6 +15,8 @@ export function WarehouseTransferFormFooterLeft() {
         <FEditableText
           name={'reason'}
           placeholder={intl.get('warehouse_transfer.form.reason.placeholder')}
+          multiline
+          fastField
         />
       </TermsConditsFormGroup>
     </React.Fragment>

packages/webapp/src/style/components/Details.scss

@@ -48,6 +48,13 @@
     &__content {
       text-transform: capitalize;
     }
+
+    &.detail-item--multilines{
+
+      .detail-item__content{
+        white-space: pre-line;
+      }
+    }
   }
 
   + .details-menu{