diff --git a/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js b/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js index 86eda3909..a8b0c1d69 100644 --- a/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js +++ b/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js @@ -3,32 +3,33 @@ import classNames from 'classnames'; import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, ErrorMessage } from 'formik'; +import { FFormGroup } from '../../../components/Forms'; import moment from 'moment'; +import { Features } from 'common'; import { MoneyInputGroup, InputPrependText, CurrencySelectList, + BranchSelect, + BranchSelectButton, + FeatureCan, Row, Col, } from 'components'; import { FormattedMessage as T } from 'components'; import { useCustomerFormContext } from './CustomerFormProvider'; - -import { - momentFormatter, - tansformDateValue, - inputIntent, -} from 'utils'; +import { useSetPrimaryBranchToForm } from './utils'; +import { momentFormatter, tansformDateValue, inputIntent } from 'utils'; /** * Customer financial panel. */ export default function CustomerFinancialPanel() { - const { - currencies, - customerId - } = useCustomerFormContext(); + const { currencies, customerId, branches } = useCustomerFormContext(); + + // Sets the primary branch to form. + useSetPrimaryBranchToForm(); return (
@@ -62,12 +63,7 @@ export default function CustomerFinancialPanel() { {/*------------ Opening balance -----------*/} - {({ - form, - field, - field: { value }, - meta: { error, touched }, - }) => ( + {({ form, field, field: { value }, meta: { error, touched } }) => ( } className={classNames( @@ -92,6 +88,23 @@ export default function CustomerFinancialPanel() { )} + {/*------------ Opening branch -----------*/} + + } + name={'opening_balance_branch_id'} + inline={true} + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + {/*------------ Currency -----------*/} {({ form, field: { value }, meta: { error, touched } }) => ( diff --git a/src/containers/Customers/CustomerForm/CustomerForm.schema.js b/src/containers/Customers/CustomerForm/CustomerForm.schema.js index 140abe9c9..6203bfca1 100644 --- a/src/containers/Customers/CustomerForm/CustomerForm.schema.js +++ b/src/containers/Customers/CustomerForm/CustomerForm.schema.js @@ -42,6 +42,7 @@ const Schema = Yup.object().shape({ opening_balance: Yup.number().nullable(), currency_code: Yup.string(), opening_balance_at: Yup.date(), + opening_balance_branch_id: Yup.string(), }); export const CreateCustomerForm = Schema; diff --git a/src/containers/Customers/CustomerForm/CustomerFormProvider.js b/src/containers/Customers/CustomerForm/CustomerFormProvider.js index ae678b4b8..a956897b3 100644 --- a/src/containers/Customers/CustomerForm/CustomerFormProvider.js +++ b/src/containers/Customers/CustomerForm/CustomerFormProvider.js @@ -6,15 +6,21 @@ import { useCreateCustomer, useEditCustomer, useContact, + useBranches, } from 'hooks/query'; +import { Features } from 'common'; +import { useFeatureCan } from 'hooks/state'; const CustomerFormContext = createContext(); -function CustomerFormProvider({ customerId, ...props }) { +function CustomerFormProvider({ query, customerId, ...props }) { const { state } = useLocation(); - const contactId = state?.action; + // Features guard. + const { featureCan } = useFeatureCan(); + const isBranchFeatureCan = featureCan(Features.Branches); + // Handle fetch customer details. const { data: customer, isLoading: isCustomerLoading } = useCustomer( customerId, @@ -28,6 +34,13 @@ function CustomerFormProvider({ customerId, ...props }) { // Handle fetch Currencies data table const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies(); + // Fetches the branches list. + const { + data: branches, + isLoading: isBranchesLoading, + isSuccess: isBranchesSuccess, + } = useBranches(query, { enabled: isBranchFeatureCan }); + // Form submit payload. const [submitPayload, setSubmitPayload] = useState({}); @@ -38,18 +51,20 @@ function CustomerFormProvider({ customerId, ...props }) { const isNewMode = contactId || !customerId; const isFormLoading = - isCustomerLoading || isCurrenciesLoading || isContactLoading; + isCustomerLoading || isCurrenciesLoading || isBranchesLoading; const provider = { customerId, customer, currencies, + branches, contactDuplicate, submitPayload, isNewMode, isCustomerLoading, isCurrenciesLoading, + isBranchesSuccess, isFormLoading, setSubmitPayload, diff --git a/src/containers/Customers/CustomerForm/utils.js b/src/containers/Customers/CustomerForm/utils.js index d72cfb92d..ba830c844 100644 --- a/src/containers/Customers/CustomerForm/utils.js +++ b/src/containers/Customers/CustomerForm/utils.js @@ -1,5 +1,9 @@ +import React from 'react'; import moment from 'moment'; +import { useFormikContext } from 'formik'; +import { first } from 'lodash'; +import { useCustomerFormContext } from './CustomerFormProvider'; export const defaultInitialValues = { customer_type: 'business', @@ -35,4 +39,20 @@ export const defaultInitialValues = { opening_balance: '', currency_code: '', opening_balance_at: moment(new Date()).format('YYYY-MM-DD'), + opening_balance_branch_id: '', +}; + +export const useSetPrimaryBranchToForm = () => { + const { setFieldValue } = useFormikContext(); + const { branches, isBranchesSuccess } = useCustomerFormContext(); + + React.useEffect(() => { + if (isBranchesSuccess) { + const primaryBranch = branches.find((b) => b.primary) || first(branches); + + if (primaryBranch) { + setFieldValue('opening_balance_branch_id', primaryBranch.id); + } + } + }, [isBranchesSuccess, setFieldValue, branches]); }; diff --git a/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js b/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js index 57c5f4633..f997cc306 100644 --- a/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js +++ b/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js @@ -1,17 +1,23 @@ import React from 'react'; +import moment from 'moment'; import classNames from 'classnames'; import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, ErrorMessage } from 'formik'; -import moment from 'moment'; +import { FFormGroup } from '../../../components/Forms'; +import { Features } from 'common'; import { MoneyInputGroup, InputPrependText, CurrencySelectList, + BranchSelect, + BranchSelectButton, + FeatureCan, Row, Col, } from 'components'; import { FormattedMessage as T } from 'components'; +import { useSetPrimaryBranchToForm } from './utils'; import { momentFormatter, tansformDateValue, inputIntent } from 'utils'; import { useVendorFormContext } from './VendorFormProvider'; @@ -19,7 +25,10 @@ import { useVendorFormContext } from './VendorFormProvider'; * Vendor Finaniceal Panel Tab. */ export default function VendorFinanicalPanelTab() { - const { vendorId, currencies } = useVendorFormContext(); + const { vendorId, currencies, branches } = useVendorFormContext(); + + // Sets the primary branch to form. + useSetPrimaryBranchToForm(); return (
@@ -80,6 +89,23 @@ export default function VendorFinanicalPanelTab() { )} + {/*------------ Opening branch -----------*/} + + } + name={'opening_balance_branch_id'} + inline={true} + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + {/*------------ Currency -----------*/} {({ form, field: { value }, meta: { error, touched } }) => ( diff --git a/src/containers/Vendors/VendorForm/VendorForm.schema.js b/src/containers/Vendors/VendorForm/VendorForm.schema.js index fa2fa0892..714ab1137 100644 --- a/src/containers/Vendors/VendorForm/VendorForm.schema.js +++ b/src/containers/Vendors/VendorForm/VendorForm.schema.js @@ -6,10 +6,7 @@ const Schema = Yup.object().shape({ first_name: Yup.string().trim(), last_name: Yup.string().trim(), company_name: Yup.string().trim(), - display_name: Yup.string() - .trim() - .required() - .label(intl.get('display_name_')), + display_name: Yup.string().trim().required().label(intl.get('display_name_')), email: Yup.string().email().nullable(), work_phone: Yup.number(), @@ -38,6 +35,7 @@ const Schema = Yup.object().shape({ opening_balance: Yup.number().nullable(), currency_code: Yup.string(), opening_balance_at: Yup.date(), + opening_balance_branch_id: Yup.string(), }); export const CreateVendorFormSchema = Schema; diff --git a/src/containers/Vendors/VendorForm/VendorFormProvider.js b/src/containers/Vendors/VendorForm/VendorFormProvider.js index a40d2ed4f..de827ca95 100644 --- a/src/containers/Vendors/VendorForm/VendorFormProvider.js +++ b/src/containers/Vendors/VendorForm/VendorFormProvider.js @@ -8,18 +8,24 @@ import { useCurrencies, useCreateVendor, useEditVendor, + useBranches, } from 'hooks/query'; +import { Features } from 'common'; +import { useFeatureCan } from 'hooks/state'; const VendorFormContext = createContext(); /** * Vendor form provider. */ -function VendorFormProvider({ vendorId, ...props }) { +function VendorFormProvider({ query, vendorId, ...props }) { const { state } = useLocation(); - const contactId = state?.action; + // Features guard. + const { featureCan } = useFeatureCan(); + const isBranchFeatureCan = featureCan(Features.Branches); + // Handle fetch Currencies data table const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies(); @@ -33,6 +39,14 @@ function VendorFormProvider({ vendorId, ...props }) { contactId, { enabled: !!contactId }, ); + + // Fetches the branches list. + const { + data: branches, + isLoading: isBranchesLoading, + isSuccess: isBranchesSuccess, + } = useBranches(query, { enabled: isBranchFeatureCan }); + // Create and edit vendor mutations. const { mutateAsync: createVendorMutate } = useCreateVendor(); const { mutateAsync: editVendorMutate } = useEditVendor(); @@ -44,17 +58,22 @@ function VendorFormProvider({ vendorId, ...props }) { const isNewMode = contactId || !vendorId; const isFormLoading = - isVendorLoading || isContactLoading || isCurrenciesLoading; + isVendorLoading || + isContactLoading || + isCurrenciesLoading || + isBranchesLoading; const provider = { vendorId, currencies, vendor, + branches, contactDuplicate: { ...omit(contactDuplicate, ['opening_balance_at']) }, submitPayload, isNewMode, isFormLoading, + isBranchesSuccess, createVendorMutate, editVendorMutate, diff --git a/src/containers/Vendors/VendorForm/utils.js b/src/containers/Vendors/VendorForm/utils.js index 8c9a70509..b1157c4a0 100644 --- a/src/containers/Vendors/VendorForm/utils.js +++ b/src/containers/Vendors/VendorForm/utils.js @@ -1,4 +1,9 @@ +import React from 'react'; import moment from 'moment'; +import { useFormikContext } from 'formik'; +import { first } from 'lodash'; + +import { useVendorFormContext } from './VendorFormProvider'; export const defaultInitialValues = { salutation: '', @@ -33,4 +38,20 @@ export const defaultInitialValues = { opening_balance: '', currency_code: '', opening_balance_at: moment(new Date()).format('YYYY-MM-DD'), + opening_balance_branch_id: '', +}; + +export const useSetPrimaryBranchToForm = () => { + const { setFieldValue } = useFormikContext(); + const { branches, isBranchesSuccess } = useVendorFormContext(); + + React.useEffect(() => { + if (isBranchesSuccess) { + const primaryBranch = branches.find((b) => b.primary) || first(branches); + + if (primaryBranch) { + setFieldValue('opening_balance_branch_id', primaryBranch.id); + } + } + }, [isBranchesSuccess, setFieldValue, branches]); }; diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 471f9d4c0..cd82a9258 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1895,5 +1895,7 @@ "vendor_opening_balance.success_message": "The opening balance of the given vendor has been changed successfully.", "vendor_opening_balance.label": "Edit Vendor Opening Balance", "vendor_opening_balance.label.opening_balance": "Opening balance", - "vendor_opening_balance.label.opening_balance_at": "Opening balance at" + "vendor_opening_balance.label.opening_balance_at": "Opening balance at", + "customer.label.opening_branch": "Opening Balance Branch", + "vendor.label.opening_branch": "Opening Balance Branch" } \ No newline at end of file