Fix: sales.

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
@@ -13,19 +14,19 @@ export function CreditNoteFormFooterLeft() {
       >
         <FEditableText
           name={'note'}
-          placeholder={
+          placeholder={intl.get('credit_note.label_customer_note.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </CreditNoteMsgFormGroup>
       {/* --------- Terms and conditions --------- */}
       <TermsConditsFormGroup
-        label={<T id={'terms_conditions'} />}
+        label={<T id={'credit_note.label_terms_conditions'} />}
         name={'terms_conditions'}
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={<T id={'terms_and_conditions.placeholder'} />}
+          placeholder={
+            <T id={'credit_note.label_terms_and_conditions.placeholder'} />
+          }
         />
       </TermsConditsFormGroup>
     </React.Fragment>

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

@@ -15,14 +15,13 @@ export function CreditNoteFormFooterRight() {
   return (
     <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'credit_note.drawer.label_subtotal'} />}
+        title={<T id={'credit_note.label_subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'credit_note.drawer.label_total'} />}
+        title={<T id={'credit_note.label_total'} />}
         value={formattedTotal}
-        // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
     </CreditNoteTotalLines>

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

@@ -93,19 +93,17 @@ function CreditNoteFormHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ControlCustomerGroup>
+            <CustomerSelectField
-              <CustomerSelectField
+              contacts={customers}
-                contacts={customers}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
-                defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
-                onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
-                  form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('currency_code', customer?.currency_code);
-                  form.setFieldValue('currency_code', customer?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
-            </ControlCustomerGroup>
             {value && (
               <CustomerButtonLink customerId={value}>
                 <T id={'view_customer_details'} />
@@ -210,11 +208,6 @@ export default compose(
   })),
 )(CreditNoteFormHeaderFields);
 
-const ControlCustomerGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -5,27 +5,17 @@ import '../../../../style/pages/CreditNote/PageForm.scss';
 
 import CreditNoteForm from './CreditNoteForm';
 import { CreditNoteFormProvider } from './CreditNoteFormProvider';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
 
 /**
  * Credit note form page.
  */
-function CreditNoteFormPage({
+export default function CreditNoteFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <CreditNoteFormProvider
+    <CreditNoteFormProvider creditNoteId={idAsInteger}>
-      creditNoteId={idAsInteger}
-      baseCurrency={base_currency}
-    >
       <CreditNoteForm />
     </CreditNoteFormProvider>
   );
 }
-
-export default compose(withCurrentOrganization())(CreditNoteFormPage);

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

@@ -23,7 +23,7 @@ const CreditNoteFormContext = React.createContext();
 /**
  * Credit note data provider.
  */
-function CreditNoteFormProvider({ creditNoteId, baseCurrency, ...props }) {
+function CreditNoteFormProvider({ creditNoteId, ...props }) {
   const { state } = useLocation();
   const invoiceId = state?.invoiceId;
 
@@ -82,8 +82,6 @@ function CreditNoteFormProvider({ creditNoteId, baseCurrency, ...props }) {
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
 
-  const [selectCustomer, setSelectCustomer] = React.useState(null);
-
   // Determines whether the form in new mode.
   const isNewMode = !creditNoteId;
 
@@ -96,10 +94,6 @@ function CreditNoteFormProvider({ creditNoteId, baseCurrency, ...props }) {
       })
     : [];
 
-  // Determines whether the foreign customer.
-  const isForeignCustomer =
-    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
-    !isUndefined(selectCustomer?.currency_code);
 
   // Provider payload.
   const provider = {
@@ -108,13 +102,9 @@ function CreditNoteFormProvider({ creditNoteId, baseCurrency, ...props }) {
     creditNote,
     branches,
     warehouses,
-    submitPayload,
+    submitPayload, 
-    baseCurrency,
-    selectCustomer,
-    setSelectCustomer,
     isNewMode,
     newCreditNote,
-    isForeignCustomer,
 
     isItemsLoading,
     isCustomersLoading,

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

@@ -94,7 +94,7 @@ function CreditFormSelectWarehouse() {
 function CreditNoteWarehouseSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
+      text={intl.get('credit_note.warehouse_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'warehouse-16'} iconSize={16} />}
@@ -105,7 +105,7 @@ function CreditNoteWarehouseSelectButton({ label }) {
 function CreditNoteBranchSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.branch_button.label', { label })}
+      text={intl.get('credit_note.branch_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'branch-16'} iconSize={16} />}

src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
@@ -8,25 +9,23 @@ export function EstimateFormFooterLeft() {
       {/* --------- Customer Note --------- */}
       <EstimateMsgFormGroup
         name={'note'}
-        label={<T id={'customer_note'} />}
+        label={<T id={'estimate_form.label.customer_note'} />}
         hintText={'Will be displayed on the invoice'}
       >
         <FEditableText
           name={'note'}
-          placeholder={
+          placeholder={intl.get('estimate_form.customer_note.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </EstimateMsgFormGroup>
 
       {/* --------- Terms and conditions --------- */}
       <TermsConditsFormGroup
-        label={<T id={'terms_conditions'} />}
+        label={<T id={'estimate_form.label.terms_conditions'} />}
         name={'terms_conditions'}
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={<T id={'terms_and_conditions.placeholder'} />}
+          placeholder={intl.get('estimate_form.terms_and_conditions.placeholder')}
         />
       </TermsConditsFormGroup>
     </React.Fragment>

src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.js

@@ -10,20 +10,18 @@ import {
 import { useEstimateTotals } from './utils';
 
 export function EstimateFormFooterRight() {
-  
   const { formattedSubtotal, formattedTotal } = useEstimateTotals();
 
   return (
     <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'estimate.details.subtotal'} />}
+        title={<T id={'estimate_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'estimate.details.total'} />}
+        title={<T id={'estimate_form.label.total'} />}
         value={formattedTotal}
-        // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
     </EstimateTotalLines>

src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -85,20 +85,19 @@ function EstimateFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ControlCustomerGroup>
+            <CustomerSelectField
-              <CustomerSelectField
+              contacts={customers}
-                contacts={customers}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
-                defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
-                onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
-                  form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('currency_code', customer?.currency_code);
-                  form.setFieldValue('currency_code', customer?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              intent={inputIntent({ error, touched })}
-                intent={inputIntent({ error, touched })}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlCustomerGroup>
             {value && (
               <CustomerButtonLink customerId={value}>
                 <T id={'view_customer_details'} />
@@ -233,12 +232,6 @@ export default compose(
   })),
 )(EstimateFormHeader);
 
-const ControlCustomerGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js

@@ -5,23 +5,17 @@ import 'style/pages/SaleEstimate/PageForm.scss';
 
 import EstimateForm from './EstimateForm';
 import { EstimateFormProvider } from './EstimateFormProvider';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
 
 /**
  * Estimate form page.
  */
-function EstimateFormPage({
+export default function EstimateFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const idInteger = parseInt(id, 10);
 
   return (
-    <EstimateFormProvider estimateId={idInteger} baseCurrency={base_currency}>
+    <EstimateFormProvider estimateId={idInteger}>
       <EstimateForm />
     </EstimateFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(EstimateFormPage);

src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.js

@@ -21,7 +21,7 @@ const EstimateFormContext = createContext();
 /**
  * Estimate form provider.
  */
-function EstimateFormProvider({ query, estimateId, baseCurrency, ...props }) {
+function EstimateFormProvider({ query, estimateId, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
@@ -69,7 +69,6 @@ function EstimateFormProvider({ query, estimateId, baseCurrency, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
-  const [selectCustomer, setSelectCustomer] = React.useState(null);
 
   // Create and edit estimate form.
   const { mutateAsync: createEstimateMutate } = useCreateEstimate();
@@ -80,11 +79,6 @@ function EstimateFormProvider({ query, estimateId, baseCurrency, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
-  // Determines whether the foreign customer.
-  const isForeignCustomer =
-    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
-    !isUndefined(selectCustomer?.currency_code);
-
   // Provider payload.
   const provider = {
     estimateId,
@@ -104,12 +98,8 @@ function EstimateFormProvider({ query, estimateId, baseCurrency, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    isForeignCustomer,
     submitPayload,
     setSubmitPayload,
-    selectCustomer,
-    setSelectCustomer,
-    baseCurrency,
 
     createEstimateMutate,
     editEstimateMutate,

src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js

@@ -95,7 +95,7 @@ function EstimateFormSelectWarehouse() {
 function EstimateWarehouseSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
+      text={intl.get('estimate.warehouse_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'warehouse-16'} iconSize={16} />}
@@ -106,7 +106,7 @@ function EstimateWarehouseSelectButton({ label }) {
 function EstimateBranchSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.branch_button.label', { label })}
+      text={intl.get('estimate.branch_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'branch-16'} iconSize={16} />}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
@@ -13,20 +14,20 @@ export function InvoiceFormFooterLeft() {
       >
         <FEditableText
           name={'invoice_message'}
-          placeholder={
+          placeholder={intl.get('invoice_form.invoice_message.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </InvoiceMsgFormGroup>
 
       {/* --------- Terms and conditions --------- */}
       <TermsConditsFormGroup
-        label={<T id={'terms_conditions'} />}
+        label={<T id={'invoice_form.label.invoice_message'} />}
         name={'terms_conditions'}
       >
         <FEditableText
           name={'terms_conditions'}
-          placeholder={<T id={'terms_and_conditions.placeholder'} />}
+          placeholder={intl.get(
+            'invoice_form.terms_and_conditions.placeholder',
+          )}
         />
       </TermsConditsFormGroup>
     </React.Fragment>

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

@@ -22,23 +22,23 @@ export function InvoiceFormFooterRight() {
   return (
     <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'invoice.details.subtotal'} />}
+        title={<T id={'invoice_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'invoice.details.total'} />}
+        title={<T id={'invoice_form.label.total'} />}
         value={formattedTotal}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
       <TotalLine
-        title={<T id={'invoice.details.payment_amount'} />}
+        title={<T id={'invoice_form.label.payment_amount'} />}
         value={formattedPaymentTotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'invoice.details.due_amount'} />}
+        title={<T id={'invoice_form.label.due_amount'} />}
         value={formattedDueTotal}
         textStyle={TotalLineTextStyle.Bold}
       />

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

@@ -92,19 +92,18 @@ function InvoiceFormHeaderFields({
             )}
             labelInfo={<FieldRequiredHint />}
           >
-            <ControlCustomerGroup>
+            <CustomerSelectField
-              <CustomerSelectField
+              contacts={customers}
-                contacts={customers}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
-                defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
-                onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
-                  form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('currency_code', customer?.currency_code);
-                  form.setFieldValue('currency_code', customer?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlCustomerGroup>
             {value && (
               <CustomerButtonLink customerId={value}>
                 <T id={'view_customer_details'} />
@@ -240,12 +239,6 @@ export default compose(
   })),
 )(InvoiceFormHeaderFields);
 
-const ControlCustomerGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -5,23 +5,17 @@ import 'style/pages/SaleInvoice/PageForm.scss';
 
 import InvoiceForm from './InvoiceForm';
 import { InvoiceFormProvider } from './InvoiceFormProvider';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
 
 /**
  * Invoice form page.
  */
-function InvoiceFormPage({
+export default function InvoiceFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <InvoiceFormProvider invoiceId={idAsInteger} baseCurrency={base_currency}>
+    <InvoiceFormProvider invoiceId={idAsInteger}>
       <InvoiceForm />
     </InvoiceFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(InvoiceFormPage);

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

@@ -85,7 +85,6 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState();
-  const [selectCustomer, setSelectCustomer] = useState(null);
 
   // Detarmines whether the form in new mode.
   const isNewMode = !invoiceId;
@@ -93,9 +92,6 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
-  // Determines whether the foreign customer.
-  const isForeignCustomer = true;
-
   const provider = {
     invoice,
     items,
@@ -104,8 +100,6 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
     estimateId,
     invoiceId,
     submitPayload,
-    selectCustomer,
-    baseCurrency,
     branches,
     warehouses,
 
@@ -116,14 +110,12 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
     isWarehouesLoading,
     isBranchesLoading,
     isFeatureLoading,
-    isForeignCustomer,
     isBranchesSuccess,
     isWarehousesSuccess,
 
     createInvoiceMutate,
     editInvoiceMutate,
     setSubmitPayload,
-    setSelectCustomer,
     isNewMode,
   };
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
@@ -8,14 +9,12 @@ export function PaymentReceiveFormFootetLeft() {
       {/* --------- Statement--------- */}
       <TermsConditsFormGroup
         name={'statement'}
-        label={<T id={'statement'} />}
+        label={<T id={'payment_receive_form.label.statement'} />}
         hintText={'Will be displayed on the Payment'}
       >
         <FEditableText
           name={'statement'}
-          placeholder={
+          placeholder={intl.get('payment_receive_form.statement.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </TermsConditsFormGroup>
     </React.Fragment>

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

@@ -15,14 +15,13 @@ export function PaymentReceiveFormFootetRight() {
   return (
     <PaymentReceiveTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'estimate.details.subtotal'} />}
+        title={<T id={'payment_receive_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'estimate.details.total'} />}
+        title={<T id={'payment_receive_form.label.total'} />}
         value={formattedTotal}
-        // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
     </PaymentReceiveTotalLines>

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

@@ -3,25 +3,17 @@ import { useParams } from 'react-router-dom';
 
 import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
 import PaymentReceiveForm from './PaymentReceiveForm';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
-import { compose } from 'utils';
 /**
  * Payment receive form page.
  */
-function PaymentReceiveFormPage({
+export default function PaymentReceiveFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id: paymentReceiveId } = useParams();
   const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
 
   return (
-    <PaymentReceiveFormProvider
+    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
-      paymentReceiveId={paymentReceiveIdInt}
-      baseCurrency={base_currency}
-    >
       <PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
     </PaymentReceiveFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(PaymentReceiveFormPage);

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import {isEqual, isUndefined } from 'lodash';
+import { isEqual, isUndefined } from 'lodash';
 import { Features } from 'common';
 import { useFeatureCan } from 'hooks/state';
 import { DashboardInsider } from 'components';
@@ -19,17 +19,10 @@ const PaymentReceiveFormContext = createContext();
 /**
  * Payment receive form provider.
  */
-function PaymentReceiveFormProvider({
+function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
-  query,
-  paymentReceiveId,
-  baseCurrency,
-  ...props
-}) {
   // Form state.
   const [submitPayload, setSubmitPayload] = React.useState({});
 
-  const [selectCustomer, setSelectCustomer] = React.useState(null);
-
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
@@ -73,11 +66,6 @@ function PaymentReceiveFormProvider({
   const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
   const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
 
-  // Determines whether the foreign customer.
-  const isForeignCustomer =
-    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
-    !isUndefined(selectCustomer?.currency_code);
-
   // Provider payload.
   const provider = {
     paymentReceiveId,
@@ -86,7 +74,6 @@ function PaymentReceiveFormProvider({
     accounts,
     customers,
     branches,
-    baseCurrency,
 
     isPaymentLoading,
     isAccountsLoading,
@@ -94,13 +81,10 @@ function PaymentReceiveFormProvider({
     isCustomersLoading,
     isFeatureLoading,
     isBranchesSuccess,
-    isForeignCustomer,
     isNewMode,
 
     submitPayload,
     setSubmitPayload,
-    selectCustomer,
-    setSelectCustomer,
 
     editPaymentReceiveMutate,
     createPaymentReceiveMutate,

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

@@ -59,7 +59,7 @@ function PaymentReceiveFormSelectBranch() {
 function PaymentReceiveBranchSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.branch_button.label', { label })}
+      text={intl.get('payment_receive.branch_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'branch-16'} iconSize={16} />}

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

@@ -138,24 +138,23 @@ function PaymentReceiveHeaderFields({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ControlCustomerGroup>
+            <CustomerSelectField
-              <CustomerSelectField
+              contacts={customers}
-                contacts={customers}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
-                defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
-                onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
-                  form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('full_amount', '');
-                  form.setFieldValue('full_amount', '');
+                form.setFieldValue('currency_code', customer?.currency_code);
-                  form.setFieldValue('currency_code', customer?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              disabled={!isNewMode}
-                disabled={!isNewMode}
+              buttonProps={{
-                buttonProps={{
+                elementRef: (ref) => (customerFieldRef.current = ref),
-                  elementRef: (ref) => (customerFieldRef.current = ref),
+              }}
-                }}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlCustomerGroup>
             {value && (
               <CustomerButtonLink customerId={value}>
                 <T id={'view_customer_details'} />
@@ -346,12 +345,6 @@ export default compose(
   withCurrentOrganization(),
 )(PaymentReceiveHeaderFields);
 
-const ControlCustomerGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
 
@@ -8,24 +9,23 @@ export function ReceiptFormFooterLeft() {
       {/* --------- Receipt message --------- */}
       <ReceiptMsgFormGroup
         name={'receipt_message'}
-        label={<T id={'receipt_message'} />}
+        label={<T id={'receipt_form.label.receipt_message'} />}
         hintText={'Will be displayed on the Receipt'}
       >
         <FEditableText
           name={'receipt_message'}
-          placeholder={
+          placeholder={intl.get('receipt_form.receipt_message.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </ReceiptMsgFormGroup>
 
       {/* --------- Statement--------- */}
-      <StatementFormGroup label={<T id={'statement'} />} name={'statement'}>
+      <StatementFormGroup
+        label={<T id={'receipt_form.label.statement'} />}
+        name={'statement'}
+      >
         <FEditableText
           name={'statement'}
-          placeholder={
+          placeholder={intl.get('receipt_form.statement.placeholder')}
-            'Enter the terms and conditions of your business to be displayed in your transaction'
-          }
         />
       </StatementFormGroup>
     </React.Fragment>

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.js

@@ -21,23 +21,23 @@ export function ReceiptFormFooterRight() {
   return (
     <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'receipt.details.subtotal'} />}
+        title={<T id={'receipt_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'receipt.details.total'} />}
+        title={<T id={'receipt_form.label.total'} />}
         value={formattedTotal}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
       <TotalLine
-        title={<T id={'receipt.details.payment_amount'} />}
+        title={<T id={'receipt_form.label.payment_amount'} />}
         value={formattedPaymentTotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'receipt.details.due_amount'} />}
+        title={<T id={'receipt_form.label.due_amount'} />}
         value={formattedDueTotal}
         textStyle={TotalLineTextStyle.Bold}
       />

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js

@@ -90,19 +90,17 @@ function ReceiptFormHeader({
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'customer_id'} />}
           >
-            <ControlCustomerGroup>
+            <CustomerSelectField
-              <CustomerSelectField
+              contacts={customers}
-                contacts={customers}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
-                defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
-                onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
-                  form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('currency_code', customer?.currency_code);
-                  form.setFieldValue('currency_code', customer?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
-            </ControlCustomerGroup>
             {value && (
               <CustomerButtonLink customerId={value}>
                 <T id={'view_customer_details'} />
@@ -245,12 +243,6 @@ export default compose(
   })),
 )(ReceiptFormHeader);
 
-const ControlCustomerGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js

@@ -4,25 +4,18 @@ import { useParams } from 'react-router-dom';
 import 'style/pages/SaleReceipt/PageForm.scss';
 
 import ReceiptFrom from './ReceiptForm';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 import { ReceiptFormProvider } from './ReceiptFormProvider';
 
-import { compose } from 'utils';
-
 /**
  * Receipt form page.
  */
-function ReceiptFormPage({
+export default function ReceiptFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const idInt = parseInt(id, 10);
 
   return (
-    <ReceiptFormProvider receiptId={idInt} baseCurrency={base_currency}>
+    <ReceiptFormProvider receiptId={idInt}>
       <ReceiptFrom />
     </ReceiptFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(ReceiptFormPage);

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useState } from 'react';
-import {isEqual, isUndefined } from 'lodash';
+import { isEqual, isUndefined } from 'lodash';
 import { Features } from 'common';
 import { useFeatureCan } from 'hooks/state';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -20,7 +20,7 @@ const ReceiptFormContext = createContext();
 /**
  * Receipt form provider.
  */
-function ReceiptFormProvider({ receiptId, baseCurrency, ...props }) {
+function ReceiptFormProvider({ receiptId, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
@@ -92,17 +92,10 @@ function ReceiptFormProvider({ receiptId, baseCurrency, ...props }) {
 
   const [submitPayload, setSubmitPayload] = useState({});
 
-  const [selectCustomer, setSelectCustomer] = React.useState(null);
-
   const isNewMode = !receiptId;
 
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
-  // Determines whether the foreign customer.
-  const isForeignCustomer =
-    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
-    !isUndefined(selectCustomer?.currency_code);
-
   const provider = {
     receiptId,
     receipt,
@@ -112,9 +105,6 @@ function ReceiptFormProvider({ receiptId, baseCurrency, ...props }) {
     branches,
     warehouses,
     submitPayload,
-    baseCurrency,
-    selectCustomer,
-    setSelectCustomer,
 
     isNewMode,
     isReceiptLoading,
@@ -127,7 +117,6 @@ function ReceiptFormProvider({ receiptId, baseCurrency, ...props }) {
     isSettingLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    isForeignCustomer,
 
     createReceiptMutate,
     editReceiptMutate,

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js

@@ -104,7 +104,7 @@ function ReceiptFormSelectWarehouse() {
 function ReceiptBranchSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.branch_button.label', { label })}
+      text={intl.get('receipt.branch_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'branch-16'} iconSize={16} />}
@@ -115,7 +115,7 @@ function ReceiptBranchSelectButton({ label }) {
 function ReceiptWarehouseSelectButton({ label }) {
   return (
     <Button
-      text={intl.get('invoice.warehouse_button.label', { label })}
+      text={intl.get('receipt.warehouse_button.label', { label })}
       minimal={true}
       small={true}
       icon={<Icon icon={'warehouse-16'} iconSize={16} />}