Initial commit

web/app/components/header/account-setting/members-page/invite-modal/index.module.css

@@ -0,0 +1,4 @@
+.modal {
+  padding: 24px 32px !important;
+  width: 400px !important;
+}

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import s from './index.module.css'
+import { inviteMember } from '@/service/common'
+import { emailRegex } from '@/config'
+import { ToastContext } from '@/app/components/base/toast'
+
+interface IInviteModalProps {
+  onCancel: () => void,
+  onSend: () => void,
+}
+const InviteModal = ({
+  onCancel,
+  onSend,
+}: IInviteModalProps) => {
+  const { t } = useTranslation()
+  const [email, setEmail] = useState('')
+  const { notify } = useContext(ToastContext)
+
+  const handleSend = async () => {
+    if (emailRegex.test(email)) {
+      try {
+        const res = await inviteMember({ url: '/workspaces/current/members/invite-email', body: { email, role: 'admin'} })
+
+        if (res.result === 'success') {
+          onCancel()
+          onSend()
+        }
+      } catch (e) {
+        
+      }
+    } else {
+      notify({ type: 'error', message: t('common.members.emailInvalid') })
+    }
+  }
+
+  return (
+    <div className={s.wrap}>
+      <Modal isShow onClose={() => {}} className={s.modal}>
+        <div className='flex justify-between mb-2'>
+          <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
+          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
+        </div>
+        <div className='mb-7 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
+        <div>
+          <div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
+          <input
+            className='
+              block w-full py-2 mb-9 px-3 bg-gray-50 outline-none border-none 
+              appearance-none text-sm text-gray-900 rounded-lg
+            '
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            placeholder={t('common.members.emailPlaceholder') || ''}
+          />
+          <Button 
+            className='w-full text-sm font-medium' 
+            onClick={handleSend}
+            type='primary'
+          >
+            {t('common.members.sendInvite')}
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default InviteModal