refactor(account-center): optimize security verification code UI (#8110)

- Update resend message to include "Not received yet?" prefix with styled link
- Fix spacing issue in resend countdown by placing space inside span tag
- Change phone verification title from "Enter phone verification code" to "Enter SMS verification code"

Author: wangsijie

packages/account-center/src/pages/CodeFlow/IdentifierVerifyStep.tsx

@@ -1,14 +1,14 @@
 import Button from '@experience/shared/components/Button';
-import DynamicT from '@experience/shared/components/DynamicT';
 import VerificationCodeInput, {
   defaultLength,
 } from '@experience/shared/components/VerificationCode';
 import { type TFuncKey } from 'i18next';
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext';
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+import SwitchVerificationMethodLink from '@ac/components/SwitchVerificationMethodLink';
 import useApi from '@ac/hooks/use-api';
 import useErrorHandler from '@ac/hooks/use-error-handler';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
@@ -31,6 +31,7 @@ type Props = {
   readonly onSubmit: (code: string) => void;
   readonly onBack: () => void;
   readonly onInvalidCode: () => void;
+  readonly onSwitchMethod?: () => void;
   readonly sendCode: (
     accessToken: string,
     identifier: string
@@ -50,6 +51,7 @@ const IdentifierVerifyStep = ({
   onSubmit,
   onBack,
   onInvalidCode,
+  onSwitchMethod,
   sendCode,
 }: Props) => {
   const { t } = useTranslation();
@@ -133,21 +135,26 @@ const IdentifierVerifyStep = ({
         />
         <div className={styles.message}>
           {countdown > 0 ? (
-            <DynamicT
-              forKey="account_center.code_verification.resend_countdown"
-              interpolation={{ seconds: countdown }}
-            />
+            <Trans components={{ span: <span className={styles.highlight} /> }}>
+              {t('account_center.code_verification.resend_countdown', { seconds: countdown })}
+            </Trans>
           ) : (
-            <button
-              className={styles.resendButton}
-              type="button"
-              disabled={loading}
-              onClick={() => {
-                void handleResend();
+            <Trans
+              components={{
+                a: (
+                  <button
+                    className={styles.resendButton}
+                    type="button"
+                    disabled={loading}
+                    onClick={() => {
+                      void handleResend();
+                    }}
+                  />
+                ),
               }}
             >
-              <DynamicT forKey="account_center.code_verification.resend" />
-            </button>
+              {t('account_center.code_verification.resend')}
+            </Trans>
           )}
         </div>
         <Button
@@ -164,6 +171,9 @@ const IdentifierVerifyStep = ({
             onSubmit(codeInput.join(''));
           }}
         />
+        {onSwitchMethod && (
+          <SwitchVerificationMethodLink className={styles.switchMethod} onClick={onSwitchMethod} />
+        )}
       </div>
     </SecondaryPageLayout>
   );

packages/account-center/src/pages/CodeFlow/index.module.scss

@@ -24,12 +24,17 @@
   align-items: center;
 }
 
+.highlight {
+  margin-inline-start: _.unit(1);
+  color: var(--color-brand-default);
+}
+
 .resendButton {
   background: transparent;
   border: none;
   padding: 0;
-  font: var(--font-body-2-medium);
-  color: var(--color-primary-50);
+  font: var(--font-body-2);
+  color: var(--color-brand-default);
   cursor: pointer;
 
   &:disabled {
@@ -41,3 +46,7 @@
 .submit {
   align-self: flex-start;
 }
+
+.switchMethod {
+  margin-top: _.unit(2);
+}

packages/phrases-experience/src/locales/ar/account-center.ts

@@ -46,7 +46,7 @@ const account_center = {
   phone: {
     title: 'ربط رقم الهاتف',
     description: 'اربط رقم هاتفك لتسجيل الدخول أو للمساعدة في استعادة الحساب.',
-    verification_title: 'أدخل رمز التحقق عبر الهاتف',
+    verification_title: 'أدخل رمز التحقق عبر الرسائل القصيرة',
     verification_description: 'تم إرسال رمز التحقق إلى هاتفك {{phone_number}}.',
     success: 'تم ربط الهاتف الأساسي بنجاح.',
     verification_required: 'انتهت صلاحية التحقق. يرجى التحقق من هويتك مرة أخرى.',
@@ -64,8 +64,8 @@ const account_center = {
 
   code_verification: {
     send: 'إرسال رمز التحقق',
-    resend: 'إعادة إرسال الرمز',
-    resend_countdown: 'لم تستلمه بعد؟ أعد الإرسال بعد {{seconds}} ث.',
+    resend: 'لم تستلمه بعد؟ <a>إعادة إرسال رمز التحقق</a>',
+    resend_countdown: 'لم تستلمه بعد؟<span> أعد الإرسال بعد {{seconds}} ث.</span>',
   },
 
   email_verification: {
@@ -74,8 +74,8 @@ const account_center = {
     email_label: 'عنوان البريد الإلكتروني',
     send: 'إرسال رمز التحقق',
     description: 'تم إرسال رمز التحقق إلى بريدك الإلكتروني {{email}}. أدخل الرمز للمتابعة.',
-    resend: 'إعادة إرسال الرمز',
-    resend_countdown: 'لم تستلمه بعد؟ أعد الإرسال بعد {{seconds}} ث.',
+    resend: 'لم تستلمه بعد؟ <a>إعادة إرسال رمز التحقق</a>',
+    resend_countdown: 'لم تستلمه بعد؟<span> أعد الإرسال بعد {{seconds}} ث.</span>',
     error_send_failed: 'فشل إرسال رمز التحقق. يرجى المحاولة لاحقًا.',
     error_verify_failed: 'فشل التحقق. يرجى إدخال الرمز مرة أخرى.',
     error_invalid_code: 'رمز التحقق غير صالح أو منتهي الصلاحية.',
@@ -86,8 +86,8 @@ const account_center = {
     phone_label: 'رقم الهاتف',
     send: 'إرسال رمز التحقق',
     description: 'تم إرسال رمز التحقق إلى هاتفك {{phone}}. أدخل الرمز للمتابعة.',
-    resend: 'إعادة إرسال الرمز',
-    resend_countdown: 'لم تستلمه بعد؟ أعد الإرسال بعد {{seconds}} ث.',
+    resend: 'لم تستلمه بعد؟ <a>إعادة إرسال رمز التحقق</a>',
+    resend_countdown: 'لم تستلمه بعد؟<span> أعد الإرسال بعد {{seconds}} ث.</span>',
     error_send_failed: 'فشل إرسال رمز التحقق. يرجى المحاولة لاحقًا.',
     error_verify_failed: 'فشل التحقق. يرجى إدخال الرمز مرة أخرى.',
     error_invalid_code: 'رمز التحقق غير صالح أو منتهي الصلاحية.',

packages/phrases-experience/src/locales/de/account-center.ts

@@ -51,7 +51,7 @@ const account_center = {
     title: 'Telefonnummer verknüpfen',
     description:
       'Verknüpfe deine Telefonnummer, um dich anzumelden oder die Kontowiederherstellung zu unterstützen.',
-    verification_title: 'Telefon-Bestätigungscode eingeben',
+    verification_title: 'SMS-Bestätigungscode eingeben',
     verification_description:
       'Der Bestätigungscode wurde an dein Telefon {{phone_number}} gesendet.',
     success: 'Primäre Telefonnummer wurde erfolgreich verknüpft.',
@@ -70,8 +70,8 @@ const account_center = {
 
   code_verification: {
     send: 'Bestätigungscode senden',
-    resend: 'Code erneut senden',
-    resend_countdown: 'Noch nichts erhalten? Erneut senden nach {{seconds}} s.',
+    resend: 'Noch nichts erhalten? <a>Bestätigungscode erneut senden</a>',
+    resend_countdown: 'Noch nichts erhalten?<span> Erneut senden nach {{seconds}} s.</span>',
   },
 
   email_verification: {
@@ -82,8 +82,8 @@ const account_center = {
     send: 'Bestätigungscode senden',
     description:
       'Der Bestätigungscode wurde an deine E-Mail {{email}} gesendet. Gib den Code ein, um fortzufahren.',
-    resend: 'Code erneut senden',
-    resend_countdown: 'Noch nichts erhalten? Erneut senden nach {{seconds}} s.',
+    resend: 'Noch nichts erhalten? <a>Bestätigungscode erneut senden</a>',
+    resend_countdown: 'Noch nichts erhalten?<span> Erneut senden nach {{seconds}} s.</span>',
     error_send_failed:
       'Bestätigungscode konnte nicht gesendet werden. Bitte versuche es später noch einmal.',
     error_verify_failed: 'Verifizierung fehlgeschlagen. Bitte gib den Code erneut ein.',
@@ -97,8 +97,8 @@ const account_center = {
     send: 'Bestätigungscode senden',
     description:
       'Der Bestätigungscode wurde an dein Telefon {{phone}} gesendet. Gib den Code ein, um fortzufahren.',
-    resend: 'Code erneut senden',
-    resend_countdown: 'Noch nichts erhalten? Erneut senden nach {{seconds}} s.',
+    resend: 'Noch nichts erhalten? <a>Bestätigungscode erneut senden</a>',
+    resend_countdown: 'Noch nichts erhalten?<span> Erneut senden nach {{seconds}} s.</span>',
     error_send_failed:
       'Bestätigungscode konnte nicht gesendet werden. Bitte versuche es später noch einmal.',
     error_verify_failed: 'Verifizierung fehlgeschlagen. Bitte gib den Code erneut ein.',

packages/phrases-experience/src/locales/en/account-center.ts

@@ -47,7 +47,7 @@ const account_center = {
   phone: {
     title: 'Link phone number',
     description: 'Link your phone number to sign in or help with account recovery.',
-    verification_title: 'Enter phone verification code',
+    verification_title: 'Enter SMS verification code',
     verification_description: 'The verification code has been sent to your phone {{phone_number}}.',
     success: 'Primary phone linked successfully.',
     verification_required: 'Verification expired. Please verify your identity again.',
@@ -65,8 +65,8 @@ const account_center = {
 
   code_verification: {
     send: 'Send verification code',
-    resend: 'Resend code',
-    resend_countdown: 'Not received yet? Resend after {{seconds}}s.',
+    resend: 'Not received yet? <a>Resend verification code</a>',
+    resend_countdown: 'Not received yet?<span> Resend after {{seconds}}s.</span>',
   },
 
   email_verification: {
@@ -77,8 +77,8 @@ const account_center = {
     send: 'Send verification code',
     description:
       'The verification code has been sent to your email {{email}}. Enter the code to continue.',
-    resend: 'Resend code',
-    resend_countdown: 'Not received yet? Resend after {{seconds}}s.',
+    resend: 'Not received yet? <a>Resend verification code</a>',
+    resend_countdown: 'Not received yet?<span> Resend after {{seconds}}s.</span>',
     error_send_failed: 'Failed to send verification code. Please try again later.',
     error_verify_failed: 'Verification failed. Please enter the code again.',
     error_invalid_code: 'The verification code is invalid or has expired.',
@@ -91,8 +91,8 @@ const account_center = {
     send: 'Send verification code',
     description:
       'The verification code has been sent to your phone {{phone}}. Enter the code to continue.',
-    resend: 'Resend code',
-    resend_countdown: 'Not received yet? Resend after {{seconds}}s.',
+    resend: 'Not received yet? <a>Resend verification code</a>',
+    resend_countdown: 'Not received yet?<span> Resend after {{seconds}}s.</span>',
     error_send_failed: 'Failed to send verification code. Please try again later.',
     error_verify_failed: 'Verification failed. Please enter the code again.',
     error_invalid_code: 'The verification code is invalid or has expired.',

packages/phrases-experience/src/locales/es/account-center.ts

@@ -49,7 +49,7 @@ const account_center = {
     title: 'Vincular número de teléfono',
     description:
       'Vincula tu número de teléfono para iniciar sesión o ayudar con la recuperación de la cuenta.',
-    verification_title: 'Ingresa el código de verificación del teléfono',
+    verification_title: 'Ingresa el código de verificación SMS',
     verification_description:
       'El código de verificación se ha enviado a tu teléfono {{phone_number}}.',
     success: 'Teléfono principal vinculado correctamente.',
@@ -68,8 +68,8 @@ const account_center = {
 
   code_verification: {
     send: 'Enviar código de verificación',
-    resend: 'Reenviar código',
-    resend_countdown: '¿Aún no lo recibes? Reenvía después de {{seconds}} s.',
+    resend: '¿Aún no lo recibes? <a>Reenviar código de verificación</a>',
+    resend_countdown: '¿Aún no lo recibes?<span> Reenvía después de {{seconds}} s.</span>',
   },
 
   email_verification: {
@@ -80,8 +80,8 @@ const account_center = {
     send: 'Enviar código de verificación',
     description:
       'El código de verificación se ha enviado a tu correo {{email}}. Ingresa el código para continuar.',
-    resend: 'Reenviar código',
-    resend_countdown: '¿Aún no lo recibes? Reenvía después de {{seconds}} s.',
+    resend: '¿Aún no lo recibes? <a>Reenviar código de verificación</a>',
+    resend_countdown: '¿Aún no lo recibes?<span> Reenvía después de {{seconds}} s.</span>',
     error_send_failed: 'No se pudo enviar el código de verificación. Inténtalo de nuevo más tarde.',
     error_verify_failed: 'La verificación falló. Ingresa el código nuevamente.',
     error_invalid_code: 'El código de verificación no es válido o ha expirado.',
@@ -94,8 +94,8 @@ const account_center = {
     send: 'Enviar código de verificación',
     description:
       'El código de verificación se ha enviado a tu teléfono {{phone}}. Ingresa el código para continuar.',
-    resend: 'Reenviar código',
-    resend_countdown: '¿Aún no lo recibes? Reenvía después de {{seconds}} s.',
+    resend: '¿Aún no lo recibes? <a>Reenviar código de verificación</a>',
+    resend_countdown: '¿Aún no lo recibes?<span> Reenvía después de {{seconds}} s.</span>',
     error_send_failed: 'No se pudo enviar el código de verificación. Inténtalo de nuevo más tarde.',
     error_verify_failed: 'La verificación falló. Ingresa el código nuevamente.',
     error_invalid_code: 'El código de verificación no es válido o ha expirado.',

packages/phrases-experience/src/locales/fr/account-center.ts

@@ -49,7 +49,7 @@ const account_center = {
     title: 'Lier le numéro de téléphone',
     description:
       'Liez votre numéro de téléphone pour vous connecter ou faciliter la récupération du compte.',
-    verification_title: 'Saisissez le code de vérification du téléphone',
+    verification_title: 'Saisissez le code de vérification SMS',
     verification_description:
       'Le code de vérification a été envoyé sur votre téléphone {{phone_number}}.',
     success: 'Téléphone principal lié avec succès.',
@@ -69,8 +69,8 @@ const account_center = {
 
   code_verification: {
     send: 'Envoyer le code de vérification',
-    resend: 'Renvoyer le code',
-    resend_countdown: 'Pas encore reçu ? Renvoyez après {{seconds}} s.',
+    resend: 'Pas encore reçu ? <a>Renvoyer le code de vérification</a>',
+    resend_countdown: 'Pas encore reçu ?<span> Renvoyez après {{seconds}} s.</span>',
   },
 
   email_verification: {
@@ -81,8 +81,8 @@ const account_center = {
     send: 'Envoyer le code de vérification',
     description:
       'Le code de vérification a été envoyé à votre e-mail {{email}}. Saisissez le code pour continuer.',
-    resend: 'Renvoyer le code',
-    resend_countdown: 'Pas encore reçu ? Renvoyez après {{seconds}} s.',
+    resend: 'Pas encore reçu ? <a>Renvoyer le code de vérification</a>',
+    resend_countdown: 'Pas encore reçu ?<span> Renvoyez après {{seconds}} s.</span>',
     error_send_failed: "Échec de l'envoi du code de vérification. Veuillez réessayer plus tard.",
     error_verify_failed: 'Échec de la vérification. Veuillez saisir le code à nouveau.',
     error_invalid_code: 'Le code de vérification est invalide ou a expiré.',
@@ -95,8 +95,8 @@ const account_center = {
     send: 'Envoyer le code de vérification',
     description:
       'Le code de vérification a été envoyé à votre téléphone {{phone}}. Saisissez le code pour continuer.',
-    resend: 'Renvoyer le code',
-    resend_countdown: 'Pas encore reçu ? Renvoyez après {{seconds}} s.',
+    resend: 'Pas encore reçu ? <a>Renvoyer le code de vérification</a>',
+    resend_countdown: 'Pas encore reçu ?<span> Renvoyez après {{seconds}} s.</span>',
     error_send_failed: "Échec de l'envoi du code de vérification. Veuillez réessayer plus tard.",
     error_verify_failed: 'Échec de la vérification. Veuillez saisir le code à nouveau.',
     error_invalid_code: 'Le code de vérification est invalide ou a expiré.',

packages/phrases-experience/src/locales/it/account-center.ts

@@ -48,8 +48,8 @@ const account_center = {
   phone: {
     title: 'Collega numero di telefono',
     description:
-      'Collega il tuo numero di telefono per accedere o aiutare con il recupero dell’account.',
-    verification_title: 'Inserisci il codice di verifica del telefono',
+      "Collega il tuo numero di telefono per accedere o aiutare con il recupero dell'account.",
+    verification_title: 'Inserisci il codice di verifica SMS',
     verification_description:
       'Il codice di verifica è stato inviato al tuo telefono {{phone_number}}.',
     success: 'Telefono principale collegato correttamente.',
@@ -68,8 +68,8 @@ const account_center = {
 
   code_verification: {
     send: 'Invia codice di verifica',
-    resend: 'Invia di nuovo il codice',
-    resend_countdown: "Non l'hai ricevuto? Reinvia dopo {{seconds}} s.",
+    resend: "Non l'hai ricevuto? <a>Reinvia il codice di verifica</a>",
+    resend_countdown: "Non l'hai ricevuto?<span> Reinvia dopo {{seconds}} s.</span>",
   },
 
   email_verification: {
@@ -80,8 +80,8 @@ const account_center = {
     send: 'Invia codice di verifica',
     description:
       "Il codice di verifica è stato inviato all'e-mail {{email}}. Inserisci il codice per continuare.",
-    resend: 'Invia di nuovo il codice',
-    resend_countdown: "Non l'hai ricevuto? Reinvia dopo {{seconds}} s.",
+    resend: "Non l'hai ricevuto? <a>Reinvia il codice di verifica</a>",
+    resend_countdown: "Non l'hai ricevuto?<span> Reinvia dopo {{seconds}} s.</span>",
     error_send_failed: 'Invio del codice di verifica non riuscito. Riprova più tardi.',
     error_verify_failed: 'Verifica non riuscita. Inserisci di nuovo il codice.',
     error_invalid_code: 'Il codice di verifica non è valido o è scaduto.',
@@ -94,8 +94,8 @@ const account_center = {
     send: 'Invia codice di verifica',
     description:
       'Il codice di verifica è stato inviato al tuo telefono {{phone}}. Inserisci il codice per continuare.',
-    resend: 'Invia di nuovo il codice',
-    resend_countdown: "Non l'hai ricevuto? Reinvia dopo {{seconds}} s.",
+    resend: "Non l'hai ricevuto? <a>Reinvia il codice di verifica</a>",
+    resend_countdown: "Non l'hai ricevuto?<span> Reinvia dopo {{seconds}} s.</span>",
     error_send_failed: 'Invio del codice di verifica non riuscito. Riprova più tardi.',
     error_verify_failed: 'Verifica non riuscita. Inserisci di nuovo il codice.',
     error_invalid_code: 'Il codice di verifica non è valido o è scaduto.',