diff --git a/src/constants.ts b/src/constants.ts index 70a9577..5dc0186 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -5,3 +5,5 @@ export const SEND_URL = 'https://send.internxt.com'; export const INTERNXT_BASE_URL = 'https://internxt.com'; export const HUNDRED_TB = 100 * 1024 * 1024 * 1024 * 1024; + +export const INTERNXT_EMAIL_DOMAINS = ['@intx.me', '@inxt.eu', '@encrypt.eu'] as const; diff --git a/src/features/identity-setup/components/SelectMailInput.tsx b/src/features/identity-setup/components/SelectMailInput.tsx new file mode 100644 index 0000000..10d46cd --- /dev/null +++ b/src/features/identity-setup/components/SelectMailInput.tsx @@ -0,0 +1,65 @@ +import { INTERNXT_EMAIL_DOMAINS } from '@/constants'; +import { Dropdown } from '@internxt/ui'; +import { CaretDownIcon, CaretUpIcon, CheckIcon } from '@phosphor-icons/react'; +import { useState } from 'react'; + +export type Domain = (typeof INTERNXT_EMAIL_DOMAINS)[number]; + +interface SelectMailInputProps { + value: string; + onChangeValue: (value: string) => void; + selectedDomain: Domain; + onChangeDomain: (domain: Domain) => void; +} + +const SelectMailInput = ({ value, onChangeValue, selectedDomain, onChangeDomain }: SelectMailInputProps) => { + const [isFocused, setIsFocused] = useState(false); + + const menuItems = INTERNXT_EMAIL_DOMAINS.map((domain) => ( + + )); + + return ( +
+ onChangeValue(e.target.value)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + /> + +
+ + {({ open }) => ( + + {selectedDomain} + {open ? : } + + )} + +
+
+ ); +}; + +export default SelectMailInput; diff --git a/src/features/identity-setup/components/UpdateEmail.tsx b/src/features/identity-setup/components/UpdateEmail.tsx index fa4989c..7668966 100644 --- a/src/features/identity-setup/components/UpdateEmail.tsx +++ b/src/features/identity-setup/components/UpdateEmail.tsx @@ -1,6 +1,7 @@ import { useTranslationContext } from '@/i18n'; -import { Avatar, Button, Input } from '@internxt/ui'; +import { Avatar, Button } from '@internxt/ui'; import { useState } from 'react'; +import SelectMailInput, { type Domain } from './SelectMailInput'; interface UpdateEmailProps { onNext: (email: string) => void; @@ -10,15 +11,18 @@ interface UpdateEmailProps { export const UpdateEmail = ({ userFullName, currentEmail, onNext }: UpdateEmailProps) => { const { translate, translateArray } = useTranslationContext(); - const [email, setEmail] = useState(''); + const [username, setUsername] = useState(''); + const [domain, setDomain] = useState('@intx.me'); const descriptions = translateArray('identitySetup.updateEmail.description', { name: userFullName, current_email: currentEmail, }); + const fullEmail = `${username}${domain}`; + const handleOnClick = () => { - onNext(email); + onNext(fullEmail); }; return ( @@ -43,7 +47,12 @@ export const UpdateEmail = ({ userFullName, currentEmail, onNext }: UpdateEmailP {/* Email input */}
- setEmail(e)} /> +

{translate('identitySetup.updateEmail.mailType')}

diff --git a/src/features/mail/components/tray/header/index.tsx b/src/features/mail/components/tray/header/index.tsx index 86705c2..4266c6d 100644 --- a/src/features/mail/components/tray/header/index.tsx +++ b/src/features/mail/components/tray/header/index.tsx @@ -1,5 +1,5 @@ import { Checkbox, Dropdown, type MenuItemType } from '@internxt/ui'; -import SearchInput from '../searchInput'; +import SearchInput from '../search-input'; import { ArchiveIcon, CaretDownIcon, DotsThreeVerticalIcon, FunnelSimpleIcon, TrashIcon } from '@phosphor-icons/react'; import { useTranslationContext } from '@/i18n'; diff --git a/src/features/mail/components/tray/index.tsx b/src/features/mail/components/tray/index.tsx index 73f925d..fe58729 100644 --- a/src/features/mail/components/tray/index.tsx +++ b/src/features/mail/components/tray/index.tsx @@ -1,6 +1,6 @@ import { Tray } from '@internxt/ui'; import Header from './header'; -import { TrayEmptyState } from './trayEmptyState'; +import { TrayEmptyState } from './tray-empty-state'; interface TrayListProps { folderName: string; diff --git a/src/features/mail/components/tray/searchInput/index.tsx b/src/features/mail/components/tray/search-input/index.tsx similarity index 100% rename from src/features/mail/components/tray/searchInput/index.tsx rename to src/features/mail/components/tray/search-input/index.tsx diff --git a/src/features/mail/components/tray/trayEmptyState/index.tsx b/src/features/mail/components/tray/tray-empty-state/index.tsx similarity index 100% rename from src/features/mail/components/tray/trayEmptyState/index.tsx rename to src/features/mail/components/tray/tray-empty-state/index.tsx