Fix: purchases.

src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.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';
 
@@ -6,12 +7,13 @@ export function BillFormFooterLeft() {
   return (
     <React.Fragment>
       {/* --------- note --------- */}
-      <TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
+      <TermsConditsFormGroup
+        label={<T id={'bill_form.label.note'} />}
+        name={'note'}
+      >
         <FEditableText
           name={'note'}
-          placeholder={
+          placeholder={intl.get('bill_form.label.note.placeholder')}
-            'Enter the terms and conditions of your business to be displayed in your transaction'
-          }
         />
       </TermsConditsFormGroup>
     </React.Fragment>

src/containers/Purchases/Bills/BillForm/BillFormFooterRight.js

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

src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js

@@ -59,19 +59,18 @@ function BillFormHeader() {
             )}
             labelInfo={<FieldRequiredHint />}
           >
-            <ControlVendorGroup>
+            <VendorSelectField
-              <VendorSelectField
+              contacts={vendors}
-                contacts={vendors}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
-                defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
-                onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
-                  form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
-                  form.setFieldValue('currency_code', contact?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlVendorGroup>
             {value && (
               <VendorButtonLink vendorId={value}>
                 <T id={'view_vendor_details'} />
@@ -175,12 +174,6 @@ function BillFormHeader() {
 
 export default compose(withDialogActions)(BillFormHeader);
 
-const ControlVendorGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const VendorButtonLink = styled(VendorDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

src/containers/Purchases/Bills/BillForm/BillFormPage.js

@@ -4,22 +4,15 @@ import { useParams } from 'react-router-dom';
 import BillForm from './BillForm';
 import { BillFormProvider } from './BillFormProvider';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
-
 import 'style/pages/Bills/PageForm.scss';
 
-function BillFormPage({
+export default function BillFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const billId = parseInt(id, 10);
 
   return (
-    <BillFormProvider billId={billId} baseCurrency={base_currency}>
+    <BillFormProvider billId={billId}>
       <BillForm />
     </BillFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(BillFormPage);

src/containers/Purchases/Bills/BillForm/BillFormProvider.js

@@ -38,7 +38,7 @@ const stringifiedFilterRoles = JSON.stringify([
 /**
  * Bill form provider.
  */
-function BillFormProvider({ billId, baseCurrency, ...props }) {
+function BillFormProvider({ billId, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
@@ -86,7 +86,6 @@ function BillFormProvider({ billId, baseCurrency, ...props }) {
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
-  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Create and edit bills mutations.
   const { mutateAsync: createBillMutate } = useCreateBill();
@@ -97,11 +96,6 @@ function BillFormProvider({ billId, baseCurrency, ...props }) {
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
-  // Determines whether the foreign vendor.
-  const isForeignVendor =
-    !isEqual(selectVendor?.currency_code, baseCurrency) &&
-    !isUndefined(selectVendor?.currency_code);
-
   const provider = {
     accounts,
     vendors,
@@ -109,9 +103,6 @@ function BillFormProvider({ billId, baseCurrency, ...props }) {
     bill,
     warehouses,
     branches,
-    baseCurrency,
-    selectVendor,
-    setSelectVendor,
     submitPayload,
     isNewMode,
 
@@ -123,7 +114,6 @@ function BillFormProvider({ billId, baseCurrency, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    isForeignVendor,
 
     createBillMutate,
     editBillMutate,

src/containers/Purchases/Bills/BillForm/BillFormTopBar.js

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

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.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';
 
@@ -6,12 +7,13 @@ export function VendorCreditNoteFormFooterLeft() {
   return (
     <React.Fragment>
       {/* --------- Terms and conditions --------- */}
-      <TermsConditsFormGroup label={<T id={'note'} />} name={'note'}>
+      <TermsConditsFormGroup
+        label={<T id={'vendor_credit_form.label.note'} />}
+        name={'note'}
+      >
         <FEditableText
           name={'note'}
-          placeholder={
+          placeholder={intl.get('vendor_credit_form.note.placeholder')}
-            'Enter the terms and conditions of your business to be displayed in your transaction'
-          }
         />
       </TermsConditsFormGroup>
     </React.Fragment>

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

@@ -18,14 +18,13 @@ export function VendorCreditNoteFormFooterRight() {
       amountColWidth={'180px'}
     >
       <TotalLine
-        title={<T id={'credit_note.drawer.label_subtotal'} />}
+        title={<T id={'vendor_credit_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'credit_note.drawer.label_total'} />}
+        title={<T id={'vendor_credit_form.label.total'} />}
         value={formattedTotal}
-        // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
     </VendorCreditNoteTotalLines>

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

@@ -93,19 +93,18 @@ function VendorCreditNoteFormHeaderFields({
             className={classNames(CLASSES.FILL, 'form-group--vendor')}
             labelInfo={<FieldRequiredHint />}
           >
-            <ControlVendorGroup>
+            <VendorSelectField
-              <VendorSelectField
+              contacts={vendors}
-                contacts={vendors}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
-                defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
-                onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
-                  form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
-                  form.setFieldValue('currency_code', contact?.currency_code);
+              }}
-                }}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlVendorGroup>
             {value && (
               <VendorButtonLink vendorId={value}>
                 <T id={'view_vendor_details'} />
@@ -214,12 +213,6 @@ export default compose(
   })),
 )(VendorCreditNoteFormHeaderFields);
 
-const ControlVendorGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const VendorButtonLink = styled(VendorDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -6,26 +6,16 @@ import '../../../../style/pages/VendorsCreditNote/PageForm.scss';
 import VendorCreditNoteForm from './VendorCreditNoteForm';
 import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
-
 /**
  * Vendor Credit note form pages.
  */
-function VendorCreditNoteFormPage({
+export default function VendorCreditNoteFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id } = useParams();
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <VendorCreditNoteFormProvider
+    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
-      vendorCreditId={idAsInteger}
-      baseCurrency={base_currency}
-    >
       <VendorCreditNoteForm />
     </VendorCreditNoteFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(VendorCreditNoteFormPage);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { transformToEditForm } from './utils';
 import { Features } from 'common';
@@ -22,11 +22,7 @@ const VendorCreditNoteFormContext = React.createContext();
 /**
  * Vendor Credit note data provider.
  */
-function VendorCreditNoteFormProvider({
+function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
-  vendorCreditId,
-  baseCurrency,
-  ...props
-}) {
   const { state } = useLocation();
   const billId = state?.billId;
 
@@ -79,7 +75,6 @@ function VendorCreditNoteFormProvider({
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
-  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Create and edit vendor credit mutations.
   const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
@@ -91,11 +86,6 @@ function VendorCreditNoteFormProvider({
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
-  // Determines whether the foreign vendor.
-  const isForeignVendor =
-    !isEqual(selectVendor?.currency_code, baseCurrency) &&
-    !isUndefined(selectVendor?.currency_code);
-
   const newVendorCredit = !isEmpty(bill)
     ? transformToEditForm({
         ...pick(bill, ['vendor_id', 'currency_code', 'entries']),
@@ -109,9 +99,6 @@ function VendorCreditNoteFormProvider({
     vendorCredit,
     warehouses,
     branches,
-    baseCurrency,
-    selectVendor,
-    setSelectVendor,
     submitPayload,
     isNewMode,
     newVendorCredit,
@@ -120,7 +107,6 @@ function VendorCreditNoteFormProvider({
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
-    isForeignVendor,
 
     createVendorCreditMutate,
     editVendorCreditMutate,

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

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

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.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 PaymentMadeFormFooterLeft() {
       {/* --------- Statement--------- */}
       <StatementFormGroup
         name={'statement'}
-        label={<T id={'statement'} />}
+        label={<T id={'payment_made_form.label.statement'} />}
         hintText={'Will be displayed on the Payment'}
       >
         <FEditableText
           name={'statement'}
-          placeholder={
+          placeholder={intl.get('payment_made_form.statement.placeholder')}
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
         />
       </StatementFormGroup>
     </React.Fragment>

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

@@ -11,17 +11,17 @@ import { usePaymentMadeTotals } from './utils';
 
 export function PaymentMadeFormFooterRight() {
   const { formattedSubtotal, formattedTotal } = usePaymentMadeTotals();
+
   return (
     <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'estimate.details.subtotal'} />}
+        title={<T id={'payment_made_form.label.subtotal'} />}
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'estimate.details.total'} />}
+        title={<T id={'payment_made_form.label.total'} />}
         value={formattedTotal}
-        // borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
     </PaymentMadeTotalLines>

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

@@ -54,15 +54,8 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
   } = useFormikContext();
 
   // Payment made form context.
-  const {
+  const { vendors, accounts, isNewMode, setPaymentVendorId } =
-    vendors,
+    usePaymentMadeFormContext();
-    accounts,
-    isNewMode,
-    setPaymentVendorId,
-    isForeignVendor,
-    baseCurrency,
-    selectVendor,
-  } = usePaymentMadeFormContext();
 
   // Sumation of payable full-amount.
   const payableFullAmount = useMemo(
@@ -101,21 +94,20 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
             className={classNames('form-group--select-list', Classes.FILL)}
             labelInfo={<FieldRequiredHint />}
           >
-            <ControlVendorGroup>
+            <VendorSelectField
-              <VendorSelectField
+              contacts={vendors}
-                contacts={vendors}
+              selectedContactId={value}
-                selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
-                defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
-                onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
-                  form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
-                  form.setFieldValue('currency_code', contact?.currency_code);
+                setPaymentVendorId(contact.id);
-                  setPaymentVendorId(contact.id);
+              }}
-                }}
+              disabled={!isNewMode}
-                disabled={!isNewMode}
+              popoverFill={true}
-                popoverFill={true}
+              allowCreate={true}
-                allowCreate={true}
+            />
-              />
+
-            </ControlVendorGroup>
             {value && (
               <VendorButtonLink vendorId={value}>
                 <T id={'view_vendor_details'} />
@@ -278,12 +270,6 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
 
 export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
 
-const ControlVendorGroup = styled(ControlGroup)`
-  display: flex;
-  align-items: center;
-  transform: none;
-`;
-
 const VendorButtonLink = styled(VendorDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -6,25 +6,15 @@ import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
 
 import 'style/pages/PaymentMade/PageForm.scss';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-import { compose } from 'utils';
-
 /**
  * Payment made - Page form.
  */
-function PaymentMadeFormPage({
+export default function PaymentMadeFormPage() {
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
   const { id: paymentMadeId } = useParams();
 
   return (
-    <PaymentMadeFormProvider
+    <PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
-      paymentMadeId={paymentMadeId}
-      baseCurrency={base_currency}
-    >
       <PaymentMadeForm />
     </PaymentMadeFormProvider>
   );
 }
-export default compose(withCurrentOrganization())(PaymentMadeFormPage);

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

@@ -1,5 +1,4 @@
 import React, { createContext, useContext } from 'react';
-import { isEqual, isUndefined } from 'lodash';
 import { Features } from 'common';
 import { useFeatureCan } from 'hooks/state';
 import {
@@ -20,21 +19,14 @@ const PaymentMadeFormContext = createContext();
 /**
  * Payment made form provider.
  */
-function PaymentMadeFormProvider({
+function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) {
-  query,
-  paymentMadeId,
-  baseCurrency,
-  ...props
-}) {
   const [submitPayload, setSubmitPayload] = React.useState({});
   const [paymentVendorId, setPaymentVendorId] = React.useState(null);
-  const [selectVendor, setSelectVendor] = React.useState(null);
 
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
 
-
   // Handle fetch accounts data.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
@@ -67,7 +59,6 @@ function PaymentMadeFormProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
-
   // Fetch payment made settings.
   useSettings();
 
@@ -79,11 +70,6 @@ function PaymentMadeFormProvider({
 
   const isFeatureLoading = isBranchesLoading;
 
-  // Determines whether the foreign vendor.
-  const isForeignVendor =
-    !isEqual(selectVendor?.currency_code, baseCurrency) &&
-    !isUndefined(selectVendor?.currency_code);
-
   // Provider payload.
   const provider = {
     paymentMadeId,
@@ -94,9 +80,6 @@ function PaymentMadeFormProvider({
     items,
     branches,
     submitPayload,
-    baseCurrency,
-    selectVendor,
-    setSelectVendor,
     paymentVendorId,
 
     isNewMode,
@@ -108,7 +91,6 @@ function PaymentMadeFormProvider({
     isPaymentLoading,
     isFeatureLoading,
     isBranchesSuccess,
-    isForeignVendor,
 
     createPaymentMadeMutate,
     editPaymentMadeMutate,

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

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