From e1d2201fa96c64344169832636f8f42defd80439 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+xabg2@users.noreply.github.com> Date: Tue, 24 Mar 2026 12:10:11 +0100 Subject: [PATCH 1/2] feat: add dropdown to select inxt domain --- .../components/SelectMailInput.tsx | 66 +++++++++++++++++++ .../identity-setup/components/UpdateEmail.tsx | 17 +++-- .../mail/components/tray/header/index.tsx | 2 +- src/features/mail/components/tray/index.tsx | 2 +- .../{searchInput => search-input}/index.tsx | 0 .../index.tsx | 0 6 files changed, 81 insertions(+), 6 deletions(-) create mode 100644 src/features/identity-setup/components/SelectMailInput.tsx rename src/features/mail/components/tray/{searchInput => search-input}/index.tsx (100%) rename src/features/mail/components/tray/{trayEmptyState => tray-empty-state}/index.tsx (100%) diff --git a/src/features/identity-setup/components/SelectMailInput.tsx b/src/features/identity-setup/components/SelectMailInput.tsx new file mode 100644 index 0000000..aa13e7f --- /dev/null +++ b/src/features/identity-setup/components/SelectMailInput.tsx @@ -0,0 +1,66 @@ +import { Dropdown } from '@internxt/ui'; +import { CaretDownIcon, CaretUpIcon, CheckIcon } from '@phosphor-icons/react'; +import { useState } from 'react'; + +const DOMAIN_OPTIONS = ['@intx.me', '@inxt.eu', '@encrypt.eu'] as const; + +export type Domain = (typeof DOMAIN_OPTIONS)[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 = DOMAIN_OPTIONS.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 From 52d7dc4c03a50076890c6b719968b815a7d03802 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+xabg2@users.noreply.github.com> Date: Tue, 24 Mar 2026 12:18:53 +0100 Subject: [PATCH 2/2] fix: extract domains to the constants file --- src/constants.ts | 2 ++ src/features/identity-setup/components/SelectMailInput.tsx | 7 +++---- 2 files changed, 5 insertions(+), 4 deletions(-) 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 index aa13e7f..10d46cd 100644 --- a/src/features/identity-setup/components/SelectMailInput.tsx +++ b/src/features/identity-setup/components/SelectMailInput.tsx @@ -1,10 +1,9 @@ +import { INTERNXT_EMAIL_DOMAINS } from '@/constants'; import { Dropdown } from '@internxt/ui'; import { CaretDownIcon, CaretUpIcon, CheckIcon } from '@phosphor-icons/react'; import { useState } from 'react'; -const DOMAIN_OPTIONS = ['@intx.me', '@inxt.eu', '@encrypt.eu'] as const; - -export type Domain = (typeof DOMAIN_OPTIONS)[number]; +export type Domain = (typeof INTERNXT_EMAIL_DOMAINS)[number]; interface SelectMailInputProps { value: string; @@ -16,7 +15,7 @@ interface SelectMailInputProps { const SelectMailInput = ({ value, onChangeValue, selectedDomain, onChangeDomain }: SelectMailInputProps) => { const [isFocused, setIsFocused] = useState(false); - const menuItems = DOMAIN_OPTIONS.map((domain) => ( + const menuItems = INTERNXT_EMAIL_DOMAINS.map((domain) => (