@os1-platform/dispatch-mobile 2.1.2 → 2.1.4

package/src/components/widgets/SplitTextInput.tsx

@@ -0,0 +1,116 @@
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  KeyboardTypeOptions,
+} from 'react-native';
+import React, { useRef, useState } from 'react';
+
+export interface SplitTextInputProps {
+  styles: any;
+  value: string;
+  onChange: (text: string) => void;
+  maxLength: number;
+  keyboardType: KeyboardTypeOptions;
+  hasError: boolean;
+}
+
+const SplitTextInput = ({
+  styles,
+  value,
+  onChange,
+  maxLength,
+  keyboardType,
+  hasError,
+}: SplitTextInputProps) => {
+  const inputRef: any = useRef();
+  const boxArray = new Array(maxLength).fill(0);
+  const [isInputBoxFocused, setIsInputBoxFocused] = useState(false);
+
+  const handleOnPress = () => {
+    setIsInputBoxFocused(true);
+    inputRef.current.focus();
+  };
+
+  const handleOnBlur = () => {
+    setIsInputBoxFocused(false);
+  };
+
+  const boxDigit = (_: number, index: number) => {
+    const digit = value[index] || '';
+
+    const isCurrentValue = index === value.length;
+    const isLastValue = index === maxLength - 1;
+    const isCodeComplete = value.length === maxLength;
+
+    const isValueFocused = isCurrentValue || (isLastValue && isCodeComplete);
+
+    const splitBoxesStyle = Boolean(hasError)
+      ? widgetStyles.errorSplitBoxes
+      : (isInputBoxFocused && isValueFocused) || value[index]
+      ? widgetStyles.focusedSplitBoxes
+      : widgetStyles.splitBoxes;
+
+    return (
+      <View style={splitBoxesStyle} key={index}>
+        <Text style={styles}>{digit}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <>
+      <Pressable onPress={handleOnPress} style={widgetStyles.splitContainer}>
+        {boxArray.map(boxDigit)}
+      </Pressable>
+      <TextInput
+        style={widgetStyles.textInputHidden}
+        value={value}
+        onChangeText={onChange}
+        maxLength={maxLength}
+        ref={inputRef}
+        onBlur={handleOnBlur}
+        keyboardType={keyboardType}
+      />
+    </>
+  );
+};
+
+export default SplitTextInput;
+
+const widgetStyles = StyleSheet.create({
+  splitContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  splitBoxes: {
+    borderColor: '#dddddd',
+    borderWidth: 2,
+    borderRadius: 5,
+    padding: 12,
+    minWidth: 50,
+  },
+  focusedSplitBoxes: {
+    borderColor: '#666666',
+    borderWidth: 2,
+    borderRadius: 5,
+    padding: 12,
+    minWidth: 50,
+  },
+  errorSplitBoxes: {
+    borderColor: '#DC2626',
+    borderWidth: 2,
+    borderRadius: 5,
+    padding: 12,
+    minWidth: 50,
+  },
+  textInputHidden: {
+    height: 30,
+    width: 300,
+    position: 'absolute',
+    opacity: 0,
+  },
+});

package/src/components/widgets/TabsComponent.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+
+export interface Tab {
+  title: string;
+  count: number;
+  titleStyle?: any;
+}
+
+interface TabsComponentProps {
+  tabs: Array<Tab>;
+  initialTab: Tab;
+  onTabChange: (currentTab: string) => void;
+  renderTabItem: (tab: Tab) => JSX.Element;
+  renderBody: (currentTab: string) => JSX.Element | null;
+}
+
+const TabsComponent = (props: TabsComponentProps) => {
+  const [activeTab, setActiveTab] = useState(props.initialTab.title);
+
+  const handleTabPress = (tabName: string) => {
+    setActiveTab(tabName);
+    props.onTabChange(tabName);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={{ flexDirection: 'row' }}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.tabsContainer}
+        >
+          {props.tabs.map((tab: Tab) => {
+            return (
+              <TouchableOpacity
+                key={tab.title}
+                style={[
+                  styles.tabItem,
+                  activeTab === tab.title && styles.activeTab,
+                  tab.titleStyle ? tab.titleStyle : {},
+                ]}
+                onPress={() => handleTabPress(tab.title)}
+              >
+                {props.renderTabItem(tab)}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+
+      {/* Render content based on the active tab */}
+      <View style={styles.contentContainer}>{props.renderBody(activeTab)}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#f0f0f0',
+    flexGrow: 1,
+    paddingHorizontal: 20,
+  },
+  tabItem: {
+    // width: 200,
+    alignItems: 'center',
+    paddingVertical: 10,
+    marginHorizontal: 10,
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: 'blue',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});
+
+export default TabsComponent;

package/src/components/widgets/Toaster.ts

@@ -0,0 +1,8 @@
+import { Alert, Platform, ToastAndroid } from 'react-native';
+
+export function showToast(message: string) {
+  if (Platform.OS === 'android') ToastAndroid.show(message, ToastAndroid.SHORT);
+  else {
+    Alert.alert('Info', message);
+  }
+}

package/src/config/DispatchSDKConfig.ts

@@ -0,0 +1,4 @@
+export const enum ERROR_TAGS {
+  FCM = 'FCM',
+  EXECUTION_TASK = 'EXECUTION_TASK',
+}

package/src/constants/apiConstants.ts

@@ -0,0 +1,11 @@
+export const ENDPOINTS = {
+  JOB_REMOVAL: (dispatchId: string) =>
+    `/dispatches/${dispatchId}/multiple-jobs`,
+  // NEW CODE
+  BULK_JOB_UPDATE: (dispatchId: string) =>
+    `/api/v2/produce/${dispatchId}/job-bulk-update`,
+};
+
+export const API_CONFIG = {
+  timeout: 15000, // timeout in millis i.e 15s
+};

package/src/constants/constants.ts

@@ -0,0 +1,12 @@
+export const LOCAL_STORAGE_KEY_PREFIX = '@dispatch-sdk:';
+export const DEFAULT_NOTIFICATION_TITLE = 'Dispatch Sync Manager';
+export const DEFAULT_NOTIFICATION_DESCRIPTION = 'Syncing Events & Files';
+export const DEFAULT_INTERVAL = 10000;
+export const DEFAULT_PICKUP_TITLE = 'Pickup Order';
+export const DEFAULT_PICKUP_MESSAGE = 'Confirm Pickup of $ orders';
+export const DEFAULT_DELIVER_TITLE = 'Drop Order';
+export const DEFAULT_DELIVER_MESSAGE = 'Confirm Drop of $ orders';
+export const DEFAULT_SIGN_ET_MESSAGE =
+  'Please sign here';
+export const REASON_NOT_USED = 'NOT_TO_BE_USED';
+export const GO_BACK_EVENT_CODE = 'E-099';

package/src/constants/statuscode.ts

@@ -0,0 +1,8 @@
+enum StatusCode {
+  Unauthorized = 401,
+  Forbidden = 403,
+  TooManyRequests = 429,
+  InternalServerError = 500,
+}
+
+export default StatusCode;

package/src/errors/BaseError.ts

@@ -0,0 +1,16 @@
+/**
+ * A general error class that should be used for all errors in Expo modules.
+ * Guarantees a `code` field that can be used to differentiate between different
+ * types of errors without further subclassing Error.
+ */
+export class BaseError extends Error {
+  code: string;
+  info?: any;
+
+  constructor(code: string, message: string, info?: string) {
+    super(message);
+    this.code = code;
+    if (info) this.info = info;
+    else this.info = message;
+  }
+}

package/src/errors/ErrorCodes.ts

@@ -0,0 +1,38 @@
+const enum BaseErrorCodes {
+  InvalidArgumentError = '100100',
+  InvalidBaseURL = '100101',
+  SyncManagerNotInitialized = '100102',
+  MissingOrInvalidProps = '100103',
+  SQLiteDBIssue = '100104',
+  AppSyncNotInitialized = '100105',
+  FMS_FOLDER_CREATION_ERROR = '100106',
+  REASON_CODE_API_ERROR = '100107',
+  MERGING_ERROR = '100108',
+  LOCATION_PERMISSION_DENIED = '100109',
+  CAMERA_PERMISSION_DENIED = '100110',
+  STORAGE_PERMISSION_DENIED = '100111',
+  GRAPHQL_CLIENT_NOT_INITIALIZED = '100112',
+  FMS_GRAPHQL_API_ERROR = '100113',
+  INTERNET_NOT_ENABLED = '100114',
+  LOCATION_OR_GPS_NOT_ENABLED = '100115',
+  EXECUTION_ENGINE_ERROR = '100116',
+  UNEXPECTED_ERROR = '100117',
+  SYSTEM_TIME_CHECK_FAILED = '100118',
+  ACCESS_TOKEN_EXPIRED = '100119',
+  MULTI_OBJECTIVE_ERROR = '100119',
+}
+export const InvalidArgumentsError = 'Missing or invalid arguments';
+export const InvalidBaseURL = 'URL is invalid';
+export const SyncManagerNotInitialized =
+  'Sync Manager is not initialized.Please call init method first';
+
+export const AppSyncInitError =
+  "App sync Manager not initialized.Please call initSyncManager() with valid BASE URLs from your app's index file";
+
+export const MissingOrInvalidProps =
+  'One or more prop(s) is missing or invalid';
+
+export const MultiObjectiveError =
+  'Multiple objective not allowed as enableMultiObjectiveFlow is false.';
+
+export default BaseErrorCodes;

package/src/events/EventDispatcher.ts

@@ -0,0 +1,22 @@
+import { NativeEventEmitter, NativeModules } from 'react-native';
+import { BaseEvents } from './constants';
+import type { eventType } from './interface';
+import Logger, { LOG_TYPE } from '../utils/Logger';
+
+const { RNEventEmitter } = NativeModules;
+const eventEmitter = new NativeEventEmitter(RNEventEmitter);
+
+const events = (type: eventType, customEtName: string) => {
+  return `${BaseEvents[type]}:${customEtName}`;
+};
+
+const dispatchEvent = (type: eventType, customEtName: string, data: any) => {
+  /* Logger.getInstance().logEvent(
+    'eventOutputData: ',
+    JSON.stringify({ type, customEtName, data }),
+    LOG_TYPE.SDK_INFO
+  ); */
+  eventEmitter.emit(events(type, customEtName), data);
+};
+
+export default dispatchEvent;

package/src/events/EventListener.ts

@@ -0,0 +1,14 @@
+import { DeviceEventEmitter } from 'react-native';
+
+const eventListener = {
+  on(event: string, callback: Function) {
+    DeviceEventEmitter.addListener(event, (e: any) => {
+      callback(e);
+    });
+  },
+  remove(event: string) {
+    DeviceEventEmitter.removeAllListeners(event);
+  },
+};
+
+export default eventListener;

package/src/events/constants.ts

@@ -0,0 +1,7 @@
+export const BaseEvents = {
+  START: `onTaskStart`,
+  END: `onTaskEnd`,
+  BACK: `onTaskBack`,
+  ON_SCAN: `onScan`,
+  ON_SCAN_REMOVE: `onScanRemove`,
+};

package/src/events/index.ts

@@ -0,0 +1,3 @@
+import EventListener from './EventListener';
+
+export default EventListener;

package/src/events/interface.ts

@@ -0,0 +1 @@
+export type eventType = 'START' | 'END' | 'BACK' | 'ON_SCAN' | 'ON_SCAN_REMOVE';

package/src/icons/ScanIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IconProps } from './interface';
+import { Path, Svg } from 'react-native-svg';
+import { View } from 'react-native';
+
+const ScanIcon = (props: IconProps) => {
+  return (
+    <View>
+      <Svg
+        width={props.width || '80'}
+        height={props.height || '80'}
+        viewBox="0 0 80 80"
+        fill="none"
+      >
+        <Path
+          d="M30.8889 25.2222C29.9417 25.2222 29.1667 25.9972 29.1667 26.9445V51.0556C29.1667 52.0028 29.9417 52.7778 30.8889 52.7778C31.8361 52.7778 32.6111 52.0028 32.6111 51.0556V26.9445C32.6111 25.9972 31.8361 25.2222 30.8889 25.2222ZM55 52.7778C55.952 52.7778 56.7222 52.0076 56.7222 51.1524V27.0413C56.7222 25.9972 55.9472 25.2222 55 25.2222C54.0528 25.2222 53.2778 25.9972 53.2778 26.9445V51.0556C53.2778 52.0028 54.0528 52.7778 55 52.7778ZM37.7778 25.2222C36.8306 25.2222 36.0556 25.9972 36.0556 26.9445V51.0556C36.0556 52.0028 36.8306 52.7778 37.7778 52.7778C38.725 52.7778 39.5 52.0075 39.5 51.0556V26.9445C39.5 25.9972 38.725 25.2222 37.7778 25.2222ZM46.3889 25.2222C45.4369 25.2222 44.6667 25.9925 44.6667 26.9445V51.0556C44.6667 52.0075 45.4369 52.7778 46.3889 52.7778C47.3408 52.7778 48.1111 52.0075 48.1111 51.0556V26.9445C48.1111 25.9972 47.3361 25.2222 46.3889 25.2222ZM24 25.2222C23.0528 25.2222 22.2778 25.9972 22.2778 26.9445V51.0556C22.2778 52.0028 23.0528 52.7778 24 52.7778C24.9472 52.7778 25.7222 52.0028 25.7222 51.0556V26.9445C25.7222 25.9972 24.9472 25.2222 24 25.2222ZM24 11.4445H10.2222C9.27026 11.4445 8.5 12.2147 8.5 13.1667V26.9445C8.5 27.8917 9.27026 28.6667 10.2222 28.6667C11.1742 28.6667 11.9444 27.8917 11.9444 26.9445V14.8889H24C24.9472 14.8889 25.7222 14.1182 25.7222 13.1667C25.7222 12.2152 24.9472 11.4445 24 11.4445ZM68.7778 11.4445H55C54.0528 11.4445 53.2778 12.2147 53.2778 13.1667C53.2778 14.1186 54.0528 14.8889 55 14.8889H67.0556V26.9445C67.0556 27.8917 67.8306 28.6667 68.7778 28.6667C69.725 28.6667 70.5 27.8917 70.5 26.9445V13.1667C70.5 12.2147 69.725 11.4445 68.7778 11.4445ZM68.7778 49.3334C67.8258 49.3334 67.0556 50.1036 67.0556 51.0556V63.1111H55C54.048 63.1111 53.2778 63.8814 53.2778 64.8334C53.2778 65.7853 54.048 66.5556 55 66.5556H68.7778C69.7297 66.5556 70.5 65.7853 70.5 64.8334V51.0556C70.5 50.1083 69.725 49.3334 68.7778 49.3334ZM24 63.1111H11.9444V51.0556C11.9444 50.1083 11.1737 49.3334 10.2222 49.3334C9.27069 49.3334 8.5 50.1083 8.5 51.0556V64.8334C8.5 65.7806 9.27026 66.5556 10.2222 66.5556H24C24.9472 66.5556 25.7222 65.7806 25.7222 64.8334C25.7222 63.8861 24.9472 63.1111 24 63.1111Z"
+          fill={props.fill || '#5B80F7'}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export default ScanIcon;

package/src/icons/circleMark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9414 7.06434C12.6973 6.82067 12.3016 6.82067 12.0578 7.06434L10 9.11891L7.94141 7.06434C7.69727 6.82067 7.30156 6.82067 7.05781 7.06434C6.81406 7.308 6.81367 7.70293 7.05781 7.94621L9.11719 10L7.05859 12.0546C6.81445 12.2982 6.81445 12.6932 7.05859 12.9364C7.30258 13.1799 7.69805 13.1803 7.94219 12.9364L10 10.8811L12.0582 12.9353C12.3022 13.1788 12.6977 13.1791 12.9418 12.9353C13.1859 12.6916 13.1859 12.2967 12.9418 12.0534L10.8828 10L12.941 7.94582C13.1875 7.70371 13.1875 7.30605 12.9414 7.06434ZM10 0.0195312C4.47656 0.0195312 0 4.48735 0 10C0 15.5126 4.47656 19.9805 10 19.9805C15.5234 19.9805 20 15.5126 20 10C20 4.48735 15.5234 0.0195312 10 0.0195312ZM10 18.7329C5.17578 18.7329 1.25 14.8148 1.25 10C1.25 5.1852 5.17578 1.26709 10 1.26709C14.8242 1.26709 18.75 5.1852 18.75 10C18.75 14.8148 14.8242 18.7329 10 18.7329Z" fill="#A3AAC2"/>
+</svg>

package/src/icons/file.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { IconProps } from './interface';
+import { View } from 'react-native';
+
+const FileIcon = (props: IconProps) => {
+  return (
+    <View>
+      <Svg
+        width={props.width || '80'}
+        height={props.height || '80'}
+        viewBox="0 0 80 80"
+        fill="none"
+      >
+        <Path
+          d="M21.5 55.4375C19.5332 55.4375 17.9375 57.0317 17.9375 59C17.9375 60.9668 19.5332 62.5625 21.5 62.5625C23.4683 62.5625 25.0625 60.9668 25.0625 59C25.0625 57.0258 23.4742 55.4375 21.5 55.4375ZM59.5 56.625H33.375C32.0688 56.625 31 57.6937 31 59C31 60.3063 32.0622 61.375 33.375 61.375H59.5C60.8128 61.375 61.875 60.3128 61.875 59C61.875 57.6872 60.8063 56.625 59.5 56.625ZM22.2867 44.75C22.8944 44.75 23.5021 44.5181 23.9655 44.0541L32.6744 35.3453C33.6021 34.4176 33.6021 32.9139 32.6744 31.9876C31.7466 31.0614 30.243 31.0599 29.3167 31.9876L22.2867 39.0203L19.6163 36.3484C18.6886 35.4207 17.1849 35.4207 16.2587 36.3484C15.3324 37.2762 15.3309 38.7798 16.2587 39.7061L20.6123 44.0598C21.0755 44.5125 21.6826 44.75 22.2867 44.75ZM21.5 24.5625C23.4683 24.5625 25.0625 22.9668 25.0625 21C25.0625 19.0317 23.4683 17.4375 21.5 17.4375C19.5332 17.4375 17.9375 19.0258 17.9375 21C17.9375 22.9742 19.5332 24.5625 21.5 24.5625ZM59.5 37.625H38.125C36.8188 37.625 35.75 38.6937 35.75 40C35.75 41.3063 36.8122 42.375 38.125 42.375H59.5C60.8128 42.375 61.875 41.3128 61.875 40C61.875 38.6872 60.8063 37.625 59.5 37.625ZM64.25 2H16.75C11.5027 2 7.25 6.25273 7.25 11.5V68.5C7.25 73.7473 11.5027 78 16.75 78H64.25C69.4973 78 73.75 73.7473 73.75 68.5V11.5C73.75 6.25273 69.4898 2 64.25 2ZM69 68.5C69 71.1184 66.8684 73.25 64.25 73.25H16.75C14.1316 73.25 12 71.1184 12 68.5V11.5C12 8.88156 14.1316 6.75 16.75 6.75H64.25C66.8684 6.75 69 8.88156 69 11.5V68.5ZM59.5 18.625H33.375C32.0688 18.625 31 19.6938 31 21C31 22.3062 32.0622 23.375 33.375 23.375H59.5C60.8128 23.375 61.875 22.3128 61.875 21C61.875 19.6872 60.8063 18.625 59.5 18.625Z"
+          fill={props.fill || '#E0E3EB'}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export default FileIcon;

package/src/icons/interface.ts

@@ -0,0 +1,5 @@
+export interface IconProps {
+  width?: string;
+  height?: string;
+  fill?: string;
+}

package/src/index.tsx

@@ -0,0 +1,82 @@
+import Storage from './utils/storage';
+import type * as ETaskSchema from './components/executiontasks/ExecutionTasksIndex';
+import * as ExecutionTask from './components/executiontasks/ExecutionTasksIndex';
+import type {
+  MTSInitRequest,
+  MTSStartRequest,
+} from '@foxtrotplatform/platform-coreos-mts-sdk';
+import * as MtsSdk from '@foxtrotplatform/platform-coreos-mts-sdk';
+import NativeSyncManager from './manager/syncmanager/NativeSyncManager';
+import type { DocumentRow, EventRow } from './manager/syncmanager/DBConfig';
+import { SyncMethod, DispatchSyncType } from './manager/syncmanager/DBConfig';
+import CancelOrderDialog from './components/widgets/CancelOrderDialog';
+import useFCMMessage, {
+  getFCMToken,
+  registerBackgroundHandler,
+  requestFirebasePermissions,
+  onNotificationOpenedApp,
+  onTokenRefresh,
+  getInitialNotification,
+} from './utils/fcm/FcmUtils';
+import FCM from './utils/fcm/FCM';
+import DispatchExecNavigator from './components/dispatch/DispatchExecNavigator';
+import DispatchStateContainer from './manager/dispatch/DispatchStateContainer';
+import { DispatchSDKManager } from './manager/sdk/DispatchSDKManager';
+import Logger, { LOG_TYPE } from './utils/Logger';
+import type {
+  ETSummary,
+  CompleteSummary,
+  ObjectiveSummary,
+} from './models/execTasks/ETBaseModels';
+import SdkUtils from './utils/SdkUtils';
+import AppSyncManager from './manager/syncmanager/AppSyncManager';
+import type {
+  JobObjectiveType,
+  endEvent,
+  startEvent,
+  onScanRemoveEvent,
+  onScanEvent,
+} from './models/DispatchModels';
+import { SdkSyncType } from './models/DispatchModels';
+import EventListener from './events';
+import { BaseEvents } from './events/constants';
+import {
+  DispatchExecutor,
+  IDispatch,
+  IDispatchExecutor,
+} from '@os1-platform/platform-coreos-execution-engine-sdk';
+import Helper from './utils/helper';
+
+export { DispatchExecutor, IDispatch, IDispatchExecutor };
+export { Storage, DispatchExecNavigator };
+export { ETSummary, CompleteSummary, ObjectiveSummary, DispatchSyncType };
+export { BaseEvents, endEvent, startEvent, onScanRemoveEvent, onScanEvent };
+export {
+  NativeSyncManager,
+  AppSyncManager,
+  SdkSyncType,
+  EventRow,
+  DocumentRow,
+  useFCMMessage,
+  getFCMToken,
+  requestFirebasePermissions,
+  FCM,
+  registerBackgroundHandler,
+  onNotificationOpenedApp,
+  onTokenRefresh,
+  getInitialNotification,
+  DispatchStateContainer,
+  SdkUtils,
+  Logger,
+  LOG_TYPE,
+  EventListener,
+};
+
+export { SyncMethod, JobObjectiveType };
+export type { ETaskSchema };
+export { ExecutionTask, CancelOrderDialog };
+export { DispatchSDKManager };
+
+export type { MTSStartRequest, MTSInitRequest };
+export { MtsSdk };
+export { Helper };

package/src/locale/Str.ts

@@ -0,0 +1,15 @@
+export default {
+    //value variable constants
+    count: 'count',
+
+    //string constants
+    DEFAULT_PICKUP_MESSAGE: 'DEFAULT_PICKUP_MESSAGE',
+    DEFAULT_DELIVER_MESSAGE: 'DEFAULT_DELIVER_MESSAGE',
+    DEFAULT_RETURN_MESSAGE: 'DEFAULT_RETURN_MESSAGE',
+    Expected_Shipments: 'Expected_Shipments',
+    Expected_Shipment: 'Expected_Shipment',
+    Shipment_handed_over: 'Shipment_handed_over',
+    Shipments_handed_over: 'Shipments_handed_over',
+    shipments: 'shipments',
+    skip: 'skip'
+}

package/src/locale/en.json

@@ -0,0 +1,7 @@
+{
+    "Expected_Shipment": "Expected Shipment",
+    "Expected_Shipments": "Expected Shipments",
+    "Shipment_handed_over": "Shipment handed over",
+    "Shipments_handed_over": "Shipments handed over",
+    "skip": "Skip"
+}

package/src/locale/i18n.ts

@@ -0,0 +1,26 @@
+import { I18n } from "i18n-js";
+import en from './en.json';
+
+const i18n = new I18n({
+    en: {
+        ...en,
+        DEFAULT_PICKUP_MESSAGE: {
+            one: "Confirm Pickup of 1 order",
+            other: "Confirm Pickup of %{count} orders",
+        },
+        DEFAULT_DELIVER_MESSAGE: {
+            one: "Confirm Drop of 1 order",
+            other: "Confirm Drop of %{count} orders"
+        },
+        DEFAULT_RETURN_MESSAGE: {
+            one: "Confirm Return of 1 order",
+            other: "Confirm Return of %{count} orders"
+        },
+        shipments: {
+            one: "(%{count} shipment)?",
+            other: "(%{count} shipments)?"
+        }
+    }
+});
+
+export default i18n;

package/src/locale/util.ts

@@ -0,0 +1,20 @@
+import i18n from "./i18n";
+
+export const getStr = (str: string) => {
+    try {
+        return i18n.t(str);
+    } catch (error) {
+
+        return str;
+    }
+};
+
+export const getStrVal = (str: string, varName: string, varVal: any) => {
+    try {
+        let dataObj: { [k: string]: any } = {};
+        dataObj[varName] = varVal;
+        return i18n.t(str, dataObj);
+    } catch (error) {
+        return str;
+    }
+};