@os1-platform/dispatch-mobile 2.1.2 → 2.1.4

package/src/components/executiontasks/pickup/SLPickupET.tsx

@@ -0,0 +1,372 @@
+import { BackHandler, StyleSheet, Text, View, Modal, Platform, TouchableOpacity } from 'react-native';
+import React, { useState, useLayoutEffect, useCallback, useEffect } from 'react';
+import { Button, Portal, Provider } 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 type { PickupETInput } from './PickpSchema';
+import type { LineItem } from '../deliver/DeliverETInput';
+import {
+  DEFAULT_PICKUP_MESSAGE,
+  DEFAULT_PICKUP_TITLE,
+  GO_BACK_EVENT_CODE,
+} from '../../../constants/constants';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { hasGoBackConnector } from '../../../components/utils';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+import { getStrVal } from '../../../locale/util';
+import Str from '../../../locale/Str';
+import CircleMark from '../../../icons/circleMark.svg';
+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>
+);
+
+const getMessage = (
+  pickupCount: number | undefined,
+  message: string | undefined
+) => {
+  try {
+    const msg = message || getStrVal(Str.DEFAULT_PICKUP_MESSAGE, Str.count, pickupCount);
+    return msg;
+  } catch (error: any) {
+    return message || '';
+  }
+};
+
+export const renderItem = ({ item }: { item: LineItem }) => (
+  <ListItem lineItem={item} />
+);
+const SLPickupET = (props: PickupETInput) => {
+  const [disableProceed, setDisableProceed] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [showPickupModal, setShowPickupModal] = useState(true);
+  const [goBack, setGoBack] = useState(false);
+
+
+  useFocusEffect(
+    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 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.PICKUP,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.PICKUP
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  const renderGoBackModal = () => {
+    return (
+      <ModalWidget
+        dismissable={true}
+        showModal={goBack}
+        title={{
+          label: `Are you sure you want to exit ${DEFAULT_PICKUP_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.PICKUP,
+                  false,
+                  GO_BACK_EVENT_CODE,
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.PICKUP
+                )),
+              });
+              setShowBackModal(false);
+            } else {
+              props.navigation.goBack();
+            }
+            setShowBackModal(false);
+          },
+          styles: styles.primaryButtonStyles,
+        }}
+        secondaryButton={{
+          label: 'Cancel',
+          onPress: () => {
+            setGoBack(false);
+            setShowPickupModal(true);
+          },
+          styles: styles.secondaryButtonStyles,
+        }}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      <Portal>{renderModal()}</Portal>
+      <Portal>{renderGoBackModal()}</Portal>
+      <View style={styles.container}>
+        <Modal
+          visible={showPickupModal}
+          onRequestClose={() => {
+            if (
+              props.taskMeta?.enableGoBack &&
+              hasGoBackConnector(props.applicableReasons)
+            ) {
+              setShowPickupModal(false);
+              setShowBackModal(true);
+              return true;
+            } else {
+              setShowPickupModal(false);
+              props.navigation.goBack();
+              return true;
+            }
+          }}
+        >
+          <View style={styles.modalView}>
+            <View style={styles.modalStyle}>
+              <TouchableOpacity
+                onPress={() => {
+                  setShowPickupModal(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_PICKUP_TITLE}
+                </Text>
+                <Text style={DeliverPickupStyles.messageText}>
+                  {getMessage(props.pickupCount, 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.pickupCount === 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={disableProceed}
+                  uppercase={false}
+                  labelStyle={CommonStyles.nextButtonLabel}
+                  style={[CommonStyles.nextButton, { marginTop: 20 }]}
+                  mode={'contained'}
+                  onPress={async () => {
+                    setDisableProceed(true);
+                    props.onSubmitET({
+                      remark: '',
+                      ...(await getBaseETResponse(
+                        EntityCode.PICKUP,
+                        true,
+                        getEventCodeByET(
+                          ExecutionTaskID.PICKUP,
+                          true,
+                          props.applicableReasons?.success
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.PICKUP
+                      )),
+                    });
+                  }}
+                >
+                  Yes
+                </Button>
+                {(props?.isSelfLoop == false) && <Button
+                  disabled={disableProceed}
+                  uppercase={false}
+                  style={[CommonStyles.cancelButton, { marginTop: 5 }]}
+                  mode="outlined"
+                  labelStyle={CommonStyles.cancelButtonLabel}
+                  onPress={async () => {
+                    setDisableProceed(true);
+                    props.onSubmitET({
+                      remark: '',
+                      ...(await getBaseETResponse(
+                        EntityCode.PICKUP,
+                        false,
+                        getEventCodeByET(
+                          ExecutionTaskID.PICKUP,
+                          false,
+                          props.applicableReasons?.failure
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.PICKUP
+                      )),
+                    });
+                  }}
+                >
+                  No
+                </Button>}
+              </View>
+            </View>
+          </View>
+        </Modal>
+      </View>
+    </Provider>
+  );
+};
+
+export default SLPickupET;
+
+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',
+  },
+});