Compare commits
No commits in common. "d9a61818de61addbcb534894d2d6ea113e5d941d" and "e2c6a292a40c7ca99e29e0528d66e32e1ac3be55" have entirely different histories.
d9a61818de
...
e2c6a292a4
13 changed files with 332 additions and 303 deletions
|
|
@ -302,7 +302,7 @@ export default function DeliverySequences() {
|
|||
// Auto-select first slot if no slotId provided
|
||||
useEffect(() => {
|
||||
if (!slotId && slotsData?.slots && slotsData.slots.length > 0) {
|
||||
router.replace(`/(drawer)/dashboard/manage-orders/delivery-sequences?slotId=${slotsData.slots[0].id}`);
|
||||
router.replace(`/manage-orders/delivery-sequences?slotId=${slotsData.slots[0].id}`);
|
||||
}
|
||||
}, [slotId, slotsData, router]);
|
||||
|
||||
|
|
@ -505,7 +505,7 @@ export default function DeliverySequences() {
|
|||
value={selectedSlotId || ""}
|
||||
onValueChange={(val) => {
|
||||
if (val) {
|
||||
router.replace(`/(drawer)/dashboard/manage-orders/delivery-sequences?slotId=${val}`);
|
||||
router.replace(`/manage-orders/delivery-sequences?slotId=${val}`);
|
||||
}
|
||||
}}
|
||||
placeholder="Select slot"
|
||||
|
|
@ -726,7 +726,7 @@ export default function DeliverySequences() {
|
|||
}}
|
||||
onViewDetails={() => {
|
||||
if (selectedOrder) {
|
||||
router.push(`/(drawer)/dashboard/manage-orders/order-details/${selectedOrder.id}`);
|
||||
router.push(`/manage-orders/order-details/${selectedOrder.id}`);
|
||||
}
|
||||
setShowOrderMenu(false);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -105,12 +105,12 @@ const OrderItem = ({ order, refetch }: { order: OrderType; refetch: () => void }
|
|||
const updateItemPackagingMutation = trpc.admin.order.updateOrderItemPackaging.useMutation();
|
||||
|
||||
const handleOrderPress = () => {
|
||||
router.push(`/(drawer)/dashboard/manage-orders/order-details/${order.orderId}` as any);
|
||||
router.push(`/manage-orders/order-details/${order.orderId}` as any);
|
||||
};
|
||||
|
||||
const handleMenuOption = () => {
|
||||
setMenuOpen(false);
|
||||
router.push(`/(drawer)/dashboard/manage-orders/order-details/${order.orderId}` as any);
|
||||
router.push(`/manage-orders/order-details/${order.orderId}` as any);
|
||||
};
|
||||
|
||||
const handleMarkPackaged = (isPackaged: boolean) => {
|
||||
|
|
|
|||
|
|
@ -419,7 +419,7 @@ export default function PricesOverview() {
|
|||
<TouchableOpacity
|
||||
style={tw`flex-row items-center p-4 bg-gray-50 rounded-lg`}
|
||||
onPress={() => {
|
||||
router.push('/(drawer)/dashboard/rebalance-orders' as any);
|
||||
router.push('/rebalance-orders' as any);
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -95,11 +95,11 @@ export default function ProductTags() {
|
|||
};
|
||||
|
||||
const handleAddNewTag = () => {
|
||||
router.push('/(drawer)/dashboard/product-tags/add');
|
||||
router.push('/product-tags/add');
|
||||
};
|
||||
|
||||
const handleOrderTags = () => {
|
||||
router.push('/(drawer)/dashboard/product-tags/order');
|
||||
router.push('/product-tags/order');
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const SlotItemComponent: React.FC<SlotItemProps> = ({
|
|||
</View>
|
||||
<View style={tw`flex-row items-center`}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/(drawer)/dashboard/slots/edit/${slot.id}` as any)}
|
||||
onPress={() => router.push(`/slots/edit/${slot.id}` as any)}
|
||||
style={tw`px-3 py-1 rounded-full bg-pink2 mr-2`}
|
||||
>
|
||||
<View style={tw`flex-row items-center`}>
|
||||
|
|
@ -147,7 +147,7 @@ const SlotItemComponent: React.FC<SlotItemProps> = ({
|
|||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setMenuOpen(false);
|
||||
router.push(`/(drawer)/dashboard/slots/add?baseslot=${slot.id}` as any);
|
||||
router.push(`/slots/add?baseslot=${slot.id}` as any);
|
||||
}}
|
||||
style={tw`py-4 border-b border-gray-200`}
|
||||
>
|
||||
|
|
@ -277,7 +277,7 @@ export default function Slots() {
|
|||
<MyTouchableOpacity
|
||||
testID="add-slot-fab"
|
||||
accessibilityLabel="add-slot-fab"
|
||||
onPress={() => router.push('/(drawer)/dashboard/slots/add' as any)}
|
||||
onPress={() => router.push('/slots/add' as any)}
|
||||
activeOpacity={0.95}
|
||||
style={{ position: 'absolute', bottom: 32, right: 24, zIndex: 100 }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default function SlotDetails() {
|
|||
|
||||
{/* FAB for Edit Slot */}
|
||||
<MyTouchableOpacity
|
||||
onPress={() => router.push(`/(drawer)/dashboard/slots/edit/${slot.id}` as any)}
|
||||
onPress={() => router.push(`/slots/edit/${slot.id}` as any)}
|
||||
activeOpacity={0.95}
|
||||
style={{ position: 'absolute', bottom: 32, right: 24, zIndex: 100 }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export const TagMenu: React.FC<TagMenuProps> = ({
|
|||
|
||||
const handleEditTag = () => {
|
||||
setIsOpen(false);
|
||||
router.push(`/(drawer)/dashboard/product-tags/edit?tagId=${tagId}`);
|
||||
router.push(`/product-tags/edit?tagId=${tagId}`);
|
||||
};
|
||||
|
||||
const handleDeleteTag = () => {
|
||||
|
|
|
|||
|
|
@ -2,16 +2,9 @@ import { router, protectedProcedure } from '@/src/trpc/trpc-index'
|
|||
import { z } from 'zod';
|
||||
import { computeConstants } from '@/src/lib/const-store'
|
||||
import { CONST_KEYS } from '@/src/lib/const-keys'
|
||||
import { scheduleStoreInitialization } from '@/src/stores/store-initializer'
|
||||
import { getAllConstants as getAllConstantsFromDb, upsertConstants as upsertConstantsInDb } from '@/src/dbService'
|
||||
import type { Constant, ConstantUpdateResult } from '@packages/shared'
|
||||
|
||||
// Constants that are baked into the versioned cache files (products.json etc.)
|
||||
// — changing them requires regenerating the cache so the user app picks it up.
|
||||
const CACHE_AFFECTING_KEYS: string[] = [
|
||||
CONST_KEYS.tagsOrder,
|
||||
]
|
||||
|
||||
export const constRouter = router({
|
||||
getConstants: protectedProcedure
|
||||
.query(async (): Promise<Constant[]> => {
|
||||
|
|
@ -71,13 +64,6 @@ export const constRouter = router({
|
|||
// Refresh all constants in Redis after database update
|
||||
await computeConstants();
|
||||
|
||||
// Constants like tagsOrder are baked into the versioned cache files.
|
||||
// Regenerate the cache (bumps cacheVersion) so the user app fetches the
|
||||
// new data (e.g., the new tab order on the home page).
|
||||
if (constants.some((c) => CACHE_AFFECTING_KEYS.includes(c.key))) {
|
||||
await scheduleStoreInitialization()
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
updatedCount: constants.length,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default function HomeLayout() {
|
|||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="product-detail"
|
||||
name="product-detail/[id]"
|
||||
options={{
|
||||
headerShown: false,
|
||||
title: "Product Details",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState, useCallback, useMemo, memo, useRef, useEffect } from "react";
|
||||
import React, { useState, useCallback, useMemo, memo } from "react";
|
||||
import { View, Dimensions, Image, RefreshControl } from "react-native";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { TabView, TabBar } from "react-native-tab-view";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { useRouter } from "expo-router";
|
||||
import {
|
||||
theme,
|
||||
|
|
@ -36,6 +37,14 @@ const itemWidth = screenWidth * 0.45;
|
|||
const heroItemWidth = (screenWidth - 72) / 3;
|
||||
const gridItemWidth = (screenWidth - 48) / 2;
|
||||
|
||||
// Hero product card geometry (used to size the tab scene heights)
|
||||
const heroCardImageHeight = heroItemWidth * 0.82;
|
||||
const heroCardTextBlock = 92;
|
||||
const heroCardHeight = heroCardImageHeight + heroCardTextBlock;
|
||||
const heroRowHeight = heroCardHeight + 12; // + mb-3
|
||||
const TAG_GRID_COLUMNS = 3;
|
||||
const TAB_BAR_HEIGHT = 48;
|
||||
|
||||
const formatTimeRange = (deliveryTime: string) => {
|
||||
const time = dayjs(deliveryTime);
|
||||
const endTime = time.add(1, 'hour');
|
||||
|
|
@ -186,21 +195,22 @@ const SlotCard = memo(({ slot }: SlotCardProps) => {
|
|||
);
|
||||
});
|
||||
|
||||
interface TagTabStripProps {
|
||||
interface TagTabViewProps {
|
||||
dashboardTags: any[];
|
||||
activeTagId: number | null;
|
||||
productsByTagId: Record<number, any[]>;
|
||||
onSelectTag: (id: number) => void;
|
||||
onProductPress: (id: number) => void;
|
||||
}
|
||||
|
||||
// Fixed, horizontally scrollable tab strip (plain ScrollView — no nesting,
|
||||
// so it scrolls reliably on Android). Sits OUTSIDE the vertical FlatList.
|
||||
const TagTabStrip = memo(({
|
||||
const TagTabView = memo(({
|
||||
dashboardTags,
|
||||
activeTagId,
|
||||
productsByTagId,
|
||||
onSelectTag,
|
||||
}: TagTabStripProps) => {
|
||||
const scrollRef = useRef<any>(null);
|
||||
const positions = useRef<number[]>([]);
|
||||
onProductPress,
|
||||
}: TagTabViewProps) => {
|
||||
const [expandedByTagId, setExpandedByTagId] = useState<Record<number, boolean>>({});
|
||||
|
||||
const routes = useMemo(
|
||||
() => dashboardTags.map((tag) => ({ key: String(tag.id), title: tag.tagName })),
|
||||
|
|
@ -212,86 +222,39 @@ const TagTabStrip = memo(({
|
|||
return idx < 0 ? 0 : idx;
|
||||
}, [dashboardTags, activeTagId]);
|
||||
|
||||
useEffect(() => {
|
||||
const x = positions.current[index];
|
||||
if (x != null) {
|
||||
scrollRef.current?.scrollTo({ x: Math.max(0, x - 16), animated: true });
|
||||
}
|
||||
}, [index]);
|
||||
// Height: fit the active tag's visible product rows (default 6 per tag),
|
||||
// plus room for the "Show More" button when it has more products.
|
||||
const activeTagKey = routes[index]?.key;
|
||||
const sceneHeight = useMemo(() => {
|
||||
const tagId = Number(activeTagKey);
|
||||
const count = (productsByTagId[tagId]?.length) || 0;
|
||||
const expanded = expandedByTagId[tagId];
|
||||
const visible = expanded ? count : Math.min(count, 6);
|
||||
const rows = Math.max(1, Math.ceil(visible / TAG_GRID_COLUMNS));
|
||||
const showMore = count > 6 && !expanded;
|
||||
return rows * heroRowHeight + 24 + (showMore ? 52 : 0);
|
||||
}, [activeTagKey, productsByTagId, expandedByTagId]);
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
// horizontal ScrollViews default to flexGrow: 1 — pin it to content height
|
||||
// so it doesn't eat the page space below the tabs
|
||||
style={[tw`bg-transparent`, { flexGrow: 0, height: 48 }]}
|
||||
contentContainerStyle={tw`px-2 items-center`}
|
||||
>
|
||||
{routes.map((route, i) => {
|
||||
const isActive = i === index;
|
||||
return (
|
||||
<MyTouchableOpacity
|
||||
key={route.key}
|
||||
onLayout={(e: any) => {
|
||||
positions.current[i] = e.nativeEvent.layout.x;
|
||||
const renderTabBar = useCallback((props: any) => (
|
||||
<TabBar
|
||||
{...props}
|
||||
scrollEnabled
|
||||
activeColor={theme.colors.brand600}
|
||||
inactiveColor="#64748B"
|
||||
indicatorStyle={{
|
||||
backgroundColor: theme.colors.brand500,
|
||||
height: 4,
|
||||
borderRadius: 999,
|
||||
}}
|
||||
onPress={() => onSelectTag(Number(route.key))}
|
||||
style={tw`h-12 px-3 justify-center`}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={tw`items-center justify-center`}>
|
||||
<MyText
|
||||
style={[
|
||||
tw`text-sm font-bold`,
|
||||
isActive
|
||||
? { color: theme.colors.brand600 }
|
||||
: { color: '#64748B' },
|
||||
]}
|
||||
>
|
||||
{route.title}
|
||||
</MyText>
|
||||
<View
|
||||
style={[
|
||||
tw`h-1 rounded-full mt-1 self-stretch`,
|
||||
{
|
||||
backgroundColor: isActive
|
||||
? theme.colors.brand500
|
||||
: 'transparent',
|
||||
},
|
||||
]}
|
||||
labelStyle={tw`text-sm font-bold`}
|
||||
style={tw`bg-transparent`}
|
||||
tabStyle={{ width: 'auto', paddingHorizontal: 8, minWidth: 0 }}
|
||||
indicatorContainerStyle={tw`mb-1`}
|
||||
/>
|
||||
</View>
|
||||
</MyTouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
);
|
||||
});
|
||||
|
||||
interface TagSceneProps {
|
||||
dashboardTags: any[];
|
||||
activeTagId: number | null;
|
||||
productsByTagId: Record<number, any[]>;
|
||||
expandedByTagId: Record<number, boolean>;
|
||||
onToggleExpand: (tagId: number) => void;
|
||||
onProductPress: (id: number) => void;
|
||||
}
|
||||
|
||||
// Active tag's products grid — rendered inside the vertical FlatList so it
|
||||
// scrolls with the page.
|
||||
const TagScene = memo(({
|
||||
dashboardTags,
|
||||
activeTagId,
|
||||
productsByTagId,
|
||||
expandedByTagId,
|
||||
onToggleExpand,
|
||||
onProductPress,
|
||||
}: TagSceneProps) => {
|
||||
const tagId = activeTagId ?? dashboardTags[0]?.id ?? null;
|
||||
if (tagId == null) return null;
|
||||
), []);
|
||||
|
||||
const renderScene = useCallback(({ route }: any) => {
|
||||
const tagId = Number(route.key);
|
||||
const products = productsByTagId[tagId] || [];
|
||||
const expanded = !!expandedByTagId[tagId];
|
||||
const visible = expanded ? products : products.slice(0, 6);
|
||||
|
|
@ -316,13 +279,26 @@ const TagScene = memo(({
|
|||
<MyTouchableOpacity
|
||||
style={tw`self-center mt-1 mb-2 px-5 py-2.5 rounded-full bg-brand500 shadow-sm`}
|
||||
activeOpacity={0.85}
|
||||
onPress={() => onToggleExpand(tagId)}
|
||||
onPress={() => setExpandedByTagId((prev) => ({ ...prev, [tagId]: true }))}
|
||||
>
|
||||
<MyText style={tw`text-white text-sm font-semibold`}>Show More</MyText>
|
||||
</MyTouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}, [productsByTagId, expandedByTagId, onProductPress]);
|
||||
|
||||
return (
|
||||
<TabView
|
||||
navigationState={{ index, routes }}
|
||||
onIndexChange={(i) => onSelectTag(Number(routes[i].key))}
|
||||
renderTabBar={renderTabBar}
|
||||
renderScene={renderScene}
|
||||
swipeEnabled
|
||||
lazy
|
||||
style={{ height: TAB_BAR_HEIGHT + sceneHeight }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
interface ExploreProductItemProps {
|
||||
|
|
@ -378,58 +354,72 @@ const ProductItem = memo(({ item, onPress }: ProductItemProps) => {
|
|||
});
|
||||
|
||||
interface ListHeaderProps {
|
||||
gradientHeight: number;
|
||||
onGradientLayout: (height: number) => void;
|
||||
storesData: any;
|
||||
sortedSlots: any[];
|
||||
onProductPress: (id: number) => void;
|
||||
dashboardTags: any[];
|
||||
activeTagId: number | null;
|
||||
productsByTagId: Record<number, any[]>;
|
||||
expandedByTagId: Record<number, boolean>;
|
||||
onToggleExpand: (tagId: number) => void;
|
||||
onProductPress: (id: number) => void;
|
||||
onSelectTag: (id: number) => void;
|
||||
storesData: any;
|
||||
sortedSlots: any[];
|
||||
}
|
||||
|
||||
const ListHeader = memo(({
|
||||
gradientHeight,
|
||||
onGradientLayout,
|
||||
storesData,
|
||||
sortedSlots,
|
||||
onProductPress,
|
||||
dashboardTags,
|
||||
activeTagId,
|
||||
productsByTagId,
|
||||
expandedByTagId,
|
||||
onToggleExpand,
|
||||
onProductPress,
|
||||
onSelectTag,
|
||||
storesData,
|
||||
sortedSlots,
|
||||
}: ListHeaderProps) => {
|
||||
const handleLayout = useCallback((event: any) => {
|
||||
const { y, height } = event.nativeEvent.layout;
|
||||
onGradientLayout(y + height);
|
||||
}, [onGradientLayout]);
|
||||
|
||||
const renderSlotItem = useCallback(({ item }: { item: any }) => (
|
||||
<SlotItem item={item} />
|
||||
), []);
|
||||
|
||||
const gradientStyle = useMemo(() => [
|
||||
tw`absolute left-0 right-0 shadow-lg`,
|
||||
{ height: gradientHeight + 32, zIndex: -1 }
|
||||
], [gradientHeight]);
|
||||
const activeColor = activeTagId == null ? null : getTagColor(activeTagId);
|
||||
const pageTint = activeColor?.pageBg ?? '#FFFFFF';
|
||||
|
||||
return (
|
||||
<>
|
||||
{dashboardTags.length > 0 && (
|
||||
<TagTabStrip
|
||||
dashboardTags={dashboardTags}
|
||||
activeTagId={activeTagId}
|
||||
onSelectTag={onSelectTag}
|
||||
<View onLayout={handleLayout} style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<LinearGradient
|
||||
colors={['#FFFFFF', '#FFFFFF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
style={gradientStyle}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dashboardTags.length > 0 && (
|
||||
<View
|
||||
style={[
|
||||
tw`mx-4 mt-1 rounded-[28px] px-3 pt-3 pb-4`,
|
||||
tw`mx-4 mb-2 rounded-[28px] px-3 pt-3 pb-[30px]`,
|
||||
{ backgroundColor: theme.colors.brand25 },
|
||||
]}
|
||||
>
|
||||
<TagScene
|
||||
<TagTabView
|
||||
dashboardTags={dashboardTags}
|
||||
activeTagId={activeTagId}
|
||||
productsByTagId={productsByTagId}
|
||||
expandedByTagId={expandedByTagId}
|
||||
onToggleExpand={onToggleExpand}
|
||||
onSelectTag={onSelectTag}
|
||||
onProductPress={onProductPress}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
tw`rounded-t-3xl px-4`,
|
||||
|
|
@ -508,6 +498,7 @@ export default function Dashboard() {
|
|||
const userDetails = useUserDetails();
|
||||
const [inputQuery, setInputQuery] = useState("");
|
||||
const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
|
||||
const [gradientHeight, setGradientHeight] = useState(0);
|
||||
const [displayedProducts, setDisplayedProducts] = useState<any[]>([]);
|
||||
const [visibleCount, setVisibleCount] = useState(21);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
|
|
@ -533,10 +524,6 @@ export default function Dashboard() {
|
|||
|
||||
const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
|
||||
const activeTagId = selectedTagId ?? dashboardTags[0]?.id ?? null;
|
||||
const [expandedByTagId, setExpandedByTagId] = useState<Record<number, boolean>>({});
|
||||
const handleToggleExpand = useCallback((tagId: number) => {
|
||||
setExpandedByTagId((prev) => ({ ...prev, [tagId]: true }));
|
||||
}, []);
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
|
|
@ -593,14 +580,35 @@ export default function Dashboard() {
|
|||
productById.set(product.id, product);
|
||||
}
|
||||
|
||||
// Respect the admin-curated order — tag.productIds is already ordered by
|
||||
// the tag's sortOrder (backend reorders it when building the cache).
|
||||
map[tag.id] = (tag.productIds || [])
|
||||
.map((id: number) => productById.get(id))
|
||||
.filter(Boolean) as any[];
|
||||
// tag.productIds is already in the admin-curated order (backend sorts by sortOrder).
|
||||
const orderedIds = (tag.productIds || []).filter((id: number) => productById.has(id));
|
||||
const ordered: any[] = [];
|
||||
const rest: any[] = [];
|
||||
for (const id of orderedIds) {
|
||||
const product = productById.get(id);
|
||||
const isOutOfStock = Boolean(productSlotsMap[id]?.isOutOfStock) || !getQuickestSlot(id);
|
||||
if (isOutOfStock) rest.push(product);
|
||||
else ordered.push(product);
|
||||
}
|
||||
|
||||
// Products in the tag's productIds but not in the curated order (added later) — availability sort.
|
||||
const seen = new Set(orderedIds);
|
||||
const extra = products
|
||||
.filter((product: any) => (tag.productIds?.includes(product.id) ?? false) && !seen.has(product.id))
|
||||
.sort((a: any, b: any) => {
|
||||
const slotA = getQuickestSlot(a.id)
|
||||
const slotB = getQuickestSlot(b.id)
|
||||
const aOutOfStock = Boolean(productSlotsMap[a.id]?.isOutOfStock) || !slotA
|
||||
const bOutOfStock = Boolean(productSlotsMap[b.id]?.isOutOfStock) || !slotB
|
||||
if (aOutOfStock && !bOutOfStock) return 1
|
||||
if (!aOutOfStock && bOutOfStock) return -1
|
||||
return 0
|
||||
});
|
||||
|
||||
map[tag.id] = [...ordered, ...rest, ...extra];
|
||||
}
|
||||
return map;
|
||||
}, [dashboardTags, products]);
|
||||
}, [dashboardTags, products, getQuickestSlot, productSlotsMap]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
|
|
@ -634,6 +642,10 @@ export default function Dashboard() {
|
|||
router.push(`/(drawer)/(tabs)/home/product-detail/${id}`);
|
||||
}, [router]);
|
||||
|
||||
const handleGradientLayout = useCallback((height: number) => {
|
||||
setGradientHeight(height);
|
||||
}, []);
|
||||
|
||||
const handleSearchPress = useCallback(() => {
|
||||
router.push("/(drawer)/(tabs)/home/search-results");
|
||||
}, [router]);
|
||||
|
|
@ -645,17 +657,17 @@ export default function Dashboard() {
|
|||
|
||||
const listHeader = useMemo(() => (
|
||||
<ListHeader
|
||||
gradientHeight={gradientHeight}
|
||||
onGradientLayout={handleGradientLayout}
|
||||
storesData={storesData}
|
||||
sortedSlots={sortedSlots}
|
||||
onProductPress={handleProductPress}
|
||||
dashboardTags={dashboardTags}
|
||||
activeTagId={activeTagId}
|
||||
productsByTagId={productsByTagId}
|
||||
expandedByTagId={expandedByTagId}
|
||||
onToggleExpand={handleToggleExpand}
|
||||
onProductPress={handleProductPress}
|
||||
onSelectTag={setSelectedTagId}
|
||||
storesData={storesData}
|
||||
sortedSlots={sortedSlots}
|
||||
/>
|
||||
), [dashboardTags, activeTagId, productsByTagId, expandedByTagId, handleToggleExpand, handleProductPress, storesData, sortedSlots]);
|
||||
), [gradientHeight, handleGradientLayout, storesData, sortedSlots, handleProductPress, dashboardTags, activeTagId, productsByTagId]);
|
||||
|
||||
const pageTint = activeTagId == null ? '#FFFFFF' : getTagColor(activeTagId).pageBg;
|
||||
const pageTintStyle = useMemo(() => [
|
||||
|
|
@ -750,9 +762,7 @@ export default function Dashboard() {
|
|||
<MyText style={tw`text-gray-500`}>No products available</MyText>
|
||||
</View>
|
||||
}
|
||||
// NOTE: do not add removeClippedSubviews here - it breaks touch
|
||||
// delivery to the nested horizontal scrollables in ListHeaderComponent
|
||||
// (tag tabs / slots) on Android.
|
||||
removeClippedSubviews={true}
|
||||
maxToRenderPerBatch={10}
|
||||
windowSize={5}
|
||||
initialNumToRender={10}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { View, Dimensions, ScrollView } from "react-native";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { useRouter } from "expo-router";
|
||||
import {
|
||||
tw,
|
||||
useManualRefresh,
|
||||
useMarkDataFetchers,
|
||||
AppContainer,
|
||||
MyFlatList,
|
||||
MyText,
|
||||
MyTouchableOpacity,
|
||||
} from "common-ui";
|
||||
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
||||
import ProductCard from "@/components/ProductCard";
|
||||
|
|
@ -16,35 +17,34 @@ import FloatingCartBar from "@/components/floating-cart-bar";
|
|||
import TabLayoutWrapper from "@/components/TabLayoutWrapper";
|
||||
|
||||
const { width: screenWidth } = Dimensions.get("window");
|
||||
// Same 3-column hero card sizing used on the home page.
|
||||
const heroItemWidth = (screenWidth - 72) / 3;
|
||||
const SHOW_MORE_STEP = 6;
|
||||
const itemWidth = screenWidth * 0.45;
|
||||
|
||||
interface OffersSectionProps {
|
||||
const rowListContent = { paddingBottom: 16, paddingHorizontal: 16 };
|
||||
|
||||
interface OffersRowProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
products: any[];
|
||||
expanded: boolean;
|
||||
onExpand: () => void;
|
||||
onProductPress: (id: number) => void;
|
||||
}
|
||||
|
||||
// Grid section (home page style): shows the first SHOW_MORE_STEP products
|
||||
// with a "Show More" button to reveal the rest.
|
||||
const OffersSection = ({
|
||||
title,
|
||||
subtitle,
|
||||
products,
|
||||
expanded,
|
||||
onExpand,
|
||||
onProductPress,
|
||||
}: OffersSectionProps) => {
|
||||
const visible = expanded ? products : products.slice(0, SHOW_MORE_STEP);
|
||||
const hasMore = products.length > SHOW_MORE_STEP && !expanded;
|
||||
const OffersRow = ({ title, subtitle, products, onProductPress }: OffersRowProps) => {
|
||||
const renderItem = ({ item }: { item: any }) => (
|
||||
<View style={tw`mr-4`}>
|
||||
<ProductCard
|
||||
item={item}
|
||||
itemWidth={itemWidth}
|
||||
onPress={() => onProductPress(item.id)}
|
||||
showDeliveryInfo={false}
|
||||
useAddToCartDialog={true}
|
||||
miniView={true}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={tw`pt-4`}>
|
||||
<View style={tw`mb-2 px-4`}>
|
||||
<View style={tw`bg-white`}>
|
||||
<View style={tw`mb-2 pt-4 px-4`}>
|
||||
<MyText style={tw`text-2xl font-extrabold text-gray-900 tracking-tight`}>
|
||||
{title}
|
||||
</MyText>
|
||||
|
|
@ -61,32 +61,24 @@ const OffersSection = ({
|
|||
</MyText>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View style={tw`flex-row flex-wrap justify-between px-4`}>
|
||||
{visible.map((item: any) => (
|
||||
<View key={item.id} style={tw`mb-3`}>
|
||||
<ProductCard
|
||||
item={item}
|
||||
itemWidth={heroItemWidth}
|
||||
onPress={() => onProductPress(item.id)}
|
||||
showDeliveryInfo={false}
|
||||
useAddToCartDialog={true}
|
||||
miniView={true}
|
||||
variant="hero"
|
||||
<View style={tw`relative`}>
|
||||
<MyFlatList
|
||||
data={products}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={rowListContent}
|
||||
renderItem={renderItem}
|
||||
removeClippedSubviews={true}
|
||||
/>
|
||||
<LinearGradient
|
||||
colors={["transparent", "rgba(0,0,0,0.08)"]}
|
||||
start={{ x: 0, y: 0.5 }}
|
||||
end={{ x: 1, y: 0.5 }}
|
||||
style={tw`absolute right-4 top-0 bottom-4 w-12 rounded-l-xl`}
|
||||
pointerEvents="none"
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{hasMore && (
|
||||
<MyTouchableOpacity
|
||||
style={tw`self-center mt-1 mb-2 px-5 py-2.5 rounded-full bg-brand500 shadow-sm`}
|
||||
activeOpacity={0.85}
|
||||
onPress={onExpand}
|
||||
>
|
||||
<MyText style={tw`text-white text-sm font-semibold`}>Show More</MyText>
|
||||
</MyTouchableOpacity>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
|
@ -94,8 +86,6 @@ const OffersSection = ({
|
|||
|
||||
export default function Offers() {
|
||||
const router = useRouter();
|
||||
const [expandedOffers, setExpandedOffers] = useState(false);
|
||||
const [expandedCombos, setExpandedCombos] = useState(false);
|
||||
|
||||
const { data, isLoading, error, refetch } =
|
||||
trpc.user.product.getOffersPage.useQuery();
|
||||
|
|
@ -145,21 +135,17 @@ export default function Offers() {
|
|||
return (
|
||||
<TabLayoutWrapper>
|
||||
<ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
|
||||
<OffersSection
|
||||
title="Offers"
|
||||
subtitle="Great prices on select items"
|
||||
products={offers}
|
||||
expanded={expandedOffers}
|
||||
onExpand={() => setExpandedOffers(true)}
|
||||
onProductPress={handleProductPress}
|
||||
/>
|
||||
|
||||
<OffersSection
|
||||
<OffersRow
|
||||
title="Combos"
|
||||
subtitle="Bundle your favorites and save"
|
||||
products={combos}
|
||||
expanded={expandedCombos}
|
||||
onExpand={() => setExpandedCombos(true)}
|
||||
onProductPress={handleProductPress}
|
||||
/>
|
||||
|
||||
<OffersRow
|
||||
title="Offers"
|
||||
subtitle="Great prices on select items"
|
||||
products={offers}
|
||||
onProductPress={handleProductPress}
|
||||
/>
|
||||
</ScrollView>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ import WebViewWrapper from "@/components/WebViewWrapper";
|
|||
import BackHandlerWrapper from "@/components/BackHandler";
|
||||
import AddToCartDialog from "@/src/components/AddToCartDialog";
|
||||
import React from "react";
|
||||
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||
import NotifChecker from "@/services/notif-service/notif-checker";
|
||||
|
||||
export default function RootLayout() {
|
||||
|
|
@ -48,7 +47,6 @@ export default function RootLayout() {
|
|||
}
|
||||
|
||||
return (
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
|
||||
<MyStatusBar />
|
||||
<SafeAreaProvider>
|
||||
|
|
@ -92,6 +90,5 @@ export default function RootLayout() {
|
|||
</SafeAreaProvider>
|
||||
<Toast />
|
||||
</ThemeProvider>
|
||||
</GestureHandlerRootView>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,52 +6,82 @@ import { AllProductsApiType, StoresApiType, SlotsApiType, EssentialConstsApiType
|
|||
import { CACHE_FILENAMES } from "@packages/shared";
|
||||
import { StorageServiceCasual } from 'common-ui';
|
||||
|
||||
// The only persisted payload: the small essential-consts config object
|
||||
// (assetsDomain, cache versions, etc.). The big data payloads (products,
|
||||
// stores, slots, availability, banners) are fetched fresh each session and
|
||||
// kept in memory by react-query — they are NOT written to storage.
|
||||
const ESSENTIAL_CONSTS_KEY = 'essential_consts'
|
||||
|
||||
// Local useGetEssentialConsts hook
|
||||
export const useGetEssentialConsts = () => {
|
||||
const [initialData, setInitialData] = useState<EssentialConstsApiType | undefined>(undefined)
|
||||
const query = trpc.common.essentialConsts.useQuery(undefined, {
|
||||
refetchInterval: 60000,
|
||||
})
|
||||
return { ...query, refetch: query.refetch }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Persisted cache helpers — store fetched JSON keyed by its versioned URL.
|
||||
// Only refetch + repersist when the version (URL) changes.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface PersistedCache<T> {
|
||||
version: string
|
||||
data: T
|
||||
}
|
||||
|
||||
const CACHE_STORAGE_KEYS = {
|
||||
products: 'cache_products',
|
||||
stores: 'cache_stores',
|
||||
slots: 'cache_slots',
|
||||
banners: 'cache_banners',
|
||||
availability: 'cache_availability',
|
||||
storeProducts: (storeId: number) => `cache_store_${storeId}`,
|
||||
} as const
|
||||
|
||||
async function readPersistedCache<T>(key: string): Promise<PersistedCache<T> | null> {
|
||||
const raw = await StorageServiceCasual.getItem(key)
|
||||
if (!raw) return null
|
||||
try {
|
||||
return JSON.parse(raw) as PersistedCache<T>
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function writePersistedCache<T>(key: string, version: string, data: T): Promise<void> {
|
||||
await StorageServiceCasual.setItem(key, JSON.stringify({ version, data }))
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the persisted cache for `storageKey` and reports whether its version
|
||||
* matches the current `version`. Returns { initialData, isReady }.
|
||||
* - version matches → serve persisted data, no network refetch needed.
|
||||
* - version differs → signal to refetch (caller's query fetches + repersists).
|
||||
*/
|
||||
function usePersistedCache<T>(storageKey: string, version: string | null) {
|
||||
const [initialData, setInitialData] = useState<T | undefined>(undefined)
|
||||
const [isReady, setIsReady] = useState(false)
|
||||
|
||||
// Load the last persisted response so config is available immediately.
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
StorageServiceCasual.getItem(ESSENTIAL_CONSTS_KEY).then((raw) => {
|
||||
if (cancelled) return
|
||||
if (raw) {
|
||||
try {
|
||||
setInitialData(JSON.parse(raw))
|
||||
} catch {
|
||||
// ignore corrupt cache
|
||||
setIsReady(false)
|
||||
setInitialData(undefined)
|
||||
if (!version) {
|
||||
setIsReady(true)
|
||||
return
|
||||
}
|
||||
readPersistedCache<T>(storageKey).then((persisted) => {
|
||||
if (cancelled) return
|
||||
if (persisted && persisted.version === version) {
|
||||
setInitialData(persisted.data)
|
||||
}
|
||||
setIsReady(true)
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
}, [storageKey, version])
|
||||
|
||||
const query = trpc.common.essentialConsts.useQuery(undefined, {
|
||||
refetchInterval: 60000,
|
||||
enabled: isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
|
||||
// Persist the latest response.
|
||||
useEffect(() => {
|
||||
if (query.data) {
|
||||
StorageServiceCasual.setItem(ESSENTIAL_CONSTS_KEY, JSON.stringify(query.data))
|
||||
}
|
||||
}, [query.data])
|
||||
|
||||
return { ...query, refetch: query.refetch }
|
||||
return { initialData, isReady }
|
||||
}
|
||||
|
||||
type ProductsResponse = AllProductsApiType;
|
||||
type StoresResponse = StoresApiType;
|
||||
type SlotsResponse = SlotsApiType;
|
||||
type EssentialConstsResponse = EssentialConstsApiType;
|
||||
type BannersResponse = BannersApiType;
|
||||
type StoreWithProductsResponse = StoreWithProductsApiType;
|
||||
type AvailabilityResponse = AvailabilityApiType;
|
||||
|
|
@ -112,6 +142,7 @@ export function useAllProducts() {
|
|||
const cacheUrl = useCacheUrl(CACHE_FILENAMES.products)
|
||||
const { data: availabilityData } = useAvailability()
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<ProductsResponse>(CACHE_STORAGE_KEYS.products, version)
|
||||
|
||||
const productsQuery = useQuery<ProductsResponse>({
|
||||
queryKey: ['all-products', version],
|
||||
|
|
@ -120,10 +151,12 @@ export function useAllProducts() {
|
|||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<ProductsResponse>(cacheUrl)
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.products, version, response.data)
|
||||
return response.data
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
|
||||
const mergedProducts = React.useMemo(() => {
|
||||
|
|
@ -164,6 +197,7 @@ export function useAllProducts() {
|
|||
export function useAvailability() {
|
||||
const cacheUrl = useAvailabilityCacheUrl()
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<AvailabilityResponse>(CACHE_STORAGE_KEYS.availability, version)
|
||||
|
||||
return useQuery<AvailabilityResponse>({
|
||||
queryKey: ['availability', version],
|
||||
|
|
@ -172,16 +206,19 @@ export function useAvailability() {
|
|||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<AvailabilityResponse>(cacheUrl)
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.availability, version, response.data)
|
||||
return response.data
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
}
|
||||
|
||||
export function useStores() {
|
||||
const cacheUrl = useCacheUrl(CACHE_FILENAMES.stores)
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<StoresResponse>(CACHE_STORAGE_KEYS.stores, version)
|
||||
|
||||
return useQuery<StoresResponse>({
|
||||
queryKey: ['stores', version],
|
||||
|
|
@ -190,16 +227,19 @@ export function useStores() {
|
|||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<StoresResponse>(cacheUrl)
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.stores, version, response.data)
|
||||
return response.data
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
}
|
||||
|
||||
export function useSlots() {
|
||||
const cacheUrl = useSlotsCacheUrl()
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<SlotsResponse>(CACHE_STORAGE_KEYS.slots, version)
|
||||
|
||||
return useQuery<SlotsResponse>({
|
||||
queryKey: ['slots', version],
|
||||
|
|
@ -208,28 +248,35 @@ export function useSlots() {
|
|||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<SlotsResponse>(cacheUrl+'?v=123')
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.slots, version, response.data)
|
||||
return response.data
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
}
|
||||
|
||||
export function useBanners() {
|
||||
const cacheUrl = useCacheUrl(CACHE_FILENAMES.banners)
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<BannersResponse>(CACHE_STORAGE_KEYS.banners, version)
|
||||
|
||||
return useQuery<BannersResponse>({
|
||||
queryKey: ['banners', version],
|
||||
queryFn: async () => {
|
||||
|
||||
if (!cacheUrl) {
|
||||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<BannersResponse>(cacheUrl)
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.banners, version, response.data)
|
||||
return response.data
|
||||
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -244,6 +291,7 @@ export function useStoreWithProducts(storeId: number) {
|
|||
? `${assetsDomain}${apiCacheKey}/v-${cacheVersion}/stores/${storeId}.json`
|
||||
: null
|
||||
const version = cacheUrl ?? ''
|
||||
const { initialData, isReady } = usePersistedCache<StoreWithProductsResponse>(CACHE_STORAGE_KEYS.storeProducts(storeId), version)
|
||||
|
||||
return useQuery<StoreWithProductsResponse>({
|
||||
queryKey: ['store-with-products', storeId, version],
|
||||
|
|
@ -252,9 +300,11 @@ export function useStoreWithProducts(storeId: number) {
|
|||
throw new Error('Cache URL not available')
|
||||
}
|
||||
const response = await axios.get<StoreWithProductsResponse>(cacheUrl)
|
||||
await writePersistedCache(CACHE_STORAGE_KEYS.storeProducts(storeId), version, response.data)
|
||||
return response.data
|
||||
},
|
||||
staleTime: 60000, // 1 minute
|
||||
enabled: !!cacheUrl,
|
||||
enabled: !!cacheUrl && isReady,
|
||||
placeholderData: initialData,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue