shafi/freshyo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enh

Browse source
This commit is contained in:
shafi54 2026-02-04 20:50:44 +05:30
parent 02cb713dd1
commit aa7035b77c
8 changed files with 310 additions and 398 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/user-ui/app/(drawer)/(tabs)/home/index.tsx
View file

@ -422,6 +422,7 @@ export default function Dashboard() {
) )
} }
showDeliveryInfo={false} showDeliveryInfo={false}
useAddToCartDialog={true}
miniView={true} miniView={true}
/> />
</View> </View>

97
apps/user-ui/app/(drawer)/(tabs)/home/search-results/index.tsx
View file

@ -1,34 +1,21 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { import { View, Dimensions } from "react-native";
View,
Dimensions,
Image,
Alert,
Platform,
} from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router"; import { useRouter, useLocalSearchParams } from "expo-router";
import { import {
theme,
tw, tw,
useManualRefresh, useManualRefresh,
useMarkDataFetchers, useMarkDataFetchers,
LoadingDialog,
AppContainer,
MyFlatList, MyFlatList,
MyText, MyText,
MyTextInput, SearchBar,
MyTouchableOpacity, } from "common-ui";
SearchBar } from "common-ui";
import dayjs from "dayjs";
import MaterialIcons from "@expo/vector-icons/MaterialIcons"; import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { trpc } from "@/src/trpc-client"; import { trpc } from "@/src/trpc-client";
import { useGetCart, useAddToCart } from '@/hooks/cart-query-hooks';
import ProductCard from "@/components/ProductCard"; import ProductCard from "@/components/ProductCard";
import FloatingCartBar from "@/components/floating-cart-bar"; import FloatingCartBar from "@/components/floating-cart-bar";
const { width: screenWidth } = Dimensions.get("window"); const { width: screenWidth } = Dimensions.get("window");
const itemWidth = (screenWidth - 48) / 2; // 48 = padding horizontal (16*2) + gap (16) const itemWidth = (screenWidth - 48) / 2;
export default function SearchResults() { export default function SearchResults() {
const router = useRouter(); const router = useRouter();
@ -36,29 +23,20 @@ export default function SearchResults() {
const query = (q as string) || ""; const query = (q as string) || "";
const [inputQuery, setInputQuery] = useState(query); const [inputQuery, setInputQuery] = useState(query);
const [searchQuery, setSearchQuery] = useState(query); const [searchQuery, setSearchQuery] = useState(query);
const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
const searchInputRef = useRef<any>(null); const searchInputRef = useRef<any>(null);
useEffect(() => { useEffect(() => {
// Auto-focus search bar on mount
setTimeout(() => { setTimeout(() => {
searchInputRef.current?.focus(); searchInputRef.current?.focus();
}, 100); }, 100);
}, []); }, []);
const { const { data: productsData, isLoading, error, refetch } =
data: productsData, trpc.common.product.getAllProductsSummary.useQuery({
isLoading, searchQuery: searchQuery || undefined,
error, });
refetch,
} = trpc.common.product.getAllProductsSummary.useQuery({
searchQuery: searchQuery || undefined,
});
const { data: cartData, refetch: refetchCart } = useGetCart();
const products = productsData?.products || []; const products = productsData?.products || [];
const addToCart = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true });
useManualRefresh(() => { useManualRefresh(() => {
refetch(); refetch();
@ -68,43 +46,6 @@ export default function SearchResults() {
refetch(); refetch();
}); });
const handleAddToCart = (productId: number) => {
setIsLoadingDialogOpen(true);
addToCart.mutate(
{ productId, quantity: 1 },
{
onSuccess: () => {
Alert.alert("Success", "Item added to cart!");
refetchCart();
},
onError: (error: any) => {
Alert.alert("Error", error.message || "Failed to add item to cart");
},
onSettled: () => {
setIsLoadingDialogOpen(false);
},
}
);
};
const handleBuyNow = (productId: number) => {
setIsLoadingDialogOpen(true);
addToCart.mutate(
{ productId, quantity: 1 },
{
onSuccess: () => {
router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
},
onError: (error: any) => {
Alert.alert("Error", error.message || "Failed to add item to cart");
},
onSettled: () => {
setIsLoadingDialogOpen(false);
},
}
);
};
const handleSearch = () => { const handleSearch = () => {
setSearchQuery(inputQuery); setSearchQuery(inputQuery);
}; };
@ -136,16 +77,18 @@ export default function SearchResults() {
<ProductCard <ProductCard
item={item} item={item}
itemWidth={itemWidth} itemWidth={itemWidth}
onPress={() => router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)} onPress={() =>
router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)
}
showDeliveryInfo={false} showDeliveryInfo={false}
useAddToCartDialog={true}
/> />
)} )}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
columnWrapperStyle={{ gap: 16, justifyContent: 'center' }} columnWrapperStyle={{ gap: 16, justifyContent: "center" }}
contentContainerStyle={[tw`pb-24`, { gap: 16 }]} contentContainerStyle={[tw`pb-24`, { gap: 16 }]}
ListHeaderComponent={ ListHeaderComponent={
<View style={tw`pt-4 pb-2 px-4`}> <View style={tw`pt-4 pb-2 px-4`}>
{/* Search Bar */}
<SearchBar <SearchBar
ref={searchInputRef} ref={searchInputRef}
value={inputQuery} value={inputQuery}
@ -153,21 +96,19 @@ export default function SearchResults() {
onSubmitEditing={handleSearch} onSubmitEditing={handleSearch}
returnKeyType="search" returnKeyType="search"
/> />
{/* Section Title */}
<View style={tw`flex-row justify-between items-center mb-2`}> <View style={tw`flex-row justify-between items-center mb-2`}>
<MyText style={tw`text-lg font-bold text-gray-900`}> <MyText style={tw`text-lg font-bold text-gray-900`}>
{searchQuery ? `Search Results for "${searchQuery}"` : 'All Products'} {searchQuery
? `Search Results for "${searchQuery}"`
: "All Products"}
</MyText> </MyText>
</View> </View>
</View> </View>
} }
/> />
<View style={tw`absolute bottom-2 left-4 right-4`}>
<LoadingDialog open={isLoadingDialogOpen} message="Adding to cart..." />
<View style={tw`absolute bottom-2 left-4 right-4`}>
<FloatingCartBar /> <FloatingCartBar />
</View> </View>
</View> </View>
); );
} }

107
apps/user-ui/app/(drawer)/(tabs)/order-again/index.tsx
View file

@ -1,54 +1,31 @@
import React, { useState } from "react"; import React from "react";
import { import { View, Dimensions, ScrollView } from "react-native";
View,
Dimensions,
Image,
Platform,
Alert,
ScrollView,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient"; import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { import {
theme,
tw, tw,
useManualRefresh, useManualRefresh,
useMarkDataFetchers, useMarkDataFetchers,
LoadingDialog,
AppContainer, AppContainer,
MyFlatList, MyFlatList,
MyText, MyText,
} from "common-ui"; } from "common-ui";
import MaterialIcons from "@expo/vector-icons/MaterialIcons"; import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import ProductCard from "@/components/ProductCard"; import ProductCard from "@/components/ProductCard";
import { trpc } from "@/src/trpc-client"; import { trpc } from "@/src/trpc-client";
import { useGetCart, useAddToCart } from '@/hooks/cart-query-hooks';
import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';
import FloatingCartBar from "@/components/floating-cart-bar"; import FloatingCartBar from "@/components/floating-cart-bar";
import TabLayoutWrapper from "@/components/TabLayoutWrapper"; import TabLayoutWrapper from "@/components/TabLayoutWrapper";
const { width: screenWidth } = Dimensions.get("window"); const { width: screenWidth } = Dimensions.get("window");
const itemWidth = (screenWidth - 48) / 2; // 2 items per row with padding const itemWidth = (screenWidth - 48) / 2;
export default function OrderAgain() { export default function OrderAgain() {
const router = useRouter(); const router = useRouter();
const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
const { const { data: recentProductsData, isLoading, error, refetch } =
data: recentProductsData, trpc.user.order.getRecentlyOrderedProducts.useQuery({
isLoading, limit: 20,
error, });
refetch,
} = trpc.user.order.getRecentlyOrderedProducts.useQuery({
limit: 20,
});
const { data: cartData, refetch: refetchCart } = useGetCart();
const { addToCart = () => {} } = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true }) || {};
const { getQuickestSlot } = useProductSlotIdentifier();
const recentProducts = recentProductsData?.products || []; const recentProducts = recentProductsData?.products || [];
@ -60,37 +37,14 @@ export default function OrderAgain() {
refetch(); refetch();
}); });
const handleAddToCart = (productId: number) => {
const slotId = getQuickestSlot(productId);
if (!slotId) {
Alert.alert("Error", "No available delivery slot for this product");
return;
}
setIsLoadingDialogOpen(true);
addToCart(productId, 1, slotId, () => setIsLoadingDialogOpen(false));
};
const handleBuyNow = (productId: number) => {
const slotId = getQuickestSlot(productId);
if (!slotId) {
Alert.alert("Error", "No available delivery slot for this product");
return;
}
setIsLoadingDialogOpen(true);
addToCart(productId, 1, slotId, () => {
setIsLoadingDialogOpen(false);
router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
});
};
if (isLoading) { if (isLoading) {
return ( return (
<AppContainer> <AppContainer>
<View style={tw`flex-1 justify-center items-center bg-gray-50`}> <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
<MaterialIcons name="refresh" size={48} color="#3B82F6" /> <MaterialIcons name="refresh" size={48} color="#3B82F6" />
<MyText style={tw`text-gray-500 font-medium mt-4`}>Loading your recent orders...</MyText> <MyText style={tw`text-gray-500 font-medium mt-4`}>
Loading your recent orders...
</MyText>
</View> </View>
</AppContainer> </AppContainer>
); );
@ -102,7 +56,9 @@ export default function OrderAgain() {
<View style={tw`flex-1 justify-center items-center bg-gray-50`}> <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
<MaterialIcons name="error-outline" size={48} color="#EF4444" /> <MaterialIcons name="error-outline" size={48} color="#EF4444" />
<MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText> <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
<MyText style={tw`text-gray-500 mt-2`}>Failed to load recent orders</MyText> <MyText style={tw`text-gray-500 mt-2`}>
Failed to load recent orders
</MyText>
</View> </View>
</AppContainer> </AppContainer>
); );
@ -112,7 +68,7 @@ export default function OrderAgain() {
<TabLayoutWrapper> <TabLayoutWrapper>
<ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}> <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
<LinearGradient <LinearGradient
colors={['#194185', '#1570EF']} // brand900 to brand600 colors={["#194185", "#1570EF"]}
start={{ x: 0, y: 0 }} start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }} end={{ x: 1, y: 1 }}
style={tw`pb-8 pt-6 px-5 rounded-b-[32px] shadow-lg mb-4`} style={tw`pb-8 pt-6 px-5 rounded-b-[32px] shadow-lg mb-4`}
@ -123,22 +79,27 @@ export default function OrderAgain() {
<View style={tw`bg-white/20 p-1 rounded-full mr-2`}> <View style={tw`bg-white/20 p-1 rounded-full mr-2`}>
<MaterialIcons name="refresh" size={14} color="#FFF" /> <MaterialIcons name="refresh" size={14} color="#FFF" />
</View> </View>
<MyText style={tw`text-brand100 text-xs font-bold uppercase tracking-widest`}> <MyText
style={tw`text-brand100 text-xs font-bold uppercase tracking-widest`}
>
Order Again Order Again
</MyText> </MyText>
</View> </View>
<MyText style={tw`text-white text-sm font-medium opacity-90 ml-1`} numberOfLines={1}> <MyText
style={tw`text-white text-sm font-medium opacity-90 ml-1`}
numberOfLines={1}
>
Reorder your favorite items quickly Reorder your favorite items quickly
</MyText> </MyText>
</View> </View>
</View> </View>
</LinearGradient> </LinearGradient>
{/* White Section */}
<View style={tw`bg-white`}> <View style={tw`bg-white`}>
{/* Section Title */}
<View style={tw`flex-row items-center mb-2 px-4 pt-4`}> <View style={tw`flex-row items-center mb-2 px-4 pt-4`}>
<MyText style={tw`text-lg font-bold text-gray-900`}>Recently Ordered</MyText> <MyText style={tw`text-lg font-bold text-gray-900`}>
Recently Ordered
</MyText>
</View> </View>
{recentProducts.length === 0 ? ( {recentProducts.length === 0 ? (
@ -152,22 +113,27 @@ export default function OrderAgain() {
No recent orders No recent orders
</MyText> </MyText>
<MyText style={tw`text-gray-500 mt-2 text-center px-8`}> <MyText style={tw`text-gray-500 mt-2 text-center px-8`}>
Items you&apos;ve ordered recently will appear here Items you've ordered recently will appear here
</MyText> </MyText>
</View> </View>
) : ( ) : (
<View style={tw`px-4 pb-4`}> <View style={tw`px-4 pb-4`}>
<View style={tw`flex-row flex-wrap justify-between`}> <View style={tw`flex-row flex-wrap justify-between`}>
{recentProducts.map((item, index) => ( {recentProducts.map((item, index) => (
<View key={item.id} style={tw`mb-4 ${index % 2 === 0 ? 'mr-2' : ''}`}> <View
key={item.id}
style={tw`mb-4 ${index % 2 === 0 ? "mr-2" : ""}`}
>
<ProductCard <ProductCard
item={item} item={item}
// handleAddToCart={handleAddToCart}
// handleBuyNow={handleBuyNow}
itemWidth={itemWidth} itemWidth={itemWidth}
onPress={() => router.push(`/(drawer)/(tabs)/order-again/product-detail/${item.id}`)} onPress={() =>
router.push(
`/(drawer)/(tabs)/order-again/product-detail/${item.id}`
)
}
showDeliveryInfo={false} showDeliveryInfo={false}
// iconType="flash" useAddToCartDialog={true}
/> />
</View> </View>
))} ))}
@ -177,10 +143,9 @@ export default function OrderAgain() {
</View> </View>
</ScrollView> </ScrollView>
<LoadingDialog open={isLoadingDialogOpen} message="Adding to cart..." />
<View style={tw`absolute bottom-2 left-4 right-4`}> <View style={tw`absolute bottom-2 left-4 right-4`}>
<FloatingCartBar /> <FloatingCartBar />
</View> </View>
</TabLayoutWrapper> </TabLayoutWrapper>
); );
} }

146
apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
View file

@ -1,76 +1,44 @@
import React, { useState } from 'react'; import React from "react";
import { View, Dimensions } from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router";
import { import {
View, theme,
Dimensions, tw,
Image, useManualRefresh,
TouchableOpacity, useMarkDataFetchers,
Alert, MyFlatList,
Platform, useDrawerTitle,
} from 'react-native'; MyText,
import { useRouter, useLocalSearchParams } from 'expo-router'; } from "common-ui";
import { theme, tw, useManualRefresh, MyFlatList, useDrawerTitle, useMarkDataFetchers, LoadingDialog, MyText, MyTouchableOpacity } from 'common-ui'; import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import dayjs from 'dayjs'; import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
import MaterialIcons from '@expo/vector-icons/MaterialIcons'; import { trpc } from "@/src/trpc-client";
import FontAwesome5 from '@expo/vector-icons/FontAwesome5'; import ProductCard from "@/components/ProductCard";
import { trpc } from '@/src/trpc-client'; import FloatingCartBar from "@/components/floating-cart-bar";
import { useAddToCart } from '@/hooks/cart-query-hooks';
import ProductCard from '@/components/ProductCard';
import FloatingCartBar from '@/components/floating-cart-bar';
const { width: screenWidth } = Dimensions.get('window');
const itemWidth = (screenWidth - 48) / 2; // 48 = padding horizontal (16*2) + gap (16)
const { width: screenWidth } = Dimensions.get("window");
const itemWidth = (screenWidth - 48) / 2;
export default function StoreDetail() { export default function StoreDetail() {
const router = useRouter(); const router = useRouter();
// const { storeId } = useLocalSearchParams();
const { id: storeId } = useLocalSearchParams(); const { id: storeId } = useLocalSearchParams();
const storeIdNum = parseInt(storeId as string); const storeIdNum = parseInt(storeId as string);
const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
const { data: storeData, isLoading, refetch, error } = trpc.user.stores.getStoreWithProducts.useQuery( const { data: storeData, isLoading, refetch, error } =
{ storeId: storeIdNum }, trpc.user.stores.getStoreWithProducts.useQuery(
{ enabled: !!storeIdNum } { storeId: storeIdNum },
); { enabled: !!storeIdNum }
);
useManualRefresh(() => {
refetch();
});
useMarkDataFetchers(() => { useMarkDataFetchers(() => {
refetch(); refetch();
}); });
useDrawerTitle(storeData?.store?.name || 'Store', [storeData?.store?.name]); useDrawerTitle(storeData?.store?.name || "Store", [storeData?.store?.name]);
const addToCart = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true });
const handleAddToCart = (productId: number) => {
setIsLoadingDialogOpen(true);
addToCart.mutate({ productId, quantity: 1 }, {
onSuccess: () => {
Alert.alert('Success', 'Item added to cart!');
},
onError: (error: any) => {
Alert.alert('Error', error.message || 'Failed to add item to cart');
},
onSettled: () => {
setIsLoadingDialogOpen(false);
},
});
};
const handleBuyNow = (productId: number) => {
setIsLoadingDialogOpen(true);
addToCart.mutate({ productId, quantity: 1 }, {
onSuccess: () => {
router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
},
onError: (error: any) => {
Alert.alert('Error', error.message || 'Failed to add item to cart');
},
onSettled: () => {
setIsLoadingDialogOpen(false);
},
});
};
if (isLoading) { if (isLoading) {
return ( return (
@ -85,51 +53,75 @@ export default function StoreDetail() {
<View style={tw`flex-1 justify-center items-center bg-gray-50`}> <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
<MaterialIcons name="error-outline" size={48} color="#EF4444" /> <MaterialIcons name="error-outline" size={48} color="#EF4444" />
<MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText> <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
<MyText style={tw`text-gray-500 mt-2`}>Store not found or error loading</MyText> <MyText style={tw`text-gray-500 mt-2`}>
Store not found or error loading
</MyText>
</View> </View>
); );
} }
return ( return (
<View style={tw`flex-1 bg-gray-50 relative`}> <View style={tw`flex-1 bg-gray-50 relative`}>
<MyFlatList <MyFlatList
data={storeData?.products || []} data={storeData?.products || []}
numColumns={2} numColumns={2}
renderItem={({ item }) => ( renderItem={({ item }) => (
<ProductCard <ProductCard
item={item} item={item}
itemWidth={itemWidth} itemWidth={itemWidth}
onPress={() => router.push(`/(drawer)/(tabs)/stores/store-detail/product-detail/${item.id}`)} onPress={() =>
showDeliveryInfo={false} router.push(
miniView={true} `/(drawer)/(tabs)/stores/store-detail/product-detail/${item.id}`
/> )
}
showDeliveryInfo={false}
miniView={true}
useAddToCartDialog={true}
/>
)} )}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
columnWrapperStyle={{ gap: 16 }} columnWrapperStyle={{ gap: 16 }}
contentContainerStyle={[tw`px-4 pb-24`, { gap: 16 }]} contentContainerStyle={[tw`px-4 pb-24`, { gap: 16 }]}
ListHeaderComponent={ ListHeaderComponent={
<View style={tw`pt-4 pb-6`}> <View style={tw`pt-4 pb-6`}>
<View style={tw`bg-white p-6 rounded-2xl shadow-sm border border-gray-100 items-center`}> <View
<View style={tw`w-16 h-16 bg-pink-50 rounded-full items-center justify-center mb-4`}> style={tw`bg-white p-6 rounded-2xl shadow-sm border border-gray-100 items-center`}
<FontAwesome5 name="store" size={28} color={theme.colors.brand500} /> >
<View
style={tw`w-16 h-16 bg-pink-50 rounded-full items-center justify-center mb-4`}
>
<FontAwesome5
name="store"
size={28}
color={theme.colors.brand500}
/>
</View> </View>
<MyText style={tw`text-2xl font-bold text-gray-900 text-center mb-2`}>{storeData?.store?.name}</MyText> <MyText
style={tw`text-2xl font-bold text-gray-900 text-center mb-2`}
>
{storeData?.store?.name}
</MyText>
{storeData?.store?.description && ( {storeData?.store?.description && (
<MyText style={tw`text-gray-500 text-center leading-5 px-4`}>{storeData?.store?.description}</MyText> <MyText
style={tw`text-gray-500 text-center leading-5 px-4`}
>
{storeData?.store?.description}
</MyText>
)} )}
</View> </View>
<View style={tw`flex-row items-center mt-6 mb-2`}> <View style={tw`flex-row items-center mt-6 mb-2`}>
<MaterialIcons name="grid-view" size={20} color="#374151" /> <MaterialIcons name="grid-view" size={20} color="#374151" />
<MyText style={tw`text-lg font-bold text-gray-900 ml-2`}>Products from this Store</MyText> <MyText style={tw`text-lg font-bold text-gray-900 ml-2`}>
Products from this Store
</MyText>
</View> </View>
</View> </View>
} }
/> />
<LoadingDialog open={isLoadingDialogOpen} message="Processing..." />
<View style={tw`absolute bottom-2 left-4 right-4`}> <View style={tw`absolute bottom-2 left-4 right-4`}>
<FloatingCartBar /> <FloatingCartBar />
</View> </View>
</View> </View>
); );
} }

2
apps/user-ui/app/_layout.tsx
View file

@ -25,6 +25,7 @@ import UpdateChecker from "@/components/UpdateChecker";
import { RefreshProvider } from "../../../packages/ui/src/lib/refresh-context"; import { RefreshProvider } from "../../../packages/ui/src/lib/refresh-context";
import WebViewWrapper from "@/components/WebViewWrapper"; import WebViewWrapper from "@/components/WebViewWrapper";
import BackHandlerWrapper from "@/components/BackHandler"; import BackHandlerWrapper from "@/components/BackHandler";
import AddToCartDialog from "@/src/components/AddToCartDialog";
import React from "react"; import React from "react";
export default function RootLayout() { export default function RootLayout() {
@ -61,6 +62,7 @@ export default function RootLayout() {
<RefreshProvider queryClient={queryClient}> <RefreshProvider queryClient={queryClient}>
<BackHandlerWrapper /> <BackHandlerWrapper />
<Stack screenOptions={{ headerShown: false }} /> <Stack screenOptions={{ headerShown: false }} />
<AddToCartDialog />
</RefreshProvider> </RefreshProvider>
</LocationTestWrapper> </LocationTestWrapper>
</PaperProvider> </PaperProvider>

301
apps/user-ui/components/QuickDeliveryAddressSelector.tsx
View file

@ -121,174 +121,157 @@ const QuickDeliveryAddressSelector: React.FC<QuickDeliveryAddressSelectorProps>
)} )}
{!isForFlashDelivery && ( {!isForFlashDelivery && (
<View style={tw`flex-1 mr-2`}> <>
<View style={tw`flex-row items-center mb-1`}> <View style={tw`flex-1 flex-row items-center gap-2`}>
<MyTouchableOpacity
onPress={() => router.back()}
style={tw`p-2 -ml-2`}
activeOpacity={0.7}
>
<MaterialIcons name="chevron-left" size={24} />
</MyTouchableOpacity>
<MyText style={[tw`text-lg font-bold ml-2`]}>
Delivery At {getCurrentSlotDisplay()}
</MyText>
</View>
{/* Trigger Component with Separate Chevrons */}
<View style={tw`bg-brand50 border border-brand100 rounded-lg p-3`}>
{/* Regular Delivery Time Section */}
<MyTouchableOpacity <MyTouchableOpacity
onPress={() => setDialogOpen(true)} onPress={() => router.back()}
style={tw`flex-row items-center justify-between mb-2`} style={tw`p-1`}
activeOpacity={0.7} activeOpacity={0.7}
> >
<View style={tw`flex-1`}> <MaterialIcons name="chevron-left" size={24} />
{/* <MyText style={tw`text-xs text-brand500 font-bold uppercase tracking-wider leading-3`}>
Delivery Time
</MyText> */}
<MyText style={tw`text-sm font-bold text-brand900 leading-4`}>
Delivery at: {getCurrentSlotDisplay()}
</MyText>
</View>
<MaterialIcons name="keyboard-arrow-down" size={20} color={theme.colors.brand500} />
</MyTouchableOpacity> </MyTouchableOpacity>
<View style={tw`flex-1 gap-1`}>
<MyTouchableOpacity
onPress={() => setDialogOpen(true)}
style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
activeOpacity={0.7}
>
<View style={tw`flex-1`}>
<MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Delivery Time</MyText>
<MyText style={tw`text-sm font-bold text-brand900`}>
{getCurrentSlotDisplay()}
</MyText>
</View>
<MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
</MyTouchableOpacity>
{/* Address Section */} {/* Address dropdown - temporarily hidden
<MyTouchableOpacity <MyTouchableOpacity
onPress={() => setDialogOpen(true)} onPress={() => setDialogOpen(true)}
style={tw`flex-row items-center justify-between`} style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
activeOpacity={0.7} activeOpacity={0.7}
> >
<View style={tw`flex-1`}> <View style={tw`flex-1`}>
{/* <MyText style={tw`text-xs text-brand500 font-bold uppercase tracking-wider leading-3`}> <MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Address</MyText>
Delivery Address <MyText style={tw`text-sm font-bold text-brand900`} numberOfLines={1}>
</MyText> */} {getCurrentAddressDisplay()}
<MyText style={tw`text-sm font-bold text-brand900 leading-4`} numberOfLines={1}> </MyText>
TO: {getCurrentAddressDisplay()} </View>
</MyText> <MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
</View> </MyTouchableOpacity>
<MaterialIcons name="keyboard-arrow-down" size={20} color={theme.colors.brand500} /> */}
</MyTouchableOpacity>
</View>
{/* Consolidated Dialog - 80% height */}
<BottomDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
>
<View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.8 }]}>
<MyText style={tw`text-xl font-bold text-gray-900 mb-6 text-center`}>
Select Delivery Options
</MyText>
<View style={tw`flex-1`}>
{/* Section 1: Delivery Time Selection */}
<View style={tw`mb-6`}>
<MyText style={tw`text-lg font-bold text-gray-900 mb-3`}>
Select Delivery Time
</MyText>
<ScrollView style={tw`max-h-40`} showsVerticalScrollIndicator={false}>
{isForFlashDelivery ? (
<View style={tw`p-3 bg-green-50 border border-green-200 rounded-lg mb-2`}>
<View style={tw`flex-row items-center`}>
<MaterialIcons name="bolt" size={20} color="#16a34a" />
<MyText style={tw`text-green-800 font-medium ml-2`}>
1 Hr Delivery - within 1 hour
</MyText>
</View>
<MyText style={tw`text-green-700 text-xs mt-1`}>
Selected automatically for flash delivery
</MyText>
</View>
) : (
slotOptions.map(slot => (
<MyTouchableOpacity
key={slot.id}
style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
slot.id === (slotId || earliestSlot?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
}`}
onPress={() => {
onSlotChange?.(slot.id);
setDialogOpen(false);
}}
activeOpacity={0.7}
>
<MyText style={tw`font-medium text-gray-900`}>
Delivery: {slot.deliveryTime}
</MyText>
<MyText style={tw`text-xs text-gray-500 mt-1`}>
Orders Close at: {slot.closeTime}
</MyText>
</MyTouchableOpacity>
))
)}
</ScrollView>
</View>
{/* Divider */}
<View style={tw`h-px bg-gray-200 mb-6`} />
{/* Section 2: Address Selection */}
<View style={tw`flex-1`}>
<MyText style={tw`text-lg font-bold text-gray-900 mb-3`}>
Select Delivery Address
</MyText>
<ScrollView style={tw`flex-1`} showsVerticalScrollIndicator={false}>
{!isAuthenticated ? (
<View style={tw`p-4 bg-red-50 border border-red-200 rounded-lg`}>
<View style={tw`flex-row items-center`}>
<MaterialIcons name="error" size={20} color="#DC2626" />
<MyText style={tw`text-red-800 font-medium ml-2`}>
Authentication Required
</MyText>
</View>
<MyText style={tw`text-red-700 text-sm mt-2`}>
Please log in to select and manage delivery addresses.
</MyText>
</View>
) : addressOptions.length === 0 ? (
<View style={tw`p-4 bg-gray-50 border border-gray-200 rounded-lg`}>
<MyText style={tw`text-gray-600 text-center`}>
No delivery addresses available. Please add an address first.
</MyText>
</View>
) : (
addressOptions.map(address => (
<MyTouchableOpacity
key={address.id}
style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
address.id === (selectedAddressId || defaultAddress?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
}`}
onPress={() => {
setSelectedAddressId(address.id);
setDialogOpen(false);
}}
activeOpacity={0.7}
>
<MyText style={tw`font-medium text-gray-900`}>
{address.name}
</MyText>
<MyText style={tw`text-sm text-gray-600 mt-1`} numberOfLines={2}>
{address.address}
</MyText>
<MyText style={tw`text-xs text-gray-500 mt-1`}>
Phone: {address.phone}
</MyText>
</MyTouchableOpacity>
))
)}
</ScrollView>
</View>
</View> </View>
</View> </View>
</BottomDialog>
</View>
)}
<BottomDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
>
<View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
<MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
Select Delivery Time
</MyText>
<ScrollView showsVerticalScrollIndicator={false}>
{isForFlashDelivery ? (
<View style={tw`p-3 bg-green-50 border border-green-200 rounded-lg mb-2`}>
<View style={tw`flex-row items-center`}>
<MaterialIcons name="bolt" size={20} color="#16a34a" />
<MyText style={tw`text-green-800 font-medium ml-2`}>
1 Hr Delivery - within 1 hour
</MyText>
</View>
<MyText style={tw`text-green-700 text-xs mt-1`}>
Selected automatically for flash delivery
</MyText>
</View>
) : (
slotOptions.map(slot => (
<MyTouchableOpacity
key={slot.id}
style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
slot.id === (slotId || earliestSlot?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
}`}
onPress={() => {
onSlotChange?.(slot.id);
setDialogOpen(false);
}}
activeOpacity={0.7}
>
<MyText style={tw`font-medium text-gray-900`}>
Delivery: {slot.deliveryTime}
</MyText>
<MyText style={tw`text-xs text-gray-500 mt-1`}>
Orders Close at: {slot.closeTime}
</MyText>
</MyTouchableOpacity>
))
)}
</ScrollView>
</View>
</BottomDialog>
{/* Address section - temporarily hidden
<BottomDialog
open={addressDialogOpen}
onClose={() => setAddressDialogOpen(false)}
>
<View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
<MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
Select Delivery Address
</MyText>
<ScrollView showsVerticalScrollIndicator={false}>
{!isAuthenticated ? (
<View style={tw`p-4 bg-red-50 border border-red-200 rounded-lg`}>
<View style={tw`flex-row items-center`}>
<MaterialIcons name="error" size={20} color="#DC2626" />
<MyText style={tw`text-red-800 font-medium ml-2`}>
Authentication Required
</MyText>
</View>
<MyText style={tw`text-red-700 text-sm mt-2`}>
Please log in to select and manage delivery addresses.
</MyText>
</View>
) : addressOptions.length === 0 ? (
<View style={tw`p-4 bg-gray-50 border border-gray-200 rounded-lg`}>
<MyText style={tw`text-gray-600 text-center`}>
No delivery addresses available. Please add an address first.
</MyText>
</View>
) : (
addressOptions.map(address => (
<MyTouchableOpacity
key={address.id}
style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
address.id === (selectedAddressId || defaultAddress?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
}`}
onPress={() => {
setSelectedAddressId(address.id);
setAddressDialogOpen(false);
}}
activeOpacity={0.7}
>
<MyText style={tw`font-medium text-gray-900`}>
{address.name}
</MyText>
<MyText style={tw`text-sm text-gray-600 mt-1`} numberOfLines={2}>
{address.address}
</MyText>
<MyText style={tw`text-xs text-gray-500 mt-1`}>
Phone: {address.phone}
</MyText>
</MyTouchableOpacity>
))
)}
</ScrollView>
</View>
</BottomDialog>
*/}
</>
)}
</> </>
); );
}; };

2
apps/user-ui/components/floating-cart-bar.tsx
View file

@ -162,8 +162,8 @@ useEffect(() => {
<> <>
<MyText style={tw`text-white font-black text-base`}> <MyText style={tw`text-white font-black text-base`}>
₹{totalCartValue} ₹{totalCartValue}
</MyText>
{` • ${itemCount} ${itemCount === 1 ? "Item" : "Items"}`} {` • ${itemCount} ${itemCount === 1 ? "Item" : "Items"}`}
</MyText>
</> </>
)} )}
</MyText> </MyText>

52
apps/user-ui/src/components/AddToCartDialog.tsx
View file

@ -4,7 +4,7 @@ import { tw, BottomDialog, MyText, MyTouchableOpacity, Quantifier } from 'common
import MaterialIcons from '@expo/vector-icons/MaterialIcons'; import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useCartStore } from '@/src/store/cartStore'; import { useCartStore } from '@/src/store/cartStore';
import { trpc } from '@/src/trpc-client'; import { trpc } from '@/src/trpc-client';
import { useAddToCart, useGetCart } from '@/hooks/cart-query-hooks'; import { useAddToCart, useGetCart, useUpdateCartItem } from '@/hooks/cart-query-hooks';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
export default function AddToCartDialog() { export default function AddToCartDialog() {
@ -21,15 +21,26 @@ export default function AddToCartDialog() {
refetchCart: true, refetchCart: true,
}); });
const updateCartItem = useUpdateCartItem({
showSuccessAlert: false,
showErrorAlert: false,
refetchCart: true,
});
const isOpen = !!addedToCartProduct; const isOpen = !!addedToCartProduct;
const product = addedToCartProduct?.product; const product = addedToCartProduct?.product;
// Pre-select cart's slotId if item is already in cart // Pre-select cart's slotId and quantity if item is already in cart
useEffect(() => { useEffect(() => {
if (isOpen && product) { if (isOpen && product) {
const cartItem = cartData?.items?.find((item: any) => item.productId === product.id); const cartItem = cartData?.items?.find((item: any) => item.productId === product.id);
const cartQuantity = cartItem?.quantity || 0;
// Set quantity: 0 → 1, >1 → keep as is
setQuantity(cartQuantity === 0 ? 1 : cartQuantity);
if (cartItem?.slotId) { if (cartItem?.slotId) {
setSelectedSlotId(cartItem.slotId); setSelectedSlotId(cartItem.slotId);
} else { } else {
@ -64,13 +75,25 @@ export default function AddToCartDialog() {
.map((slotId) => slotMap[slotId]) .map((slotId) => slotMap[slotId])
.filter(Boolean); .filter(Boolean);
// Find cart item for this product
const cartItem = cartData?.items?.find((item: any) => item.productId === product?.id);
// Determine if updating existing item (quantity > 1 means it's an update)
const isUpdate = (cartItem?.quantity || 0) > 1;
const handleAddToCart = () => { const handleAddToCart = () => {
const slotId = selectedSlotId ?? availableSlotIds[0] ?? 0; if (isUpdate && cartItem?.id) {
updateCartItem.mutate(
addToCart.mutate( { itemId: cartItem.id, quantity },
{ productId: product.id, quantity, slotId }, { onSuccess: () => clearAddedToCartProduct() }
{ onSuccess: () => clearAddedToCartProduct() } );
); } else {
const slotId = selectedSlotId ?? availableSlotIds[0] ?? 0;
addToCart.mutate(
{ productId: product.id, quantity, slotId },
{ onSuccess: () => clearAddedToCartProduct() }
);
}
}; };
if (!isOpen || !addedToCartProduct) return null; if (!isOpen || !addedToCartProduct) return null;
@ -78,11 +101,16 @@ export default function AddToCartDialog() {
return ( return (
<BottomDialog open={isOpen} onClose={clearAddedToCartProduct}> <BottomDialog open={isOpen} onClose={clearAddedToCartProduct}>
<View style={tw`p-6 max-h-[500px]`}> <View style={tw`p-6 max-h-[500px]`}>
<View style={tw`flex-row items-center mb-6`}> <View style={tw`flex-row items-center mb-2`}>
<View style={tw`w-10 h-10 bg-blue-50 rounded-full items-center justify-center mr-3`}> <View style={tw`w-10 h-10 bg-blue-50 rounded-full items-center justify-center mr-3`}>
<MaterialIcons name="schedule" size={20} color="#3B82F6" /> <MaterialIcons name="schedule" size={20} color="#3B82F6" />
</View> </View>
<MyText style={tw`text-xl font-bold text-gray-900`}>Select Delivery Slot</MyText> <View>
<MyText style={tw`text-xl font-bold text-gray-900`}>Select Delivery Slot</MyText>
{product?.name && (
<MyText style={tw`text-sm text-gray-500`}>{product.name}</MyText>
)}
</View>
</View> </View>
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
@ -124,10 +152,10 @@ export default function AddToCartDialog() {
<MyTouchableOpacity <MyTouchableOpacity
style={tw`flex-1 bg-brand500 py-3.5 rounded-xl items-center ${!selectedSlotId ? 'opacity-50' : ''}`} style={tw`flex-1 bg-brand500 py-3.5 rounded-xl items-center ${!selectedSlotId ? 'opacity-50' : ''}`}
onPress={handleAddToCart} onPress={handleAddToCart}
disabled={addToCart.isLoading || !selectedSlotId} disabled={(addToCart.isLoading || updateCartItem.isLoading) || !selectedSlotId}
> >
<MyText style={tw`text-white font-bold`}> <MyText style={tw`text-white font-bold`}>
{addToCart.isLoading ? 'Adding...' : 'Add to Cart'} {addToCart.isLoading || updateCartItem.isLoading ? (isUpdate ? 'Updating...' : 'Adding...') : (isUpdate ? 'Update Item' : 'Add to Cart')}
</MyText> </MyText>
</MyTouchableOpacity> </MyTouchableOpacity>
<MyTouchableOpacity <MyTouchableOpacity