diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx index f73943c0a..768e05b48 100644 --- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx +++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx @@ -1,153 +1,17 @@ // @ts-nocheck import React from 'react'; -import { Row, Col } from '@/components'; -import { - FormattedMessage as T, - FFormGroup, - FInputGroup, - FTextArea, -} from '@/components'; +import { Row } from '@/components'; -const CustomerBillingAddress = ({}) => { +import CustomerBillingAddress from './CustomerBillingAddress'; +import CustomerShippingAddress from './CustomerShippingAddress'; + +export default function CustomerAddressTabs() { return (
- -

- -

- {/*------------ Billing Address country -----------*/} - } - > - - - - {/*------------ Billing Address 1 -----------*/} - } - inline={true} - > - - - - {/*------------ Billing Address 2 -----------*/} - } - inline={true} - > - - - {/*------------ Billing Address city -----------*/} - } - inline={true} - > - - - - {/*------------ Billing Address state -----------*/} - } - inline={true} - > - - - {/*------------ Billing Address postcode -----------*/} - } - inline={true} - > - - - - {/*------------ Billing Address phone -----------*/} - } - inline={true} - > - - - - - -

- -

- {/*------------ Shipping Address country -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address 1 -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address 2 -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address city -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address state -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address postcode -----------*/} - } - inline={true} - > - - - - {/*------------ Shipping Address phone -----------*/} - } - inline={true} - > - - - + +
); -}; - -export default CustomerBillingAddress; +} diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerBillingAddress.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerBillingAddress.tsx new file mode 100644 index 000000000..3b21d6fe9 --- /dev/null +++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerBillingAddress.tsx @@ -0,0 +1,82 @@ +// @ts-nocheck +import React from 'react'; +import { Box } from '@/components'; +import { + FormattedMessage as T, + FFormGroup, + FInputGroup, + FTextArea, +} from '@/components'; +import CustomerFormSectionTitle from './CustomerFormSectionTitle'; + +export default function CustomerBillingAddress() { + return ( + + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + } + inline + fill + > + + + + ); +} diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx index 39466dd5c..38036113b 100644 --- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx +++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx @@ -1,8 +1,7 @@ // @ts-nocheck import React from 'react'; -import classNames from 'classnames'; -import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import { FormGroup, Position, ControlGroup } from '@blueprintjs/core'; +import { ErrorMessage, useFormikContext } from 'formik'; import { Features } from '@/constants'; import { FFormGroup, @@ -16,6 +15,7 @@ import { FMoneyInputGroup, ExchangeRateInputGroup, FDateInput, + Box, } from '@/components'; import { useCustomerFormContext } from './CustomerFormProvider'; import { @@ -24,6 +24,7 @@ import { useSetPrimaryBranchToForm, } from './utils'; import { useCurrentOrganization } from '@/hooks/state'; +import CustomerFormSectionTitle from './CustomerFormSectionTitle'; /** * Customer financial panel. @@ -35,21 +36,23 @@ export default function CustomerFinancialPanel() { useSetPrimaryBranchToForm(); return ( -
- - + + + + {/*------------ Currency -----------*/} } fastField inline - > + fill + > + /> {/*------------ Opening balance -----------*/} @@ -66,7 +69,8 @@ export default function CustomerFinancialPanel() { } name={'opening_balance_branch_id'} - inline={true} + inline + fill > - - -
+ ); } @@ -95,7 +97,8 @@ function CustomerOpeningBalanceAtField() { } - inline={true} + inline + fill helperText={} > } name={'opening_balance'} - inline={true} + inline + fill shouldUpdate={openingBalanceFieldShouldUpdate} shouldUpdateDeps={{ currencyCode: values.currency_code }} fastField={true} > - + + {/* ----------- Save and New ----------- */} : } /> - {/* ----------- Cancel ----------- */} - + + + )} + ); } diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json index 32c45611f..ab2f4a15d 100644 --- a/packages/webapp/src/lang/en/index.json +++ b/packages/webapp/src/lang/en/index.json @@ -1942,8 +1942,8 @@ "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", - "customer.label.opening_branch": "Opening Balance Branch", - "vendor.label.opening_branch": "Opening Balance Branch", + "customer.label.opening_branch": "Balance Branch", + "vendor.label.opening_branch": "Balance Branch", "warehouse.error.warehouse_code_not_unique": "Warehouse code not unique", "warehouse.error.warehouse_has_associated_transactions": "You could not delete the warehouse that has associated transactions.", "branche.error.warehouse_code_not_unique": "Branch code not unique", diff --git a/packages/webapp/src/style/pages/Customers/Form.scss b/packages/webapp/src/style/pages/Customers/Form.scss deleted file mode 100644 index 5048aa1b5..000000000 --- a/packages/webapp/src/style/pages/Customers/Form.scss +++ /dev/null @@ -1,156 +0,0 @@ -@import '../../_base.scss'; - -.page-form--customer { - $self: '.page-form'; - padding: 20px; - - --x-color-tabs-border: #f0f0f0; - - .bp4-dark & { - --x-color-tabs-border: var(--color-dark-gray3); - } - - #{$self}__header { - padding: 0; - } - #{$self}__primary-section { - padding: 10px 0 0; - margin: 0 0 20px; - overflow: hidden; - border-bottom: 1px solid #e4e4e4; - max-width: 1000px; - } - - .bp4-form-group { - max-width: 500px; - - .bp4-control { - margin-top: 8px; - margin-bottom: 8px; - } - - &.bp4-inline { - .bp4-label { - min-width: 150px; - } - } - .bp4-form-content { - width: 100%; - } - } - - .form-group--contact_name { - max-width: 600px; - - .bp4-control-group > * { - flex-shrink: unset; - - &:not(:last-child) { - padding-right: 10px; - } - &.input-group--salutation-list { - width: 25%; - } - &.input-group--first-name, - &.input-group--last-name { - width: 37%; - } - } - } - - .bp4-form-group { - margin-bottom: 14px; - } - - .bp4-tab-panel { - margin-top: 26px; - } - - .form-group--phone-number { - .bp4-control-group > * { - flex-shrink: unset; - padding-right: 5px; - padding-left: 5px; - - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - } - - #{$self}__tabs { - margin-top: 20px; - max-width: 1000px; - - h4 { - font-weight: 500; - color: #888; - margin-bottom: 1.2rem; - font-size: 14px; - } - // Tab panels. - .tab-panel { - &--address { - .bp4-form-group { - max-width: 440px; - - &.bp4-inline { - .bp4-label { - min-width: 145px; - } - } - - .bp4-form-content { - width: 100%; - } - - textarea.bp4-input { - max-width: 100%; - width: 100%; - min-height: 50px; - } - } - } - &--note { - .form-group--note { - .bp4-form-group { - max-width: 600px; - } - textarea { - width: 100%; - min-height: 100px; - } - } - } - } - - .dropzone-container { - max-width: 600px; - } - } - - .bp4-tabs { - .bp4-tab-list { - position: relative; - - &:before { - content: ''; - position: absolute; - bottom: 0; - width: 100%; - height: 2px; - background: var(--x-color-tabs-border); - } - - > *:not(:last-child) { - margin-right: 25px; - } - &.bp4-large > .bp4-tab { - font-size: 15px; - } - } - } -}