116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
|
|
import type { ServicesStackParamList } from '../../../navigation/types';
|
|
import { ScreenShell } from '../../../components';
|
|
import { ServiceGridItem } from '../../home/components/ServiceGridItem';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import { ChequeAnimation } from '../components/ChequeAnimation';
|
|
import { FeatureKey } from '../../../constants/featureKeys';
|
|
import { useEnabledItems } from '../../../features';
|
|
|
|
type Props = NativeStackScreenProps<ServicesStackParamList, 'ChequeServicesHub'>;
|
|
|
|
export default function ChequeServicesHubScreen({ navigation }: Props) {
|
|
const theme = useTheme();
|
|
|
|
const options = useMemo(
|
|
() => [
|
|
{
|
|
id: 'request',
|
|
feature: FeatureKey.SERVICES_CHEQUE_BOOK_REQUEST,
|
|
title: 'Book Request',
|
|
icon: 'book-outline',
|
|
iconColor: theme.colors.info,
|
|
onPress: () => navigation.navigate('ChequeBookRequest'),
|
|
},
|
|
{
|
|
id: 'stop',
|
|
feature: FeatureKey.SERVICES_CHEQUE_STOP_PAYMENT,
|
|
title: 'Stop Payment',
|
|
icon: 'stop-circle-outline',
|
|
iconColor: theme.colors.danger,
|
|
onPress: () => navigation.navigate('StopPayment'),
|
|
},
|
|
{
|
|
/**
|
|
* Its key has always been `services.cheque.positivePay` — a child of
|
|
* this hub — but the only tile pointing at it lived on the
|
|
* service-requests hub. That hub is off, which left the screen
|
|
* reachable by global search alone. This is where it belongs.
|
|
*/
|
|
id: 'positive_pay',
|
|
feature: FeatureKey.SERVICES_CHEQUE_POSITIVE_PAY,
|
|
title: 'Positive Pay',
|
|
icon: 'shield-checkmark-outline',
|
|
iconColor: theme.colors.primary,
|
|
onPress: () => navigation.navigate('PositivePay'),
|
|
},
|
|
{
|
|
id: 'track',
|
|
feature: FeatureKey.SERVICES_CHEQUE_TRACKING,
|
|
title: 'Track Cheques',
|
|
icon: 'git-compare-outline',
|
|
iconColor: theme.colors.success,
|
|
onPress: () => navigation.navigate('ChequeTracking'),
|
|
},
|
|
],
|
|
[navigation, theme]
|
|
);
|
|
|
|
const visibleOptions = useEnabledItems(options);
|
|
|
|
|
|
return (
|
|
<ScreenShell title="Cheque Services" subtitle="Manage all your cheque-related needs">
|
|
{/* Animated cheque illustration */}
|
|
<ChequeAnimation />
|
|
|
|
{/* Quick info strip */}
|
|
<View style={[styles.infoStrip, { backgroundColor: `${theme.colors.primary}08`, borderColor: `${theme.colors.primary}12` }]}>
|
|
<View style={[styles.infoDot, { backgroundColor: theme.colors.accent }]} />
|
|
<Text style={[styles.infoText, { color: theme.colors.textSecondary }]}>
|
|
Request, track, register, or stop cheques — all in one place
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Service grid */}
|
|
<View style={styles.grid}>
|
|
{visibleOptions.map((opt) => (
|
|
<ServiceGridItem key={opt.id} {...opt} />
|
|
))}
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
grid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
paddingTop: 8,
|
|
},
|
|
infoStrip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
marginBottom: 16,
|
|
},
|
|
infoDot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
},
|
|
infoText: {
|
|
fontSize: 12,
|
|
fontFamily: fontFamily.semibold,
|
|
flex: 1,
|
|
lineHeight: 17,
|
|
},
|
|
});
|