@os1-platform/dispatch-mobile 2.1.1 → 2.1.3

package/src/components/executiontasks/imageCapture/ImageCapture.tsx

@@ -1,65 +1,41 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  useLayoutEffect,
-} from 'react';
-import {
-  BackHandler,
-  FlatList,
-  Image,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import type { CaptureInput, ImageData } from './CaptureSchema';
+import React, { useCallback, useEffect, useState, useLayoutEffect } from 'react';
+import { BackHandler, FlatList, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import * as CaptureUtils from './CaptureUtils';
 import { getCaptureOutput } from './CaptureUtils';
 import { showToast } from '../../widgets/Toaster';
 import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import {
-  CommonStyles,
-  Fonts,
-} from '../../../styles/executionTasks/CommonStyles';
+import Icon from 'react-native-vector-icons/Feather';
+import Iconn from 'react-native-vector-icons/MaterialIcons';
+import { CommonStyles, Fonts } from '../../../styles/executionTasks/CommonStyles';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
-import {
-  EntityCode,
-  ExecutionTaskID,
-} from '../../../models/execTasks/ETConfig';
+import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
-import { Button, Modal, Portal, Provider } from 'react-native-paper';
+import { Button, Provider } from 'react-native-paper';
 import Logger, { LOG_TYPE } from '../../../utils/Logger';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
+import Circle from "./circle-xmark.svg"
 
-const ImageItem = ({ item, onPress }: { item: ImageData; onPress: any }) => (
-  <View style={{ marginEnd: 8 }}>
-    <Image source={{ uri: item.path }} style={styles.image} />
-    <Icon
-      onPress={onPress}
-      name="highlight-remove"
-      color={'red'}
-      size={32}
-      style={{
-        position: 'absolute',
-        right: 5,
-        top: 5,
-      }}
-    />
-  </View>
-);
+import CameraIcon from "./camera.svg"
 
-const ImageCapture = (props: CaptureInput) => {
-  const [images, setImages] = useState<Array<ImageData>>([]);
+const ImageCapture = (props: any) => {
+  let numberOfImagesToCapture: any;
+  if (props.captureMode == "SINGLE") {
+    numberOfImagesToCapture = 1;
+  } else if (props.captureMode === 'MULTI' && props.captureCountLimit && props.captureCountLimit > 0) {
+    numberOfImagesToCapture = props.captureCountLimit;
+  }
+
+  const [images, setImages] = useState([]);
+  const [imagesDummy, setImagesDummy] = useState<any[]>([]);
   const [showCapture, setShowCapture] = useState(true);
   const [disableProceed, setDisableProceed] = useState(false);
   const [showBackModal, setShowBackModal] = useState(false);
+  const [buttonProceed, setButtonProceed] = useState(false);
+  const [numColumns, setNumColumns] = useState(numberOfImagesToCapture <= 2 ? 1 : 2);
 
-  // Handle back-button click
   useFocusEffect(
     React.useCallback(() => {
       const onBackPress = () => {
@@ -85,7 +61,7 @@ const ImageCapture = (props: CaptureInput) => {
       title: props.title,
       headerLeft: () => {
         return (
-          <Icon
+          <Iconn
             onPress={() => {
               if (
                 props.taskMeta?.enableGoBack &&
@@ -107,6 +83,121 @@ const ImageCapture = (props: CaptureInput) => {
     });
   }, [props.navigation, props.title]);
 
+  useEffect(() => {
+
+    if (images.length === 0) {
+      let arr: any = [];
+      for (let i = 0; i < numberOfImagesToCapture; i++) {
+        arr.push({ path: '' });
+      }
+      setImages(arr);
+    }
+  }, [images]);
+
+
+  interface ImageItemProps {
+    item: { path: string };
+    index: number;
+    onPress: () => void;
+  }
+
+  const ImageItem: React.FC<ImageItemProps> = ({ item, index, onPress }) => {
+
+    return (
+      <View
+        style={{
+          width: numColumns == 2 ? '43%' : '88%',
+          height: numColumns == 2 ? 160 : numberOfImagesToCapture == 1 ? 336 : 180,
+          backgroundColor: 'white',
+          alignItems: 'center',
+          alignSelf: 'center',
+          borderWidth: 1,
+          borderColor: '#A3AAC2',
+          borderStyle: 'dashed',
+          borderRadius: 3,
+          marginTop: '6%',
+          marginStart: numColumns == 2 ? 17 : numberOfImagesToCapture == 1 ? 0 : 0,
+        }}
+      >
+        <View
+          style={{
+            alignItems: 'center',
+            width: '80%',
+            height: '98%',
+            borderRadius: 3,
+          }}
+        >
+          {imagesDummy?.length > index && imagesDummy[index]?.path ? null : (
+  <TouchableOpacity
+  onPress={onPress}>
+<View
+style={{
+  marginTop:
+  numColumns === 2 ? '32%' : numberOfImagesToCapture === 1 ? '50%' : '20%',
+}}
+>
+<CameraIcon />
+</View>
+</TouchableOpacity>
+           
+          )}
+          <Button
+            onPress={() => captureImage(index)}
+            uppercase={false}
+            labelStyle={[
+              {
+                fontFamily: Fonts.IBMPlexSans_500Medium,
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                fontSize: 14,
+                letterSpacing: 0.25,
+                color: '#5B80F7',
+              },
+            ]}
+          >
+            {imagesDummy?.length > index && imagesDummy[index]?.path ? null : 'Click Photo'}
+          </Button>
+          <Image
+            source={{
+              uri: imagesDummy?.length > index ? imagesDummy[index]?.path : item?.path,
+            }}
+            style={{
+              height: numColumns == 2 ? '75%' : numberOfImagesToCapture == 1 ? '85%' : '85%',
+              width: numColumns == 2 ? '105%' : '118%',
+              borderRadius: 10,
+              bottom:
+                numColumns == 2 ? '6%' : numberOfImagesToCapture == 1 ? '2%' : '11%',
+            }}
+          />
+          <TouchableOpacity
+            onPress={onPress}
+            style={{
+              position: 'absolute',
+              top: numColumns == 2 ? '17%' : '9%',
+              marginRight: '2%',
+            }}
+          >
+            {imagesDummy?.length > index && imagesDummy[index]?.path && (
+              <View
+                style={{
+                  width: 25,
+                  height: 25,
+                  backgroundColor: 'white',
+                  borderRadius: 15,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginLeft: numColumns == 2 ? '78%' : '96%',
+                }}
+              >
+                <Circle />
+              </View>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  };
+
   const renderModal = () => {
     return (
       <GoBackModal
@@ -133,26 +224,11 @@ const ImageCapture = (props: CaptureInput) => {
   const handleSubmit = async () => {
     try {
       setDisableProceed(true);
-      if (images.length > 0) {
-        if (
-          props.additionalMultiConfig?.minCaptureCount === 'N' &&
-          images.length < props.captureCount
-        ) {
-          showToast(
-            `Min ${props.captureCount} image(s) required to be captured.`
-          );
-          return;
-        }
-        if (
-          props.captureMode === 'MULTI' &&
-          props.captureCountLimit &&
-          props.captureCountLimit > 0 &&
-          images.length > CaptureUtils.getMaxImagesCount(props)
-        ) {
-          showToast(`Max ${props.captureCountLimit} image(s) allowed.`);
-          return;
-        }
-        props.onSubmitET(await getCaptureOutput(images, props));
+      let imagesArray = imagesDummy.filter(item => item != null && item.path != null && item.path.length != 0);
+      console.log('imagesArray:', JSON.stringify(imagesArray));
+
+      if (imagesArray.length > 0) {
+        props.onSubmitET(await getCaptureOutput(imagesArray, props));
       } else {
         showToast('No Images captured');
       }
@@ -164,144 +240,134 @@ const ImageCapture = (props: CaptureInput) => {
     }
   };
 
-  useEffect(() => {
-    if (props.captureMode === 'SINGLE') {
-      if (images.length > 0) {
-        setShowCapture(false);
-      } else setShowCapture(true);
-    } else if (
-      props.captureMode === 'MULTI' &&
-      props.captureCountLimit &&
-      props.captureCountLimit > 0
-    ) {
-      if (images.length === CaptureUtils.getMaxImagesCount(props)) {
-        setShowCapture(false);
-      } else setShowCapture(true);
-    } else {
-      if (images.length > 0) {
-        setShowCapture(true);
-      }
-    }
-  }, [images, props, showCapture]);
+  // useEffect(() => {
+  //   if (props.captureMode === 'SINGLE') {
+  //     if (images.length > 0) {
+  //       setShowCapture(false);
+  //     } else setShowCapture(true);
+  //   } else if (
+  //     props.captureMode === 'MULTI' &&
+  //     props.captureCountLimit &&
+  //     props.captureCountLimit > 0
+  //   ) {
+  //     if (images.length === CaptureUtils.getMaxImagesCount(props)) {
+  //       setShowCapture(false);
+  //     } else setShowCapture(true);
+  //   } else {
+  //     if (images.length > 0) {
+  //       setShowCapture(true);
+  //     }
+  //   }
+  // }, [images, props, showCapture]);
 
-  const captureImage = useCallback(async () => {
-    if (!showCapture) {
-      showToast(`Max Image Limit reached`);
-      return;
-    }
+  const captureImage = useCallback(async (index) => {
+    //   // if (!showCapture) {
+    //   //   showToast(`Max Image Limit reached`);
+    //   //   return;
+    //   // }
+    // console.log("captureImage", CaptureUtils);
     let imageDataResponse = await CaptureUtils.captureImage(
       props.resolution.breadth,
       props.resolution.length,
       props.fileSizeLimit
     );
+
     if (imageDataResponse != null) {
-      setImages((prevState) => {
-        return [
-          ...prevState,
-          {
-            id: CaptureUtils.getImagesFileName(), // @ts-ignore
-            path: imageDataResponse.uri,
-            url: '',
-            timestamp: Date.now(),
-          },
-        ];
-      });
+      setButtonProceed(true);
+
+      let imgArray = [];
+      imgArray = imagesDummy;
+      imgArray[index] = {
+        id: CaptureUtils.getImagesFileName(),
+        // @ts-ignore
+        path: imageDataResponse.uri,
+        url: '',
+        timestamp: Date.now(),
+      };
+      setImagesDummy([...imgArray])
+      console.log("images211:", JSON.stringify(imgArray));
+
+    }
+  }, [props.resolution.breadth, props.resolution.length, props.fileSizeLimit]);
+
+
+  const deleteImage = async (index: any) => {
+    let imageDummyArray = [];
+    imageDummyArray = imagesDummy
+    imageDummyArray[index].path = ""
+    setImagesDummy([...imageDummyArray])
+
+    let initialProceedValue = false;
+    for (let i = 0; i < imageDummyArray.length; i++) {
+      if (imageDummyArray[i]?.path) {
+        initialProceedValue = true
+      }
     }
-  }, [props, showCapture]);
+    setButtonProceed(initialProceedValue);
 
-  const deleteImage = async (imageData: ImageData) => {
     try {
-      let filteredImages = await CaptureUtils.deleteImage(imageData, images);
-      setImages(filteredImages);
+      // setImagesDummy(filteredImages);
+      // setButtonProceed(false);
     } catch (err: any) {
-      Logger.getInstance().logEvent(
-        'deleteImageError',
-        err.message,
-        LOG_TYPE.SDK_ERROR
-      );
-      return;
+      Logger.getInstance().logEvent('deleteImageError', err.message, LOG_TYPE.SDK_ERROR);
+      console.error("Error updating state after deletion:", err);
     }
   };
 
-  const renderItem = ({ item }: { item: ImageData }) => {
+  const renderItem = ({ item, index }: { item: any; index: any }) => {
     return (
       <ImageItem
         item={item}
+        index={index}
         onPress={async () => {
-          await deleteImage(item);
+          await deleteImage(index);
         }}
       />
     );
   };
+
   return (
     <Provider>
       {renderModal()}
       <View style={CommonStyles.mainContainer}>
         {props.message && (
           <View style={styles.etMessageView}>
-            <Text style={styles.etMessage}>{props.message}</Text>
+            <Text style={styles.etMessage}>
+              Take a photo of the shipments. Please ensure the items are clearly visible.
+            </Text>
           </View>
         )}
-        <View style={styles.imageEtContainer}>
-          {images.length === 0 && (
-            <Icon name={'photo-camera'} size={24} color={'#666666'} />
-          )}
-          {images.length > 0 && (
-            <FlatList
-              horizontal
-              data={images}
-              renderItem={renderItem}
-              keyExtractor={(item) => item.id}
-            />
-          )}
-          <Button
-            onPress={() => captureImage()}
-            uppercase={false}
-            labelStyle={[
-              {
-                fontFamily:
-                  Platform.OS === 'android'
-                    ? Fonts.IBMPlexSans_400Regular
-                    : 'IBMPlexSans-Regular',
-                fontStyle: 'normal',
-                fontWeight: 'normal',
-                fontSize: 14,
-                alignItems: 'center',
-                textAlign: 'center',
-                letterSpacing: 0.25,
-                color: SdkColors[ColorTheme.LIGHT].primaryButton,
-              },
-            ]}
-          >
-            {images.length > 0 ? 'Click more' : 'Click Picture'}
-          </Button>
+        <View
+          style={{
+            backgroundColor: 'white',
+            width: 360,
+            height: numColumns == 2 ? '82%' : numberOfImagesToCapture == 1 ? '63%' : '70%',
+            alignSelf: 'center',
+            marginTop: '5%',
+            borderRadius: 7,
+            borderColor: '#E0E3EB',
+            borderWidth: 0.5,
+          }}
+        >
+          <FlatList
+            data={images}
+            numColumns={numColumns}
+            renderItem={renderItem}
+            keyExtractor={(item) => item?.id}
+            contentContainerStyle={{ paddingBottom: '30%' }}
+          />
         </View>
-        <View style={[CommonStyles.bottom, { marginStart: 10, marginEnd: 10 }]}>
-          <Button
-            disabled={disableProceed}
-            style={CommonStyles.nextButton}
-            mode="contained"
-            labelStyle={CommonStyles.nextButtonLabel}
-            onPress={async () => {
-              await handleSubmit();
-            }}
-          >
-            Proceed
-          </Button>
-          <Button
-            style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+        <View style={styles.bottomButtons}>
+          {(props.isSelfLoop == false) && <Button
+            style={[CommonStyles.cancelButton, { flexGrow: 1, marginStart: '3%' }]}
             mode="outlined"
-            labelStyle={CommonStyles.cancelButtonLabel}
+            labelStyle={[CommonStyles.cancelButtonLabel, { textTransform: 'capitalize' }]}
             onPress={async () => {
               props.onSubmitET({
                 ...(await getBaseETResponse(
                   EntityCode.IMAGE_CAPTURE,
                   false,
-                  getEventCodeByET(
-                    ExecutionTaskID.IMAGE_CAPTURE,
-                    false,
-                    props.applicableReasons?.failure
-                  ),
+                  getEventCodeByET(ExecutionTaskID.IMAGE_CAPTURE, false, props.applicableReasons?.failure),
                   '',
                   props.mergedObjectiveId,
                   ExecutionTaskID.IMAGE_CAPTURE
@@ -311,6 +377,29 @@ const ImageCapture = (props: CaptureInput) => {
           >
             Cancel
           </Button>
+          }
+          <Button
+            labelStyle={{
+              color: buttonProceed ? '#ffff' : '#A3AAC2',
+              fontFamily: Fonts.IBMPlexSans_500Medium,
+              fontSize: 14,
+              lineHeight: 20,
+              textAlign: 'center',
+              textTransform: 'capitalize',
+            }}
+            style={{
+              flexGrow: 1,
+              marginHorizontal: '3%',
+              backgroundColor: buttonProceed ? '#5B80F7' : '#E0E3EB',
+            }}
+            disabled={!buttonProceed}
+            mode="contained"
+            onPress={async () => {
+              await handleSubmit();
+            }}
+          >
+            Proceed
+          </Button>
         </View>
       </View>
     </Provider>
@@ -318,46 +407,51 @@ const ImageCapture = (props: CaptureInput) => {
 };
 
 const styles = StyleSheet.create({
+
   imageEtContainer: {
     display: 'flex',
     marginStart: 16,
     marginEnd: 16,
     borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
+    borderColor: '#A3AAC2',
     padding: 10,
     marginTop: 15,
     borderStyle: 'dashed',
     backgroundColor: '#FFFFFF',
     alignItems: 'center',
     justifyContent: 'center',
-    height: 300,
+    height: 370,
+    borderRadius: 5
   },
-  image: {
-    height: 250,
-    width: 200,
+
+  bottomButtons: {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: 'row',
+    backgroundColor: "white",
+    paddingVertical: 12,
+    bottom: 0,
+    position: "absolute",
+    borderTopColor: "#A3AAC2",
+    borderTopWidth: 0.5
   },
   etMessage: {
-    textAlign: 'center',
+    // textAlign: 'center',
     fontStyle: 'normal',
-    fontWeight: '600',
-    fontSize: 18,
+    fontWeight: '400',
+    fontSize: 16,
     display: 'flex',
     alignItems: 'center',
-    letterSpacing: 0.25,
     color: '#000000',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
+    fontFamily: Fonts.IBMPlexSans_400Regular
   },
   etMessageView: {
-    marginTop: 14,
-    paddingStart: 40,
-    paddingEnd: 40,
+    marginTop: 17,
+    paddingStart: 17,
     paddingTop: 15,
     paddingBottom: 15,
-    backgroundColor: '#ffffff',
-  },
+    backgroundColor: '#ffffff'
+  }
 });
 
 export default ImageCapture;

package/src/components/executiontasks/imageCapture/camera.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 3.75H15.1875L14.8571 2.8707C14.4922 1.89648 13.5586 1.25 12.5156 1.25H8.48438C7.44141 1.25 6.51172 1.89492 6.14453 2.86914L5.8125 3.75H3C1.61914 3.75 0.5 4.87109 0.5 6.25V16.25C0.5 17.6309 1.61914 18.75 3 18.75H18C19.3809 18.75 20.5 17.6309 20.5 16.25V6.25C20.5 4.87109 19.3789 3.75 18 3.75ZM19.25 16.25C19.25 16.9375 18.6875 17.5 18 17.5H3C2.3125 17.5 1.75 16.9375 1.75 16.25V6.25C1.75 5.5625 2.3125 5 3 5H6.68164L7.31094 3.31328C7.49219 2.82422 7.92578 2.5 8.48047 2.5H12.5156C13.0375 2.5 13.5043 2.82426 13.6867 3.31328L14.3203 5H18C18.6875 5 19.25 5.5625 19.25 6.25V16.25ZM10.5 6.5625C7.91406 6.5625 5.8125 8.66406 5.8125 11.25C5.8125 13.8359 7.91211 15.9375 10.5 15.9375C13.0879 15.9375 15.1875 13.8379 15.1875 11.25C15.1875 8.66211 13.0898 6.5625 10.5 6.5625ZM10.5 14.6875C8.60547 14.6875 7.0625 13.1445 7.0625 11.25C7.0625 9.35547 8.60547 7.8125 10.5 7.8125C12.3945 7.8125 13.9375 9.35547 13.9375 11.25C13.9375 13.1445 12.3945 14.6875 10.5 14.6875Z" fill="#525B7A"/>
+</svg>

package/src/components/executiontasks/imageCapture/circle-xmark.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="FA-Icon/Light/circle-xmark">
+<path id="Vector" d="M11.0512 6.34874C10.8559 6.15381 10.5393 6.15381 10.3443 6.34874L8.69804 7.99239L7.05117 6.34874C6.85586 6.15381 6.53929 6.15381 6.34429 6.34874C6.14929 6.54367 6.14898 6.85961 6.34429 7.05423L7.99179 8.69727L6.34492 10.3409C6.14961 10.5359 6.14961 10.8518 6.34492 11.0464C6.54011 11.2412 6.85648 11.2415 7.05179 11.0464L8.69804 9.40214L10.3446 11.0455C10.5398 11.2403 10.8562 11.2405 11.0515 11.0455C11.2468 10.8506 11.2468 10.5346 11.0515 10.34L9.40429 8.69727L11.0509 7.05392C11.248 6.86024 11.248 6.54211 11.0512 6.34874ZM8.69804 0.712891C4.27929 0.712891 0.698044 4.28715 0.698044 8.69727C0.698044 13.1074 4.27929 16.6816 8.69804 16.6816C13.1168 16.6816 16.698 13.1074 16.698 8.69727C16.698 4.28715 13.1168 0.712891 8.69804 0.712891ZM8.69804 15.6836C4.83867 15.6836 1.69804 12.5491 1.69804 8.69727C1.69804 4.84543 4.83867 1.71094 8.69804 1.71094C12.5574 1.71094 15.698 4.84543 15.698 8.69727C15.698 12.5491 12.5574 15.6836 8.69804 15.6836Z" fill="#DC2626"/>
+</g>
+</svg>

package/src/components/executiontasks/payments/completePayment/CompletePaymentET.tsx

@@ -171,7 +171,7 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
               >
                 Continue
               </Button>
-              <Button
+              {(props.isSelfLoop == false) && <Button
                 labelStyle={CommonStyles.cancelButtonLabel}
                 style={[CommonStyles.cancelButton, { marginTop: 10 }]}
                 mode={'outlined'}
@@ -199,6 +199,7 @@ const CompletePaymentET = (props: CompletePaymentInput) => {
               >
                 Cancel
               </Button>
+              }
             </View>
           </Modal>
         </View>

package/src/components/executiontasks/payments/completePayment/CompletePaymentSchema.ts

@@ -8,6 +8,7 @@ import type {
 import type { ETAmount } from '../init/InitPaymentSchema';
 
 export type CompletePaymentInput = BaseETRequest & {
+  isSelfLoop: boolean;
   paymentMode: string;
   expectedAmount: ETAmount;
   collectedAmount: ETAmount;

package/src/components/executiontasks/payments/init/InitPaymentET.tsx

@@ -14,8 +14,6 @@ import { CommonStyles } from '../../../../styles/executionTasks/CommonStyles';
 import { showToast } from '../../../widgets/Toaster';
 import {
   Button,
-  Modal,
-  Portal,
   Provider,
   RadioButton,
 } from 'react-native-paper';
@@ -172,7 +170,7 @@ const InitPaymentET = (props: InitPaymentInput) => {
               marginEnd: 10,
             }}
           >
-            <Button
+            {(props.isSelfLoop == false) && <Button
               style={[
                 CommonStyles.cancelButton,
                 {
@@ -203,6 +201,7 @@ const InitPaymentET = (props: InitPaymentInput) => {
             >
               Cancel
             </Button>
+            }
             <Button
               disabled={disableNext}
               style={[

package/src/components/executiontasks/payments/init/InitPaymentSchema.ts

@@ -12,6 +12,7 @@ import type {
 export type AllowedModes = 'CASH' | 'UPI' | 'PAYMENT_LINK';
 
 export type InitPaymentInput = BaseETRequest & {
+  isSelfLoop: boolean;
   amount: ETAmount;
   allowedModes: string[];
   onSubmitET: (output: InitPaymentOutput) => void;