mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
Fix: sales.
This commit is contained in:
@@ -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={
|
||||
<T id={'thanks_for_your_business_and_have_a_great_day'} />
|
||||
}
|
||||
placeholder={intl.get('credit_note.label_customer_note.placeholder')}
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -93,19 +93,17 @@ function CreditNoteFormHeaderFields({
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
</ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
{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;
|
||||
|
||||
@@ -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({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
export default function CreditNoteFormPage() {
|
||||
const { id } = useParams();
|
||||
const idAsInteger = parseInt(id, 10);
|
||||
|
||||
return (
|
||||
<CreditNoteFormProvider
|
||||
creditNoteId={idAsInteger}
|
||||
baseCurrency={base_currency}
|
||||
>
|
||||
<CreditNoteFormProvider creditNoteId={idAsInteger}>
|
||||
<CreditNoteForm />
|
||||
</CreditNoteFormProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withCurrentOrganization())(CreditNoteFormPage);
|
||||
|
||||
@@ -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,
|
||||
baseCurrency,
|
||||
selectCustomer,
|
||||
setSelectCustomer,
|
||||
submitPayload,
|
||||
isNewMode,
|
||||
newCreditNote,
|
||||
isForeignCustomer,
|
||||
|
||||
isItemsLoading,
|
||||
isCustomersLoading,
|
||||
|
||||
@@ -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} />}
|
||||
|
||||
@@ -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={
|
||||
<T id={'thanks_for_your_business_and_have_a_great_day'} />
|
||||
}
|
||||
placeholder={intl.get('estimate_form.customer_note.placeholder')}
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -85,20 +85,19 @@ function EstimateFormHeader({
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
allowCreate={true}
|
||||
/>
|
||||
</ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
allowCreate={true}
|
||||
/>
|
||||
|
||||
{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;
|
||||
|
||||
@@ -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({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
export default function EstimateFormPage() {
|
||||
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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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} />}
|
||||
|
||||
@@ -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={
|
||||
<T id={'thanks_for_your_business_and_have_a_great_day'} />
|
||||
}
|
||||
placeholder={intl.get('invoice_form.invoice_message.placeholder')}
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -92,19 +92,18 @@ function InvoiceFormHeaderFields({
|
||||
)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
>
|
||||
<ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
</ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
|
||||
{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;
|
||||
|
||||
@@ -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({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
export default function InvoiceFormPage() {
|
||||
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);
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
|
||||
@@ -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={
|
||||
<T id={'thanks_for_your_business_and_have_a_great_day'} />
|
||||
}
|
||||
placeholder={intl.get('payment_receive_form.statement.placeholder')}
|
||||
/>
|
||||
</TermsConditsFormGroup>
|
||||
</React.Fragment>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
export default function PaymentReceiveFormPage() {
|
||||
const { id: paymentReceiveId } = useParams();
|
||||
const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
|
||||
|
||||
return (
|
||||
<PaymentReceiveFormProvider
|
||||
paymentReceiveId={paymentReceiveIdInt}
|
||||
baseCurrency={base_currency}
|
||||
>
|
||||
<PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
|
||||
<PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
|
||||
</PaymentReceiveFormProvider>
|
||||
);
|
||||
}
|
||||
export default compose(withCurrentOrganization())(PaymentReceiveFormPage);
|
||||
|
||||
@@ -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({
|
||||
query,
|
||||
paymentReceiveId,
|
||||
baseCurrency,
|
||||
...props
|
||||
}) {
|
||||
function PaymentReceiveFormProvider({ query, paymentReceiveId, ...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,
|
||||
|
||||
@@ -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} />}
|
||||
|
||||
@@ -138,24 +138,23 @@ function PaymentReceiveHeaderFields({
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('full_amount', '');
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
disabled={!isNewMode}
|
||||
buttonProps={{
|
||||
elementRef: (ref) => (customerFieldRef.current = ref),
|
||||
}}
|
||||
allowCreate={true}
|
||||
/>
|
||||
</ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('full_amount', '');
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
disabled={!isNewMode}
|
||||
buttonProps={{
|
||||
elementRef: (ref) => (customerFieldRef.current = ref),
|
||||
}}
|
||||
allowCreate={true}
|
||||
/>
|
||||
|
||||
{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;
|
||||
|
||||
@@ -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={
|
||||
<T id={'thanks_for_your_business_and_have_a_great_day'} />
|
||||
}
|
||||
placeholder={intl.get('receipt_form.receipt_message.placeholder')}
|
||||
/>
|
||||
</ReceiptMsgFormGroup>
|
||||
|
||||
{/* --------- Statement--------- */}
|
||||
<StatementFormGroup label={<T id={'statement'} />} name={'statement'}>
|
||||
<StatementFormGroup
|
||||
label={<T id={'receipt_form.label.statement'} />}
|
||||
name={'statement'}
|
||||
>
|
||||
<FEditableText
|
||||
name={'statement'}
|
||||
placeholder={
|
||||
'Enter the terms and conditions of your business to be displayed in your transaction'
|
||||
}
|
||||
placeholder={intl.get('receipt_form.statement.placeholder')}
|
||||
/>
|
||||
</StatementFormGroup>
|
||||
</React.Fragment>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -90,19 +90,17 @@ function ReceiptFormHeader({
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
</ControlCustomerGroup>
|
||||
<CustomerSelectField
|
||||
contacts={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
form.setFieldValue('currency_code', customer?.currency_code);
|
||||
}}
|
||||
popoverFill={true}
|
||||
allowCreate={true}
|
||||
/>
|
||||
{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;
|
||||
|
||||
@@ -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({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
export default function ReceiptFormPage() {
|
||||
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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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} />}
|
||||
|
||||
Reference in New Issue
Block a user