Feature/wms 48 (#46)

* create warehouse
* edit warehouse changes
* Update: linted and formatted
* add warehouse button
* Update: linted

Co-authored-by: [Diksha] <[diksha39511@gmail.com]>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/components/Breadcrumbs/index.js

@@ -23,7 +23,7 @@ import ArrowRight from 'assets/images/CarretArrowRightIcon';
 import MDBox from 'components/MDBox';
 import MDTypography from 'components/MDTypography';
 
-function Breadcrumbs({ title, route, light }) {
+function Breadcrumbs({ title, route, light, children }) {
   return (
     <MDBox
       mr={{ xs: 0, xl: 8 }}
@@ -64,6 +64,22 @@ function Breadcrumbs({ title, route, light }) {
         >
           {title.replace('-', ' ')}
         </MDTypography>
+        <MDTypography
+          component="span"
+          variant="button"
+          fontWeight="regular"
+          textTransform="capitalize"
+          color={light ? 'white' : 'dark'}
+          sx={{
+            lineHeight: 0,
+            position: 'absolute',
+            right: 0,
+            padding: '0px 20px',
+            marginTop: '-20px'
+          }}
+        >
+          {children}
+        </MDTypography>
       </MuiBreadcrumbs>
     </MDBox>
   );
@@ -78,7 +94,8 @@ Breadcrumbs.defaultProps = {
 Breadcrumbs.propTypes = {
   title: PropTypes.string.isRequired,
   route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-  light: PropTypes.bool
+  light: PropTypes.bool,
+  children: PropTypes.node
 };
 
 export default Breadcrumbs;

src/components/DashboardNavbar/index.js

@@ -16,7 +16,6 @@ Coded by www.creative-tim.com
 import { useState, useEffect } from 'react';
 // import Grid from '@mui/material/Grid';
 
-
 // react-router components
 import { useLocation } from 'react-router-dom';
 
@@ -41,7 +40,6 @@ import NotificationItem from 'components/NotificationItem';
 
 // import InputAdornment from '@mui/material/InputAdornment';
 
-
 // Custom styles for DashboardNavbar
 import {
   // navbar,
@@ -62,17 +60,12 @@ import {
 import SearchBar from 'components/SearchBar';
 import { Box } from '@mui/material';
 
-
+function DashboardNavbar({ absolute, light, isMini, children }) {
-
-
-function DashboardNavbar({ absolute, light, isMini }) {
   const [navbarType, setNavbarType] = useState();
   const [controller, dispatch] = useMaterialUIController();
   const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
   const [openMenu, setOpenMenu] = useState(false);
   const route = useLocation().pathname.split('/').slice(1);
-  
-
   useEffect(() => {
     // Setting the navbar type
     if (fixedNavbar) {
@@ -83,7 +76,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
 
     // A function that sets the transparent state of the navbar.
     function handleTransparentNavbar() {
-      setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) && !fixedNavbar);
+      setTransparentNavbar(dispatch, fixedNavbar && window.scrollY === 0 && !fixedNavbar);
     }
 
     /** 
@@ -151,10 +144,10 @@ function DashboardNavbar({ absolute, light, isMini }) {
           marginBottom: '5px',
           boxShadow: '0px 1px 4px rgb(0 0 0 / 8%)',
           width: '100% !important'
-        }}>
+        }}
+      >
         <Toolbar className="custom-header">
           {isMini ? null : (
-          
             <MDBox display="flex" width="100% !important" max-width="100% !important">
               <MDBox sx={{ width: '100%', maxWidth: '100%' }} pr={3}>
                 <SearchBar />
@@ -200,9 +193,11 @@ function DashboardNavbar({ absolute, light, isMini }) {
           )}
         </Toolbar>
       </Box>
-      <Toolbar variant='dense'>
+      <Toolbar variant="dense">
         <MDBox color="inherit" mb={{ xs: 2, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
-          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+          <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light}>
+            {children}
+          </Breadcrumbs>
         </MDBox>
       </Toolbar>
     </AppBar>
@@ -220,8 +215,8 @@ DashboardNavbar.defaultProps = {
 DashboardNavbar.propTypes = {
   absolute: PropTypes.bool,
   light: PropTypes.bool,
-  isMini: PropTypes.bool
+  isMini: PropTypes.bool,
-  
+  children: PropTypes.node
 };
 
 export default DashboardNavbar;

src/components/SnackBar/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Snackbar } from '@mui/material';
+import PropTypes from 'prop-types';
+import MuiAlert from '@mui/material/Alert';
+
+export default function SnackBar({ message, open, handleClose }) {
+  const Alert = React.forwardRef(function Alert(props, ref) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
+
+  return (
+    <>
+      <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
+        <Alert severity="success" sx={{ width: '100%' }} onClose={handleClose}>
+          {message}
+        </Alert>
+      </Snackbar>
+    </>
+  );
+}
+SnackBar.propTypes = {
+  message: PropTypes.string,
+  open: PropTypes.bool,
+  handleClose: PropTypes.bool
+};

src/components/TileBasic/index.js

@@ -44,6 +44,7 @@ const useStyles = makeStyles({
 
 export default function TileBasic({ tiles }) {
   const classes = useStyles();
+
   return (
     <>
       <MDBox px={2} py={3}>
@@ -52,7 +53,10 @@ export default function TileBasic({ tiles }) {
             tiles.map((items) => (
               <>
                 <Grid item xs={12} sm={6} md={tiles.length > 4 ? 4 : 6}>
-                  <Link to={items.path}>
+                  <Link
+                    to={items.path}
+                    state={{ name: items.name, address: items.address, id: items._id }}
+                  >
                     <MDBox
                       key={items.name + items.path}
                       data={{ name: items.name, path: items.path }}

src/constant/Endpoints.js

@@ -1,4 +1,5 @@
 export default {
   LOGIN_USER: '/user/login',
-  GET_WAREHOUSE_DATA: '/warehouse/all'
+  GET_WAREHOUSE_DATA: '/warehouse/all?page=0&perPage=50',
+  CREATE_WAREHOUSE:'/warehouse/'
 };

src/pages/authentication/index.js

@@ -35,7 +35,8 @@ function LoginScreen() {
       rememberMe: true
     },
     validationSchema: schema.login,
-    onSubmit: (values, { resetForm, setSubmitting }) => {
+    onSubmit: (values, { resetForm, setSubmitting }) =>
+    {
       const onFailedLogin = (errorMessage) => {
         resetForm();
         setSubmitting(false);

src/pages/editWarehouseDetails/index.js

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import DashboardNavbar from 'components/DashboardNavbar';
+import DashboardLayout from 'layouts/DashboardLayout';
+import ImageUpload from 'components/ImageUpload';
+import MDButton from 'components/Button';
+import { useFormik } from 'formik';
+import schema from 'services/ValidationServices';
+import MDInput from 'components/MDInput';
+import { useLocation } from 'react-router-dom';
+import WarehouseActions from 'redux/WarehouseRedux';
+import SnackBar from 'components/SnackBar';
+
+const useStyles = makeStyles({
+  labelSize: {
+    fontSize: '16px',
+    letterSpacing: '0.01em',
+    color: '#000',
+    marginBottom: '4px'
+  }
+});
+
+const previewImg = [1, 2, 3];
+
+const names = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder'
+];
+
+function EditWarehouseDetails() {
+  const classes = useStyles();
+  const location = useLocation();
+  const [open, setOpen] = useState(false);
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250
+      }
+    }
+  };
+  const dispatch = useDispatch();
+  const formik = useFormik({
+    initialValues: {
+      warehousename: location.state.name,
+      address: location.state.address,
+      inventorytype: '',
+      attributes: ''
+    },
+    validationSchema: schema.warehouseForm,
+    onSubmit: (values, onSubmitProps) => {
+      dispatch(
+        WarehouseActions.editWarehouseAction({
+          loader: 'loading-request',
+          slug: `/warehouse/${location.state.id}`,
+          method: 'patch',
+          data: {
+            name: values.warehousename,
+            address: values.address,
+            specs: '',
+            company_id: ''
+          }
+        })
+      );
+      onSubmitProps.resetForm();
+      setOpen(true);
+    }
+  });
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <DashboardLayout>
+        <DashboardNavbar />
+        <Box mx={3} my={3}>
+          <form onSubmit={formik.handleSubmit}>
+            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
+              <Box
+                component="div"
+                sx={{
+                  fontSize: '22px',
+                  letterSpacing: '0.01em',
+                  color: '#000',
+                  marginBottom: '30px'
+                }}
+              >
+                Form to Input
+              </Box>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={6} md={6}>
+                  <Box component="div" sx={{ marginBottom: '15px' }}>
+                    <Box component="div" className={classes.labelSize}>
+                      Warehouse name
+                    </Box>
+                    <MDInput
+                      fullWidth
+                      name="warehousename"
+                      type="text"
+                      variant="outlined"
+                      value={formik.values.warehousename}
+                      error={formik.touched.warehousename && Boolean(formik.errors.warehousename)}
+                      helperText={formik.touched.warehousename && formik.errors.warehousename}
+                      onChange={formik.handleChange}
+                    />
+                  </Box>
+                  <Box component="div" sx={{ marginBottom: '15px' }}>
+                    <Box component="div" className={classes.labelSize}>
+                      Address
+                    </Box>
+                    <MDInput
+                      fullWidth
+                      name="address"
+                      type="text"
+                      variant="outlined"
+                      value={formik.values.address}
+                      error={formik.touched.address && Boolean(formik.errors.address)}
+                      helperText={formik.touched.address && formik.errors.address}
+                      onChange={formik.handleChange}
+                    />
+                  </Box>
+                  <Box component="div" sx={{ marginBottom: '15px' }}>
+                    <Box component="div" className={classes.labelSize}>
+                      Types of inventories hosted
+                    </Box>
+                    <MDInput
+                      multiple
+                      select
+                      fullWidth
+                      variant="outlined"
+                      labelId="demo-multiple-chip-label"
+                      id="demo-multiple-chip"
+                      name="inventorytype"
+                      input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
+                      value={formik.values.inventorytype}
+                      error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)}
+                      helperText={formik.touched.inventorytype && formik.errors.inventorytype}
+                      renderValue={(selected) => (
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                          {selected.map((value) => (
+                            <Chip key={value} label={value} />
+                          ))}
+                        </Box>
+                      )}
+                      MenuProps={MenuProps}
+                      onChange={formik.handleChange}
+                    >
+                      <MenuItem key={''} value={''}>
+                        No Selected // Or Empty
+                      </MenuItem>
+                      {names.map((name) => (
+                        <MenuItem key={name} value={name}>
+                          {name}
+                        </MenuItem>
+                      ))}
+                    </MDInput>
+                  </Box>
+                  <Box component="div" sx={{ marginBottom: '15px' }}>
+                    <Box component="div" className={classes.labelSize}>
+                      Other attributes
+                    </Box>
+                    <MDInput
+                      fullWidth
+                      type="text"
+                      variant="outlined"
+                      name="attributes"
+                      value={formik.values.attributes}
+                      error={formik.touched.attributes && Boolean(formik.errors.attributes)}
+                      helperText={formik.touched.attributes && formik.errors.attributes}
+                      onChange={formik.handleChange}
+                    />
+                  </Box>
+                </Grid>
+                <Grid item xs={12} sm={6} md={6}>
+                  <Box sx={{ marginTop: '30px' }}>
+                    <ImageUpload heading="Upload Warehouse Image" previewImg={previewImg} />
+                  </Box>
+                </Grid>
+              </Grid>
+              <Box
+                sx={{
+                  marginTop: '60px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  columnGap: '20px'
+                }}
+              >
+                {/* ---edit-- */}
+                <MDButton size="large" color="primary" variant="outlined" type="submit">
+                  EDIT DETAILS
+                </MDButton>
+                <MDButton size="large" color="primary" variant="contained">
+                  SHOW DETAILS
+                </MDButton>
+              </Box>
+            </Box>
+          </form>
+        </Box>
+      </DashboardLayout>
+      <SnackBar open={open} message="warehouse edit successful" handleClose={handleClose} />
+    </>
+  );
+}
+export default EditWarehouseDetails;

src/pages/newWarehouseDetails/index.js

@@ -1,9 +1,17 @@
-import { Box, Grid, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Box, Grid, MenuItem, OutlinedInput, Chip } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
 import ImageUpload from 'components/ImageUpload';
 import MDButton from 'components/Button';
+import { useFormik } from 'formik';
+import schema from 'services/ValidationServices';
+import MDInput from 'components/MDInput';
+import WarehouseActions from 'redux/WarehouseRedux';
+import { API } from 'constant';
+import SnackBar from 'components/SnackBar';
 
 const useStyles = makeStyles({
   labelSize: {
@@ -16,13 +24,74 @@ const useStyles = makeStyles({
 
 const previewImg = [1, 2, 3];
 
+const names = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder'
+];
+
 function NewWarehouseDetails() {
   const classes = useStyles();
+  const dispatch = useDispatch();
+  const [open, setOpen] = useState(false);
+
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250
+      }
+    }
+  };
+  const formik = useFormik({
+    initialValues: {
+      warehousename: '',
+      address: '',
+      inventorytype: '',
+      attributes: ''
+    },
+    validationSchema: schema.warehouseForm,
+    onSubmit: (values, onSubmitProps) => {
+      dispatch(
+        WarehouseActions.createWarehouseAction({
+          loader: 'loading-request',
+          slug: API.CREATE_WAREHOUSE,
+          method: 'post',
+          data: {
+            name: values.warehousename,
+            address: values.address,
+            specs: '',
+            company_id: '61cea5fd028432700a7f8601'
+          }
+        })
+      );
+      onSubmitProps.resetForm();
+      setOpen(true);
+    }
+  });
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
   return (
     <>
       <DashboardLayout>
         <DashboardNavbar />
         <Box mx={3} my={3}>
+          <form onSubmit={formik.handleSubmit}>
             <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
               <Box
                 component="div"
@@ -41,25 +110,80 @@ function NewWarehouseDetails() {
                     <Box component="div" className={classes.labelSize}>
                       Warehouse name
                     </Box>
-                  <TextField fullWidth variant="outlined" />
+                    <MDInput
+                      fullWidth
+                      type="text"
+                      variant="outlined"
+                      name="warehousename"
+                      value={formik.values.warehousename}
+                      error={formik.touched.warehousename && Boolean(formik.errors.warehousename)}
+                      helperText={formik.touched.warehousename && formik.errors.warehousename}
+                      onChange={formik.handleChange}
+                    />
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
                     <Box component="div" className={classes.labelSize}>
                       Address
                     </Box>
-                  <TextField fullWidth variant="outlined" />
+                    <MDInput
+                      fullWidth
+                      variant="outlined"
+                      type="text"
+                      name="address"
+                      value={formik.values.address}
+                      error={formik.touched.address && Boolean(formik.errors.address)}
+                      helperText={formik.touched.address && formik.errors.address}
+                      onChange={formik.handleChange}
+                    />
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
                     <Box component="div" className={classes.labelSize}>
                       Types of inventories hosted
                     </Box>
-                  <TextField fullWidth variant="outlined" />
+                    <MDInput
+                      multiple
+                      select
+                      fullWidth
+                      variant="outlined"
+                      name="inventorytype"
+                      input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
+                      value={formik.values.inventorytype}
+                      error={formik.touched.inventorytype && Boolean(formik.errors.inventorytype)}
+                      helperText={formik.touched.inventorytype && formik.errors.inventorytype}
+                      renderValue={(selected) => (
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                          {selected.map((value) => (
+                            <Chip key={value} label={value} />
+                          ))}
+                        </Box>
+                      )}
+                      MenuProps={MenuProps}
+                      onChange={formik.handleChange}
+                    >
+                      <MenuItem key={''} value={''}>
+                        No Selected // Or Empty
+                      </MenuItem>
+                      {names.map((name) => (
+                        <MenuItem key={name} value={name}>
+                          {name}
+                        </MenuItem>
+                      ))}
+                    </MDInput>
                   </Box>
                   <Box component="div" sx={{ marginBottom: '15px' }}>
                     <Box component="div" className={classes.labelSize}>
                       Other attributes
                     </Box>
-                  <TextField fullWidth variant="outlined" />
+                    <MDInput
+                      fullWidth
+                      type="text"
+                      variant="outlined"
+                      name="attributes"
+                      value={formik.values.attributes}
+                      error={formik.touched.attributes && Boolean(formik.errors.attributes)}
+                      helperText={formik.touched.attributes && formik.errors.attributes}
+                      onChange={formik.handleChange}
+                    />
                   </Box>
                 </Grid>
                 <Grid item xs={12} sm={6} md={6}>
@@ -79,24 +203,22 @@ function NewWarehouseDetails() {
                 <MDButton size="medium" color="error" variant="outlined">
                   CANCEL
                 </MDButton>
-              <MDButton size="medium" color="primary" variant="outlined">
+                <MDButton size="medium" color="primary" variant="outlined" type="submit">
                   SAVE
                 </MDButton>
                 <MDButton size="medium" color="primary" variant="contained">
                   NEXT
                 </MDButton>
-
-              {/* ---edit-- */}
-              <MDButton size="large" color="primary" variant="outlined">
-                EDIT DETAILS
-              </MDButton>
-              <MDButton size="large" color="primary" variant="contained">
-                SHOW DETAILS
-              </MDButton>
               </Box>
             </Box>
+          </form>
         </Box>
       </DashboardLayout>
+      <SnackBar
+        open={open}
+        message="new warehouse created successfully"
+        handleClose={handleClose}
+      />
     </>
   );
 }

src/pages/warehouse/index.js

@@ -8,11 +8,13 @@ import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { WarehouseSelectors } from 'redux/WarehouseRedux';
 import WarehouseIcon from 'assets/images/WarehouseIcon';
+import MDButton from 'components/Button';
+import { useNavigate } from 'react-router-dom';
 
 function WarehouseScreen() {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
-
   useEffect(() => {
     dispatch(
       WarehouseActions.warehouseDataAction({
@@ -25,12 +27,16 @@ function WarehouseScreen() {
 
   return (
     <DashboardLayout>
-      <DashboardNavbar />
+      <DashboardNavbar>
+        <MDButton sx={{ ml: 3 }} color="primary" onClick={() => navigate('/warehouse-form')}>
+          + Add new
+        </MDButton>
+      </DashboardNavbar>
       <TileBasic
         tiles={warehouseData.map((warehouse) => ({
           ...warehouse,
           icon: <WarehouseIcon height={96} width={96} />,
-          path: '/'
+          path: '/edit-warehouse-design-form'
         }))}
       />
       <Footer />

src/redux/WarehouseRedux.js

@@ -7,7 +7,15 @@ import { getFetchingValue, getErrorValue } from '../services/Utils';
 const { Types, Creators } = createActions({
   warehouseDataAction: ['payload'],
   warehouseDataSuccess: ['data'],
-  warehouseDataFailure: ['error']
+  warehouseDataFailure: ['error'],
+
+  createWarehouseAction: ['payload'],
+  createWarehouseSuccess: ['data'],
+  createWarehouseFailure: ['error'],
+
+  editWarehouseAction: ['payload'],
+  editWarehouseSuccess: ['data'],
+  editWarehouseFailure: ['error']
 });
 
 export const WarehouseTypes = Types;
@@ -17,12 +25,22 @@ export default WarehouseActions;
 /* ------------- Initial State ------------- */
 export const INITIAL_STATE = Immutable({
   warehouseDetail: [],
-  error: {}
+  error: {},
+
+  createWarehouse: [],
+  createWarehouseLoading: false,
+  createWarehouseError: {},
+
+  editWarehouse: [],
+  editWarehouseLoading: false,
+  editWarehouseError: {}
 });
 
 /* ------------- Selectors ------------- */
 export const WarehouseSelectors = {
-  getWarehouseDetail: (state) => state.warehouse.warehouseDetail
+  getWarehouseDetail: (state) => state.warehouse.warehouseDetail,
+  createWarehouseDetail: (state) => state.warehouse.createWarehouse,
+  editWarehouseDetail: (state) => state.warehouse.editWarehouse
 };
 
 /* ------------- Reducers ------------- */
@@ -45,9 +63,54 @@ export const onWarehouseDataFailure = (state, { error }) =>
     error: { ...state.error, [error?.loader]: error?.error }
   });
 
+export const onCreateWarehouseAction = (state, { payload }) =>
+  state.merge({
+    fetching: _.uniq([state.fetching, payload?.loader]),
+    error: getErrorValue(state?.error, payload?.loader)
+  });
+
+export const onCreateWarehouseSuccess = (state, { data }) =>
+  state.merge({
+    fetching: getFetchingValue(state.fetching, data?.loader),
+    error: getErrorValue(state?.error, data?.loader),
+    createWarehouse: data.createWarehouse
+  });
+
+export const onCreateWarehouseFailure = (state, { error }) =>
+  state.merge({
+    fetching: _.without(state.fetching, error?.loader),
+    error: { ...state.error, [error?.loader]: error?.error }
+  });
+
+export const onEditWarehouseAction = (state, { payload }) =>
+  state.merge({
+    fetching: _.uniq([state.fetching, payload?.loader]),
+    error: getErrorValue(state?.error, payload?.loader)
+  });
+
+export const onEditWarehouseSuccess = (state, { data }) =>
+  state.merge({
+    fetching: getFetchingValue(state.fetching, data?.loader),
+    error: getErrorValue(state?.error, data?.loader),
+    editWarehouse: data.editWarehouse
+  });
+
+export const onEditWarehouseFailure = (state, { error }) =>
+  state.merge({
+    fetching: _.without(state.fetching, error?.loader),
+    error: { ...state.error, [error?.loader]: error?.error }
+  });
 /* ------------- Hookup Reducers To Types ------------- */
 export const warehouseReducer = createReducer(INITIAL_STATE, {
   [Types.WAREHOUSE_DATA_ACTION]: onWarehouseDataAction,
   [Types.WAREHOUSE_DATA_SUCCESS]: onWarehouseDataSuccess,
-  [Types.WAREHOUSE_DATA_FAILURE]: onWarehouseDataFailure
+  [Types.WAREHOUSE_DATA_FAILURE]: onWarehouseDataFailure,
+
+  [Types.CREATE_WAREHOUSE_ACTION]: onCreateWarehouseAction,
+  [Types.CREATE_WAREHOUSE_SUCCESS]: onCreateWarehouseSuccess,
+  [Types.CREATE_WAREHOUSE_FAILURE]: onCreateWarehouseFailure,
+
+  [Types.EDIT_WAREHOUSE_ACTION]: onEditWarehouseAction,
+  [Types.EDIT_WAREHOUSE_SUCCESS]: onEditWarehouseSuccess,
+  [Types.EDIT_WAREHOUSE_FAILURE]: onEditWarehouseFailure
 });

src/routes/index.js

@@ -52,6 +52,7 @@ import UserAccessScreen from 'pages/useraccess';
 import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import SetupHome from 'pages/setup';
 import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
+import EditWarehouseDetails from 'pages/editWarehouseDetails';
 import LabelingHome from 'pages/labellingHome';
 import SetupInventory from 'pages/setupInventory';
 
@@ -170,10 +171,17 @@ const protectedRoutes = [
         component: <UserAccessScreen />
       },
       {
-        name: 'New/Edit Warehouse Details',
+        name: 'Add Warehouse Details',
         key: 'warehouse-form',
         route: '/warehouse-form',
         component: <NewWarehouseDetails />
+      },
+      {
+        name: 'Edit Warehouse Details',
+        key: 'warehouse-form',
+        route: '/edit-warehouse-design-form',
+        hide: true,
+        component: <EditWarehouseDetails />
       }
     ]
   }

src/sagas/Warehouse.js

@@ -28,4 +28,58 @@ export function* onRequestWarehouseData({ payload }) {
   }
 }
 
-export default [takeLatest(WarehouseTypes.WAREHOUSE_DATA_ACTION, onRequestWarehouseData)];
+export function* onRequestCreateWarehouse({ payload }) {
+  const response = yield call(
+    ApiServices[payload?.method],
+    AuthorizedAPI,
+    payload?.slug,
+    payload?.data
+  );
+  if (response?.status === 200) {
+    yield put(
+      WarehouseActions.createWarehouseSuccess({
+        loader: payload?.loader,
+        createWarehouse: response?.data?.data
+      })
+    );
+  } else {
+    payload.onFailedCreateWarehouse(response.data.error);
+    yield put(
+      WarehouseActions.createWarehouseFailure({
+        loader: payload?.loader,
+        error: response?.data
+      })
+    );
+  }
+}
+
+export function* onRequestEditWarehouse({ payload }) {
+  const response = yield call(
+    ApiServices[payload?.method],
+    AuthorizedAPI,
+    payload?.slug,
+    payload?.data
+  );
+  if (response?.status === 200) {
+    yield put(
+      WarehouseActions.editWarehouseSuccess({
+        loader: payload?.loader,
+        createWarehouse: response?.data?.data
+      })
+    );
+  } else {
+    payload.onFailedEditWarehouse(response.data.error);
+    yield put(
+      WarehouseActions.editWarehouseFailure({
+        loader: payload?.loader,
+        error: response?.data
+      })
+    );
+  }
+}
+
+export default [
+  takeLatest(WarehouseTypes.WAREHOUSE_DATA_ACTION, onRequestWarehouseData),
+  takeLatest(WarehouseTypes.CREATE_WAREHOUSE_ACTION, onRequestCreateWarehouse),
+  takeLatest(WarehouseTypes.EDIT_WAREHOUSE_ACTION, onRequestEditWarehouse)
+];

src/services/ValidationServices.js

@@ -17,6 +17,13 @@ const schema = {
     password: Yup.string('Enter your password')
       .min(8, 'Password should be of minimum 8 characters length')
       .required('Password is required')
+  }),
+
+  warehouseForm: Yup.object({
+    warehousename: Yup.string('Enter warehouse name').required('warehouse name is required'),
+    address: Yup.string('Enter address').required('address is required'),
+    inventorytype: Yup.string('Enter inventory Type').required('inventory Type is required'),
+    attributes: Yup.string('Enter other attributes').required('attributes is required')
   })
 };