OBLS-381 prepare a mocked ui for replenishment

src/components/PickingShortAndReasonModal/styles.ts

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
+
+export default StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  modalContent: {
+    width: '90%',
+    backgroundColor: 'white',
+    padding: Theme.spacing.large,
+    borderRadius: Theme.roundness * 2
+  },
+  modalSurface: {
+    width: '90%',
+    borderRadius: 8,
+    padding: 16,
+    elevation: 4,
+    backgroundColor: 'white'
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  modalContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  modalTitleText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: Theme.colors.text,
+    flexShrink: 1
+  },
+  modalDescription: {
+    fontSize: 14,
+    color: Theme.colors.text,
+    marginBottom: Theme.spacing.medium
+  },
+  dialogActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: Theme.spacing.medium
+  }
+});

src/components/ProductDetails/styles.ts

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
+
+export default StyleSheet.create({
+  productDetails: {
+    backgroundColor: Theme.colors.surface,
+    padding: Theme.spacing.large,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  chipDefault: {
+    height: 28,
+    justifyContent: 'flex-start',
+    borderRadius: 4,
+    alignItems: 'center'
+  },
+  chipText: {
+    fontSize: 12,
+    color: Theme.colors.text
+  },
+  fontBold: {
+    fontWeight: 'bold'
+  },
+  title: {
+    fontSize: 18,
+    color: Theme.colors.text,
+    fontWeight: 'bold'
+  },
+  divider: {
+    marginVertical: Theme.spacing.small
+  },
+  marginTopSmall: {
+    marginTop: Theme.spacing.small
+  }
+});

src/components/Providers.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Provider } from 'react-native-paper';
+
+import { PickingProvider } from '../screens/Picking/PickingContext';
+import { ReplenishmentProvider } from '../screens/Replenishment/ReplenishmentContext';
+import Theme from '../utils/Theme';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider theme={Theme}>
+      <PickingProvider>
+        <ReplenishmentProvider>{children}</ReplenishmentProvider>
+      </PickingProvider>
+    </Provider>
+  );
+}

src/redux/sagas/others.ts

@@ -23,9 +23,10 @@ function* getReasonCodes(action: any) {
     if (action.callback) {
       yield call(action.callback, {
         error: true,
-        errorMessage: error.message
+        errorMessage: error.message ?? 'Failed To Load Reason Codes'
       });
     }
+    yield put(hideScreenLoading());
   }
 }
 

src/screens/Dashboard/dashboardData.ts

@@ -145,6 +145,13 @@ const dashboardEntries: DashboardEntry[] = [
         entryDescription: 'Enter a List ID to select the Cycle Count',
         icon: IconInventory,
         navigationScreenName: 'CycleCountListEntry'
+      },
+      {
+        key: 'replenishment',
+        screenName: 'Replenishment',
+        entryDescription: 'Manage inventory replenishment tasks',
+        icon: IconProducts,
+        navigationScreenName: 'ReplenishmentPickingLocation'
       }
     ]
   },

src/screens/Picking/PickingPickLocationScreen.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Alert, View } from 'react-native';
 import { Divider, Paragraph, Subheading } from 'react-native-paper';
 
+import { ProductDetails } from '../../components/ProductDetails';
 import { ScannerInput } from '../../components/ScannerInput';
 import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { usePickingContext } from './PickingContext';
-import { ProductDetails } from './ProductDetails';
 import styles from './styles';
 
 export default function PickingPickLocationScreen() {

src/screens/Picking/PickingPickOutboundContainerScreen.tsx

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { Alert, View } from 'react-native';
 import { Divider, Paragraph, Subheading } from 'react-native-paper';
 
+import { ProductDetails } from '../../components/ProductDetails';
 import { ScannerInput } from '../../components/ScannerInput';
 import { EMPTY_STRING } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { ReasonCode } from '../../types/picking';
 import { usePickingContext } from './PickingContext';
-import { ProductDetails } from './ProductDetails';
 import styles from './styles';
 import { revalidateTaskAndProceed } from './lib';
 

src/screens/Picking/PickingPickProductScreen.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Alert, View } from 'react-native';
 import { Divider, Paragraph, Subheading } from 'react-native-paper';
 
+import { ProductDetails } from '../../components/ProductDetails';
 import { ScannerInput } from '../../components/ScannerInput';
 import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { usePickingContext } from './PickingContext';
-import { ProductDetails } from './ProductDetails';
 import styles from './styles';
 import { isProductBarcodeValid } from '../../utils/utils';
 

src/screens/Picking/PickingPickQuantityScreen.tsx

@@ -4,13 +4,13 @@ import { Alert, TextInput, View } from 'react-native';
 import { Button, Divider, TextInput as PaperTextInput, Paragraph, Subheading } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
+import PickingShortAndReasonModal from '../../components/PickingShortAndReasonModal';
+import { ProductDetails } from '../../components/ProductDetails';
 import { HYPHEN, INPUT_FOCUS_DELAY_TIME_IN_MS } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { getReasonCodesAction } from '../../redux/actions/others';
 import { ReasonCode } from '../../types/picking';
 import { usePickingContext } from './PickingContext';
-import PickingShortAndReasonModal from './PickingShortAndReasonModal';
-import { ProductDetails } from './ProductDetails';
 import styles from './styles';
 import { revalidateTaskAndProceed } from './lib';
 

src/screens/Picking/PickingPickStagingLocationScreen.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Alert, View } from 'react-native';
 import { Divider, Paragraph, Subheading } from 'react-native-paper';
 
+import { ProductDetails } from '../../components/ProductDetails';
 import { ScannerInput } from '../../components/ScannerInput';
 import { EMPTY_STRING } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { usePickingContext } from './PickingContext';
-import { ProductDetails } from './ProductDetails';
 import styles from './styles';
 
 export default function PickingPickStagingLocationScreen() {

src/screens/Picking/styles.ts

@@ -51,28 +51,6 @@ export default StyleSheet.create({
     fontSize: 14
   },
 
-  productDetails: {
-    backgroundColor: Theme.colors.surface,
-    padding: Theme.spacing.large,
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  headerRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  chipDefault: {
-    height: 28,
-    justifyContent: 'flex-start',
-    borderRadius: 4,
-    alignItems: 'center'
-  },
-  chipText: {
-    fontSize: 12,
-    color: Theme.colors.text
-  },
-
   title: {
     fontSize: 18,
     color: Theme.colors.text,
@@ -109,91 +87,34 @@ export default StyleSheet.create({
     marginRight: Theme.spacing.small
   },
 
-  modalOverlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)'
-  },
-  modalContent: {
-    width: '90%',
-    backgroundColor: 'white',
-    padding: Theme.spacing.large,
-    borderRadius: Theme.roundness * 2
-  },
-  modalSurface: {
-    width: '90%',
-    borderRadius: 8,
-    padding: 16,
-    elevation: 4,
-    backgroundColor: 'white'
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 8
-  },
-  modalContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  modalTitleText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: Theme.colors.text,
-    flexShrink: 1
-  },
-  modalDescription: {
-    fontSize: 14,
-    color: Theme.colors.text,
-    marginBottom: Theme.spacing.medium
-  },
-
-  /** Dialog & actions **/
-  dialogActions: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: Theme.spacing.medium
-  },
-  dialogActionButton: {
-    marginLeft: Theme.spacing.small
-  },
-  dialogSuggestButton: {
-    marginVertical: Theme.spacing.medium
-  },
-  dropdownContainer: {
-    width: '50%',
-    alignSelf: 'flex-end'
-  },
   flex1: {
     flex: 1
   },
   fullWidth: {
     width: '100%'
   },
-  actionsWrapper: {
-    padding: Theme.spacing.medium,
-    alignItems: 'center',
-    borderTopWidth: 1,
-    borderTopColor: '#E0E0E0',
-    backgroundColor: 'white'
-  },
   itemCard: {
     padding: Theme.spacing.large,
     backgroundColor: 'white',
     marginBottom: Theme.spacing.small,
     borderRadius: Theme.roundness,
     elevation: 2
+  },
+
+  productDetails: {
+    backgroundColor: Theme.colors.surface,
+    padding: Theme.spacing.large,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  chipDefault: {
+    height: 28,
+    justifyContent: 'flex-start',
+    borderRadius: 4,
+    alignItems: 'center'
+  },
+  chipText: {
+    fontSize: 12,
+    color: Theme.colors.text
   }
 });