269 lines
12 KiB
TypeScript
269 lines
12 KiB
TypeScript
import React, { memo, useState, useMemo } from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Modal } from 'react-native';
|
|
import { Package, IndianRupee, FileText, Download, ArrowLeft, Info, } from 'lucide-react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { useAucitonItemDetail } from '../../../Services/ApiCall/Hooks';
|
|
import ReactNativeBlobUtil from 'react-native-blob-util';
|
|
import { AUCTION_ITEM_DOCUMENT_DOWNLOAD } from '../../../Services/ApiCall/ApiUrls';
|
|
import { Loader } from '../../../Component/Index';
|
|
import { useTheme } from '../../../Hooks/useTheme';
|
|
import AppText from '../../../components/AppText';
|
|
|
|
interface Props { visible: boolean; onClose: () => void; data?: any; }
|
|
|
|
const Section = ({ title, icon: Icon, children, styles, colors }: any) => (
|
|
<View style={styles.sectionCard}>
|
|
<View style={styles.sectionHeader}>
|
|
<View style={styles.iconCircle}>
|
|
<Icon size={18} color={colors.primary} strokeWidth={2.5} />
|
|
</View>
|
|
<AppText variant="caption" bold style={styles.sectionTitle}>{title}</AppText>
|
|
</View>
|
|
{children}
|
|
</View>
|
|
);
|
|
|
|
const PriceTile = ({ label, fig, words, full = false, styles }: any) => (
|
|
<View style={[styles.priceTile, full ? { width: '100%' } : { width: '48%' }]}>
|
|
<AppText variant="caption" color={styles.label.color} bold style={styles.label}>{label}</AppText>
|
|
<AppText variant="h3" bold style={styles.priceFig}>₹{Number(fig).toLocaleString('en-IN')}</AppText>
|
|
<AppText variant="caption" style={styles.priceWords}>{words}</AppText>
|
|
</View>
|
|
);
|
|
|
|
const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
|
const inset = useSafeAreaInsets()
|
|
const { colors, typography } = useTheme();
|
|
const styles = useMemo(() => createStyles(colors, typography), [colors, typography]);
|
|
|
|
const [allBoolean, setAllBoolean] = useState({ fileLoading: false });
|
|
const { data: itemData } = useAucitonItemDetail({ auctionItemId: data?.id });
|
|
|
|
const handleDownload = async (id: number, fileName: string) => {
|
|
try {
|
|
setAllBoolean((prev: any) => ({ ...prev, fileLoading: true }));
|
|
const { dirs } = ReactNativeBlobUtil.fs;
|
|
|
|
const path = `${dirs.DownloadDir}/${fileName}.pdf`;
|
|
|
|
const downloadUrl = `${AUCTION_ITEM_DOCUMENT_DOWNLOAD}?auctionItemId=${id}`;
|
|
|
|
const response = await ReactNativeBlobUtil.config({
|
|
fileCache: false,
|
|
addAndroidDownloads: {
|
|
useDownloadManager: true,
|
|
notification: true,
|
|
path,
|
|
mime: 'application/pdf',
|
|
title: `${fileName}.pdf`,
|
|
description: 'Downloading document',
|
|
mediaScannable: true,
|
|
},
|
|
}).fetch('GET', downloadUrl, {
|
|
Accept: 'application/pdf',
|
|
});
|
|
|
|
const stat = await ReactNativeBlobUtil.fs.stat(path);
|
|
|
|
} catch (error: any) {
|
|
console.log('Error:', error?.message || error);
|
|
} finally {
|
|
setAllBoolean((prev: any) => ({ ...prev, fileLoading: false }));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent={false}
|
|
animationType="none"
|
|
statusBarTranslucent
|
|
onRequestClose={onClose}
|
|
>
|
|
<View style={styles.safeArea}>
|
|
|
|
{/* Navbar */}
|
|
<View style={[styles.header, { paddingTop: inset.top }]}>
|
|
<TouchableOpacity onPress={onClose} style={styles.backBtn}>
|
|
<ArrowLeft size={24} color={colors.text} />
|
|
</TouchableOpacity>
|
|
<View>
|
|
<AppText variant="body" bold style={styles.headerTitle}>Item Information</AppText>
|
|
<AppText variant="caption" style={styles.headerSub}>Detail View</AppText>
|
|
</View>
|
|
</View>
|
|
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Section title="Product Specification" icon={Package} styles={styles} colors={colors}>
|
|
<View style={styles.identityHeader}>
|
|
<AppText variant="h4" bold style={styles.productNameText}>{data?.productName?.toUpperCase()}</AppText>
|
|
<View style={styles.categoryBadge}>
|
|
<AppText variant="caption" bold style={styles.categoryText}>{data?.categoryName}</AppText>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.specGrid}>
|
|
<View style={styles.specItem}>
|
|
<AppText variant="caption" bold style={styles.label}>Sub Category</AppText>
|
|
<AppText variant="bodySmall" bold style={styles.specValue}>{data?.subCategoryName}</AppText>
|
|
</View>
|
|
<View style={styles.specItem}>
|
|
<AppText variant="caption" bold style={styles.label}>Duration</AppText>
|
|
<AppText variant="bodySmall" bold style={styles.specValue}>{data?.timeDurationType}</AppText>
|
|
</View>
|
|
</View>
|
|
</Section>
|
|
|
|
<Section title="Reserve & Bid Values" icon={IndianRupee} styles={styles} colors={colors}>
|
|
<PriceTile
|
|
label="Bidding Price"
|
|
fig={data?.reservePrice || data?.emdAmount}
|
|
words={data?.reservePriceInWords || data?.emdAmountInWords}
|
|
full
|
|
styles={styles}
|
|
/>
|
|
<View style={styles.hDivider} />
|
|
<PriceTile
|
|
label="Auction Start Value"
|
|
fig={data?.reservePrice || data?.auctionStartValueFigure}
|
|
words={data?.reservePriceInWords || data?.auctionStartValueWords}
|
|
full
|
|
styles={styles}
|
|
/>
|
|
<View style={styles.hDivider} />
|
|
</Section>
|
|
|
|
<Section title="Brief Description" icon={Info} styles={styles} colors={colors}>
|
|
<AppText variant="bodySmall" style={styles.descContent}>{data?.briefDescription}</AppText>
|
|
</Section>
|
|
|
|
{itemData?.length && <Section title="View Documents" icon={FileText} styles={styles} colors={colors}>
|
|
<View style={styles.docTableHead}>
|
|
<AppText variant="caption" bold style={styles.tableLabel}>Sr No.</AppText>
|
|
<AppText variant="caption" bold style={[styles.tableLabel, { flex: 2 }]}>Document Name</AppText>
|
|
<AppText variant="caption" bold style={styles.tableLabel}>Action</AppText>
|
|
</View>
|
|
|
|
{itemData?.map((doc: any, index: any) => (
|
|
<TouchableOpacity style={styles.docRow} activeOpacity={0.7} onPress={() => { handleDownload(doc.assetId, doc.fileName) }} key={doc.assetId}>
|
|
<AppText variant="bodySmall" bold style={styles.docIndex}>{index + 1}</AppText>
|
|
<View style={{ flex: 2 }}>
|
|
<AppText variant="bodySmall" bold style={styles.docTitle} numberOfLines={1}>{doc.fileName}</AppText>
|
|
</View>
|
|
<View style={styles.downloadIconBox}>
|
|
{allBoolean.fileLoading ? (
|
|
<View >
|
|
<Loader size='small' color={colors.textSecondary} />
|
|
</View>
|
|
) : (
|
|
<Download size={20} color={colors.primary} />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>))}
|
|
</Section>}
|
|
|
|
</ScrollView>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const createStyles = (colors: any, typography: any) => StyleSheet.create({
|
|
fullModal: { margin: 0, backgroundColor: colors.background },
|
|
safeArea: { flex: 1, backgroundColor: colors.background },
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
backgroundColor: colors.surface,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
backBtn: { padding: 8, marginRight: 8 },
|
|
headerTitle: { fontSize: 18, color: colors.text },
|
|
headerSub: { fontSize: 12, color: colors.textSecondary, textTransform: 'uppercase' },
|
|
|
|
scrollView: { flex: 1 },
|
|
scrollContent: { padding: 16, paddingBottom: 50 },
|
|
|
|
sectionCard: {
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 24,
|
|
padding: 20,
|
|
marginBottom: 16,
|
|
...Platform.select({
|
|
ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.05, shadowRadius: 10 },
|
|
android: { elevation: 3 }
|
|
})
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
marginBottom: 20,
|
|
},
|
|
iconCircle: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.primary + '10',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 14,
|
|
color: colors.text,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
},
|
|
|
|
// Product Identity
|
|
identityHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 },
|
|
productNameText: { fontSize: 20, color: colors.text, flex: 1 },
|
|
categoryBadge: { backgroundColor: colors.border, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
|
|
categoryText: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase' },
|
|
specGrid: { flexDirection: 'row', gap: 24, marginTop: 5 },
|
|
specItem: { flex: 1 },
|
|
specValue: { fontSize: 15, color: colors.text, marginTop: 2 },
|
|
|
|
// Pricing
|
|
priceTile: { marginBottom: 16 },
|
|
label: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase', marginBottom: 4 },
|
|
priceFig: { fontSize: 22, color: colors.text },
|
|
priceWords: { fontSize: 13, color: colors.textSecondary, fontStyle: 'italic', marginTop: 2 },
|
|
hDivider: { height: 1, backgroundColor: colors.border, marginBottom: 16 },
|
|
row: { flexDirection: 'row', justifyContent: 'space-between' },
|
|
|
|
// Description
|
|
descContent: { fontSize: 15, color: colors.textSecondary, lineHeight: 22, fontFamily: typography.fonts.medium },
|
|
|
|
// Table
|
|
docTableHead: { flexDirection: 'row', paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: colors.border, marginBottom: 10 },
|
|
tableLabel: { fontSize: 11, color: colors.textSecondary, flex: 1 },
|
|
docRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.background, padding: 12, borderRadius: 12 },
|
|
docIndex: { flex: 1, fontSize: 14, color: colors.textSecondary },
|
|
docTitle: { fontSize: 14, color: colors.text },
|
|
downloadIconBox: { backgroundColor: colors.surface, padding: 8, borderRadius: 10, borderWidth: 1, borderColor: colors.border },
|
|
|
|
// Footer
|
|
footer: {
|
|
position: 'absolute',
|
|
bottom: 0, width: '100%',
|
|
backgroundColor: colors.surface,
|
|
padding: 20,
|
|
paddingBottom: Platform.OS === 'ios' ? 34 : 20,
|
|
borderTopWidth: 1, borderTopColor: colors.border
|
|
},
|
|
primaryBtn: {
|
|
backgroundColor: colors.primary,
|
|
height: 56, borderRadius: 18,
|
|
flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10
|
|
},
|
|
primaryBtnText: { color: colors.buttonText, fontSize: 16, fontFamily: typography.fonts.bold }
|
|
});
|
|
|
|
export default memo(AuctionItemDetail); |