web2468/src/widgets/WPaymentOrder/BR/BRPayOrder.jsx

import styles from "./styles.module.scss";
import Spring from "@components/Spring";
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useSelector} from "react-redux";
import {getUserInfo} from "@features/mainSlice";
import {getCurrPayOrder} from "@features/paySlice";
import {ReactComponent as PixLogo} from '@assets/singlesvg/pix.svg';
import {formatDate, formatTime, stringFormat} from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import {CopyToClipboard} from "react-copy-to-clipboard";
import {toast} from "react-toastify";
import QRCode from 'qrcode.react';
import {ReactComponent as SuccessIcon} from "@assets/singlesvg/succss.svg";
import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
const i18n=global.i18n;
const BRPayOrder=({close})=>{
    const navigate=useNavigate();
    const user=useSelector(getUserInfo);
    const orderInfo=useSelector(getCurrPayOrder);
    const [leftTime,setLeftTime]=useState(0);
    const getLeftTime=()=>{
        if (orderInfo==null)return 0;
        let deadline=Number(orderInfo.deadline);
        let createAt=Number(orderInfo.createAt);
        let expireAt=createAt+deadline*1000;
        let now=Date.now();
        let left=expireAt-now;
        if (left<0)left=0;
        return left;
    }
    const updateLeftTime=(timer)=>{
        let left=getLeftTime();
        setLeftTime(left);
        if (left<=0){
            clearInterval(timer);
            timer=null;
            if (close)close();
        }
        return timer;
    }
    useEffect(()=>{
        let timer=null;
        if (orderInfo){
            setLeftTime(getLeftTime());
            timer=setInterval(()=>{
                timer=updateLeftTime(timer);
            },1000)
        }
        return () => {
            if (timer!=null){
                clearInterval(timer);
                timer=null;
            }
        };
    },[orderInfo])

    const renderTitle=()=>{
        return (
            <div className={styles.title}>
                <PixLogo className={styles.logo}/>
                {i18n.t("deposit.order_info.pay_type_pix")}
            </div>
        )
    }
    const renderBasic=()=>{
        let deadline=Number(orderInfo.deadline);
        let createAt=Number(orderInfo.createAt);
        let expireAt=createAt+deadline*1000;
        return (
            <>
                <div className={styles.tips}>
                    {stringFormat(i18n.t("deposit.order_info.tips"),[formatDate(expireAt)])}
                </div>
                <div className={styles.base_info}>
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.create_date")}
                        </div>
                        {formatDate(createAt)}
                    </div>
                    {/*<div className={styles.line}></div>*/}
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.time")}
                        </div>
                        {formatTime(leftTime,true)}
                    </div>
                    {/*<div className={styles.line}></div>*/}
                    <CopyToClipboard text={orderInfo.prdOrdNo} onCopy={()=>{
                        toast.success(i18n.t("copy_success"));
                    }}>
                        <div className={styles.info_row}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info.order")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.prdOrdNo}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </div>
                    </CopyToClipboard>
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.value")}
                        </div>
                        <div className={styles.money}>
                            {global.DOLLAR+orderInfo.money}
                        </div>
                    </div>
                </div>
            </>
        )
    }
    const renderPayInfo=()=>{
        return (
            <div className={styles.pay_info}>
                <div className={styles.pay_label}>{i18n.t("deposit.order_info.content")}</div>
                <div className={styles.pay_content}>{orderInfo.content}</div>
                <QRCode className={styles.pay_qr} value={orderInfo.content} />
                <div className={styles.pay_btn}>
                    <CopyToClipboard text={orderInfo.content} onCopy={()=>{
                        toast.success(i18n.t("deposit.order_info.tips1"));
                    }}>
                        <button className={"button-green"}>
                            {i18n.t("deposit.order_info.copyButton")}
                        </button>
                    </CopyToClipboard>
                    {/*<button className={styles.btn_already}>*/}
                    {/*    {i18n.t("deposit.order_info.lookButton")}*/}
                    {/*</button>*/}
                </div>
            </div>
        )
    }
    const renderOrderInfo=()=>{
        return (
            <div className={styles.order_info}>
                {renderBasic()}
                {renderPayInfo()}
            </div>
        )
    }
    const renderSuccess=()=>{
        return (
            <div className={styles.success}>
                <SuccessIcon className={styles.logo}/>
                <div className={styles.tips}>{i18n.t("deposit.order_info.tips2")}</div>
                <div className={styles.btns_con}>
                    <button className={"button-green"} onClick={()=>{
                        close();
                    }}>{i18n.t("deposit.order_info.okey")}</button>
                </div>
            </div>
        )
    }
    const renderView=()=>{
        let view=(<></>);
        if (orderInfo==null)return view;
        if (orderInfo.status==="success"){
            view=(
                // <Spring type="slideUp" className={styles.container}>
                //     {renderSuccess()}
                // </Spring>
                <WOrderSuccess close={close}/>
            )
        }
        else
        {
            view=(
                <Spring type="slideUp" className={styles.container}>
                    {renderTitle()}
                    {renderOrderInfo()}
                </Spring>
            )
        }
        return view;
    }
    return (
        <>
            {renderView()}
        </>
    )
}
export default BRPayOrder;