react-native-timacare 3.3.19 → 3.3.20

package/lib/commonjs/screens/detail-loan/ShowQrCode.js.flow

@@ -1,25 +1,25 @@
-//@ts-nocheck
+// @ts-nocheck
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Alert,
   Clipboard,
   Dimensions,
   Image,
-  SafeAreaView,
+  Platform,
   ScrollView,
+  StatusBar,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import { commonStyles } from '../CommonStyles';
 import {
+  CloseIcon,
   IconBack,
   IconCopy,
   IconDownload,
   TimaSmall,
 } from '../../assets/icons';
-import { color } from '../../theme';
 import { MText } from '../../components/MText';
 import { useNavigation } from '@react-navigation/native';
 import { Api } from '../../services/api';
@@ -31,19 +31,70 @@ import MHeader from '../../components/MHeader';
 import ReactNativeModal from 'react-native-modal';
 import LinearGradient from 'react-native-linear-gradient';
 import moment from 'moment';
+import {
+  TourGuideProvider, // Main provider
+  TourGuideZone, // Main wrapper of highlight component
+  useTourGuideController, // hook to start, etc.
+} from 'rn-tourguide';
 
 export const ShowQrCode = observer(function ShowQrCode(props: any) {
+  return (
+    <TourGuideProvider
+      borderRadius={8}
+      maskOffset={4}
+      tooltipComponent={TransferContentTooltip}
+      tooltipStyle={$tourTooltipPosition}
+      backdropColor="rgba(0, 0, 0, 0.35)"
+      androidStatusBarVisible={true}
+      verticalOffset={
+        Platform.OS === 'android' ? StatusBar.currentHeight - 25 : 0
+      }
+    >
+      <ShowQrCodeContent {...props} />
+    </TourGuideProvider>
+  );
+});
+
+const TransferContentTooltip = ({ currentStep, handleStop }: any) => {
+  return (
+    <View style={$tourTooltip}>
+      <MText style={$tourTooltipText}>{currentStep?.text}</MText>
+      <TouchableOpacity onPress={handleStop} style={$tourTooltipButton}>
+        <MText style={$tourTooltipButtonText}>Đồng ý</MText>
+      </TouchableOpacity>
+      <View style={$tourTooltipArrow} />
+    </View>
+  );
+};
+
+const ShowQrCodeContent = observer(function ShowQrCodeContent(props: any) {
   const navigation = useNavigation();
+  const scrollViewRef = useRef<ScrollView>(null);
+  const transferContentRef = useRef<View>(null);
+  const transferContentY = useRef(0);
+  const transferContentHeight = useRef(0);
+  const scrollViewHeight = useRef(0);
+  const scrollContentHeight = useRef(0);
+  const startGuideTimeout = useRef<NodeJS.Timeout>();
   const [linkImage, setLinkImage] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
   const [showGuide, setShowGuide] = useState(false);
+  const [shouldStartGuide, setShouldStartGuide] = useState(false);
+  const [isGuideRunning, setIsGuideRunning] = useState(false);
+  const {
+    canStart, // a boolean indicate if you can start tour guide
+    start, // a function to start the tourguide
+    eventEmitter,
+  } = useTourGuideController();
   const getData = () => {
     setIsLoading(true);
     Api.getInstance()
       .getQrPayment({
         LoanBriefId: props?.route?.params?.id,
-        TypeCloseLoan: 0, // đóng tiền kỳ
-        Money: Number(props?.route?.params?.item?.payMoney) || 0,
+        TypeCloseLoan: props?.route?.params?.isFullPayment ? 1 : 0, // đóng tiền kỳ
+        Money: props?.route?.params?.isFullPayment
+          ? props?.route?.params?.totalMoney
+          : props?.route?.params?.item?.payMoney,
       })
       .then((response) => {
         setIsLoading(false);
@@ -60,6 +111,12 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
       .catch((err) => {
         Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
         setIsLoading(false);
+      })
+      .finally(() => {
+        setShouldStartGuide(true);
+        if (props?.route?.params?.isFullPayment) {
+          setShowGuide(true);
+        }
       });
   };
 
@@ -67,6 +124,72 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
     getData();
   }, []);
 
+  useEffect(() => {
+    const handleStartGuide = () => setIsGuideRunning(true);
+    const handleStopGuide = () => setIsGuideRunning(false);
+    eventEmitter?.on('start', handleStartGuide);
+    eventEmitter?.on('stop', handleStopGuide);
+    return () => {
+      eventEmitter?.off('start', handleStartGuide);
+      eventEmitter?.off('stop', handleStopGuide);
+    };
+  }, [eventEmitter]);
+
+  const scrollToTransferContent = () => {
+    const scrollToY = (
+      y: number,
+      targetHeight = transferContentHeight.current
+    ) => {
+      const viewportHeight =
+        scrollViewHeight.current || Dimensions.get('window').height;
+      const contentHeight = scrollContentHeight.current || viewportHeight;
+      const maxScrollY = Math.max(contentHeight - viewportHeight, 0);
+      const minTopForTooltip = 120;
+      const bottomGap = 80;
+      const preferredTargetTop = Math.min(
+        Math.max(viewportHeight * 0.42, minTopForTooltip),
+        Math.max(viewportHeight - targetHeight - bottomGap, minTopForTooltip)
+      );
+      const nextScrollY = Math.min(
+        Math.max(y - preferredTargetTop, 0),
+        maxScrollY
+      );
+
+      scrollViewRef.current?.scrollTo({
+        y: nextScrollY,
+        animated: true,
+      });
+    };
+
+    const innerViewNode = scrollViewRef.current?.getInnerViewNode?.();
+
+    if (innerViewNode && transferContentRef.current?.measureLayout) {
+      transferContentRef.current.measureLayout(
+        innerViewNode,
+        (_x, y, _width, height) => scrollToY(y, height),
+        () => scrollToY(transferContentY.current)
+      );
+    } else {
+      scrollToY(transferContentY.current);
+    }
+  };
+
+  useEffect(() => {
+    if (!props?.route?.params?.isFullPayment && shouldStartGuide && canStart) {
+      scrollToTransferContent();
+      startGuideTimeout.current = setTimeout(() => {
+        start(1);
+        setShouldStartGuide(false);
+      }, 450);
+    }
+
+    return () => {
+      if (startGuideTimeout.current) {
+        clearTimeout(startGuideTimeout.current);
+      }
+    };
+  }, [canStart, shouldStartGuide, start]);
+
   return (
     <View style={{ flex: 1, backgroundColor: 'rgba(244, 244, 244, 1)' }}>
       <MHeader title={`Vay trực tuyến 24/7`} />
@@ -85,14 +208,25 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
               fontFamily: 'BeVietnamPro-SemiBold',
             }}
           >
-            THANH TOÁN KỲ
+            {props?.route?.params?.isFullPayment
+              ? 'TẤT TOÁN HỢP ĐỒNG'
+              : 'THANH TOÁN KỲ'}
           </MText>
         </View>
-        <ScrollView>
+        <ScrollView
+          ref={scrollViewRef}
+          scrollEnabled={!isGuideRunning}
+          onLayout={(event) => {
+            scrollViewHeight.current = event.nativeEvent.layout.height;
+          }}
+          onContentSizeChange={(_width, height) => {
+            scrollContentHeight.current = height;
+          }}
+        >
           <View
             style={{
               backgroundColor: 'white',
-              margin: 16,
+              marginHorizontal: 16,
               borderRadius: 16,
               padding: 16,
             }}
@@ -137,8 +271,8 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
                   uri: linkImage,
                 }}
                 style={{
-                  width: Dimensions.get('window').width - 50,
-                  height: Dimensions.get('window').width - 50,
+                  width: Dimensions.get('window').width - 100,
+                  height: Dimensions.get('window').width - 100,
                   resizeMode: 'contain',
                 }}
               />
@@ -258,74 +392,127 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
               >
                 {props.route.params?.data?.accountName}
               </MText>
-              <MText
-                style={{
-                  fontSize: 12,
-                  color: 'rgba(51, 51, 51, 1)',
-                  fontWeight: '300',
-                  marginTop: 16,
-                }}
-              >
-                Số tiền phải trả
-              </MText>
-              <MText
-                style={{
-                  fontSize: 16,
-                  fontWeight: '600',
-                  fontFamily: 'BeVietnamPro-SemiBold',
-                }}
-              >
-                {formatMoney(props?.route?.params?.item?.payMoney)} đ
-              </MText>
-              <MText
-                style={{ color: '#828282', fontSize: 10, fontStyle: 'italic' }}
-              >
-                Số tiền được tính đến ngày {moment().format('DD/MM/YYYY')}
-              </MText>
-              <MText
-                style={{
-                  fontSize: 12,
-                  color: 'rgba(51, 51, 51, 1)',
-                  fontWeight: '300',
-                  marginTop: 16,
-                }}
-              >
-                Nội dung chuyển khoản{' '}
+
+              <View>
                 <MText
                   style={{
                     fontSize: 12,
-                    color: '#EB5757',
+                    color: 'rgba(51, 51, 51, 1)',
                     fontWeight: '300',
+                    marginTop: 16,
                   }}
                 >
-                  (Bắt buộc)
+                  Số tiền phải trả
                 </MText>
-              </MText>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
-              >
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <MText
+                    style={{
+                      fontSize: 16,
+                      fontWeight: '600',
+                      fontFamily: 'BeVietnamPro-SemiBold',
+                    }}
+                  >
+                    {formatMoney(
+                      props?.route?.params?.isFullPayment
+                        ? props?.route?.params?.totalMoney
+                        : props?.route?.params?.item?.payMoney
+                    )}{' '}
+                    đ
+                  </MText>
+                  <TouchableOpacity
+                    onPress={() =>
+                      Clipboard.setString(
+                        props?.route?.params?.isFullPayment
+                          ? props?.route?.params?.totalMoney
+                          : props?.route?.params?.item?.payMoney
+                      )
+                    }
+                  >
+                    <IconCopy />
+                  </TouchableOpacity>
+                </View>
                 <MText
                   style={{
-                    color: 'rgba(61, 61, 61, 1)',
-                    fontWeight: '600',
-                    fontSize: 16,
-                    fontFamily: 'BeVietnamPro-SemiBold',
+                    color: '#828282',
+                    fontSize: 10,
+                    fontStyle: 'italic',
                   }}
                 >
-                  TC{props.route.params?.codeId}
+                  Số tiền được tính đến ngày {moment().format('DD/MM/YYYY')}
                 </MText>
-                <TouchableOpacity
-                  onPress={() =>
-                    Clipboard.setString(`TC${props.route.params?.codeId}`)
-                  }
-                >
-                  <IconCopy />
-                </TouchableOpacity>
               </View>
+              <TourGuideZone
+                zone={1}
+                text={
+                  'Để hệ thống ghi nhận chính xác khoản thanh toán, bạn đừng quên sao chép đúng nội dung chuyển khoản nhé!'
+                }
+                tooltipBottomOffset={-45}
+                style={$transferGuideZone}
+              >
+                <View>
+                  <MText
+                    style={{
+                      fontSize: 12,
+                      color: 'rgba(51, 51, 51, 1)',
+                      fontWeight: '300',
+                    }}
+                  >
+                    Nội dung chuyển khoản{' '}
+                    <MText
+                      style={{
+                        fontSize: 12,
+                        color: '#EB5757',
+                        fontWeight: '300',
+                      }}
+                    >
+                      (Bắt buộc)
+                    </MText>
+                  </MText>
+                  <View
+                    ref={transferContentRef}
+                    onLayout={(event) => {
+                      transferContentY.current = event.nativeEvent.layout.y;
+                      transferContentHeight.current =
+                        event.nativeEvent.layout.height;
+                    }}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <MText
+                      style={{
+                        color: 'rgba(61, 61, 61, 1)',
+                        fontWeight: '600',
+                        fontSize: 16,
+                        fontFamily: 'BeVietnamPro-SemiBold',
+                      }}
+                    >
+                      {props?.route?.params?.isFullPayment
+                        ? `Tat toan TC${props.route.params?.data?.codeId}`
+                        : `TC${props.route.params?.data?.codeId}`}
+                    </MText>
+                    <TouchableOpacity
+                      onPress={() =>
+                        Clipboard.setString(
+                          props?.route?.params?.isFullPayment
+                            ? `Tat toan TC${props.route.params?.data?.codeId}`
+                            : `TC${props.route.params?.data?.codeId}`
+                        )
+                      }
+                    >
+                      <IconCopy />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </TourGuideZone>
             </View>
             <View
               style={{
@@ -370,10 +557,19 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
               alignItems: 'center',
               justifyContent: 'space-between',
               padding: 16,
+              marginBottom: 16,
             }}
           >
             <MText>Hướng dẫn chuyển tiền</MText>
-            <TouchableOpacity onPress={() => setShowGuide(true)}>
+            <TouchableOpacity
+              onPress={() => {
+                if (props?.route?.params?.isFullPayment) {
+                  setShowGuide(true);
+                } else {
+                  navigation.push('GuideTransferBank');
+                }
+              }}
+            >
               <MText
                 style={{ color: '#2F80ED', textDecorationLine: 'underline' }}
               >
@@ -382,6 +578,43 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
             </TouchableOpacity>
           </View>
         </ScrollView>
+        {props?.route?.params?.isFullPayment && (
+          <TouchableOpacity
+            style={{ margin: 16 }}
+            onPress={() => {
+              Alert.alert(
+                'Xác nhận tất toán',
+                'Bạn có chắc muốn gửi YÊU CẦU TẤT TOÁN hợp đồng không?',
+                [
+                  {
+                    text: 'Có',
+                  },
+                  {
+                    text: 'Không',
+                  },
+                ]
+              );
+            }}
+          >
+            <LinearGradient
+              colors={['#FF7A00', '#EF4123']}
+              style={{
+                alignItems: 'center',
+                borderRadius: 30,
+                height: 40,
+                justifyContent: 'center',
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                }}
+              >
+                Xác nhận tất toán
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        )}
       </View>
       <Loading isLoading={isLoading} />
       <ReactNativeModal
@@ -574,6 +807,12 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
               </MText>
             </View>
           </View>
+          <TouchableOpacity
+            style={{ position: 'absolute', left: 16, top: 16 }}
+            onPress={() => setShowGuide(false)}
+          >
+            <CloseIcon />
+          </TouchableOpacity>
         </View>
       </ReactNativeModal>
     </View>
@@ -590,3 +829,68 @@ const $header: ViewStyle = {
   paddingVertical: 16,
   justifyContent: 'center',
 };
+
+const $tourTooltipPosition: ViewStyle = {
+  alignItems: 'flex-end',
+  overflow: 'visible',
+  paddingHorizontal: 16,
+  paddingTop: 0,
+  paddingBottom: 0,
+  borderRadius: 0,
+};
+
+const $tourTooltip: ViewStyle = {
+  width: 224,
+  minHeight: 84,
+  backgroundColor: 'white',
+  borderRadius: 8,
+  paddingHorizontal: 12,
+  paddingTop: 10,
+  paddingBottom: 12,
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.18,
+  shadowRadius: 8,
+  elevation: 8,
+};
+
+const $tourTooltipText = {
+  color: '#333333',
+  fontSize: 10,
+  lineHeight: 16,
+  fontWeight: '400',
+};
+
+const $tourTooltipButton: ViewStyle = {
+  alignSelf: 'flex-end',
+  marginTop: 6,
+};
+
+const $tourTooltipButtonText = {
+  color: '#EF592E',
+  fontSize: 10,
+  lineHeight: 16,
+  textDecorationLine: 'underline',
+};
+
+const $tourTooltipArrow: ViewStyle = {
+  position: 'absolute',
+  right: 18,
+  bottom: -10,
+  width: 0,
+  height: 0,
+  borderLeftWidth: 8,
+  borderRightWidth: 8,
+  borderTopWidth: 10,
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent',
+  borderTopColor: 'white',
+};
+
+const $transferGuideZone: ViewStyle = {
+  backgroundColor: 'white',
+  borderRadius: 8,
+  borderWidth: 2,
+  borderColor: 'white',
+  marginTop: 16,
+};