@os1-platform/dispatch-mobile 2.0.8 → 2.1.1

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

@@ -0,0 +1,126 @@
+import { FlatList, View } from 'react-native';
+import React, { useState } from 'react';
+import type { PickupETInput } from './PickpSchema';
+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';
+import type { LineItem } from '../deliver/DeliverETInput';
+
+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 PickupET = (props: PickupETInput) => {
+  const [remarks, setRemarks] = useState('');
+  const [disableNext, setDisableNext] = useState(false);
+
+  if (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}
+        /> */}
+        <View>
+          {props.message && props.message.length > 0 && (
+            <Paragraph>{props.message}</Paragraph>
+          )}
+          <TextInput
+            multiline={false}
+            autoComplete={'off'}
+            style={deliverETStyles.input}
+            label="Enter Pickup remarks"
+            value={remarks}
+            mode={'outlined'}
+            onChangeText={(text) => setRemarks(text)}
+          />
+          <View style={deliverETStyles.footerButtonStyles}>
+            <Button
+              labelStyle={CommonStyles.cancelButtonLabel}
+              style={[CommonStyles.cancelButton, { marginEnd: 5, flex: 1 }]}
+              mode={'outlined'}
+              onPress={async () => {
+                props.onSubmitET({
+                  ...(await getBaseETResponse(
+                    EntityCode.PICKUP,
+                    false,
+                    getEventCodeByET(
+                      ExecutionTaskID.PICKUP,
+                      false,
+                      props.applicableReasons?.failure
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.PICKUP
+                  )),
+                });
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={disableNext}
+              labelStyle={CommonStyles.nextButtonLabel}
+              style={[CommonStyles.nextButton, { marginStart: 5, flex: 1 }]}
+              mode={'contained'}
+              onPress={async () => {
+                setDisableNext(true);
+                props.onSubmitET({
+                  remark: remarks,
+                  ...(await getBaseETResponse(
+                    EntityCode.PICKUP,
+                    true,
+                    getEventCodeByET(
+                      ExecutionTaskID.PICKUP,
+                      true,
+                      props.applicableReasons?.success
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.PICKUP
+                  )),
+                });
+              }}
+            >
+              Pickup
+            </Button>
+          </View>
+        </View>
+      </View>
+    );
+  else {
+    return (
+      <View>
+        <Title style={deliverETStyles.errorText}>
+          No Item(s) found for Pickup
+        </Title>
+      </View>
+    );
+  }
+};
+
+export default PickupET;

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

@@ -0,0 +1,370 @@
+import { BackHandler, StyleSheet, Text, View, Modal, Platform, TouchableOpacity } from 'react-native';
+import React, { useState, useLayoutEffect, useCallback } 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>
+                <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',
+  },
+});