feat: 增加设置 WA 界面

src/components/OrderProfile.jsx

@@ -23,10 +23,11 @@ import useAuthStore from '@/stores/AuthStore'
 const OrderProfile = ({ coliSN, ...props }) => {
   const navigate = useNavigate()
   const { notification, message } = App.useApp()
-  const [formComment] = Form.useForm()
+  const [formComment, formWhatsApp] = Form.useForm()
   const [loading, setLoading] = useState(false)
 
   const [openOrderCommnet, setOpenOrderCommnet] = useState(false)
+  const [openWhatsApp, setOpenWhatsApp] = useState(false)
 
   const orderLabelOptions = copy(OrderLabelDefaultOptions)
   orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })
@@ -117,10 +118,13 @@ const OrderProfile = ({ coliSN, ...props }) => {
             {customerDetail.email}
           </Typography.Text>
           <Typography.Text>
-            <WhatsAppOutlined className=' pr-1' />
+            <WhatsAppOutlined className='pr-1' />
+            {isEmpty(customerDetail.whatsapp_phone_number) ?
+            <Button type="text" onClick={() => setOpenWhatsApp(true)} size='small'>设置 WhatsApp</Button> :
             <Link to={`/order/chat/${coliSN}`} state={orderDetail}>
               {customerDetail.whatsapp_phone_number}
             </Link>
+            }
           </Typography.Text>
           <Typography.Text>
             <Tooltip title='出发日期'>
@@ -265,6 +269,42 @@ const OrderProfile = ({ coliSN, ...props }) => {
           </Form.Item>
         </Form>
       </Drawer>
+      <Drawer title='设置 WhatsApp' closable={{ 'aria-label': 'Close Button' }} onClose={() => setOpenWhatsApp(false)} open={openWhatsApp}>
+        <Form
+          layout={'vertical'}
+          form={formWhatsApp}
+          initialValues={{ number: '' }}
+          scrollToFirstError
+          onFinish={(values) => {
+            console.log('Received values of form: ', values)
+            // appendOrderComment(loginUser.userId, orderId, values.number)
+              .then(() => {
+                notification.success({
+                  message: '温性提示',
+                  description: '设置 WhatsApp 成功',
+                })
+                setOpenWhatsApp(false)
+                formComment.setFieldsValue({ number: '' })
+              })
+              .catch((reason) => {
+                notification.error({
+                  message: '设置出错',
+                  description: reason.message,
+                  placement: 'top',
+                  duration: 60,
+                })
+              })
+          }}>
+          <Form.Item name='comment' label='WhatsApp' rules={[{ required: true, message: '请输入 WhatsApp 号码' }]}>
+            <Input placeholder='国家代码+城市代码+电话号码'/>
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+          </Form.Item>
+        </Form>
+      </Drawer>
     </>
   )
 }