diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index cd8eb745e..f52002200 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -34,6 +34,7 @@ import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransact
import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
import CreditNotePdfPreviewDialog from '../containers/Dialogs/CreditNotePdfPreviewDialog';
import PaymentReceivePdfPreviewDialog from '../containers/Dialogs/PaymentReceivePdfPreviewDialog';
+import WarehouseFormDialog from '../containers/Dialogs/WarehouseFormDialog';
/**
* Dialogs container.
@@ -78,6 +79,7 @@ export default function DialogsContainer() {
/>
+
);
}
diff --git a/src/components/Preferences/PreferencesTopbar.js b/src/components/Preferences/PreferencesTopbar.js
index 1633ecc8f..7b27a83e8 100644
--- a/src/components/Preferences/PreferencesTopbar.js
+++ b/src/components/Preferences/PreferencesTopbar.js
@@ -6,6 +6,7 @@ import { CLASSES } from 'common/classes';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Preferences/Users/UsersActions';
import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions';
+import WarehousesActions from '../../containers/Preferences/Warehouses/WarehousesActions'
import withDashboard from 'containers/Dashboard/withDashboard';
import { compose } from 'utils';
@@ -35,6 +36,11 @@ function PreferencesTopbar({ preferencesPageTitle }) {
path={'/preferences/currencies'}
component={CurrenciesActions}
/>
+
diff --git a/src/config/preferencesMenu.js b/src/config/preferencesMenu.js
index 031dfe0e1..f01ca6e12 100644
--- a/src/config/preferencesMenu.js
+++ b/src/config/preferencesMenu.js
@@ -16,6 +16,10 @@ export default [
href: '/preferences/currencies',
},
+ {
+ text: ,
+ href: '/preferences/warehouses',
+ },
{
text: ,
disabled: false,
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js
new file mode 100644
index 000000000..1c5474fce
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Formik } from 'formik';
+
+import { CreateWarehouseFormSchema } from './WarehouseForm.schema';
+import { useWarehouseFormContext } from './WarehouseFormProvider';
+import WarehouseFormContent from './WarehouseFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+ warehouse_name: '',
+ warehouse_address_1: '',
+ warehouse_address_2: '',
+ warehouse_address_city: '',
+ warehouse_address_country: '',
+ phone_number: '',
+};
+
+/**
+ * Warehouse form.
+ * @returns
+ */
+function WarehouseForm({
+ // #withDialogActions
+ closeDialog,
+}) {
+ // Initial form values.
+ const initialValues = {
+ ...defaultInitialValues,
+ };
+
+ // Handles the form submit.
+ const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
+
+ return (
+
+ );
+}
+
+export default compose(withDialogActions)(WarehouseForm);
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js
new file mode 100644
index 000000000..66a0d723a
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js
@@ -0,0 +1,13 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+ warehouse_name: Yup.string().required().label(intl.get('warehouse_name')),
+ warehouse_address_1: Yup.string().trim(),
+ warehouse_address_2: Yup.string().trim(),
+ warehouse_address_city: Yup.string().trim(),
+ warehouse_address_country: Yup.string().trim(),
+ phone_number: Yup.number(),
+});
+
+export const CreateWarehouseFormSchema = Schema;
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js
new file mode 100644
index 000000000..6816f703e
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import WarehouseFormFields from './WarehouseFormFields';
+import WarehouseFormFloatingActions from './WarehouseFormFloatingActions';
+
+/**
+ * Warehouse form content.
+ * @returns
+ */
+export default function WarehouseFormContent() {
+ return (
+
+ );
+}
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js
new file mode 100644
index 000000000..0bf620e68
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import '../../../style/pages/Warehouses/warehouseFormDialog.scss';
+import { WarehouseFormProvider } from './WarehouseFormProvider';
+import WarehouseForm from './WarehouseForm';
+
+/**
+ * Warehouse form dialog content.
+ */
+export default function WarehouseFormDialogContent({
+ // #ownProps
+ dialogName,
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js
new file mode 100644
index 000000000..b1097462e
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js
@@ -0,0 +1,126 @@
+import React from 'react';
+
+import intl from 'react-intl-universal';
+import { FastField, ErrorMessage, Field } from 'formik';
+import styled from 'styled-components';
+import {
+ Classes,
+ FormGroup,
+ InputGroup,
+ ControlGroup,
+ Position,
+} from '@blueprintjs/core';
+import { inputIntent } from 'utils';
+import { FieldRequiredHint, Col, Row, FormattedMessage as T } from 'components';
+import { useWarehouseFormContext } from './WarehouseFormProvider';
+
+/**
+ * Warehouse form fields.
+ * @returns
+ */
+export default function WarehouseFormFields() {
+ return (
+
+ {/*------------ Warehouse Name -----------*/}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ labelInfo={}
+ intent={inputIntent({ error, touched })}
+ inline={true}
+ helperText={}
+ className={'form-group--warehouse_name'}
+ >
+
+
+ )}
+
+ {/*------------ Warehouse Address -----------*/}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ className={'form-group--warehouse_address_1'}
+ >
+
+
+ )}
+
+
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ className={'form-group--warehouse_address_2'}
+ >
+
+
+ )}
+
+ {/*------------ Warehouse Address City & Country-----------*/}
+ }
+ >
+
+
+ {({ field, meta: { error, touched } }) => (
+
+ )}
+
+
+ {({ field, meta: { error, touched } }) => (
+
+ )}
+
+
+
+
+ {/*------------ Phone Number -----------*/}
+
+ {({ form, field, meta: { error, touched } }) => (
+ }
+ className={'form-group--phone_number'}
+ >
+
+
+ )}
+
+
+ );
+}
+
+const WarehouseAddressWrap = styled.div`
+ padding-left: 150px;
+`;
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js
new file mode 100644
index 000000000..f3da7c436
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useWarehouseFormContext } from './WarehouseFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Warehouse form floating actions.
+ * @returns
+ */
+function WarehouseFormFloatingActions({
+ // #withDialogActions
+ closeDialog,
+}) {
+ // Formik context.
+ const { isSubmitting } = useFormikContext();
+
+ const { dialogName } = useWarehouseFormContext();
+
+ // Handle close button click.
+ const handleCancelBtnClick = () => {
+ closeDialog(dialogName);
+ };
+
+ return (
+
+ );
+}
+
+export default compose(withDialogActions)(WarehouseFormFloatingActions);
diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js
new file mode 100644
index 000000000..336a2f93f
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { DialogContent } from 'components';
+// import {} from 'hooks/query';
+
+const WarehouseFormContext = React.createContext();
+
+/**
+ * Warehouse form provider.
+ */
+function WarehouseFormProvider({ dialogName, ...props }) {
+ // State provider.
+ const provider = {
+ dialogName,
+ };
+
+ return (
+
+
+
+ );
+}
+
+const useWarehouseFormContext = () => React.useContext(WarehouseFormContext);
+
+export { WarehouseFormProvider, useWarehouseFormContext };
diff --git a/src/containers/Dialogs/WarehouseFormDialog/index.js b/src/containers/Dialogs/WarehouseFormDialog/index.js
new file mode 100644
index 000000000..0f886e56d
--- /dev/null
+++ b/src/containers/Dialogs/WarehouseFormDialog/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'utils';
+
+const WarehouseFormDialogContent = React.lazy(() =>
+ import('./WarehouseFormDialogContent'),
+);
+
+/**
+ * Warehouse form form dialog.
+ */
+function WarehouseFormDialog({ dialogName, isOpen }) {
+ return (
+ }
+ isOpen={isOpen}
+ canEscapeJeyClose={true}
+ autoFocus={true}
+ className={'dialog--warehouse-form'}
+ >
+
+
+
+
+ );
+}
+export default compose(withDialogRedux())(WarehouseFormDialog);
diff --git a/src/containers/Preferences/Warehouses/WarehousesActions.js b/src/containers/Preferences/Warehouses/WarehousesActions.js
new file mode 100644
index 000000000..b737dc586
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/WarehousesActions.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+
+import { FormattedMessage as T, Icon } from 'components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Warehouse actions.
+ */
+function WarehousesActions({
+ //#ownProps
+ openDialog,
+}) {
+ const handleClickNewWarehouse = () => {
+ openDialog('warehouse-form');
+ };
+
+ return (
+
+ }
+ onClick={handleClickNewWarehouse}
+ intent={Intent.PRIMARY}
+ >
+
+
+
+ );
+}
+
+export default compose(withDialogActions)(WarehousesActions);
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 4147975a2..5a4020188 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1738,19 +1738,25 @@
"global_error.you_dont_have_permissions": "You do not have permissions to access this page.",
"global_error.transactions_locked": "Transactions before {lockedToDate} has been locked. Hence action cannot be performed.",
"global_error.authorized_user_inactive": "The authorized user is inactive.",
-
"the_vendor_has_been_inactivated_successfully": "The contact has been inactivated successfully.",
-
"vendor.alert.activated_message": "The vendor has been activated successfully.",
- "vendor.alert.are_you_sure_want_to_inactivate_this_vendor":"Are you sure want to inactivate this vendor? You will to able to activate it later.",
+ "vendor.alert.are_you_sure_want_to_inactivate_this_vendor": "Are you sure want to inactivate this vendor? You will to able to activate it later.",
"vendor.alert.inactivated_message": "The vendor has been inactivated successfully.",
"vendor.alert.are_you_sure_want_to_activate_this_vendor": "Are you sure want to activate this vendor? You will to able to inactivate it later.",
-
- "customer.alert.activated_message":"The customer has been activated successfully.",
+ "customer.alert.activated_message": "The customer has been activated successfully.",
"customer.alert.are_you_sure_want_to_activate_this_customer": "Are you sure want to activate this customer? You will to able to inactivate it later.",
"customer.alert.inactivated_message": "The customer has been inactivated successfully.",
- "customer.alert.are_you_sure_want_to_inactivate_this_customer":"Are you sure want to inactivate this customer? You will to able to activate it later.",
-
- "credit_note_preview.dialog.title":"Credit Note PDF Preview",
- "payment_receive_preview.dialog.title":"Payment Receive PDF Preview"
+ "customer.alert.are_you_sure_want_to_inactivate_this_customer": "Are you sure want to inactivate this customer? You will to able to activate it later.",
+ "credit_note_preview.dialog.title": "Credit Note PDF Preview",
+ "payment_receive_preview.dialog.title": "Payment Receive PDF Preview",
+ "warehouses.label": "Warehouses",
+ "warehouses.label.new_warehouse": "New Warehouse",
+ "warehouse.dialog.label":"New Warehouse",
+ "warehouse.dialog.label.warehouse_name":"Warehouse Name",
+ "warehouse.dialog.label.warehouse_address":"Address",
+ "warehouse.dialog.label.warehouse_address_1":"Address 1",
+ "warehouse.dialog.label.warehouse_address_2":"Address 2",
+ "warehouse.dialog.label.city":"City",
+ "warehouse.dialog.label.country":"Country",
+ "warehouse.dialog.label.phone_number":"Phone Number"
}
\ No newline at end of file
diff --git a/src/style/pages/Warehouses/warehouseFormDialog.scss b/src/style/pages/Warehouses/warehouseFormDialog.scss
new file mode 100644
index 000000000..5a9a4433a
--- /dev/null
+++ b/src/style/pages/Warehouses/warehouseFormDialog.scss
@@ -0,0 +1,36 @@
+.dialog--warehouse-form {
+ width: 650px;
+
+ .bp3-dialog-body {
+ .bp3-form-group.bp3-inline {
+ .bp3-label {
+ font-size: 13px;
+ min-width: 140px;
+ }
+ .bp3-form-content {
+ width: 388px;
+ }
+ .bp3-control-group > * {
+ flex-shrink: unset;
+ padding-right: 5px;
+ padding-left: 5px;
+
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+ &.form-group--warehouse_name,
+ &.form-group--phone_number {
+ .bp3-form-content {
+ width: 278px;
+ }
+ }
+ }
+ }
+ .bp3-dialog-footer {
+ padding-top: 10px;
+ }
+}