@os1-platform/dispatch-mobile 2.1.2 → 2.1.4

package/src/components/executiontasks/payments/processPayment/ProcessPaymentET.tsx

@@ -0,0 +1,273 @@
+import type { ProcessPaymentInput } from './ProcessPaymentSchema';
+import {
+  BackHandler,
+  KeyboardAvoidingView,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';
+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 { PaymentStyles } from '../PaymentStyles';
+import { isEmptyOrBlank } from '../../../../utils/utils';
+import { CommonStyles } from '../../../../styles/executionTasks/CommonStyles';
+import { getPaymentValue } from '../PaymentUtils';
+import { Button, Provider, TextInput } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
+import GoBackModal from '../../../../components/widgets/GoBackModal';
+import { hasGoBackConnector } from '../../../../components/utils';
+import { useFocusEffect } from '@react-navigation/native';
+
+const styles = PaymentStyles;
+
+const ProcessPaymentET = (props: ProcessPaymentInput) => {
+  const [amountCollected, setAmountCollected] = useState('');
+  const [inputError, setInputError] = useState('');
+  const [disableNext, setDisableNext] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+
+  // Handle back-button click
+  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 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({
+            paymentMode: props.paymentMode,
+            collectedAmount: {
+              value: +amountCollected,
+              currencyCode: props.amount.currencyCode,
+              minorUnit: props.amount.minorUnit,
+            },
+            transactionId: props.transactionId,
+            tenantTransactionId: props.transactionId,
+            ...(await getBaseETResponse(
+              EntityCode.PROCESS_PAYMENT,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.PROCESS_PAYMENT
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <KeyboardAvoidingView style={CommonStyles.mainContainer}>
+        <ScrollView style={CommonStyles.mainContainer}>
+          <View style={CommonStyles.mainContainer}>
+            <Text style={styles.textStyle1}>AMOUNT TO BE COLLECTED</Text>
+            <Text style={styles.amountStyle}>
+              {props.amount.currencyCode +
+                ' ' +
+                getPaymentValue(
+                  props.amount.value,
+                  props.amount.minorUnit
+                ).toLocaleString()}
+            </Text>
+            <View
+              style={{
+                marginTop: 20,
+                paddingTop: 10,
+                paddingStart: 20,
+                paddingEnd: 20,
+                backgroundColor: 'white',
+                paddingBottom: 40,
+              }}
+            >
+              <TextInput
+                multiline={false}
+                autoComplete={'off'}
+                label="Total Amount Collected"
+                value={amountCollected}
+                mode={'outlined'}
+                error={!isEmptyOrBlank(inputError)}
+                selectionColor={'#6200EE'}
+                keyboardType={'numeric'}
+                onChangeText={(text) => {
+                  setInputError('');
+                  setAmountCollected(text);
+                }}
+              />
+              {!isEmptyOrBlank(inputError) && (
+                <Text style={{ color: '#B00020' }}>{inputError}</Text>
+              )}
+            </View>
+            {props.message && (
+              <View>
+                <Text style={styles.textStyle1}>MESSAGE</Text>
+                <Text style={styles.messageStyle}>{props.message}</Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+        <View style={{ margin: 10 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              marginStart: 10,
+              marginEnd: 10,
+            }}
+          >
+            {(props.isSelfLoop == false) && <Button
+              style={[
+                CommonStyles.cancelButton,
+                {
+                  marginEnd: 5,
+                  flex: 1,
+                },
+              ]}
+              labelStyle={CommonStyles.cancelButtonLabel}
+              mode={'outlined'}
+              onPress={async () => {
+                props.onSubmitET({
+                  paymentMode: props.paymentMode,
+                  collectedAmount: {
+                    value: +amountCollected,
+                    currencyCode: props.amount.currencyCode,
+                    minorUnit: props.amount.minorUnit,
+                  },
+                  transactionId: props.transactionId,
+                  tenantTransactionId: props.transactionId,
+                  ...(await getBaseETResponse(
+                    EntityCode.PROCESS_PAYMENT,
+                    false,
+                    getEventCodeByET(
+                      ExecutionTaskID.PROCESS_PAYMENT,
+                      false,
+                      props.applicableReasons?.failure
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.PROCESS_PAYMENT
+                  )),
+                });
+              }}
+            >
+              Cancel
+            </Button>
+            }
+            <Button
+              disabled={disableNext}
+              style={[
+                CommonStyles.nextButton,
+                {
+                  marginStart: 5,
+                  flex: 1,
+                },
+              ]}
+              labelStyle={CommonStyles.nextButtonLabel}
+              mode={'contained'}
+              onPress={async () => {
+                if (
+                  !isEmptyOrBlank(amountCollected) &&
+                  !Number.isNaN(+amountCollected)
+                ) {
+                  const calculatedValue = getPaymentValue(
+                    props.amount.value,
+                    props.amount.minorUnit
+                  );
+                  if (+amountCollected !== calculatedValue) {
+                    setInputError(
+                      `Amount should be equal to ${calculatedValue}`
+                    );
+                    return;
+                  }
+                  setDisableNext(true);
+                  props.onSubmitET({
+                    paymentMode: props.paymentMode,
+                    collectedAmount: {
+                      value: props.amount.value,
+                      currencyCode: props.amount.currencyCode,
+                      minorUnit: props.amount.minorUnit,
+                    },
+                    transactionId: props.transactionId,
+                    tenantTransactionId: props.transactionId,
+                    ...(await getBaseETResponse(
+                      EntityCode.PROCESS_PAYMENT,
+                      true,
+                      getEventCodeByET(
+                        ExecutionTaskID.PROCESS_PAYMENT,
+                        true,
+                        props.applicableReasons?.success
+                      ),
+                      '',
+                      props.mergedObjectiveId,
+                      ExecutionTaskID.PROCESS_PAYMENT
+                    )),
+                  });
+                } else {
+                  setInputError('Please enter valid amount.');
+                }
+              }}
+            >
+              Next
+            </Button>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Provider>
+  );
+};
+export default ProcessPaymentET;

package/src/components/executiontasks/payments/processPayment/ProcessPaymentSchema.ts

@@ -0,0 +1,39 @@
+/**
+ * Amount to be collected
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../../models/execTasks/ETBaseModels';
+import type { ETAmount } from '../init/InitPaymentSchema';
+/**
+ * Payment mode
+ */
+
+export type ProcessPaymentInput = BaseETRequest & {
+  isSelfLoop: boolean;
+  amount: ETAmount;
+  paymentMode: string;
+  transactionId: string;
+  onSubmitET: (output: ProcessPaymentOutput) => void;
+};
+/**
+ * Amount to be collected (ISO 4217)
+ */
+
+export type ProcessPaymentOutput = BaseETResponse & {
+  /**
+   * Unique transaction id
+   */
+  transactionId: string;
+  tenantTransactionId: string;
+  /**
+   * Amount collected (ISO 4217)
+   */
+  collectedAmount: ETAmount;
+  /**
+   * Payment meta data
+   */
+  paymentMeta?: {};
+  paymentMode: string;
+};

package/src/components/executiontasks/pickup/PickpSchema.ts

@@ -0,0 +1,30 @@
+/**
+ * Unique identifier for the item
+ */
+import type { BaseETResponse, LineItem } from '../ExecutionTasksIndex';
+import type { BaseETRequest } from '../../../models/execTasks/ETBaseModels';
+
+/**
+ * Any manual instruction to display for the Operator to work on
+ */
+export type Instruction = string;
+export interface PickupRemarks {
+  pickupRemark: string;
+  success: boolean;
+}
+
+export type PickupETInput = BaseETRequest & {
+  items: LineItem[];
+  pickupCount?: number;
+  shipCount?: number;
+  isSelfLoop: boolean;
+  confirmCustodyExchange?: boolean;
+  onSubmitET(pickupRemark: PickupETOutput): void;
+};
+
+export type PickupETOutput = BaseETResponse & {
+  /**
+   * Remark captured at time of delivery
+   */
+  remark?: string;
+};

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;