QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 14:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-18 13:27:05 +02:00
parent dd941f1f45
commit 54400b223f
10 changed files with 339 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/webapp/src/components/Select/DisplayNameList.tsx
View File

@@ -1,50 +1,68 @@
// @ts-nocheck
import React from 'react';
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
import { ListSelect } from './ListSelect';
import { FSelect } from '../Forms';
import { useFormikContext } from 'formik';
export function DisplayNameList({
salutation,
firstName,
lastName,
company,
...restProps
}) {
const formats = [
{
format: '{1} {2} {3}',
values: [salutation, firstName, lastName],
required: [1],
export type DisplayNameListItem = { label: string };
export interface DisplayNameListProps
extends Omit<
React.ComponentProps<typeof FSelect>,
'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
> {}
export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
const {
values: {
first_name: firstName,
last_name: lastName,
company_name: companyName,
salutation,
},
{ format: '{1} {2}', values: [firstName, lastName], required: [] },
{ format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
{ format: '{1}', values: [company], required: [1] },
];
} = useFormikContext<any>();
const formatOptions = formats
.filter(
(format) =>
!format.values.some((value, index) => {
return !value && format.required.indexOf(index + 1) !== -1;
const formats = useMemo(
() => [
{
format: '{1} {2} {3}',
values: [salutation, firstName, lastName],
required: [1],
},
{ format: '{1} {2}', values: [firstName, lastName], required: [] },
{ format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
{ format: '{1}', values: [companyName], required: [1] },
],
[firstName, lastName, companyName, salutation],
);
const formatOptions: DisplayNameListItem[] = useMemo(
() =>
formats
.filter(
(format) =>
!format.values.some((value, index) => {
return !value && format.required.indexOf(index + 1) !== -1;
}),
)
.map((formatOption) => {
const { format, values } = formatOption;
let label = format;
values.forEach((value, index) => {
const replaceWith = value || '';
label = label.replace(`{${index + 1}}`, replaceWith).trim();
});
return { label: label.replace(/\s+/g, ' ') };
}),
)
.map((formatOption) => {
const { format, values } = formatOption;
let label = format;
values.forEach((value, index) => {
const replaceWith = value || '';
label = label.replace(`{${index + 1}}`, replaceWith).trim();
});
return { label: label.replace(/\s+/g, ' ') };
});
[formats],
);
return (
<ListSelect
<FSelect
items={formatOptions}
selectedItemProp={'label'}
textProp={'label'}
defaultText={intl.get('select_display_name_as')}
valueAccessor={'label'}
textAccessor={'label'}
placeholder={intl.get('select_display_name_as')}
filterable={false}
{...restProps}
/>

22
packages/webapp/src/components/Select/SalutationList.tsx
View File

@@ -1,10 +1,16 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { FSelect } from '../Forms';
import { ListSelect } from './ListSelect';
export type SalutationItem = { key: string; label: string };
export function SalutationList({ ...restProps }) {
export interface SalutationListProps
extends Omit<
React.ComponentProps<typeof FSelect>,
'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
> {}
export function SalutationList({ ...restProps }: SalutationListProps) {
const saluations = [
intl.get('mr'),
intl.get('mrs'),
@@ -12,17 +18,17 @@ export function SalutationList({ ...restProps }) {
intl.get('miss'),
intl.get('dr'),
];
const items = saluations.map((saluation) => ({
const items: SalutationItem[] = saluations.map((saluation) => ({
key: saluation,
label: saluation,
}));
return (
<ListSelect
<FSelect
items={items}
selectedItemProp={'key'}
textProp={'label'}
defaultText={intl.get('salutation')}
valueAccessor={'key'}
textAccessor={'label'}
placeholder={intl.get('salutation')}
filterable={false}
{...restProps}
/>

286
packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
View File

@@ -1,10 +1,12 @@
// @ts-nocheck
import React from 'react';
import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import { Row, Col } from '@/components';
import { FormattedMessage as T } from '@/components';
import { FastField, ErrorMessage } from 'formik';
import { inputIntent } from '@/utils';
import {
FormattedMessage as T,
FFormGroup,
FInputGroup,
FTextArea,
} from '@/components';
const CustomerBillingAddress = ({}) => {
return (
@@ -15,105 +17,65 @@ const CustomerBillingAddress = ({}) => {
<T id={'billing_address'} />
</h4>
{/*------------ Billing Address country -----------*/}
<FastField name={'billing_address_country'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_country" />}
label={<T id={'country'} />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_country'}
inline={true}
label={<T id={'country'} />}
>
<FInputGroup name={'billing_address_country'} />
</FFormGroup>
{/*------------ Billing Address 1 -----------*/}
<FastField name={'billing_address_1'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--address_line_1'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_1'}
label={<T id={'address_line_1'} />}
inline={true}
>
<FTextArea name={'billing_address_1'} />
</FFormGroup>
{/*------------ Billing Address 2 -----------*/}
<FastField name={'billing_address_2'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_2" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_2'}
label={<T id={'address_line_2'} />}
inline={true}
>
<FTextArea name={'billing_address_2'} />
</FFormGroup>
{/*------------ Billing Address city -----------*/}
<FastField name={'billing_address_city'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_city'}
label={<T id={'city_town'} />}
inline={true}
>
<FInputGroup name={'billing_address_city'} />
</FFormGroup>
{/*------------ Billing Address state -----------*/}
<FastField name={'billing_address_state'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_state'}
label={<T id={'state'} />}
inline={true}
>
<FInputGroup name={'billing_address_state'} />
</FFormGroup>
{/*------------ Billing Address postcode -----------*/}
<FastField name={'billing_address_postcode'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'zip_code'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_postcode" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_postcode'}
label={<T id={'zip_code'} />}
inline={true}
>
<FInputGroup name={'billing_address_postcode'} />
</FFormGroup>
{/*------------ Billing Address phone -----------*/}
<FastField name={'billing_address_phone'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'phone'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_phone" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'billing_address_phone'}
label={<T id={'phone'} />}
inline={true}
>
<FInputGroup name={'billing_address_phone'} />
</FFormGroup>
</Col>
<Col xs={6}>
@@ -121,107 +83,67 @@ const CustomerBillingAddress = ({}) => {
<T id={'shipping_address'} />
</h4>
{/*------------ Shipping Address country -----------*/}
<FastField name={'shipping_address_country'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_country" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_country'}
label={<T id={'country'} />}
inline={true}
>
<FInputGroup name={'shipping_address_country'} />
</FFormGroup>
{/*------------ Shipping Address 1 -----------*/}
<FastField name={'shipping_address_1'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_1'}
label={<T id={'address_line_1'} />}
inline={true}
>
<FTextArea name={'shipping_address_1'} />
</FFormGroup>
{/*------------ Shipping Address 2 -----------*/}
<FastField name={'shipping_address_2'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_2" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_2'}
label={<T id={'address_line_2'} />}
inline={true}
>
<FTextArea name={'shipping_address_2'} />
</FFormGroup>
{/*------------ Shipping Address city -----------*/}
<FastField name={'shipping_address_city'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_city'}
label={<T id={'city_town'} />}
inline={true}
>
<FInputGroup name={'shipping_address_city'} />
</FFormGroup>
{/*------------ Shipping Address state -----------*/}
<FastField name={'shipping_address_state'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_state'}
label={<T id={'state'} />}
inline={true}
>
<FInputGroup name={'shipping_address_state'} />
</FFormGroup>
{/*------------ Shipping Address postcode -----------*/}
<FastField name={'shipping_address_postcode'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'zip_code'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_postcode" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_postcode'}
label={<T id={'zip_code'} />}
inline={true}
>
<FInputGroup name={'shipping_address_postcode'} />
</FFormGroup>
{/*------------ Shipping Address phone -----------*/}
<FastField name={'shipping_address_phone'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'phone'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_phone" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'shipping_address_phone'}
label={<T id={'phone'} />}
inline={true}
>
<FInputGroup name={'shipping_address_phone'} />
</FFormGroup>
</Col>
</Row>
</div>

74
packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
View File

@@ -1,72 +1,40 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
import { ControlGroup } from '@blueprintjs/core';
import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
export default function CustomerFormAfterPrimarySection({}) {
return (
<div class="customer-form__after-primary-section-content">
<div className={'customer-form__after-primary-section-content'}>
{/*------------ Customer email -----------*/}
<FastField name={'email'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'email'} />}
className={'form-group--email'}
label={<T id={'customer_email'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'email'}
label={<T id={'customer_email'} />}
inline={true}
>
<FInputGroup name={'email'} />
</FFormGroup>
{/*------------ Phone number -----------*/}
<FormGroup
className={'form-group--phone-number'}
<FFormGroup
name={'personal_phone'}
label={<T id={'phone_number'} />}
inline={true}
>
<ControlGroup>
<FastField name={'personal_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('personal')}
{...field}
/>
)}
</FastField>
<FastField name={'work_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('work')}
{...field}
/>
)}
</FastField>
<FInputGroup
name={'personal_phone'}
placeholder={intl.get('personal')}
/>
<FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
</ControlGroup>
</FormGroup>
</FFormGroup>
{/*------------ Customer website -----------*/}
<FastField name={'website'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'website'} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup placeholder={'http://'} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
<FInputGroup name={'website'} placeholder={'http://'} />
</FFormGroup>
</div>
);
}

123
packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
View File

@@ -10,6 +10,8 @@ import {
SalutationList,
DisplayNameList,
FormattedMessage as T,
FInputGroup,
FFormGroup,
} from '@/components';
import CustomerTypeRadioField from './CustomerTypeRadioField';
import { CLASSES } from '@/constants/classes';
@@ -28,100 +30,51 @@ export default function CustomerFormPrimarySection({}) {
<CustomerTypeRadioField />
{/**----------- Contact name -----------*/}
<FormGroup
className={classNames('form-group--contact_name')}
<FFormGroup
name={'salutation'}
label={<T id={'contact_name'} />}
inline={true}
>
<ControlGroup>
<FastField name={'salutation'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<SalutationList
onItemSelect={(salutation) => {
form.setFieldValue('salutation', salutation.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/>
)}
</FastField>
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/>
)}
</FastField>
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('last_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')}
{...field}
/>
)}
</FastField>
<SalutationList
name={'salutation'}
popoverProps={{ minimal: true }}
/>
<FInputGroup
name={'first_name'}
placeholder={intl.get('first_name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
/>
<FInputGroup name={'last_name'} placeholder={intl.get('last_name')} />
</ControlGroup>
</FormGroup>
</FFormGroup>
{/*----------- Company Name -----------*/}
<FastField name={'company_name'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'company_name'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'company_name'}
label={<T id={'company_name'} />}
inline={true}
>
<InputGroup name={'company_name'} />
</FFormGroup>
{/*----------- Display Name -----------*/}
<Field name={'display_name'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
helperText={<ErrorMessage name={'display_name'} />}
intent={inputIntent({ error, touched })}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
firstName={form.values.first_name}
lastName={form.values.last_name}
company={form.values.company_name}
salutation={form.values.salutation}
onItemSelect={(displayName) => {
form.setFieldValue('display_name', displayName.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
<FFormGroup
name={'display_name'}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
inline={true}
>
<DisplayNameList
name={'display_name'}
popoverProps={{ minimal: true }}
/>
</FFormGroup>
</div>
);
}

21
packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx
View File

@@ -1,26 +1,15 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
import { Classes } from '@blueprintjs/core';
import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
return (
<div className={'tab-panel--note'}>
<FastField name={'note'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'note'} />}
className={classNames('form-group--note', Classes.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_date" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup name={'note'} label={<T id={'note'} />} inline={false}>
<FTextArea name={'note'} />
</FFormGroup>
</div>
);
}

45
packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
View File

@@ -2,43 +2,26 @@
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
import { FormattedMessage as T } from '@/components';
import { FastField } from 'formik';
import { Radio } from '@blueprintjs/core';
import { FormattedMessage as T, FFormGroup, FRadioGroup } from '@/components';
import { handleStringChange, saveInvoke } from '@/utils';
/**
* Customer type radio field.
*/
export default function RadioCustomer(props) {
const { onChange, ...rest } = props;
export default function RadioCustomer() {
return (
<FastField name={'customer_type'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
inline={true}
label={<T id={'customer_type'} />}
className={classNames('form-group--customer_type')}
>
<RadioGroup
inline={true}
onChange={handleStringChange((value) => {
saveInvoke(onChange, value);
form.setFieldValue('customer_type', value);
})}
selectedValue={value}
>
<Radio label={intl.get('business')} value="business" />
<Radio
label={intl.get('individual')}
value="individual"
/>
</RadioGroup>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'customer_type'}
label={<T id={'customer_type'} />}
inline
fastField
>
<FRadioGroup name={'customer_type'} inline>
<Radio label={intl.get('business')} value="business" />
<Radio label={intl.get('individual')} value="individual" />
</FRadioGroup>
</FFormGroup>
);
}

39
packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
View File

@@ -7,23 +7,25 @@ import {
Classes,
Radio,
Position,
MenuItem,
} from '@blueprintjs/core';
import { ErrorMessage, FastField } from 'formik';
import { CLASSES } from '@/constants/classes';
import {
CategoriesSelectList,
Hint,
Col,
Row,
FieldRequiredHint,
FormattedMessage as T,
FormattedHTMLMessage,
FFormGroup,
FSelect,
} from '@/components';
import classNames from 'classnames';
import { useItemFormContext } from './ItemFormProvider';
import { handleStringChange, inputIntent } from '@/utils';
import { categoriesFieldShouldUpdate } from './utils';
// import { categoriesFieldShouldUpdate } from './utils';
/**
* Item form primary section.
@@ -132,29 +134,20 @@ export default function ItemFormPrimarySection() {
</FastField>
{/*----------- Item category ----------*/}
<FastField
<FFormGroup
name={'category_id'}
categories={itemsCategories}
shouldUpdate={categoriesFieldShouldUpdate}
label={<T id={'category'} />}
inline={true}
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'category'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="category_id" />}
className={classNames('form-group--category', Classes.FILL)}
>
<CategoriesSelectList
categories={itemsCategories}
selecetedCategoryId={value}
onCategorySelected={(category) => {
form.setFieldValue('category_id', category.id);
}}
/>
</FormGroup>
)}
</FastField>
<FSelect
name={'category_id'}
items={itemsCategories}
valueAccessor={'id'}
textAccessor={'name'}
placeholder={<T id={'select_category'} />}
popoverProps={{ minimal: true, captureDismiss: true }}
/>
</FFormGroup>
</Col>
<Col xs={3}>

74
packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
View File

@@ -1,76 +1,44 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
import { ControlGroup } from '@blueprintjs/core';
import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
/**
* Vendor form after primary section.
*/
function VendorFormAfterPrimarySection() {
return (
<div class="customer-form__after-primary-section-content">
<div className={'customer-form__after-primary-section-content'}>
{/*------------ Vendor email -----------*/}
<FastField name={'email'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'email'} />}
className={'form-group--email'}
label={<T id={'vendor_email'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'email'}
label={<T id={'vendor_email'} />}
inline={true}
>
<FInputGroup name={'email'} />
</FFormGroup>
{/*------------ Phone number -----------*/}
<FormGroup
<FFormGroup
name={'work_phone'}
className={'form-group--phone-number'}
label={<T id={'phone_number'} />}
inline={true}
>
<ControlGroup>
<FastField name={'work_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('work')}
{...field}
/>
)}
</FastField>
<FastField name={'personal_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('mobile')}
{...field}
/>
)}
</FastField>
<FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
<FInputGroup
name={'personal_phone'}
placeholder={intl.get('mobile')}
/>
</ControlGroup>
</FormGroup>
</FFormGroup>
{/*------------ Vendor website -----------*/}
<FastField name={'website'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'website'} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup placeholder={'http://'} {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
<FInputGroup name={'website'} placeholder={'http://'} />
</FFormGroup>
</div>
);
}

139
packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
View File

@@ -2,18 +2,18 @@
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import { inputIntent } from '@/utils';
import { useAutofocus } from '@/hooks';
import { ControlGroup } from '@blueprintjs/core';
import {
FormattedMessage as T,
FFormGroup,
FInputGroup,
Hint,
FieldRequiredHint,
SalutationList,
DisplayNameList,
} from '@/components';
import { CLASSES } from '@/constants/classes';
import { useAutofocus } from '@/hooks';
/**
* Vendor form primary section.
@@ -24,99 +24,58 @@ function VendorFormPrimarySection() {
return (
<div className={'customer-form__primary-section-content'}>
{/**----------- Vendor name -----------*/}
<FormGroup
<FFormGroup
name={'salutation'}
className={classNames('form-group--contact_name')}
label={<T id={'contact_name'} />}
inline={true}
>
<ControlGroup>
<FastField name={'salutation'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<SalutationList
onItemSelect={(salutation) => {
form.setFieldValue('salutation', salutation.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/>
)}
</FastField>
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/>
)}
</FastField>
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('last_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')}
{...field}
/>
)}
</FastField>
<SalutationList
name={'salutation'}
popoverProps={{ minimal: true }}
/>
<FInputGroup
name={'first_name'}
placeholder={intl.get('first_name')}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
/>
<FInputGroup
name={'last_name'}
placeholder={intl.get('last_name')}
className={classNames('input-group--last-name')}
/>
</ControlGroup>
</FormGroup>
</FFormGroup>
{/*----------- Company Name -----------*/}
<FastField name={'company_name'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'company_name'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
<FFormGroup
name={'company_name'}
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
inline={true}
>
<FInputGroup name={'company_name'} />
</FFormGroup>
{/*----------- Display Name -----------*/}
<Field name={'display_name'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
helperText={<ErrorMessage name={'display_name'} />}
intent={inputIntent({ error, touched })}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
firstName={form.values.first_name}
lastName={form.values.last_name}
company={form.values.company_name}
salutation={form.values.salutation}
onItemSelect={(displayName) => {
form.setFieldValue('display_name', displayName.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
<FFormGroup
name={'display_name'}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
name={'display_name'}
popoverProps={{ minimal: true }}
/>
</FFormGroup>
</div>
);
}