| | |
| | | import { IS_CE_EDITION } from '@/config' |
| | | import type { InvitationResult } from '@/models/common' |
| | | import Tooltip from '@/app/components/base/tooltip' |
| | | import { noop } from 'lodash-es' |
| | | |
| | | export type SuccessInvitationResult = Extract<InvitationResult, { status: 'success' }> |
| | | export type FailedInvitationResult = Extract<InvitationResult, { status: 'failed' }> |
| | |
| | | |
| | | return ( |
| | | <div className={s.wrap}> |
| | | <Modal isShow onClose={noop} className={s.modal}> |
| | | <div className='mb-3 flex justify-between'> |
| | | <Modal isShow onClose={() => {}} className={s.modal}> |
| | | <div className='flex justify-between mb-3'> |
| | | <div className=' |
| | | flex h-12 w-12 items-center justify-center rounded-xl |
| | | border-[0.5px] border-components-panel-border bg-background-section-burn |
| | | w-12 h-12 flex items-center justify-center rounded-xl |
| | | bg-white border-[0.5px] border-gray-100 |
| | | shadow-xl |
| | | '> |
| | | <CheckCircleIcon className='h-[22px] w-[22px] text-[#039855]' /> |
| | | <CheckCircleIcon className='w-[22px] h-[22px] text-[#039855]' /> |
| | | </div> |
| | | <XMarkIcon className='h-4 w-4 cursor-pointer' onClick={onCancel} /> |
| | | <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} /> |
| | | </div> |
| | | <div className='mb-1 text-xl font-semibold text-text-primary'>{t('common.members.invitationSent')}</div> |
| | | <div className='mb-1 text-xl font-semibold text-gray-900'>{t('common.members.invitationSent')}</div> |
| | | {!IS_CE_EDITION && ( |
| | | <div className='mb-10 text-sm text-text-tertiary'>{t('common.members.invitationSentTip')}</div> |
| | | <div className='mb-10 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div> |
| | | )} |
| | | {IS_CE_EDITION && ( |
| | | <> |
| | | <div className='mb-5 text-sm text-text-tertiary'>{t('common.members.invitationSentTip')}</div> |
| | | <div className='mb-9 flex flex-col gap-2'> |
| | | <div className='mb-5 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div> |
| | | <div className='flex flex-col gap-2 mb-9'> |
| | | { |
| | | !!successInvitationResults.length |
| | | && <> |
| | | <div className='font-Medium py-2 text-sm text-text-primary'>{t('common.members.invitationLink')}</div> |
| | | <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div> |
| | | {successInvitationResults.map(item => |
| | | <InvitationLink key={item.email} value={item} />)} |
| | | </> |
| | |
| | | { |
| | | !!failedInvitationResults.length |
| | | && <> |
| | | <div className='font-Medium py-2 text-sm text-text-primary'>{t('common.members.failedInvitationEmails')}</div> |
| | | <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedInvitationEmails')}</div> |
| | | <div className='flex flex-wrap justify-between gap-y-1'> |
| | | { |
| | | failedInvitationResults.map(item => |
| | | <div key={item.email} className='flex justify-center rounded-md border border-red-300 bg-orange-50 px-1'> |
| | | <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'> |
| | | <Tooltip |
| | | popupContent={item.message} |
| | | > |
| | | <div className='flex items-center justify-center gap-1 text-sm'> |
| | | <div className='flex justify-center items-center text-sm gap-1'> |
| | | {item.email} |
| | | <RiQuestionLine className='h-4 w-4 text-red-300' /> |
| | | <RiQuestionLine className='w-4 h-4 text-red-300' /> |
| | | </div> |
| | | </Tooltip> |
| | | </div>, |