new-tarder/src/pages/transfer/index.tsx

import { Button, Form, Input, Select, notification } from 'antd'
import '../../styles/home.scss'
import { useRef, useState } from 'react'
import { observer } from 'mobx-react'
import store from '../../store'
import { http_send_email, http_transfer } from '../../http/api'
import { useTranslation } from 'react-i18next'
import CountdownTimer, { CountdownTimerRef } from '../../components/CountdownTimer'

const Transfer = () => {

  const { userInfo } = store.state
  const [form] = Form.useForm()
  const { t } = useTranslation()
  const options = [
    { label: t('Cash Wallet-Asset Account'), value: 1 },
    { label: t('Cash Wallet-Other Members'), value: 2 },
    { label: t('Asset Account-Cash Wallet'), value: 3 }
  ]

  const [type, setType] = useState(-1)
  const countdownRef = useRef<CountdownTimerRef>(null)

  const onSelect = (_type: any) => {
    setType(_type)
  }


  const getVerifyCode = async () => {
    try {
      if (countdownRef.current?.isActive) return
      countdownRef.current?.handleStart()
      const res: any = await http_send_email({
        email: userInfo.email,
        type: 5
      })
      if (res.code === 0) {
        notification.success({
          message: t('Verification code sent successfully')
        })
      } else {
        notification.error({
          message: t('Failed to send verification code')
        })
        countdownRef.current?.handleStop()
      }

    } catch (error) {
      countdownRef.current?.handleStop()
    }
  }

  const onFinish = async (values: any) => {
    const res: any = await http_transfer({
      ...values,
      type
    })
    if (res.code === 0) {
      store.getUserInfo()
      form.resetFields()
      notification.success({
        message: t('Submit success')
      })
    }

  }

  return (
    <div className="deposit">
      <div className='text-white fz-22 mb-2'>{t('Assets transfer')}</div>
      <div className="flex-1 container">
        <div className='p-2'>
          <div className='fz-wb-550'>{t('Assets transfer-matters needing attention')}</div>
          <div className='text-sub fz-14 mt-1'>
            <p>{t('1.Please ensure the safety of the equipment during use，Prevent data from being tampered with or leaked。')}</p>
            {/* <p>{t('2.In the process of fund transfer, if there is a delay or other situation，Please handle it later or contact customer service。')}</p> */}
            {/* <p>{t('3.After fund transfer operation，There may be delays in the system；If exceeding10Minutes have not yet arrived，Please contact customer service。')}</p> */}
          </div>
        </div>
        <div className='divider' style={{ backgroundColor: '#8492a6' }}></div>
        <div className='p-2'>
          <Form
            layout="vertical"
            onFinish={onFinish}
            form={form}
          >
            <Form.Item label={<span className='fz-wb-550'>{t('Assets operations')}</span>}>
              <Select style={{ height: 50 }} placeholder={t('Please select an operation type...')} options={options} onSelect={onSelect} />
              {
                type < 3 ? (
                  <div>
                    <span className='fz-12 text-primary'>{t('Wallet balance')}：</span>
                    <span className='fz-12 text-success'>${userInfo.balance}</span>
                  </div>
                ) : (
                  <div>
                    <span className='fz-12 text-primary'>{t('Asset account amount')}：</span>
                    <span className='fz-12 text-success'>${userInfo.account_balance}</span>
                  </div>
                )
              }
            </Form.Item>

            {
              type === 2 && (
                <Form.Item name="email" label={t('Member account')} rules={[{ required: true, message: t('Please enter the other party’s login account (email)') }, { type: 'email', message: t('Email format error') }]}>
                  <Input style={{ height: 50 }} placeholder={t('Please enter the other party’s login account (email)')} />
                </Form.Item>
              )
            }

            {
              type === 1 && (
                <Form.Item label={<span className='fz-wb-550'>{t('Capital account')}</span>}>
                  <Input style={{ height: 50 }} placeholder={t('Please enter the transfer amount')} value={`(CFD) ${userInfo.account},${t('Balance')}：${userInfo.account_balance}`} disabled />
                </Form.Item>
              )
            }

            {
              type === 3 && (
                <Form.Item label={<span className='fz-wb-550'>{t('Capital account')}</span>}>
                  <Input style={{ height: 50 }} placeholder={t('Please enter the transfer amount')} value={`(CFD) ${userInfo.account},${t('Balance')}：${userInfo.account_balance}`} disabled />
                </Form.Item>
              )
            }

            <Form.Item name="amount" rules={[{ required: true, message: t('Please enter the transfer amount') }]} label={<span className='fz-wb-550'>{t('Transfer amount')}</span>}>
              <Input style={{ height: 50 }} placeholder={t('Please enter the transfer amount')} />
            </Form.Item>

            {
              type === 2 && (
                <Form.Item label={<span className='fz-wb-550'>{t('Verification Code')}</span>} name="code" rules={[{ required: true, message: t('Verification Code') }]}>
                  <div className='row-items'>
                    <Input style={{ height: 50, flex: 1 }} className='input' placeholder={t('Verification Code')} />
                    <Button className='' onClick={getVerifyCode} style={{ height: 50 }} type='primary'>
                      <CountdownTimer ref={countdownRef} initialSeconds={60} />
                    </Button>
                  </div>
                </Form.Item>
              )
            }

            <Form.Item>
              <div className='row-center'>
                <Button type='primary' htmlType='submit' style={{ borderRadius: 30 }}>{t('submit')}</Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default observer(Transfer)