fix(native): native release bug fixes — 2026-09-02 (TASK-22125 duplicate notification artwork, TASK-22146 About ToS title locale, TASK-22209 duplicate welcome push, card details survive app switch + expiry copy)

src/components/Card/CardFace.tsx

@@ -33,14 +33,17 @@ interface Props {
      *  the retry affordance — no separate dismiss needed. */
     error?: string | null
     onToggleReveal?: () => void
-    onCopy?: (value: string, field: 'pan' | 'cvv') => void
+    onCopy?: (value: string, field: CopyableCardField) => void
     /** Pre-activation preview: PAN/cardholder/expiry rendered as `?`s.
      *  Used on AddCardEntryScreen before KYC + first spend. */
     locked?: boolean
     className?: string
 }
 
+export type CopyableCardField = 'pan' | 'expiry' | 'cvv'
+
 const formatPan = (pan: string) => pan.replace(/(.{4})/g, '$1 ').trim()
+const formatExpiry = (month: number, year: number) => `${String(month).padStart(2, '0')}/${String(year).slice(-2)}`
 
 const CardFace: FC<Props> = ({
     last4,
@@ -60,9 +63,9 @@ const CardFace: FC<Props> = ({
     // so it never covers the PAN / expiry / CVV (or the loading skeletons).
     // It slides back when the card is re-masked.
     const detailsShown = showingDetails || loading
-    const [copiedField, setCopiedField] = useState<'pan' | 'cvv' | null>(null)
+    const [copiedField, setCopiedField] = useState<CopyableCardField | null>(null)
 
-    const handleCopy = (value: string, field: 'pan' | 'cvv') => {
+    const handleCopy = (value: string, field: CopyableCardField) => {
         setCopiedField(field)
         // Clear only if still showing the same field — guards against an
         // earlier setTimeout overwriting a fresher copy on the other field.
@@ -160,13 +163,29 @@ const CardFace: FC<Props> = ({
                             )}
                             <div className="flex items-end justify-between">
                                 <div className="text-s flex gap-6">
-                                    <div>
-                                        {/* "Expiry" label dropped — value row stays one line so PAN/name clear the artwork */}
-                                        {/* ph-no-capture: expiry digits out of recordings. */}
-                                        <div className="ph-no-capture font-bold">
-                                            {String(revealed.expiryMonth).padStart(2, '0')}/
-                                            {String(revealed.expiryYear).slice(-2)}
+                                    <div className="flex items-end gap-1">
+                                        <div>
+                                            {/* "Expiry" label dropped — value row stays one line so PAN/name clear the artwork */}
+                                            {/* ph-no-capture: expiry digits out of recordings. */}
+                                            <div className="ph-no-capture font-bold">
+                                                {formatExpiry(revealed.expiryMonth, revealed.expiryYear)}
+                                            </div>
                                         </div>
+                                        {onCopy && (
+                                            <button
+                                                type="button"
+                                                aria-label={t('copyExpiry')}
+                                                onClick={() =>
+                                                    handleCopy(
+                                                        formatExpiry(revealed.expiryMonth, revealed.expiryYear),
+                                                        'expiry'
+                                                    )
+                                                }
+                                                className="relative p-1 transition-opacity duration-instant after:absolute after:-inset-3 focus-visible:outline-[3px] focus-visible:outline-action-focus active:opacity-60"
+                                            >
+                                                <Icon name={copiedField === 'expiry' ? 'check' : 'copy'} size={16} />
+                                            </button>
+                                        )}
                                     </div>
                                     <div className="flex items-end gap-1">
                                         <div>
@@ -181,7 +200,7 @@ const CardFace: FC<Props> = ({
                                                 onClick={() => handleCopy(revealed.cvv, 'cvv')}
                                                 className="relative p-1 transition-opacity duration-instant after:absolute after:-inset-3 focus-visible:outline-[3px] focus-visible:outline-action-focus active:opacity-60"
                                             >
-                                                <Icon name={copiedField === 'cvv' ? 'check' : 'copy'} size={14} />
+                                                <Icon name={copiedField === 'cvv' ? 'check' : 'copy'} size={16} />
                                             </button>
                                         )}
                                     </div>

src/components/Card/YourCardScreen.tsx

@@ -13,7 +13,7 @@ import ProfileMenuItem from '@/components/Profile/components/ProfileMenuItem'
 import { Icon } from '@/components/Global/Icons/Icon'
 import { Notification } from '@/components/0_Bruddle/Notification'
 import { useToast } from '@/components/0_Bruddle/Toast'
-import CardFace from '@/components/Card/CardFace'
+import CardFace, { type CopyableCardField } from '@/components/Card/CardFace'
 import CancelCardModal from '@/components/Card/CancelCardModal'
 import LockCardModal from '@/components/Card/LockCardModal'
 import { shouldShowAutoRenewBanner, daysUntilExpiry } from '@/components/Card/cardExpiry.utils'
@@ -32,6 +32,12 @@ interface Props {
     onPrev?: () => void
 }
 
+const COPIED_MESSAGE_KEY: Record<CopyableCardField, 'cardNumberCopied' | 'expiryCopied' | 'cvvCopied'> = {
+    pan: 'cardNumberCopied',
+    expiry: 'expiryCopied',
+    cvv: 'cvvCopied',
+}
+
 const YourCardScreen: FC<Props> = ({ overview, card, onPrev }) => {
     const t = useTranslations('card.yourCard')
     const tGlobal = useTranslations('global')
@@ -65,13 +71,13 @@ const YourCardScreen: FC<Props> = ({ overview, card, onPrev }) => {
     const balanceDueCents = cardBalanceDueCents(overview.balance?.spendingPower)
 
     const handleCopy = useCallback(
-        async (value: string, field: 'pan' | 'cvv') => {
+        async (value: string, field: CopyableCardField) => {
             if (!(await copyTextToClipboard(value))) {
                 toast.error(tGlobal('copyToClipboard.copyFailed'))
                 return
             }
             triggerHaptic()
-            toast.success(field === 'pan' ? t('cardNumberCopied') : t('cvvCopied'))
+            toast.success(t(COPIED_MESSAGE_KEY[field]))
         },
         [triggerHaptic, toast, t, tGlobal]
     )

src/components/Card/__tests__/CardFace.test.tsx

@@ -7,7 +7,7 @@
  * degraded the Rain lookup).
  */
 import React from 'react'
-import { render as rtlRender, screen } from '@testing-library/react'
+import { fireEvent, render as rtlRender, screen } from '@testing-library/react'
 import { IntlWrapper } from '@/test-utils/intl'
 import CardFace, { type RevealedCardDetails } from '@/components/Card/CardFace'
 
@@ -21,6 +21,17 @@ const revealed: RevealedCardDetails = {
     cardholderName: 'Jane Doe',
 }
 
+describe('CardFace copy buttons', () => {
+    it('copies the expiry as MM/YY with its own button', () => {
+        const onCopy = jest.fn()
+        render(<CardFace last4="1234" revealed={revealed} onCopy={onCopy} />)
+        fireEvent.click(screen.getByRole('button', { name: 'Copy expiry date' }))
+        expect(onCopy).toHaveBeenCalledWith('12/30', 'expiry')
+        fireEvent.click(screen.getByRole('button', { name: 'Copy CVV' }))
+        expect(onCopy).toHaveBeenCalledWith('123', 'cvv')
+    })
+})
+
 describe('CardFace cardholder name', () => {
     it('shows the registered name when the card is revealed', () => {
         render(<CardFace last4="1234" revealed={revealed} />)

src/components/Profile/components/ShowNameToggle.tsx

@@ -2,35 +2,77 @@
 
 import { updateUserById } from '@/app/actions/users'
 import { Toggle } from '@/components/0_Bruddle/Toggle'
+import { useToast } from '@/components/0_Bruddle/Toast'
+import ActionModal from '@/components/Global/ActionModal'
 import { useAuth } from '@/context/authContext'
 import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 
-const ShowNameToggle = () => {
+interface ShowNameToggleProps {
+    checked: boolean
+    /** Called with the optimistic value, so the screen reflects the setting at once. */
+    onChange: (value: boolean) => void
+}
+
+const ShowNameToggle = ({ checked, onChange }: ShowNameToggleProps) => {
     const t = useTranslations('profile')
+    const tCommon = useTranslations('common')
     const { fetchUser, user } = useAuth()
-    const [showFullName, setShowFullName] = useState(user?.user.showFullName ?? false)
+    const toast = useToast()
+    const [isConfirming, setIsConfirming] = useState(false)
 
-    const handleToggleChange = async () => {
-        const newValue = !showFullName
-        setShowFullName(newValue)
+    const save = async (newValue: boolean) => {
+        onChange(newValue)
 
-        // Fire-and-forget: don't await fetchUser() to allow quick navigation
-        updateUserById({
+        // updateUserById RESOLVES { error } for a non-2xx or a network failure —
+        // it never rejects, so a catch block would let a failed save stand and
+        // this screen would claim the legal name is hidden while it is public.
+        const { error } = await updateUserById({
             userId: user?.user.userId,
             showFullName: newValue,
         })
-            .then(() => {
-                // Refetch user data in background without blocking
-                fetchUser()
-            })
-            .catch((error) => {
-                console.error('Failed to update preferences:', error)
-                // Revert on error
-                setShowFullName(!newValue)
-            })
+        if (error) {
+            onChange(!newValue)
+            toast.error(tCommon('genericError'))
+            return
+        }
+        // Refetch user data in background without blocking
+        fetchUser()
     }
-    return <Toggle checked={showFullName} onChange={handleToggleChange} aria-label={t('menu.showMyFullName')} />
+
+    // Turning it on publishes the legal name next to the username, so it asks
+    // first. Turning it off takes nothing away and needs no confirmation.
+    const handleToggleChange = () => (checked ? void save(false) : setIsConfirming(true))
+
+    return (
+        <>
+            <Toggle checked={checked} onChange={handleToggleChange} aria-label={t('menu.showMyFullName')} />
+            <ActionModal
+                visible={isConfirming}
+                onClose={() => setIsConfirming(false)}
+                tone="warning"
+                icon="eye"
+                title={t('showFullNameConfirm.title')}
+                description={t('showFullNameConfirm.description')}
+                ctas={[
+                    {
+                        text: tCommon('confirm'),
+                        variant: 'purple',
+                        shadowSize: '4',
+                        onClick: () => {
+                            setIsConfirming(false)
+                            void save(true)
+                        },
+                    },
+                    {
+                        text: tCommon('cancel'),
+                        variant: 'stroke',
+                        onClick: () => setIsConfirming(false),
+                    },
+                ]}
+            />
+        </>
+    )
 }
 
 export default ShowNameToggle

src/components/Profile/components/__tests__/ShowNameToggle.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * ShowNameToggle — the confirmation gate. Turning the setting ON publishes the
+ * user's legal name next to their username, so it must ask first; turning it
+ * OFF saves straight away.
+ */
+import React from 'react'
+import { render as rtlRender, screen, fireEvent, waitFor } from '@testing-library/react'
+import { IntlWrapper } from '@/test-utils/intl'
+import ShowNameToggle from '@/components/Profile/components/ShowNameToggle'
+
+const render = (ui: React.ReactElement) => rtlRender(ui, { wrapper: IntlWrapper })
+
+const mockUpdateUserById = jest.fn()
+const mockFetchUser = jest.fn()
+
+jest.mock('@/app/actions/users', () => ({ updateUserById: (...a: unknown[]) => mockUpdateUserById(...a) }))
+const mockToastError = jest.fn()
+jest.mock('@/components/0_Bruddle/Toast', () => ({ useToast: () => ({ error: mockToastError }) }))
+jest.mock('@/context/authContext', () => ({
+    useAuth: () => ({ fetchUser: mockFetchUser, user: { user: { userId: 'u1' } } }),
+}))
+jest.mock('@/components/Global/ActionModal', () => ({
+    __esModule: true,
+    default: ({ visible, title, ctas }: any) =>
+        visible ? (
+            <div data-testid="modal">
+                <h1>{title}</h1>
+                {ctas?.map((c: any, i: number) => (
+                    <button key={i} onClick={c.onClick}>
+                        {c.text}
+                    </button>
+                ))}
+            </div>
+        ) : null,
+}))
+
+beforeEach(() => {
+    jest.clearAllMocks()
+    mockUpdateUserById.mockResolvedValue({ data: {} })
+})
+
+describe('ShowNameToggle', () => {
+    it('asks before turning the setting on, and saves once confirmed', async () => {
+        const onChange = jest.fn()
+        render(<ShowNameToggle checked={false} onChange={onChange} />)
+
+        fireEvent.click(screen.getByRole('switch'))
+        expect(screen.getByText('Show your full name?')).toBeInTheDocument()
+        expect(mockUpdateUserById).not.toHaveBeenCalled()
+        expect(onChange).not.toHaveBeenCalled()
+
+        fireEvent.click(screen.getByText('Confirm'))
+        expect(onChange).toHaveBeenCalledWith(true)
+        await waitFor(() => expect(mockUpdateUserById).toHaveBeenCalledWith({ userId: 'u1', showFullName: true }))
+    })
+
+    it('cancelling leaves the setting off', () => {
+        const onChange = jest.fn()
+        render(<ShowNameToggle checked={false} onChange={onChange} />)
+
+        fireEvent.click(screen.getByRole('switch'))
+        fireEvent.click(screen.getByText('Cancel'))
+
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+        expect(mockUpdateUserById).not.toHaveBeenCalled()
+        expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('turning it off saves without a confirmation', async () => {
+        const onChange = jest.fn()
+        render(<ShowNameToggle checked onChange={onChange} />)
+
+        fireEvent.click(screen.getByRole('switch'))
+
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+        expect(onChange).toHaveBeenCalledWith(false)
+        await waitFor(() => expect(mockUpdateUserById).toHaveBeenCalledWith({ userId: 'u1', showFullName: false }))
+    })
+
+    it('reverts the optimistic value when the save resolves an error', async () => {
+        // updateUserById resolves { error } for a non-2xx or a network failure;
+        // it never rejects. Treating that as success left this screen claiming
+        // the legal name was hidden while the server still published it.
+        mockUpdateUserById.mockResolvedValueOnce({ error: 'nope' })
+        const onChange = jest.fn()
+        render(<ShowNameToggle checked onChange={onChange} />)
+
+        fireEvent.click(screen.getByRole('switch'))
+
+        await waitFor(() => expect(onChange).toHaveBeenLastCalledWith(true))
+        expect(mockToastError).toHaveBeenCalled()
+        expect(mockFetchUser).not.toHaveBeenCalled()
+    })
+})

src/components/Profile/views/ProfileEdit.view.tsx

@@ -40,6 +40,13 @@ export const ProfileEditView = () => {
     // validation renders as the name field's own error instead.
     const [errorMessage, setErrorMessage] = useState('')
     const [nameError, setNameError] = useState('')
+    // Mirrors `showFullName` so the header above updates the moment the toggle
+    // flips, instead of waiting for the background user refetch to land.
+    const [showFullName, setShowFullName] = useState(user?.user.showFullName ?? false)
+
+    useEffect(() => {
+        setShowFullName(user?.user.showFullName ?? false)
+    }, [user?.user.showFullName])
 
     // split the full name into name and surname
     const splitName = useCallback((fullName: string) => {
@@ -172,14 +179,16 @@ export const ProfileEditView = () => {
         }
     }, [formData, user, fetchUser, router, isEmailSet, canEditName, t, tCommon])
 
-    const fullName = user?.user.fullName || user?.user?.username || ''
     const username = user?.user.username || ''
+    // The header shows what the rest of the world sees: the full name only
+    // while it is public, the username otherwise.
+    const displayName = showFullName && user?.user.fullName ? user.user.fullName : username
 
     return (
         <div className="flex flex-col gap-8">
             <NavHeader title={t('title')} onPrev={onBack} />
 
-            <ProfileHeader name={fullName} username={username} isVerified={isKycApproved} showShareButton={false} />
+            <ProfileHeader name={displayName} username={username} isVerified={isKycApproved} showShareButton={false} />
 
             {/* two groups — who you are, then how we reach you. gap-6 (XL,
                 the section step) against gap-4 (L) inside a group, so the
@@ -252,7 +261,7 @@ export const ProfileEditView = () => {
                         position="single"
                         leading={<Icon name="eye" size={24} />}
                         title={tMenu('showMyFullName')}
-                        trailing={<ShowNameToggle />}
+                        trailing={<ShowNameToggle checked={showFullName} onChange={setShowFullName} />}
                     />
                 )}
             </div>