From bd8d425cc75f017e10304455b07f4b32ff611801 Mon Sep 17 00:00:00 2001 From: Justin Hernandez Date: Sun, 28 Sep 2025 07:55:11 -0700 Subject: [PATCH] SELF-763: remove aesop features for now (#1132) * clean onboarding camera screens * remove remaining aesop artifacts. fix tests --- app/src/components/ButtonsContainer.tsx | 4 +- app/src/components/buttons/AbstractButton.tsx | 3 +- app/src/components/typography/Additional.tsx | 5 - app/src/components/typography/Description.tsx | 5 - app/src/hooks/useAesopRedesign.ts | 15 -- app/src/navigation/aesop.ts | 30 ---- app/src/navigation/index.tsx | 3 - .../aesop/DocumentOnboardingScreen.tsx | 139 ------------------ app/tests/src/hooks/useAesopRedesign.test.ts | 25 ---- app/tests/src/navigation.test.ts | 22 --- app/vite.config.ts | 1 - docs/development-patterns.md | 2 - 12 files changed, 2 insertions(+), 252 deletions(-) delete mode 100644 app/src/hooks/useAesopRedesign.ts delete mode 100644 app/src/navigation/aesop.ts delete mode 100644 app/src/screens/aesop/DocumentOnboardingScreen.tsx delete mode 100644 app/tests/src/hooks/useAesopRedesign.test.ts diff --git a/app/src/components/ButtonsContainer.tsx b/app/src/components/ButtonsContainer.tsx index 3a30dd1e9..05843d670 100644 --- a/app/src/components/ButtonsContainer.tsx +++ b/app/src/components/ButtonsContainer.tsx @@ -5,8 +5,6 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign'; - interface ButtonsContainerProps { children: React.ReactNode; } @@ -20,7 +18,7 @@ export default ButtonsContainer; const styles = StyleSheet.create({ buttonsContainer: { display: 'flex', - flexDirection: shouldShowAesopRedesign() ? 'row' : 'column', + flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 10, diff --git a/app/src/components/buttons/AbstractButton.tsx b/app/src/components/buttons/AbstractButton.tsx index 7fb31b687..bc8c801ab 100644 --- a/app/src/components/buttons/AbstractButton.tsx +++ b/app/src/components/buttons/AbstractButton.tsx @@ -9,7 +9,6 @@ import type { ViewProps } from 'tamagui'; import { Button, Text } from 'tamagui'; import { pressedStyle } from '@/components/buttons/pressedStyle'; -import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign'; import analytics from '@/utils/analytics'; import { dinot } from '@/utils/fonts'; @@ -95,7 +94,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', flexGrow: 0, flexShrink: 0, - width: shouldShowAesopRedesign() ? '48%' : '100%', + width: '100%', display: 'flex', alignItems: 'center', rowGap: 12, diff --git a/app/src/components/typography/Additional.tsx b/app/src/components/typography/Additional.tsx index 83d44c74f..1aac09b21 100644 --- a/app/src/components/typography/Additional.tsx +++ b/app/src/components/typography/Additional.tsx @@ -6,7 +6,6 @@ import React from 'react'; import type { TextProps } from 'react-native'; import { StyleSheet, Text } from 'react-native'; -import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign'; import { slate400 } from '@/utils/colors'; import { dinot } from '@/utils/fonts'; @@ -31,9 +30,5 @@ const styles = StyleSheet.create({ marginTop: 10, fontFamily: dinot, textTransform: 'none', - ...(shouldShowAesopRedesign() && { - fontSize: 11.5, - textTransform: 'uppercase', - }), }, }); diff --git a/app/src/components/typography/Description.tsx b/app/src/components/typography/Description.tsx index bd5826eeb..924cfe327 100644 --- a/app/src/components/typography/Description.tsx +++ b/app/src/components/typography/Description.tsx @@ -7,7 +7,6 @@ import { StyleSheet } from 'react-native'; import type { TextProps } from 'tamagui'; import { Text } from 'tamagui'; -import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign'; import { slate500 } from '@/utils/colors'; import { dinot } from '@/utils/fonts'; @@ -34,9 +33,5 @@ const styles = StyleSheet.create({ lineHeight: 23, textAlign: 'center', fontFamily: dinot, - ...(shouldShowAesopRedesign() && { - textAlign: 'left', - fontSize: 16, - }), }, }); diff --git a/app/src/hooks/useAesopRedesign.ts b/app/src/hooks/useAesopRedesign.ts deleted file mode 100644 index 73d9444c0..000000000 --- a/app/src/hooks/useAesopRedesign.ts +++ /dev/null @@ -1,15 +0,0 @@ -// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc. -// SPDX-License-Identifier: BUSL-1.1 -// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE. - -import { IS_TEST_BUILD } from '@env'; - -export const shouldShowAesopRedesign = (): boolean => { - return typeof IS_TEST_BUILD === 'boolean' - ? IS_TEST_BUILD - : typeof IS_TEST_BUILD === 'string' && IS_TEST_BUILD === 'true'; -}; - -export const useAesopRedesign = (): boolean => { - return shouldShowAesopRedesign(); -}; diff --git a/app/src/navigation/aesop.ts b/app/src/navigation/aesop.ts deleted file mode 100644 index 899211a8d..000000000 --- a/app/src/navigation/aesop.ts +++ /dev/null @@ -1,30 +0,0 @@ -// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc. -// SPDX-License-Identifier: BUSL-1.1 -// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE. - -import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'; - -import { ProgressNavBar } from '@/components/NavBar'; -import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign'; -import DocumentOnboardingScreen from '@/screens/aesop/DocumentOnboardingScreen'; -import { white } from '@/utils/colors'; - -const aesopScreens = { - DocumentOnboarding: { - screen: DocumentOnboardingScreen, - options: { - animation: 'slide_from_bottom', - header: ProgressNavBar, - title: 'Scan your document', - headerStyle: { - backgroundColor: white, - }, - headerCurrentStep: 1, - headerTotalSteps: 4, - } as NativeStackNavigationOptions, - }, -}; - -export const getAesopScreens = () => - shouldShowAesopRedesign() ? aesopScreens : {}; -export default getAesopScreens(); diff --git a/app/src/navigation/index.tsx b/app/src/navigation/index.tsx index 0dce10415..e94badbc2 100644 --- a/app/src/navigation/index.tsx +++ b/app/src/navigation/index.tsx @@ -14,7 +14,6 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { DefaultNavBar } from '@/components/NavBar'; import AppLayout from '@/layouts/AppLayout'; -import { getAesopScreens } from '@/navigation/aesop'; import devScreens from '@/navigation/devTools'; import documentScreens from '@/navigation/document'; import homeScreens from '@/navigation/home'; @@ -33,8 +32,6 @@ export const navigationScreens = { ...settingsScreens, ...recoveryScreens, ...devScreens, // allow in production for testing - // add last to override other screens - ...getAesopScreens(), }; const AppNavigation = createNativeStackNavigator({ id: undefined, diff --git a/app/src/screens/aesop/DocumentOnboardingScreen.tsx b/app/src/screens/aesop/DocumentOnboardingScreen.tsx deleted file mode 100644 index d18116c68..000000000 --- a/app/src/screens/aesop/DocumentOnboardingScreen.tsx +++ /dev/null @@ -1,139 +0,0 @@ -// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc. -// SPDX-License-Identifier: BUSL-1.1 -// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE. - -import LottieView from 'lottie-react-native'; -import React, { useEffect, useRef } from 'react'; -import { StyleSheet, View } from 'react-native'; -import { SystemBars } from 'react-native-edge-to-edge'; - -import { - hasAnyValidRegisteredDocument, - useSelfClient, -} from '@selfxyz/mobile-sdk-alpha'; -import { PassportEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics'; - -import passportOnboardingAnimation from '@/assets/animations/passport_onboarding.json'; -import { PrimaryButton } from '@/components/buttons/PrimaryButton'; -import { SecondaryButton } from '@/components/buttons/SecondaryButton'; -import ButtonsContainer from '@/components/ButtonsContainer'; -import TextsContainer from '@/components/TextsContainer'; -import Additional from '@/components/typography/Additional'; -import Description from '@/components/typography/Description'; -import { DescriptionTitle } from '@/components/typography/DescriptionTitle'; -import useHapticNavigation from '@/hooks/useHapticNavigation'; -import Scan from '@/images/icons/passport_camera_scan.svg'; -import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout'; -import { black, slate100, white } from '@/utils/colors'; - -const DocumentOnboardingScreen: React.FC = () => { - const client = useSelfClient(); - const handleCameraPress = useHapticNavigation('DocumentCamera'); - const navigateToLaunch = useHapticNavigation('Launch', { - action: 'cancel', - }); - const navigateToHome = useHapticNavigation('Home', { - action: 'cancel', - }); - const onCancelPress = async () => { - const hasValidDocument = await hasAnyValidRegisteredDocument(client); - if (hasValidDocument) { - navigateToHome(); - } else { - navigateToLaunch(); - } - }; - const animationRef = useRef(null); - - useEffect(() => { - animationRef.current?.play(); - }, []); - - return ( - - - - { - setTimeout(() => { - animationRef.current?.play(); - }, 100); - }} - /> - - - - - - - Open to the photograph page - - Lay the Passport flat and position the machine readable text in - the viewfinder. - - - - - - - Self will not capture an image of your passport. - - - - - Open Camera - - - Cancel - - - - - ); -}; - -export default DocumentOnboardingScreen; - -const styles = StyleSheet.create({ - animation: { - backgroundColor: slate100, - width: '100%', - height: '100%', - }, - textIconWrapper: { - width: '100%', - flexDirection: 'row', - alignItems: 'center', - gap: 20, - }, - scanIcon: { - marginRight: 10, - }, - textContainer: { - marginBottom: 10, - }, - bottomSection: { - paddingBottom: 32, - }, -}); diff --git a/app/tests/src/hooks/useAesopRedesign.test.ts b/app/tests/src/hooks/useAesopRedesign.test.ts deleted file mode 100644 index eb6dfd3fb..000000000 --- a/app/tests/src/hooks/useAesopRedesign.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc. -// SPDX-License-Identifier: BUSL-1.1 -// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE. - -import { renderHook } from '@testing-library/react-native'; - -import { - shouldShowAesopRedesign, - useAesopRedesign, -} from '@/hooks/useAesopRedesign'; - -describe('useAesopRedesign', () => { - describe('shouldShowAesopRedesign', () => { - it('should return false when IS_TEST_BUILD is false', () => { - expect(shouldShowAesopRedesign()).toBe(false); - }); - }); - - describe('useAesopRedesign hook', () => { - it('should return the same value as shouldShowAesopRedesign', () => { - const { result } = renderHook(() => useAesopRedesign()); - expect(result.current).toBe(shouldShowAesopRedesign()); - }); - }); -}); diff --git a/app/tests/src/navigation.test.ts b/app/tests/src/navigation.test.ts index 47da291c6..005873378 100644 --- a/app/tests/src/navigation.test.ts +++ b/app/tests/src/navigation.test.ts @@ -51,26 +51,4 @@ describe('navigation', () => { 'UnsupportedDocument', ]); }); - - describe('Aesop design screen overrides', () => { - beforeEach(() => { - jest.resetModules(); - }); - - it('should use regular passport screens when shouldShowAesopRedesign is false', () => { - const navigationScreens = require('@/navigation').navigationScreens; - expect( - navigationScreens.DocumentOnboarding.options.title, - ).toBeUndefined(); - }); - - it('should use aesop design passport screens when shouldShowAesopRedesign is true', () => { - jest.mock('@/hooks/useAesopRedesign', () => ({ - shouldShowAesopRedesign: jest.fn().mockReturnValue(true), - })); - - const navigationScreens = require('@/navigation').navigationScreens; - expect(navigationScreens.DocumentOnboarding.options.title).toBeDefined(); - }); - }); }); diff --git a/app/vite.config.ts b/app/vite.config.ts index 1494b0833..584f1959e 100644 --- a/app/vite.config.ts +++ b/app/vite.config.ts @@ -198,7 +198,6 @@ export default defineConfig({ 'screens-settings': ['./src/navigation/settings.ts'], 'screens-recovery': ['./src/navigation/recovery.ts'], 'screens-dev': ['./src/navigation/devTools.ts'], - 'screens-aesop': ['./src/navigation/aesop.ts'], }, }, }, diff --git a/docs/development-patterns.md b/docs/development-patterns.md index fdabb61bd..963d87360 100644 --- a/docs/development-patterns.md +++ b/docs/development-patterns.md @@ -15,8 +15,6 @@ export const navigationScreens = { ...settingsScreens, ...recoveryScreens, ...devScreens, - // Feature screens added last to override others - ...getAesopScreens(), }; // Platform-specific initial routes