557 lines
25 KiB
JavaScript
557 lines
25 KiB
JavaScript
import { o as __toESM } from "../_runtime.mjs";
|
|
import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
|
|
import { i as Truck, l as ShoppingCart, n as X, t as Zap } from "../_libs/lucide-react.mjs";
|
|
import { a as MyText, l as Quantifier, n as BottomDialog, s as MyTouchableOpacity, u as SearchBar } from "./src-u_N1opJl.mjs";
|
|
import { a as useUpdateCartItem, i as useRemoveFromCart, n as useAddToCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
|
|
import { a as useStores, n as useBanners, r as useSlots, t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
|
|
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
|
|
import { t as create } from "../_libs/zustand.mjs";
|
|
import { t as require_dayjs_min } from "../_libs/dayjs.mjs";
|
|
//#region node_modules/.nitro/vite/services/ssr/assets/home-BxXKVXbQ.js
|
|
var import_react = /* @__PURE__ */ __toESM(require_react());
|
|
var import_jsx_runtime = require_jsx_runtime();
|
|
var import_dayjs_min = /* @__PURE__ */ __toESM(require_dayjs_min());
|
|
var useCartStore = create((set) => ({
|
|
addedToCartProduct: null,
|
|
setAddedToCartProduct: (product) => set({ addedToCartProduct: product }),
|
|
clearAddedToCartProduct: () => set({ addedToCartProduct: null })
|
|
}));
|
|
var formatTimeRange = (deliveryTime) => {
|
|
const time = (0, import_dayjs_min.default)(deliveryTime);
|
|
const endTime = time.add(1, "hour");
|
|
const startPeriod = time.format("A");
|
|
const endPeriod = endTime.format("A");
|
|
if (startPeriod === endPeriod) return `${time.format("h")}-${endTime.format("h")} ${startPeriod}`;
|
|
else return `${time.format("h:mm")} ${startPeriod} - ${endTime.format("h:mm")} ${endPeriod}`;
|
|
};
|
|
function AddToCartDialog() {
|
|
const navigate = useNavigate();
|
|
const { addedToCartProduct, clearAddedToCartProduct } = useCartStore();
|
|
const [quantity, setQuantity] = (0, import_react.useState)(1);
|
|
const [selectedSlotId, setSelectedSlotId] = (0, import_react.useState)(null);
|
|
const [selectedFlashDelivery, setSelectedFlashDelivery] = (0, import_react.useState)(false);
|
|
const { data: slotsData } = useSlots();
|
|
const { data: cartData } = useGetCart();
|
|
const isFlashDeliveryEnabled = true;
|
|
const addToCart = useAddToCart("regular");
|
|
const updateItem = useUpdateCartItem("regular");
|
|
const removeItem = useRemoveFromCart("regular");
|
|
const isOpen = !!addedToCartProduct;
|
|
const product = addedToCartProduct?.product;
|
|
(0, import_react.useEffect)(() => {
|
|
if (isOpen && product) {
|
|
const cartItem = cartData?.items?.find((item) => item.productId === product.id);
|
|
const cartQuantity = cartItem?.quantity || 0;
|
|
setQuantity(cartQuantity === 0 ? 1 : cartQuantity);
|
|
setSelectedSlotId(cartItem?.slotId || null);
|
|
}
|
|
}, [
|
|
isOpen,
|
|
cartData,
|
|
product
|
|
]);
|
|
const { slotMap, productSlotIdsMap } = (0, import_react.useMemo)(() => {
|
|
const slotMap = {};
|
|
const productSlotIdsMap = {};
|
|
if (slotsData?.slots) slotsData.slots.forEach((slot) => {
|
|
slotMap[slot.id] = slot;
|
|
slot.products?.forEach((p) => {
|
|
if (!productSlotIdsMap[p.id]) productSlotIdsMap[p.id] = [];
|
|
productSlotIdsMap[p.id].push(slot.id);
|
|
});
|
|
});
|
|
return {
|
|
slotMap,
|
|
productSlotIdsMap
|
|
};
|
|
}, [slotsData]);
|
|
const availableSlotIds = productSlotIdsMap[product?.id] || [];
|
|
const availableSlots = availableSlotIds.map((slotId) => slotMap[slotId]).filter(Boolean).filter((slot) => (0, import_dayjs_min.default)(slot.deliveryTime).isAfter((0, import_dayjs_min.default)()));
|
|
const cartItem = cartData?.items?.find((item) => item.productId === product?.id);
|
|
const isUpdate = (cartItem?.quantity || 0) >= 1;
|
|
const showFlashOption = (slotsData?.productAvailability?.find((pa) => pa.id === product?.id))?.isFlashAvailable === true && isFlashDeliveryEnabled;
|
|
const handleAddToCart = () => {
|
|
if (selectedFlashDelivery) {
|
|
navigate({ to: "/flash" });
|
|
clearAddedToCartProduct();
|
|
return;
|
|
}
|
|
if (isUpdate && cartItem) updateItem.mutate({
|
|
productId: product.id,
|
|
quantity,
|
|
slotId: selectedSlotId,
|
|
deliveryDate: selectedSlotId ? slotMap[selectedSlotId]?.deliveryTime : null
|
|
}, { onSuccess: () => clearAddedToCartProduct() });
|
|
else {
|
|
const slotId = selectedSlotId ?? availableSlotIds[0] ?? 0;
|
|
addToCart.mutate({
|
|
productId: product.id,
|
|
quantity,
|
|
storeId: product.storeId || 1,
|
|
slotId,
|
|
deliveryDate: slotMap[slotId]?.deliveryTime || null
|
|
}, { onSuccess: () => clearAddedToCartProduct() });
|
|
}
|
|
};
|
|
const handleRemove = () => {
|
|
if (cartItem) removeItem.mutate(product.id, { onSuccess: () => clearAddedToCartProduct() });
|
|
else clearAddedToCartProduct();
|
|
};
|
|
if (!isOpen || !addedToCartProduct) return null;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BottomDialog, {
|
|
open: isOpen,
|
|
onClose: clearAddedToCartProduct,
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "px-2",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-start gap-3 mb-4",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-50",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "h-5 w-5 text-blue-500" })
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex-1",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "bold",
|
|
className: "text-lg",
|
|
children: "Select Delivery Slot"
|
|
}), product?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-sm text-gray-500",
|
|
children: [
|
|
product.name,
|
|
" (",
|
|
product.productQuantity,
|
|
product.unitNotation ? ` ${product.unitNotation}` : "",
|
|
")"
|
|
]
|
|
})]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: clearAddedToCartProduct,
|
|
className: "text-gray-400 hover:text-gray-600",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "h-5 w-5" })
|
|
})
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "max-h-[40vh] space-y-3 overflow-y-auto mb-4",
|
|
children: availableSlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
|
|
onClick: () => {
|
|
setSelectedSlotId(slot.id);
|
|
setSelectedFlashDelivery(false);
|
|
},
|
|
className: `flex items-start gap-3 rounded-xl border bg-gray-50 p-4 ${selectedSlotId === slot.id ? "border-brand-500" : "border-gray-100"}`,
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "mt-0.5 h-5 w-5 shrink-0 text-blue-500" }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
weight: "bold",
|
|
className: "flex-1 text-sm",
|
|
children: [(0, import_dayjs_min.default)(slot.deliveryTime).format("ddd, DD MMM • "), formatTimeRange(slot.deliveryTime)]
|
|
}),
|
|
selectedSlotId === slot.id ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-6 w-6 shrink-0 text-brand-500",
|
|
fill: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-6 w-6 shrink-0 text-gray-300",
|
|
fill: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
|
|
})
|
|
]
|
|
}, slot.id))
|
|
}),
|
|
showFlashOption && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
|
|
onClick: () => {
|
|
setSelectedFlashDelivery(true);
|
|
setSelectedSlotId(null);
|
|
},
|
|
className: `flex items-center gap-3 rounded-xl border p-4 mb-4 ${selectedFlashDelivery ? "border-pink-500 bg-pink-50" : "border-pink-200 bg-pink-50"}`,
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 shrink-0 text-pink-500" }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "bold",
|
|
className: "flex-1 text-sm",
|
|
children: "1 hr Delivery"
|
|
}),
|
|
selectedFlashDelivery ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-6 w-6 shrink-0 text-pink-500",
|
|
fill: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-6 w-6 shrink-0 text-pink-300",
|
|
fill: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
|
|
})
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mb-4",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "bold",
|
|
className: "mb-2 text-sm",
|
|
children: "Quantity"
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-center gap-3",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Quantifier, {
|
|
value: quantity,
|
|
setValue: setQuantity,
|
|
step: 1,
|
|
unit: product?.unitNotation
|
|
}), isUpdate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
|
|
onClick: handleRemove,
|
|
className: "rounded-lg border border-red-200 bg-red-50 p-2",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-5 w-5 text-red-500",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
strokeWidth: 2,
|
|
d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
})
|
|
})
|
|
})]
|
|
})]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex gap-3 pb-4",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
|
|
onClick: handleAddToCart,
|
|
disabled: !selectedSlotId && !selectedFlashDelivery || addToCart.isPending || updateItem.isPending,
|
|
className: `flex flex-1 items-center justify-center gap-2 rounded-xl py-3 font-bold text-white transition-colors ${!selectedSlotId && !selectedFlashDelivery || addToCart.isPending || updateItem.isPending ? "bg-brand-500/50" : "bg-brand-500 hover:bg-brand-600"}`,
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCart, { className: "h-4 w-4" }), addToCart.isPending || updateItem.isPending ? isUpdate ? "Updating..." : "Adding..." : isUpdate ? "Update Item" : "Add to Cart"]
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: clearAddedToCartProduct,
|
|
className: "flex-1 rounded-xl bg-gray-100 py-3 font-bold text-gray-700 hover:bg-gray-200 transition-colors",
|
|
children: "Cancel"
|
|
})]
|
|
})
|
|
]
|
|
})
|
|
});
|
|
}
|
|
function HomePage() {
|
|
const navigate = useNavigate();
|
|
const { data: productsData } = useAllProducts();
|
|
const { data: storesData } = useStores();
|
|
const { data: bannersData } = useBanners();
|
|
const { setAddedToCartProduct } = useCartStore();
|
|
const stores = storesData?.stores || [];
|
|
const banners = bannersData?.banners || [];
|
|
const allProducts = productsData?.products || [];
|
|
const handleAddToCart = (product) => {
|
|
setAddedToCartProduct({
|
|
productId: product.id,
|
|
product
|
|
});
|
|
};
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mx-auto min-h-screen max-w-7xl bg-white",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "sticky top-0 z-10 bg-white/95 backdrop-blur-sm px-4 md:px-6 lg:px-8 pt-4 pb-3 border-b border-gray-100",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchBar, {
|
|
placeholder: "Search products here...",
|
|
onSearch: (q) => navigate({
|
|
to: "/home/search",
|
|
search: { q }
|
|
})
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "px-4 md:px-6 lg:px-8",
|
|
children: [
|
|
banners.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "mt-4 mb-8 overflow-hidden rounded-xl",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BannerCarousel, { banners })
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mb-8",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex items-center justify-between mb-4",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "bold",
|
|
className: "text-lg md:text-xl",
|
|
children: "Our Stores"
|
|
})
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4",
|
|
children: stores.map((store) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreCard, {
|
|
store,
|
|
onClick: () => navigate({
|
|
to: "/stores/$storeId",
|
|
params: { storeId: String(store.id) }
|
|
})
|
|
}, store.id))
|
|
})]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mb-24",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex items-center justify-between mb-4",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "bold",
|
|
className: "text-lg md:text-xl",
|
|
children: "All Products"
|
|
})
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4",
|
|
children: allProducts.slice(0, 30).map((product) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, {
|
|
product,
|
|
onClick: () => navigate({
|
|
to: "/home/product/$id",
|
|
params: { id: String(product.id) }
|
|
}),
|
|
onAddToCart: () => handleAddToCart(product)
|
|
}, product.id))
|
|
})]
|
|
})
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingCartBar, { onClick: () => navigate({ to: "/cart" }) }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddToCartDialog, {})
|
|
]
|
|
});
|
|
}
|
|
function BannerCarousel({ banners }) {
|
|
const [index, setIndex] = (0, import_react.useState)(0);
|
|
const images = banners.map((b) => b.imageUrl).filter(Boolean);
|
|
(0, import_react.useEffect)(() => {
|
|
if (images.length <= 1) return;
|
|
const timer = setInterval(() => {
|
|
setIndex((i) => (i + 1) % images.length);
|
|
}, 4e3);
|
|
return () => clearInterval(timer);
|
|
}, [images.length]);
|
|
if (images.length === 0) return null;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "relative group",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
src: images[index],
|
|
alt: "Banner",
|
|
className: "h-36 sm:h-44 md:h-52 lg:h-64 w-full rounded-xl object-cover transition-all duration-500"
|
|
}), images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: () => setIndex((i) => (i - 1 + images.length) % images.length),
|
|
className: "absolute left-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "w-4 h-4",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
strokeWidth: 2,
|
|
d: "M15 19l-7-7 7-7"
|
|
})
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: () => setIndex((i) => (i + 1) % images.length),
|
|
className: "absolute right-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "w-4 h-4",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
strokeWidth: 2,
|
|
d: "M9 5l7 7-7 7"
|
|
})
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5",
|
|
children: images.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: () => setIndex(i),
|
|
className: `h-2 rounded-full transition-all ${i === index ? "w-6 bg-white" : "w-2 bg-white/50"}`
|
|
}, i))
|
|
})
|
|
] })]
|
|
});
|
|
}
|
|
function StoreCard({ store, onClick }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
|
|
onClick,
|
|
className: "rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100",
|
|
children: store.signedImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
src: store.signedImageUrl,
|
|
alt: store.name,
|
|
className: "h-full w-full object-cover"
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex h-full items-center justify-center text-gray-400",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "w-8 h-8",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
strokeWidth: 1.5,
|
|
d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
|
|
})
|
|
})
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "semibold",
|
|
className: "text-sm truncate",
|
|
children: store.name
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-xs text-gray-500",
|
|
children: [store.productCount || 0, " products"]
|
|
})
|
|
]
|
|
});
|
|
}
|
|
function ProductCard({ product, onClick, onAddToCart }) {
|
|
const imageUrl = product.images?.[0];
|
|
const hasDiscount = product.marketPrice != null && product.marketPrice > product.price;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
|
|
onClick,
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100",
|
|
children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
src: imageUrl,
|
|
alt: product.name,
|
|
className: "h-full w-full object-cover"
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex h-full items-center justify-center text-gray-300",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "w-10 h-10",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
strokeWidth: 1.5,
|
|
d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
})
|
|
})
|
|
})
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "semibold",
|
|
className: "text-sm leading-tight line-clamp-2 mb-1",
|
|
children: product.name
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-baseline gap-1.5",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
weight: "bold",
|
|
className: "text-brand-600 text-sm md:text-base",
|
|
children: ["₹", product.price]
|
|
}), hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-xs text-gray-400 line-through",
|
|
children: ["₹", product.marketPrice]
|
|
})]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-[11px] text-gray-400 mb-2",
|
|
children: ["/", product.unit]
|
|
}),
|
|
product.nextDeliveryDate && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mb-3 flex items-center gap-1 self-start rounded-lg bg-brand-50 px-2 py-1 border border-brand-100",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "h-3 w-3 text-brand-600" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
className: "text-[10px] font-bold text-brand-700",
|
|
children: (0, import_dayjs_min.default)(product.nextDeliveryDate).format("ddd, DD MMM • h:mm A")
|
|
})]
|
|
})
|
|
]
|
|
}), onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
|
|
onClick: (e) => {
|
|
e.stopPropagation();
|
|
onAddToCart();
|
|
},
|
|
className: "flex w-full items-center justify-center gap-2 rounded-lg bg-brand-500 py-2 text-sm font-bold text-white hover:bg-brand-600 transition-colors",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCart, { className: "h-4 w-4" }), "Add to Cart"]
|
|
})]
|
|
});
|
|
}
|
|
function FloatingCartBar({ onClick }) {
|
|
const { data: cartData } = useGetCart("regular");
|
|
const { data: productsData } = useAllProducts();
|
|
const products = productsData?.products || [];
|
|
const productsById = {};
|
|
products.forEach((p) => {
|
|
productsById[p.id] = p;
|
|
});
|
|
const cartItems = cartData?.items || [];
|
|
const itemCount = cartItems.length;
|
|
const totalCartValue = cartItems.reduce((sum, item) => {
|
|
return sum + (productsById[item.productId]?.price ?? 0) * item.quantity;
|
|
}, 0);
|
|
const freeDeliveryThreshold = 149;
|
|
const remainingForFreeDelivery = Math.max(0, freeDeliveryThreshold - totalCartValue);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "fixed bottom-0 left-0 right-0 z-20 bg-brand-600 px-4 py-2 md:px-6 md:py-3 shadow-lg",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mx-auto flex max-w-7xl items-center justify-between",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex-1",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-center gap-2",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
weight: "bold",
|
|
className: "text-sm text-white",
|
|
children: ["₹", totalCartValue]
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
className: "text-xs text-white/80",
|
|
children: itemCount === 0 ? "No items in cart" : `• ${itemCount} ${itemCount === 1 ? "item" : "items"}`
|
|
})]
|
|
}), remainingForFreeDelivery > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-[10px] font-bold text-white/70",
|
|
children: [
|
|
"₹",
|
|
remainingForFreeDelivery,
|
|
" more for FREE Delivery"
|
|
]
|
|
}) : itemCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-center gap-1",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
className: "h-3 w-3 text-emerald-300",
|
|
fill: "currentColor",
|
|
viewBox: "0 0 24 24",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
className: "text-[10px] font-bold text-emerald-300",
|
|
children: "Free Delivery Unlocked"
|
|
})]
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
|
|
className: "text-[10px] text-white/50",
|
|
children: [
|
|
"Shop for ₹",
|
|
freeDeliveryThreshold,
|
|
"+ for free shipping"
|
|
]
|
|
})]
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick,
|
|
className: "rounded-full bg-white px-4 py-2 text-sm font-bold text-brand-600 shadow-md hover:bg-gray-100 transition-colors",
|
|
children: "Go to Cart"
|
|
})]
|
|
})
|
|
});
|
|
}
|
|
//#endregion
|
|
export { HomePage as component };
|