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

WIP: customer form styling.

Browse Source 
fix: journal increment number settings.
This commit is contained in:
Ahmed Bouhuolia
2020-11-07 22:01:10 +02:00
parent 9b6b2e67db
commit 1ff2d924d0
25 changed files with 1037 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

493
client/src/containers/Customers/CustomerAddressTabs.js
View File

@@ -1,245 +1,364 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import {
FormGroup,
MenuItem,
Intent,
InputGroup,
HTMLSelect,
Button,
Classes,
} from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { FormattedMessage as T, useIntl } from 'react-intl';
import React from 'react';
import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
const CustomerBillingAddress = ({
formik: { errors, touched, setFieldValue, getFieldProps },
errors,
touched,
setFieldValue,
getFieldProps,
}) => {
return (
<div className={'customer-form'}>
<Row gutterWidth={16} className={'customer-form__tabs-section'}>
<Col width={404}>
<h4>
<T id={'billing_address'} />
</h4>
<Row className={'customer-form__tabs-section'}>
<Col xs={6}>
<h4>
<T id={'billing_address'} />
</h4>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
<FormGroup
className={'form-group--journal-number'}
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_country"
{...{ errors, touched }}
/>
}
label={<T id={'country'} />}
>
<InputGroup
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('billing_address_zipcode')}
/>
</FormGroup>
</Col>
<Col width={404}>
<h4>
<T id={'shipping_address'} />
</h4>
{...getFieldProps('billing_address_zipcode')}
/>
</FormGroup>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
<Col xs={6}>
<h4>
<T id={'shipping_address'} />
</h4>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_zipcode"
{...{ errors, touched }}
/>
{...getFieldProps('shipping_address_zipcode')}
/>
</FormGroup>
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
>
<InputGroup
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('shipping_address_zipcode')}
/>
</FormGroup>
</Col>
</Row>
</div>
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
</Row>
);
};