74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { useTheme } from '@/components/ThemeContext';
|
|
import React, { Dispatch, forwardRef, SetStateAction } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { CreateAdsResponse } from '../lib/types';
|
|
|
|
type StepFourProps = {
|
|
setPayment: Dispatch<SetStateAction<'PAYME' | 'REFFERAL'>>;
|
|
data: CreateAdsResponse | null;
|
|
};
|
|
|
|
const StepFour = forwardRef(({ data }: StepFourProps) => {
|
|
const { isDark } = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const theme = {
|
|
background: isDark ? '#0f172a' : '#ffffff',
|
|
cardBg: isDark ? '#1e293b' : '#f8fafc',
|
|
cardBorder: isDark ? '#334155' : '#e2e8f0',
|
|
text: isDark ? '#f8fafc' : '#0f172a',
|
|
textSecondary: isDark ? '#cbd5e1' : '#64748b',
|
|
totalPrice: isDark ? '#f87171' : '#ef4444',
|
|
};
|
|
|
|
const totalPrice = data?.data.total_price || 0;
|
|
|
|
return (
|
|
<>
|
|
<ScrollView
|
|
contentContainerStyle={[styles.container, { backgroundColor: theme.background }]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Text style={[styles.sectionTitle, { color: theme.text }]}>
|
|
{t("To'lov uchun ma'lumotlar")}
|
|
</Text>
|
|
|
|
<View
|
|
style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.cardBorder }]}
|
|
>
|
|
<Text style={[styles.label, { color: theme.text }]}>
|
|
{t("E'lon nomi")}: <Text style={styles.value}>{data?.data.title}</Text>
|
|
</Text>
|
|
<Text style={[styles.label, { color: theme.text }]}>
|
|
{t("E'lon tavsifi")}: <Text style={styles.value}>{data?.data.description}</Text>
|
|
</Text>
|
|
<Text style={[styles.label, styles.total, { color: theme.totalPrice }]}>
|
|
{t('Umumiy narx')}:{' '}
|
|
<Text style={styles.value}>
|
|
{totalPrice} {t("so'm")}
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default StepFour;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flexGrow: 1 },
|
|
sectionTitle: { fontSize: 18, fontWeight: '700', marginVertical: 12 },
|
|
card: {
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
marginBottom: 20,
|
|
borderWidth: 1,
|
|
gap: 8,
|
|
},
|
|
label: { fontSize: 15, fontWeight: '600' },
|
|
value: { fontWeight: '800' },
|
|
total: { marginTop: 8, fontSize: 16 },
|
|
});
|