Global-sales/src/views/accounts/GeneratePayment.jsx

import { Radio, Row, Col, Tooltip, Flex, Form, Input, Button, InputNumber, Select, message } from 'antd'
import { useState, useEffect } from 'react'
import HtmlPreview from './HtmlPreview'
import useAuthStore from '@/stores/AuthStore'
import { useOrderStore } from '@/stores/OrderStore'
import { InfoCircleOutlined } from '@ant-design/icons'

function GeneratePayment() {
  const [messageApi, contextHolder] = message.useMessage()

  const [generateForm] = Form.useForm()

  const [getPrimaryEmail, loginUser] = useAuthStore(s => [s.getPrimaryEmail, s.loginUser])
  const [generatePayment] = useOrderStore(s => [s.generatePayment])

  const [isHtmlLoading, setHtmlLoading] = useState(false)
  const [generatedObject, setGeneratedObject] = useState('')

  const handleGenerate = () => {
    setHtmlLoading(true)
    generatePayment(generateForm.getFieldsValue())
      .then((result) => {
        setGeneratedObject(result)
      })
      .catch((ex) => console.info(ex))
      .finally(() => setHtmlLoading(false))
  }

  return (
    <>
      <Row gutter={16}>
        <Col span={6} offset={6}>
          <Form
            labelCol={{
              span: 4,
            }}
            layout={'horizontal'}
            form={generateForm}
            initialValues={{
              notifyEmail: getPrimaryEmail(),
              description: 'Tracking Code:\r\nTravel Advisor: \r\nContent:\r\n',
              orderNumber: 'lyj202411141004001',
              langauge: 'US',
              orderType: '227001',
              currency: 'USD',
              amount: 1,
              userId: loginUser.userId
            }}>
            <Form.Item name='userId' className='hidden' ><Input /></Form.Item>
            <Form.Item label='订单类型' name='orderType'
              rules={[
                {
                  required: true,
                  message: '订单类型必选',
                },
              ]}
            >
              <Radio.Group>
                <Radio.Button value='227001'>线路订单</Radio.Button>
                <Radio.Button value='227002'>商务订单</Radio.Button>
              </Radio.Group>
            </Form.Item>
            <Form.Item label='语种' name='langauge'
              rules={[
                {
                  required: true,
                  message: '语种必选',
                },
              ]}
            >
              <Select
                options={[
                  { value: 'US', label: '英语' },
                  { value: 'de_de', label: '德语' },
                  { value: 'fr_fr', label: '法语' },
                  { value: 'es_es', label: '西语' },
                  { value: 'ja_JP', label: '日语' },
                  { value: 'ru_ru', label: '俄语' },
                  { value: 'it_it', label: '意大利语' },
                ]}
              />
            </Form.Item>
            <Form.Item label='订单号' name='orderNumber'
              rules={[
                {
                  required: true,
                  message: '订单号必填',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item label='金额' name='amount'
              rules={[
                {
                  required: true,
                  message: '金额填',
                },
              ]}
            >
              <InputNumber
                addonBefore={
                  <Form.Item name='currency' noStyle>
                    <Select
                      style={{
                        width: 90,
                      }}
                      options={[
                        {value: 'USD', label: '美元'},
                        {value: 'CNY', label: '人民币'},
                        {value: 'EUR', label: '欧元'},
                        {value: 'JPY', label: '日元'},
                        {value: 'AUD', label: '澳元'},
                        {value: 'CAD', label: '加元'},
                        {value: 'HKD', label: '港币'},
                      ]}
                    >
                    </Select>
                  </Form.Item>
                }
                min={1}
                className='w-full'
              />
            </Form.Item>
            <Form.Item label='描述' name='description'>
              <Input.TextArea rows={4} />
            </Form.Item>
            <Form.Item label='通知邮箱' name='notifyEmail'>
              <Input />
            </Form.Item>
          </Form>
          <Flex gap='middle' justify='center'>
            <Button
              type='primary'
              loading={isHtmlLoading}
              onClick={() => {
                handleGenerate()
              }}>
              生成
            </Button>
          </Flex>
        </Col>

        <Col span={6}>
          <Flex gap='small' vertical>
            <Flex gap='small'>
              <span>支付按钮</span>
              <Tooltip placement='topLeft' title='发送邮件使用'>
                <InfoCircleOutlined />
              </Tooltip>
            </Flex>
            <HtmlPreview value={generatedObject.payhtml} loading={isHtmlLoading} onCopied={() => messageApi.success('已复制')} />
            <Flex gap='small'>
              <span>支付链接</span>
              <Tooltip placement='topLeft' title='发送 WhatsApp 使用'>
                <InfoCircleOutlined />
              </Tooltip>
            </Flex>
            <Input readOnly value={generatedObject.paylink} />
          </Flex>
        </Col>
        {contextHolder}
      </Row>
    </>
  )
}

export default GeneratePayment