fix: BIG-352 Add terms and conditions/notes field to a warehouse transfer.

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.js

@@ -3,24 +3,28 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
+/**
+ * Payment made form footer left-side.
+ * @returns {JSX.Element}
+ */
 export function PaymentMadeFormFooterLeft() {
   return (
     <React.Fragment>
-      {/* --------- Statement--------- */}
-      <StatementFormGroup
-        name={'statement'}
-        label={<T id={'payment_made_form.label.statement'} />}
-        hintText={'Will be displayed on the Payment'}
+      {/* --------- Internal Note--------- */}
+      <InternalNoteFormGroup
+        name={'internal_note'}
+        label={<T id={'payment_made.form.internal_note.label'} />}
       >
         <FEditableText
-          name={'statement'}
-          placeholder={intl.get('payment_made_form.statement.placeholder')}
+          name={'internal_note'}
+          placeholder={intl.get('payment_made.form.internal_note.placeholder')}
         />
-      </StatementFormGroup>
+      </InternalNoteFormGroup>
     </React.Fragment>
   );
 }
-const StatementFormGroup = styled(FFormGroup)`
+
+const InternalNoteFormGroup = styled(FFormGroup)`
   &.bp3-form-group {
     margin-bottom: 40px;
 

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js

@@ -103,7 +103,7 @@ function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) {
     <DashboardInsider
       loading={
         isVendorsLoading ||
-        isItemsFetching ||
+        isItemsLoading ||
         isAccountsLoading ||
         isPaymentLoading
       }

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

@@ -10,7 +10,6 @@ export function CreditNoteFormFooterLeft() {
       <CreditNoteMsgFormGroup
         name={'note'}
         label={<T id={'credit_note.label_customer_note'} />}
-        hintText={'Will be displayed on the invoice'}
       >
         <FEditableText
           name={'note'}
@@ -24,9 +23,9 @@ export function CreditNoteFormFooterLeft() {
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={
-            <T id={'credit_note.label_terms_and_conditions.placeholder'} />
-          }
+          placeholder={intl.get(
+            'credit_note.label_terms_and_conditions.placeholder',
+          )}
         />
       </TermsConditsFormGroup>
     </React.Fragment>

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.js

@@ -10,7 +10,6 @@ export function InvoiceFormFooterLeft() {
       <InvoiceMsgFormGroup
         name={'invoice_message'}
         label={<T id={'invoice_message'} />}
-        hintText={'Will be displayed on the invoice'}
       >
         <FEditableText
           name={'invoice_message'}
@@ -20,7 +19,7 @@ export function InvoiceFormFooterLeft() {
 
       {/* --------- Terms and conditions --------- */}
       <TermsConditsFormGroup
-        label={<T id={'invoice_form.label.invoice_message'} />}
+        label={<T id={'invoice_form.label.terms_conditions'} />}
         name={'terms_conditions'}
       >
         <FEditableText

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.js

@@ -7,14 +7,24 @@ export function PaymentReceiveFormFootetLeft() {
   return (
     <React.Fragment>
       {/* --------- Statement--------- */}
-      <TermsConditsFormGroup
-        name={'statement'}
-        label={<T id={'payment_receive_form.label.statement'} />}
-        hintText={'Will be displayed on the Payment'}
+      <PaymentMsgFormGroup
+        name={'message'}
+        label={<T id={'payment_receive_form.message.label'} />}
       >
         <FEditableText
-          name={'statement'}
-          placeholder={intl.get('payment_receive_form.statement.placeholder')}
+          name={'message'}
+          placeholder={intl.get('payment_receive_form.message.placeholder')}
+        />
+      </PaymentMsgFormGroup>
+
+      {/* --------- Internal Note--------- */}
+      <TermsConditsFormGroup
+        name={'internal_note'}
+        label={<T id={'payment_receive_form.label.internal_note'} />}
+      >
+        <FEditableText
+          name={'internal_note'}
+          placeholder={intl.get('payment_receive_form.internal_note.placeholder')}
         />
       </TermsConditsFormGroup>
     </React.Fragment>
@@ -32,3 +42,17 @@ const TermsConditsFormGroup = styled(FFormGroup)`
     }
   }
 `;
+
+const PaymentMsgFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
 export function WarehouseTransferFormFooterLeft() {
@@ -7,14 +8,12 @@ export function WarehouseTransferFormFooterLeft() {
     <React.Fragment>
       {/* --------- Terms and conditions --------- */}
       <TermsConditsFormGroup
-        label={<T id={'terms_conditions'} />}
+        label={<T id={'warehouse_transfer.form.reason.label'} />}
         name={'reason'}
       >
         <FEditableText
           name={'reason'}
-          placeholder={
-            'Enter the terms and conditions of your business to be displayed in your transaction'
-          }
+          placeholder={intl.get('warehouse_transfer.form.reason.placeholder')}
         />
       </TermsConditsFormGroup>
     </React.Fragment>

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeader.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import { useFormikContext  } from 'formik';
-import intl from 'react-intl-universal';
 import { CLASSES } from 'common/classes';
 
 import WarehouseTransferFormHeaderFields from './WarehouseTransferFormHeaderFields';

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.js

@@ -183,20 +183,6 @@ function WarehouseTransferFormHeaderFields({
           </FormGroup>
         )}
       </FastField>
-      {/*------------ reason -----------*/}
-      <FastField name={'reason'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reason'} />}
-            className={'form-group--reason'}
-            intent={inputIntent({ error, touched })}
-            inline={true}
-            helperText={<ErrorMessage name={'reason'} />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
     </div>
   );
 }