feat(ui): add "used up" message for gifts

Author: pwltr

src/screens/Gift/Loading.tsx

@@ -44,6 +44,8 @@ const Loading = ({
 			if (orderResult.isErr()) {
 				if (orderResult.error.message.includes('GIFT_CODE_ALREADY_USED')) {
 					navigation.navigate('Used', { amount });
+				} else if (orderResult.error.message.includes('GIFT_CODE_USED_UP')) {
+					navigation.navigate('UsedUp');
 				} else {
 					navigation.navigate('Error');
 				}
@@ -108,6 +110,8 @@ const Loading = ({
 			if (result.isErr()) {
 				if (result.error.message.includes('GIFT_CODE_ALREADY_USED')) {
 					navigation.navigate('Used', { amount });
+				} else if (result.error.message.includes('GIFT_CODE_USED_UP')) {
+					navigation.navigate('UsedUp');
 				} else {
 					navigation.navigate('Error');
 				}

src/screens/Gift/UsedUp.tsx

@@ -0,0 +1,82 @@
+import React, { ReactElement, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, StyleSheet, View } from 'react-native';
+
+import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationHeader';
+import GradientView from '../../components/GradientView';
+import SafeAreaInset from '../../components/SafeAreaInset';
+import Button from '../../components/buttons/Button';
+import { useSheetRef } from '../../sheets/SheetRefsProvider';
+import { BodyM } from '../../styles/text';
+
+const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
+
+const UsedUp = (): ReactElement => {
+	const { t } = useTranslation('other');
+	const sheetRef = useSheetRef('gift');
+
+	const onContinue = (): void => {
+		sheetRef.current?.close();
+	};
+
+	return (
+		<GradientView style={styles.root}>
+			<BottomSheetNavigationHeader
+				title={t('gift.used_up.title')}
+				showBackButton={false}
+			/>
+
+			<View style={styles.content}>
+				<BodyM color="secondary">{t('gift.used_up.text')}</BodyM>
+
+				<View style={styles.imageContainer}>
+					<Image style={styles.image} source={imageSrc} />
+				</View>
+
+				<View style={styles.buttonContainer}>
+					<Button
+						style={styles.button}
+						size="large"
+						text={t('ok')}
+						onPress={onContinue}
+					/>
+				</View>
+			</View>
+			<SafeAreaInset type="bottom" minPadding={16} />
+		</GradientView>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+		paddingHorizontal: 16,
+	},
+	imageContainer: {
+		flexShrink: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		alignSelf: 'center',
+		width: 256,
+		aspectRatio: 1,
+		marginTop: 'auto',
+	},
+	image: {
+		flex: 1,
+		resizeMode: 'contain',
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		marginTop: 'auto',
+		gap: 16,
+	},
+	button: {
+		flex: 1,
+	},
+});
+
+export default memo(UsedUp);

src/sheets/GiftNavigation.tsx

@@ -10,6 +10,7 @@ import BottomSheet from '../components/BottomSheet';
 import ErrorScreen from '../screens/Gift/Error';
 import Loading from '../screens/Gift/Loading';
 import Used from '../screens/Gift/Used';
+import UsedUp from '../screens/Gift/UsedUp';
 import { SheetsParamList } from '../store/types/ui';
 import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
 
@@ -18,6 +19,7 @@ export type GiftNavigationProp = NativeStackNavigationProp<GiftStackParamList>;
 export type GiftStackParamList = {
 	Loading: { code: string; amount: number };
 	Used: { amount: number };
+	UsedUp: undefined;
 	Error: undefined;
 };
 
@@ -45,6 +47,7 @@ const SheetContent = ({
 						initialParams={{ code, amount }}
 					/>
 					<Stack.Screen name="Used" component={Used} />
+					<Stack.Screen name="UsedUp" component={UsedUp} />
 					<Stack.Screen name="Error" component={ErrorScreen} />
 				</Stack.Navigator>
 			</BottomSheetNavigationContainer>

src/utils/i18n/locales/en/other.json

@@ -307,6 +307,17 @@
 			"button": {
 				"string": "OK"
 			}
+		},
+		"used_up": {
+			"title": {
+				"string": "Out of Gifts"
+			},
+			"text": {
+				"string": "Sorry, you're too late! All gifts for this code have already been claimed."
+			},
+			"button": {
+				"string": "OK"
+			}
 		}
 	},
 	"shop": {