Fix: purchases.

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={
-            <T id={'thanks_for_your_business_and_have_a_great_day'} />
-          }
+          placeholder={intl.get('payment_made_form.statement.placeholder')}
         />
       </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 {
-    vendors,
-    accounts,
-    isNewMode,
-    setPaymentVendorId,
-    isForeignVendor,
-    baseCurrency,
-    selectVendor,
-  } = usePaymentMadeFormContext();
+  const { vendors, accounts, isNewMode, setPaymentVendorId } =
+    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
-                contacts={vendors}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_vender_account'} />}
-                onContactSelected={(contact) => {
-                  form.setFieldValue('vendor_id', contact.id);
-                  form.setFieldValue('currency_code', contact?.currency_code);
-                  setPaymentVendorId(contact.id);
-                }}
-                disabled={!isNewMode}
-                popoverFill={true}
-                allowCreate={true}
-              />
-            </ControlVendorGroup>
+            <VendorSelectField
+              contacts={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
+                setPaymentVendorId(contact.id);
+              }}
+              disabled={!isNewMode}
+              popoverFill={true}
+              allowCreate={true}
+            />
+
             {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({
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
+export default function PaymentMadeFormPage() {
   const { id: paymentMadeId } = useParams();
 
   return (
-    <PaymentMadeFormProvider
-      paymentMadeId={paymentMadeId}
-      baseCurrency={base_currency}
-    >
+    <PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
       <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({
-  query,
-  paymentMadeId,
-  baseCurrency,
-  ...props
-}) {
+function PaymentMadeFormProvider({ query, paymentMadeId, ...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} />}