github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-01-10 23:27:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

SELF-763: remove aesop features for now (#1132)

Browse Source 
* clean onboarding camera screens

* remove remaining aesop artifacts. fix tests
This commit is contained in:
Justin Hernandez
2025-09-28 07:55:11 -07:00
committed by GitHub
parent 20fa5c5adc
commit bd8d425cc7
12 changed files with 2 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/ButtonsContainer.tsx
View File

@@ -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,

3
app/src/components/buttons/AbstractButton.tsx
View File

@@ -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,

5
app/src/components/typography/Additional.tsx
View File

@@ -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',
}),
},
});

5
app/src/components/typography/Description.tsx
View File

@@ -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,
}),
},
});

15
app/src/hooks/useAesopRedesign.ts
View File

@@ -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();
};

30
app/src/navigation/aesop.ts
View File

@@ -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();

3
app/src/navigation/index.tsx
View File

@@ -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,

139
app/src/screens/aesop/DocumentOnboardingScreen.tsx
View File

@@ -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<LottieView>(null);
useEffect(() => {
animationRef.current?.play();
}, []);
return (
<ExpandableBottomLayout.Layout backgroundColor={white}>
<SystemBars style="light" />
<ExpandableBottomLayout.TopSection backgroundColor={white}>
<LottieView
ref={animationRef}
autoPlay={false}
loop={false}
source={passportOnboardingAnimation}
style={styles.animation}
cacheComposition={true}
renderMode="HARDWARE"
onAnimationFinish={() => {
setTimeout(() => {
animationRef.current?.play();
}, 100);
}}
/>
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection
style={styles.bottomSection}
backgroundColor={white}
>
<TextsContainer style={styles.textContainer}>
<View style={styles.textIconWrapper}>
<Scan
style={styles.scanIcon}
height={40}
width={40}
color={black}
/>
<View>
<DescriptionTitle>Open to the photograph page</DescriptionTitle>
<Description textBreakStrategy="balanced">
Lay the Passport flat and position the machine readable text in
the viewfinder.
</Description>
</View>
</View>
</TextsContainer>
<TextsContainer>
<Additional textBreakStrategy="balanced">
Self will not capture an image of your passport.
</Additional>
</TextsContainer>
<ButtonsContainer>
<PrimaryButton
trackEvent={PassportEvents.CAMERA_SCAN_STARTED}
onPress={handleCameraPress}
>
Open Camera
</PrimaryButton>
<SecondaryButton
trackEvent={PassportEvents.CAMERA_SCAN_CANCELLED}
onPress={onCancelPress}
>
Cancel
</SecondaryButton>
</ButtonsContainer>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
);
};
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,
},
});

25
app/tests/src/hooks/useAesopRedesign.test.ts
View File

@@ -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());
});
});
});

22
app/tests/src/navigation.test.ts
View File

@@ -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();
});
});
});

1
app/vite.config.ts
View File

@@ -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'],
},
},
},

2
docs/development-patterns.md
View File

@@ -15,8 +15,6 @@ export const navigationScreens = {
...settingsScreens,
...recoveryScreens,
...devScreens,
// Feature screens added last to override others
...getAesopScreens(),
};
// Platform-specific initial routes