@pi-spi/app 2.0.0 → 2.2.0

package/src/l10n/app_localizations_pt.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsPt: AppLocalizations = {
   reessayer: `Tente novamente`,
   errorDialogOk: `Entendi`,
   indisponible: `Indisponível`,
+  imageSelectCamera: `Tirar uma foto`,
+  imageSelectGalerie: `Escolher da galeria`,
   locationErrorMessage: `Parece que você não concedeu permissão para que o PI-SPI acesse a sua localização!`,
   notificationErrorMessage: `Parece que você não concedeu permissão ao PI-SPI para lhe enviar notificações!`,
   contactErrorMessage: `Parece que você não concedeu ao PI-SPI permissão para aceder aos seus contatos!`,
@@ -61,8 +63,7 @@ export const AppLocalizationsPt: AppLocalizations = {
   introductionItem5: `Economize e compartilhe despesas entre amigos`,
   introductionItem6: `Utilize o alias para privacidade e precisão`,
   introductionLogin: `Conectar`,
-  introductionFooterTitle: `Você não tem uma conta`,
-  introductionFooterSubtitle: `Encontre uma agência próxima`,
+  introductionPasser: `Saltar`,
   loginPageTitle: `Conectar`,
   loginPageWebSubtitle: `Para acessar sua conta, você precisa se autenticar.`,
   loginPageWebSubtitle2: `Redirecionando para o serviço de autenticação...`,
@@ -103,7 +104,8 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   forgetCodePinFormTitle: `Introduza o seu novo código PIN`,
   updateCodePinError: `Falha ao alterar o código PIN, por favor tente novamente`,
   updateCodePinSuccess: `O seu código PIN foi alterado com sucesso`,
-  forgetCodePinOptionPageTitle: `Escolha um método de recuperação`,
+  forgetCodePinOptionPageTitle: `Método de recuperação`,
+  forgetCodePinOptionPageSubTitle: `Será enviado um código de confirmação`,
   forgetCodePinOptionEmail: `Email`,
   forgetCodePinOptionPhone: `Telefone`,
   forgetCodePinOptionBtnContinuer: `Continuar`,
@@ -119,6 +121,8 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   identificationFormLoginMessage: `Digite seu código PIN`,
   identificationFormForgotMessage: `Código PIN esquecido?`,
   identificationHelloUser: (user: string) => `Olá, ${user}`,
+  identificationGoodEveningUser: (user: string) => `Boa noite, ${user}`,
+  identificationConfirmationTitle: `Confirmação`,
   identificationErrorPinInvalid: `O código PIN é inválido`,
   permissionNotificationTitle: `Não perca nada`,
   permissionNotificationSubTitle: `Receba notificações sobre despesas, segurança e suas economias para ficar sempre atualizado`,
@@ -133,7 +137,7 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   permissionErrorDevice: `Seu dispositivo não é suportado.`,
   permissionErrorToken: `Ocorreu um erro. Tente novamente`,
   permissionErrorApi: `Erro de comunicação - Verifique sua conexão com a internet ou tente novamente mais tarde!`,
-  securityLogoutTitle: `Você tem certeza que deseja se desconectar?`,
+  securityLogoutTitle: `Já vai embora?`,
   securityLogoutSubTitle: `Se você deseja continuar trabalhando, clique em « Cancelar » e você voltará para o seu estado atual. Se você realmente deseja se desconectar, clique em « Desconectar ».`,
   securityLogoutBtnConfirmer: `Desconectar`,
   securityLogoutBtnAnnuler: `Cancelar`,
@@ -159,11 +163,12 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   addPhoneNumberFormErrorEmpty: `Campo obrigatório`,
   addPhoneNumberFormErrorInvalid: `Número inválido`,
   addPhoneNumberFormBtnContinuer: `Continuar`,
+  addPhoneNumberIndicatifSheetTitle: `Indicativo do país`,
   verifyPhoneNumberPageTitle: `Código de verificação`,
   verifyPhoneNumberPageSubTitle: (number: string) => `Digite o código enviado para ${number}`,
   aliaMBNOResendMessage: (delay: string) => `Reenviar o código em ${delay}`,
   aliaMBNOResendMessageBtn: `Reenviar o código`,
-  aliaMBNOInvalidOtpMessage: `Código OTP inválido`,
+  aliaMBNOInvalidOtpMessage: `Código inválido`,
   aliaMBNOServeurMessage: `Ocorreu um erro, por favor tente novamente`,
   aliaErrorPageTitle: `😔 Oooops`,
   aliaErrorPageSubTitle: `Este alias está ocupado`,
@@ -188,6 +193,8 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   aliasClaimRejectSuccessTitle: `Revendicação rejeitada`,
   aliasClaimRejectSuccessDescription: (alias: string) => `Seu alias ${alias} foi conservado`,
   aliasClaimDetailsRefusPageSubTitile: `O rejeito só pode ser aceito se você provar que o número de telefone pertence a você inserindo o código OTP`,
+  aliasClaimRefusOtpTitle: `Recusar a reivindicação`,
+  aliasClaimRefusOtpSubTitle: (number: string) => `Para provar que o número ${number} é seu, insira o código que acaba de lhe ser enviado`,
   aliasClaimConfirmError: `A confirmação falhou, por favor, tente novamente`,
   aliasClaimConfirmSuccessRejectTitle: `Alias conservado`,
   aliasClaimConfirmSuccessAcceptTitle: `Alias deletado`,
@@ -217,11 +224,18 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   contactCreateNameLabel: `Nome e sobrenome`,
   contactCreateNameErrorEmpty: `Nome obrigatório`,
   contactBtnSave: `Salvar e continuar`,
+  contactSelectBtnContinue: (nombre: string) => `Continuar (${nombre})`,
+  contactActionsCopy: `Copiar o alias`,
+  contactActionsShare: `Partilhar o alias`,
+  contactActionsTooltip: `Ações`,
+  contactSectionPi: `Contactos PI-SPI`,
   contactAliasSaveText: `Salvar nos contatos`,
+  aliasWidgetCopyTooltip: `Copiar o alias`,
   contactAliasSaveConfirmMessage: (clientNom: string, alias: string) => `Tem certeza de que deseja salvar ${clientNom} na lista de contatos com o alias ${alias}?`,
   homePageToolbarTabbarCompte: `Conta`,
   homePageToolbarTabbarAbonnement: `Assinaturas`,
   homePageToolbarTabbarEconomie: `Economia`,
+  homePageSearchTooltip: `Pesquisar uma funcionalidade`,
   homeSolde: `Saldo`,
   homeActionSend: `Enviar`,
   homeActionRequest: `Receber`,
@@ -302,6 +316,10 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   transactionFormOthrMax: `O número de conta não deve exceder 34 caracteres`,
   transactionFormOthrPaysLabel: `País`,
   transactionFormOthrNomLabel: `Instituição financeira`,
+  transactionFormOthrPaysRecherche: `Pesquisar um país`,
+  transactionFormOthrPaysAucun: `Nenhum país encontrado`,
+  transactionFormOthrPspRecherche: `Pesquisar uma instituição`,
+  transactionFormOthrPspAucune: `Nenhuma instituição encontrada`,
   transactionFormContinueBtn: `Continuar`,
   transactionFormSaveContactBtn: `Salvar e fazer um transferência`,
   transactionFormVerificationTitle: `Confirmação`,
@@ -325,9 +343,13 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   transactionFormScheduleFrequenceHebdomadaire: `Semanal`,
   transactionFormScheduleFrequenceMensuelle: `Mensal`,
   transactionFormScheduleFrequenceAnnuelle: `Anual`,
+  transactionFormScheduleFrequenceJour: `Todos os dias`,
+  transactionFormScheduleFrequenceSemaine: `Todas as semanas`,
+  transactionFormScheduleFrequenceMois: `Todos os meses`,
+  transactionFormScheduleFrequenceAnnuee: `Todos os anos`,
   transactionFormScheduleFrequenceSurMesure: `Sob medida`,
   transactionFormSchedulePeriodiciteLabel: `Périodicité`,
-  transactionFormScheduleFrequenceSelected: (periodicite: string, frequence: string) => `Todos os ${periodicite} ${frequence}`,
+  transactionFormScheduleFrequenceSelected: (periodicite: string, frequence: string, unite: string) => `${(({ "semaine": `Todas as` } as Record<string, string>)[unite] ?? `Todos os`)} ${periodicite} ${frequence}`,
   transactionFormScheduleDateRange: (start: string, end: string) => `de ${start} a ${end}`,
   transactionFormScheduleDateSelected: (start: string) => `A partir de ${start}`,
   transactionFormScheduleSuccessMessage: (montant: string, payee: string) => `Você programou ${montant} FCFA para ${payee}`,
@@ -441,6 +463,7 @@ Se este pedido for de uma pessoa de confiança, basta adicionar o alias aos seus
   transactionDetailsRecuPaiementPDFSousTitre: `Você pode compartilhar ou baixar o PDF`,
   transactionDetailsTicketCaisse: `Recebido pago`,
   transactionDetailsTicketCaisseSubtitle: `Você pode compartilhar o recibo`,
+  transactionDetailsTicketPartager: `Partilhar`,
   transactionDetailsCompte: `Conta`,
   transactionDetailsInstitution: `Instituição`,
   transactionDetailsRejet: `Motivo da rejeição`,
@@ -536,6 +559,7 @@ Por favor, tente novamente mais tarde`,
   qrcodePagePartageQrCodeSubTitle: `Compartilhar a imagem`,
   qrcodePagePartageAliasTitle: `Seu alias`,
   qrcodePagePartageAliasSubTitle: `Compartilhamento de alias`,
+  qrcodePagePartageContactAjouterHint: `Adicionar o meu número`,
   qrcodePagePartageContactTitle: `Seu contato`,
   qrcodePagePartageContactSubTitle: `Compartilhar o contato do seu alias`,
   qrcodePagePartageAliasMessage: (name: string) => `Alias PI de ${name}`,
@@ -598,7 +622,7 @@ O scan é feito automaticamente`,
   compteDetailsPagePopupDeleteAliasTitle: `Você tem certeza que deseja suprimir o seu alias?`,
   compteDetailsPagePopupDeleteAliasSHIDSubTitle: `Se você confirmar a exclusão do seu alias, esta ação será irreversível. Seu alias será completamente removido do nosso sistema e outros usuários não poderão mais realizar pagamentos para você nem encontrá-lo usando este alias.`,
   compteDetailsPagePopupDeleteAliasMBNOSubTitle: `Se você confirmar a exclusão do seu alias, esta ação será irreversível. Seu alias de número de telefone será completamente removido do nosso sistema e outros usuários não poderão mais realizar pagamentos para você nem encontrá-lo usando este alias. No entanto, você permanecerá conectado ao PI-SPI com o seu alias de endereço de pagamento associado.`,
-  compteDetailsPagePopupDeleteAliasBtnConfirmer: `Suprimir o meu alias`,
+  compteDetailsPagePopupDeleteAliasBtnConfirmer: `Suprimir`,
   compteDetailsPagePopupDeleteAliasBtnAnnuler: `Cancelar`,
   compteDetailsPagePopupDeleteAliasErrorMsg: `A supressão do seu alias falhou, por favor, tente novamente mais tarde`,
   appSettingPageTitle: `Configurações da aplicação`,
@@ -643,6 +667,7 @@ O scan é feito automaticamente`,
   appSettingPageMenuNotificationStyleDialogDesc: `Os alertas requerem uma ação antes de continuar. Os banners aparecem no topo da tela e desaparecem automaticamente`,
   appSettingPageMenuNotificationStyleNone: `Nenhum`,
   appSettingPageMenuNotificationSonTitle: `Som`,
+  appSettingPageMenuNotificationSonActiveTitle: `Notificações`,
   appSettingPageMenuNotificationSonPageTitle: `Notificação Sonora`,
   appSettingPageMenuNotificationSonDefault: `Por defeito`,
   appSettingPageMenuNotificationVibrTitle: `Vibração`,
@@ -650,6 +675,8 @@ O scan é feito automaticamente`,
   appSettingPageMenuHomeThemeTitle: `Página inicial`,
   appSettingPageMenuHomeThemeDefault: `Simples`,
   appSettingPageMenuHomeThemeWithtQr: `Com QR Code`,
+  categorieSelectionTitle: `Selecionar categorias`,
+  categorieSelectionUniqueTitle: `Escolher uma categoria`,
   categorieDefaultTitle: `Categorias por defeito`,
   categorieCustomTitle: `Categorias personalizadas`,
   categorieCustomAdd: `Adicionar uma categoria`,
@@ -702,6 +729,11 @@ O scan é feito automaticamente`,
   notificationMAJMessage: (systeme: string) => `Uma nova versão da aplicação está disponível em ${systeme}`,
   notificationMAJBtn: `Instalar`,
   searchTitle: `O que deseja fazer?`,
+  searchShortcutsTitle: `Atalhos`,
+  searchRubriquePaiements: `Pagamentos`,
+  searchRubriqueAbonnements: `Assinaturas`,
+  searchRubriqueServicesBancaires: `Serviços bancários`,
+  searchRubriqueProfil: `Perfil e definições`,
   searchHint: `Pesquisar uma funcionalidade`,
   searchEmpty: (motCle: string) => `Nenhuma funcionalidade corresponde a «${motCle}»`,
   searchSendSubTitle: `Enviar dinheiro a um contacto`,

package/src/modules/alias/domain/models/alias_revendication.ts

@@ -53,7 +53,8 @@ export class AliasRevendication {
   }
 
   static fromJson(json: Record<string, any>): AliasRevendication {
-    // Le cache local stocke le nom Dart du statut (`initiee`), l'API sa valeur (`INITIEE`).
+    // Valeur de l'API (`INITIEE`) ; le nom (`initiee`) mis en cache par les
+    // anciennes versions est aussi accepté.
     return new AliasRevendication({
       id: json.id,
       alias: json.alias,
@@ -70,7 +71,8 @@ export class AliasRevendication {
     return {
       id: this.id,
       alias: this.alias,
-      statut: AliasRevendicationStatut.nameOf(this.statut),
+      // Même format que l'API, relu par fromJson
+      statut: this.statut,
       dateDemande: this.dateDemande.toISOString(),
       dateVerrouillage: this.dateVerrouillage.toISOString(),
       dateCloture: this.dateCloture.toISOString(),

package/src/modules/alias/infra/alias_output_local.ts

@@ -18,6 +18,17 @@ export class AliasOutputLocal {
     await AppStorage.delete(AliasOutputLocal.collectionId, cle);
   }
 
+  /**
+   * Supprime l'alias de clé [cle] (numéro de téléphone ou adresse de
+   * paiement) : les alias sont rangés par compte, pas par clé
+   */
+  async supprimerParCle(cle: string): Promise<void> {
+    const aliases = await AppStorage.list(AliasOutputLocal.collectionId, (json) => Alias.fromJson(json));
+    for (const alias of aliases.filter((a) => a.cle === cle)) {
+      await this.supprimer(alias.compte);
+    }
+  }
+
   async revendicationEnregistrer(demande: AliasRevendication): Promise<void> {
     await AppStorage.save(AliasOutputLocal.revendicationCollectionId, demande.id, demande.toJson());
   }

package/src/modules/alias/infra/alias_output_repository.ts

@@ -22,7 +22,7 @@ export class AliasOutputRepository implements AliasOutputPort {
     try {
       const alias = await this.repoRemote.recuperer(compte);
       if (alias != null) {
-        void this.repoLocal.enregistrer(alias);
+        await this.repoLocal.enregistrer(alias);
       }
       return alias;
     } catch (e) {
@@ -36,20 +36,21 @@ export class AliasOutputRepository implements AliasOutputPort {
     const response = await this.repoRemote.creer(alias);
     // Une fois crée on l'enregistre en local (si c'est MBNO, l'alias n'est pas encore créé)
     if (alias.type === AliasType.shid) {
-      void this.repoLocal.enregistrer(response);
+      await this.repoLocal.enregistrer(response);
     }
     return response;
   }
 
   async confirmer(alias: AliasCreateCommand, otp: string): Promise<Alias> {
     const response = await this.repoRemote.confirmer(alias, otp);
-    void this.repoLocal.enregistrer(response);
+    await this.repoLocal.enregistrer(response);
     return response;
   }
 
   async supprimer(cle: string): Promise<void> {
     await this.repoRemote.supprimer(cle);
-    await this.repoLocal.supprimer(cle);
+    // En local, les alias sont rangés par compte
+    await this.repoLocal.supprimerParCle(cle);
   }
 
   async revendicationInitier(compte: string, phone: AliasCreateCommandPhoneNumber): Promise<void> {
@@ -59,7 +60,7 @@ export class AliasOutputRepository implements AliasOutputPort {
   async revendicationRecuperer(id: string): Promise<AliasRevendication | null> {
     const demande = await this.repoRemote.revendicationRecuperer(id);
     if (demande != null) {
-      void this.repoLocal.revendicationEnregistrer(demande);
+      await this.repoLocal.revendicationEnregistrer(demande);
     }
     return demande;
   }
@@ -69,11 +70,11 @@ export class AliasOutputRepository implements AliasOutputPort {
     const response = await this.repoRemote.revendicationRepondre(id, decision, otpCode);
     if (decision) {
       // Supprimer l'alias MBNO en local
-      void this.repoLocal.supprimer(response.alias);
+      await this.repoLocal.supprimerParCle(response.alias);
       // Creer l'alias SHID en local
-      void this.repoLocal.enregistrer(response.shid!);
+      await this.repoLocal.enregistrer(response.shid!);
     }
-    void this.repoLocal.revendicationEnregistrer(response);
+    await this.repoLocal.revendicationEnregistrer(response);
     return response;
   }
 }

package/src/modules/alias/presentation/pages/alias_delete_btn_widget.tsx

@@ -7,8 +7,8 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
-import { showDialog, showModalBottomSheet } from '../../../../shared/material/overlays';
-import { CustomAlertDialog } from '../../../../shared/widgets/custom_alert_dialog';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { showConfirmActionSheet } from '../../../../shared/widgets/confirm_action_sheet_widget';
 import { CustomLoadingDialog } from '../../../../shared/widgets/loading_page';
 import { NotificationDialog, NotificationType } from '../../../../shared/widgets/notification_dialog';
 import { ProfileMenuTile } from '../../../profile/presentation/pages/profile_menu';
@@ -30,7 +30,6 @@ export function AliasDeleteBtnWidget() {
     (state) => {
       // En cours de suppression
       if (state instanceof AliasDeletingState) {
-        AppRouter.pop(router);
         CustomLoadingDialog.show(router);
       }
       // Supprimé
@@ -56,27 +55,21 @@ export function AliasDeleteBtnWidget() {
       state instanceof AliasDeletingState || state instanceof AliasDeleteErrorState || state instanceof AliasNotExistState,
   );
 
-  const onPress = () => {
-    void showDialog(router, {
-      builder: () => (
-        <CustomAlertDialog
-          title={traductions.compteDetailsPagePopupDeleteAliasTitle}
-          description={
-            alias.type === AliasType.mbno
-              ? traductions.compteDetailsPagePopupDeleteAliasMBNOSubTitle
-              : traductions.compteDetailsPagePopupDeleteAliasSHIDSubTitle
-          }
-          confirmBtnText={traductions.compteDetailsPagePopupDeleteAliasBtnConfirmer}
-          confirmBtnAction={async () => {
-            // Action sensible : vérification (step-up) déléguée à l'hôte
-            if (!(await Di.config.identification.requireStepUpIdentification())) return;
-            aliasBloc.add(new AliasDeleteEvent(alias));
-          }}
-          cancelBtnText={traductions.compteDetailsPagePopupDeleteAliasBtnAnnuler}
-          cancelBtnAction={() => AppRouter.pop(router)}
-        />
-      ),
+  const onPress = async () => {
+    // Confirmation, comme la suppression d'un appareil
+    const confirme = await showConfirmActionSheet(router, {
+      title: traductions.compteDetailsPagePopupDeleteAliasTitle,
+      subtitle:
+        alias.type === AliasType.mbno
+          ? traductions.compteDetailsPagePopupDeleteAliasMBNOSubTitle
+          : traductions.compteDetailsPagePopupDeleteAliasSHIDSubTitle,
+      confirmTitle: traductions.compteDetailsPagePopupDeleteAliasBtnConfirmer,
+      cancelTitle: traductions.compteDetailsPagePopupDeleteAliasBtnAnnuler,
     });
+    if (!confirme) return;
+    // Action sensible : vérification (step-up) déléguée à l'hôte
+    if (!(await Di.config.identification.requireStepUpIdentification())) return;
+    aliasBloc.add(new AliasDeleteEvent(alias));
   };
 
   // Ligne de menu du profil, en rouge
@@ -86,7 +79,7 @@ export function AliasDeleteBtnWidget() {
         icone="delete-outline"
         titre={traductions.compteDetailsPageBtnSupprimer}
         couleur={theme.colorScheme.error}
-        onPress={onPress}
+        onPress={() => void onPress()}
       />
     </Card>
   );

package/src/modules/alias/presentation/pages/alias_page_claim.tsx

@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useEffect } from 'react';
+import { useEffect, type ReactNode } from 'react';
 import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -11,9 +11,11 @@ import type { AppLocalizations } from '../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../shared/material/buttons';
 import { Card } from '../../../../shared/material/card';
-import { showDialog, showModalBottomSheet } from '../../../../shared/material/overlays';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { Divider } from '../../../../shared/material/divider';
+import { withAlpha } from '../../../../shared/utils/color';
 import { DateFormat } from '../../../../shared/utils/date_format';
-import { CustomAlertDialog } from '../../../../shared/widgets/custom_alert_dialog';
+import { showConfirmActionSheet } from '../../../../shared/widgets/confirm_action_sheet_widget';
 import { ErrorCardWidget } from '../../../../shared/widgets/error_card_widget';
 import { CustomLoadingDialog, LoadingPage } from '../../../../shared/widgets/loading_page';
 import type { Alias } from '../../domain/models/alias';
@@ -32,6 +34,7 @@ import {
   AliasClaimNotFoundState,
   AliasExistState,
 } from '../bloc/alias_state';
+import { PinEntete } from '../../../../shared/widgets/pin_entete';
 import { AliasMBNOCountdownTimer } from './alias_page_create_mbno_timer';
 import { AliasPageError } from './alias_page_error';
 import { AliasPageOtp } from './alias_page_otp';
@@ -114,10 +117,11 @@ export function AliasPageClaim({ id }: { id: string }) {
     const rejecting = aliasState instanceof AliasClaimHandlingSuccessState ? false : aliasState.rejecting;
     const error = aliasState instanceof AliasClaimHandlingErrorState ? aliasState.error : null;
     const goHome = () => AppRouter.pushReplacement(router, AppRouter.home);
+    // Fermeture, en haut à droite : retour à l'accueil
     const back = (
       <View style={styles.backRow}>
         <Pressable accessibilityRole="button" hitSlop={12} onPress={goHome} style={styles.backButton}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+          <MaterialIcons name="close" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>
       </View>
     );
@@ -129,8 +133,9 @@ export function AliasPageClaim({ id }: { id: string }) {
           <ScrollView style={styles.padded} keyboardShouldPersistTaps="handled">
             <AliasPageOtp
               pinLength={AliasMbnoOtpCommand.otpSize}
-              title={traductions.verifyPhoneNumberPageTitle}
-              subtitle={traductions.verifyPhoneNumberPageSubTitle(claim.alias)}
+              icone="verified-user"
+              title={traductions.aliasClaimRefusOtpTitle}
+              subtitle={traductions.aliasClaimRefusOtpSubTitle(claim.alias)}
               errorMessage={error === AliasError.invalidOtpCode ? traductions.aliaMBNOInvalidOtpMessage : null}
               countdownTimer={
                 aliasBloc.state instanceof AliasClaimHandlingState ? (
@@ -181,48 +186,46 @@ function ClaimDetails({
         : traductions.statutRejete;
 
   const confirm = () => {
-    void showDialog(router, {
-      builder: () => (
-        <CustomAlertDialog
-          title={traductions.aliasClaimAcceptDialogTitle}
-          description={traductions.aliasClaimAcceptDialogMessage(claim.alias)}
-          confirmBtnText={traductions.btnTextConfirm}
-          confirmBtnAction={() => {
-            AppRouter.pop(router);
-            aliasBloc.add(new AliasClaimRespondEvent(id, alias, claim, true, null));
-          }}
-          cancelBtnText={traductions.btnTextCancel}
-          cancelBtnAction={() => AppRouter.pop(router)}
-        />
-      ),
+    // Confirmation, comme la suppression d'un appareil
+    void showConfirmActionSheet(router, {
+      title: traductions.aliasClaimAcceptDialogTitle,
+      subtitle: traductions.aliasClaimAcceptDialogMessage(claim.alias),
+      confirmTitle: traductions.btnTextConfirm,
+      cancelTitle: traductions.btnTextCancel,
+    }).then((confirme) => {
+      if (confirme) aliasBloc.add(new AliasClaimRespondEvent(id, alias, claim, true, null));
     });
   };
 
   return (
     <View style={styles.flex}>
       {/* Détails de la revendication */}
-      <ScrollView style={styles.padded}>
-        {/* Header: titre et numéro de téléphone */}
-        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
-          {traductions.aliasClaimDetailsHeadTitle}
-        </Text>
-        <Text numberOfLines={1} style={[styles.subtitle, { color: theme.colorScheme.primary }]}>
-          {traductions.aliasClaimDetailsHeadSubTitle}
-        </Text>
-        <Text style={{ color: theme.colorScheme.onSurface }}>{claim.alias}</Text>
-        <View style={styles.gap20} />
+      <ScrollView style={styles.padded} contentContainerStyle={styles.contenu}>
+        {/* En-tête : pastille, titre et sous-titre centrés */}
+        <PinEntete
+          icone="gpp-maybe"
+          titre={traductions.aliasClaimDetailsHeadTitle}
+          sousTitre={traductions.aliasClaimDetailsHeadSubTitle}
+        />
+        <View style={styles.gap12} />
+        {/* Alias réclamé, en évidence */}
+        <View style={[styles.alias, { backgroundColor: withAlpha(theme.colorScheme.primary, 0.08) }]}>
+          <Text style={[theme.textTheme.displayLarge, styles.aliasTexte]}>{claim.alias}</Text>
+        </View>
+        <View style={styles.gap24} />
 
         {/* Détails : statut et dates */}
         <Card>
           <View style={styles.card}>
+            {/* Statut en badge coloré */}
+            <Detail title={traductions.statutLabel} valeur={<BadgeStatut statut={claim.statut} texte={statut} />} />
+            <Divider height={24} />
             <Detail
               title={traductions.aliasClaimDetailsDateDemande}
               subtitle={new DateFormat('d MMM, HH:mm', locale).format(claim.dateDemande)}
             />
-            <View style={styles.gap10} />
-            <Detail title={traductions.statutLabel} subtitle={statut} />
-            <View style={styles.gap10} />
             {/* Date acceptation ou rejet */}
+            {claim.dateAction != null && <Divider height={24} />}
             {claim.dateAction != null && (
               <Detail
                 title={
@@ -235,7 +238,7 @@ function ClaimDetails({
             )}
           </View>
         </Card>
-        <View style={styles.gap10} />
+        <View style={styles.gap12} />
 
         {/* Avertissement délai de traitement */}
         {initiee && (
@@ -267,32 +270,57 @@ function ClaimDetails({
   );
 }
 
-/** Affiche un détail de la revendication */
-function Detail({ title, subtitle }: { title: string; subtitle: string }) {
+/** Affiche un détail de la revendication : [subtitle] ou [valeur] */
+function Detail({ title, subtitle, valeur }: { title: string; subtitle?: string; valeur?: ReactNode }) {
   const theme = useTheme();
   return (
     <View style={styles.detail}>
-      <Text numberOfLines={1} style={theme.textTheme.bodyLarge}>
+      <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, { color: Themer.neural03Color }]}>
         {title}
       </Text>
-      <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.detailValue, { color: Themer.neural03Color }]}>
-        {subtitle}
-      </Text>
+      <View style={styles.detailValue}>
+        {valeur ?? (
+          <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.detailTexte]}>
+            {subtitle}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}
+
+/** Statut en badge coloré : en attente, acceptée ou rejetée */
+function BadgeStatut({ statut, texte }: { statut: AliasRevendicationStatut; texte: string }) {
+  const theme = useTheme();
+  const couleur =
+    statut === AliasRevendicationStatut.initiee
+      ? Themer.amberColor
+      : statut === AliasRevendicationStatut.acceptee
+        ? Themer.successColor
+        : theme.colorScheme.error;
+  return (
+    <View style={[styles.badge, { backgroundColor: withAlpha(couleur, 0.12) }]}>
+      <Text style={[theme.textTheme.displaySmall, styles.badgeTexte, { color: couleur }]}>{texte}</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  backRow: { flexDirection: 'row' },
+  backRow: { flexDirection: 'row', justifyContent: 'flex-end' },
   backButton: { padding: 12 },
-  padded: { paddingHorizontal: 12 },
-  subtitle: { paddingBottom: 4 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  padded: { paddingHorizontal: 20 },
+  contenu: { paddingBottom: 16 },
+  alias: { alignSelf: 'center', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
+  aliasTexte: { fontWeight: '700', letterSpacing: 0.5 },
+  gap12: { height: 12 },
+  gap24: { height: 24 },
   gap16w: { width: 16 },
-  card: { paddingVertical: 10, paddingHorizontal: 15 },
+  card: { paddingVertical: 14, paddingHorizontal: 16 },
   detail: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  detailValue: { flex: 1, textAlign: 'right' },
-  actions: { flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 10 },
+  detailValue: { flex: 1, marginLeft: 12, alignItems: 'flex-end' },
+  detailTexte: { fontWeight: '600', textAlign: 'right' },
+  badge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12 },
+  badgeTexte: { fontWeight: '700' },
+  actions: { flexDirection: 'row', paddingTop: 8, paddingBottom: 16, paddingHorizontal: 20 },
 });