@acvl/mobile-components 0.0.5 → 0.0.7

package/src/hoja/HojaDeLista.tsx

@@ -13,6 +13,7 @@ import { EnHoja } from "../componentes/Tarjeta";
 import { Buscador } from "../listas/piezas";
 import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
 import { Text } from "../texto";
+import { useTextos } from "../idioma";
 
 /** Lo alto de la hoja: arriba se sigue viendo un poco de la ficha, que dice dónde se está. */
 const ALTO = "85%";
@@ -76,6 +77,7 @@ export default function HojaDeLista<T>({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const hoja = useRef<BottomSheet>(null);
     const insets = useSafeAreaInsets();
 
@@ -123,9 +125,7 @@ export default function HojaDeLista<T>({
             ) : null}
             {acciones}
             {nombres && total != null && renglones.length ? (
-                <Text style={styles.cuenta}>
-                    {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
-                </Text>
+                <Text style={styles.cuenta}>{t.listas.cuantos(total, nombres)}</Text>
             ) : null}
         </View>
     );
@@ -134,9 +134,9 @@ export default function HojaDeLista<T>({
         <ActivityIndicator color={c.primary} style={styles.espera} />
     ) : lista.fallo ? (
         <View style={styles.vacio}>
-            <Text style={styles.linea}>No se pudo cargar. Revisa tu señal.</Text>
+            <Text style={styles.linea}>{t.ficha.hojaNoCargo}</Text>
             <BotonGrande icono="refresh" modo="contorno" onPress={lista.onReintentar}>
-                Reintentar
+                {t.comun.reintentar}
             </BotonGrande>
         </View>
     ) : (

package/src/hoja/useMasDeLaFicha.tsx

@@ -1,6 +1,7 @@
 import HojaInferior from "./HojaInferior";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import React from "react";
+import { useTextos } from "../idioma";
 import { FilaConContador, SeccionDeFicha } from "../listas/piezas";
 
 /** Una lista de «Más»: su renglón con contador y lo que abre en la hoja. */
@@ -26,13 +27,14 @@ export interface ListaDeLaFicha {
  */
 export function useMasDeLaFicha(listas: ListaDeLaFicha[], subtitulo?: string) {
     // Lo que enseña se queda al cerrarla, para que su título no se vacíe mientras baja.
+    const t = useTextos();
     const [clave, setClave] = React.useState<string | null>(null);
     const [abierta, setAbierta] = React.useState(false);
     const cerrar = React.useCallback(() => setAbierta(false), []);
     const elegida = listas.find((l) => l.clave === clave);
 
     const seccion = listas.length ? (
-        <SeccionDeFicha titulo="Más">
+        <SeccionDeFicha titulo={t.ficha.mas}>
             {listas.map((l) => (
                 <FilaConContador
                     key={l.clave}

package/src/idioma/ProveedorDeIdioma.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from "react";
+import TEXTOS, { type Idioma, type Textos } from "./textos";
+
+// ==============================|| IDIOMA ||============================== //
+
+/**
+ * El idioma en el que la librería dibuja lo suyo. La librería **no traduce**: recibe el idioma ya
+ * resuelto y elige diccionario. De dónde sale (el teléfono, un claim del token, lo que el usuario
+ * eligió) y dónde se cambia es asunto de la app. Es el mismo trato que `LocaleProvider` en
+ * `@acvl/frontend-components`.
+ *
+ * Sin proveedor el idioma es español, que es como se comportaba antes de que esto existiera: una
+ * app que no lo monta no cambia en nada.
+ *
+ * @example
+ * <ProveedorDeIdioma idioma={idioma}>
+ *     <Stack />
+ * </ProveedorDeIdioma>
+ */
+const ContextoDeIdioma = createContext<Idioma>("es");
+
+/**
+ * El idioma vigente para lo que corre fuera de un componente (`avisar`, `confirmar`,
+ * `elegirAdjunto`): no pueden leer un contexto. Lo pone el proveedor al pintarse.
+ */
+let idiomaVigente: Idioma = "es";
+
+export function ProveedorDeIdioma({
+    idioma,
+    children,
+}: {
+    idioma: Idioma;
+    children: React.ReactNode;
+}) {
+    // En el render y no en un efecto: un `avisar` que salga del primer render de los hijos ya
+    // tiene que hablar el idioma nuevo. Es idempotente, así que StrictMode no lo descompone.
+    idiomaVigente = idioma;
+    return <ContextoDeIdioma.Provider value={idioma}>{children}</ContextoDeIdioma.Provider>;
+}
+
+/** El idioma activo de la librería. */
+export const useIdiomaDeLaLibreria = (): Idioma => useContext(ContextoDeIdioma);
+
+/**
+ * Los textos de la librería en el idioma activo. Devuelve el diccionario entero y no una función:
+ * `t.comun.cerrar` se autocompleta y una llave mal escrita no compila.
+ */
+export const useTextos = (): Textos => TEXTOS[useContext(ContextoDeIdioma)] ?? TEXTOS.es;
+
+/** Los textos fuera de un componente; dentro de uno, `useTextos`. */
+export const textosActuales = (): Textos => TEXTOS[idiomaVigente] ?? TEXTOS.es;

package/src/idioma/index.ts

@@ -0,0 +1,7 @@
+export {
+    ProveedorDeIdioma,
+    textosActuales,
+    useIdiomaDeLaLibreria,
+    useTextos,
+} from "./ProveedorDeIdioma";
+export { type Idioma, type Textos } from "./textos";

package/src/idioma/textos.ts

@@ -0,0 +1,248 @@
+// ==============================|| TEXTOS DE LA LIBRERÍA ||============================== //
+
+/**
+ * Los textos que la librería dibuja por su cuenta, en los dos idiomas. Es el espejo del de
+ * `@acvl/frontend-components`: un diccionario tipado y no un runtime de i18n, para que cada app
+ * traiga el suyo (o ninguno) sin que la librería le imponga `i18next`. A `en` le falta una llave y
+ * no compila.
+ *
+ * El idioma lo pone la app con `ProveedorDeIdioma`; se lee con `useTextos()` en un componente y con
+ * `textosActuales()` fuera de uno (`avisar`, `elegirAdjunto`).
+ *
+ * Las plantillas van como funciones: el orden de las palabras cambia entre idiomas y una
+ * concatenación en el punto de uso lo fija.
+ */
+
+/** Idiomas que entiende la librería. */
+export type Idioma = "es" | "en";
+
+const es = {
+    comun: {
+        cancelar: "Cancelar",
+        cerrar: "Cerrar",
+        entendido: "Entendido",
+        reintentar: "Reintentar",
+        listo: "Listo",
+        quitar: "Quitar",
+        elegir: "Elegir…",
+        buscar: "Buscar",
+        ninguno: "Ninguno",
+        noDisponible: "N/A",
+        si: "Sí",
+        no: "No",
+        atras: "Atrás",
+        revisaLaSenal: "Revisa tu señal e intenta de nuevo.",
+        noSePudoCargar: "No se pudo cargar",
+    },
+    acceso: {
+        usuario: "Usuario",
+        contrasena: "Contraseña",
+        entrar: "Iniciar Sesión",
+        noSePudo: "No se pudo iniciar sesión. Intente de nuevo.",
+        olvide: "¿Olvidaste tu contraseña?",
+    },
+    perfil: {
+        titulo: "Perfil",
+        apariencia: "Apariencia",
+        telefono: "Teléfono",
+        claro: "Claro",
+        oscuro: "Oscuro",
+        cerrarSesion: "Cerrar sesión",
+    },
+    error: {
+        titulo: "Algo salió mal",
+        mensaje:
+            "Esta pantalla no se pudo abrir. Intenta de nuevo; si vuelve a pasar, avisa a soporte.",
+    },
+    ficha: {
+        noExiste: "No existe",
+        noExisteTexto: "Puede que lo hayan borrado, o que no tengas permiso de verlo.",
+        mas: "Más",
+        hojaNoCargo: "No se pudo cargar. Revisa tu señal.",
+        seccionNoCargo: "No se pudo cargar. Jala la ficha para releer.",
+    },
+    edicion: {
+        sinPermiso: "No tienes permiso",
+        noSePudoCargar: (queEs: string) => `No se pudo cargar ${queEs}`,
+        guardar: "Guardar",
+        guardando: "Guardando…",
+        noSeGuardo: "No se guardó",
+    },
+    listas: {
+        cuantos: (total: number, [uno, varios]: readonly [string, string]) =>
+            total === 1 ? `1 ${uno}` : `${total} ${varios}`,
+        borrarBusqueda: "Borrar búsqueda",
+        filtrosPuestos: (cuenta: number) => `Filtros, ${cuenta} puestos`,
+        filtrosYOrden: "Filtros y orden",
+        filtros: "Filtros",
+        ver: (total: number, [uno, varios]: readonly [string, string]) =>
+            `Ver ${total} ${total === 1 ? uno : varios}`,
+        ordenarPor: "Ordenar por",
+        sentido: "Sentido",
+        ascendente: "Ascendente",
+        descendente: "Descendente",
+        nadaQueCoincida: "Nada que coincida.",
+        listoCon: (n: number) => `Listo (${n})`,
+        masAcciones: "Más acciones",
+    },
+    contacto: {
+        llamar: (nombre: string) => `Llamar a ${nombre}`,
+        whatsapp: (nombre: string) => `WhatsApp a ${nombre}`,
+        correo: (nombre: string) => `Correo a ${nombre}`,
+        direccion: "Dirección",
+        abrirEnElMapa: (donde: string) => `Abrir en el mapa: ${donde}`,
+    },
+    campos: {
+        diezDigitos: "10 dígitos",
+    },
+    fotos: {
+        verLaFoto: "Ver la foto",
+        archivo: (nombre: string) => `Archivo ${nombre}`.trim(),
+        quitarFoto: "Quitar esta foto",
+        quitarArchivo: "Quitar este archivo",
+        guardada: "Guardada en la galería",
+        noSeGuardo: "No se pudo guardar; intentar de nuevo",
+        guardarEnGaleria: "Guardar en la galería",
+        deTotal: (n: number, total: number) => `${n} de ${total}`,
+        tomarFoto: "Tomar foto",
+        tomarUnaFoto: "Tomar una foto",
+        deLaGaleria: "De la galería",
+        unDocumento: "Un documento",
+        subirArchivo: "Subir un archivo",
+        sinPermisoDeCamara: "Sin permiso de cámara",
+        activaLaCamara: (para: string) =>
+            `Para ${para}, activa la cámara para la app en los ajustes del teléfono.`,
+        laCamara: "La cámara",
+        demasiadoPesado: "Archivo demasiado pesado",
+        pesaDeMas: (nombre: string, pesaMb: string, topeMb: number) =>
+            `«${nombre}» pesa ${pesaMb} MB y el tope son ${topeMb} MB. Elige uno más ligero o tómale una foto.`,
+    },
+    historial: {
+        titulo: "Historial",
+        sistema: "Sistema",
+        sinCambios: "Sin cambios en los campos.",
+        ocultarCampos: "Ocultar campos",
+        verTodos: "Ver todos los campos",
+        verCampos: "Ver los campos",
+        noCargo: "No se pudo cargar el historial",
+        sinMovimientos: "Sin movimientos registrados",
+    },
+};
+
+export type Textos = typeof es;
+
+const en: Textos = {
+    comun: {
+        cancelar: "Cancel",
+        cerrar: "Close",
+        entendido: "Got it",
+        reintentar: "Try again",
+        listo: "Done",
+        quitar: "Clear",
+        elegir: "Choose…",
+        buscar: "Search",
+        ninguno: "None",
+        noDisponible: "N/A",
+        si: "Yes",
+        no: "No",
+        atras: "Back",
+        revisaLaSenal: "Check your connection and try again.",
+        noSePudoCargar: "Couldn't load",
+    },
+    acceso: {
+        usuario: "Username",
+        contrasena: "Password",
+        entrar: "Sign in",
+        noSePudo: "Couldn't sign in. Please try again.",
+        olvide: "Forgot your password?",
+    },
+    perfil: {
+        titulo: "Profile",
+        apariencia: "Appearance",
+        telefono: "Phone",
+        claro: "Light",
+        oscuro: "Dark",
+        cerrarSesion: "Sign out",
+    },
+    error: {
+        titulo: "Something went wrong",
+        mensaje: "This screen couldn't open. Try again; if it keeps happening, contact support.",
+    },
+    ficha: {
+        noExiste: "Not found",
+        noExisteTexto: "It may have been deleted, or you may not have permission to see it.",
+        mas: "More",
+        hojaNoCargo: "Couldn't load. Check your connection.",
+        seccionNoCargo: "Couldn't load. Pull down to refresh.",
+    },
+    edicion: {
+        sinPermiso: "You don't have permission",
+        noSePudoCargar: (queEs: string) => `Couldn't load ${queEs}`,
+        guardar: "Save",
+        guardando: "Saving…",
+        noSeGuardo: "Not saved",
+    },
+    listas: {
+        cuantos: (total: number, [uno, varios]: readonly [string, string]) =>
+            total === 1 ? `1 ${uno}` : `${total} ${varios}`,
+        borrarBusqueda: "Clear search",
+        filtrosPuestos: (cuenta: number) => `Filters, ${cuenta} applied`,
+        filtrosYOrden: "Filters and sorting",
+        filtros: "Filters",
+        ver: (total: number, [uno, varios]: readonly [string, string]) =>
+            `Show ${total} ${total === 1 ? uno : varios}`,
+        ordenarPor: "Sort by",
+        sentido: "Direction",
+        ascendente: "Ascending",
+        descendente: "Descending",
+        nadaQueCoincida: "No matches.",
+        listoCon: (n: number) => `Done (${n})`,
+        masAcciones: "More actions",
+    },
+    contacto: {
+        llamar: (nombre: string) => `Call ${nombre}`,
+        whatsapp: (nombre: string) => `WhatsApp ${nombre}`,
+        correo: (nombre: string) => `Email ${nombre}`,
+        direccion: "Address",
+        abrirEnElMapa: (donde: string) => `Open in maps: ${donde}`,
+    },
+    campos: {
+        diezDigitos: "10 digits",
+    },
+    fotos: {
+        verLaFoto: "View photo",
+        archivo: (nombre: string) => `File ${nombre}`.trim(),
+        quitarFoto: "Remove this photo",
+        quitarArchivo: "Remove this file",
+        guardada: "Saved to gallery",
+        noSeGuardo: "Couldn't save; try again",
+        guardarEnGaleria: "Save to gallery",
+        deTotal: (n: number, total: number) => `${n} of ${total}`,
+        tomarFoto: "Take photo",
+        tomarUnaFoto: "Take a photo",
+        deLaGaleria: "From gallery",
+        unDocumento: "A document",
+        subirArchivo: "Upload a file",
+        sinPermisoDeCamara: "No camera permission",
+        activaLaCamara: (para: string) =>
+            `To ${para}, turn on camera access for the app in your phone's settings.`,
+        laCamara: "The camera",
+        demasiadoPesado: "File too large",
+        pesaDeMas: (nombre: string, pesaMb: string, topeMb: number) =>
+            `"${nombre}" is ${pesaMb} MB and the limit is ${topeMb} MB. Choose a smaller one or take a photo of it.`,
+    },
+    historial: {
+        titulo: "History",
+        sistema: "System",
+        sinCambios: "No field changes.",
+        ocultarCampos: "Hide fields",
+        verTodos: "Show all fields",
+        verCampos: "Show fields",
+        noCargo: "Couldn't load the history",
+        sinMovimientos: "No recorded activity",
+    },
+};
+
+const TEXTOS: Record<Idioma, Textos> = { es, en };
+
+export default TEXTOS;

package/src/index.ts

@@ -151,3 +151,14 @@ export {
     type Historial,
 } from "./pantallas/PantallaDeHistorial";
 export { default as PantallaDePerfil } from "./pantallas/PantallaDePerfil";
+
+// ==============================|| IDIOMA ||============================== //
+
+export {
+    ProveedorDeIdioma,
+    textosActuales,
+    useIdiomaDeLaLibreria,
+    useTextos,
+    type Idioma,
+    type Textos,
+} from "./idioma";

package/src/listas/HojaDeFiltros.tsx

@@ -6,6 +6,7 @@ import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import React from "react";
 import { Modal, Pressable, ScrollView, Switch, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTextos } from "../idioma";
 
 /**
  * La hoja de filtros y orden de una lista (viajes, recursos), a pantalla completa
@@ -35,17 +36,18 @@ export default function HojaDeFiltros({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
     return (
         <Modal visible={abierta} animationType="slide" onRequestClose={onCerrar}>
             <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
                 <View style={styles.cabecera}>
-                    <TouchableOpacity onPress={onCerrar} accessibilityLabel="Cerrar">
+                    <TouchableOpacity onPress={onCerrar} accessibilityLabel={t.comun.cerrar}>
                         <MaterialIcons name="arrow-back" size={45} color={c.primary} />
                     </TouchableOpacity>
-                    <Text style={styles.titulo}>Filtros</Text>
+                    <Text style={styles.titulo}>{t.listas.filtros}</Text>
                     {hayAlgo ? (
                         <TouchableOpacity onPress={onQuitar}>
-                            <Text style={styles.limpiar}>Quitar</Text>
+                            <Text style={styles.limpiar}>{t.comun.quitar}</Text>
                         </TouchableOpacity>
                     ) : null}
                 </View>
@@ -54,9 +56,7 @@ export default function HojaDeFiltros({
 
                 <View style={{ paddingBottom: insets.bottom + 16 }}>
                     <BotonGrande onPress={onCerrar}>
-                        {visibles === null
-                            ? "Listo"
-                            : `Ver ${visibles} ${visibles === 1 ? nombres[0] : nombres[1]}`}
+                        {visibles === null ? t.comun.listo : t.listas.ver(visibles, nombres)}
                     </BotonGrande>
                 </View>
             </View>
@@ -205,17 +205,18 @@ export function OrdenDeLista({
     onOrdenar: (orden: string | null) => void;
     porOmision?: string;
 }) {
+    const t = useTextos();
     const descendente = orden?.startsWith("-") ?? false;
     const campo = orden?.replace(/^-/, "");
     const elegido = campos.find((c) => c.value === campo);
-    const sentidos = elegido?.sentidos ?? { asc: "Ascendente", desc: "Descendente" };
+    const sentidos = elegido?.sentidos ?? { asc: t.listas.ascendente, desc: t.listas.descendente };
     // El sentido con el que arranca va primero: en una fecha se lee «Recientes primero» antes
     // que «Antiguos primero».
     const ordenDeSentidos: ("asc" | "desc")[] =
         elegido?.primero === "desc" ? ["desc", "asc"] : ["asc", "desc"];
     return (
         <>
-            <SeccionDeFiltros>Ordenar por</SeccionDeFiltros>
+            <SeccionDeFiltros>{t.listas.ordenarPor}</SeccionDeFiltros>
             {porOmision ? (
                 <OpcionDeFiltro
                     texto={porOmision}
@@ -240,7 +241,7 @@ export function OrdenDeLista({
             ))}
             {campo !== undefined ? (
                 <>
-                    <SeccionDeFiltros>Sentido</SeccionDeFiltros>
+                    <SeccionDeFiltros>{t.listas.sentido}</SeccionDeFiltros>
                     {ordenDeSentidos.map((sentido) => (
                         <OpcionDeFiltro
                             key={sentido}

package/src/listas/ListaPaginada.tsx

@@ -7,6 +7,7 @@ import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIco
 import React from "react";
 import { ActivityIndicator, FlatList, RefreshControl } from "react-native";
 import { renglonesDe, type Pagina } from "./paginado";
+import { useTextos } from "../idioma";
 
 /** Lo que la lista lee de un `use…InfiniteQuery` de RTK Query. */
 export interface ConsultaPaginada<T> {
@@ -50,6 +51,7 @@ export default function ListaPaginada<T>({
 }: Props<T>) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const renglones = renglonesDe(consulta.data);
     const total = consulta.data?.pages[0]?.count;
 
@@ -60,11 +62,11 @@ export default function ListaPaginada<T>({
         return (
             <EstadoVacio
                 icono="cloud-off-outline"
-                titulo="No se pudo cargar"
-                texto="Revisa tu señal e intenta de nuevo."
+                titulo={t.comun.noSePudoCargar}
+                texto={t.comun.revisaLaSenal}
             >
                 <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
-                    Reintentar
+                    {t.comun.reintentar}
                 </BotonGrande>
             </EstadoVacio>
         );
@@ -78,9 +80,7 @@ export default function ListaPaginada<T>({
             contentContainerStyle={[styles.contenido, !renglones.length && styles.vacia]}
             ListHeaderComponent={
                 total !== undefined && renglones.length ? (
-                    <Text style={styles.total}>
-                        {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
-                    </Text>
+                    <Text style={styles.total}>{t.listas.cuantos(total, nombres)}</Text>
                 ) : null
             }
             ListEmptyComponent={

package/src/listas/piezas.tsx

@@ -20,6 +20,7 @@ import {
     type TextInputProps,
     type ViewStyle,
 } from "react-native";
+import { useTextos } from "../idioma";
 
 /**
  * Las piezas de las listas y las fichas: la cabecera de una lista (buscador y pestañas), la
@@ -58,6 +59,7 @@ export function Buscador({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const Campo = Entrada ?? TextInput;
     return (
         <View style={[styles.buscador, style]}>
@@ -90,7 +92,7 @@ export function Buscador({
                 <Pressable
                     onPress={() => onCambiar("")}
                     hitSlop={8}
-                    accessibilityLabel="Borrar búsqueda"
+                    accessibilityLabel={t.listas.borrarBusqueda}
                 >
                     <MaterialCommunityIcons name="close-circle" size={22} color={c.secondary} />
                 </Pressable>
@@ -114,13 +116,14 @@ export interface FiltrosDeCabecera {
  */
 function BotonDeFiltros({ cuenta, punto, onPress }: FiltrosDeCabecera) {
     const c = usePaleta();
+    const t = useTextos();
     const styles = useStyles();
     const activo = Boolean(cuenta) || punto;
     return (
         <Pressable
             onPress={onPress}
             accessibilityRole="button"
-            accessibilityLabel={cuenta ? `Filtros, ${cuenta} puestos` : "Filtros y orden"}
+            accessibilityLabel={cuenta ? t.listas.filtrosPuestos(cuenta) : t.listas.filtrosYOrden}
             hitSlop={4}
             style={({ pressed }) => [
                 styles.botonDeFiltros,
@@ -361,6 +364,7 @@ export function RenglonDeContacto({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const boton = (
         icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"],
         etiqueta: string,
@@ -386,15 +390,17 @@ export function RenglonDeContacto({
                 {correo ? <Text style={styles.linea}>{correo}</Text> : null}
             </View>
             <View style={styles.acciones}>
-                {telefono ? boton("phone", `Llamar a ${nombre}`, `tel:${telefono}`) : null}
+                {telefono ? boton("phone", t.contacto.llamar(nombre), `tel:${telefono}`) : null}
                 {telefono
                     ? boton(
                           "whatsapp",
-                          `WhatsApp a ${nombre}`,
+                          t.contacto.whatsapp(nombre),
                           `https://wa.me/${digitos(telefono)}`,
                       )
                     : null}
-                {correo ? boton("email-outline", `Correo a ${nombre}`, `mailto:${correo}`) : null}
+                {correo
+                    ? boton("email-outline", t.contacto.correo(nombre), `mailto:${correo}`)
+                    : null}
             </View>
         </View>
     );
@@ -418,7 +424,7 @@ const abrirEnMapas = (direccion: string) => {
  * no hay renglón. Es el hermano de `RenglonDeContacto`.
  */
 export function RenglonDeDireccion({
-    etiqueta = "Dirección",
+    etiqueta,
     lineas,
     enHoja,
 }: {
@@ -430,13 +436,14 @@ export function RenglonDeDireccion({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const presentes = lineas.map((l) => l?.trim()).filter((l): l is string => Boolean(l));
     if (!presentes.length) return null;
     return (
         <Pressable
             onPress={() => abrirEnMapas(presentes.join(", "))}
             accessibilityRole="link"
-            accessibilityLabel={`Abrir en el mapa: ${presentes.join(", ")}`}
+            accessibilityLabel={t.contacto.abrirEnElMapa(presentes.join(", "))}
             style={({ pressed }) => [
                 styles.renglon,
                 enHoja && styles.renglonEnHoja,
@@ -444,7 +451,7 @@ export function RenglonDeDireccion({
             ]}
         >
             <View style={styles.renglonTexto}>
-                <Text style={styles.etiqueta}>{etiqueta}</Text>
+                <Text style={styles.etiqueta}>{etiqueta ?? t.contacto.direccion}</Text>
                 {presentes.map((l, i) => (
                     <Text key={i} style={i === 0 ? styles.valor : styles.linea}>
                         {l}
@@ -544,9 +551,9 @@ export function EstadoDeHoja({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     if (cargando) return <ActivityIndicator color={c.primary} />;
-    if (fallo)
-        return <Text style={styles.linea}>No se pudo cargar. Jala la ficha para releer.</Text>;
+    if (fallo) return <Text style={styles.linea}>{t.ficha.seccionNoCargo}</Text>;
     return vacio ? <Text style={styles.linea}>{vacio}</Text> : null;
 }