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-03-11 16:31:23 +05:30
parent aa900db3e1
commit ca9eb8a7d2
34 changed files with 863 additions and 901 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
APIS_TO_REMOVE.md Normal file
View file

@ -0,0 +1,4 @@
- trpc.user.tags.getTagsByStore — apps/backend/src/trpc/apis/user-apis/apis/tags.ts
- trpc.common.product.getAllProductsSummary — apps/backend/src/trpc/apis/common-apis/common.ts
- remove slots from products cache
- remove redundant product details like name, description etc from the slots api

2
apps/backend/.env
View file

@ -21,7 +21,7 @@ S3_BUCKET_NAME=meatfarmer
EXPO_ACCESS_TOKEN=Asvpy8cByRh6T4ksnWScO6PLcio2n35-BwES5zK-
JWT_SECRET=my_meatfarmer_jwt_secret_key
ASSETS_DOMAIN=https://assets.freshyo.in/
API_CACHE_KEY='api-cache'
API_CACHE_KEY=api-cache-dev
# REDIS_URL=redis://default:redis_shafi_password@5.223.55.14:6379
REDIS_URL=redis://default:redis_shafi_password@57.128.212.174:6379
APP_URL=http://localhost:4000

2
apps/backend/assets/signed-url-cache.json
View file

File diff suppressed because one or more lines are too long

58
apps/backend/src/lib/cloud_cache.ts
View file

@ -2,8 +2,13 @@ import { scaffoldProducts } from '@/src/trpc/apis/common-apis/common'
import { scaffoldEssentialConsts } from '@/src/trpc/apis/common-apis/common-trpc-index'
import { scaffoldStores } from '@/src/trpc/apis/user-apis/apis/stores'
import { scaffoldSlotsWithProducts } from '@/src/trpc/apis/user-apis/apis/slots'
import { scaffoldBanners } from '@/src/trpc/apis/user-apis/apis/banners'
import { scaffoldStoreWithProducts } from '@/src/trpc/apis/user-apis/apis/stores'
import { storeInfo } from '@/src/db/schema'
import { db } from '@/src/db/db_index'
import { imageUploadS3 } from '@/src/lib/s3-client'
import { apiCacheKey } from '@/src/lib/env-exporter'
import { CACHE_FILENAMES } from '@packages/shared'
export async function createProductsFile(): Promise<string> {
// Get products data from the API method
@ -16,7 +21,7 @@ export async function createProductsFile(): Promise<string> {
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/products.json`)
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/${CACHE_FILENAMES.products}`)
return s3Key
}
@ -32,7 +37,7 @@ export async function createEssentialConstsFile(): Promise<string> {
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/essential-consts.json`)
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/${CACHE_FILENAMES.essentialConsts}`)
return s3Key
}
@ -48,7 +53,7 @@ export async function createStoresFile(): Promise<string> {
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/stores.json`)
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/${CACHE_FILENAMES.stores}`)
return s3Key
}
@ -64,7 +69,52 @@ export async function createSlotsFile(): Promise<string> {
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/slots.json`)
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/${CACHE_FILENAMES.slots}`)
return s3Key
}
export async function createBannersFile(): Promise<string> {
// Get banners data from the API method
const bannersData = await scaffoldBanners()
// Convert to JSON string with pretty formatting
const jsonContent = JSON.stringify(bannersData, null, 2)
// Convert to Buffer for S3 upload
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/${CACHE_FILENAMES.banners}`)
return s3Key
}
export async function createStoreFile(storeId: number): Promise<string> {
// Get store data from the API method
const storeData = await scaffoldStoreWithProducts(storeId)
// Convert to JSON string with pretty formatting
const jsonContent = JSON.stringify(storeData, null, 2)
// Convert to Buffer for S3 upload
const buffer = Buffer.from(jsonContent, 'utf-8')
// Upload to S3 at the specified path using apiCacheKey
const s3Key = await imageUploadS3(buffer, 'application/json', `${apiCacheKey}/stores/${storeId}.json`)
return s3Key
}
export async function createAllStoresFiles(): Promise<string[]> {
// Fetch all store IDs from database
const stores = await db.select({ id: storeInfo.id }).from(storeInfo)
// Create cache files for all stores in parallel
const results = await Promise.all(
stores.map(store => createStoreFile(store.id))
)
console.log(`Created ${results.length} store cache files`)
return results
}

4
apps/backend/src/lib/init.ts
View file

@ -3,7 +3,7 @@ import { initializeAllStores } from '@/src/stores/store-initializer'
import { initializeUserNegativityStore } from '@/src/stores/user-negativity-store'
import { startOrderHandler, startCancellationHandler, publishOrder } from '@/src/lib/post-order-handler'
import { deleteOrders } from '@/src/lib/delete-orders'
import { createProductsFile, createEssentialConstsFile, createStoresFile, createSlotsFile } from '@/src/lib/cloud_cache'
import { createProductsFile, createEssentialConstsFile, createStoresFile, createSlotsFile, createBannersFile, createAllStoresFiles } from '@/src/lib/cloud_cache'
/**
* Initialize all application services
@ -32,6 +32,8 @@ export const initFunc = async (): Promise<void> => {
createEssentialConstsFile(),
createStoresFile(),
createSlotsFile(),
createBannersFile(),
createAllStoresFiles(),
]);
console.log('Cache files created successfully');

48
apps/backend/src/trpc/apis/user-apis/apis/banners.ts
View file

@ -1,38 +1,30 @@
import { db } from '@/src/db/db_index';
import { homeBanners } from '@/src/db/schema';
import { publicProcedure, router } from '@/src/trpc/trpc-index';
import { generateSignedUrlFromS3Url } from '@/src/lib/s3-client';
import { scaffoldAssetUrl } from '@/src/lib/s3-client';
import { isNotNull, asc } from 'drizzle-orm';
export async function scaffoldBanners() {
const banners = await db.query.homeBanners.findMany({
where: isNotNull(homeBanners.serialNum), // Only show assigned banners
orderBy: asc(homeBanners.serialNum), // Order by slot number 1-4
});
// Convert S3 keys to signed URLs for client
const bannersWithSignedUrls = banners.map((banner) => ({
...banner,
imageUrl: banner.imageUrl ? scaffoldAssetUrl(banner.imageUrl) : banner.imageUrl,
}));
return {
banners: bannersWithSignedUrls,
};
}
export const bannerRouter = router({
getBanners: publicProcedure
.query(async () => {
const banners = await db.query.homeBanners.findMany({
where: isNotNull(homeBanners.serialNum), // Only show assigned banners
orderBy: asc(homeBanners.serialNum), // Order by slot number 1-4
});
// Convert S3 keys to signed URLs for client
const bannersWithSignedUrls = await Promise.all(
banners.map(async (banner) => {
try {
return {
...banner,
imageUrl: banner.imageUrl ? await generateSignedUrlFromS3Url(banner.imageUrl) : banner.imageUrl,
};
} catch (error) {
console.error(`Failed to generate signed URL for banner ${banner.id}:`, error);
return {
...banner,
imageUrl: banner.imageUrl, // Keep original on error
};
}
})
);
return {
banners: bannersWithSignedUrls,
};
const response = await scaffoldBanners();
return response;
}),
});

19
apps/backend/src/trpc/apis/user-apis/apis/slots.ts
View file

@ -43,8 +43,27 @@ export async function scaffoldSlotsWithProducts() {
})
.sort((a, b) => dayjs(a.deliveryTime).valueOf() - dayjs(b.deliveryTime).valueOf());
// Fetch all products for availability info
const allProducts = await db
.select({
id: productInfo.id,
name: productInfo.name,
isOutOfStock: productInfo.isOutOfStock,
isFlashAvailable: productInfo.isFlashAvailable,
})
.from(productInfo)
.where(eq(productInfo.isSuspended, false));
const productAvailability = allProducts.map(product => ({
id: product.id,
name: product.name,
isOutOfStock: product.isOutOfStock,
isFlashAvailable: product.isFlashAvailable,
}));
return {
slots: validSlots,
productAvailability,
count: validSlots.length,
};
}

144
apps/backend/src/trpc/apis/user-apis/apis/stores.ts
View file

@ -5,6 +5,7 @@ import { storeInfo, productInfo, units } from '@/src/db/schema';
import { eq, and, sql } from 'drizzle-orm';
import { scaffoldAssetUrl } from '@/src/lib/s3-client';
import { ApiError } from '@/src/lib/api-error';
import { getTagsByStoreId } from '@/src/stores/product-tag-store';
export async function scaffoldStores() {
const storesData = await db
@ -66,6 +67,82 @@ export async function scaffoldStores() {
};
}
export async function scaffoldStoreWithProducts(storeId: number) {
// Fetch store info
const storeData = await db.query.storeInfo.findFirst({
where: eq(storeInfo.id, storeId),
columns: {
id: true,
name: true,
description: true,
imageUrl: true,
},
});
if (!storeData) {
throw new ApiError('Store not found', 404);
}
// Generate signed URL for store image
const signedImageUrl = storeData.imageUrl ? scaffoldAssetUrl(storeData.imageUrl) : null;
// Fetch products for this store
const productsData = await db
.select({
id: productInfo.id,
name: productInfo.name,
shortDescription: productInfo.shortDescription,
price: productInfo.price,
marketPrice: productInfo.marketPrice,
images: productInfo.images,
isOutOfStock: productInfo.isOutOfStock,
incrementStep: productInfo.incrementStep,
unitShortNotation: units.shortNotation,
unitNotation: units.shortNotation,
productQuantity: productInfo.productQuantity,
})
.from(productInfo)
.innerJoin(units, eq(productInfo.unitId, units.id))
.where(and(eq(productInfo.storeId, storeId), eq(productInfo.isSuspended, false)));
// Generate signed URLs for product images
const productsWithSignedUrls = await Promise.all(
productsData.map(async (product) => ({
id: product.id,
name: product.name,
shortDescription: product.shortDescription,
price: product.price,
marketPrice: product.marketPrice,
incrementStep: product.incrementStep,
unit: product.unitShortNotation,
unitNotation: product.unitNotation,
images: scaffoldAssetUrl((product.images as string[]) || []),
isOutOfStock: product.isOutOfStock,
productQuantity: product.productQuantity
}))
);
const tags = await getTagsByStoreId(storeId);
return {
store: {
id: storeData.id,
name: storeData.name,
description: storeData.description,
signedImageUrl,
},
products: productsWithSignedUrls,
tags: tags.map(tag => ({
id: tag.id,
tagName: tag.tagName,
tagDescription: tag.tagDescription,
imageUrl: tag.imageUrl,
productIds: tag.productIds,
})),
};
}
export const storesRouter = router({
getStores: publicProcedure
.query(async () => {
@ -79,70 +156,7 @@ export const storesRouter = router({
}))
.query(async ({ input }) => {
const { storeId } = input;
// Fetch store info
const storeData = await db.query.storeInfo.findFirst({
where: eq(storeInfo.id, storeId),
columns: {
id: true,
name: true,
description: true,
imageUrl: true,
},
});
if (!storeData) {
throw new ApiError('Store not found', 404);
}
// Generate signed URL for store image
const signedImageUrl = storeData.imageUrl ? scaffoldAssetUrl(storeData.imageUrl) : null;
// Fetch products for this store
const productsData = await db
.select({
id: productInfo.id,
name: productInfo.name,
shortDescription: productInfo.shortDescription,
price: productInfo.price,
marketPrice: productInfo.marketPrice,
images: productInfo.images,
isOutOfStock: productInfo.isOutOfStock,
incrementStep: productInfo.incrementStep,
unitShortNotation: units.shortNotation,
unitNotation: units.shortNotation,
productQuantity: productInfo.productQuantity,
})
.from(productInfo)
.innerJoin(units, eq(productInfo.unitId, units.id))
.where(and(eq(productInfo.storeId, storeId), eq(productInfo.isSuspended, false)));
// Generate signed URLs for product images
const productsWithSignedUrls = await Promise.all(
productsData.map(async (product) => ({
id: product.id,
name: product.name,
shortDescription: product.shortDescription,
price: product.price,
marketPrice: product.marketPrice,
incrementStep: product.incrementStep,
unit: product.unitShortNotation,
unitNotation: product.unitNotation,
images: scaffoldAssetUrl((product.images as string[]) || []),
isOutOfStock: product.isOutOfStock,
productQuantity: product.productQuantity
}))
);
return {
store: {
id: storeData.id,
name: storeData.name,
description: storeData.description,
signedImageUrl,
},
products: productsWithSignedUrls,
};
const response = await scaffoldStoreWithProducts(storeId);
return response;
}),
});

5
apps/backend/src/trpc/router.ts
View file

@ -4,9 +4,10 @@ import { adminRouter } from '@/src/trpc/apis/admin-apis/apis/admin-trpc-index'
import { userRouter } from '@/src/trpc/apis/user-apis/apis/user-trpc-index'
import { commonApiRouter } from '@/src/trpc/apis/common-apis/common-trpc-index'
import { scaffoldProducts } from './apis/common-apis/common';
import { scaffoldStores } from './apis/user-apis/apis/stores';
import { scaffoldStores, scaffoldStoreWithProducts } from './apis/user-apis/apis/stores';
import { scaffoldSlotsWithProducts } from './apis/user-apis/apis/slots';
import { scaffoldEssentialConsts } from './apis/common-apis/common-trpc-index';
import { scaffoldBanners } from './apis/user-apis/apis/banners';
// Create the main app router
export const appRouter = router({
@ -28,3 +29,5 @@ export type AllProductsApiType = Awaited<ReturnType<typeof scaffoldProducts>>;
export type StoresApiType = Awaited<ReturnType<typeof scaffoldStores>>;
export type SlotsApiType = Awaited<ReturnType<typeof scaffoldSlotsWithProducts>>;
export type EssentialConstsApiType = Awaited<ReturnType<typeof scaffoldEssentialConsts>>;
export type BannersApiType = Awaited<ReturnType<typeof scaffoldBanners>>;
export type StoreWithProductsApiType = Awaited<ReturnType<typeof scaffoldStoreWithProducts>>;

4
apps/backend/tsconfig.json
View file

@ -33,6 +33,8 @@
"shared-types": ["../shared-types"],
"@commonTypes": ["../../packages/ui/shared-types"],
"@commonTypes/*": ["../../packages/ui/shared-types/*"],
"@packages/shared": ["../../packages/shared"],
"@packages/shared/*": ["../../packages/shared/*"]
},
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [""], /* Specify multiple folders that act like './node_modules/@types'. */
@ -116,6 +118,6 @@
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
},
"include": ["src", "types", "index.ts", "../shared-types"]
"include": ["src", "types", "index.ts", "../shared-types", "../../packages/shared"]
}

9
apps/user-ui/app/(drawer)/(tabs)/me/delivery-slots/_layout.tsx
View file

@ -1,9 +0,0 @@
import { Stack } from 'expo-router'
function DeliverySlotsLayout() {
return (
<Stack screenOptions={{ headerShown: true, title: 'Delivery Slots' }} />
)
}
export default DeliverySlotsLayout

230
apps/user-ui/app/(drawer)/(tabs)/me/delivery-slots/index.tsx
View file

@ -1,230 +0,0 @@
import React, { useState } from 'react';
import { View, ScrollView } from 'react-native';
import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import { MyFlatList, MyText, tw, useMarkDataFetchers, BottomDialog, theme, MyTouchableOpacity } from 'common-ui';
import { trpc } from '@/src/trpc-client';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import dayjs from 'dayjs';
export default function DeliverySlots() {
const router = useRouter();
const { data, isLoading, error, refetch } = trpc.user.slots.getSlotsWithProducts.useQuery();
const [selectedSlotForDialog, setSelectedSlotForDialog] = useState<any>(null);
useMarkDataFetchers(() => {
refetch();
});
if (isLoading) {
return (
<MyFlatList
data={[]}
renderItem={() => null}
ListHeaderComponent={() => (
<View style={tw`flex-1 justify-center items-center p-8`}>
<MyText style={tw`text-gray-600`}>Loading delivery slots...</MyText>
</View>
)}
/>
);
}
if (error) {
return (
<MyFlatList
data={[]}
renderItem={() => null}
ListHeaderComponent={() => (
<View style={tw`flex-1 justify-center items-center p-8`}>
<MyText style={tw`text-red-600`}>Error loading delivery slots</MyText>
<MyTouchableOpacity
onPress={() => refetch()}
style={tw`mt-4 bg-blue-500 px-4 py-2 rounded-lg`}
>
<MyText style={tw`text-white font-semibold`}>Retry</MyText>
</MyTouchableOpacity>
</View>
)}
/>
);
}
const slots = data?.slots || [];
if (slots.length === 0) {
return (
<MyFlatList
data={[]}
renderItem={() => null}
ListHeaderComponent={() => (
<View style={tw`flex-1 justify-center items-center p-8`}>
<MaterialIcons name="schedule" size={64} color="#D1D5DB" />
<MyText style={tw`text-gray-500 text-center mt-4 text-lg`}>
No upcoming delivery slots available
</MyText>
<MyText style={tw`text-gray-400 text-center mt-2`}>
Check back later for new delivery schedules
</MyText>
</View>
)}
/>
);
}
return (
<>
<MyFlatList
data={slots}
keyExtractor={(item) => item.id.toString()}
// ListHeaderComponent={() => (
// <View style={tw`p-4 pb-2`}>
// <MyText style={tw`text-2xl font-bold text-gray-800`}>Delivery Slots</MyText>
// <MyText style={tw`text-gray-600 mt-1`}>
// Choose your preferred delivery time
// </MyText>
// </View>
// )}
renderItem={({ item: slot }) => (
<View style={tw`mx-4 mb-4 bg-white rounded-xl shadow-md overflow-hidden`}>
{/* Slot Header */}
<View style={tw`bg-pink-50 p-4 border-b border-pink-100`}>
<View style={tw`flex-row items-center justify-between`}>
<View>
<MyText style={tw`text-lg font-bold text-gray-800`}>
{dayjs(slot.deliveryTime).format('ddd DD MMM, h:mm a')}
</MyText>
<MyText style={tw`text-sm text-gray-600 mt-1`}>
Orders close by: {dayjs(slot.freezeTime).format('h:mm a')}
</MyText>
</View>
<View style={tw`flex-row items-center`}>
<View style={tw`bg-pink-500 px-3 py-1 rounded-full mr-3`}>
<MyText style={tw`text-white text-sm font-semibold`}>
{slot.products.length} items
</MyText>
</View>
<MyTouchableOpacity
onPress={() => router.push(`/(drawer)/(tabs)/home/cart?slot=${slot.id}`)}
style={tw`bg-pink-500 p-2 rounded-full`}
>
<MaterialIcons name="flash-on" size={16} color="white" />
</MyTouchableOpacity>
</View>
</View>
</View>
{/* Products List */}
<View style={tw`p-4`}>
<MyText style={tw`text-base font-semibold text-gray-700 mb-3`}>
Available Products
</MyText>
<View style={tw`space-y-2`}>
{slot.products.slice(0, 2).map((product) => (
<MyTouchableOpacity
key={product.id}
onPress={() => router.push(`/(drawer)/(tabs)/home/product-detail/${product.id}`)}
style={tw`bg-gray-50 rounded-lg p-3 flex-row items-center`}
>
{product.images && product.images.length > 0 ? (
<Image
source={{ uri: product.images[0] }}
style={tw`w-8 h-8 rounded mr-3`}
resizeMode="cover"
/>
) : (
<View style={tw`w-8 h-8 bg-gray-200 rounded mr-3 justify-center items-center`}>
<MaterialIcons name="image" size={16} color="#9CA3AF" />
</View>
)}
<View style={tw`flex-1`}>
<MyText style={tw`text-sm font-medium text-gray-800`} numberOfLines={1}>
{product.name}
</MyText>
<MyText style={tw`text-xs text-gray-600`}>
₹{product.price} {product.unit && `per ${product.unit}`}
</MyText>
</View>
{product.isOutOfStock && (
<MyText style={tw`text-xs text-red-500 font-medium`}>Out of stock</MyText>
)}
</MyTouchableOpacity>
))}
{slot.products.length > 2 && (
<MyTouchableOpacity
onPress={() => setSelectedSlotForDialog(slot)}
style={tw`bg-pink-50 rounded-lg p-3 flex-row items-center justify-center border border-pink-200`}
>
<MyText style={tw`text-sm font-medium text-pink-700`}>
+{slot.products.length - 2} more products
</MyText>
<MaterialIcons name="chevron-right" size={16} color={theme.colors.brand500} style={tw`ml-1`} />
</MyTouchableOpacity>
)}
</View>
</View>
</View>
)}
ListFooterComponent={() => <View style={tw`h-4`} />}
showsVerticalScrollIndicator={false}
contentContainerStyle={tw`pt-2`}
/>
{/* Products Dialog */}
<BottomDialog
open={!!selectedSlotForDialog}
onClose={() => setSelectedSlotForDialog(null)}
>
<View style={tw`p-6`}>
<MyText style={tw`text-xl font-bold text-gray-800 mb-4`}>
All Products - {dayjs(selectedSlotForDialog?.deliveryTime).format('ddd DD MMM, h:mm a')}
</MyText>
<ScrollView style={tw`max-h-96`} showsVerticalScrollIndicator={false}>
<View style={tw`space-y-3`}>
{selectedSlotForDialog?.products.map((product: any) => (
<MyTouchableOpacity
key={product.id}
onPress={() => {
setSelectedSlotForDialog(null);
router.push(`/(drawer)/(tabs)/home/product-detail/${product.id}`);
}}
style={tw`bg-gray-50 rounded-lg p-4 flex-row items-center`}
>
{product.images && product.images.length > 0 ? (
<Image
source={{ uri: product.images[0] }}
style={tw`w-12 h-12 rounded mr-4`}
resizeMode="cover"
/>
) : (
<View style={tw`w-12 h-12 bg-gray-200 rounded mr-4 justify-center items-center`}>
<MaterialIcons name="image" size={20} color="#9CA3AF" />
</View>
)}
<View style={tw`flex-1`}>
<MyText style={tw`text-base font-medium text-gray-800`} numberOfLines={1}>
{product.name}
</MyText>
<MyText style={tw`text-sm text-gray-600 mt-1`}>
₹{product.price} {product.unit && `per ${product.unit}`}
</MyText>
{product.marketPrice && (
<MyText style={tw`text-sm text-gray-500 line-through`}>
₹{product.marketPrice}
</MyText>
)}
</View>
{product.isOutOfStock && (
<MyText style={tw`text-xs text-red-500 font-medium`}>Out of stock</MyText>
)}
</MyTouchableOpacity>
))}
</View>
</ScrollView>
</View>
</BottomDialog>
</>
);
}

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

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import { View, Dimensions, ScrollView, TouchableOpacity } from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router";
import { Image } from 'expo-image';
@ -13,10 +13,10 @@ import {
} from "common-ui";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
import { trpc } from "@/src/trpc-client";
import ProductCard from "@/components/ProductCard";
import FloatingCartBar from "@/components/floating-cart-bar";
import { useStoreHeaderStore } from "@/src/store/storeHeaderStore";
import { useAllProducts, useStoreWithProducts } from "@/src/hooks/prominent-api-hooks";
const { width: screenWidth } = Dimensions.get("window");
const itemWidth = (screenWidth - 48) / 2;
@ -63,24 +63,32 @@ export default function StoreDetail() {
const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
const { data: storeData, isLoading, refetch, error } =
trpc.user.stores.getStoreWithProducts.useQuery(
{ storeId: storeIdNum },
{ enabled: !!storeIdNum }
);
useStoreWithProducts(storeIdNum);
const { data: tagsData, isLoading: isLoadingTags } =
trpc.user.tags.getTagsByStore.useQuery(
{ storeId: storeIdNum },
{ enabled: !!storeIdNum }
);
const { data: productsData, isLoading: isProductsLoading } = useAllProducts();
const productById = useMemo(() => {
const map = new Map<number, any>();
productsData?.products?.forEach((product) => {
map.set(product.id, product);
});
return map;
}, [productsData]);
const storeProducts = useMemo(() => {
if (!storeData?.products) return [];
return storeData.products
.map((product) => productById.get(product.id))
.filter(Boolean);
}, [storeData, productById]);
// Filter products based on selected tag
const filteredProducts = selectedTagId
? storeData?.products.filter(product => {
const selectedTag = tagsData?.tags.find(t => t.id === selectedTagId);
? storeProducts.filter(product => {
const selectedTag = storeData?.tags.find(t => t.id === selectedTagId);
return selectedTag?.productIds?.includes(product.id) ?? false;
}) || []
: storeData?.products || [];
})
: storeProducts;
// Set the store header title
const setStoreHeaderTitle = useStoreHeaderStore((state) => state.setTitle);
@ -98,10 +106,12 @@ export default function StoreDetail() {
useDrawerTitle(storeData?.store?.name || "Store", [storeData?.store?.name]);
if (isLoading) {
if (isLoading || isProductsLoading) {
return (
<View style={tw`flex-1 justify-center items-center bg-gray-50`}>
<MyText style={tw`text-gray-500 font-medium`}>Loading store...</MyText>
<MyText style={tw`text-gray-500 font-medium`}>
{isLoading ? 'Loading store...' : 'Loading products...'}
</MyText>
</View>
);
}
@ -184,13 +194,13 @@ export default function StoreDetail() {
)}
</View>
{/* Tags Section */}
{tagsData && tagsData.tags.length > 0 && (
{storeData?.tags && storeData.tags.length > 0 && (
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={tw`gap-2 mt-6`}
>
{tagsData.tags.map((tag) => (
{storeData.tags.map((tag) => (
<Chip
key={tag.id}
tag={tag}
@ -206,7 +216,7 @@ export default function StoreDetail() {
<MaterialIcons name="grid-view" size={20} color="#374151" />
<MyText style={tw`text-lg font-bold text-gray-900 ml-2`}>
{selectedTagId
? `${tagsData?.tags.find(t => t.id === selectedTagId)?.tagName} items`
? `${storeData?.tags.find(t => t.id === selectedTagId)?.tagName} items`
: `${filteredProducts.length} products`}
</MyText>
</View>

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

@ -22,6 +22,7 @@ import LocationTestWrapper from "@/components/LocationTestWrapper";
import HealthTestWrapper from "@/components/HealthTestWrapper";
import FirstUserWrapper from "@/components/FirstUserWrapper";
import UpdateChecker from "@/components/UpdateChecker";
import CentralStoreInitializer from "@/src/components/CentralStoreInitializer";
import { RefreshProvider } from "../../../packages/ui/src/lib/refresh-context";
import WebViewWrapper from "@/components/WebViewWrapper";
import BackHandlerWrapper from "@/components/BackHandler";
@ -68,10 +69,12 @@ export default function RootLayout() {
<PaperProvider>
<LocationTestWrapper>
<RefreshProvider queryClient={queryClient}>
<CentralStoreInitializer>
<BackHandlerWrapper />
<Stack screenOptions={{ headerShown: false }} />
<AddToCartDialog />
</RefreshProvider>
</CentralStoreInitializer>
</RefreshProvider>
</LocationTestWrapper>
</PaperProvider>
</NotificationProvider>

8
apps/user-ui/components/BannerCarousel.tsx
View file

@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import { View, Dimensions, Image, ScrollView, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
import { MyTouchableOpacity, MyText, tw } from 'common-ui';
import { useRouter } from 'expo-router';
import { trpc } from '@/src/trpc-client';
import { useBanners } from '@/src/hooks/prominent-api-hooks';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
const { width: screenWidth } = Dimensions.get('window');
@ -25,7 +25,7 @@ export default function BannerCarousel() {
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
// Fetch banners data
const { data: bannersData, isLoading, error } = trpc.user.banner.getBanners.useQuery();
const { data: bannersData, isLoading, error } = useBanners();
const banners = bannersData?.banners || [];
@ -123,7 +123,7 @@ export default function BannerCarousel() {
{/* Pagination Dots */}
{banners.length > 1 && (
<View style={tw`flex-row justify-center mt-3`}>
{banners.map((_, index: number) => (
{banners.map((_: Banner, index: number) => (
<MyTouchableOpacity
key={index}
onPress={() => goToSlide(index)}
@ -140,4 +140,4 @@ export default function BannerCarousel() {
)}
</View>
);
}
}

17
apps/user-ui/components/PaymentAndOrderComponent.tsx
View file

@ -6,7 +6,7 @@ import MaterialIcons from '@expo/vector-icons/MaterialIcons';
// import RazorpayCheckout from 'react-native-razorpay';
import { trpc } from '@/src/trpc-client';
import { useAllProducts } from '@/src/hooks/prominent-api-hooks';
import { useCentralProductStore } from '@/src/store/centralProductStore';
import { clearLocalCart } from '@/hooks/cart-query-hooks';
import { useQueryClient } from '@tanstack/react-query';
import { FontAwesome5, FontAwesome6 } from '@expo/vector-icons';
@ -55,17 +55,18 @@ const PaymentAndOrderComponent: React.FC<PaymentAndOrderProps> = ({
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
};
const { data: productsData } = useAllProducts();
const products = useCentralProductStore((state) => state.products);
const productsById = useCentralProductStore((state) => state.productsById);
// Memoized flash-eligible product IDs
const flashEligibleProductIds = useMemo(() => {
if (!productsData?.products) return new Set<number>();
if (!products.length) return new Set<number>();
return new Set(
productsData.products
.filter((product: any) => product.isFlashAvailable)
.map((product: any) => product.id)
products
.filter((product) => product.isFlashAvailable)
.map((product) => product.id)
);
}, [productsData]);
}, [products]);
const placeOrderMutation = trpc.user.order.placeOrder.useMutation({
onSuccess: (data) => {
@ -127,7 +128,7 @@ const PaymentAndOrderComponent: React.FC<PaymentAndOrderProps> = ({
const availableItems = cartItems
.filter(item => {
if (item.product?.isOutOfStock) return false;
if (productsById[item.productId]?.isOutOfStock) return false;
// For flash delivery, check if product supports flash delivery
if (isFlashDelivery) {
return flashEligibleProductIds.has(item.productId);

23
apps/user-ui/components/ProductCard.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React from 'react';
import { View, Alert, TouchableOpacity, Text } from 'react-native';
import { Image } from 'expo-image';
import { tw, theme, MyText, MyTouchableOpacity, Quantifier, MiniQuantifier } from 'common-ui';
@ -14,7 +14,7 @@ import {
} from '@/hooks/cart-query-hooks';
import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';
import { useCartStore } from '@/src/store/cartStore';
import { trpc } from '@/src/trpc-client';
import { useCentralSlotStore } from '@/src/store/centralSlotStore';
interface ProductCardProps {
@ -68,17 +68,18 @@ const ProductCard: React.FC<ProductCardProps> = ({
const cartItem = cartData?.items?.find((cartItem: any) => cartItem.productId === item.id);
const quantity = cartItem?.quantity || 0;
// Query all slots with products
const { data: slotsData } = trpc.user.slots.getSlotsWithProducts.useQuery();
// Get slots data from central store
const slots = useCentralSlotStore((state) => state.slots);
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
// Create slot lookup map
const slotMap = useMemo(() => {
const slotMap = React.useMemo(() => {
const map: Record<number, any> = {};
slotsData?.slots?.forEach((slot: any) => {
slots?.forEach((slot: any) => {
map[slot.id] = slot;
});
return map;
}, [slotsData]);
}, [slots]);
// Get cart item's slot delivery time if item is in cart
const cartSlot = cartItem?.slotId ? slotMap[cartItem.slotId] : null;
@ -86,7 +87,11 @@ const ProductCard: React.FC<ProductCardProps> = ({
// Precompute the next slot and determine display out of stock status
const slotId = getQuickestSlot(item.id);
const displayIsOutOfStock = item.isOutOfStock || !slotId;
// Use isOutOfStock from productSlotsMap (all products now included)
const productSlotInfo = productSlotsMap[item.id];
const isOutOfStockFromSlots = productSlotInfo?.isOutOfStock;
const displayIsOutOfStock = isOutOfStockFromSlots || !slotId;
// if(item.name.startsWith('Mutton Curry Cut')) {
// console.log({slotId, displayIsOutOfStock})
@ -213,4 +218,4 @@ const ProductCard: React.FC<ProductCardProps> = ({
);
};
export default ProductCard;
export default ProductCard;

26
apps/user-ui/components/ProductDetail.tsx
View file

@ -12,6 +12,7 @@ import { trpc, trpcClient } from '@/src/trpc-client';
import { useAddToCart, useGetCart, useUpdateCartItem, useRemoveFromCart } from '@/hooks/cart-query-hooks';
import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';
import { useFlashNavigationStore } from '@/components/stores/flashNavigationStore';
import { useSlots } from '@/src/hooks/prominent-api-hooks';
import FloatingCartBar from './floating-cart-bar';
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
import { useCartStore } from '@/src/store/cartStore';
@ -57,15 +58,22 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
const { getQuickestSlot } = useProductSlotIdentifier();
const { setShouldNavigateToCart } = useFlashNavigationStore();
const { setAddedToCartProduct } = useCartStore();
const { data: slotsData } = useSlots();
const sortedDeliverySlots = useMemo(() => {
if (!productDetail?.deliverySlots) return []
return [...productDetail.deliverySlots].sort((a, b) => {
if (!slotsData?.slots || !productDetail) return []
// Filter slots that contain this product
const productSlots = slotsData.slots.filter((slot: any) =>
slot.products?.some((p: any) => p.id === productDetail.id)
)
return productSlots.sort((a: any, b: any) => {
const deliveryDiff = new Date(a.deliveryTime).getTime() - new Date(b.deliveryTime).getTime()
if (deliveryDiff !== 0) return deliveryDiff
return new Date(a.freezeTime).getTime() - new Date(b.freezeTime).getTime()
})
}, [productDetail?.deliverySlots])
}, [slotsData, productDetail])
// Find current quantity from cart data
const cartItem = productDetail ? cartData?.data?.items?.find((item: any) => item.productId === productDetail.id) : null;
@ -343,13 +351,13 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
) : productDetail.isFlashAvailable ? (
<MyTouchableOpacity
style={[tw`flex-1 py-3.5 rounded-xl items-center shadow-md`, {
backgroundColor: productDetail.deliverySlots.length === 0 ? '#9ca3af' : '#FDF2F8'
backgroundColor: sortedDeliverySlots.length === 0 ? '#9ca3af' : '#FDF2F8'
}]}
onPress={() => productDetail.deliverySlots.length > 0 && handleBuyNow(productDetail.id)}
disabled={productDetail.deliverySlots.length === 0}
onPress={() => sortedDeliverySlots.length > 0 && handleBuyNow(productDetail.id)}
disabled={sortedDeliverySlots.length === 0}
>
<MyText style={tw`text-base font-bold ${productDetail.deliverySlots.length === 0 ? 'text-gray-400' : 'text-pink-600'}`}>
{productDetail.deliverySlots.length === 0 ? 'No Slots' : 'Get in 1 Hour'}
<MyText style={tw`text-base font-bold ${sortedDeliverySlots.length === 0 ? 'text-gray-400' : 'text-pink-600'}`}>
{sortedDeliverySlots.length === 0 ? 'No Slots' : 'Get in 1 Hour'}
</MyText>
</MyTouchableOpacity>
) : (
@ -797,4 +805,4 @@ const ReviewForm = ({ productId, onReviewSubmitted }: ReviewFormProps) => {
);
};
export default ProductDetail;
export default ProductDetail;

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

@ -6,6 +6,7 @@ import { BottomDialog, MyTouchableOpacity, MyText, tw, theme } from 'common-ui';
import { useAuth } from '@/src/contexts/AuthContext';
import { trpc } from '@/src/trpc-client';
import { useAddressStore } from '@/src/store/addressStore';
import { useSlots } from '@/src/hooks/prominent-api-hooks';
import dayjs from 'dayjs';
interface QuickDeliveryAddressSelectorProps {
@ -31,13 +32,13 @@ const QuickDeliveryAddressSelector: React.FC<QuickDeliveryAddressSelectorProps>
const { data: addressesData } = trpc.user.address.getUserAddresses.useQuery(undefined, {
enabled: isAuthenticated,
});
const { data: slotsData } = trpc.user.slots.getSlotsWithProducts.useQuery();
const { data: slotsData } = useSlots();
const defaultAddress = defaultAddressData?.data;
const addresses = addressesData?.data || [];
// Format time range helper
const formatTimeRange = (deliveryTime: string) => {
const formatTimeRange = (deliveryTime: string | Date) => {
const time = dayjs(deliveryTime);
const endTime = time.add(1, 'hour');
const startPeriod = time.format('A');
@ -276,4 +277,4 @@ const QuickDeliveryAddressSelector: React.FC<QuickDeliveryAddressSelectorProps>
);
};
export default QuickDeliveryAddressSelector;
export default QuickDeliveryAddressSelector;

86
apps/user-ui/components/cart-page.tsx
View file

@ -24,7 +24,7 @@ import TestingPhaseNote from "@/components/TestingPhaseNote";
import dayjs from "dayjs";
import { trpc } from "@/src/trpc-client";
import { useAllProducts } from "@/src/hooks/prominent-api-hooks";
import { useCentralProductStore } from '@/src/store/centralProductStore';
import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '@/hooks/cart-query-hooks';
import { useGetEssentialConsts } from '@/src/hooks/prominent-api-hooks';
@ -81,33 +81,33 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
const { data: couponsRaw, error: couponsError } = trpc.user.coupon.getEligible.useQuery();
const { data: constsData } = useGetEssentialConsts();
const { data: productsData } = useAllProducts();
const products = useCentralProductStore((state) => state.products);
const productsById = useCentralProductStore((state) => state.productsById);
const cartItems = cartData?.items || [];
// Memoized flash-eligible product IDs
const flashEligibleProductIds = useMemo(() => {
if (!productsData?.products) return new Set<number>();
if (!products.length) return new Set<number>();
return new Set(
productsData.products
.filter((product: any) => product.isFlashAvailable)
.map((product: any) => product.id)
products
.filter((product) => product.isFlashAvailable)
.map((product) => product.id)
);
}, [productsData]);
}, [products]);
// Base total price without discounts for coupon eligibility check
const baseTotalPrice = useMemo(
() =>
cartItems
.filter((item) => !item.product?.isOutOfStock)
.reduce(
(sum, item) =>
sum +
(item.product?.price || 0) * (quantities[item.id] || item.quantity),
0
),
[cartItems, quantities]
const baseTotalPrice = useMemo(
() =>
cartItems
.filter((item) => !productsById[item.productId]?.isOutOfStock)
.reduce((sum, item) => {
const product = productsById[item.productId];
const price = product?.price || 0;
return sum + price * (quantities[item.id] || item.quantity);
}, 0),
[cartItems, quantities, productsById]
);
const eligibleCoupons = useMemo(() => {
@ -200,13 +200,14 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
[eligibleCoupons, selectedCouponId]
);
const totalPrice = cartItems
.filter((item) => !item.product?.isOutOfStock)
.reduce((sum, item) => {
const quantity = quantities[item.id] || item.quantity;
const price = isFlashDelivery ? (item.product?.flashPrice ?? item.product?.price ?? 0) : (item.product?.price || 0);
return sum + price * quantity;
}, 0);
const totalPrice = cartItems
.filter((item) => !productsById[item.productId]?.isOutOfStock)
.reduce((sum, item) => {
const product = productsById[item.productId];
const quantity = quantities[item.id] || item.quantity;
const price = isFlashDelivery ? (product?.flashPrice ?? product?.price ?? 0) : (product?.price || 0);
return sum + price * quantity;
}, 0);
const dropdownData = useMemo(
() =>
eligibleCoupons?.map((coupon) => {
@ -274,7 +275,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
const finalTotalWithDelivery = finalTotal + deliveryCharge;
const hasAvailableItems = cartItems.some(item => !item.product?.isOutOfStock);
const hasAvailableItems = cartItems.some(item => !productsById[item.productId]?.isOutOfStock);
useEffect(() => {
const initial: Record<number, number> = {};
@ -411,10 +412,11 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
const productSlots = getAvailableSlotsForProduct(item.productId);
const selectedSlotForItem = selectedSlots[item.id];
const isFlashEligible = isFlashDelivery ? flashEligibleProductIds.has(item.productId) : true;
const product = productsById[item.productId];
// const isAvailable = (productSlots.length > 0 || isFlashDelivery) && !item.product?.isOutOfStock && isFlashEligible;
let isAvailable = true;
if(item.product?.isOutOfStock) {
if (product?.isOutOfStock) {
isAvailable = false;
} else if(isFlashDelivery) {
if(!isFlashEligible) {
@ -431,7 +433,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
// isAvailable = isFlashEligible;
// }
const quantity = quantities[item.id] || item.quantity;
const price = isFlashDelivery ? (item.product?.flashPrice ?? item.product?.price ?? 0) : (item.product?.price || 0);
const price = isFlashDelivery ? (product?.flashPrice ?? product?.price ?? 0) : (product?.price || 0);
const itemPrice = price * quantity;
return (
@ -439,7 +441,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
<View style={tw`p-4`}>
<View style={tw`flex-row items-center mb-2`}>
<Image
source={{ uri: item.product.images?.[0] }}
source={{ uri: product?.images?.[0] }}
style={tw`w-8 h-8 rounded-lg bg-gray-100 mr-3`}
/>
@ -447,12 +449,12 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
style={tw`text-sm text-gray-900 flex-1 mr-3`}
numberOfLines={2}
>
{item.product.name}
{product?.name}
</MyText>
<MyText style={tw`text-xs text-gray-500 mr-2`}>
{(() => {
const qty = item.product?.productQuantity || 1;
const unit = item.product?.unitNotation || '';
const qty = product?.productQuantity || 1;
const unit = product?.unitNotation || '';
if (unit?.toLowerCase() === 'kg' && qty < 1) {
return `${Math.round(qty * 1000)}g`;
}
@ -513,8 +515,8 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
});
}
}}
step={item.product.incrementStep}
unit={item.product?.unitNotation}
step={product?.incrementStep}
unit={product?.unitNotation}
/>
</View>
</View>
@ -580,7 +582,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
onPress={() => {
Alert.alert(
"Remove Item",
`Remove ${item.product.name} from cart?`,
`Remove ${product?.name} from cart?`,
[
{ text: "Cancel", style: "cancel" },
{
@ -631,7 +633,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
onPress={() => {
Alert.alert(
"Remove Item",
`Remove ${item.product.name} from cart?`,
`Remove ${product?.name} from cart?`,
[
{ text: "Cancel", style: "cancel" },
{
@ -675,8 +677,8 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
style={tw`bg-red-50 self-start px-2 py-1 rounded-md mt-2`}
>
<MyText style={tw`text-xs font-bold text-red-600`}>
{item.product?.isOutOfStock
? "Out of Stock"
{product?.isOutOfStock
? "Out of Stock"
: isFlashDelivery && !flashEligibleProductIds.has(item.productId)
? "Not available for flash delivery. Please remove"
: "No delivery slots available"}
@ -909,7 +911,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
onPress={() => {
const availableItems = cartItems
.filter(item => {
if (item.product?.isOutOfStock) return false;
if (productsById[item.productId]?.isOutOfStock) return false;
if (isFlashDelivery) {
// Check if product supports flash delivery
return flashEligibleProductIds.has(item.productId);
@ -922,8 +924,8 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
if (availableItems.length === 0) {
// Determine why no items are available
const outOfStockItems = cartItems.filter(item => item.product?.isOutOfStock);
const inStockItems = cartItems.filter(item => !item.product?.isOutOfStock);
const outOfStockItems = cartItems.filter(item => productsById[item.productId]?.isOutOfStock);
const inStockItems = cartItems.filter(item => !productsById[item.productId]?.isOutOfStock);
let errorTitle = "Cannot Proceed";
let errorMessage = "";
@ -962,7 +964,7 @@ export default function CartPage({ isFlashDelivery = false }: CartPageProps) {
// Check if there are items without slots (for regular delivery)
if (!isFlashDelivery && availableItems.length < cartItems.length) {
const itemsWithoutSlots = cartItems.filter(item => !selectedSlots[item.id] && !item.product?.isOutOfStock);
const itemsWithoutSlots = cartItems.filter(item => !selectedSlots[item.id] && !productsById[item.productId]?.isOutOfStock);
if (itemsWithoutSlots.length > 0) {
Alert.alert(
"Delivery Slot Required",

26
apps/user-ui/components/checkout-page.tsx
View file

@ -8,7 +8,7 @@ import AddressForm from '@/src/components/AddressForm';
import { useAuthenticatedRoute } from '@/hooks/useAuthenticatedRoute';
import { trpc } from '@/src/trpc-client';
import { useAllProducts } from '@/src/hooks/prominent-api-hooks';
import { useCentralProductStore } from '@/src/store/centralProductStore';
import { useGetCart } from '@/hooks/cart-query-hooks';
import { useGetEssentialConsts } from '@/src/hooks/prominent-api-hooks';
import PaymentAndOrderComponent from '@/components/PaymentAndOrderComponent';
@ -36,7 +36,8 @@ const CheckoutPage: React.FC<CheckoutPageProps> = ({ isFlashDelivery = false })
const { data: addresses, refetch: refetchAddresses } = trpc.user.address.getUserAddresses.useQuery();
const { data: slotsData, refetch: refetchSlots } = trpc.user.slots.getSlots.useQuery();
const { data: constsData } = useGetEssentialConsts();
const { data: productsData } = useAllProducts();
const products = useCentralProductStore((state) => state.products);
const productsById = useCentralProductStore((state) => state.productsById);
useMarkDataFetchers(() => {
refetchCart();
@ -53,14 +54,14 @@ const CheckoutPage: React.FC<CheckoutPageProps> = ({ isFlashDelivery = false })
const cartItems = cartData?.items || [];
// Memoized flash-eligible product IDs
const flashEligibleProductIds = useMemo(() => {
if (!productsData?.products) return new Set<number>();
return new Set(
productsData.products
.filter((product: any) => product.isFlashAvailable)
.map((product: any) => product.id)
);
}, [productsData]);
const flashEligibleProductIds = useMemo(() => {
if (!products.length) return new Set<number>();
return new Set(
products
.filter((product) => product.isFlashAvailable)
.map((product) => product.id)
);
}, [products]);
// Parse slots parameter from URL (format: "1:1,2,3;2:4,5")
const selectedSlots = useMemo(() => {
@ -124,10 +125,11 @@ const CheckoutPage: React.FC<CheckoutPageProps> = ({ isFlashDelivery = false })
const totalPrice = selectedItems
.filter((item) => !item.product?.isOutOfStock)
.filter((item) => !productsById[item.productId]?.isOutOfStock)
.reduce(
(sum, item) => {
const price = isFlashDelivery ? (item.product?.flashPrice ?? item.product?.price ?? 0) : (item.product?.price || 0);
const product = productsById[item.productId];
const price = isFlashDelivery ? (product?.flashPrice ?? product?.price ?? 0) : (product?.price || 0);
return sum + price * item.quantity;
},
0

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

@ -14,7 +14,6 @@ import {
theme,
updateStatusBarColor,
} from "common-ui";
import { trpc } from "@/src/trpc-client";
import {
useGetCart,
useUpdateCartItem,
@ -22,8 +21,9 @@ import {
useAddToCart,
type CartType,
} from "@/hooks/cart-query-hooks";
import { useGetEssentialConsts } from "@/src/api-hooks/essential-consts.api";
import { useGetEssentialConsts, useSlots } from "@/src/hooks/prominent-api-hooks"
import { useProductSlotIdentifier } from "@/hooks/useProductSlotIdentifier";
import { useCentralProductStore } from "@/src/store/centralProductStore";
import dayjs from "dayjs";
import { LinearGradient } from "expo-linear-gradient";
@ -36,7 +36,7 @@ interface FloatingCartBarProps {
}
// Smart time window formatting function
const formatTimeRange = (deliveryTime: string) => {
const formatTimeRange = (deliveryTime: string | Date) => {
const time = dayjs(deliveryTime);
const endTime = time.add(1, 'hour');
const startPeriod = time.format('A');
@ -79,7 +79,8 @@ const FloatingCartBar: React.FC<FloatingCartBarProps> = ({
const setIsExpanded = controlledSetIsExpanded ?? setLocalIsExpanded;
const { data: cartData, refetch: refetchCart } = useGetCart({}, cartType);
const { data: constsData } = useGetEssentialConsts();
const { data: slotsData } = trpc.user.slots.getSlotsWithProducts.useQuery();
const { data: slotsData } = useSlots();
const productsById = useCentralProductStore((state) => state.productsById);
const { productSlotsMap } = useProductSlotIdentifier();
const cartItems = cartData?.items || [];
const itemCount = cartItems.length;
@ -108,21 +109,21 @@ const FloatingCartBar: React.FC<FloatingCartBarProps> = ({
setQuantities(initial);
}, [cartData]);
useEffect(() => {
useEffect(() => {
if (!cartItems.length || !slotsData?.slots || !productSlotsMap) return;
const itemsToUpdate = cartItems.filter(item => {
if (isFlashDelivery || !item.slotId) return false;
const availableSlots = productSlotsMap.get(item.productId) || [];
const isSlotAvailable = availableSlots.includes(item.slotId);
const availableSlots = productSlotsMap[item.productId]?.slots || [];
const isSlotAvailable = availableSlots.some((slot) => slot.id === item.slotId);
return !isSlotAvailable;
});
itemsToUpdate.forEach((item) => {
const availableSlots = productSlotsMap.get(item.productId) || [];
const availableSlots = productSlotsMap[item.productId]?.slots || [];
if (availableSlots.length > 0 && !isFlashDelivery) {
const nearestSlotId = availableSlots[0];
const nearestSlotId = availableSlots[0].id;
removeFromCart.mutate({ itemId: item.id });
addToCartHook.addToCart(item.productId, item.quantity, nearestSlotId);
}
@ -135,7 +136,9 @@ useEffect(() => {
// Calculate total cart value and free delivery info
const totalCartValue = cartItems.reduce(
(sum, item) => {
const price = isFlashDelivery ? (item.product.flashPrice ?? item.product.price) : item.product.price;
const product = productsById[item.productId];
const basePrice = product?.price ?? 0;
const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice;
return sum + price * item.quantity;
},
0
@ -256,21 +259,21 @@ useEffect(() => {
<React.Fragment key={item.id}>
<View style={tw`py-4`}>
<View style={tw`flex-row items-center`}>
<Image
source={{ uri: item.product.images?.[0] }}
style={tw`w-8 h-8 rounded-lg bg-slate-50 border border-slate-100`}
/>
<Image
source={{ uri: productsById[item.productId]?.images?.[0] }}
style={tw`w-8 h-8 rounded-lg bg-slate-50 border border-slate-100`}
/>
<View style={tw`flex-1 ml-4`}>
<View style={tw`flex-row items-center justify-between mb-1`}>
<ProductNameWithQuantity
name={item.product.name}
productQuantity={item.product.productQuantity}
unitNotation={item.product.unitNotation}
name={productsById[item.productId]?.name || ''}
productQuantity={productsById[item.productId]?.productQuantity || 0}
unitNotation={productsById[item.productId]?.unitNotation || ''}
/>
<MiniQuantifier
value={quantities[item.id] || item.quantity}
onChange={(value) => {
<MiniQuantifier
value={quantities[item.id] || item.quantity}
onChange={(value) => {
if (value === 0) {
removeFromCart.mutate({ itemId: item.id });
} else {
@ -278,21 +281,20 @@ useEffect(() => {
updateCartItem.mutate({ itemId: item.id, quantity: value });
}
}}
step={item.product.incrementStep}
showUnits={true}
unit={item.product?.unitNotation}
/>
step={productsById[item.productId]?.incrementStep || 1}
showUnits={true}
unit={productsById[item.productId]?.unitNotation}
/>
</View>
<View style={tw`flex-row items-center justify-between`}>
{item.slotId && slotsData && productSlotsMap.has(item.productId) && (
{item.slotId && slotsData && productSlotsMap[item.productId] && (
<BottomDropdown
label="Select Delivery Slot"
value={item.slotId}
options={(productSlotsMap.get(item.productId) || []).map(slotId => {
const slot = slotsData.slots.find(s => s.id === slotId);
options={(productSlotsMap[item.productId]?.slots || []).map((slot) => {
return {
label: slot ? formatTimeRange(slot.deliveryTime) : "N/A",
value: slotId,
value: slot.id,
};
})}
onValueChange={async (val) => {
@ -325,7 +327,12 @@ useEffect(() => {
/>
)}
<MyText style={tw`text-slate-900 text-sm font-bold`}>
₹{(isFlashDelivery ? (item.product.flashPrice ?? item.product.price) : item.product.price) * item.quantity}
₹{(() => {
const product = productsById[item.productId];
const basePrice = product?.price ?? 0;
const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice;
return price * item.quantity;
})()}
</MyText>
</View>
</View>

658
apps/user-ui/hooks/cart-query-hooks.tsx
View file

@ -1,16 +1,12 @@
import { trpc } from '@/src/trpc-client';
import { useAllProducts } from '@/src/hooks/prominent-api-hooks';
import { useCentralSlotStore } from '@/src/store/centralSlotStore';
import { Alert } from 'react-native';
import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useQuery, useMutation, useQueryClient, UseQueryResult, UseMutationResult } from '@tanstack/react-query';
import { StorageServiceCasual } from 'common-ui/src/services/StorageServiceCasual';
// Cart type definition
export type CartType = "regular" | "flash";
// const CART_MODE: 'remote' | 'local' = 'remote';
const CART_MODE: 'remote' | 'local' = 'local';
const getCartStorageKey = (cartType: CartType = "regular"): string => {
return cartType === "flash" ? "flash_cart_items" : "cart_items";
};
@ -27,15 +23,114 @@ interface ProductSummary {
id: number;
price: string;
incrementStep: number;
isOutOfStock: boolean;
isFlashAvailable: boolean;
name?: string;
flashPrice?: string | null;
images?: string[];
productQuantity?: number;
unitNotation?: string;
marketPrice?: string | null;
}
interface CartItem {
export interface CartItem {
id: number;
productId: number;
quantity: number;
addedAt: string;
product: ProductSummary;
subtotal: number;
slotId: number;
}
interface CartData {
items: CartItem[];
totalItems: number;
totalAmount: number;
}
interface UseGetCartOptions {
refetchOnWindowFocus?: boolean;
enabled?: boolean;
}
interface UseGetCartReturn {
data: CartData | undefined;
isLoading: boolean;
error: Error | null;
refetch: () => Promise<UseQueryResult<CartData, Error>>;
cartItems: CartItem[];
totalItems: number;
totalPrice: number;
isEmpty: boolean;
hasItems: boolean;
}
interface AddToCartVariables {
productId: number;
quantity: number;
slotId: number;
}
interface UpdateCartVariables {
itemId: number;
quantity: number;
}
interface RemoveCartVariables {
itemId: number;
}
interface MutationOptions<TData, TVariables> {
onSuccess?: (data: TData, variables: TVariables) => void;
onError?: (error: Error) => void;
showSuccessAlert?: boolean;
showErrorAlert?: boolean;
refetchCart?: boolean;
}
interface UseAddToCartReturn {
mutate: UseMutationResult<LocalCartItem[], Error, AddToCartVariables>['mutate'];
mutateAsync: UseMutationResult<LocalCartItem[], Error, AddToCartVariables>['mutateAsync'];
isLoading: boolean;
error: Error | null;
data: LocalCartItem[] | undefined;
addToCart: (productId: number, quantity?: number, slotId?: number, onSettled?: (data: LocalCartItem[] | undefined, error: Error | null) => void) => void;
addToCartAsync: (productId: number, quantity?: number, slotId?: number) => Promise<LocalCartItem[]>;
}
interface UseUpdateCartItemReturn {
mutate: UseMutationResult<LocalCartItem[], Error, UpdateCartVariables>['mutate'];
mutateAsync: UseMutationResult<LocalCartItem[], Error, UpdateCartVariables>['mutateAsync'];
isLoading: boolean;
error: Error | null;
data: LocalCartItem[] | undefined;
updateCartItem: (itemId: number, quantity: number) => void;
updateCartItemAsync: (itemId: number, quantity: number) => Promise<LocalCartItem[]>;
}
interface UseRemoveFromCartReturn {
mutate: UseMutationResult<LocalCartItem[], Error, RemoveCartVariables>['mutate'];
mutateAsync: UseMutationResult<LocalCartItem[], Error, RemoveCartVariables>['mutateAsync'];
isLoading: boolean;
error: Error | null;
data: LocalCartItem[] | undefined;
removeFromCart: (itemId: number) => void;
removeFromCartAsync: (itemId: number) => Promise<LocalCartItem[]>;
}
interface AllProductsResponse {
products: Array<{
id: number;
price: number;
incrementStep: number;
marketPrice?: number | null;
name?: string;
flashPrice?: string | null;
images?: string[];
productQuantity?: number;
unitNotation?: string;
}>;
}
const getLocalCart = async (cartType: CartType = "regular"): Promise<LocalCartItem[]> => {
@ -47,8 +142,7 @@ const getLocalCart = async (cartType: CartType = "regular"): Promise<LocalCartIt
const saveLocalCart = async (items: LocalCartItem[], cartType: CartType = "regular"): Promise<void> => {
const key = getCartStorageKey(cartType);
await StorageServiceCasual.setItem(key, JSON.stringify(items));
const fetchedItems = await getLocalCart(cartType);
await getLocalCart(cartType);
};
const getNextCartItemId = (items: LocalCartItem[]): number => {
@ -56,8 +150,7 @@ const getNextCartItemId = (items: LocalCartItem[]): number => {
return maxId + 1;
};
const addToLocalCart = async (productId: number, quantity: number, slotId?: number, cartType: CartType = "regular"): Promise<LocalCartItem[]> => {
const addToLocalCart = async (productId: number, quantity: number, slotId: number | undefined, cartType: CartType = "regular"): Promise<LocalCartItem[]> => {
const items = await getLocalCart(cartType);
const existingIndex = items.findIndex(item => item.productId === productId);
@ -68,13 +161,13 @@ const addToLocalCart = async (productId: number, quantity: number, slotId?: numb
}
} else {
const newId = getNextCartItemId(items);
const cartItem = {
const cartItem: LocalCartItem = {
id: newId,
productId,
quantity,
slotId: slotId ?? 0, // Default to 0 if not provided
slotId: slotId ?? 0,
addedAt: new Date().toISOString(),
}
};
items.push(cartItem);
}
@ -105,401 +198,198 @@ const clearLocalCart = async (cartType: CartType = "regular"): Promise<void> =>
await StorageServiceCasual.setItem(key, JSON.stringify([]));
};
export function useGetCart(options?: {
refetchOnWindowFocus?: boolean;
enabled?: boolean;
}, cartType: CartType = "regular") {
if (CART_MODE === 'remote') {
const query = trpc.user.cart.getCart.useQuery(undefined, {
refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true,
enabled: options?.enabled ?? true,
...options
});
export function useGetCart(options: UseGetCartOptions = {}, cartType: CartType = "regular"): UseGetCartReturn {
const { data: products } = useAllProducts() as { data: AllProductsResponse | undefined };
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
const query: UseQueryResult<CartData, Error> = useQuery({
queryKey: [`local-cart-${cartType}`],
queryFn: async (): Promise<CartData> => {
const cartItems = await getLocalCart(cartType);
return {
// Original tRPC returns
data: query.data,
isLoading: query.isLoading,
error: query.error,
refetch: query.refetch,
const productMap: Record<number, Omit<ProductSummary, 'isOutOfStock' | 'isFlashAvailable'>> = Object.fromEntries(
products?.products?.map((p) => [
p.id,
{
id: p.id,
price: String(p.price),
incrementStep: p.incrementStep,
marketPrice: p.marketPrice === null || p.marketPrice === undefined ? null : String(p.marketPrice),
name: p.name,
flashPrice: p.flashPrice,
images: p.images,
productQuantity: p.productQuantity,
unitNotation: p.unitNotation,
},
]) ?? []
);
// Computed properties
cartItems: query.data?.items || [],
totalItems: query.data?.totalItems || 0,
totalPrice: query.data?.totalAmount || 0,
const items: CartItem[] = cartItems
.map((cartItem): CartItem | null => {
const productBasic = productMap[cartItem.productId];
const productAvailability = productSlotsMap[cartItem.productId];
// Helper methods
isEmpty: !query.data?.items?.length,
hasItems: Boolean(query.data?.items?.length),
};
} else {
const { data: products } = useAllProducts();
const query = useQuery({
queryKey: [`local-cart-${cartType}`],
queryFn: async () => {
const cartItems = await getLocalCart(cartType);
const productMap = Object.fromEntries(
products?.products?.map((p) => [
p.id,
{
...p,
price: String(p.price),
marketPrice: p.marketPrice === null || p.marketPrice === undefined ? null : String(p.marketPrice),
} as ProductSummary,
]) || []
);
const items: CartItem[] = cartItems.map(cartItem => {
const product = productMap[cartItem.productId];
if (!productBasic || !productAvailability) return null;
if (!product) return null as any;
return {
id: cartItem.id,
productId: cartItem.productId,
quantity: cartItem.quantity,
addedAt: cartItem.addedAt,
product,
incrementStep: product.incrementStep,
subtotal: Number(product.price) * cartItem.quantity,
product: {
...productBasic,
isOutOfStock: productAvailability.isOutOfStock,
isFlashAvailable: productAvailability.isFlashAvailable,
},
incrementStep: productBasic.incrementStep,
subtotal: Number(productBasic.price) * cartItem.quantity,
slotId: cartItem.slotId,
};
}).filter(Boolean) as CartItem[];
const totalAmount = items.reduce((sum, item) => sum + item.subtotal, 0);
})
.filter((item): item is CartItem => item !== null);
return {
items,
totalItems: items.length,
totalAmount,
};
},
refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true,
enabled: (options?.enabled ?? true) && !!products,
const totalAmount = items.reduce((sum, item) => sum + item.subtotal, 0);
return {
items,
totalItems: items.length,
totalAmount,
};
},
refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true,
enabled: (options?.enabled ?? true) && !!products,
});
return {
data: query.data,
isLoading: query.isLoading,
error: query.error,
refetch: query.refetch,
cartItems: query.data?.items ?? [],
totalItems: query.data?.totalItems ?? 0,
totalPrice: query.data?.totalAmount ?? 0,
isEmpty: !(query.data?.items?.length ?? 0),
hasItems: Boolean(query.data?.items?.length),
};
}
export function useAddToCart(options: MutationOptions<LocalCartItem[], AddToCartVariables> = {}, cartType: CartType = "regular"): UseAddToCartReturn {
const queryClient = useQueryClient();
const mutation: UseMutationResult<LocalCartItem[], Error, AddToCartVariables> = useMutation({
mutationFn: async ({ productId, quantity, slotId }: AddToCartVariables): Promise<LocalCartItem[]> => {
return await addToLocalCart(productId, quantity, slotId, cartType);
},
onSuccess: (data: LocalCartItem[], variables: AddToCartVariables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item added to cart!");
}
options?.onSuccess?.(data, variables);
},
onError: (error: Error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to add item to cart");
}
options?.onError?.(error);
},
});
const addToCart = (productId: number, quantity = 1, slotId?: number, onSettled?: (data: LocalCartItem[] | undefined, error: Error | null) => void): void => {
if (slotId == null) {
throw new Error('slotId is required for adding to cart');
}
mutation.mutate({ productId, quantity, slotId }, {
onSettled: (data: LocalCartItem[] | undefined, error: Error | null) => {
onSettled?.(data, error);
}
});
return {
data: query.data,
isLoading: query.isLoading,
error: query.error,
refetch: query.refetch,
};
// Computed properties
cartItems: query.data?.items || [],
totalItems: query.data?.totalItems || 0,
totalPrice: query.data?.totalAmount || 0,
// Helper methods
isEmpty: !query.data?.items?.length,
hasItems: Boolean(query.data?.items?.length),
};
}
}
interface UseAddToCartReturn {
mutate: any;
mutateAsync: any;
isLoading: boolean;
error: any;
data: any;
addToCart: (productId: number, quantity?: number, slotId?: number, onSettled?: (data: any, error: any) => void) => void;
addToCartAsync: (productId: number, quantity?: number, slotId?: number) => Promise<any>;
}
export function useAddToCart(options?: {
onSuccess?: (data: any, variables: any) => void;
onError?: (error: any) => void;
showSuccessAlert?: boolean;
showErrorAlert?: boolean;
refetchCart?: boolean;
}, cartType: CartType = "regular"): UseAddToCartReturn {
if (CART_MODE === 'remote') {
const utils = trpc.useUtils();
const mutation = trpc.user.cart.addToCart.useMutation({
onSuccess: (data, variables) => {
// Default success handling
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item added to cart!");
}
// Auto-refetch cart if requested
if (options?.refetchCart) {
utils.user.cart.getCart.invalidate();
}
// Custom success callback
options?.onSuccess?.(data, variables);
},
onError: (error) => {
// Default error handling
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to add item to cart");
}
// Custom error callback
options?.onError?.(error);
},
}) as any;
const addToCart = (productId: number, quantity = 1, slotId?: number, onSettled?: (data: any, error: any) => void) => {
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
addToCart,
addToCartAsync: (productId: number, quantity = 1, slotId?: number): Promise<LocalCartItem[]> => {
if (slotId == null) {
throw new Error('slotId is required for adding to cart');
}
return mutation.mutate({ productId, quantity, slotId }, {
onSettled: (data: any, error: any) => {
onSettled?.(data, error);
}
});
};
return mutation.mutateAsync({ productId, quantity, slotId });
},
};
}
return {
// Original mutation returns
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
export function useUpdateCartItem(options: MutationOptions<LocalCartItem[], UpdateCartVariables> = {}, cartType: CartType = "regular"): UseUpdateCartItemReturn {
const queryClient = useQueryClient();
addToCart,
addToCartAsync: (productId: number, quantity = 1, slotId?: number) => {
if (slotId == null) {
throw new Error('slotId is required for adding to cart');
}
return mutation.mutateAsync({ productId, quantity, slotId });
},
};
} else {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: async ({ productId, quantity, slotId }: { productId: number, quantity: number, slotId: number }) => {
return await addToLocalCart(productId, quantity, slotId, cartType);
},
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item added to cart!");
}
options?.onSuccess?.(data, variables);
},
onError: (error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to add item to cart");
}
options?.onError?.(error);
},
});
const addToCart = (productId: number, quantity = 1, slotId?: number, onSettled?: (data: any, error: any) => void) => {
if (slotId == null) {
throw new Error('slotId is required for adding to cart');
const mutation: UseMutationResult<LocalCartItem[], Error, UpdateCartVariables> = useMutation({
mutationFn: async ({ itemId, quantity }: UpdateCartVariables): Promise<LocalCartItem[]> => {
return await updateLocalCartItem(itemId, quantity, cartType);
},
onSuccess: (data: LocalCartItem[], variables: UpdateCartVariables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Cart item updated!");
}
return mutation.mutate({ productId, quantity, slotId }, {
onSettled: (data: any, error: any) => {
onSettled?.(data, error);
}
});
};
options?.onSuccess?.(data, variables);
},
onError: (error: Error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to update cart item");
}
options?.onError?.(error);
},
});
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
addToCart,
addToCartAsync: (productId: number, quantity = 1, slotId?: number) => {
if (slotId == null) {
throw new Error('slotId is required for adding to cart');
}
return mutation.mutateAsync({ productId, quantity, slotId });
},
};
}
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
updateCartItem: (itemId: number, quantity: number): void =>
mutation.mutate({ itemId, quantity }),
updateCartItemAsync: (itemId: number, quantity: number): Promise<LocalCartItem[]> =>
mutation.mutateAsync({ itemId, quantity }),
};
}
export function useUpdateCartItem(options?: {
onSuccess?: (data: any, variables: any) => void;
onError?: (error: any) => void;
showSuccessAlert?: boolean;
showErrorAlert?: boolean;
refetchCart?: boolean;
}, cartType: CartType = "regular") {
if (CART_MODE === 'remote') {
const utils = trpc.useUtils();
export function useRemoveFromCart(options: MutationOptions<LocalCartItem[], RemoveCartVariables> = {}, cartType: CartType = "regular"): UseRemoveFromCartReturn {
const queryClient = useQueryClient();
const mutation = trpc.user.cart.updateCartItem.useMutation({
onSuccess: (data, variables) => {
// Default success handling
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Cart item updated!");
}
const mutation: UseMutationResult<LocalCartItem[], Error, RemoveCartVariables> = useMutation({
mutationFn: async ({ itemId }: RemoveCartVariables): Promise<LocalCartItem[]> => {
return await removeFromLocalCart(itemId, cartType);
},
onSuccess: (data: LocalCartItem[], variables: RemoveCartVariables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item removed from cart!");
}
options?.onSuccess?.(data, variables);
},
onError: (error: Error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to remove item from cart");
}
options?.onError?.(error);
},
});
// Auto-refetch cart if requested
if (options?.refetchCart) {
utils.user.cart.getCart.invalidate();
}
// Custom success callback
options?.onSuccess?.(data, variables);
},
onError: (error) => {
// Default error handling
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to update cart item");
}
// Custom error callback
options?.onError?.(error);
},
});
return {
// Original mutation returns
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
// Helper methods
updateCartItem: (itemId: number, quantity: number) =>
mutation.mutate({ itemId, quantity }),
updateCartItemAsync: (itemId: number, quantity: number) =>
mutation.mutateAsync({ itemId, quantity }),
};
} else {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: async ({ itemId, quantity }: { itemId: number, quantity: number }) => {
return await updateLocalCartItem(itemId, quantity, cartType);
},
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Cart item updated!");
}
options?.onSuccess?.(data, variables);
},
onError: (error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to update cart item");
}
options?.onError?.(error);
},
});
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
updateCartItem: (itemId: number, quantity: number) =>
mutation.mutate({ itemId, quantity }),
updateCartItemAsync: (itemId: number, quantity: number) =>
mutation.mutateAsync({ itemId, quantity }),
};
}
}
export function useRemoveFromCart(options?: {
onSuccess?: (data: any, variables: any) => void;
onError?: (error: any) => void;
showSuccessAlert?: boolean;
showErrorAlert?: boolean;
refetchCart?: boolean;
}, cartType: CartType = "regular") {
if (CART_MODE === 'remote') {
const utils = trpc.useUtils();
const mutation = trpc.user.cart.removeFromCart.useMutation({
onSuccess: (data, variables) => {
// Default success handling
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item removed from cart!");
}
// Auto-refetch cart if requested
if (options?.refetchCart) {
utils.user.cart.getCart.invalidate();
}
// Custom success callback
options?.onSuccess?.(data, variables);
},
onError: (error) => {
// Default error handling
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to remove item from cart");
}
// Custom error callback
options?.onError?.(error);
},
});
return {
// Original mutation returns
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
// Helper methods
removeFromCart: (itemId: number) =>
mutation.mutate({ itemId }),
removeFromCartAsync: (itemId: number) =>
mutation.mutateAsync({ itemId }),
};
} else {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: async ({ itemId }: { itemId: number }) => {
return await removeFromLocalCart(itemId, cartType);
},
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: [`local-cart-${cartType}`] });
if (options?.showSuccessAlert !== false) {
Alert.alert("Success", "Item removed from cart!");
}
options?.onSuccess?.(data, variables);
},
onError: (error) => {
if (options?.showErrorAlert !== false) {
Alert.alert("Error", error.message || "Failed to remove item from cart");
}
options?.onError?.(error);
},
});
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
removeFromCart: (itemId: number) =>
mutation.mutate({ itemId }),
removeFromCartAsync: (itemId: number) =>
mutation.mutateAsync({ itemId }),
};
}
return {
mutate: mutation.mutate,
mutateAsync: mutation.mutateAsync,
isLoading: mutation.isPending,
error: mutation.error,
data: mutation.data,
removeFromCart: (itemId: number): void =>
mutation.mutate({ itemId }),
removeFromCartAsync: (itemId: number): Promise<LocalCartItem[]> =>
mutation.mutateAsync({ itemId }),
};
}
// Export clear cart function for direct use

42
apps/user-ui/hooks/useProductSlotIdentifier.ts
View file

@ -1,46 +1,28 @@
import { trpc } from '@/src/trpc-client';
import dayjs from 'dayjs';
import { useCentralSlotStore } from '@/src/store/centralSlotStore';
export function useProductSlotIdentifier() {
// Fetch all slots with products
const { data: slotsData, isLoading: isProductsLoading } = trpc.user.slots.getSlotsWithProducts.useQuery();
const productSlotsMap = new Map<number, number[]>();
if (slotsData?.slots) {
const now = dayjs();
// Build map of productId to available slot IDs
slotsData.slots.forEach(slot => {
if (dayjs(slot.deliveryTime).isAfter(now)) {
slot.products.forEach(product => {
if (!productSlotsMap.has(product.id)) {
productSlotsMap.set(product.id, []);
}
productSlotsMap.get(product.id)!.push(slot.id);
});
}
});
}
// Get slots data from central store
const slots = useCentralSlotStore((state) => state.slots);
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
const getQuickestSlot = (productId: number): number | null => {
if (!slotsData?.slots) return null;
if (!slots?.length) return null;
const now = dayjs();
const productInfo = productSlotsMap[productId];
if (!productInfo?.slots?.length) return null;
// Find slots that contain this product and have future delivery time
const availableSlots = slotsData.slots.filter(slot =>
slot.products.some(product => product.id === productId) &&
const availableSlots = productInfo.slots.filter((slot: any) =>
dayjs(slot.deliveryTime).isAfter(now)
);
// if(productId === 98)
// console.log(JSON.stringify(slotsData))
if (availableSlots.length === 0) return null;
// Return earliest slot ID (sorted by delivery time)
const earliestSlot = availableSlots.sort((a, b) =>
const earliestSlot = availableSlots.sort((a: any, b: any) =>
dayjs(a.deliveryTime).diff(dayjs(b.deliveryTime))
)[0];
@ -48,4 +30,4 @@ export function useProductSlotIdentifier() {
};
return { getQuickestSlot, productSlotsMap };
}
}

13
apps/user-ui/metro.config.js
View file

@ -1,6 +1,19 @@
// Learn more on how to setup config for the app: https://docs.expo.dev/guides/config-plugins/#metro-config
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const config = getDefaultConfig(__dirname);
// Add the packages directory to watch folders
config.watchFolders = [
...config.watchFolders || [],
path.resolve(__dirname, '../../packages/shared'),
];
// Configure module resolution for @packages/*
config.resolver.extraNodeModules = {
...config.resolver.extraNodeModules,
'@packages/shared': path.resolve(__dirname, '../../packages/shared'),
};
module.exports = config;

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

@ -5,9 +5,8 @@ import { tw, BottomDialog, MyText, MyTouchableOpacity, Quantifier } from 'common
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useCartStore } from '@/src/store/cartStore';
import { useFlashCartStore } from '@/src/store/flashCartStore';
import { trpc } from '@/src/trpc-client';
import { useAddToCart, useGetCart, useUpdateCartItem, useRemoveFromCart } from '@/hooks/cart-query-hooks';
import { useGetEssentialConsts } from '@/src/hooks/prominent-api-hooks';
import { useGetEssentialConsts, useSlots } from '@/src/hooks/prominent-api-hooks';
import dayjs from 'dayjs';
import { SafeAreaView } from 'react-native-safe-area-context';
@ -31,7 +30,7 @@ export default function AddToCartDialog() {
const [selectedSlotId, setSelectedSlotId] = useState<number | null>(null);
const [selectedFlashDelivery, setSelectedFlashDelivery] = useState(false);
const { data: slotsData } = trpc.user.slots.getSlotsWithProducts.useQuery();
const { data: slotsData } = useSlots();
const { data: cartData } = useGetCart();
const { data: constsData } = useGetEssentialConsts();
// const isFlashDeliveryEnabled = constsData?.isFlashDeliveryEnabled === true;

14
apps/user-ui/src/components/CentralStoreInitializer.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
import { useInitializeCentralSlotStore } from '@/src/store/centralSlotStore';
import { useInitializeCentralProductStore } from '@/src/store/centralProductStore';
interface CentralStoreInitializerProps {
children: React.ReactNode;
}
export default function CentralStoreInitializer({ children }: CentralStoreInitializerProps) {
useInitializeCentralSlotStore();
useInitializeCentralProductStore();
return <>{children}</>;
}

58
apps/user-ui/src/hooks/prominent-api-hooks.ts
View file

@ -1,7 +1,8 @@
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
import { trpc } from '@/src/trpc-client'
import { AllProductsApiType, StoresApiType, SlotsApiType, EssentialConstsApiType } from "@backend/trpc/router";
import { AllProductsApiType, StoresApiType, SlotsApiType, EssentialConstsApiType, BannersApiType, StoreWithProductsApiType } from "@backend/trpc/router";
import { CACHE_FILENAMES } from "@packages/shared";
// Local useGetEssentialConsts hook
export const useGetEssentialConsts = () => {
@ -15,20 +16,22 @@ type ProductsResponse = AllProductsApiType;
type StoresResponse = StoresApiType;
type SlotsResponse = SlotsApiType;
type EssentialConstsResponse = EssentialConstsApiType;
type BannersResponse = BannersApiType;
type StoreWithProductsResponse = StoreWithProductsApiType;
function useCacheUrl(filename: string): string | null {
const { data: essentialConsts } = useGetEssentialConsts()
const assetsDomain = essentialConsts?.assetsDomain
const apiCacheKey = essentialConsts?.apiCacheKey
return assetsDomain && apiCacheKey
? `${assetsDomain}${apiCacheKey}/${filename}`
: null
}
export function useAllProducts() {
const cacheUrl = useCacheUrl('products.json')
const cacheUrl = useCacheUrl(CACHE_FILENAMES.products)
return useQuery<ProductsResponse>({
queryKey: ['all-products', cacheUrl],
@ -45,7 +48,7 @@ export function useAllProducts() {
}
export function useStores() {
const cacheUrl = useCacheUrl('stores.json')
const cacheUrl = useCacheUrl(CACHE_FILENAMES.stores)
return useQuery<StoresResponse>({
queryKey: ['stores', cacheUrl],
@ -62,7 +65,7 @@ export function useStores() {
}
export function useSlots() {
const cacheUrl = useCacheUrl('slots.json')
const cacheUrl = useCacheUrl(CACHE_FILENAMES.slots)
return useQuery<SlotsResponse>({
queryKey: ['slots', cacheUrl],
@ -77,3 +80,46 @@ export function useSlots() {
enabled: !!cacheUrl,
})
}
export function useBanners() {
const cacheUrl = useCacheUrl(CACHE_FILENAMES.banners)
return useQuery<BannersResponse>({
queryKey: ['banners', cacheUrl],
queryFn: async () => {
if (!cacheUrl) {
throw new Error('Cache URL not available')
}
const response = await axios.get<BannersResponse>(cacheUrl)
return response.data
},
staleTime: 60000, // 1 minute
enabled: !!cacheUrl,
})
}
export function useStoreWithProducts(storeId: number) {
const { data: essentialConsts } = useGetEssentialConsts()
const assetsDomain = essentialConsts?.assetsDomain
const apiCacheKey = essentialConsts?.apiCacheKey
const cacheUrl = assetsDomain && apiCacheKey
? `${assetsDomain}${apiCacheKey}/stores/${storeId}.json`
: null
return useQuery<StoreWithProductsResponse>({
queryKey: ['store-with-products', storeId, cacheUrl],
queryFn: async () => {
if (!cacheUrl) {
throw new Error('Cache URL not available')
}
const response = await axios.get<StoreWithProductsResponse>(cacheUrl)
return response.data
},
staleTime: 60000, // 1 minute
enabled: !!cacheUrl,
})
}

41
apps/user-ui/src/store/centralProductStore.ts Normal file
View file

@ -0,0 +1,41 @@
import { create } from 'zustand'
import { useEffect } from 'react'
import { useAllProducts } from '@/src/hooks/prominent-api-hooks'
import { AllProductsApiType } from '@backend/trpc/router'
type Product = AllProductsApiType['products'][number] & {
flashPrice?: number | null
}
interface CentralProductState {
products: Product[]
productsById: Record<number, Product>
setProducts: (products: Product[]) => void
clearProducts: () => void
}
export const useCentralProductStore = create<CentralProductState>((set) => ({
products: [],
productsById: {},
setProducts: (products) => {
const productsById: Record<number, Product> = {}
products.forEach((product) => {
productsById[product.id] = product
})
set({ products, productsById })
},
clearProducts: () => set({ products: [], productsById: {} }),
}))
export function useInitializeCentralProductStore() {
const { data: productsData } = useAllProducts()
const setProducts = useCentralProductStore((state) => state.setProducts)
useEffect(() => {
if (productsData?.products) {
setProducts(productsData.products)
}
}, [productsData, setProducts])
}

60
apps/user-ui/src/store/centralSlotStore.ts Normal file
View file

@ -0,0 +1,60 @@
import { create } from 'zustand';
import { useSlots } from '@/src/hooks/prominent-api-hooks';
import { useEffect } from 'react';
import { SlotsApiType } from "@backend/trpc/router";
type Slot = SlotsApiType['slots'][number];
type ProductAvailability = SlotsApiType['productAvailability'][number];
interface ProductSlotInfo {
slots: Slot[];
isOutOfStock: boolean;
isFlashAvailable: boolean;
}
interface CentralSlotState {
slots: Slot[];
productSlotsMap: Record<number, ProductSlotInfo>;
setSlotsData: (slots: Slot[], productAvailability: ProductAvailability[]) => void;
clearSlotsData: () => void;
}
export const useCentralSlotStore = create<CentralSlotState>((set) => ({
slots: [],
productSlotsMap: {},
setSlotsData: (slots, productAvailability) => {
const productSlotsMap: Record<number, ProductSlotInfo> = {};
// First, create entries for ALL products from productAvailability
productAvailability.forEach((product) => {
productSlotsMap[product.id] = {
slots: [],
isOutOfStock: product.isOutOfStock,
isFlashAvailable: product.isFlashAvailable,
};
});
// Then, populate slots for products that appear in delivery slots
slots.forEach((slot) => {
slot.products?.forEach((product) => {
if (productSlotsMap[product.id]) {
productSlotsMap[product.id].slots.push(slot);
}
});
});
set({ slots, productSlotsMap });
},
clearSlotsData: () => set({ slots: [], productSlotsMap: {} }),
}));
export function useInitializeCentralSlotStore() {
const { data: slotsData } = useSlots();
const setSlotsData = useCentralSlotStore((state) => state.setSlotsData);
useEffect(() => {
if (slotsData?.slots) {
setSlotsData(slotsData.slots, slotsData.productAvailability || []);
}
}, [slotsData, setSlotsData]);
}

7
apps/user-ui/tsconfig.json
View file

@ -18,6 +18,12 @@
],
"common-ui/*": [
"../../packages/ui/*"
],
"@packages/shared": [
"../../packages/shared"
],
"@packages/shared/*": [
"../../packages/shared/*"
]
},
"moduleSuffixes": [
@ -34,5 +40,6 @@
"**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts",
"../../packages/shared"
]
}

8
package-lock.json generated
View file

@ -5673,6 +5673,10 @@
"node": ">=8.0.0"
}
},
"node_modules/@packages/shared": {
"resolved": "packages/shared",
"link": true
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -25541,6 +25545,10 @@
}
}
},
"packages/shared": {
"name": "@packages/shared",
"version": "1.0.0"
},
"packages/ui": {
"name": "common-ui",
"version": "1.0.0",

9
packages/shared/index.ts Normal file
View file

@ -0,0 +1,9 @@
export const CACHE_FILENAMES = {
products: 'products.json',
stores: 'stores.json',
slots: 'slots.json',
essentialConsts: 'essential-consts.json',
banners: 'banners.json',
} as const
export type CacheFilename = typeof CACHE_FILENAMES[keyof typeof CACHE_FILENAMES]

7
packages/shared/package.json Normal file
View file

@ -0,0 +1,7 @@
{
"name": "@packages/shared",
"version": "1.0.0",
"main": "index.ts",
"types": "index.ts",
"private": true
}