122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { getStyles } from './providerDetailsScreen.styles';
|
|
import { Header, CatalogItemRow } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useAppDispatch, useAppSelector } from '../../../hooks/useAppDispatch';
|
|
import { addItem } from '../../../store/cartSlice';
|
|
import { deliveryService } from '../../../services/deliveryService';
|
|
import { CatalogItem } from '../../../interfaces';
|
|
|
|
const CATEGORIES = ['Pizza', 'Sides', 'Beverages'];
|
|
|
|
export const ProviderDetailsScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
const cartItems = useAppSelector((state) => state.cart.items);
|
|
|
|
const [catalog, setCatalog] = useState<CatalogItem[]>([]);
|
|
const [activeCategory, setActiveCategory] = useState(CATEGORIES[0]);
|
|
|
|
useEffect(() => {
|
|
deliveryService.getProviderCatalog('p1').then(setCatalog);
|
|
}, []);
|
|
|
|
const filteredItems = catalog.filter((item) => item.category === activeCategory);
|
|
|
|
const getItemQuantity = (itemId: string) => {
|
|
const item = cartItems.find((i) => i.item.id === itemId);
|
|
return item ? item.quantity : 0;
|
|
};
|
|
|
|
const totalItems = cartItems.reduce((sum, i) => sum + i.quantity, 0);
|
|
const totalPrice = cartItems.reduce(
|
|
(sum, i) => sum + i.item.price * i.quantity,
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Provider Details" onBack={() => {}} />
|
|
<ScrollView style={styles.content}>
|
|
<View style={styles.hero}>
|
|
<View style={styles.heroImage}>
|
|
<Text style={styles.heroEmoji}>🍕</Text>
|
|
</View>
|
|
<Text style={styles.heroName}>Pizza Planet</Text>
|
|
<View style={styles.heroStats}>
|
|
<Text style={styles.heroStat}>⭐ 4.5</Text>
|
|
<Text style={styles.heroStat}>🕐 25 min</Text>
|
|
<Text style={styles.heroStat}>🍕 Italian</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.categoryRow}
|
|
>
|
|
{CATEGORIES.map((cat) => (
|
|
<TouchableOpacity
|
|
key={cat}
|
|
style={[
|
|
styles.categoryTab,
|
|
activeCategory === cat && styles.categoryTabActive,
|
|
]}
|
|
onPress={() => setActiveCategory(cat)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.categoryTabText,
|
|
activeCategory === cat && styles.categoryTabTextActive,
|
|
]}
|
|
>
|
|
{cat}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
|
|
{filteredItems.map((item) => (
|
|
<CatalogItemRow
|
|
key={item.id}
|
|
imageUrl={item.imageUrl}
|
|
title={item.title}
|
|
description={item.description}
|
|
price={item.price}
|
|
quantity={getItemQuantity(item.id)}
|
|
onAdd={() =>
|
|
dispatch(
|
|
addItem({
|
|
providerId: 'p1',
|
|
providerName: 'Pizza Planet',
|
|
item,
|
|
}),
|
|
)
|
|
}
|
|
onRemove={() => {}}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
|
|
{totalItems > 0 && (
|
|
<View style={styles.cartStrip}>
|
|
<Text style={styles.cartStripText}>
|
|
{totalItems} Items | ₹{totalPrice}
|
|
</Text>
|
|
<TouchableOpacity style={styles.viewCartButton} activeOpacity={0.7}>
|
|
<Text style={styles.viewCartText}>View Cart</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|