@os1-platform/dispatch-mobile 2.0.8 → 2.1.0

package/src/components/executiontasks/cancellation/CancelET.tsx

@@ -0,0 +1,281 @@
+import {
+  Alert,
+  FlatList,
+  Platform,
+  StyleSheet,
+  Text,
+  ToastAndroid,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Button, Paragraph, RadioButton } from 'react-native-paper';
+import type { CancellationInput } from './CancellationSchema';
+import { isEmptyOrBlank } from '../../../utils/utils';
+import {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+import ReasonCodeContainer from '../../../manager/dispatchCodes/ReasonCodeContainer';
+import type { ReasonsRow } from '../../../manager/syncmanager/DBConfig';
+import EventCodeContainer from '../../../manager/dispatchCodes/EventCodeContainer';
+import IconButton from '../../widgets/IconButton';
+import { AntDesign } from '@expo/vector-icons';
+
+const ICON_SIZE = 12;
+
+const CancelET = (props: CancellationInput) => {
+  const reasonsContainer = ReasonCodeContainer.getInstance();
+  const [reasonList, setReasonList] = useState(
+    props?.cancellationReasons || []
+  );
+  const [reasonsRow, setReasonsRow] = useState<ReasonsRow[]>([]);
+  const [cancelEvent, setCancelEvent] = useState(props.cancelEvent);
+  const [cancelEventCode, setCancelEventCode] = useState(props.cancelEvent);
+  const [cancelReason, setCancelReason] = useState('');
+  const [btnDisabled, setBtnDisabled] = useState(false);
+
+  const [showEventCode, setShowEventCode] = useState(
+    props?.cancellationEvents?.length ? true : false
+  );
+  const [showReasonCode, setShowReasonCode] = useState(
+    reasonList?.length > 0 ? true : false
+  );
+
+  const eventCodeIconName = showEventCode ? 'up' : 'down';
+  const reasonCodeIconName = showReasonCode ? 'up' : 'down';
+
+  const renderItem = ({ item }: { item: string }) => {
+    return (
+      <View style={{ backgroundColor: '#FFFFFF' }}>
+        <View style={[styles.reasonItemStyle, { paddingBottom: 0 }]}>
+          <RadioButton
+            color={'#5B80F7'}
+            value={item}
+            status={cancelReason === item ? 'checked' : 'unchecked'}
+            onPress={() => {
+              setCancelReason(item);
+            }}
+          />
+          <Text
+            style={styles.reasonTextStyle}
+            onPress={() => {
+              setCancelReason(item);
+            }}
+          >
+            {item}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  const renderEventsItem = ({ item }: { item: string }) => {
+    return (
+      <View style={{ backgroundColor: '#FFFFFF' }}>
+        <View style={styles.reasonItemStyle}>
+          <RadioButton
+            color={'#5B80F7'}
+            value={item}
+            status={cancelEvent === item ? 'checked' : 'unchecked'}
+            onPress={() => {
+              setCancelEvent(item);
+            }}
+          />
+          <Text
+            style={styles.reasonTextStyle}
+            onPress={() => {
+              setCancelEvent(item);
+            }}
+          >
+            {item}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (props.eventRows) {
+        const eventCode = EventCodeContainer.getEventCodeFromText(
+          cancelEvent,
+          props.eventRows
+        );
+        setCancelEventCode(eventCode);
+        const reasonCodes = await reasonsContainer.getReasonCodes(
+          props.applicableCodes || {},
+          eventCode
+        );
+        setReasonsRow(reasonCodes);
+
+        if (reasonCodes) {
+          const values: string[] = [];
+          for (let reasonCode of reasonCodes) {
+            values.push(reasonCode.description);
+          }
+          setReasonList(values);
+        }
+      }
+    })();
+  }, [cancelEvent]);
+
+  useEffect(() => {
+    if (reasonList.length) {
+      setShowEventCode(false);
+      if (!showReasonCode) setShowReasonCode(true);
+    }
+  }, [reasonList]);
+
+  return (
+    <View style={CommonStyles.mainContainer}>
+      <View style={{ flex: 1 }}>
+        {props?.cancellationEvents?.length ? (
+          <View style={showEventCode ? { flex: 1 } : {}}>
+            <TouchableOpacity
+              style={styles.codeHeaderStyle}
+              onPress={() => {
+                setShowEventCode(!showEventCode);
+              }}
+            >
+              <Text style={styles.codesHeaderTextStyle}>
+                {`${'Select Event'.toUpperCase()}`}
+              </Text>
+              <AntDesign
+                style={{ marginEnd: 10 }}
+                name={`${eventCodeIconName}`}
+                size={ICON_SIZE}
+                color="#3D445C"
+              />
+            </TouchableOpacity>
+            {showEventCode ? (
+              <FlatList
+                style={{
+                  flexGrow: 0,
+                }}
+                data={props.cancellationEvents}
+                renderItem={renderEventsItem}
+                keyExtractor={(item) => item}
+              />
+            ) : null}
+          </View>
+        ) : null}
+        {reasonList?.length > 0 ? (
+          <View style={showReasonCode ? { flex: 1 } : {}}>
+            <TouchableOpacity
+              style={styles.codeHeaderStyle}
+              onPress={() => {
+                setShowReasonCode(!showReasonCode);
+              }}
+            >
+              <Text style={styles.codesHeaderTextStyle}>
+                {`${'Select Reason'.toUpperCase()}`}
+              </Text>
+              <AntDesign
+                name={`${reasonCodeIconName}`}
+                size={ICON_SIZE}
+                color="#3D445C"
+                style={{ marginEnd: 10 }}
+              />
+            </TouchableOpacity>
+            {showReasonCode ? (
+              <FlatList
+                style={{
+                  flexGrow: 0,
+                }}
+                data={reasonList}
+                renderItem={renderItem}
+                keyExtractor={(item) => item}
+              />
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+      <View style={{ justifyContent: 'flex-end', paddingBottom: 16 }}>
+        <Button
+          disabled={btnDisabled}
+          style={[
+            CommonStyles.nextButton,
+            { marginStart: 10, marginEnd: 10, marginBottom: 10, marginTop: 10 },
+          ]}
+          labelStyle={CommonStyles.nextButtonLabel}
+          mode={'contained'}
+          onPress={() => {
+            if (
+              (!props.cancellationEvents ||
+                props.cancellationEvents.length === 1 ||
+                !isEmptyOrBlank(cancelEvent)) &&
+              (!reasonList.length || !isEmptyOrBlank(cancelReason))
+            ) {
+              setBtnDisabled(true);
+              props.onSubmitET(cancelReason, cancelEventCode, reasonsRow);
+            } else {
+              if (Platform.OS === 'android') {
+                ToastAndroid.show('No reason selected', ToastAndroid.SHORT);
+              } else {
+                Alert.alert('No reason selected');
+              }
+            }
+          }}
+        >
+          Proceed
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  codeHeaderStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 8,
+    paddingVertical: 12,
+  },
+  codesHeaderTextStyle: {
+    fontFamily:
+    Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontSize: 14,
+    color: '#9D9D9D',
+    marginStart: 10,
+  },
+  reasonTextStyle: {
+    flex: 1,
+    flexWrap: 'wrap',
+    fontFamily:
+    Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: 0.25,
+    textAlign: 'justify',
+    color: '#111111',
+  },
+  reasonItemStyle: {
+    flexDirection: 'row',
+    marginStart: 12,
+    marginEnd: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    alignItems: 'center',
+  },
+  heading: {
+    marginTop: 30,
+    marginStart: 25,
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: 0.25,
+    fontFamily:
+    Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    color: '#9D9D9D',
+  },
+});
+export default CancelET;

package/src/components/executiontasks/cancellation/CancellationSchema.ts

@@ -0,0 +1,30 @@
+/**
+ * List of reasons for cancellation
+ */
+import type {
+  EventsRow,
+  ReasonsRow,
+} from '../../../manager/syncmanager/DBConfig';
+import type {
+  ApplicableReasons,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+export type CancellationReasons = string[];
+
+export interface CancellationInput {
+  cancelEvent: string;
+  cancellationEvents?: CancellationReasons;
+  cancellationReasons?: CancellationReasons;
+  applicableCodes?: ApplicableReasons;
+  eventRows?: EventsRow[];
+  onSubmitET: (
+    reason: string,
+    event?: string,
+    reasonsRow?: ReasonsRow[]
+  ) => void;
+}
+
+export type CancellationOutput = BaseETResponse & {
+  remark: string;
+};

package/src/components/executiontasks/captureInput/CaptureInputSchema.ts

@@ -0,0 +1,52 @@
+/**
+ * Input data type
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+export type CaptureTextOutput = BaseETResponse & {
+  /**
+   * Value entered by user
+   */
+  value?: string | number;
+  /**
+   * Boolean to denote if value was validate successfully
+   */
+  validated?: boolean;
+  /**
+   * Number of attempts for this ET
+   */
+  attemptCount?: number;
+  /**
+   * Meta data related to execution of task
+   */
+};
+
+/**
+ * Input data type
+ */
+export type InputDataType = 'string' | 'number';
+/**
+ * Regex to validate input strings
+ */
+export type ValidationRegex = string;
+/**
+ * Title of instruction
+ */
+export type Title = string;
+/**
+ * Message of instruction
+ */
+export type Message = string;
+/**
+ * Can go back
+ */
+export type CanGoBack = boolean;
+
+export type CaptureTextInput = BaseETRequest & {
+  inputType: InputDataType;
+  validationRegex: ValidationRegex;
+  onSubmitET: (value: CaptureTextOutput) => void;
+};

package/src/components/executiontasks/captureInput/CaptureText.tsx

@@ -0,0 +1,172 @@
+import type { CaptureTextInput } from './CaptureInputSchema';
+import { View, Text } from 'react-native';
+import { Button, TextInput, Modal, Portal, Provider } from 'react-native-paper';
+import {
+  CommonStyles,
+  deliverETStyles,
+} from '../../../styles/executionTasks/CommonStyles';
+import React, { useState, useLayoutEffect } from 'react';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import { checkForValidation } from './utils';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
+import { hasGoBackConnector } from '../../../components/utils';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+import { BackHandler } from 'react-native';
+
+const CaptureText = (props: CaptureTextInput) => {
+  const [showBackModal, setShowBackModal] = useState(false);
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              )
+                setShowBackModal(true);
+              else props.navigation.goBack();
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  // Handle back-button click when scanList was being viewed
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        if (
+          props.taskMeta?.enableGoBack &&
+          hasGoBackConnector(props.applicableReasons)
+        ) {
+          setShowBackModal(true);
+          return true;
+        } else {
+          props.navigation.goBack();
+          return true;
+        }
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [])
+  );
+
+  const [input, setInput] = useState('');
+  const [disableNext, setDisableNext] = useState(false);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            ...(await getBaseETResponse(
+              EntityCode.CAPTURE_INPUT,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.CAPTURE_INPUT
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <View style={CommonStyles.mainContainer}>
+        <TextInput
+          multiline={false}
+          autoComplete={'off'}
+          style={deliverETStyles.input}
+          label="Enter input"
+          value={input}
+          mode={'outlined'}
+          onChangeText={(text) => setInput(text)}
+        />
+        <View style={deliverETStyles.footerButtonStyles}>
+          <Button
+            labelStyle={CommonStyles.cancelButtonLabel}
+            style={CommonStyles.cancelButton}
+            mode={'outlined'}
+            onPress={async () => {
+              props.onSubmitET({
+                ...(await getBaseETResponse(
+                  EntityCode.CAPTURE_INPUT,
+                  false,
+                  getEventCodeByET(
+                    ExecutionTaskID.CAPTURE_INPUT,
+                    false,
+                    props.applicableReasons?.failure
+                  ),
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.CAPTURE_INPUT
+                )),
+              });
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            disabled={disableNext}
+            style={CommonStyles.nextButton}
+            labelStyle={CommonStyles.nextButtonLabel}
+            mode={'contained'}
+            onPress={async () => {
+              setDisableNext(true);
+              props.onSubmitET({
+                ...(await getBaseETResponse(
+                  EntityCode.CAPTURE_INPUT,
+                  true,
+                  getEventCodeByET(
+                    ExecutionTaskID.CAPTURE_INPUT,
+                    true,
+                    props.applicableReasons?.success
+                  ),
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.CAPTURE_INPUT
+                )),
+                value: input,
+                validated:
+                  (await checkForValidation(input, props.validationRegex)) ??
+                  false,
+                attemptCount: 0,
+              });
+            }}
+          >
+            Next
+          </Button>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+export default CaptureText;

package/src/components/executiontasks/captureInput/utils.ts

@@ -0,0 +1,9 @@
+export async function checkForValidation(
+  data: string,
+  regexRule: string | undefined
+) {
+  if (regexRule && typeof regexRule === 'string') {
+    const regex = new RegExp(regexRule);
+    return regex.test(data);
+  } else return false;
+}

package/src/components/executiontasks/deliver/DeliverET.tsx

@@ -0,0 +1,124 @@
+import type { DeliverETInput, LineItem } from './DeliverETInput';
+import { FlatList, View } from 'react-native';
+import React, { useState } from 'react';
+import { Button, Card, Paragraph, TextInput, Title } from 'react-native-paper';
+import {
+  CommonStyles,
+  deliverETStyles,
+} from '../../../styles/executionTasks/CommonStyles';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+
+const ListItem = ({ lineItem }: { lineItem: LineItem }) => (
+  <Card style={deliverETStyles.item}>
+    <Card.Title
+      title={lineItem.skuId}
+      subtitle={lineItem.count ? lineItem.count + ' Qty.' : ''}
+    />
+    {lineItem.productDescription && (
+      <Card.Content>
+        <Paragraph>{lineItem.productDescription}</Paragraph>
+      </Card.Content>
+    )}
+  </Card>
+);
+
+const renderItem = ({ item }: { item: LineItem }) => (
+  <ListItem lineItem={item} />
+);
+const DeliverET = (props: DeliverETInput) => {
+  const [remarks, setRemarks] = useState('');
+  const [disableNext, setDisableNext] = useState(false);
+
+  if (props && props.items && props.items.length > 0) {
+    return (
+      <View style={[CommonStyles.mainContainer, { padding: 10 }]}>
+        {/* Removed showing the item when item.length === 1 */}
+        {/* <FlatList
+          data={props.items}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.skuId}
+        /> */}
+        {props.message && props.message.length > 0 && (
+          <Paragraph>{props.message}</Paragraph>
+        )}
+        <TextInput
+          multiline={false}
+          autoComplete={'off'}
+          style={deliverETStyles.input}
+          label="Enter Delivery remarks"
+          value={remarks}
+          mode={'outlined'}
+          onChangeText={(text) => setRemarks(text)}
+        />
+        <View>
+          <View style={deliverETStyles.footerButtonStyles}>
+            <Button
+              labelStyle={CommonStyles.cancelButtonLabel}
+              style={[CommonStyles.cancelButton, { marginEnd: 5, flex: 1 }]}
+              mode={'outlined'}
+              onPress={async () => {
+                props.onSubmitET({
+                  ...(await getBaseETResponse(
+                    EntityCode.DELIVER,
+                    false,
+                    getEventCodeByET(
+                      ExecutionTaskID.DELIVER,
+                      false,
+                      props.applicableReasons?.failure
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.DELIVER
+                  )),
+                });
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={disableNext}
+              style={[CommonStyles.nextButton, { marginStart: 5, flex: 1 }]}
+              labelStyle={CommonStyles.nextButtonLabel}
+              mode={'contained'}
+              onPress={async () => {
+                setDisableNext(true);
+                props.onSubmitET({
+                  ...(await getBaseETResponse(
+                    EntityCode.DELIVER,
+                    true,
+                    getEventCodeByET(
+                      ExecutionTaskID.DELIVER,
+                      true,
+                      props.applicableReasons?.success
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.DELIVER
+                  )),
+                  remark: remarks,
+                });
+              }}
+            >
+              Deliver
+            </Button>
+          </View>
+        </View>
+      </View>
+    );
+  } else {
+    return (
+      <View>
+        <Title style={deliverETStyles.errorText}>
+          No Item(s) found for Delivery
+        </Title>
+      </View>
+    );
+  }
+};
+
+export default DeliverET;