@os1-platform/dispatch-mobile 2.0.8 → 2.1.1

package/src/components/executiontasks/deliver/DeliverETInput.ts

@@ -0,0 +1,51 @@
+/**
+ * Unique identifier for the item
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+export type SKU = string;
+/**
+ * Description of item
+ */
+export type ProductDescription = string;
+/**
+ * Count of items
+ */
+export type ItemCount = number;
+/**
+ * Items to be delivered
+ */
+export type LineItem = {
+  skuId: SKU;
+  productDescription?: ProductDescription;
+  count?: ItemCount;
+};
+/**
+ * Any manual instruction to display for the Operator to work on
+ */
+export type Instruction = string;
+export interface DeliverRemarks {
+  remark: string;
+  success: boolean;
+}
+
+export type DeliverETInput = BaseETRequest & {
+  items: LineItem[];
+  confirmCustodyExchange?: boolean;
+  confirmShipments?: boolean;
+  onSubmitET(response: DeliverOutput): void;
+  returnPackageCount?: number;
+  shipCount?: number;
+  restrictCancel?: boolean;
+  showDeliverModal: boolean;
+  setShowDeliverModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export type DeliverOutput = BaseETResponse & {
+  /**
+   * Remark captured at time of delivery
+   */
+  remark?: string;
+};

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

@@ -0,0 +1,515 @@
+import type { DeliverETInput } from './DeliverETInput';
+import {
+  BackHandler,
+  FlatList,
+  Text,
+  View,
+  Modal,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import React, { useState, useLayoutEffect, useEffect } from 'react';
+import { Button, Portal, Provider, TextInput } from 'react-native-paper';
+
+import {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import { isEmptyOrBlank } from '../../../utils/utils';
+import type { LineItem } from '../deliver/DeliverETInput';
+import {
+  DEFAULT_DELIVER_TITLE,
+  GO_BACK_EVENT_CODE,
+} from '../../../constants/constants';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { hasGoBackConnector } from '../../../components/utils';
+import { useFocusEffect } from '@react-navigation/native';
+import { getStr, getStrVal } from '../../../locale/util';
+import Str from '../../../locale/Str';
+import CircleMark from '../../../icons/circleMark.svg';
+import { TouchableOpacity } from 'react-native';
+import ModalWidget from '../../../components/widgets/ModalWidget';
+
+const ListItem = ({ lineItem }: { lineItem: LineItem }) => (
+  <View style={{ justifyContent: 'center' }}>
+    <Text style={DeliverPickupStyles.itemTextStyle}>
+      {`Order ID: ${lineItem.skuId}`}
+    </Text>
+  </View>
+);
+
+export const renderItem = ({ item }: { item: LineItem }) => (
+  <ListItem lineItem={item} />
+);
+
+const getMessage = (
+  returnPackageCount: number | undefined,
+  message: string | undefined
+) => {
+  try {
+    const msg = message || getStrVal(Str.DEFAULT_DELIVER_MESSAGE, Str.count, returnPackageCount && returnPackageCount >= 1 ? returnPackageCount : '');
+    return msg;
+  } catch (error: any) {
+    return message || '';
+  }
+};
+
+const DeliverET = (props: DeliverETInput) => {
+  const [pkgCount, setPkgCount] = useState(
+    props.confirmShipments ? '' : `${props.returnPackageCount}`
+  );
+  const [inputError, setInputError] = useState('');
+  const [disableYes, setDisableYes] = useState(false);
+  const [disableConfirm, setDisableConfirm] = useState(false);
+
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [goBack, setGoBack] = useState(false);
+  useEffect(
+    () => setPkgCount(`${props.returnPackageCount}`),
+    [props.returnPackageCount]
+  );
+
+  const { showDeliverModal, setShowDeliverModal } = props;
+  // 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);
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              )
+                setShowBackModal(true);
+              else {
+                setShowDeliverModal(false);
+                props.navigation.goBack();
+              }
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            ...(await getBaseETResponse(
+              EntityCode.DELIVER,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.DELIVER
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  const renderGoBackModal = () => {
+    return (
+      <ModalWidget
+        dismissable={true}
+        showModal={goBack}
+        title={{
+          label: `Are you sure you want to exit ${DEFAULT_DELIVER_TITLE}?`,
+        }}
+        subTitle={{
+          label: 'All progress will be lost',
+          styles: {
+            alignSelf: 'center',
+          },
+        }}
+        primaryButton={{
+          label: 'Exit',
+          onPress: async () => {
+            if (
+              props.taskMeta?.enableGoBack &&
+              hasGoBackConnector(props.applicableReasons)
+            ) {
+              props.onSubmitET({
+                ...(await getBaseETResponse(
+                  EntityCode.DELIVER,
+                  false,
+                  GO_BACK_EVENT_CODE,
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.DELIVER
+                )),
+              });
+              setShowBackModal(false);
+            } else {
+              props.navigation.goBack();
+            }
+            setShowBackModal(false);
+          },
+          styles: styles.primaryButtonStyles,
+        }}
+        secondaryButton={{
+          label: 'Cancel',
+          onPress: () => {
+            setGoBack(false);
+            setShowDeliverModal(true);
+          },
+          styles: styles.secondaryButtonStyles,
+        }}
+      />
+    );
+  };
+
+  if (props.confirmCustodyExchange) {
+    return (
+      <Provider>
+        <Portal>{renderModal()}</Portal>
+        <View style={styles.container}>
+          <Modal
+            visible={showDeliverModal}
+            onRequestClose={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              ) {
+                setShowDeliverModal(false);
+                setShowBackModal(true);
+                return true;
+              } else {
+                setShowDeliverModal(false);
+                props.navigation.goBack();
+                return true;
+              }
+            }}
+          >
+            <View style={styles.modalView}>
+              <View style={styles.modalStyle}>
+                <View style={{ alignItems: 'center' }}>
+                  <View style={{ paddingHorizontal: 60 }}>
+                    <Text style={DeliverPickupStyles.titleText}>
+                      {props.title || DEFAULT_DELIVER_TITLE}
+                    </Text>
+                  </View>
+                  <View style={styles.returnView}>
+                    <Text style={styles.subTitle}>{getStr(props.returnPackageCount ? props.returnPackageCount > 1 ? Str.Expected_Shipments : Str.Expected_Shipment : Str.Expected_Shipments)}</Text>
+                    <Text style={styles.title}>{props.returnPackageCount}</Text>
+                  </View>
+                  {props.confirmShipments ? (
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                      }}
+                    >
+                      <TextInput
+                        style={{
+                          flex: 1,
+                          fontSize: 14,
+                          lineHeight: 24,
+                          fontFamily:
+                            Platform.OS === 'android'
+                              ? Fonts.IBMPlexSans_400Regular
+                              : 'IBMPlexSans-Regular',
+                        }}
+                        multiline={false}
+                        autoComplete={'off'}
+                        label={getStr(Number(pkgCount) > 1 ? Str.Shipments_handed_over : Str.Shipment_handed_over)}
+                        value={pkgCount}
+                        mode={'outlined'}
+                        error={!isEmptyOrBlank(inputError)}
+                        selectionColor={'#6200EE'}
+                        keyboardType={'numeric'}
+                        onChangeText={(text) => {
+                          setInputError('');
+                          setPkgCount(text);
+                        }}
+                      />
+                    </View>
+                  ) : null}
+
+                  {!isEmptyOrBlank(inputError) && (
+                    <Text style={{ color: '#B00020' }}>{inputError}</Text>
+                  )}
+                </View>
+
+                <View style={styles.bottomButtons}>
+                  <Button
+                    disabled={disableConfirm}
+                    style={[CommonStyles.nextButton, { marginTop: 20 }]}
+                    labelStyle={CommonStyles.nextButtonLabel}
+                    uppercase={false}
+                    mode={'contained'}
+                    onPress={async () => {
+                      if (
+                        !isEmptyOrBlank(pkgCount) &&
+                        !Number.isNaN(+pkgCount)
+                      ) {
+                        if (+pkgCount !== props.returnPackageCount) {
+                          setInputError(
+                            `Package count should be equal to ${props.returnPackageCount}`
+                          );
+                          return;
+                        }
+                        setDisableConfirm(true);
+                        props.onSubmitET({
+                          ...(await getBaseETResponse(
+                            EntityCode.DELIVER,
+                            true,
+                            getEventCodeByET(
+                              ExecutionTaskID.DELIVER,
+                              true,
+                              props.applicableReasons?.success
+                            ),
+                            '',
+                            props.mergedObjectiveId,
+                            ExecutionTaskID.DELIVER
+                          )),
+                          remark: `${pkgCount} Packages returned`,
+                        });
+                      } else setInputError('Please enter valid count.');
+                    }}
+                  >
+                    Confirm
+                  </Button>
+                </View>
+              </View>
+            </View>
+          </Modal>
+        </View>
+      </Provider>
+    );
+  } else {
+    return (
+      <Provider>
+        <Portal>{renderModal()}</Portal>
+        <Portal>{renderGoBackModal()}</Portal>
+        <View style={styles.container}>
+          <Modal
+            visible={showDeliverModal}
+            onRequestClose={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              ) {
+                setShowDeliverModal(false);
+                setShowBackModal(true);
+                return true;
+              } else {
+                setShowDeliverModal(false);
+                props.navigation.goBack();
+                return true;
+              }
+            }}
+          >
+            <View style={styles.modalView}>
+              <View style={styles.modalStyle}>
+                <TouchableOpacity
+                  onPress={() => {
+                    setShowDeliverModal(false);
+                    setGoBack(true);
+                  }}
+                  style={styles.crossIcon}
+                  hitSlop={{ bottom: 10, top: 10, right: 10, left: 10 }}
+                >
+                  <CircleMark />
+                </TouchableOpacity>
+                <View style={styles.modalBody}>
+                  <Text style={DeliverPickupStyles.titleText}>
+                    {props.title || DEFAULT_DELIVER_TITLE}
+                  </Text>
+                  <Text style={DeliverPickupStyles.messageText}>
+                    {getMessage(props.returnPackageCount, props.message)}
+                  </Text>
+                  <Text style={DeliverPickupStyles.messageText}>
+                    {props?.shipCount ? getStrVal(Str.shipments, Str.count, props.shipCount) : ''}
+                  </Text>
+
+                  {/* Removed showing the item when item.length === 1 */}
+                  {/* {props.returnPackageCount === 1 && props.items.length ? (
+                    <View style={{ justifyContent: 'center' }}>
+                      <Text
+                        style={DeliverPickupStyles.itemTextStyle}
+                      >{`Order ID: ${props.items[0].skuId}`}</Text>
+                    </View>
+                  ) : null} */}
+                </View>
+                <View style={styles.bottomButtons}>
+                  <Button
+                    disabled={disableYes}
+                    style={[CommonStyles.nextButton, { marginTop: 20 }]}
+                    labelStyle={CommonStyles.nextButtonLabel}
+                    uppercase={false}
+                    mode={'contained'}
+                    onPress={async () => {
+                      setDisableYes(true);
+                      props.onSubmitET({
+                        ...(await getBaseETResponse(
+                          EntityCode.DELIVER,
+                          true,
+                          getEventCodeByET(
+                            ExecutionTaskID.DELIVER,
+                            true,
+                            props.applicableReasons?.success
+                          ),
+                          '',
+                          props.mergedObjectiveId,
+                          ExecutionTaskID.DELIVER
+                        )),
+                        remark: '',
+                      });
+                    }}
+                  >
+                    Confirm
+                  </Button>
+                  {props.restrictCancel === true ? null : (
+                    <Button
+                      labelStyle={CommonStyles.cancelButtonLabel}
+                      style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+                      mode={'outlined'}
+                      uppercase={false}
+                      onPress={async () => {
+                        setShowDeliverModal(false);
+                        props.onSubmitET({
+                          ...(await getBaseETResponse(
+                            EntityCode.DELIVER,
+                            false,
+                            getEventCodeByET(
+                              ExecutionTaskID.DELIVER,
+                              false,
+                              props.applicableReasons?.failure
+                            ),
+                            '',
+                            props.mergedObjectiveId,
+                            ExecutionTaskID.DELIVER
+                          )),
+                        });
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  )}
+                </View>
+              </View>
+            </View>
+          </Modal>
+        </View>
+      </Provider>
+    );
+  }
+};
+
+export default DeliverET;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  modalView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalStyle: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 8,
+    elevation: 5,
+  },
+  modalBody: {
+    paddingHorizontal: 40,
+    alignItems: 'center',
+  },
+  crossIcon: {
+    alignSelf: 'flex-end',
+  },
+  bottomButtons: {
+    marginTop: 12,
+  },
+  returnView: {
+    marginTop: 15,
+    marginBottom: 15,
+    flexDirection: 'row',
+  },
+  subTitle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 14,
+    flex: 1,
+    textAlign: 'left',
+    lineHeight: 28,
+    color: '#111111',
+  },
+  title: {
+    textAlign: 'right',
+    fontSize: 14,
+    lineHeight: 28,
+    fontStyle: 'normal',
+    color: '#111111',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+  },
+  primaryButtonStyles: {
+    marginTop: 16,
+    height: 40,
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  secondaryButtonStyles: {
+    marginVertical: 16,
+    height: 40,
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});