@pi-spi/app 0.0.0-stage → 1.2.1

package/src/modules/contacts/presentation/pages/contact_list_phone_widget.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../core/bloc_react';
+import type { ContactPI } from '../../domain/contact_pi';
+import { ContactBloc } from '../bloc/contact_bloc';
+import { ContactMoreEvent } from '../bloc/contact_event';
+import { groupContactPhones, groupContacts } from './contact_groups';
+import type { ContactSelectHandler } from './contact_list_widget_item';
+import { ContactSection } from './contact_section';
+import { PaginatedScrollView } from '../../../../shared/widgets/paginated_scroll_view';
+
+/**
+ * Liste des numéros de téléphone des contacts, regroupés par lettre : un
+ * contact à plusieurs numéros apparaît une fois par numéro (ou une seule
+ * fois, avec son alias, si [enableAlias]).
+ */
+export function ContactPhoneListWidget({
+  onSelect,
+  selectedContacts,
+  expanded = false,
+  smallItem = false,
+  enableAlias = false,
+  searchKeyword,
+}: {
+  onSelect?: ContactSelectHandler;
+  selectedContacts?: ContactPI[] | null;
+  expanded?: boolean;
+  smallItem?: boolean;
+  enableAlias?: boolean;
+  searchKeyword?: string | null;
+}) {
+  const contactBloc = useBloc(ContactBloc);
+  const state = useBlocBuilder(contactBloc);
+  const contacts = state.contacts.data;
+  const next = state.contacts.meta.next as number | undefined;
+  if (contacts.length === 0) return null;
+
+  return (
+    <PaginatedScrollView
+      onEndReached={() => {
+        if (next != null) contactBloc.add(new ContactMoreEvent(contacts, next, searchKeyword));
+      }}
+      style={expanded ? styles.flex : null}
+    >
+      {(enableAlias ? groupContacts(contacts) : groupContactPhones(contacts)).map((group) => (
+        <ContactSection key={group.header} group={group} onSelect={onSelect} selectedContacts={selectedContacts} smallItem={smallItem} />
+      ))}
+    </PaginatedScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

package/src/modules/contacts/presentation/pages/contact_list_widget_item.tsx

@@ -0,0 +1,136 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { Platform, Pressable, Share, StyleSheet, Text, View, type GestureResponderEvent } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { showPopupMenu } from '../../../../shared/material/popup_menu';
+import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
+import { ContactPI } from '../../domain/contact_pi';
+import type { PhoneContact } from '../../domain/phone_contact';
+
+export type ContactSelectHandler = (contact: PhoneContact, alias: string | null, isSelected: boolean | null) => void;
+
+/**
+ * Un contact du téléphone : avatar (avec le badge π s'il a un alias
+ * PI-SPI), nom, et alias ou à défaut premier numéro. Avec [showCheckbox],
+ * une case à cocher précède la ligne ; sinon, un appui long sur un contact
+ * ayant un alias ouvre un menu pour copier ou partager cet alias.
+ */
+export function ContactListWidgetItem({
+  contact,
+  onSelect,
+  showCheckbox = false,
+  isSelected = false,
+  smallItem = false,
+}: {
+  contact: PhoneContact;
+  onSelect?: ContactSelectHandler;
+  showCheckbox?: boolean;
+  isSelected?: boolean;
+  smallItem?: boolean;
+}) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const traductions = useAppLocalizations();
+  const alias = ContactPI.getAlias(contact);
+  const avatarSize = smallItem ? 35 : 45;
+  const badgeSize = smallItem ? 14 : 18;
+
+  const showLightMenu = (event: GestureResponderEvent) => {
+    void showPopupMenu(router, {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+      items: [
+        {
+          icon: 'content-copy',
+          label: traductions.profileContactPageaActionCopy,
+          onTap: () => void ClipboardWidget.setData(alias!),
+        },
+        {
+          icon: Platform.OS === 'ios' ? 'ios-share' : 'share',
+          label: traductions.profileContactPageaActionShare,
+          onTap: () =>
+            void Share.share({ title: traductions.qrcodePagePartageAliasMessage(contact.displayName), message: alias! }),
+        },
+      ],
+    });
+  };
+
+  const tile = (
+    <View style={[styles.tile, { minHeight: smallItem ? 48 : 64 }]}>
+      {/* Avatar */}
+      <View>
+        <CircleAvatarWidget nom={contact.displayName} photo={contact.photo} rounded radius={avatarSize} />
+        {alias != null && (
+          <View
+            style={[
+              styles.badge,
+              {
+                width: badgeSize,
+                height: badgeSize,
+                borderRadius: badgeSize / 2,
+                backgroundColor: Themer.brownColor,
+                borderColor: theme.colorScheme.surface,
+              },
+            ]}
+          >
+            <Image source={Images.iconsPiBadge} style={styles.flex} contentFit="contain" />
+          </View>
+        )}
+      </View>
+      <View style={styles.texts}>
+        {/* Contact name */}
+        <Text numberOfLines={1} style={smallItem ? theme.textTheme.displayMedium : theme.textTheme.headlineSmall}>
+          {contact.displayName}
+        </Text>
+        {/* Phone number or alias */}
+        <Text
+          style={smallItem ? theme.textTheme.displaySmall : [theme.textTheme.displaySmall, { color: Themer.neural04Color }]}
+        >
+          {alias ?? contact.phones[0]?.number ?? ''}
+        </Text>
+      </View>
+    </View>
+  );
+
+  if (showCheckbox) {
+    return (
+      <Pressable
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isSelected }}
+        onPress={() => onSelect?.(contact, alias, !isSelected)}
+        style={styles.row}
+      >
+        <MaterialIcons
+          name={isSelected ? 'check-box' : 'check-box-outline-blank'}
+          size={24}
+          color={isSelected ? theme.colorScheme.primary : Themer.neural02Color}
+        />
+        <View style={styles.gap16} />
+        <View style={styles.flex}>{tile}</View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={() => onSelect?.(contact, alias, null)}
+      onLongPress={alias != null ? showLightMenu : undefined}
+    >
+      {tile}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8 },
+  texts: { flex: 1, marginLeft: 16 },
+  badge: { position: 'absolute', right: 0, bottom: 0, borderWidth: 2, overflow: 'hidden' },
+  gap16: { width: 16 },
+});

package/src/modules/contacts/presentation/pages/contact_section.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../../../core/theme';
+import { Card } from '../../../../shared/material/card';
+import type { ContactList } from '../../domain/contact_list';
+import { ContactPI } from '../../domain/contact_pi';
+import { ContactListWidgetItem, type ContactSelectHandler } from './contact_list_widget_item';
+
+/** Une section de la liste des contacts : la lettre, puis ses contacts dans une carte. */
+export function ContactSection({
+  group,
+  onSelect,
+  selectedContacts,
+  smallItem = false,
+}: {
+  group: ContactList;
+  onSelect?: ContactSelectHandler;
+  selectedContacts?: ContactPI[] | null;
+  smallItem?: boolean;
+}) {
+  const theme = useTheme();
+  return (
+    <View>
+      {/* Section header */}
+      <Text
+        style={[smallItem ? theme.textTheme.displaySmall : theme.textTheme.displayLarge, { color: Themer.neural03Color }]}
+      >
+        {group.header}
+      </Text>
+      <View style={styles.gap8} />
+      {/* Contacts in the section */}
+      <Card>
+        <View style={styles.padding}>
+          {group.contacts.map((contact) => {
+            const alias = ContactPI.getAlias(contact);
+            const isSelected = alias != null && selectedContacts != null && selectedContacts.some((t) => t.alias === alias);
+            return (
+              <ContactListWidgetItem
+                key={contact.id}
+                contact={contact}
+                onSelect={onSelect}
+                showCheckbox={selectedContacts != null}
+                isSelected={isSelected}
+                smallItem={smallItem}
+              />
+            );
+          })}
+        </View>
+      </Card>
+      <View style={styles.gap16} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  padding: { paddingHorizontal: 16 },
+  gap8: { height: 8 },
+  gap16: { height: 16 },
+});

package/src/modules/contacts/presentation/pages/contact_select_page.tsx

@@ -0,0 +1,203 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, View } from 'react-native';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../shared/material/buttons';
+import { Card } from '../../../../shared/material/card';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
+import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { ContactPI } from '../../domain/contact_pi';
+import type { PhoneContact } from '../../domain/phone_contact';
+import { ContactBloc } from '../bloc/contact_bloc';
+import { ContactSearchEvent } from '../bloc/contact_event';
+import type { ContactCreatePageParams, ContactUpdateResult } from './create/contact_create_page';
+import { ContactAliasListWidget } from './contact_list_alias_widget';
+
+export type ContactSelectPageProps = {
+  onContinue: (contacts: ContactPI[]) => void;
+  title?: string;
+  minSelected?: number;
+  maxSelected?: number;
+  mbnoForbidden?: boolean;
+};
+
+/**
+ * Sélection de plusieurs contacts ayant un alias PI-SPI (ex. partage de
+ * dépense). Un contact sans alias valide ouvre l'écran d'ajout d'alias.
+ */
+export function ContactSelectPage({ onContinue, title, minSelected, maxSelected, mbnoForbidden }: ContactSelectPageProps) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const window = useWindowDimensions();
+  const contactBloc = useBloc(ContactBloc);
+  const [selectedContacts, setSelectedContacts] = useState<ContactPI[]>([]);
+  const [searchHasFocus, setSearchHasFocus] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState<string | null>(null);
+
+  const isMbnoForbidden = mbnoForbidden ?? false;
+  const hasSelection = selectedContacts.length > 0 && !searchHasFocus;
+
+  // ---------------------------------------------------------------------
+  // Logique métier
+  // ---------------------------------------------------------------------
+
+  const addContact = (contact: PhoneContact, alias: string | null) => {
+    setSelectedContacts((current) => {
+      const alreadySelected = current.some((c) => c.alias === alias);
+      const reachedMax = maxSelected != null && current.length >= maxSelected;
+      if (alreadySelected || reachedMax) return current;
+      return [...current, new ContactPI({ name: contact.displayName, phoneNumber: contact.phones[0]?.number ?? '', alias })];
+    });
+  };
+
+  const removeContact = (alias: string) => {
+    setSelectedContacts((current) => current.filter((c) => c.alias !== alias));
+  };
+
+  const promptForAlias = async (contact: PhoneContact, existingAlias: string | null): Promise<string | null> => {
+    const params: ContactCreatePageParams = {
+      contact,
+      mbnoForbidden,
+      contactAlias: isMbnoForbidden && existingAlias != null ? existingAlias : undefined,
+    };
+    const response = await AppRouter.push<ContactUpdateResult>(router, AppRouter.contactCreate, { params });
+    const newAlias = response?.alias;
+    if (newAlias != null && AliasPI.isValidAlias(newAlias, { mbnoForbidden: isMbnoForbidden })) return newAlias;
+    return null;
+  };
+
+  const handleContactSelected = async (contact: PhoneContact, alias: string | null, isSelected: boolean | null) => {
+    if (isSelected === false) {
+      removeContact(alias!);
+      return;
+    }
+    if (alias != null && AliasPI.isValidAlias(alias, { mbnoForbidden: isMbnoForbidden })) {
+      addContact(contact, alias);
+      return;
+    }
+    // Le contact n'a pas d'alias valide : avertir si besoin, puis
+    // rediriger vers l'écran de création/édition d'alias.
+    if (alias != null) {
+      CustomSnackBar.show(isMbnoForbidden ? traductions.aliasFormMbnoForbidden : traductions.aliasFormInvalid, {
+        bgColor: Themer.systemErrorColor,
+      });
+    }
+    const createdAlias = await promptForAlias(contact, alias);
+    if (createdAlias != null) addContact(contact, createdAlias);
+  };
+
+  const canContinue = selectedContacts.length >= (minSelected ?? 1);
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <Text style={theme.textTheme.titleSmall}>{title ?? traductions.transactionSplitTitle}</Text>
+        <View style={styles.gap10} />
+        {/* Recherche */}
+        <Card>
+          <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
+            <MaterialIcons name="search" size={24} color={Themer.neural03Color} />
+            <TextInput
+              style={[theme.textTheme.displayLarge, styles.searchInput]}
+              placeholder={traductions.transactionsSendInputHint}
+              placeholderTextColor={Themer.neural03Color}
+              onFocus={() => setSearchHasFocus(true)}
+              onBlur={() => setSearchHasFocus(false)}
+              onChangeText={(value) => {
+                contactBloc.add(new ContactSearchEvent(value));
+                setSearchKeyword(value.length > 0 ? value : null);
+              }}
+            />
+          </View>
+        </Card>
+        <View style={styles.gap10} />
+        {/* Contacts sélectionnés */}
+        {hasSelection && (
+          <>
+            <View style={{ height: window.height * 0.12 }}>
+              <Card style={styles.selectedCard}>
+                <ScrollView horizontal contentContainerStyle={styles.selectedList} showsHorizontalScrollIndicator={false}>
+                  {selectedContacts.map((contact) => (
+                    <View key={contact.alias ?? contact.name} style={styles.chip}>
+                      <View>
+                        <CircleAvatarWidget nom={contact.name} rounded radius={32} />
+                        <Pressable
+                          accessibilityRole="button"
+                          hitSlop={8}
+                          onPress={() => removeContact(contact.alias!)}
+                          style={[styles.remove, { backgroundColor: theme.colorScheme.error, borderColor: theme.colorScheme.surface }]}
+                        >
+                          <MaterialIcons name="close" size={12} color="white" />
+                        </Pressable>
+                      </View>
+                      <View style={styles.gap6} />
+                      <Text numberOfLines={1} style={[theme.textTheme.bodySmall, styles.chipName]}>
+                        {contact.name}
+                      </Text>
+                    </View>
+                  ))}
+                </ScrollView>
+              </Card>
+            </View>
+            <View style={styles.gap10} />
+          </>
+        )}
+        {/* Liste des contacts */}
+        <View style={styles.flex}>
+          <ContactAliasListWidget
+            hideTitle
+            expanded
+            selectedContacts={selectedContacts}
+            onSelect={(contact, alias, isSelected) => void handleContactSelected(contact, alias, isSelected)}
+            searchKeyword={searchKeyword}
+          />
+        </View>
+        {hasSelection && (
+          <ElevatedButton
+            onPress={
+              canContinue
+                ? () => {
+                    Keyboard.dismiss();
+                    onContinue(selectedContacts);
+                  }
+                : undefined
+            }
+          >
+            {traductions.btnTextContinue}
+          </ElevatedButton>
+        )}
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  gap6: { height: 6 },
+  gap10: { height: 10 },
+  search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
+  searchInput: { flex: 1, marginLeft: 8, paddingVertical: 0 },
+  selectedCard: { flex: 1, marginHorizontal: 8, borderRadius: 16, elevation: 1 },
+  selectedList: { padding: 8, alignItems: 'center' },
+  chip: { alignItems: 'center', marginRight: 12 },
+  chipName: { width: 70, textAlign: 'center', fontWeight: '500' },
+  remove: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/modules/contacts/presentation/pages/create/contact_create_page.tsx

@@ -0,0 +1,163 @@
+import { useReducer, useState } from 'react';
+import { Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc, useBlocBuilder, useBlocListener, useCreateBloc } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../../shared/material/buttons';
+import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { AliasPI } from '../../../../../shared/models/alias_pi';
+import { InputAliasWidget } from '../../../../../shared/widgets/input_alias_widget';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { CustomLoadingDialog } from '../../../../../shared/widgets/loading_page';
+import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { ContactPI } from '../../../domain/contact_pi';
+import { contactIdOf, type PhoneContact } from '../../../domain/phone_contact';
+import { ContactBloc } from '../../bloc/contact_bloc';
+import { ContactListEvent } from '../../bloc/contact_event';
+import { ContactCreateBloc } from '../../bloc/create/contact_create_bloc';
+import { ContactCreateSubmitEvent } from '../../bloc/create/contact_create_event';
+import {
+  ContactCreateErrorState,
+  ContactCreateLoadingState,
+  ContactCreateSuccessState,
+  type ContactCreateState,
+} from '../../bloc/create/contact_create_state';
+
+/** Paramètres de la route `AppRouter.contactCreate`. */
+export type ContactCreatePageParams = {
+  /** Le contact qu'on souhaite modifier */
+  contact?: PhoneContact | null;
+  /** L'alias du contact qu'on souhaite modifier */
+  contactAlias?: string | null;
+  mbnoForbidden?: boolean | null;
+};
+
+/** Valeur retournée après la modification d'un contact existant. */
+export type ContactUpdateResult = { alias: string; name: string; photo?: string | null };
+
+/**
+ * Création d'un contact (nom + alias PI-SPI), ou ajout/remplacement de
+ * l'alias d'un contact existant. Retourne à l'écran appelant le
+ * {@link ContactPI} créé, ou un {@link ContactUpdateResult} après une
+ * modification.
+ */
+export function ContactCreatePage({ contact: phoneContact, contactAlias, mbnoForbidden }: ContactCreatePageParams) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const contactListBloc = useBloc(ContactBloc);
+  const contactBloc = useCreateBloc(() => new ContactCreateBloc());
+  const state = useBlocBuilder(contactBloc);
+  const [, rebuild] = useReducer((x: number) => x + 1, 0);
+
+  const [contact] = useState(() => {
+    const name = phoneContact != null ? `${phoneContact.firstName} ${phoneContact.lastName}` : '';
+    return new ContactPI({ name, phoneNumber: '', alias: contactAlias });
+  });
+  const [aliasCommand] = useState(
+    () => new AliasPI({ value: contactAlias ?? undefined, mbnoForbidden: mbnoForbidden ?? undefined }),
+  );
+
+  useBlocListener(contactBloc, (s) => {
+    if (s instanceof ContactCreateLoadingState) {
+      CustomLoadingDialog.show(router);
+    } else if (s instanceof ContactCreateSuccessState) {
+      CustomLoadingDialog.hide(router);
+      contactListBloc.add(new ContactListEvent(null));
+      // Après modification de contact
+      if (phoneContact != null) {
+        const result: ContactUpdateResult = { alias: contact.alias!, name: contact.name, photo: phoneContact.photo };
+        AppRouter.pop(router, { value: result });
+      }
+      // Après création de contact
+      else {
+        AppRouter.pop(router, { value: contact });
+      }
+    }
+    // Show error
+    else if (s instanceof ContactCreateErrorState) {
+      CustomLoadingDialog.hide(router);
+    }
+  });
+
+  const isFormValid = (s: ContactCreateState) =>
+    !(s instanceof ContactCreateLoadingState) && contact.name.length > 0 && aliasCommand.isValid();
+  const valid = isFormValid(state);
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
+          {/* Titre de la page */}
+          <Text style={theme.textTheme.titleSmall}>{title(traductions, phoneContact, contactAlias)}</Text>
+          <View style={styles.gap5} />
+          {/* Sous titre de la page */}
+          <Text style={theme.textTheme.displaySmall}>{subtitle(traductions, phoneContact, contactAlias)}</Text>
+          <View style={styles.gap32} />
+          {/* Champ Nom du contact */}
+          <CustomTextInput
+            readOnly={phoneContact != null}
+            defaultValue={contact.name}
+            labelText={traductions.contactCreateNameLabel}
+            messageError={contact.name.length === 0 ? traductions.contactCreateNameErrorEmpty : ''}
+            onChange={(value) => {
+              contact.name = value;
+              rebuild();
+            }}
+          />
+          <View style={styles.gap16} />
+          {/* Champ Alias */}
+          <InputAliasWidget
+            command={aliasCommand}
+            onChange={(value) => {
+              contact.alias = value;
+              rebuild();
+            }}
+          />
+        </ScrollView>
+        <View style={styles.bottom}>
+          <ElevatedButton
+            onPress={
+              valid
+                ? () => {
+                    Keyboard.dismiss();
+                    contactBloc.add(
+                      new ContactCreateSubmitEvent(contact, {
+                        contactId: phoneContact != null ? contactIdOf(phoneContact) : null,
+                        contactOldAlias: contactAlias,
+                      }),
+                    );
+                  }
+                : undefined
+            }
+          >
+            {traductions.contactBtnSave}
+          </ElevatedButton>
+        </View>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+function title(traductions: AppLocalizations, contact?: PhoneContact | null, contactAlias?: string | null): string {
+  if (contactAlias != null) return traductions.contactUpdateAliasTitle;
+  if (contact != null) return traductions.contactUpdateTitle;
+  return traductions.contactCreateTitle;
+}
+
+function subtitle(traductions: AppLocalizations, contact?: PhoneContact | null, contactAlias?: string | null): string {
+  if (contactAlias != null) return traductions.contactUpdateAliasSubtitle;
+  if (contact != null) return traductions.contactUpdateSubtitle;
+  return traductions.contactCreateSubtitle;
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  gap5: { height: 5 },
+  gap16: { height: 16 },
+  gap32: { height: 32 },
+  bottom: { paddingVertical: 16 },
+});