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

enh

Browse source
This commit is contained in:
shafi54 2026-05-10 19:44:26 +05:30
parent 396eba7c1b
commit 4d660e945b
81 changed files with 3732 additions and 1413 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/web-ui/.output/server/_ssr/cart-CHg5Ccyz.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { a as Trash2 } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@ -23,13 +23,13 @@ function CartPage() {
const product = productsById[item.productId];
if (product) total += product.price * item.quantity;
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Your Cart"
}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "Your cart is empty"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@ -52,13 +52,13 @@ function CartPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex-1",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 1,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-brand-600 text-sm font-bold",
children: ["₹", price]
}),
@ -82,10 +82,10 @@ function CartPage() {
className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-3 flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-lg text-brand-600",
children: ["₹", total]

22
apps/web-ui/.output/server/_ssr/checkout-CaijlEpv.mjs
View file

@ -1,6 +1,6 @@
import { o as __toESM } from "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
@ -59,14 +59,14 @@ function CheckoutPage() {
});
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Checkout"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Delivery Address"
@ -74,11 +74,11 @@ function CheckoutPage() {
onClick: () => setSelectedAddressId(addr.id),
className: `mb-2 rounded-xl border p-3 ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
children: addr.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [
addr.addressLine1,
@ -86,7 +86,7 @@ function CheckoutPage() {
addr.city
]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: addr.phone
})
@ -96,7 +96,7 @@ function CheckoutPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Order Summary"
@ -106,7 +106,7 @@ function CheckoutPage() {
if (!product) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between py-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm",
numberOfLines: 1,
children: [
@ -114,7 +114,7 @@ function CheckoutPage() {
" x",
item.quantity
]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm font-bold",
children: ["₹", product.price * item.quantity]
})]
@ -124,10 +124,10 @@ function CheckoutPage() {
className: "mt-2 border-t border-gray-200 pt-2",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600",
children: ["₹", total]

12
apps/web-ui/.output/server/_ssr/flash-CkaCI73Q.mjs
View file

@ -1,7 +1,7 @@
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 { l as ShoppingCart, t as Zap } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as create } from "../_libs/zustand.mjs";
@ -35,7 +35,7 @@ function FlashDeliveryPage() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-center gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-6 w-6 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-6 w-6 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-xl",
children: "1 Hr Delivery"
@ -43,7 +43,7 @@ function FlashDeliveryPage() {
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
className: "mb-4 rounded-xl bg-yellow-50 p-3",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-yellow-800",
children: "Get these products delivered within 1 hour! Only available for select items."
})
@ -64,13 +64,13 @@ function FlashDeliveryPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 2,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600",
children: ["₹", price]
@ -98,7 +98,7 @@ function FlashDeliveryPage() {
}),
flashProducts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
className: "py-20 text-center",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "No flash delivery products available"
})

14
apps/web-ui/.output/server/_ssr/flash.cart-BCcvG5Yb.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { a as Trash2, t as Zap } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@ -20,14 +20,14 @@ function FlashCartPage() {
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-center gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-xl",
children: "Flash Cart"
})]
}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "Your flash cart is empty"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@ -50,13 +50,13 @@ function FlashCartPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex-1",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 1,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-brand-600 text-sm font-bold",
children: ["₹", price]
}),
@ -80,10 +80,10 @@ function FlashCartPage() {
className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-3 flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-lg text-brand-600",
children: ["₹", total]

22
apps/web-ui/.output/server/_ssr/flash.checkout-D2UaQnns.mjs
View file

@ -1,6 +1,6 @@
import { o as __toESM } from "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
import { a as MyText, i as MyButton, r as LoadingDialog, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, r as LoadingDialog, t as AppContainer } from "./src-u_N1opJl.mjs";
import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@ -54,14 +54,14 @@ function FlashCheckoutPage() {
});
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Flash Checkout"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Delivery Address"
@ -69,11 +69,11 @@ function FlashCheckoutPage() {
onClick: () => setSelectedAddressId(addr.id),
className: `mb-2 w-full rounded-xl border p-3 text-left ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
children: addr.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [
addr.addressLine1,
@ -81,7 +81,7 @@ function FlashCheckoutPage() {
addr.city
]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: addr.phone
})
@ -91,7 +91,7 @@ function FlashCheckoutPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Order Summary"
@ -101,7 +101,7 @@ function FlashCheckoutPage() {
if (!product) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between py-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm",
numberOfLines: 1,
children: [
@ -109,7 +109,7 @@ function FlashCheckoutPage() {
" x",
item.quantity
]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm font-bold",
children: ["₹", (product.discountedPrice ?? product.price) * item.quantity]
})]
@ -119,10 +119,10 @@ function FlashCheckoutPage() {
className: "mt-2 border-t border-gray-200 pt-2",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600",
children: ["₹", total]

8
apps/web-ui/.output/server/_ssr/flash.order-success-C9tkVfq7.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { t as Zap } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton } from "./src-u_N1opJl.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./flash.order-success-Bs-Lyb2u.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/flash.order-success-C9tkVfq7.js
@ -15,16 +15,16 @@ function FlashOrderSuccessPage() {
className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-10 w-10 text-yellow-600" })
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-2xl text-gray-900",
children: "1 Hr Order Placed!"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-1 text-gray-600",
children: ["Order ID: #", orderId]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-8 text-gray-600",
children: ["Total: ₹", totalAmount]
}),

14
apps/web-ui/.output/server/_ssr/flash.product._id-SS95dT27.mjs
View file

@ -1,7 +1,7 @@
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 { l as ShoppingCart, t as Zap } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@ -24,13 +24,13 @@ function FlashProductDetailPage() {
storeId: product.storeId
}, { onSuccess: () => navigate({ to: "/flash/cart" }) });
};
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
const price = product.discountedPrice ?? product.price;
const imageUrl = product.images?.[0];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-center gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm font-semibold text-yellow-600",
children: "1 Hr Delivery"
})]
@ -43,22 +43,22 @@ function FlashProductDetailPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-1 text-xl",
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-4 text-sm text-gray-500",
children: [product.unitValue, product.unit]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-baseline gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-2xl text-brand-600",
children: ["₹", price]
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-400 line-through",
children: ["₹", product.price]
})]

40
apps/web-ui/.output/server/_ssr/home-BxXKVXbQ.mjs
View file

@ -1,7 +1,7 @@
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 p, 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";
@ -113,11 +113,11 @@ function AddToCartDialog() {
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex-1",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-lg",
children: "Select Delivery Slot"
}), product?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), product?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-500",
children: [
product.name,
@ -145,7 +145,7 @@ function AddToCartDialog() {
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, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "flex-1 text-sm",
children: [(0, import_dayjs_min.default)(slot.deliveryTime).format("ddd, DD MMM • "), formatTimeRange(slot.deliveryTime)]
@ -172,7 +172,7 @@ function AddToCartDialog() {
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, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "flex-1 text-sm",
children: "1 hr Delivery"
@ -192,7 +192,7 @@ function AddToCartDialog() {
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-sm",
children: "Quantity"
@ -277,7 +277,7 @@ function HomePage() {
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, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-lg md:text-xl",
children: "Our Stores"
@ -297,7 +297,7 @@ function HomePage() {
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, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-lg md:text-xl",
children: "All Products"
@ -408,12 +408,12 @@ function StoreCard({ store, onClick }) {
})
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm truncate",
children: store.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-xs text-gray-500",
children: [store.productCount || 0, " products"]
})
@ -450,29 +450,29 @@ function ProductCard({ product, onClick, onAddToCart }) {
})
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
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, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600 text-sm md:text-base",
children: ["₹", product.price]
}), hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-xs text-gray-400 line-through",
children: ["₹", product.marketPrice]
})]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
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, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "h-3 w-3 text-brand-600" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-[10px] font-bold text-brand-700",
children: (0, import_dayjs_min.default)(product.nextDeliveryDate).format("ddd, DD MMM • h:mm A")
})]
@ -511,15 +511,15 @@ function FloatingCartBar({ onClick }) {
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, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-sm text-white",
children: ["₹", totalCartValue]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
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, {
}), remainingForFreeDelivery > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-[10px] font-bold text-white/70",
children: [
"₹",
@ -533,11 +533,11 @@ function FloatingCartBar({ onClick }) {
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, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-[10px] font-bold text-emerald-300",
children: "Free Delivery Unlocked"
})]
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-[10px] text-white/50",
children: [
"Shop for ₹",

14
apps/web-ui/.output/server/_ssr/home.cart-Bl_3HSf0.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { a as Trash2 } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@ -23,13 +23,13 @@ function CartPage() {
const product = productsById[item.productId];
if (product) total += product.price * item.quantity;
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Your Cart"
}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "Your cart is empty"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@ -52,13 +52,13 @@ function CartPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex-1",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 1,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-brand-600 text-sm font-bold",
children: ["₹", price]
}),
@ -82,10 +82,10 @@ function CartPage() {
className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-3 flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-lg text-brand-600",
children: ["₹", total]

22
apps/web-ui/.output/server/_ssr/home.checkout-o3MfvOFR.mjs
View file

@ -1,6 +1,6 @@
import { o as __toESM } from "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@ -54,14 +54,14 @@ function CheckoutPage() {
});
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Checkout"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Delivery Address"
@ -69,11 +69,11 @@ function CheckoutPage() {
onClick: () => setSelectedAddressId(addr.id),
className: `mb-2 rounded-xl border p-3 ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
children: addr.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [
addr.addressLine1,
@ -81,7 +81,7 @@ function CheckoutPage() {
addr.city
]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: addr.phone
})
@ -91,7 +91,7 @@ function CheckoutPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Order Summary"
@ -101,7 +101,7 @@ function CheckoutPage() {
if (!product) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between py-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm",
numberOfLines: 1,
children: [
@ -109,7 +109,7 @@ function CheckoutPage() {
" x",
item.quantity
]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm font-bold",
children: ["₹", (product.discountedPrice ?? product.price) * item.quantity]
})]
@ -119,10 +119,10 @@ function CheckoutPage() {
className: "mt-2 border-t border-gray-200 pt-2",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600",
children: ["₹", total]

8
apps/web-ui/.output/server/_ssr/home.order-success-COjzwSkc.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { p as Package } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton } from "./src-u_N1opJl.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./home.order-success-ng0baB-e.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/home.order-success-COjzwSkc.js
@ -15,16 +15,16 @@ function OrderSuccessPage() {
className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-10 w-10 text-green-600" })
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-2xl text-gray-900",
children: "Order Placed!"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-1 text-gray-600",
children: ["Order ID: #", orderId]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-8 text-gray-600",
children: ["Total: ₹", totalAmount]
}),

18
apps/web-ui/.output/server/_ssr/home.product._id-C2EPG814.mjs
View file

@ -1,7 +1,7 @@
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 { c as Star, l as ShoppingCart } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@ -26,7 +26,7 @@ function ProductDetailPage() {
storeId: product.storeId
}, { onSuccess: () => navigate({ to: "/cart" }) });
};
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
const price = product.discountedPrice ?? product.price;
const imageUrl = product.images?.[0];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
@ -38,27 +38,27 @@ function ProductDetailPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-1 text-xl",
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-2 text-sm text-gray-500",
children: [product.unitValue, product.unit]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-baseline gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-2xl text-brand-600",
children: ["₹", price]
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-400 line-through",
children: ["₹", product.price]
})]
}),
product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4 text-gray-600",
children: product.description
}),
@ -79,7 +79,7 @@ function ProductDetailPage() {
}),
reviews?.data && reviews.data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mt-8",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-3 text-lg",
children: "Reviews"
@ -88,7 +88,7 @@ function ProductDetailPage() {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
className: "mb-1 flex items-center gap-1",
children: Array.from({ length: review.rating || 5 }).map((_, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Star, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }, j))
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-600",
children: review.comment
})]

6
apps/web-ui/.output/server/_ssr/home.search-pQXmTQuR.mjs
View file

@ -1,6 +1,6 @@
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 { a as MyText, s as MyTouchableOpacity, t as AppContainer, u as SearchBar } from "./src-u_N1opJl.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer, u as SearchBar } from "./src-u_N1opJl.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
import { t as Route } from "./home.search-C7gKn8CW.mjs";
@ -56,13 +56,13 @@ function SearchPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 2,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "mt-1 text-brand-600",
children: ["₹", product.discountedPrice ?? product.price]

18
apps/web-ui/.output/server/_ssr/login-QH2hpwxi.mjs
View file

@ -1,6 +1,6 @@
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 { a as MyText, i as MyButton, o as MyTextInput, s as MyTouchableOpacity } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, o as pInput, s as MyTouchableOpacity } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@ -124,12 +124,12 @@ function LoginPage() {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "w-full max-w-md",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-center text-4xl text-white",
children: "Welcome"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-8 text-center text-lg text-blue-100",
children: "Sign in to continue your journey"
}),
@ -141,7 +141,7 @@ function LoginPage() {
step === "mobile" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Controller, {
control,
name: "mobile",
render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Enter your mobile number",
value,
onChange: (e) => {
@ -154,7 +154,7 @@ function LoginPage() {
step === "otp" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-3 text-center text-base text-gray-800",
children: "Enter 4-digit OTP"
@ -194,7 +194,7 @@ function LoginPage() {
""
]);
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "medium",
className: "text-gray-500",
children: "Back"
@ -202,7 +202,7 @@ function LoginPage() {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
onClick: () => sendOtpMutation.mutate({ mobile: selectedMobile }),
disabled: !canResend,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: canResend ? "text-brand-600" : "text-gray-400",
children: canResend ? "Resend OTP" : `Resend in ${resendCountdown}s`
@ -214,7 +214,7 @@ function LoginPage() {
step === "password" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Controller, {
control,
name: "password",
render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Enter your password",
value,
onChange: (e) => onChange(e.target.value),
@ -244,7 +244,7 @@ function LoginPage() {
]);
},
className: "mt-4 block text-center",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-brand-600",
children: "Or login with Password"

14
apps/web-ui/.output/server/_ssr/me-Dn8Tk_dJ.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { b as FileText, g as MapPin, h as MessageSquare, l as ShoppingCart, o as Ticket, p as Package, r as User, v as Info } from "../_libs/lucide-react.mjs";
import { a as MyText, c as ProfileImage, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, c as ProfileImage, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me-Dn8Tk_dJ.js
@ -10,7 +10,7 @@ function MePage() {
const { user, logout } = useAuth();
if (!user) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Please sign in" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Please sign in" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
textContent: "Sign In",
onClick: () => navigate({ to: "/login" })
})]
@ -75,18 +75,18 @@ function MePage() {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileImage, {
uri: user.profileImage,
size: 64
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-lg",
children: user.name || "User"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: user.mobile
})] })]
}),
menuItems.map((section) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 text-sm text-gray-500 uppercase tracking-wide",
children: section.section
@ -95,7 +95,7 @@ function MePage() {
children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
onClick: () => navigate({ to: item.to }),
className: "flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-5 w-5 text-gray-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-5 w-5 text-gray-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "flex-1 text-left text-sm",
children: item.label
})]
@ -109,7 +109,7 @@ function MePage() {
className: "mb-8",
textContent: "Logout"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-8 text-center text-xs text-gray-400",
children: "Version 1.0.0"
})

12
apps/web-ui/.output/server/_ssr/me.about-ig0mha9d.mjs
View file

@ -1,11 +1,11 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { _ as Leaf, i as Truck, u as Shield, y as Heart } from "../_libs/lucide-react.mjs";
import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.about-ig0mha9d.js
var import_jsx_runtime = require_jsx_runtime();
function AboutPage() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-6 text-2xl",
children: "About Freshyo"
@ -37,12 +37,12 @@ function AboutPage() {
className: "rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(mission.icon, { className: "mb-2 h-8 w-8 text-brand-500" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-1",
children: mission.title
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-600",
children: mission.desc
})
@ -51,11 +51,11 @@ function AboutPage() {
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mt-8",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-3 text-lg",
children: "Sourcing & Quality"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-6 text-sm leading-relaxed text-gray-600",
children: "We partner with trusted local farmers who follow ethical and sustainable farming practices. Every product undergoes rigorous quality checks to ensure you receive only the freshest meat."
})]

14
apps/web-ui/.output/server/_ssr/me.addresses-DS1Qf9Hh.mjs
View file

@ -1,7 +1,7 @@
import "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { g as MapPin } from "../_libs/lucide-react.mjs";
import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
require_react();
var import_jsx_runtime = require_jsx_runtime();
@ -10,13 +10,13 @@ function AddressesPage() {
const { data } = trpc.user.address.getUserAddresses.useQuery();
const deleteMutation = trpc.user.address.deleteAddress.useMutation({ onSuccess: () => utils.user.address.getUserAddresses.invalidate() });
const addresses = data?.data || [];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "My Addresses"
}), addresses.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "No addresses saved"
})]
@ -29,15 +29,15 @@ function AddressesPage() {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex-1",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
children: addr.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [addr.addressLine1, addr.addressLine2 ? `, ${addr.addressLine2}` : ""]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [
addr.city,
@ -47,7 +47,7 @@ function AddressesPage() {
addr.pincode
]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: addr.phone
}),

16
apps/web-ui/.output/server/_ssr/me.complaints-CUIcnKsp.mjs
View file

@ -1,7 +1,7 @@
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 { f as Plus, h as MessageSquare } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.complaints-CUIcnKsp.js
var import_react = /* @__PURE__ */ __toESM(require_react());
@ -24,14 +24,14 @@ function ComplaintsPage() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-xl",
children: "Help & Complaints"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
onClick: () => setShowForm(!showForm),
className: "flex items-center gap-1 text-brand-600",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm",
children: "New"
})]
@ -40,7 +40,7 @@ function ComplaintsPage() {
showForm && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6 rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-3",
children: "Raise a Complaint"
@ -61,7 +61,7 @@ function ComplaintsPage() {
}),
complaints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSquare, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSquare, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "No complaints yet"
})]
@ -75,18 +75,18 @@ function ComplaintsPage() {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
className: `rounded-full px-2 py-0.5 text-xs font-medium ${complaint.status === "resolved" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`,
children: complaint.status || "pending"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-xs text-gray-400",
children: complaint.createdAt ? new Date(complaint.createdAt).toLocaleDateString() : ""
})]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-700",
children: complaint.body
}),
complaint.adminResponse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
className: "mt-2 rounded-lg bg-blue-50 p-2",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-xs text-blue-600",
children: ["Response: ", complaint.adminResponse]
})

14
apps/web-ui/.output/server/_ssr/me.coupons-CK-hvcuK.mjs
View file

@ -1,7 +1,7 @@
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 { o as Ticket } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, o as MyTextInput, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, o as pInput, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.coupons-CK-hvcuK.js
var import_react = /* @__PURE__ */ __toESM(require_react());
@ -20,14 +20,14 @@ function CouponsPage() {
} });
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "My Coupons"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6 flex gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Enter coupon code",
value: code,
onChange: (e) => setCode(e.target.value),
@ -40,7 +40,7 @@ function CouponsPage() {
}),
coupons.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ticket, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ticket, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "No coupons yet"
})]
@ -49,16 +49,16 @@ function CouponsPage() {
children: coupons.map((coupon) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "rounded-xl border border-dashed border-brand-200 bg-brand-50 p-4",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-brand-700",
children: coupon.code
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-600",
children: coupon.description || `${coupon.discountPercent || 0}% off`
}),
coupon.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
coupon.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mt-1 text-xs text-gray-400",
children: ["Expires: ", new Date(coupon.expiresAt).toLocaleDateString()]
})

10
apps/web-ui/.output/server/_ssr/me.edit-profile-jHHMfrY4.mjs
View file

@ -1,6 +1,6 @@
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 { a as MyText, i as MyButton, o as MyTextInput, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, o as pInput, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@ -24,7 +24,7 @@ function EditProfilePage() {
});
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Edit Profile"
@ -33,18 +33,18 @@ function EditProfilePage() {
onSubmit: handleSubmit,
className: "flex flex-col gap-4",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Name",
value: name,
onChange: (e) => setName(e.target.value)
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Email",
type: "email",
value: email,
onChange: (e) => setEmail(e.target.value)
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Mobile",
value: user?.mobile || "",
disabled: true,

12
apps/web-ui/.output/server/_ssr/me.orders-CSqnUtwy.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { p as Package, x as ChevronRight } from "../_libs/lucide-react.mjs";
import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.orders-CSqnUtwy.js
@ -12,13 +12,13 @@ function OrdersPage() {
limit: 20
});
const orders = data?.data || [];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "My Orders"
}), orders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex flex-col items-center gap-4 py-20",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-gray-500",
children: "No orders yet"
})]
@ -32,11 +32,11 @@ function OrdersPage() {
className: "rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "semibold",
className: "text-sm",
children: ["Order #", order.id]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-xs text-gray-500",
children: order.createdAt ? new Date(order.createdAt).toLocaleDateString() : ""
})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@ -46,7 +46,7 @@ function OrdersPage() {
children: order.status
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "h-4 w-4 text-gray-400" })]
})]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mt-1 text-xs text-gray-400",
children: ["Total: ₹", order.totalAmount || 0]
})]

30
apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs
View file

@ -1,7 +1,7 @@
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 { S as ArrowLeft } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./me.orders._id-9KyXzQNP.mjs";
@ -19,16 +19,16 @@ function OrderDetailPage() {
const handleCancel = () => {
cancelMutation.mutate({ orderId }, { onSuccess: () => setShowCancelDialog(false) });
};
if (!order) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Loading..." }) });
if (!order) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Loading..." }) });
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
onClick: () => navigate({ to: "/me/orders" }),
className: "mb-4 flex items-center gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Back to Orders" })]
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Back to Orders" })]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-xl",
children: ["Order #", order.id]
@ -40,31 +40,31 @@ function OrderDetailPage() {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Items"
}),
(order.items || []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between border-b border-gray-100 py-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm",
children: [
item.product?.name || `Product #${item.productId}`,
" x",
item.quantity
]
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm font-bold",
children: ["₹", item.price || 0]
})]
}, i)),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "flex items-center justify-between pt-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
children: "Total"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-brand-600",
children: ["₹", order.totalAmount || 0]
@ -74,18 +74,18 @@ function OrderDetailPage() {
}),
order.address && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-6",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2",
children: "Delivery Address"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "rounded-xl border border-gray-100 bg-gray-50 p-3",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
children: order.address.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-600",
children: [
order.address.addressLine1,
@ -93,7 +93,7 @@ function OrderDetailPage() {
order.address.city
]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "text-sm text-gray-500",
children: order.address.phone
})
@ -112,12 +112,12 @@ function OrderDetailPage() {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mx-4 w-full max-w-sm rounded-xl bg-white p-6",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-lg",
children: "Cancel Order?"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-6 text-sm text-gray-600",
children: "Are you sure you want to cancel this order?"
}),

24
apps/web-ui/.output/server/_ssr/me.terms-BY5QWW0t.mjs
View file

@ -1,57 +1,57 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.terms-BY5QWW0t.js
var import_jsx_runtime = require_jsx_runtime();
function TermsPage() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-6 text-2xl",
children: "Terms & Conditions"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "prose prose-sm max-w-none text-gray-600",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 mt-4 text-gray-900",
children: "1. Acceptance of Terms"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4",
children: "By using Freshyo, you agree to these terms. If you do not agree, please do not use our service."
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 mt-4 text-gray-900",
children: "2. Orders and Payments"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4",
children: "All orders are subject to availability. We reserve the right to cancel any order. Payments are collected at the time of delivery (COD)."
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 mt-4 text-gray-900",
children: "3. Delivery Policy"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4",
children: "Delivery times are estimates. We strive to deliver within the promised time window but delays may occur due to unforeseen circumstances."
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 mt-4 text-gray-900",
children: "4. Returns and Refunds"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4",
children: "If you are not satisfied with the quality of your order, please contact us within 24 hours of delivery. Refunds will be processed after quality assessment."
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "mb-2 mt-4 text-gray-900",
children: "5. Privacy"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4",
children: "We respect your privacy. Your personal information is used only for order processing and delivery purposes."
})

14
apps/web-ui/.output/server/_ssr/register-dcmJe--5.mjs
View file

@ -1,6 +1,6 @@
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 { a as MyText, i as MyButton, o as MyTextInput } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, o as pInput } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@ -34,12 +34,12 @@ function RegisterPage() {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "w-full max-w-md",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-2 text-center text-4xl text-white",
children: "Create Account"
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-8 text-center text-lg text-blue-100",
children: "Join Freshyo today"
}),
@ -49,19 +49,19 @@ function RegisterPage() {
onSubmit: handleSubmit,
className: "flex flex-col gap-4",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Full Name",
value: name,
onChange: (e) => setName(e.target.value),
required: true
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Email",
type: "email",
value: email,
onChange: (e) => setEmail(e.target.value)
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Mobile Number",
value: mobile,
onChange: (e) => {
@ -70,7 +70,7 @@ function RegisterPage() {
},
required: true
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
placeholder: "Password",
type: "password",
value: password,

10
apps/web-ui/.output/server/_ssr/src-u_N1opJl.mjs
View file

@ -15,7 +15,7 @@ var weightClasses = {
semibold: "font-semibold",
bold: "font-bold"
};
function MyText({ children, weight = "normal", numberOfLines, className, style, ...props }) {
function p({ children, weight = "normal", numberOfLines, className, style, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
className: cn(weightClasses[weight], className),
style: {
@ -45,7 +45,7 @@ function MyButton({ variant = "blue", fullWidth, textContent, children, classNam
children: textContent || children
});
}
function MyTextInput({ topLabel, fullWidth = true, shrunkPadding = false, error, multiline, className, style, ...props }) {
function pInput({ topLabel, fullWidth = true, shrunkPadding = false, error, multiline, className, style, ...props }) {
const inputClasses = cn("flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", shrunkPadding ? "py-1.5" : "py-2", error && "border-destructive", className);
multilime;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@ -53,7 +53,7 @@ function MyTextInput({ topLabel, fullWidth = true, shrunkPadding = false, error,
...fullWidth ? { width: "100%" } : {},
...style
},
children: [topLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
children: [topLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "medium",
className: "mb-1 text-sm text-gray-500",
children: topLabel
@ -178,7 +178,7 @@ function Quantifier({ value, setValue, step = 1, min = 0, max = 99 }) {
className: "flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: "h-3.5 w-3.5" })
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "min-w-[32px] text-center text-sm",
children: value
@ -221,4 +221,4 @@ function AppContainer({ children, className }) {
});
}
//#endregion
export { MyText as a, ProfileImage as c, MyButton as i, Quantifier as l, BottomDialog as n, MyTextInput as o, LoadingDialog as r, MyTouchableOpacity as s, AppContainer as t, SearchBar as u };
export { p as a, ProfileImage as c, MyButton as i, Quantifier as l, BottomDialog as n, pInput as o, LoadingDialog as r, MyTouchableOpacity as s, AppContainer as t, SearchBar as u };

8
apps/web-ui/.output/server/_ssr/stores-CcccRdgP.mjs
View file

@ -1,6 +1,6 @@
import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { s as Store } from "../_libs/lucide-react.mjs";
import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as useStores } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/stores-CcccRdgP.js
@ -9,7 +9,7 @@ function StoresPage() {
const navigate = useNavigate();
const { data } = useStores();
const stores = data?.data || [];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-4 text-xl",
children: "Our Stores"
@ -30,12 +30,12 @@ function StoresPage() {
className: "h-full w-full object-cover"
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "h-10 w-10 text-gray-400" })
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
children: store.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-xs text-gray-500",
children: [store.productCount || 0, " products"]
})

8
apps/web-ui/.output/server/_ssr/stores._storeId-CWdFRADX.mjs
View file

@ -1,7 +1,7 @@
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 { S as ArrowLeft } from "../_libs/lucide-react.mjs";
import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { i as useStoreWithProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./stores._storeId-Dh-du4bI.mjs";
@ -33,7 +33,7 @@ function StoreDetailPage() {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
onClick: () => navigate({ to: "/stores" }),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" })
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "text-xl",
children: store?.name || "Store"
@ -67,13 +67,13 @@ function StoreDetailPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "semibold",
className: "text-sm",
numberOfLines: 2,
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "mt-1 text-brand-600",
children: ["₹", product.discountedPrice ?? product.price]

14
apps/web-ui/.output/server/_ssr/stores._storeId.product._productId-C9GtcXdb.mjs
View file

@ -1,7 +1,7 @@
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 { S as ArrowLeft, l as ShoppingCart } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@ -24,7 +24,7 @@ function StoreProductDetailPage() {
storeId: product.storeId
}, { onSuccess: () => navigate({ to: "/cart" }) });
};
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
const price = product.discountedPrice ?? product.price;
const imageUrl = product.images?.[0];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
@ -44,27 +44,27 @@ function StoreProductDetailPage() {
className: "h-full w-full object-cover"
})
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
weight: "bold",
className: "mb-1 text-xl",
children: product.name
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "mb-2 text-sm text-gray-500",
children: [product.unitValue, product.unit]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
className: "mb-4 flex items-baseline gap-2",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
weight: "bold",
className: "text-2xl text-brand-600",
children: ["₹", price]
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
className: "text-sm text-gray-400 line-through",
children: ["₹", product.price]
})]
}),
product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
className: "mb-4 text-gray-600",
children: product.description
}),

34
apps/web-ui/src/components/AddToCartDialog.tsx
View file

@ -1,6 +1,6 @@
import React, { useState, useMemo, useEffect } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { BottomDialog, MyText, MyTouchableOpacity, Quantifier } from 'web-components'
import { BottomDialog, p, div, Quantifier } from 'web-components'
import { useSlots } from '../hooks/prominent-api-hooks'
import { useAddToCart, useUpdateCartItem, useRemoveFromCart, useGetCart } from '../hooks/cart-query-hooks'
import { useCartStore } from '../lib/stores/cart-store'
@ -123,13 +123,13 @@ export default function AddToCartDialog() {
<Truck className="h-5 w-5 text-blue-500" />
</div>
<div className="flex-1">
<MyText weight="bold" className="text-lg">
<p className="font-bold text-lg">
Select Delivery Slot
</MyText>
</p>
{product?.name && (
<MyText className="text-sm text-gray-500">
<p className="text-sm text-gray-500">
{product.name} ({product.productQuantity}{product.unitNotation ? ` ${product.unitNotation}` : ''})
</MyText>
</p>
)}
</div>
<button onClick={clearAddedToCartProduct} className="text-gray-400 hover:text-gray-600">
@ -139,7 +139,7 @@ export default function AddToCartDialog() {
<div className="max-h-[40vh] space-y-3 overflow-y-auto mb-4">
{availableSlots.map((slot: any) => (
<MyTouchableOpacity
<div
key={slot.id}
onClick={() => {
setSelectedSlotId(slot.id)
@ -150,9 +150,9 @@ export default function AddToCartDialog() {
}`}
>
<Truck className="mt-0.5 h-5 w-5 shrink-0 text-blue-500" />
<MyText weight="bold" className="flex-1 text-sm">
<p className="font-bold flex-1 text-sm">
{dayjs(slot.deliveryTime).format('ddd, DD MMM • ')}{formatTimeRange(slot.deliveryTime)}
</MyText>
</p>
{selectedSlotId === slot.id ? (
<svg className="h-6 w-6 shrink-0 text-brand-500" fill="currentColor" viewBox="0 0 24 24">
<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" />
@ -162,12 +162,12 @@ export default function AddToCartDialog() {
<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" />
</svg>
)}
</MyTouchableOpacity>
</div>
))}
</div>
{showFlashOption && (
<MyTouchableOpacity
<div
onClick={() => {
setSelectedFlashDelivery(true)
setSelectedSlotId(null)
@ -177,9 +177,9 @@ export default function AddToCartDialog() {
}`}
>
<Zap className="h-5 w-5 shrink-0 text-pink-500" />
<MyText weight="bold" className="flex-1 text-sm">
<p className="font-bold flex-1 text-sm">
1 hr Delivery
</MyText>
</p>
{selectedFlashDelivery ? (
<svg className="h-6 w-6 shrink-0 text-pink-500" fill="currentColor" viewBox="0 0 24 24">
<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" />
@ -189,24 +189,24 @@ export default function AddToCartDialog() {
<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" />
</svg>
)}
</MyTouchableOpacity>
</div>
)}
<div className="mb-4">
<MyText weight="bold" className="mb-2 text-sm">
<p className="font-bold mb-2 text-sm">
Quantity
</MyText>
</p>
<div className="flex items-center gap-3">
<Quantifier value={quantity} setValue={setQuantity} step={1} unit={product?.unitNotation} />
{isUpdate && (
<MyTouchableOpacity
<div
onClick={handleRemove}
className="rounded-lg border border-red-200 bg-red-50 p-2"
>
<svg className="h-5 w-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
</svg>
</MyTouchableOpacity>
</div>
)}
</div>
</div>

48
apps/web-ui/src/components/AddressForm.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { trpc } from '../lib/trpc-client'
import { MyText, MyTextInput, MyButton, MyTouchableOpacity } from 'web-components'
import { p, pInput, MyButton, div } from 'web-components'
import { MapPin, X, Plus } from 'lucide-react'
import * as Yup from 'yup'
@ -117,62 +117,62 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
return (
<div className="max-h-[80vh] overflow-y-auto p-6">
<div className="mb-6 flex items-center justify-between">
<MyText weight="bold" className="text-xl">
<p className="font-bold text-xl">
{isEdit ? 'Edit Address' : 'Add Address'}
</MyText>
</p>
</div>
{/* Service Area Notice */}
<div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3">
<div className="flex items-center gap-2">
<span className="text-amber-600">ℹ️</span>
<MyText className="flex-1 text-sm text-amber-800">
<p className="flex-1 text-sm text-amber-800">
We currently serve only in Mahabubnagar town
</MyText>
</p>
</div>
</div>
{/* Submit Error Message */}
{submitError && (
<div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3">
<MyText className="text-sm text-red-600">{submitError}</MyText>
<p className="text-sm text-red-600">{submitError}</p>
</div>
)}
<div className="space-y-4">
<div>
<MyTextInput
<pInput
placeholder="Name"
value={values.name}
onChange={(e) => handleChange('name', e.target.value)}
className={errors.name ? 'border-red-500' : ''}
/>
{errors.name && <MyText className="mt-1 text-sm text-red-500">{errors.name}</MyText>}
{errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
</div>
<div>
<MyTextInput
<pInput
placeholder="Phone"
type="tel"
value={values.phone}
onChange={(e) => handleChange('phone', e.target.value)}
className={errors.phone ? 'border-red-500' : ''}
/>
{errors.phone && <MyText className="mt-1 text-sm text-red-500">{errors.phone}</MyText>}
{errors.phone && <p className="mt-1 text-sm text-red-500">{errors.phone}</p>}
</div>
<div>
<MyTextInput
<pInput
placeholder="Address Line 1"
value={values.addressLine1}
onChange={(e) => handleChange('addressLine1', e.target.value)}
className={errors.addressLine1 ? 'border-red-500' : ''}
/>
{errors.addressLine1 && <MyText className="mt-1 text-sm text-red-500">{errors.addressLine1}</MyText>}
{errors.addressLine1 && <p className="mt-1 text-sm text-red-500">{errors.addressLine1}</p>}
</div>
<div>
<MyTextInput
<pInput
placeholder="Address Line 2 (Optional)"
value={values.addressLine2}
onChange={(e) => handleChange('addressLine2', e.target.value)}
@ -181,7 +181,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
<div className="grid grid-cols-2 gap-4">
<div>
<MyTextInput
<pInput
placeholder="City"
value={values.city}
disabled
@ -189,7 +189,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
/>
</div>
<div>
<MyTextInput
<pInput
placeholder="State"
value={values.state}
disabled
@ -199,7 +199,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
</div>
<div>
<MyTextInput
<pInput
placeholder="Pincode"
value={values.pincode}
disabled
@ -208,25 +208,25 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
</div>
{!showGoogleMapsField && (
<MyTouchableOpacity
<div
onClick={() => setShowGoogleMapsField(true)}
className="text-blue-500"
>
<MyText weight="medium" className="text-sm">
<p className="font-medium text-sm">
Attach with Google Maps
</MyText>
</MyTouchableOpacity>
</p>
</div>
)}
{showGoogleMapsField && (
<div className="space-y-2">
<MyText className="text-xs text-gray-500">
<p className="text-xs text-gray-500">
1. Open Google Maps and Find location<br />
2. Long press the desired location<br />
3. Click on Share and Click on Copy<br />
4. Paste the copied url here in the field.
</MyText>
<MyTextInput
</p>
<pInput
placeholder="Google Maps Shared URL"
value={values.googleMapsUrl}
onChange={(e) => handleChange('googleMapsUrl', e.target.value)}
@ -241,7 +241,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
onChange={(e) => handleChange('isDefault', e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
/>
<MyText>Set as default address</MyText>
<p>Set as default address</p>
</label>
<MyButton

39
apps/web-ui/src/components/AppLayout.tsx Normal file
View file

@ -0,0 +1,39 @@
import React from 'react'
import { BottomNavigation } from './BottomNavigation'
import { FloatingCartBar } from './FloatingCartBar'
import { useLocation } from '@tanstack/react-router'
interface AppLayoutProps {
children: React.ReactNode
showCartBar?: boolean
isFlashDelivery?: boolean
}
// Routes where bottom nav should be hidden
const hideBottomNavRoutes = ['/login', '/register', '/checkout', '/cart']
export function AppLayout({ children, showCartBar = true, isFlashDelivery = false }: AppLayoutProps) {
const location = useLocation()
const currentPath = location.pathname
const shouldShowBottomNav = !hideBottomNavRoutes.some((route) =>
currentPath === route || currentPath.startsWith(`${route}/`)
)
const shouldShowCartBar = showCartBar && shouldShowBottomNav
return (
<div className="relative min-h-screen pb-20">
{/* Main Content */}
<main>{children}</main>
{/* Floating Cart Bar - positioned above bottom nav */}
{shouldShowCartBar && (
<FloatingCartBar isFlashDelivery={isFlashDelivery} />
)}
{/* Bottom Navigation */}
{shouldShowBottomNav && <BottomNavigation />}
</div>
)
}

120
apps/web-ui/src/components/BottomNavigation.tsx Normal file
View file

@ -0,0 +1,120 @@
import React from 'react'
import { useLocation, useNavigate } from '@tanstack/react-router'
import { p, div } from 'web-components'
import { Home, Store, Zap, RotateCcw, User } from 'lucide-react'
interface TabItem {
name: string
path: string
label: string
icon: React.ReactNode
iconActive: React.ReactNode
isCenter?: boolean
}
export function BottomNavigation() {
const location = useLocation()
const navigate = useNavigate()
const currentPath = location.pathname
const tabs: TabItem[] = [
{
name: 'home',
path: '/home',
label: 'Home',
icon: <Home className="h-5 w-5" />,
iconActive: <Home className="h-5 w-5 fill-current" />,
},
{
name: 'stores',
path: '/stores',
label: 'Stores',
icon: <Store className="h-5 w-5" />,
iconActive: <Store className="h-5 w-5 fill-current" />,
},
{
name: 'flash',
path: '/flash',
label: '1 Hr Delivery',
icon: <Zap className="h-6 w-6" />,
iconActive: <Zap className="h-6 w-6 fill-current" />,
isCenter: true,
},
{
name: 'order-again',
path: '/me/orders',
label: 'Order Again',
icon: <RotateCcw className="h-5 w-5" />,
iconActive: <RotateCcw className="h-5 w-5 fill-current" />,
},
{
name: 'me',
path: '/me',
label: 'Me',
icon: <User className="h-5 w-5" />,
iconActive: <User className="h-5 w-5 fill-current" />,
},
]
const isActive = (path: string) => {
if (path === '/home') return currentPath === '/home' || currentPath.startsWith('/home/')
if (path === '/stores') return currentPath === '/stores' || currentPath.startsWith('/stores/')
if (path === '/flash') return currentPath === '/flash' || currentPath.startsWith('/flash/')
if (path === '/me/orders') return currentPath === '/me/orders' || currentPath.startsWith('/me/orders/')
if (path === '/me') return currentPath === '/me' || (currentPath.startsWith('/me/') && !currentPath.startsWith('/me/orders/'))
return currentPath === path || currentPath.startsWith(`${path}/`)
}
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white pb-safe">
<div className="flex h-16 items-center justify-around px-2">
{tabs.map((tab) => {
const active = isActive(tab.path)
if (tab.isCenter) {
// Center elevated button for Flash Delivery
return (
<div
key={tab.name}
onClick={() => navigate({ to: tab.path })}
className="relative -top-3 flex flex-col items-center"
>
<div
className={`flex h-14 w-14 items-center justify-center rounded-full border-4 border-white shadow-lg transition-all ${
active
? 'bg-gradient-to-br from-brand-400 to-brand-600'
: 'bg-gradient-to-br from-gray-400 to-gray-600'
}`}
>
<span className={active ? 'text-white' : 'text-white/80'}>{tab.icon}</span>
</div>
<p
className={`mt-0.5 text-[10px] font-bold ${active ? 'text-brand-600' : 'text-gray-500'}`}
>
{tab.label}
</p>
</div>
)
}
return (
<div
key={tab.name}
onClick={() => navigate({ to: tab.path })}
className="flex flex-1 flex-col items-center justify-center py-2"
>
<span className={active ? 'text-brand-600' : 'text-gray-500'}>
{active ? tab.iconActive : tab.icon}
</span>
<p
className={`mt-1 text-xs font-medium ${active ? 'text-brand-600' : 'text-gray-500'}`}
>
{tab.label}
</p>
</div>
)
})}
</div>
</nav>
)
}

48
apps/web-ui/src/components/CheckoutAddressSelector.tsx
View file

@ -2,7 +2,7 @@ import React from 'react'
import { useCheckoutAddress } from '../hooks/checkout-hooks'
import { trpc } from '../lib/trpc-client'
import { useQueryClient } from '@tanstack/react-query'
import { MyText, MyTouchableOpacity } from 'web-components'
import { p, div } from 'web-components'
import { MapPin, Home, Briefcase, Check, Plus, Edit2, Trash2 } from 'lucide-react'
interface AddressSelectorProps {
@ -39,33 +39,33 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-50">
<MapPin className="h-4 w-4 text-blue-500" />
</div>
<MyText weight="bold" className="text-lg text-gray-900">
<p className="font-bold text-lg text-gray-900">
Delivery Address
</MyText>
</p>
</div>
<MyTouchableOpacity
<div
onClick={onAddAddress}
className="flex items-center gap-1 text-brand-500"
>
<Plus className="h-4 w-4" />
<MyText weight="bold" className="text-sm">
<p className="font-bold text-sm">
Add New
</MyText>
</MyTouchableOpacity>
</p>
</div>
</div>
{sortedAddresses.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 p-8">
<MapPin className="mb-2 h-10 w-10 text-gray-400" />
<MyText className="mb-1 text-gray-500">No addresses found</MyText>
<MyTouchableOpacity
<p className="mb-1 text-gray-500">No addresses found</p>
<div
onClick={onAddAddress}
className="mt-3 rounded-lg bg-brand-500 px-4 py-2"
>
<MyText weight="bold" className="text-sm text-white">
<p className="font-bold text-sm text-white">
Add Address
</MyText>
</MyTouchableOpacity>
</p>
</div>
</div>
) : (
<div className="space-y-3">
@ -90,25 +90,25 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
</div>
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<MyText weight="bold" className={selectedAddressId === address.id ? 'text-brand-600' : 'text-gray-900'}>
<p className={`font-bold ${selectedAddressId === address.id ? 'text-brand-600' : 'text-gray-900'}`}>
{address.name}
</MyText>
</p>
{address.isDefault && (
<span className="rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
Default
</span>
)}
</div>
<MyText className="text-sm leading-relaxed text-gray-600">
<p className="text-sm leading-relaxed text-gray-600">
{address.addressLine1}
{address.addressLine2 ? `, ${address.addressLine2}` : ''}
</MyText>
<MyText className="text-sm text-gray-600">
</p>
<p className="text-sm text-gray-600">
{address.city}, {address.state} - {address.pincode}
</MyText>
<MyText className="mt-1 text-xs text-gray-500">
</p>
<p className="mt-1 text-xs text-gray-500">
Phone: {address.phone}
</MyText>
</p>
</div>
</div>
<div className="flex flex-col items-end gap-2">
@ -118,7 +118,7 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
</div>
)}
<div className="flex gap-1">
<MyTouchableOpacity
<div
onClick={(e) => {
e.stopPropagation()
onEditAddress?.(address)
@ -126,8 +126,8 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
className="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
>
<Edit2 className="h-4 w-4" />
</MyTouchableOpacity>
<MyTouchableOpacity
</div>
<div
onClick={(e) => {
e.stopPropagation()
if (confirm('Are you sure you want to delete this address?')) {
@ -137,7 +137,7 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
className="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-red-50 hover:text-red-500"
>
<Trash2 className="h-4 w-4" />
</MyTouchableOpacity>
</div>
</div>
</div>
</div>

295
apps/web-ui/src/components/FloatingCartBar.tsx Normal file
View file

@ -0,0 +1,295 @@
import React, { useState, useEffect, useMemo } from 'react'
import { useNavigate, useLocation } from '@tanstack/react-router'
import { useGetCart, useUpdateCartItem, useRemoveFromCart, useAddToCart } from '../hooks/cart-query-hooks'
import { useAllProducts } from '../hooks/prominent-api-hooks'
import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
import { p, div, MiniQuantifier } from 'web-components'
import { Dialog } from './Dialog'
import { ShoppingCart, ChevronRight, Package, X, Clock, MapPin, Home, Store, Zap, RotateCcw, User } from 'lucide-react'
import dayjs from 'dayjs'
interface FloatingCartBarProps {
isFlashDelivery?: boolean
}
// Smart time window formatting function
const formatTimeRange = (deliveryTime: string | Date) => {
const time = dayjs(deliveryTime)
const endTime = time.add(1, 'hour')
const startPeriod = time.format('A')
const endPeriod = endTime.format('A')
let timeRange
if (startPeriod === endPeriod) {
timeRange = `${time.format('h')}-${endTime.format('h')} ${startPeriod}`
} else {
timeRange = `${time.format('h:mm')} ${startPeriod} - ${endTime.format('h:mm')} ${endPeriod}`
}
return `${time.format('ddd, DD MMM ')}${timeRange}`
}
export function FloatingCartBar({ isFlashDelivery = false }: FloatingCartBarProps) {
const navigate = useNavigate()
const [isExpanded, setIsExpanded] = useState(false)
const [quantities, setQuantities] = useState<Record<number, number>>({})
const cartType = isFlashDelivery ? 'flash' : 'regular'
const { data: cartData, refetch: refetchCart } = useGetCart(cartType)
const { data: constsData } = useGetEssentialConsts()
const { data: productsData } = useAllProducts()
const updateCartItem = useUpdateCartItem(cartType)
const removeFromCart = useRemoveFromCart(cartType)
const addToCartHook = useAddToCart(cartType)
const products = productsData?.products || []
const productsById: Record<number, any> = {}
products.forEach((p: any) => { productsById[p.id] = p })
const cartItems = cartData?.items || []
const itemCount = cartItems.length
useEffect(() => {
const initial: Record<number, number> = {}
cartItems.forEach((item) => {
initial[item.id] = item.quantity
})
setQuantities(initial)
}, [cartData])
// Calculate total cart value
const totalCartValue = cartItems.reduce(
(sum, item) => {
const product = productsById[item.productId]
const basePrice = product?.price ?? 0
const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice
return sum + price * item.quantity
},
0
)
const freeDeliveryThreshold = isFlashDelivery
? constsData?.flashFreeDeliveryThreshold
: constsData?.freeDeliveryThreshold
const remainingForFreeDelivery = Math.max(0, freeDeliveryThreshold - totalCartValue)
const cartBarColor = isFlashDelivery ? '#f81260' : 'var(--brand-600, #2563eb)'
const cartBarBorderColor = isFlashDelivery ? '#e11d48' : 'var(--brand-500, #3b82f6)'
return (
<>
{/* Collapsed Bar */}
<div
className="fixed bottom-20 left-4 right-4 z-40 rounded-lg border shadow-2xl"
style={{
backgroundColor: cartBarColor,
borderColor: cartBarBorderColor,
borderWidth: 1,
}}
>
<div
className="flex flex-row items-center justify-between py-3"
onClick={() => itemCount > 0 && setIsExpanded(true)}
>
<div className="flex flex-1 flex-row items-center px-2">
<div className="flex-1">
<div className="flex flex-row items-center">
<p className="font-bold mr-2 text-sm text-white">
{itemCount === 0 ? (
isFlashDelivery ? 'No Flash Items' : 'No Items In Cart'
) : (
<>
<span className="text-base font-black text-white">
₹{totalCartValue}
</span>
<span className="text-sm font-bold text-white">
{' '}&bull; {itemCount} {itemCount === 1 ? 'Item' : 'Items'}
</span>
</>
)}
</p>
{itemCount > 0 && <span className="text-white">▲</span>}
</div>
{remainingForFreeDelivery > 0 ? (
<p className="mt-1 text-[10px] font-bold text-white/80">
₹{remainingForFreeDelivery} more for <span className="text-emerald-300">FREE Delivery</span>
</p>
) : itemCount > 0 ? (
<div className="mt-0.5 flex flex-row items-center">
<span className="text-emerald-400">✓</span>
<p className="ml-1 text-[10px] font-black uppercase tracking-tighter text-emerald-300">
Free Delivery Unlocked
</p>
</div>
) : (
<p className="mt-0.5 text-[10px] text-white/60">
Shop for ₹{freeDeliveryThreshold}+ for free shipping
</p>
)}
</div>
</div>
<div
className="rounded-2xl bg-white px-3 py-2 shadow-lg"
onClick={(e) => {
e.stopPropagation()
navigate({
to: isFlashDelivery ? '/flash/cart' : '/cart',
})
}}
>
<p className="font-bold text-sm" style={{ color: cartBarColor }}>
Go to Cart
</p>
</div>
</div>
</div>
{/* Expanded Dialog */}
<Dialog open={isExpanded} onClose={() => setIsExpanded(false)} title="">
<div className="flex max-h-[80vh] flex-col">
{/* Header */}
<div className="flex flex-row items-center justify-between border-b border-slate-100 px-6 py-5">
<div>
<p className="font-bold text-xl tracking-tight text-slate-900">
Your Cart
</p>
<p className="text-xs font-bold uppercase tracking-widest text-slate-400">
{itemCount} Items
</p>
</div>
<div
className="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-100"
onClick={() => setIsExpanded(false)}
>
<X className="h-6 w-6 text-slate-500" />
</div>
</div>
{/* Progress Bar Header */}
{remainingForFreeDelivery > 0 && (
<div className="flex flex-row items-center justify-between bg-emerald-50/50 px-6 py-3">
<div className="mr-4 flex-1">
<div className="mb-1.5 flex flex-row items-center justify-between">
<p className="text-[10px] font-black uppercase text-emerald-700">Free Delivery Progress</p>
<p className="text-[10px] font-black text-emerald-700">
{Math.round((totalCartValue / freeDeliveryThreshold) * 100)}%
</p>
</div>
<div className="h-1.5 overflow-hidden rounded-full border border-emerald-100 bg-white">
<div
className="h-full bg-emerald-500"
style={{ width: `${(totalCartValue / freeDeliveryThreshold) * 100}%` }}
/>
</div>
</div>
<div className="items-end">
<p className="text-[10px] font-bold text-slate-500">Needed</p>
<p className="text-sm font-black text-emerald-600">+₹{remainingForFreeDelivery}</p>
</div>
</div>
)}
{/* Items List */}
<div className="flex-1 overflow-y-auto px-6 py-4">
{cartItems.map((item, index) => (
<React.Fragment key={item.id}>
<div className="py-4">
<div className="flex flex-row items-center">
<img
src={productsById[item.productId]?.images?.[0]}
alt=""
className="h-8 w-8 rounded-lg border border-slate-100 bg-slate-50 object-cover"
/>
<div className="ml-4 flex-1">
<div className="mb-1 flex flex-row items-center justify-between">
<p className="font-bold flex-1 text-sm text-slate-900">
{productsById[item.productId]?.name || ''}{' '}
<span className="text-xs font-medium text-slate-500">
({productsById[item.productId]?.productQuantity || 0}
{productsById[item.productId]?.unitNotation || ''})
</span>
</p>
<MiniQuantifier
value={quantities[item.id] || item.quantity}
setValue={(value) => {
if (value === 0) {
removeFromCart.mutate(item.id)
} else {
setQuantities((prev) => ({ ...prev, [item.id]: value }))
updateCartItem.mutate({ productId: item.id, quantity: value })
}
}}
step={productsById[item.productId]?.incrementStep || 1}
/>
</div>
<div className="flex flex-row items-center justify-between">
{item.slotId && (
<div className="flex flex-row items-center rounded-lg border border-blue-100 bg-blue-50 px-2 py-1">
<Clock className="h-3 w-3 text-blue-600" />
<p className="ml-1 text-[9px] font-black uppercase text-blue-700">
{formatTimeRange(item.deliveryDate || new Date())}
</p>
</div>
)}
<p className="font-bold text-sm text-slate-900">
₹{(() => {
const product = productsById[item.productId]
const basePrice = product?.price ?? 0
const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice
return price * item.quantity
})()}
</p>
</div>
</div>
</div>
</div>
{index < cartItems.length - 1 && <div className="h-px w-full bg-slate-200" />}
</React.Fragment>
))}
</div>
{/* Footer */}
<div className="border-t border-slate-100 bg-white p-6">
<div className="mb-5 flex flex-row items-center justify-between">
<div>
<p className="text-[10px] font-black uppercase tracking-widest text-slate-400">Subtotal</p>
<p className="font-bold text-2xl text-slate-900">
₹{totalCartValue}
</p>
</div>
{remainingForFreeDelivery === 0 && (
<div className="flex flex-row items-center rounded-xl border border-emerald-100 bg-emerald-50 px-3 py-1.5">
<Package className="h-4 w-4 text-emerald-600" />
<p className="ml-1.5 text-[10px] font-black uppercase text-emerald-700">Free Delivery</p>
</div>
)}
</div>
<div
onClick={() => {
setIsExpanded(false)
navigate({
to: isFlashDelivery ? '/flash/cart' : '/cart',
})
}}
className="flex flex-row items-center justify-center rounded-2xl py-4 shadow-lg"
style={{
background: isFlashDelivery
? 'linear-gradient(90deg, #f81260, #c40e50)'
: 'linear-gradient(90deg, #1570EF, #194185)',
}}
>
<p className="font-bold text-base uppercase tracking-widest text-white">
Go to cart
</p>
<ChevronRight className="ml-1 h-5 w-5 text-white" />
</div>
</div>
</div>
</Dialog>
</>
)
}

98
apps/web-ui/src/components/PaymentAndOrderComponent.tsx
View file

@ -1,7 +1,7 @@
import React, { useState, useMemo } from 'react'
import { trpc } from '../lib/trpc-client'
import { useQueryClient } from '@tanstack/react-query'
import { MyText, MyButton, MyTextInput, MyTouchableOpacity, LoadingDialog } from 'web-components'
import { p, MyButton, pInput, div, LoadingDialog } from 'web-components'
import { useAllProducts } from '../hooks/prominent-api-hooks'
import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
import { clearLocalCart } from '../hooks/cart-query-hooks'
@ -157,18 +157,18 @@ export function PaymentAndOrderComponent({
{/* Back Button */}
{onBack && (
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-4 shadow-sm">
<MyTouchableOpacity onClick={onBack} className="flex items-center gap-2">
<div onClick={onBack} className="flex items-center gap-2">
<ArrowLeft className="h-5 w-5 text-gray-500" />
<MyText className="font-medium text-gray-600">Back to Cart</MyText>
</MyTouchableOpacity>
<p className="font-medium text-gray-600">Back to Cart</p>
</div>
</div>
)}
{/* Special Instructions */}
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
<MyText weight="bold" className="mb-3 text-base text-gray-900">
<p className="font-bold mb-3 text-base text-gray-900">
Delivery Instructions
</MyText>
</p>
<textarea
value={userNotes}
onChange={(e) => setUserNotes(e.target.value)}
@ -180,9 +180,9 @@ export function PaymentAndOrderComponent({
{/* Payment Method */}
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
<MyText weight="bold" className="mb-4 text-lg text-gray-900">
<p className="font-bold mb-4 text-lg text-gray-900">
Payment Method
</MyText>
</p>
{/* Online Payment (Coming Soon) */}
<div className="mb-3 flex cursor-not-allowed items-center rounded-xl border border-gray-200 bg-gray-100 p-4 opacity-50">
@ -191,15 +191,15 @@ export function PaymentAndOrderComponent({
<CreditCard className="h-5 w-5 text-gray-400" />
</div>
<div>
<MyText weight="bold" className="text-gray-500">
<p className="font-bold text-gray-500">
Pay Online (Coming Soon)
</MyText>
<MyText className="text-xs text-gray-400">UPI, Cards, Netbanking</MyText>
</p>
<p className="text-xs text-gray-400">UPI, Cards, Netbanking</p>
</div>
</div>
{/* Cash on Delivery */}
<MyTouchableOpacity
<div
onClick={() => setPaymentMethod('cod')}
className={`flex items-center rounded-xl border p-4 transition-all ${
paymentMethod === 'cod' ? 'border-brand-500 bg-blue-50' : 'border-gray-200'
@ -216,64 +216,64 @@ export function PaymentAndOrderComponent({
<Banknote className="h-5 w-5 text-green-500" />
</div>
<div>
<MyText weight="bold" className="text-gray-900">
<p className="font-bold text-gray-900">
Cash on Delivery
</MyText>
<MyText className="text-xs text-gray-500">Pay when you receive</MyText>
</p>
<p className="text-xs text-gray-500">Pay when you receive</p>
</div>
</div>
</MyTouchableOpacity>
<div className="mt-3 flex items-center gap-4">
<div className="flex items-center gap-1.5">
<Wallet className="h-3 w-3 text-purple-600" />
<MyText className="text-xs text-gray-500">UPI accepted during COD</MyText>
<p className="text-xs text-gray-500">UPI accepted during COD</p>
</div>
<div className="flex items-center gap-1.5">
<Banknote className="h-3 w-3 text-green-500" />
<MyText className="text-xs text-gray-500">Cash payment</MyText>
<p className="text-xs text-gray-500">Cash payment</p>
</div>
</div>
</div>
{/* Bill Details */}
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
<MyText weight="bold" className="mb-4 text-lg text-gray-900">
<p className="font-bold mb-4 text-lg text-gray-900">
Bill Details
</MyText>
</p>
{/* Item Total */}
<div className="mb-2 flex items-center justify-between">
<MyText className="text-gray-500">Item Total</MyText>
<MyText weight="medium" className="text-gray-900">
<p className="text-gray-500">Item Total</p>
<p className="font-medium text-gray-900">
₹{totalPrice}
</MyText>
</p>
</div>
{/* Discount */}
{discountAmount > 0 && (
<div className="mb-2 flex items-center justify-between">
<MyText className="text-gray-500">Product Discount</MyText>
<MyText weight="medium" className="text-green-600">
<p className="text-gray-500">Product Discount</p>
<p className="font-medium text-green-600">
-₹{discountAmount.toFixed(2)}
</MyText>
</p>
</div>
)}
{/* Delivery Fee */}
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-1">
<MyText className="text-gray-500">Delivery Fee</MyText>
<p className="text-gray-500">Delivery Fee</p>
<Info className="h-3.5 w-3.5 text-gray-400" />
</div>
<div className="flex items-center">
{deliveryCharge === 0 && (
<MyText className="mr-2 text-xs text-gray-400 line-through">
<p className="mr-2 text-xs text-gray-400 line-through">
₹{isFlashDelivery ? constsData?.flashDeliveryCharge : constsData?.deliveryCharge}
</MyText>
</p>
)}
<MyText weight="medium" className={deliveryCharge === 0 ? 'text-green-600' : 'text-gray-900'}>
<p className={`font-medium ${deliveryCharge === 0 ? 'text-green-600' : 'text-gray-900'}`}>
{deliveryCharge === 0 ? 'Free' : `₹${deliveryCharge}`}
</MyText>
</p>
</div>
</div>
@ -285,9 +285,9 @@ export function PaymentAndOrderComponent({
return threshold > 0 && finalTotal < threshold ? (
<div className="mb-2 flex items-center gap-2 rounded-lg bg-blue-50 p-2.5">
<ShoppingBag className="h-4 w-4 text-blue-600" />
<MyText weight="medium" className="flex-1 text-xs text-blue-700">
<p className="font-medium flex-1 text-xs text-blue-700">
Add products worth ₹{(threshold - finalTotal).toFixed(0)} for free delivery
</MyText>
</p>
</div>
) : null
})()}
@ -297,23 +297,23 @@ export function PaymentAndOrderComponent({
{/* Grand Total */}
<div className="flex items-center justify-between">
<MyText weight="bold" className="text-lg text-gray-900">
<p className="font-bold text-lg text-gray-900">
To Pay
</MyText>
<MyText weight="bold" className="text-xl text-gray-900">
</p>
<p className="font-bold text-xl text-gray-900">
₹{finalTotalWithDelivery.toFixed(2)}
</MyText>
</p>
</div>
{/* Savings Banner */}
{(discountAmount > 0 || deliveryCharge === 0) && (
<div className="mt-4 flex items-center justify-center gap-1.5 rounded-lg bg-green-50 p-2">
<Star className="h-4 w-4 text-green-600" />
<MyText weight="bold" className="text-xs text-green-700">
<p className="font-bold text-xs text-green-700">
You saved ₹
{(discountAmount + (deliveryCharge === 0 ? (isFlashDelivery ? constsData?.flashDeliveryCharge : constsData?.deliveryCharge) : 0)).toFixed(2)}{' '}
on this order
</MyText>
</p>
</div>
)}
</div>
@ -323,14 +323,14 @@ export function PaymentAndOrderComponent({
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
<div className="mb-3 flex items-center gap-2">
<Tag className="h-5 w-5 text-brand-500" />
<MyText weight="bold" className="text-lg text-gray-900">
<p className="font-bold text-lg text-gray-900">
Apply Coupon
</MyText>
</p>
</div>
<div className="space-y-2">
{eligibleCoupons.map((coupon: any) => (
<MyTouchableOpacity
<div
key={coupon.id}
onClick={() => setSelectedCouponId(selectedCouponId === coupon.id ? null : coupon.id)}
className={`flex items-center justify-between rounded-xl border p-3 transition-all ${
@ -344,22 +344,22 @@ export function PaymentAndOrderComponent({
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<MyText weight="bold" className="text-sm text-gray-900">
<p className="font-bold text-sm text-gray-900">
{coupon.code}
</MyText>
</p>
{!coupon.isEligible && (
<span className="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-600">
{coupon.ineligibilityReason}
</span>
)}
</div>
<MyText className="text-xs text-gray-500">
<p className="text-xs text-gray-500">
{coupon.discountType === 'percentage'
? `${coupon.discountValue}% off`
: `₹${coupon.discountValue} off`}
{coupon.maxValue ? ` up to ₹${coupon.maxValue}` : ''}
{coupon.minOrder ? ` | Min order ₹${coupon.minOrder}` : ''}
</MyText>
</p>
</div>
{selectedCouponId === coupon.id && (
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-500">
@ -368,7 +368,7 @@ export function PaymentAndOrderComponent({
</svg>
</div>
)}
</MyTouchableOpacity>
</div>
))}
</div>
</div>
@ -379,9 +379,9 @@ export function PaymentAndOrderComponent({
{!selectedAddress && (
<div className="mb-3 flex items-center gap-2 rounded-lg bg-red-50 p-3">
<Info className="h-4 w-4 text-red-500" />
<MyText weight="medium" className="text-sm text-red-600">
<p className="font-medium text-sm text-red-600">
Please select a delivery address to place order
</MyText>
</p>
</div>
)}

224
apps/web-ui/src/components/ProductCard.tsx Normal file
View file

@ -0,0 +1,224 @@
import React from 'react'
import { p, div, Quantifier, MiniQuantifier } from 'web-components'
import { useGetCart, useUpdateCartItem, useRemoveFromCart, useAddToCart } from '../hooks/cart-query-hooks'
import { useCartStore } from '../lib/stores/cart-store'
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useProductSlotIdentifier } from '../hooks/useProductSlotIdentifier'
import dayjs from 'dayjs'
import { Truck, ShoppingCart, ImageOff } from 'lucide-react'
interface ProductCardProps {
item: any
onPress?: () => void
showDeliveryInfo?: boolean
miniView?: boolean
useAddToCartDialog?: boolean
}
const formatQuantity = (quantity: number, unit: string): { value: string; display: string } => {
if (unit?.toLowerCase() === 'kg' && quantity < 1) {
return { value: `${Math.round(quantity * 1000)} g`, display: `${Math.round(quantity * 1000)}g` }
}
return { value: `${quantity} ${unit}(s)`, display: `${quantity}${unit}` }
}
export function ProductCard({
item,
onPress,
showDeliveryInfo = true,
miniView = false,
useAddToCartDialog = false,
}: ProductCardProps) {
const [imageError, setImageError] = React.useState(false)
const [imageLoading, setImageLoading] = React.useState(true)
const imageUri = item.images?.[0]
const { data: cartData } = useGetCart('regular')
const { getQuickestSlot } = useProductSlotIdentifier()
const { setAddedToCartProduct } = useCartStore()
const updateCartItem = useUpdateCartItem('regular')
const removeFromCart = useRemoveFromCart('regular')
const addToCart = useAddToCart('regular')
// Find current quantity from cart data
const cartItem = cartData?.items?.find((cartItem: any) => cartItem.productId === item.id)
const quantity = cartItem?.quantity || 0
// Get slots data from central store
const slots = useCentralSlotStore((state) => state.slots)
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
// Create slot lookup map
const slotMap = React.useMemo(() => {
const map: Record<number, any> = {}
slots?.forEach((slot: any) => {
map[slot.id] = slot
})
return map
}, [slots])
// Get cart item's slot delivery time if item is in cart
const cartSlot = cartItem?.slotId ? slotMap[cartItem.slotId] : null
const displayDeliveryDate = cartSlot?.deliveryTime || item.nextDeliveryDate
// Precompute the next slot and determine display out of stock status
const slotId = getQuickestSlot(item.id)
const productSlotInfo = productSlotsMap[item.id]
const isOutOfStockFromSlots = productSlotInfo?.isOutOfStock
const displayIsOutOfStock = isOutOfStockFromSlots || !slotId
const handleQuantityChange = (newQuantity: number) => {
if (useAddToCartDialog) {
setAddedToCartProduct({ productId: item.id, product: item })
} else if (newQuantity === 0 && cartItem) {
removeFromCart.mutate(cartItem.id)
} else if (newQuantity === 1 && !cartItem) {
const slotId = getQuickestSlot(item.id)
if (!slotId) {
alert('No available delivery slot for this product')
return
}
const slot = slotMap[slotId]
const deliveryTime = slot ? dayjs(slot.deliveryTime).format('ddd, DD MMM • h:mm A') : ''
addToCart.mutate(
{ productId: item.id, quantity: 1, slotId, storeId: item.storeId },
{
onSuccess: () => {
alert(`Added ${item.name} for delivery at ${deliveryTime}`)
},
}
)
} else if (cartItem) {
updateCartItem.mutate({ productId: item.id, quantity: newQuantity })
}
}
return (
<div
className="flex max-w-75 flex-col overflow-hidden rounded-2xl bg-white pb-2 border border-gray-300"
onClick={onPress}
>
{/* Image Container */}
<div className="relative aspect-square w-full overflow-hidden bg-gray-100">
{imageUri && !imageError ? (
<img
src={imageUri}
alt={item.name}
className="h-full w-full object-cover"
onError={() => setImageError(true)}
onLoad={() => setImageLoading(false)}
/>
) : (
<div className="flex h-full w-full items-center justify-center bg-gray-100">
<ImageOff className="h-8 w-8 text-gray-400" />
</div>
)}
{imageLoading && imageUri && !imageError && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-100">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
</div>
)}
{displayIsOutOfStock && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<div className="rounded-full bg-red-500 px-3 py-1">
<p className="text-xs font-bold text-white">Out of Stock</p>
</div>
</div>
)}
{miniView && (
<div className="absolute bottom-2 right-2">
{quantity > 0 ? (
<MiniQuantifier
value={quantity}
setValue={handleQuantityChange}
step={item.incrementStep}
/>
) : (
<div
className="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md"
onClick={(e) => {
e.stopPropagation()
handleQuantityChange(1)
}}
>
<ShoppingCart className="h-4 w-4 text-brand-500" />
</div>
)}
</div>
)}
</div>
{/* Content */}
<div className="px-3 pt-3">
<p className="font-bold mb-1 text-sm text-gray-900">
{item.name}
</p>
<div className="mb-2 flex flex-row items-baseline">
<p className="font-bold text-base text-brand-500">
₹{item.price}
</p>
{item.marketPrice && Number(item.marketPrice) > Number(item.price) && (
<p className="ml-2 text-xs text-gray-400 line-through">
₹{item.marketPrice}
</p>
)}
</div>
<div className="mb-2 flex flex-row items-center">
<p className="text-xs font-medium text-gray-500">
Quantity:{' '}
<span className="font-semibold text-brand-500">
{formatQuantity(item.productQuantity || 1, item.unitNotation).display}
</span>
</p>
</div>
{showDeliveryInfo && displayDeliveryDate && (
<div className="mb-2 flex flex-row items-center self-start rounded-lg border border-brand-100 bg-brand-50 px-2 py-1.5">
<Truck className="h-3 w-3 text-brand-600" />
<p className="ml-1.5 text-[10px] font-bold text-brand-700">
{dayjs(displayDeliveryDate).format('ddd, DD MMM • h:mm A')}
</p>
</div>
)}
{!miniView && (
<>
{displayIsOutOfStock ? (
<div className="mt-1 rounded-lg bg-gray-100 py-2 text-center">
<p className="text-xs font-bold uppercase tracking-wide text-gray-400">
Unavailable
</p>
</div>
) : quantity > 0 ? (
<Quantifier
value={quantity}
setValue={handleQuantityChange}
step={item.incrementStep}
unit={item.unitNotation}
/>
) : (
<button
className="mt-1 flex w-full items-center justify-center gap-1 rounded-lg bg-brand-500 py-2 hover:bg-brand-600 active:bg-brand-700"
onClick={(e) => {
e.stopPropagation()
handleQuantityChange(1)
}}
>
<ShoppingCart className="h-4 w-4 text-white" />
<span className="text-xs font-bold uppercase tracking-wide text-white">
Add to Cart
</span>
</button>
)}
</>
)}
</div>
</div>
)
}

4
apps/web-ui/src/components/index.ts
View file

@ -3,3 +3,7 @@ export { PaymentAndOrderComponent } from './PaymentAndOrderComponent'
export { AddressForm } from './AddressForm'
export { ProtectedRoute } from './ProtectedRoute'
export { Dialog } from './Dialog'
export { BottomNavigation } from './BottomNavigation'
export { FloatingCartBar } from './FloatingCartBar'
export { AppLayout } from './AppLayout'
export { ProductCard } from './ProductCard'

3
apps/web-ui/src/hooks/index.ts
View file

@ -1 +1,4 @@
export { useCheckoutAddress } from './checkout-hooks'
export { useProductSlotIdentifier } from './useProductSlotIdentifier'
export { usePopulateCentralStores } from './usePopulateCentralStores'
export { usePopulateCentralProductStore } from './usePopulateCentralProductStore'

14
apps/web-ui/src/hooks/usePopulateCentralProductStore.ts Normal file
View file

@ -0,0 +1,14 @@
import { useEffect } from 'react'
import { useAllProducts } from './prominent-api-hooks'
import { useCentralProductStore } from '../lib/stores/central-product-store'
export function usePopulateCentralProductStore() {
const { data: productsData } = useAllProducts()
const setProducts = useCentralProductStore((state) => state.setProducts)
useEffect(() => {
if (productsData?.products) {
setProducts(productsData.products)
}
}, [productsData, setProducts])
}

57
apps/web-ui/src/hooks/usePopulateCentralStores.ts Normal file
View file

@ -0,0 +1,57 @@
import { useEffect } from 'react'
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useSlots } from './prominent-api-hooks'
import { useAllProducts } from './prominent-api-hooks'
export function usePopulateCentralStores() {
const { data: slotsData } = useSlots()
const { data: productsData } = useAllProducts()
const setSlots = useCentralSlotStore((state) => state.setSlots)
const setProductSlotsMap = useCentralSlotStore((state) => state.setProductSlotsMap)
useEffect(() => {
if (slotsData?.slots) {
// Transform slots to the format expected by the store
const formattedSlots = slotsData.slots.map((slot: any) => ({
id: slot.id,
deliveryDate: slot.deliveryDate,
deliveryTime: slot.deliveryTime,
displayDate: slot.displayDate || '',
displayTime: slot.displayTime || '',
}))
setSlots(formattedSlots)
// Build product slots map
const productMap: Record<number, any> = {}
const allProducts = productsData?.products || []
allProducts.forEach((product: any) => {
// Find slots that contain this product
const productSlots = slotsData.slots.filter((slot: any) =>
slot.products?.some((p: any) => p.id === product.id)
)
// Check if flash delivery is available
const isFlashAvailable = product.isFlashAvailable || false
// Check if out of stock (no slots available)
const isOutOfStock = productSlots.length === 0 && !isFlashAvailable
productMap[product.id] = {
slotId: productSlots.length > 0 ? productSlots[0].id : null,
slots: productSlots.map((s: any) => ({
id: s.id,
deliveryDate: s.deliveryDate,
deliveryTime: s.deliveryTime,
displayDate: s.displayDate || '',
displayTime: s.displayTime || '',
})),
isOutOfStock,
isFlashAvailable,
}
})
setProductSlotsMap(productMap)
}
}, [slotsData, productsData, setSlots, setProductSlotsMap])
}

30
apps/web-ui/src/hooks/useProductSlotIdentifier.ts Normal file
View file

@ -0,0 +1,30 @@
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useMemo } from 'react'
export function useProductSlotIdentifier() {
const slots = useCentralSlotStore((state) => state.slots)
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
const getQuickestSlot = useMemo(() => {
return (productId: number): number | null => {
const productSlotInfo = productSlotsMap[productId]
if (!productSlotInfo || productSlotInfo.isOutOfStock) {
return null
}
const availableSlots = productSlotInfo.slots || []
if (availableSlots.length === 0) {
return null
}
// Return the first (quickest) slot
return availableSlots[0].id
}
}, [productSlotsMap])
return {
getQuickestSlot,
slots,
productSlotsMap,
}
}

21
apps/web-ui/src/routeTree.gen.ts
View file

@ -10,6 +10,7 @@
import { Route as rootRouteImport } from './routes/__root'
import { Route as StoresRouteImport } from './routes/stores'
import { Route as SlotViewRouteImport } from './routes/slot-view'
import { Route as RegisterRouteImport } from './routes/register'
import { Route as MeRouteImport } from './routes/me'
import { Route as LoginRouteImport } from './routes/login'
@ -43,6 +44,11 @@ const StoresRoute = StoresRouteImport.update({
path: '/stores',
getParentRoute: () => rootRouteImport,
} as any)
const SlotViewRoute = SlotViewRouteImport.update({
id: '/slot-view',
path: '/slot-view',
getParentRoute: () => rootRouteImport,
} as any)
const RegisterRoute = RegisterRouteImport.update({
id: '/register',
path: '/register',
@ -189,6 +195,7 @@ export interface FileRoutesByFullPath {
'/login': typeof LoginRoute
'/me': typeof MeRouteWithChildren
'/register': typeof RegisterRoute
'/slot-view': typeof SlotViewRoute
'/stores': typeof StoresRouteWithChildren
'/flash/cart': typeof FlashCartRoute
'/flash/checkout': typeof FlashCheckoutRoute
@ -219,6 +226,7 @@ export interface FileRoutesByTo {
'/login': typeof LoginRoute
'/me': typeof MeRouteWithChildren
'/register': typeof RegisterRoute
'/slot-view': typeof SlotViewRoute
'/stores': typeof StoresRouteWithChildren
'/flash/cart': typeof FlashCartRoute
'/flash/checkout': typeof FlashCheckoutRoute
@ -250,6 +258,7 @@ export interface FileRoutesById {
'/login': typeof LoginRoute
'/me': typeof MeRouteWithChildren
'/register': typeof RegisterRoute
'/slot-view': typeof SlotViewRoute
'/stores': typeof StoresRouteWithChildren
'/flash/cart': typeof FlashCartRoute
'/flash/checkout': typeof FlashCheckoutRoute
@ -282,6 +291,7 @@ export interface FileRouteTypes {
| '/login'
| '/me'
| '/register'
| '/slot-view'
| '/stores'
| '/flash/cart'
| '/flash/checkout'
@ -312,6 +322,7 @@ export interface FileRouteTypes {
| '/login'
| '/me'
| '/register'
| '/slot-view'
| '/stores'
| '/flash/cart'
| '/flash/checkout'
@ -342,6 +353,7 @@ export interface FileRouteTypes {
| '/login'
| '/me'
| '/register'
| '/slot-view'
| '/stores'
| '/flash/cart'
| '/flash/checkout'
@ -373,6 +385,7 @@ export interface RootRouteChildren {
LoginRoute: typeof LoginRoute
MeRoute: typeof MeRouteWithChildren
RegisterRoute: typeof RegisterRoute
SlotViewRoute: typeof SlotViewRoute
StoresRoute: typeof StoresRouteWithChildren
}
@ -385,6 +398,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof StoresRouteImport
parentRoute: typeof rootRouteImport
}
'/slot-view': {
id: '/slot-view'
path: '/slot-view'
fullPath: '/slot-view'
preLoaderRoute: typeof SlotViewRouteImport
parentRoute: typeof rootRouteImport
}
'/register': {
id: '/register'
path: '/register'
@ -677,6 +697,7 @@ const rootRouteChildren: RootRouteChildren = {
LoginRoute: LoginRoute,
MeRoute: MeRouteWithChildren,
RegisterRoute: RegisterRoute,
SlotViewRoute: SlotViewRoute,
StoresRoute: StoresRouteWithChildren,
}
export const routeTree = rootRouteImport

26
apps/web-ui/src/routes/cart.tsx
View file

@ -1,7 +1,7 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
import { useAllProducts } from '../hooks/prominent-api-hooks'
import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
import { Trash2 } from 'lucide-react'
export const Route = createFileRoute('/cart')({ component: CartPage })
@ -29,13 +29,13 @@ function CartPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
Your Cart
</MyText>
</p>
{cartItems.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<MyText className="text-gray-500">Your cart is empty</MyText>
<p className="text-gray-500">Your cart is empty</p>
<MyButton
textContent="Browse Products"
onClick={() => navigate({ to: '/home' })}
@ -58,20 +58,20 @@ function CartPage() {
className="h-16 w-16 rounded-lg object-cover"
/>
<div className="flex-1">
<MyText weight="semibold" className="text-sm" numberOfLines={1}>
<p className="font-semibold text-sm">
{product.name}
</MyText>
<MyText className="text-brand-600 text-sm font-bold">
</p>
<p className="text-brand-600 text-sm font-bold">
₹{price}
</MyText>
</p>
<Quantifier
value={item.quantity}
setValue={(q) => updateItem.mutate({ productId: item.productId, quantity: q })}
/>
</div>
<MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
<div onClick={() => removeItem.mutate(item.productId)}>
<Trash2 className="h-5 w-5 text-red-500" />
</MyTouchableOpacity>
</div>
</div>
)
})}
@ -79,10 +79,10 @@ function CartPage() {
<div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
<div className="mb-3 flex items-center justify-between">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-lg text-brand-600">
<p className="font-bold">Total</p>
<p className="font-bold text-lg text-brand-600">
₹{total}
</MyText>
</p>
</div>
<MyButton
fullWidth

38
apps/web-ui/src/routes/checkout.tsx
View file

@ -1,5 +1,5 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState, useMemo } from 'react'
import { useState } from 'react'
import { useAuth } from '../lib/auth-context'
import { useGetCart } from '../hooks/cart-query-hooks'
import { useAllProducts } from '../hooks/prominent-api-hooks'
@ -10,8 +10,8 @@ import { AddressForm } from '../components/AddressForm'
import { Dialog } from '../components/Dialog'
import { useAddressStore } from '../lib/stores/address-store'
import { useQueryClient } from '@tanstack/react-query'
import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
import { MapPin, ShoppingCart, ChevronLeft, Flashlight } from 'lucide-react'
import { p, div } from 'web-components'
import { MapPin, ShoppingCart, ChevronLeft } from 'lucide-react'
export const Route = createFileRoute('/checkout')({ component: CheckoutPage })
@ -44,43 +44,43 @@ function CheckoutContent() {
// Handle empty cart case
if (cartItems.length === 0) {
return (
<AppContainer className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
<ShoppingCart className="mb-4 h-16 w-16 text-gray-400" />
<MyText weight="bold" className="mb-2 text-center text-xl text-gray-900">
<p className="font-bold mb-2 text-center text-xl text-gray-900">
Your cart is empty
</MyText>
<MyText className="mb-6 text-center text-gray-500">
</p>
<p className="mb-6 text-center text-gray-500">
Add some delicious items to your cart before checking out
</MyText>
<MyTouchableOpacity
</p>
<div
onClick={() => navigate({ to: '/home' })}
className="rounded-lg bg-brand-500 px-6 py-3"
>
<MyText weight="bold" className="text-white">
<p className="font-bold text-white">
Back to Shopping
</MyText>
</MyTouchableOpacity>
</AppContainer>
</p>
</div>
</div>
)
}
return (
<AppContainer className="min-h-screen bg-gray-50 pb-8">
<div className="min-h-screen bg-gray-50 pb-8">
{/* Checkout Header */}
<div className="sticky top-0 z-10 mb-4 border-b border-gray-100 bg-white px-4 py-3">
<div className="flex items-center">
<MyTouchableOpacity
<div
onClick={() => navigate({ to: '/cart' })}
className="-ml-2 mr-1 flex items-center p-2"
>
<ChevronLeft className="h-7 w-7 text-gray-700" />
</MyTouchableOpacity>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-50">
<MapPin className="h-5 w-5 text-blue-500" />
</div>
<MyText weight="bold" className="ml-3 text-lg text-gray-800">
<p className="font-bold ml-3 text-lg text-gray-800">
Checkout
</MyText>
</p>
</div>
</div>
@ -129,6 +129,6 @@ function CheckoutContent() {
isEdit={!!editingAddress}
/>
</Dialog>
</AppContainer>
</div>
)
}

24
apps/web-ui/src/routes/flash.cart.tsx
View file

@ -1,7 +1,7 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
import { Trash2, Zap } from 'lucide-react'
export const Route = createFileRoute('/flash/cart')({ component: FlashCartPage })
@ -27,14 +27,14 @@ function FlashCartPage() {
<AppContainer>
<div className="mb-4 flex items-center gap-2">
<Zap className="h-5 w-5 text-yellow-500" />
<MyText weight="bold" className="text-xl">
<p className="font-bold text-xl">
Flash Cart
</MyText>
</p>
</div>
{cartItems.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<MyText className="text-gray-500">Your flash cart is empty</MyText>
<p className="text-gray-500">Your flash cart is empty</p>
<MyButton
textContent="Browse Flash Products"
onClick={() => navigate({ to: '/flash' })}
@ -57,10 +57,10 @@ function FlashCartPage() {
className="h-16 w-16 rounded-lg object-cover"
/>
<div className="flex-1">
<MyText weight="semibold" className="text-sm" numberOfLines={1}>
<p className="font-semibold text-sm">
{product.name}
</MyText>
<MyText className="text-brand-600 text-sm font-bold">₹{price}</MyText>
</p>
<p className="text-brand-600 text-sm font-bold">₹{price}</p>
<Quantifier
value={item.quantity}
setValue={(q) =>
@ -68,9 +68,9 @@ function FlashCartPage() {
}
/>
</div>
<MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
<div onClick={() => removeItem.mutate(item.productId)}>
<Trash2 className="h-5 w-5 text-red-500" />
</MyTouchableOpacity>
</div>
</div>
)
})}
@ -78,10 +78,10 @@ function FlashCartPage() {
<div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
<div className="mb-3 flex items-center justify-between">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-lg text-brand-600">
<p className="font-bold">Total</p>
<p className="font-bold text-lg text-brand-600">
₹{total}
</MyText>
</p>
</div>
<MyButton
fullWidth

36
apps/web-ui/src/routes/flash.checkout.tsx
View file

@ -5,7 +5,7 @@ import { useGetCart } from '../hooks/cart-query-hooks'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { trpc } from '../lib/trpc-client'
import { clearLocalCart } from '../hooks/cart-query-hooks'
import { MyText, MyButton, LoadingDialog, AppContainer } from 'web-components'
import { p, MyButton, LoadingDialog, AppContainer } from 'web-components'
import { useQueryClient } from '@tanstack/react-query'
export const Route = createFileRoute('/flash/checkout')({ component: FlashCheckoutPage })
@ -63,14 +63,14 @@ function FlashCheckoutPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
Flash Checkout
</MyText>
</p>
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
<p className="font-semibold mb-2">
Delivery Address
</MyText>
</p>
{addresses?.data?.map((addr: any) => (
<button
key={addr.id}
@ -81,39 +81,39 @@ function FlashCheckoutPage() {
: 'border-gray-200'
}`}
>
<MyText weight="semibold">{addr.name}</MyText>
<MyText className="text-sm text-gray-600">
<p className="font-semibold">{addr.name}</p>
<p className="text-sm text-gray-600">
{addr.addressLine1}, {addr.city}
</MyText>
<MyText className="text-sm text-gray-500">{addr.phone}</MyText>
</p>
<p className="text-sm text-gray-500">{addr.phone}</p>
</button>
))}
</div>
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
<p className="font-semibold mb-2">
Order Summary
</MyText>
</p>
{cartItems.map((item) => {
const product = productsById[item.productId]
if (!product) return null
return (
<div key={item.productId} className="flex items-center justify-between py-2">
<MyText className="text-sm" numberOfLines={1}>
<p className="text-sm">
{product.name} x{item.quantity}
</MyText>
<MyText className="text-sm font-bold">
</p>
<p className="text-sm font-bold">
₹{(product.discountedPrice ?? product.price) * item.quantity}
</MyText>
</p>
</div>
)
})}
<div className="mt-2 border-t border-gray-200 pt-2">
<div className="flex items-center justify-between">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-brand-600">
<p className="font-bold">Total</p>
<p className="font-bold text-brand-600">
₹{total}
</MyText>
</p>
</div>
</div>
</div>

10
apps/web-ui/src/routes/flash.order-success.tsx
View file

@ -1,5 +1,5 @@
import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
import { MyText, MyButton } from 'web-components'
import { p, MyButton } from 'web-components'
import { Zap } from 'lucide-react'
export const Route = createFileRoute('/flash/order-success')({
@ -19,11 +19,11 @@ function FlashOrderSuccessPage() {
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100">
<Zap className="h-10 w-10 text-yellow-600" />
</div>
<MyText weight="bold" className="mb-2 text-2xl text-gray-900">
<p className="font-bold mb-2 text-2xl text-gray-900">
1 Hr Order Placed!
</MyText>
<MyText className="mb-1 text-gray-600">Order ID: #{orderId}</MyText>
<MyText className="mb-8 text-gray-600">Total: ₹{totalAmount}</MyText>
</p>
<p className="mb-1 text-gray-600">Order ID: #{orderId}</p>
<p className="mb-8 text-gray-600">Total: ₹{totalAmount}</p>
<MyButton
textContent="Continue Shopping"
onClick={() => navigate({ to: '/flash' })}

24
apps/web-ui/src/routes/flash.product.$id.tsx
View file

@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { useAddToCart } from '../hooks/cart-query-hooks'
import { useState } from 'react'
import { MyText, MyButton, Quantifier, AppContainer } from 'web-components'
import { p, MyButton, Quantifier, AppContainer } from 'web-components'
import { ShoppingCart, Zap } from 'lucide-react'
export const Route = createFileRoute('/flash/product/$id')({
@ -29,7 +29,7 @@ function FlashProductDetailPage() {
if (!product) {
return (
<AppContainer>
<MyText>Product not found</MyText>
<p>Product not found</p>
</AppContainer>
)
}
@ -41,9 +41,9 @@ function FlashProductDetailPage() {
<AppContainer>
<div className="mb-4 flex items-center gap-2">
<Zap className="h-5 w-5 text-yellow-500" />
<MyText className="text-sm font-semibold text-yellow-600">
<p className="text-sm font-semibold text-yellow-600">
1 Hr Delivery
</MyText>
</p>
</div>
{imageUrl && (
@ -56,21 +56,21 @@ function FlashProductDetailPage() {
</div>
)}
<MyText weight="bold" className="mb-1 text-xl">
<p className="font-bold mb-1 text-xl">
{product.name}
</MyText>
<MyText className="mb-4 text-sm text-gray-500">
</p>
<p className="mb-4 text-sm text-gray-500">
{product.unitValue}{product.unit}
</MyText>
</p>
<div className="mb-4 flex items-baseline gap-2">
<MyText weight="bold" className="text-2xl text-brand-600">
<p className="font-bold text-2xl text-brand-600">
₹{price}
</MyText>
</p>
{product.discountedPrice && (
<MyText className="text-sm text-gray-400 line-through">
<p className="text-sm text-gray-400 line-through">
₹{product.price}
</MyText>
</p>
)}
</div>

30
apps/web-ui/src/routes/flash.tsx
View file

@ -1,15 +1,15 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'
import {
MyText,
p,
MyButton,
Quantifier,
AppContainer,
MyTouchableOpacity,
div,
} from 'web-components'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useAddToCart } from '../hooks/cart-query-hooks'
import { AppLayout } from '../components/AppLayout'
import { ShoppingCart, Zap } from 'lucide-react'
export const Route = createFileRoute('/flash')({ component: FlashDeliveryPage })
@ -34,18 +34,19 @@ function FlashDeliveryPage() {
}
return (
<AppContainer>
<AppLayout isFlashDelivery={true}>
<div className="p-4">
<div className="mb-4 flex items-center gap-2">
<Zap className="h-6 w-6 text-yellow-500" />
<MyText weight="bold" className="text-xl">
<p className="font-bold text-xl">
1 Hr Delivery
</MyText>
</p>
</div>
<div className="mb-4 rounded-xl bg-yellow-50 p-3">
<MyText className="text-sm text-yellow-800">
<p className="text-sm text-yellow-800">
Get these products delivered within 1 hour! Only available for select items.
</MyText>
</p>
</div>
<div className="grid grid-cols-2 gap-3">
@ -66,12 +67,12 @@ function FlashDeliveryPage() {
/>
)}
</div>
<MyText weight="semibold" className="text-sm" numberOfLines={2}>
<p className="font-semibold text-sm">
{product.name}
</MyText>
<MyText weight="bold" className="text-brand-600">
</p>
<p className="font-bold text-brand-600">
₹{price}
</MyText>
</p>
<div className="mt-2 flex items-center gap-2">
<Quantifier
value={qty}
@ -96,9 +97,10 @@ function FlashDeliveryPage() {
{flashProducts.length === 0 && (
<div className="py-20 text-center">
<MyText className="text-gray-500">No flash delivery products available</MyText>
<p className="text-gray-500">No flash delivery products available</p>
</div>
)}
</AppContainer>
</div>
</AppLayout>
)
}

26
apps/web-ui/src/routes/home.cart.tsx
View file

@ -1,7 +1,7 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
import { useAllProducts } from '../hooks/prominent-api-hooks'
import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
import { Trash2 } from 'lucide-react'
export const Route = createFileRoute('/home/cart')({ component: CartPage })
@ -29,13 +29,13 @@ function CartPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
Your Cart
</MyText>
</p>
{cartItems.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<MyText className="text-gray-500">Your cart is empty</MyText>
<p className="text-gray-500">Your cart is empty</p>
<MyButton
textContent="Browse Products"
onClick={() => navigate({ to: '/home' })}
@ -58,20 +58,20 @@ function CartPage() {
className="h-16 w-16 rounded-lg object-cover"
/>
<div className="flex-1">
<MyText weight="semibold" className="text-sm" numberOfLines={1}>
<p className="font-semibold text-sm">
{product.name}
</MyText>
<MyText className="text-brand-600 text-sm font-bold">
</p>
<p className="text-brand-600 text-sm font-bold">
₹{price}
</MyText>
</p>
<Quantifier
value={item.quantity}
setValue={(q) => updateItem.mutate({ productId: item.productId, quantity: q })}
/>
</div>
<MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
<div onClick={() => removeItem.mutate(item.productId)}>
<Trash2 className="h-5 w-5 text-red-500" />
</MyTouchableOpacity>
</div>
</div>
)
})}
@ -79,10 +79,10 @@ function CartPage() {
<div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
<div className="mb-3 flex items-center justify-between">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-lg text-brand-600">
<p className="font-bold">Total</p>
<p className="font-bold text-lg text-brand-600">
₹{total}
</MyText>
</p>
</div>
<MyButton
fullWidth

40
apps/web-ui/src/routes/home.checkout.tsx
View file

@ -5,7 +5,7 @@ import { useGetCart } from '../hooks/cart-query-hooks'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { trpc } from '../lib/trpc-client'
import { clearLocalCart } from '../hooks/cart-query-hooks'
import { MyText, MyButton, LoadingDialog, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, MyButton, LoadingDialog, AppContainer, div } from 'web-components'
import { useQueryClient } from '@tanstack/react-query'
export const Route = createFileRoute('/home/checkout')({ component: CheckoutPage })
@ -63,17 +63,17 @@ function CheckoutPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
Checkout
</MyText>
</p>
{/* Address Selection */}
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
<p className="font-semibold mb-2">
Delivery Address
</MyText>
</p>
{addresses?.data?.map((addr: any) => (
<MyTouchableOpacity
<div
key={addr.id}
onClick={() => setSelectedAddressId(addr.id)}
className={`mb-2 rounded-xl border p-3 ${
@ -82,40 +82,40 @@ function CheckoutPage() {
: 'border-gray-200'
}`}
>
<MyText weight="semibold">{addr.name}</MyText>
<MyText className="text-sm text-gray-600">
<p className="font-semibold">{addr.name}</p>
<p className="text-sm text-gray-600">
{addr.addressLine1}, {addr.city}
</MyText>
<MyText className="text-sm text-gray-500">{addr.phone}</MyText>
</MyTouchableOpacity>
</p>
<p className="text-sm text-gray-500">{addr.phone}</p>
</div>
))}
</div>
{/* Order Summary */}
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
<p className="font-semibold mb-2">
Order Summary
</MyText>
</p>
{cartItems.map((item) => {
const product = productsById[item.productId]
if (!product) return null
return (
<div key={item.productId} className="flex items-center justify-between py-2">
<MyText className="text-sm" numberOfLines={1}>
<p className="text-sm">
{product.name} x{item.quantity}
</MyText>
<MyText className="text-sm font-bold">
</p>
<p className="text-sm font-bold">
₹{(product.discountedPrice ?? product.price) * item.quantity}
</MyText>
</p>
</div>
)
})}
<div className="mt-2 border-t border-gray-200 pt-2">
<div className="flex items-center justify-between">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-brand-600">
<p className="font-bold">Total</p>
<p className="font-bold text-brand-600">
₹{total}
</MyText>
</p>
</div>
</div>
</div>

14
apps/web-ui/src/routes/home.order-success.tsx
View file

@ -1,5 +1,5 @@
import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
import { MyText, MyButton } from 'web-components'
import { p, MyButton } from 'web-components'
import { Package } from 'lucide-react'
export const Route = createFileRoute('/home/order-success')({
@ -19,15 +19,15 @@ function OrderSuccessPage() {
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
<Package className="h-10 w-10 text-green-600" />
</div>
<MyText weight="bold" className="mb-2 text-2xl text-gray-900">
<p className="font-bold mb-2 text-2xl text-gray-900">
Order Placed!
</MyText>
<MyText className="mb-1 text-gray-600">
</p>
<p className="mb-1 text-gray-600">
Order ID: #{orderId}
</MyText>
<MyText className="mb-8 text-gray-600">
</p>
<p className="mb-8 text-gray-600">
Total: ₹{totalAmount}
</MyText>
</p>
<MyButton
textContent="Continue Shopping"
onClick={() => navigate({ to: '/home' })}

28
apps/web-ui/src/routes/home.product.$id.tsx
View file

@ -3,7 +3,7 @@ import { useCentralProductStore } from '../lib/stores/central-product-store'
import { trpc } from '../lib/trpc-client'
import { useAddToCart } from '../hooks/cart-query-hooks'
import { useState } from 'react'
import { MyText, MyButton, Quantifier, AppContainer } from 'web-components'
import { p, MyButton, Quantifier, AppContainer } from 'web-components'
import { ShoppingCart, Star } from 'lucide-react'
export const Route = createFileRoute('/home/product/$id')({
@ -35,7 +35,7 @@ function ProductDetailPage() {
if (!product) {
return (
<AppContainer>
<MyText>Product not found</MyText>
<p>Product not found</p>
</AppContainer>
)
}
@ -55,26 +55,26 @@ function ProductDetailPage() {
</div>
)}
<MyText weight="bold" className="mb-1 text-xl">
<p className="font-bold mb-1 text-xl">
{product.name}
</MyText>
<MyText className="mb-2 text-sm text-gray-500">
</p>
<p className="mb-2 text-sm text-gray-500">
{product.unitValue}{product.unit}
</MyText>
</p>
<div className="mb-4 flex items-baseline gap-2">
<MyText weight="bold" className="text-2xl text-brand-600">
<p className="font-bold text-2xl text-brand-600">
₹{price}
</MyText>
</p>
{product.discountedPrice && (
<MyText className="text-sm text-gray-400 line-through">
<p className="text-sm text-gray-400 line-through">
₹{product.price}
</MyText>
</p>
)}
</div>
{product.description && (
<MyText className="mb-4 text-gray-600">{product.description}</MyText>
<p className="mb-4 text-gray-600">{product.description}</p>
)}
<div className="mb-6">
@ -94,9 +94,9 @@ function ProductDetailPage() {
{/* Reviews */}
{reviews?.data && reviews.data.length > 0 && (
<div className="mt-8">
<MyText weight="bold" className="mb-3 text-lg">
<p className="font-bold mb-3 text-lg">
Reviews
</MyText>
</p>
{reviews.data.map((review: any, i: number) => (
<div key={i} className="mb-3 rounded-lg border border-gray-100 p-3">
<div className="mb-1 flex items-center gap-1">
@ -104,7 +104,7 @@ function ProductDetailPage() {
<Star key={j} className="h-3 w-3 fill-yellow-400 text-yellow-400" />
))}
</div>
<MyText className="text-sm text-gray-600">{review.comment}</MyText>
<p className="text-sm text-gray-600">{review.comment}</p>
</div>
))}
</div>

14
apps/web-ui/src/routes/home.search.tsx
View file

@ -2,7 +2,7 @@ import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
import { useState, useMemo } from 'react'
import Fuse from 'fuse.js'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { MyText, SearchBar, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, SearchBar, AppContainer, div } from 'web-components'
export const Route = createFileRoute('/home/search')({
component: SearchPage,
@ -41,7 +41,7 @@ function SearchPage() {
<div className="mt-4 grid grid-cols-2 gap-3">
{results.map((product) => (
<MyTouchableOpacity
<div
key={product.id}
onClick={() =>
navigate({ to: '/home/product/$id', params: { id: String(product.id) } })
@ -57,13 +57,13 @@ function SearchPage() {
/>
)}
</div>
<MyText weight="semibold" className="text-sm" numberOfLines={2}>
<p className="font-semibold text-sm">
{product.name}
</MyText>
<MyText weight="bold" className="mt-1 text-brand-600">
</p>
<p className="font-bold mt-1 text-brand-600">
₹{product.discountedPrice ?? product.price}
</MyText>
</MyTouchableOpacity>
</p>
</div>
))}
</div>
</AppContainer>

437
apps/web-ui/src/routes/home.tsx
View file

@ -1,21 +1,27 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState, useEffect } from 'react'
import { useState, useEffect, useMemo } from 'react'
import dayjs from 'dayjs'
import {
MyText,
MyTouchableOpacity,
p,
div,
SearchBar,
AppContainer,
} from 'web-components'
import {
useAllProducts,
useStores,
useBanners,
useSlots,
useGetEssentialConsts,
} from '../hooks/prominent-api-hooks'
import { useGetCart } from '../hooks/cart-query-hooks'
import { useCartStore } from '../lib/stores/cart-store'
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { AppLayout } from '../components/AppLayout'
import { ProductCard } from '../components/ProductCard'
import AddToCartDialog from '../components/AddToCartDialog'
import { ShoppingCart, Truck } from 'lucide-react'
import { useProductSlotIdentifier } from '../hooks/useProductSlotIdentifier'
import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
import { Store, ImageOff } from 'lucide-react'
export const Route = createFileRoute('/home')({ component: HomePage })
@ -24,45 +30,118 @@ function HomePage() {
const { data: productsData } = useAllProducts()
const { data: storesData } = useStores()
const { data: bannersData } = useBanners()
const { data: slotsData } = useSlots()
const { data: essentialConsts } = useGetEssentialConsts()
const { setAddedToCartProduct } = useCartStore()
const { getQuickestSlot } = useProductSlotIdentifier()
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
// Populate central stores with slots and product data
usePopulateCentralStores()
const stores = storesData?.stores || []
const banners = bannersData?.banners || []
const allProducts = productsData?.products || []
const slots = slotsData?.slots || []
// Sort products: in-stock first, then by slot availability
const sortedProducts = useMemo(() => {
return [...allProducts]
.filter((p) => typeof p.id === 'number')
.sort((a, b) => {
const slotA = getQuickestSlot(a.id)
const slotB = getQuickestSlot(b.id)
if (slotA && !slotB) return -1
if (!slotA && slotB) return 1
const aOutOfStock = productSlotsMap[a.id]?.isOutOfStock
const bOutOfStock = productSlotsMap[b.id]?.isOutOfStock
if (aOutOfStock && !bOutOfStock) return 1
if (!aOutOfStock && bOutOfStock) return -1
return 0
})
}, [allProducts, productSlotsMap, getQuickestSlot])
// Get popular products from essential consts
const popularItemIds = useMemo(() => {
const popularItems = essentialConsts?.popularItems
if (!popularItems) return []
if (Array.isArray(popularItems)) {
return popularItems.map((id: any) => parseInt(id)).filter((id: number) => !isNaN(id))
} else if (typeof popularItems === 'string') {
return popularItems
.split(',')
.map((id: string) => parseInt(id.trim()))
.filter((id: number) => !isNaN(id))
}
return []
}, [essentialConsts?.popularItems])
const popularProducts = useMemo(() => {
return popularItemIds
.map((id) => allProducts.find((product) => product.id === id))
.filter((product): product is NonNullable<typeof product> => product != null)
}, [popularItemIds, allProducts])
// Sort slots by delivery time
const sortedSlots = useMemo(() => {
const now = dayjs()
return [...slots]
.filter((slot) => dayjs(slot.deliveryTime).isAfter(now))
.sort((a, b) => {
const deliveryDiff = dayjs(a.deliveryTime).diff(dayjs(b.deliveryTime))
if (deliveryDiff !== 0) return deliveryDiff
return dayjs(a.freezeTime).diff(dayjs(b.freezeTime))
})
}, [slots])
const handleProductPress = (id: number) => {
navigate({
to: '/home/product/$id',
params: { id: String(id) },
})
}
const handleAddToCart = (product: any) => {
setAddedToCartProduct({ productId: product.id, product })
}
return (
<div className="mx-auto min-h-screen max-w-7xl bg-white">
<AppLayout>
<div className="min-h-screen bg-white pb-24">
{/* Search Bar */}
<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">
<div className="sticky top-0 z-10 border-b border-gray-100 bg-white/95 px-4 pb-3 pt-4 backdrop-blur-sm">
<SearchBar
placeholder="Search products here..."
onSearch={(q) => navigate({ to: '/home/search', search: { q } })}
/>
</div>
<div className="px-4 md:px-6 lg:px-8">
<div className="px-4">
{/* Banner Carousel */}
{banners.length > 0 && (
<div className="mt-4 mb-8 overflow-hidden rounded-xl">
<div className="mb-6 mt-4 overflow-hidden rounded-xl">
<BannerCarousel banners={banners} />
</div>
)}
{/* Stores Section */}
<div className="mb-8">
<div className="flex items-center justify-between mb-4">
<MyText weight="bold" className="text-lg md:text-xl">
{stores.length > 0 && (
<div className="mb-6">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="font-bold text-xl text-gray-900">
Our Stores
</MyText>
</p>
<p className="mt-0.5 text-xs text-gray-500">
Fresh from our locations
</p>
</div>
<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">
</div>
<div className="flex flex-wrap gap-4">
{stores.map((store: any) => (
<div key={store.id}>
<StoreCard
key={store.id}
store={store}
onClick={() =>
navigate({
@ -71,39 +150,93 @@ function HomePage() {
})
}
/>
</div>
))}
</div>
</div>
)}
{/* Products Section */}
<div className="mb-24">
<div className="flex items-center justify-between mb-4">
<MyText weight="bold" className="text-lg md:text-xl">
All Products
</MyText>
{/* Popular Items Section */}
{popularProducts.length > 0 && (
<div className="mb-6">
<div className="mb-4">
<p className="font-bold text-xl text-gray-900">
Popular Items
</p>
<p className="mt-0.5 text-sm text-gray-500">
Trending fresh picks just for you
</p>
</div>
<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">
{allProducts.slice(0, 30).map((product) => (
<div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
{popularProducts.map((product) => (
<ProductCard
key={product.id}
product={product}
onClick={() =>
navigate({
to: '/home/product/$id',
params: { id: String(product.id) },
})
}
onAddToCart={() => handleAddToCart(product)}
item={product}
onPress={() => handleProductPress(product.id)}
showDeliveryInfo={false}
miniView={true}
useAddToCartDialog={true}
/>
))}
</div>
</div>
)}
{/* Upcoming Delivery Slots Section */}
{sortedSlots.length > 0 && (
<div className="mb-6">
<div className="mb-4">
<p className="font-bold text-xl text-gray-900">
Upcoming Delivery Slots
</p>
<p className="mt-0.5 text-sm text-gray-500">
Plan your fresh deliveries ahead
</p>
</div>
<div className="scrollbar-hide -mx-4 flex gap-4 overflow-x-auto px-4 pb-2">
{sortedSlots.slice(0, 5).map((slot) => (
<SlotCard key={slot.id} slot={slot} />
))}
</div>
</div>
)}
{/* All Products Section */}
<div className="rounded-t-3xl bg-white pt-4">
<div className="mb-4">
<p className="font-bold text-xl text-gray-900">
All Available Products
</p>
<p className="mt-0.5 text-sm text-gray-500">
Browse our complete selection
</p>
</div>
{/* Responsive Grid for Products - evenly distributed */}
<div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
{sortedProducts.map((product) => (
<ProductCard
key={product.id}
item={product}
onPress={() => handleProductPress(product.id)}
showDeliveryInfo={true}
miniView={false}
useAddToCartDialog={true}
/>
))}
</div>
{sortedProducts.length === 0 && (
<div className="py-8 text-center">
<p className="text-gray-500">No products available</p>
</div>
)}
</div>
</div>
{/* Floating Cart Bar */}
<FloatingCartBar onClick={() => navigate({ to: '/cart' })} />
<AddToCartDialog />
</div>
</AppLayout>
)
}
@ -122,31 +255,32 @@ function BannerCarousel({ banners }: { banners: any[] }) {
if (images.length === 0) return null
return (
<div className="relative group">
<div className="flex justify-center">
<div className="group relative inline-block">
<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"
className="max-h-[420px] w-auto max-w-full rounded-xl object-contain transition-all duration-500"
/>
{images.length > 1 && (
<>
<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"
className="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-all hover:bg-black/70"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<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"
className="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-all hover:bg-black/70"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
<div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
<div className="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-1.5">
{images.map((_: any, i: number) => (
<button
key={i}
@ -160,16 +294,17 @@ function BannerCarousel({ banners }: { banners: any[] }) {
</>
)}
</div>
</div>
)
}
function StoreCard({ store, onClick }: { store: any; onClick: () => void }) {
return (
<MyTouchableOpacity
<div
onClick={onClick}
className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow"
className="flex flex-col items-center"
>
<div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
<div className="mb-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl border-2 border-white/30 bg-gray-100 shadow-lg">
{store.signedImageUrl ? (
<img
src={store.signedImageUrl}
@ -177,152 +312,110 @@ function StoreCard({ store, onClick }: { store: any; onClick: () => void }) {
className="h-full w-full object-cover"
/>
) : (
<div className="flex h-full items-center justify-center text-gray-400">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
</svg>
</div>
<Store className="h-7 w-7 text-gray-400" />
)}
</div>
<MyText weight="semibold" className="text-sm truncate">
{store.name}
</MyText>
<MyText className="text-xs text-gray-500">
{store.productCount || 0} products
</MyText>
</MyTouchableOpacity>
<p className="font-bold text-center text-xs tracking-wide text-gray-800">
{store.name.replace(/^The\s+/i, '')}
</p>
</div>
)
}
function ProductCard({
product,
onClick,
onAddToCart,
}: {
product: any
onClick: () => void
onAddToCart?: () => void
}) {
const imageUrl = product.images?.[0]
const hasDiscount =
product.marketPrice != null && product.marketPrice > product.price
function SlotCard({ slot }: { slot: any }) {
const navigate = useNavigate()
const now = dayjs()
const freezeTime = dayjs(slot.freezeTime)
const isClosingSoon = freezeTime.diff(now, 'hour') < 4 && freezeTime.isAfter(now)
const formatTimeRange = (deliveryTime: string) => {
const time = dayjs(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}`
}
}
return (
<div className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow">
<MyTouchableOpacity onClick={onClick}>
<div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
{imageUrl ? (
<img
src={imageUrl}
alt={product.name}
className="h-full w-full object-cover"
/>
) : (
<div className="flex h-full items-center justify-center text-gray-300">
<svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
</svg>
</div>
)}
</div>
<MyText weight="semibold" className="text-sm leading-tight line-clamp-2 mb-1">
{product.name}
</MyText>
<div className="flex items-baseline gap-1.5">
<MyText weight="bold" className="text-brand-600 text-sm md:text-base">
₹{product.price}
</MyText>
{hasDiscount && (
<MyText className="text-xs text-gray-400 line-through">
₹{product.marketPrice}
</MyText>
)}
</div>
<MyText className="text-[11px] text-gray-400 mb-2">
/{product.unit}
</MyText>
{product.nextDeliveryDate && (
<div className="mb-3 flex items-center gap-1 self-start rounded-lg bg-brand-50 px-2 py-1 border border-brand-100">
<Truck className="h-3 w-3 text-brand-600" />
<MyText className="text-[10px] font-bold text-brand-700">
{dayjs(product.nextDeliveryDate).format('ddd, DD MMM • h:mm A')}
</MyText>
</div>
)}
</MyTouchableOpacity>
{onAddToCart && (
<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"
<div
onClick={() => navigate({ to: '/slot-view', search: { slotId: slot.id } })}
className={`min-w-70 shrink-0 cursor-pointer rounded-3xl border border-slate-100 bg-white p-5 shadow-xl ${
isClosingSoon ? 'border-l-4 border-l-amber-400' : 'border-l-4 border-l-brand-500'
}`}
>
<ShoppingCart className="h-4 w-4" />
Add to Cart
</button>
<div className="mb-4 flex flex-row items-start justify-end">
{isClosingSoon && (
<div className="flex flex-row items-center rounded-md border border-amber-100 bg-amber-50 px-2 py-0.5">
<div className="mr-1 h-1 w-1 rounded-full bg-amber-500" />
<p className="text-[10px] font-bold text-amber-700">CLOSING SOON</p>
</div>
)}
</div>
)
}
function FloatingCartBar({ onClick }: { onClick: () => void }) {
const { data: cartData } = useGetCart('regular')
const { data: productsData } = useAllProducts()
const products = productsData?.products || []
const productsById: Record<number, any> = {}
products.forEach((p: any) => { productsById[p.id] = p })
const cartItems = cartData?.items || []
const itemCount = cartItems.length
<div className="mb-5 flex flex-row justify-between">
<div className="mr-4 flex-1">
<div className="mb-1.5 flex flex-row items-center">
<div className="mr-1.5 rounded-md bg-brand-50 p-1">
<svg className="h-3 w-3 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
</svg>
</div>
<p className="text-[10px] font-bold uppercase text-brand-700">Delivery At</p>
</div>
<p className="font-bold text-sm text-slate-900">
{formatTimeRange(slot.deliveryTime)}
</p>
<p className="text-[11px] font-bold text-slate-500">
{dayjs(slot.deliveryTime).format('ddd, MMM DD')}
</p>
</div>
const totalCartValue = cartItems.reduce((sum, item) => {
const product = productsById[item.productId]
const price = product?.price ?? 0
return sum + price * item.quantity
}, 0)
const freeDeliveryThreshold = 149
const remainingForFreeDelivery = Math.max(0, freeDeliveryThreshold - totalCartValue)
return (
<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">
<div className="mx-auto flex max-w-7xl items-center justify-between">
<div className="flex-1">
<div className="flex items-center gap-2">
<MyText weight="bold" className="text-sm text-white">
₹{totalCartValue}
</MyText>
<MyText className="text-xs text-white/80">
{itemCount === 0
? 'No items in cart'
: `• ${itemCount} ${itemCount === 1 ? 'item' : 'items'}`}
</MyText>
</div>
{remainingForFreeDelivery > 0 ? (
<MyText className="text-[10px] font-bold text-white/70">
₹{remainingForFreeDelivery} more for FREE Delivery
</MyText>
) : itemCount > 0 ? (
<div className="flex items-center gap-1">
<svg className="h-3 w-3 text-emerald-300" fill="currentColor" viewBox="0 0 24 24">
<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" />
<div className="mb-1.5 flex flex-row items-center">
<div className="mr-1.5 rounded-md bg-amber-50 p-1">
<svg className="h-3 w-3 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<MyText className="text-[10px] font-bold text-emerald-300">
Free Delivery Unlocked
</MyText>
</div>
<p className="text-[10px] font-bold uppercase text-amber-700">Order By</p>
</div>
<p className="font-bold text-sm text-slate-900">
{dayjs(slot.freezeTime).format('h:mm A')}
</p>
<p className="text-[11px] font-bold text-slate-500">
{dayjs(slot.freezeTime).format('ddd, MMM DD')}
</p>
</div>
</div>
<div className="flex flex-row items-center">
<div className="mr-3 flex flex-row">
{slot.products?.slice(0, 3).map((p: any, i: number) => (
<div
key={p.id}
className={`h-8 w-8 overflow-hidden rounded-full border-2 border-white bg-slate-100 ${i > 0 ? '-ml-3' : ''}`}
>
{p.images?.[0] ? (
<img src={p.images[0]} alt="" className="h-full w-full object-cover" />
) : (
<MyText className="text-[10px] text-white/50">
Shop for ₹{freeDeliveryThreshold}+ for free shipping
</MyText>
<div className="flex h-full items-center justify-center">
<ImageOff className="h-3.5 w-3.5 text-slate-400" />
</div>
)}
</div>
<button
onClick={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"
>
Go to Cart
</button>
))}
</div>
<p className="text-[11px] font-bold text-brand-600">
View all {slot.products?.length || 0} items
</p>
<svg className="ml-1 h-4 w-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
)

43
apps/web-ui/src/routes/login.tsx
View file

@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react'
import { useForm, Controller } from 'react-hook-form'
import { useAuth } from '../lib/auth-context'
import { trpc } from '../lib/trpc-client'
import { MyText, MyButton, MyTextInput, MyTouchableOpacity } from 'web-components'
import { p, MyButton, pInput, div } from 'web-components'
export const Route = createFileRoute('/login')({ component: LoginPage })
@ -126,12 +126,12 @@ function LoginPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-brand-400 to-brand-700 p-4">
<div className="w-full max-w-md">
<MyText weight="bold" className="mb-2 text-center text-4xl text-white">
<p className="font-bold mb-2 text-center text-4xl text-white">
Welcome
</MyText>
<MyText className="mb-8 text-center text-lg text-blue-100">
</p>
<p className="mb-8 text-center text-lg text-blue-100">
Sign in to continue your journey
</MyText>
</p>
<div className="rounded-2xl bg-white p-8 shadow-xl">
<form onSubmit={handleSubmit(onSubmit)}>
@ -140,7 +140,7 @@ function LoginPage() {
control={control}
name="mobile"
render={({ field: { onChange, value } }) => (
<MyTextInput
<pInput
placeholder="Enter your mobile number"
value={value}
onChange={(e) => {
@ -155,9 +155,9 @@ function LoginPage() {
{step === 'otp' && (
<div className="mb-6">
<MyText weight="semibold" className="mb-3 text-center text-base text-gray-800">
<p className="font-semibold mb-3 text-center text-base text-gray-800">
Enter 4-digit OTP
</MyText>
</p>
<div className="flex justify-center gap-2">
{[0, 1, 2, 3].map((i) => (
<input
@ -177,22 +177,21 @@ function LoginPage() {
))}
</div>
<div className="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
<MyTouchableOpacity
<div
onClick={() => { setStep('choice'); setOtpCells(['', '', '', '']) }}
>
<MyText weight="medium" className="text-gray-500">Back</MyText>
</MyTouchableOpacity>
<MyTouchableOpacity
<p className="font-medium text-gray-500">Back</p>
</div>
<div
onClick={() => sendOtpMutation.mutate({ mobile: selectedMobile })}
disabled={!canResend}
>
<MyText
weight="semibold"
className={canResend ? 'text-brand-600' : 'text-gray-400'}
<p
className={`font-semibold ${canResend ? 'text-brand-600' : 'text-gray-400'}`}
>
{canResend ? 'Resend OTP' : `Resend in ${resendCountdown}s`}
</MyText>
</MyTouchableOpacity>
</p>
</div>
</div>
</div>
)}
@ -202,7 +201,7 @@ function LoginPage() {
control={control}
name="password"
render={({ field: { onChange, value } }) => (
<MyTextInput
<pInput
placeholder="Enter your password"
value={value}
onChange={(e) => onChange(e.target.value)}
@ -235,14 +234,14 @@ function LoginPage() {
</form>
{step === 'otp' && (
<MyTouchableOpacity
<div
onClick={() => { setStep('password'); setOtpCells(['', '', '', '']) }}
className="mt-4 block text-center"
>
<MyText weight="semibold" className="text-brand-600">
<p className="font-semibold text-brand-600">
Or login with Password
</MyText>
</MyTouchableOpacity>
</p>
</div>
)}
</div>
</div>

20
apps/web-ui/src/routes/me.about.tsx
View file

@ -1,5 +1,5 @@
import { createFileRoute } from '@tanstack/react-router'
import { MyText, AppContainer } from 'web-components'
import { p, AppContainer } from 'web-components'
import { Heart, Shield, Truck, Leaf } from 'lucide-react'
export const Route = createFileRoute('/me/about')({ component: AboutPage })
@ -30,9 +30,9 @@ function AboutPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-6 text-2xl">
<p className="font-bold mb-6 text-2xl">
About Freshyo
</MyText>
</p>
<div className="grid grid-cols-2 gap-4">
{missions.map((mission) => (
@ -41,23 +41,23 @@ function AboutPage() {
className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
>
<mission.icon className="mb-2 h-8 w-8 text-brand-500" />
<MyText weight="semibold" className="mb-1">
<p className="font-semibold mb-1">
{mission.title}
</MyText>
<MyText className="text-sm text-gray-600">{mission.desc}</MyText>
</p>
<p className="text-sm text-gray-600">{mission.desc}</p>
</div>
))}
</div>
<div className="mt-8">
<MyText weight="bold" className="mb-3 text-lg">
<p className="font-bold mb-3 text-lg">
Sourcing & Quality
</MyText>
<MyText className="mb-6 text-sm leading-relaxed text-gray-600">
</p>
<p className="mb-6 text-sm leading-relaxed text-gray-600">
We partner with trusted local farmers who follow ethical and sustainable
farming practices. Every product undergoes rigorous quality checks to ensure
you receive only the freshest meat.
</MyText>
</p>
</div>
</AppContainer>
)

20
apps/web-ui/src/routes/me.addresses.tsx
View file

@ -1,6 +1,6 @@
import { createFileRoute } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { MyText, MyButton, AppContainer } from 'web-components'
import { p, MyButton, AppContainer } from 'web-components'
import { MapPin, Plus } from 'lucide-react'
import { useState } from 'react'
@ -16,14 +16,14 @@ function AddressesPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
My Addresses
</MyText>
</p>
{addresses.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<MapPin className="h-12 w-12 text-gray-300" />
<MyText className="text-gray-500">No addresses saved</MyText>
<p className="text-gray-500">No addresses saved</p>
</div>
) : (
<div className="flex flex-col gap-3">
@ -34,15 +34,15 @@ function AddressesPage() {
>
<div className="flex items-start justify-between">
<div className="flex-1">
<MyText weight="semibold">{addr.name}</MyText>
<MyText className="text-sm text-gray-600">
<p className="font-semibold">{addr.name}</p>
<p className="text-sm text-gray-600">
{addr.addressLine1}
{addr.addressLine2 ? `, ${addr.addressLine2}` : ''}
</MyText>
<MyText className="text-sm text-gray-600">
</p>
<p className="text-sm text-gray-600">
{addr.city}, {addr.state} - {addr.pincode}
</MyText>
<MyText className="text-sm text-gray-500">{addr.phone}</MyText>
</p>
<p className="text-sm text-gray-500">{addr.phone}</p>
{addr.isDefault && (
<span className="mt-1 inline-block rounded-full bg-brand-100 px-2 py-0.5 text-xs text-brand-700">
Default

247
apps/web-ui/src/routes/me.complaints.tsx
View file

@ -1,116 +1,179 @@
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { p, AppContainer, div } from 'web-components'
import { Phone, Mail, Headphones, CheckCircle, Clock, AlertCircle, ThumbsUp, MessageSquare } from 'lucide-react'
import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
import dayjs from 'dayjs'
import { Dialog } from '../components/Dialog'
import { useState } from 'react'
import {
MyText,
MyButton,
MyTextInput,
AppContainer,
MyTouchableOpacity,
} from 'web-components'
import { MessageSquare, Plus } from 'lucide-react'
export const Route = createFileRoute('/me/complaints')({ component: ComplaintsPage })
function ComplaintsPage() {
const { data } = trpc.user.complaint.getAll.useQuery()
const raiseMutation = trpc.user.complaint.raise.useMutation()
const utils = trpc.useUtils()
const [showForm, setShowForm] = useState(false)
const [body, setBody] = useState('')
const complaints = data?.data || []
interface ComplaintItemProps {
item: any
}
const handleSubmit = () => {
if (!body.trim()) return
raiseMutation.mutate(
{ body: body.trim() },
{
onSuccess: () => {
setBody('')
setShowForm(false)
utils.user.complaint.getAll.invalidate()
},
function ComplaintItem({ item }: ComplaintItemProps) {
return (
<div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
{/* Header: ID, Date, Status */}
<div className="mb-3 flex flex-row items-start justify-between">
<div>
<div className="flex flex-row items-center">
<p className="text-base font-bold text-gray-900">Complaint #{item.id}</p>
{item.orderId && (
<div className="ml-2 rounded bg-gray-100 px-2 py-0.5">
<p className="text-[10px] font-bold text-gray-500">Order #{item.orderId}</p>
</div>
)}
</div>
<p className="mt-1 text-xs text-gray-400">
{dayjs(item.createdAt).format('MMM DD, YYYY • h:mm A')}
</p>
</div>
<div
className={`rounded-full px-3 py-1 ${
item.isResolved ? 'bg-green-100' : 'bg-amber-100'
}`}
>
<p
className={`text-xs font-bold ${
item.isResolved ? 'text-green-700' : 'text-amber-700'
}`}
>
{item.isResolved ? 'Resolved' : 'Pending'}
</p>
</div>
</div>
{/* Complaint Body */}
<p className="mb-4 text-sm leading-6 text-gray-700">{item.complaintBody}</p>
{/* Admin Response */}
{item.response && (
<div className="rounded-xl border border-blue-100 bg-blue-50 p-4">
<div className="mb-2 flex flex-row items-center">
<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
<Headphones className="h-3.5 w-3.5 text-blue-600" />
</div>
<p className="text-xs font-bold uppercase tracking-wide text-blue-800">Support Response</p>
</div>
<p className="text-sm leading-5 text-blue-900">{item.response}</p>
</div>
)}
{!item.response && !item.isResolved && (
<div className="mt-2 flex flex-row items-center">
<Clock className="h-3.5 w-3.5 text-gray-400" />
<p className="ml-1 text-xs italic text-gray-400">We are reviewing your complaint...</p>
</div>
)}
</div>
)
}
function ComplaintsPage() {
const navigate = useNavigate()
const { data, isLoading, error, refetch } = trpc.user.complaint.getAll.useQuery()
const complaints = data?.complaints || []
const { data: constsData } = useGetEssentialConsts()
const [showContactDialog, setShowContactDialog] = useState(false)
if (isLoading) {
return (
<AppContainer>
<div className="flex min-h-full flex-1 items-center justify-center bg-gray-50">
<p className="font-medium text-gray-500">Loading complaints...</p>
</div>
</AppContainer>
)
}
if (error) {
return (
<AppContainer>
<div className="flex min-h-full flex-1 flex-col items-center justify-center bg-gray-50">
<AlertCircle className="mb-4 h-12 w-12 text-red-500" />
<p className="text-lg font-bold text-gray-900">Oops!</p>
<p className="mt-2 text-gray-500">Failed to load complaints</p>
</div>
</AppContainer>
)
}
return (
<AppContainer>
<div className="mb-4 flex items-center justify-between">
<MyText weight="bold" className="text-xl">
Help & Complaints
</MyText>
<MyTouchableOpacity
onClick={() => setShowForm(!showForm)}
className="flex items-center gap-1 text-brand-600"
<div className="min-h-full flex-1 bg-gray-50">
{/* Support Header */}
<div className="bg-brand-600 px-4 py-5">
<div className="mb-4 flex flex-row items-center">
<div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/20">
<Headphones className="h-5 w-5 text-white" />
</div>
<p className="text-lg font-bold text-white">Need Help?</p>
</div>
<div className="flex flex-col gap-3">
{/* Call Us Card */}
<a
href={`tel:${constsData?.supportMobile || '8688182552'}`}
className="flex w-full flex-row items-center rounded-xl bg-white p-3"
>
<Plus className="h-4 w-4" />
<MyText className="text-sm">New</MyText>
</MyTouchableOpacity>
<div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
<Phone className="h-5 w-5 text-green-600" />
</div>
<div>
<p className="text-[10px] font-bold uppercase text-gray-500">Call Us</p>
<p className="text-base font-bold text-gray-900">
{constsData?.supportMobile || '8688182552'}
</p>
</div>
</a>
{/* Email Card */}
<a
href={`mailto:${constsData?.supportEmail || 'qushammohd@gmail.com'}`}
className="flex w-full flex-row items-center rounded-xl bg-white p-3"
>
<div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
<Mail className="h-5 w-5 text-blue-600" />
</div>
<div>
<p className="text-[10px] font-bold uppercase text-gray-500">Email</p>
<p className="text-sm font-bold text-gray-900">
{constsData?.supportEmail || 'qushammohd@gmail.com'}
</p>
</div>
</a>
</div>
</div>
{/* Raise Complaint Form */}
{showForm && (
<div className="mb-6 rounded-xl border border-gray-100 bg-white p-4 shadow-sm">
<MyText weight="semibold" className="mb-3">
Raise a Complaint
</MyText>
<textarea
className="mb-3 min-h-24 w-full rounded-lg border border-gray-200 p-3 text-sm"
value={body}
onChange={(e) => setBody(e.target.value)}
placeholder="Describe your issue..."
rows={4}
/>
<MyButton
onClick={handleSubmit}
disabled={raiseMutation.isPending || !body.trim()}
textContent={raiseMutation.isPending ? 'Submitting...' : 'Submit'}
/>
</div>
)}
{/* Complaint List */}
{/* Complaints List */}
<div className="px-4 py-6">
{complaints.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<MessageSquare className="h-12 w-12 text-gray-300" />
<MyText className="text-gray-500">No complaints yet</MyText>
<div className="flex flex-1 flex-col items-center justify-center py-20">
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
<ThumbsUp className="h-10 w-10 text-gray-400" />
</div>
<p className="text-xl font-bold text-gray-900">No Complaints</p>
<p className="mt-2 px-10 text-center leading-5 text-gray-500">
You haven't raised any complaints yet. That's great!
</p>
<button
onClick={() => navigate({ to: '/home' })}
className="mt-8 rounded-xl bg-brand-600 px-6 py-3 font-bold text-white shadow-sm"
>
Continue Shopping
</button>
</div>
) : (
<div className="flex flex-col gap-3">
{complaints.map((complaint: any) => (
<div
key={complaint.id}
className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
>
<div className="mb-2 flex items-center justify-between">
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
complaint.status === 'resolved'
? 'bg-green-100 text-green-700'
: 'bg-yellow-100 text-yellow-700'
}`}
>
{complaint.status || 'pending'}
</span>
<MyText className="text-xs text-gray-400">
{complaint.createdAt
? new Date(complaint.createdAt).toLocaleDateString()
: ''}
</MyText>
</div>
<MyText className="text-sm text-gray-700">{complaint.body}</MyText>
{complaint.adminResponse && (
<div className="mt-2 rounded-lg bg-blue-50 p-2">
<MyText className="text-xs text-blue-600">
Response: {complaint.adminResponse}
</MyText>
</div>
complaints.map((complaint: any) => (
<ComplaintItem key={complaint.id} item={complaint} />
))
)}
</div>
))}
</div>
)}
</AppContainer>
)
}

206
apps/web-ui/src/routes/me.coupons.tsx
View file

@ -1,80 +1,182 @@
import { createFileRoute } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { useState } from 'react'
import { MyText, MyButton, MyTextInput, AppContainer } from 'web-components'
import { Ticket } from 'lucide-react'
import { p, MyButton, AppContainer, div } from 'web-components'
import { Ticket, AlertCircle } from 'lucide-react'
import dayjs from 'dayjs'
export const Route = createFileRoute('/me/coupons')({ component: CouponsPage })
interface Coupon {
id: number
code: string
discountType: 'percentage' | 'flat'
discountValue: number
maxValue?: number
minOrder?: number
description: string
validTill?: string | Date
usageCount: number
maxLimitForUser?: number
isExpired: boolean
isUsedUp: boolean
}
interface CouponCardProps {
coupon: Coupon
}
function CouponCard({ coupon }: CouponCardProps) {
const getStatusColor = () => {
if (coupon.isExpired) return 'text-red-500'
if (coupon.isUsedUp) return 'text-orange-500'
return 'text-green-600'
}
const getStatusText = () => {
if (coupon.isExpired) return 'Expired'
if (coupon.isUsedUp) return 'Used'
return 'Available'
}
const formatDate = (date?: string | Date) => {
if (!date) return 'No expiry'
return dayjs(date).format('DD MMM YYYY')
}
return (
<div className="mb-3 rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
<div className="mb-2 flex items-start justify-between">
<div className="flex-1">
<p className="mb-1 text-lg font-semibold text-gray-800">{coupon.code}</p>
<p className="mb-2 text-sm text-gray-600">{coupon.description}</p>
</div>
<div className="items-end text-right">
<p className={`mb-1 text-sm font-medium ${getStatusColor()}`}>{getStatusText()}</p>
{coupon.maxLimitForUser && (
<p className="text-xs text-gray-500">Used: {coupon.usageCount}/{coupon.maxLimitForUser}</p>
)}
</div>
</div>
<div className="flex items-center justify-between">
<p className="text-xs text-gray-500">Valid till: {formatDate(coupon.validTill)}</p>
<button
className={`rounded-full px-3 py-1 text-xs font-medium text-white ${
coupon.isExpired || coupon.isUsedUp
? 'cursor-not-allowed bg-gray-400'
: 'bg-blue-500 hover:bg-blue-600'
}`}
disabled={coupon.isExpired || coupon.isUsedUp}
>
{coupon.isExpired || coupon.isUsedUp ? 'Unavailable' : 'Apply'}
</button>
</div>
</div>
)
}
interface CouponSectionProps {
title: string
coupons: Coupon[]
emptyMessage: string
}
function CouponSection({ title, coupons, emptyMessage }: CouponSectionProps) {
return (
<div className="mb-6">
<p className="mb-3 text-lg font-semibold text-gray-800">{title}</p>
{coupons.length === 0 ? (
<div className="flex flex-col items-center rounded-lg bg-gray-50 p-6">
<Ticket className="mb-2 h-12 w-12 text-gray-400" />
<p className="text-center text-gray-500">{emptyMessage}</p>
</div>
) : (
coupons.map((coupon) => <CouponCard key={coupon.id} coupon={coupon} />)
)}
</div>
)
}
function CouponsPage() {
const [code, setCode] = useState('')
const { data } = trpc.user.coupon.getMyCoupons.useQuery()
const redeemMutation = trpc.user.coupon.redeemReservedCoupon.useMutation()
const utils = trpc.useUtils()
const coupons = data?.data || []
const handleRedeem = () => {
if (!code.trim()) return
redeemMutation.mutate(
{ couponCode: code.trim() },
{
const { data, isLoading, error, refetch } = trpc.user.coupon.getMyCoupons.useQuery()
const redeemMutation = trpc.user.coupon.redeemReservedCoupon.useMutation({
onSuccess: () => {
setCode('')
utils.user.coupon.getMyCoupons.invalidate()
refetch()
},
})
const personalCoupons = data?.data?.personal || []
const generalCoupons = data?.data?.general || []
const handleRedeem = () => {
if (!code.trim() || code.trim().length < 4) return
redeemMutation.mutate({ secretCode: code.trim().toUpperCase() })
}
if (isLoading) {
return (
<AppContainer>
<div className="flex flex-1 items-center justify-center">
<p className="text-gray-600">Loading coupons...</p>
</div>
</AppContainer>
)
}
if (error) {
return (
<AppContainer>
<div className="flex flex-1 flex-col items-center justify-center p-4">
<AlertCircle className="mb-2 h-12 w-12 text-red-500" />
<p className="text-center text-red-600">Failed to load coupons. Please try again.</p>
</div>
</AppContainer>
)
}
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
My Coupons
</MyText>
{/* Redeem Code */}
<div className="mb-6 flex gap-2">
<MyTextInput
<div className="flex-1 p-4">
{/* Add Coupon Card */}
<div className="mb-6 rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
<p className="mb-3 text-lg font-semibold text-gray-800">Add a Coupon</p>
<input
type="text"
placeholder="Enter coupon code"
value={code}
onChange={(e) => setCode(e.target.value)}
className="flex-1"
className="mb-4 w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
/>
<MyButton
<button
onClick={handleRedeem}
disabled={redeemMutation.isPending || !code.trim()}
textContent={redeemMutation.isPending ? 'Redeeming...' : 'Redeem'}
/>
disabled={redeemMutation.isPending || code.trim().length < 4}
className={`w-full rounded-lg px-4 py-3 text-center font-semibold text-white ${
redeemMutation.isPending || code.trim().length < 4
? 'cursor-not-allowed bg-gray-400 opacity-50'
: 'bg-blue-500 hover:bg-blue-600'
}`}
>
{redeemMutation.isPending ? 'Adding...' : 'Add Coupon'}
</button>
</div>
{/* Coupon List */}
{coupons.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<Ticket className="h-12 w-12 text-gray-300" />
<MyText className="text-gray-500">No coupons yet</MyText>
{/* Coupon Sections */}
<CouponSection
title="Only for Me"
coupons={personalCoupons}
emptyMessage="No personal coupons available"
/>
<CouponSection
title="Apply to All"
coupons={generalCoupons}
emptyMessage="No general coupons available"
/>
</div>
) : (
<div className="flex flex-col gap-3">
{coupons.map((coupon: any) => (
<div
key={coupon.id}
className="rounded-xl border border-dashed border-brand-200 bg-brand-50 p-4"
>
<MyText weight="bold" className="text-brand-700">
{coupon.code}
</MyText>
<MyText className="text-sm text-gray-600">
{coupon.description || `${coupon.discountPercent || 0}% off`}
</MyText>
{coupon.expiresAt && (
<MyText className="mt-1 text-xs text-gray-400">
Expires: {new Date(coupon.expiresAt).toLocaleDateString()}
</MyText>
)}
</div>
))}
</div>
)}
</AppContainer>
)
}

219
apps/web-ui/src/routes/me.edit-profile.tsx
View file

@ -2,7 +2,9 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'
import { useAuth } from '../lib/auth-context'
import { trpc } from '../lib/trpc-client'
import { MyText, MyButton, MyTextInput, AppContainer } from 'web-components'
import { p, AppContainer, div } from 'web-components'
import { AlertCircle, LogOut, Trash2, User, Mail, Phone, X } from 'lucide-react'
import { Dialog } from '../components/Dialog'
export const Route = createFileRoute('/me/edit-profile')({ component: EditProfilePage })
@ -11,17 +13,23 @@ function EditProfilePage() {
const { user, logout, loginWithToken } = useAuth()
const [name, setName] = useState(user?.name || '')
const [email, setEmail] = useState(user?.email || '')
const [showDeleteModal, setShowDeleteModal] = useState(false)
const [enteredMobile, setEnteredMobile] = useState('')
const updateMutation = trpc.user.auth.updateProfile.useMutation({
onSuccess: (data) => {
if (data.token && data.user) {
loginWithToken(data.token, data.user)
if (data.data.token && data.data.user) {
loginWithToken(data.data.token, data.data.user)
}
navigate({ to: '/me' })
},
})
const deleteMutation = trpc.user.auth.deleteAccount.useMutation({
onSuccess: () => logout(),
onSuccess: () => {
setShowDeleteModal(false)
logout()
},
})
const handleSubmit = (e: React.FormEvent) => {
@ -29,65 +37,166 @@ function EditProfilePage() {
updateMutation.mutate({ name, email })
}
const handleDeleteAccount = () => {
setShowDeleteModal(true)
}
const confirmDeleteAccount = () => {
if (!enteredMobile.trim()) {
alert('Please enter your mobile number')
return
}
deleteMutation.mutate({ mobile: enteredMobile.trim() })
}
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
Edit Profile
</MyText>
<div className="flex min-h-full flex-col px-4 py-8">
{/* Header */}
<div className="mb-8 mt-4 text-center">
<p className="mb-2 text-3xl font-bold text-gray-800">Edit Profile</p>
<p className="text-base text-gray-600">Update your account details</p>
</div>
{/* Profile Form */}
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<MyTextInput
placeholder="Name"
{/* Name Field */}
<div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
<label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
<User className="h-4 w-4" />
Full Name
</label>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<MyTextInput
placeholder="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MyTextInput
placeholder="Mobile"
value={user?.mobile || ''}
disabled
className="bg-gray-50"
/>
<MyButton
type="submit"
fullWidth
disabled={updateMutation.isPending}
textContent={updateMutation.isPending ? 'Saving...' : 'Save Changes'}
className="bg-brand-500 text-white"
/>
</form>
<div className="mt-8 border-t border-gray-200 pt-8">
<MyButton
fullWidth
variant="red"
onClick={() => logout()}
textContent="Logout"
/>
<MyButton
fullWidth
variant="red"
onClick={() => {
if (window.confirm('Are you sure you want to delete your account?')) {
deleteMutation.mutate({ mobile: user?.mobile || '' })
}
}}
disabled={deleteMutation.isPending}
textContent={
deleteMutation.isPending
? 'Deleting...'
: 'Delete My Account'
}
className="mt-3 bg-red-600 text-white"
className="w-full rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none"
/>
</div>
{/* Email Field */}
<div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
<label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
<Mail className="h-4 w-4" />
Email Address
</label>
<input
type="email"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none"
/>
</div>
{/* Mobile Field (Disabled) */}
<div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
<label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
<Phone className="h-4 w-4" />
Mobile Number
</label>
<input
type="tel"
value={user?.mobile || ''}
disabled
className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-500"
/>
<p className="mt-1 text-xs text-gray-400">Mobile number cannot be changed</p>
</div>
{/* Save Button */}
<button
type="submit"
disabled={updateMutation.isPending}
className={`mt-2 w-full rounded-lg px-4 py-3 font-semibold text-white transition-colors ${
updateMutation.isPending
? 'cursor-not-allowed bg-gray-400'
: 'bg-blue-600 hover:bg-blue-700'
}`}
>
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
</button>
</form>
{/* Action Buttons */}
<div className="mt-8 space-y-3">
{/* Logout Button */}
<button
onClick={logout}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-red-600 transition-colors hover:bg-red-50"
>
<LogOut className="h-4 w-4" />
Logout
</button>
{/* Delete Account Button */}
<button
onClick={handleDeleteAccount}
className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-600 px-4 py-3 font-medium text-white transition-colors hover:bg-red-700"
>
<Trash2 className="h-4 w-4" />
Delete Me and My Data
</button>
</div>
</div>
{/* Delete Account Modal */}
<Dialog open={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
<div className="p-4">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2 text-red-600">
<AlertCircle className="h-6 w-6" />
<p className="text-xl font-bold">Delete Account Permanently</p>
</div>
<button
onClick={() => setShowDeleteModal(false)}
className="rounded-full p-1 hover:bg-gray-100"
>
<X className="h-5 w-5 text-gray-500" />
</button>
</div>
<p className="mb-4 text-center text-gray-700">
This action cannot be undone. All your data will be permanently deleted.
</p>
<p className="mb-4 text-sm text-gray-600">
Enter your registered mobile number to confirm:
</p>
<div className="mb-6">
<input
type="tel"
value={enteredMobile}
onChange={(e) => setEnteredMobile(e.target.value)}
placeholder="Enter mobile number"
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-red-500 focus:outline-none"
maxLength={15}
/>
</div>
<div className="flex gap-3">
<button
onClick={() => setShowDeleteModal(false)}
className="flex-1 rounded-lg border border-gray-200 bg-gray-100 px-4 py-3 font-medium text-gray-700 transition-colors hover:bg-gray-200"
>
Cancel
</button>
<button
onClick={confirmDeleteAccount}
disabled={deleteMutation.isPending || !enteredMobile.trim()}
className={`flex-1 rounded-lg px-4 py-3 font-medium text-white transition-colors ${
deleteMutation.isPending || !enteredMobile.trim()
? 'cursor-not-allowed bg-red-400'
: 'bg-red-600 hover:bg-red-700'
}`}
>
{deleteMutation.isPending ? 'Deleting...' : 'Delete Forever'}
</button>
</div>
</div>
</Dialog>
</AppContainer>
)
}

542
apps/web-ui/src/routes/me.orders.$id.tsx
View file

@ -1,147 +1,479 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { useState } from 'react'
import { MyText, MyButton, LoadingDialog, AppContainer, MyTouchableOpacity } from 'web-components'
import { ArrowLeft, Package } from 'lucide-react'
import { useState, useEffect } from 'react'
import { p, AppContainer, div } from 'web-components'
import { ChevronLeft, CreditCard, Package, CheckCircle, XCircle, Clock, Zap, Calendar, Edit2, Tag, AlertCircle, X } from 'lucide-react'
import { Dialog } from '../components/Dialog'
import dayjs from 'dayjs'
export const Route = createFileRoute('/me/orders/$id')({
component: OrderDetailPage,
})
function OrderDetailPage() {
const { id } = Route.useParams()
const { id } = useParams({ from: '/me/orders/$id' })
const navigate = useNavigate()
const orderId = Number(id)
const [showCancelDialog, setShowCancelDialog] = useState(false)
const { data } = trpc.user.order.getOrderById.useQuery({ orderId })
const cancelMutation = trpc.user.order.cancelOrder.useMutation()
const order = data?.data
const handleCancel = () => {
cancelMutation.mutate(
{ orderId },
{ onSuccess: () => setShowCancelDialog(false) }
const { data: orderData, isLoading, error, refetch } = trpc.user.order.getOrderById.useQuery(
{ orderId: orderId+'' },
{ enabled: !!orderId }
)
const [isEditingNotes, setIsEditingNotes] = useState(false)
const [notesText, setNotesText] = useState('')
const [notesInput, setNotesInput] = useState('')
const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
const [cancelReason, setCancelReason] = useState('')
const [complaintDialogOpen, setComplaintDialogOpen] = useState(false)
const [complaintBody, setComplaintBody] = useState('')
// const order = orderData?.data
const updateNotesMutation = trpc.user.order.updateUserNotes.useMutation({
onSuccess: () => {
setNotesText(notesInput)
setIsEditingNotes(false)
refetch()
},
})
const cancelOrderMutation = trpc.user.order.cancelOrder.useMutation({
onSuccess: () => {
setCancelDialogOpen(false)
setCancelReason('')
refetch()
},
})
const raiseComplaintMutation = trpc.user.complaint.raise.useMutation({
onSuccess: () => {
setComplaintDialogOpen(false)
setComplaintBody('')
refetch()
},
})
useEffect(() => {
if (orderData?.userNotes) {
setNotesText(orderData.userNotes)
setNotesInput(orderData.userNotes)
}
}, [orderData])
const handleCancelOrder = () => {
if (!cancelReason.trim()) {
alert('Please enter a reason for cancellation')
return
}
cancelOrderMutation.mutate({ id: orderId, reason: cancelReason })
}
if (!order) {
const handleRaiseComplaint = () => {
if (!complaintBody.trim()) {
alert('Please describe your complaint')
return
}
raiseComplaintMutation.mutate({ orderId: orderId+'', complaintBody: complaintBody.trim() })
}
if (isLoading) {
return (
<AppContainer>
<MyText>Loading...</MyText>
<div className="flex min-h-full flex-1 items-center justify-center bg-white">
<p className="font-medium text-slate-400">Loading details...</p>
</div>
</AppContainer>
)
}
if (error || !orderData) {
return (
<AppContainer>
<MyTouchableOpacity
<div className="flex min-h-full flex-1 flex-col items-center justify-center bg-white p-8">
<AlertCircle className="mb-4 h-12 w-12 text-red-500" />
<p className="mt-4 text-lg font-bold text-slate-900">Failed to load</p>
<button
onClick={() => navigate({ to: '/me/orders' })}
className="mb-4 flex items-center gap-2"
className="mt-6 rounded-xl bg-slate-900 px-6 py-2 font-bold text-white"
>
<ArrowLeft className="h-5 w-5" />
<MyText>Back to Orders</MyText>
</MyTouchableOpacity>
Go Back
</button>
</div>
</AppContainer>
)
}
<div className="mb-4">
<MyText weight="bold" className="text-xl">
Order #{order.id}
</MyText>
<span
className={`mt-1 inline-block rounded-full px-3 py-1 text-xs font-medium ${
order.status === 'delivered'
? 'bg-green-100 text-green-700'
: order.status === 'cancelled'
? 'bg-red-100 text-red-700'
: 'bg-yellow-100 text-yellow-700'
}`}
const getStatusConfig = (status: string) => {
const s = status.toLowerCase()
switch (s) {
case 'delivered':
case 'success':
return { label: 'Delivered', color: '#10B981', bgColor: 'bg-green-50', textColor: 'text-green-700' }
case 'cancelled':
case 'failed':
return { label: 'Cancelled', color: '#EF4444', bgColor: 'bg-red-50', textColor: 'text-red-700' }
case 'pending':
case 'processing':
return { label: 'Pending', color: '#F59E0B', bgColor: 'bg-yellow-50', textColor: 'text-yellow-700' }
default:
return { label: status, color: '#3B82F6', bgColor: 'bg-blue-50', textColor: 'text-blue-700' }
}
}
const orderAny = orderData as any
const subtotal = orderData.items?.reduce((sum: number, item: any) => sum + (item.amount || item.price * item.quantity), 0) || 0
const discountAmount = orderData.discountAmount || 0
const deliveryCharge = orderData.deliveryCharge || 0
const totalAmount = orderData.orderAmount || subtotal - discountAmount + deliveryCharge
const statusConfig = getStatusConfig(orderData.deliveryStatus || 'pending')
return (
<AppContainer>
<div className="flex min-h-full flex-1 flex-col bg-slate-50">
{/* Header */}
<div className="flex flex-row items-center justify-between border-b border-slate-100 bg-white px-6 pb-4 pt-4">
<div className="flex flex-row items-center">
<button
onClick={() => navigate({ to: '/me/orders' })}
className="-ml-2 mr-3 p-2"
>
{order.status}
</span>
<ChevronLeft className="h-6 w-6 text-slate-800" />
</button>
<div>
<p className="text-lg font-bold text-slate-900">Order #{orderData.orderId || orderData.id}</p>
<p className="text-xs text-slate-400">
{dayjs(orderData.orderDate || orderData.createdAt).format('DD MMM, h:mm A')}
</p>
{orderData.isFlashDelivery && (
<p className="mt-1 text-xs font-bold text-amber-600">⚡ 1 Hr Delivery</p>
)}
</div>
</div>
<div className="flex flex-row items-center gap-2">
<div
className={`rounded-full px-3 py-1 ${statusConfig.bgColor}`}
style={{ backgroundColor: statusConfig.color + '10' }}
>
<p className="text-[10px] font-bold uppercase" style={{ color: statusConfig.color }}>
{statusConfig.label}
</p>
</div>
{orderData.isFlashDelivery && (
<div className="rounded-full border border-amber-200 bg-amber-100 px-2 py-1">
<p className="text-[10px] font-black uppercase text-amber-700">⚡</p>
</div>
)}
</div>
</div>
{/* Items */}
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
Items
</MyText>
{(order.items || []).map((item: any, i: number) => (
<div
key={i}
className="flex items-center justify-between border-b border-gray-100 py-2"
<div className="flex-1 overflow-y-auto p-4 pb-12">
{/* 1 Hr Delivery Banner */}
{orderData.isFlashDelivery && (
<div className="mb-4 rounded-2xl border border-amber-200 bg-linear-to-r from-amber-50 to-yellow-50 p-4">
<div className="flex flex-row items-center">
<Zap className="h-6 w-6 text-amber-600" />
<div className="ml-3 flex-1">
<p className="text-sm font-bold text-amber-900">1 Hr Delivery Order</p>
<p className="mt-1 text-xs text-amber-700">
Your order will be delivered within 1 hr of placement
</p>
</div>
</div>
</div>
)}
{/* Main Info Card */}
<div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
<div className="mb-4 flex flex-row items-center justify-between">
<div className="flex flex-row items-center">
<div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-slate-50">
<CreditCard className="h-5 w-5 text-slate-500" />
</div>
<div>
<p className="text-[10px] font-bold uppercase text-slate-400">Payment Method</p>
<p className="font-bold text-slate-900">
{orderData.paymentMode?.toUpperCase() === 'COD' ? 'Cash on Delivery' : orderData.paymentMode}
</p>
</div>
</div>
<div className="items-end text-right">
<p className="text-[10px] font-bold uppercase text-slate-400">Status</p>
<p className="font-bold capitalize text-slate-900">{orderData.paymentStatus}</p>
</div>
</div>
{/* Delivery Date Info */}
{(orderData.deliveryDate || orderData.isFlashDelivery) &&
['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
<div className="flex flex-row items-center border-t border-slate-50 pt-4">
{orderData.isFlashDelivery ? (
<Zap className="h-4 w-4 text-amber-600" />
) : (
<CheckCircle className="h-4 w-4 text-green-600" />
)}
<p className={`ml-2 text-xs font-medium ${orderData.isFlashDelivery ? 'text-amber-700' : 'text-slate-600'}`}>
{orderData.isFlashDelivery
? `Flash Delivered on ${dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}`
: `Delivered on ${dayjs(orderData.deliveryDate).format('DD MMM YYYY, h:mm A')}`}
</p>
</div>
)}
{/* Pending 1 Hr Delivery Info */}
{orderData.isFlashDelivery &&
!['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
<div className="flex flex-row items-center border-t border-slate-50 pt-4">
<Zap className="h-4 w-4 text-amber-600" />
<p className="ml-2 text-xs font-medium text-amber-700">
1 Hr Delivery: {dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}
</p>
</div>
)}
</div>
{/* Special Instructions */}
<div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
<div className="mb-3 flex flex-row items-center justify-between">
<p className="text-[10px] font-bold uppercase text-slate-400">Special Instructions</p>
{isEditingNotes ? (
<div className="flex flex-row gap-2">
<button
onClick={() => {
setIsEditingNotes(false)
setNotesInput(notesText)
}}
className="rounded-lg bg-slate-100 px-3 py-1"
>
<MyText className="text-sm">
{item.product?.name || `Product #${item.productId}`} x{item.quantity}
</MyText>
<MyText className="text-sm font-bold">₹{item.price || 0}</MyText>
<p className="text-xs font-bold text-slate-600">Cancel</p>
</button>
<button
onClick={() => {
updateNotesMutation.mutate({ id: orderId, userNotes: notesInput })
}}
disabled={updateNotesMutation.isPending}
className="rounded-lg bg-blue-500 px-3 py-1"
>
<p className="text-xs font-bold text-white">
{updateNotesMutation.isPending ? 'Saving...' : 'Save'}
</p>
</button>
</div>
) : (
<button
onClick={() => {
setNotesInput(notesText || '')
setIsEditingNotes(true)
}}
className="flex flex-row items-center rounded-lg bg-slate-50 px-2 py-1"
>
<Edit2 className="mr-1 h-3 w-3 text-slate-500" />
<p className="text-xs font-medium text-slate-500">{notesText ? 'Edit' : 'Add'}</p>
</button>
)}
</div>
{isEditingNotes ? (
<textarea
className="min-h-20 rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700"
value={notesInput}
onChange={(e) => setNotesInput(e.target.value)}
placeholder="Add special delivery instructions..."
rows={4}
/>
) : (
<p className="text-sm leading-5 text-slate-700">
{notesText || 'No instructions added'}
</p>
)}
</div>
{/* Cancellation Detail */}
{orderData.cancelReason && (
<div className="mb-4 rounded-2xl border border-rose-100 bg-rose-50 p-5">
<p className="mb-2 text-[10px] font-bold uppercase text-rose-700">Cancellation Reason</p>
<p className="text-sm font-medium text-rose-900">{orderData.cancelReason}</p>
{orderData.refundAmount && (
<div className="mt-3 flex flex-row items-center justify-between border-t border-rose-200/50 pt-3">
<p className="text-xs text-rose-700">Refund Amount</p>
<p className="text-base font-bold text-rose-900">₹{orderData.refundAmount}</p>
</div>
)}
</div>
)}
{/* Items Section */}
<div className="mb-2 px-1">
<p className="mb-3 text-base font-bold text-slate-900">Order Items</p>
</div>
{orderData.items?.map((item: any, index: number) => (
<div
key={index}
className="mb-3 flex flex-row items-center rounded-2xl border border-slate-100 bg-white p-3 shadow-sm"
>
<div className="mr-4 flex h-14 w-14 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 p-1">
{item.image ? (
<img
src={item.image}
alt=""
className="h-full w-full rounded-lg object-cover"
/>
) : (
<Package className="h-6 w-6 text-slate-400" />
)}
</div>
<div className="flex-1">
<p className="text-sm font-bold text-slate-900">{item.productName || item.product?.name || `Product #${item.productId}`}</p>
<p className="mt-1 text-xs text-slate-400">
{item.quantity} × ₹{item.price}
</p>
</div>
<p className="ml-2 text-base font-bold text-slate-900">₹{item.amount || item.price * item.quantity}</p>
</div>
))}
<div className="flex items-center justify-between pt-2">
<MyText weight="bold">Total</MyText>
<MyText weight="bold" className="text-brand-600">
₹{order.totalAmount || 0}
</MyText>
</div>
</div>
{/* Address */}
{order.address && (
<div className="mb-6">
<MyText weight="semibold" className="mb-2">
Delivery Address
</MyText>
<div className="rounded-xl border border-gray-100 bg-gray-50 p-3">
<MyText weight="semibold">{order.address.name}</MyText>
<MyText className="text-sm text-gray-600">
{order.address.addressLine1}, {order.address.city}
</MyText>
<MyText className="text-sm text-gray-500">{order.address.phone}</MyText>
{/* Coupon */}
{orderData.couponCode && (
<div className="mb-4 mt-2 flex flex-row items-center justify-between rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
<div className="flex flex-row items-center">
<Tag className="h-5 w-5 text-emerald-600" />
<div className="ml-3">
<p className="text-sm font-bold text-emerald-900">{orderData.couponCode}</p>
<p className="text-[10px] text-emerald-600">Coupon Applied</p>
</div>
</div>
<p className="font-bold text-emerald-700">-₹{orderData.discountAmount}</p>
</div>
)}
{/* Cancel Button */}
{order.status !== 'cancelled' && order.status !== 'delivered' && (
<MyButton
variant="red"
fullWidth
textContent={
cancelMutation.isPending ? 'Cancelling...' : 'Cancel Order'
}
onClick={() => setShowCancelDialog(true)}
disabled={cancelMutation.isPending}
/>
)}
{/* Cancel Confirmation Dialog */}
{showCancelDialog && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="mx-4 w-full max-w-sm rounded-xl bg-white p-6">
<MyText weight="bold" className="mb-2 text-lg">
Cancel Order?
</MyText>
<MyText className="mb-6 text-sm text-gray-600">
Are you sure you want to cancel this order?
</MyText>
<div className="flex gap-3">
<MyButton
textContent="No, Keep It"
onClick={() => setShowCancelDialog(false)}
className="flex-1 bg-gray-100 text-gray-700"
/>
<MyButton
variant="red"
textContent="Yes, Cancel"
onClick={handleCancel}
className="flex-1"
disabled={cancelMutation.isPending}
/>
</div>
{/* Summary Section */}
<div className="mb-6 rounded-2xl border border-slate-100 bg-white p-5">
<div className="mb-3 flex flex-row justify-between">
<p className="text-sm text-slate-500">Subtotal</p>
<p className="font-medium text-slate-900">₹{subtotal}</p>
</div>
{discountAmount > 0 && (
<div className="mb-3 flex flex-row justify-between">
<p className="text-sm text-emerald-600">Discount</p>
<p className="font-medium text-emerald-600">-₹{discountAmount}</p>
</div>
)}
<div className="mb-3 flex flex-row justify-between">
<p className="text-sm text-slate-500">Delivery</p>
<p className="font-medium text-slate-900">
{deliveryCharge > 0 ? `₹${deliveryCharge}` : 'Free'}
</p>
</div>
<div className="flex flex-row items-center justify-between border-t border-slate-50 pt-4">
<p className="text-base font-bold text-slate-900">Total Amount</p>
<p className="text-xl font-bold text-slate-900">₹{totalAmount}</p>
</div>
</div>
<LoadingDialog open={cancelMutation.isPending} message="Cancelling order..." />
{/* Footer Actions */}
<div className="flex flex-row gap-3">
<button
onClick={() => navigate({ to: '/me' })}
className="flex-1 rounded-xl bg-slate-100 py-3.5 text-center font-bold text-slate-600"
>
Back
</button>
<button
onClick={() => setComplaintDialogOpen(true)}
className="flex-1 rounded-xl bg-blue-600 py-3.5 text-center font-bold text-white"
>
Raise Complaint
</button>
</div>
{/* Cancel Order Button */}
{!['success', 'delivered', 'cancelled'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
<div className="mt-4">
<button
onClick={() => setCancelDialogOpen(true)}
className="flex w-full flex-row items-center justify-center rounded-xl border border-red-100 bg-red-50 py-3.5"
>
<XCircle className="mr-2 h-5 w-5 text-red-600" />
<p className="font-bold text-red-600">Cancel Order</p>
</button>
</div>
)}
</div>
{/* Cancel Order Dialog */}
<Dialog open={cancelDialogOpen} onClose={() => setCancelDialogOpen(false)}>
<div className="p-6">
<div className="mb-4 flex flex-row items-center justify-between">
<p className="text-xl font-bold text-gray-900">Cancel Order</p>
<button onClick={() => setCancelDialogOpen(false)}>
<X className="h-6 w-6 text-gray-400" />
</button>
</div>
<div className="mb-4 rounded-xl border border-red-100 bg-red-50 p-4">
<p className="text-sm text-red-800">
Are you sure you want to cancel this order? This action cannot be undone.
</p>
</div>
<p className="mb-2 font-medium text-gray-700">Reason for cancellation</p>
<textarea
className="mb-6 min-h-24 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
value={cancelReason}
onChange={(e) => setCancelReason(e.target.value)}
placeholder="Please tell us why you are cancelling..."
rows={3}
/>
<button
className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
cancelOrderMutation.isPending ? 'bg-red-400 opacity-70' : 'bg-red-600'
}`}
onClick={handleCancelOrder}
disabled={cancelOrderMutation.isPending}
>
{cancelOrderMutation.isPending ? 'Cancelling...' : 'Confirm Cancellation'}
</button>
</div>
</Dialog>
{/* Raise Complaint Dialog */}
<Dialog open={complaintDialogOpen} onClose={() => setComplaintDialogOpen(false)}>
<div className="p-6">
<div className="mb-4 flex flex-row items-center justify-between">
<p className="text-xl font-bold text-gray-900">Raise Complaint</p>
<button onClick={() => setComplaintDialogOpen(false)}>
<X className="h-6 w-6 text-gray-400" />
</button>
</div>
<div className="mb-4 rounded-xl border border-amber-100 bg-amber-50 p-4">
<p className="text-sm text-amber-800">
Please describe your issue with this order. Our support team will get back to you within 24 hours.
</p>
</div>
<p className="mb-2 font-medium text-gray-700">Complaint Details</p>
<textarea
className="mb-6 min-h-32 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
value={complaintBody}
onChange={(e) => setComplaintBody(e.target.value)}
placeholder="Describe your issue in detail..."
rows={4}
/>
<button
className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
raiseComplaintMutation.isPending ? 'bg-blue-400 opacity-70' : 'bg-blue-600'
}`}
onClick={handleRaiseComplaint}
disabled={raiseComplaintMutation.isPending}
>
{raiseComplaintMutation.isPending ? 'Submitting...' : 'Submit Complaint'}
</button>
</div>
</Dialog>
</div>
</AppContainer>
)
}

26
apps/web-ui/src/routes/me.orders.tsx
View file

@ -1,30 +1,30 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, AppContainer, div } from 'web-components'
import { Package, ChevronRight } from 'lucide-react'
export const Route = createFileRoute('/me/orders')({ component: OrdersPage })
function OrdersPage() {
const navigate = useNavigate()
const { data } = trpc.user.order.getOrders.useQuery({ page: 0, limit: 20 })
const { data } = trpc.user.order.getOrders.useQuery({ page: 1, limit: 20 })
const orders = data?.data || []
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<p className="font-bold mb-4 text-xl">
My Orders
</MyText>
</p>
{orders.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-20">
<Package className="h-12 w-12 text-gray-300" />
<MyText className="text-gray-500">No orders yet</MyText>
<p className="text-gray-500">No orders yet</p>
</div>
) : (
<div className="flex flex-col gap-3">
{orders.map((order: any) => (
<MyTouchableOpacity
<div
key={order.id}
onClick={() =>
navigate({ to: '/me/orders/$id', params: { id: String(order.id) } })
@ -33,14 +33,14 @@ function OrdersPage() {
>
<div className="flex items-center justify-between">
<div>
<MyText weight="semibold" className="text-sm">
<p className="font-semibold text-sm">
Order #{order.id}
</MyText>
<MyText className="text-xs text-gray-500">
</p>
<p className="text-xs text-gray-500">
{order.createdAt
? new Date(order.createdAt).toLocaleDateString()
: ''}
</MyText>
</p>
</div>
<div className="flex items-center gap-2">
<span
@ -57,10 +57,10 @@ function OrdersPage() {
<ChevronRight className="h-4 w-4 text-gray-400" />
</div>
</div>
<MyText className="mt-1 text-xs text-gray-400">
<p className="mt-1 text-xs text-gray-400">
Total: ₹{order.totalAmount || 0}
</MyText>
</MyTouchableOpacity>
</p>
</div>
))}
</div>
)}

46
apps/web-ui/src/routes/me.terms.tsx
View file

@ -1,56 +1,56 @@
import { createFileRoute } from '@tanstack/react-router'
import { MyText, AppContainer } from 'web-components'
import { p, AppContainer } from 'web-components'
export const Route = createFileRoute('/me/terms')({ component: TermsPage })
function TermsPage() {
return (
<AppContainer>
<MyText weight="bold" className="mb-6 text-2xl">
<p className="font-bold mb-6 text-2xl">
Terms & Conditions
</MyText>
</p>
<div className="prose prose-sm max-w-none text-gray-600">
<MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
<p className="font-semibold mb-2 mt-4 text-gray-900">
1. Acceptance of Terms
</MyText>
<MyText className="mb-4">
</p>
<p className="mb-4">
By using Freshyo, you agree to these terms. If you do not agree, please
do not use our service.
</MyText>
</p>
<MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
<p className="font-semibold mb-2 mt-4 text-gray-900">
2. Orders and Payments
</MyText>
<MyText className="mb-4">
</p>
<p className="mb-4">
All orders are subject to availability. We reserve the right to cancel
any order. Payments are collected at the time of delivery (COD).
</MyText>
</p>
<MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
<p className="font-semibold mb-2 mt-4 text-gray-900">
3. Delivery Policy
</MyText>
<MyText className="mb-4">
</p>
<p className="mb-4">
Delivery times are estimates. We strive to deliver within the promised
time window but delays may occur due to unforeseen circumstances.
</MyText>
</p>
<MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
<p className="font-semibold mb-2 mt-4 text-gray-900">
4. Returns and Refunds
</MyText>
<MyText className="mb-4">
</p>
<p className="mb-4">
If you are not satisfied with the quality of your order, please contact
us within 24 hours of delivery. Refunds will be processed after quality
assessment.
</MyText>
</p>
<MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
<p className="font-semibold mb-2 mt-4 text-gray-900">
5. Privacy
</MyText>
<MyText className="mb-4">
</p>
<p className="mb-4">
We respect your privacy. Your personal information is used only for
order processing and delivery purposes.
</MyText>
</p>
</div>
</AppContainer>
)

46
apps/web-ui/src/routes/me.tsx
View file

@ -1,6 +1,7 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
import { useAuth } from '../lib/auth-context'
import { MyText, MyButton, AppContainer, ProfileImage, MyTouchableOpacity } from 'web-components'
import { p, MyButton, ProfileImage } from 'web-components'
import { AppLayout } from '../components/AppLayout'
import {
Package,
MapPin,
@ -17,19 +18,23 @@ export const Route = createFileRoute('/me')({ component: MePage })
function MePage() {
const navigate = useNavigate()
const location = useLocation()
const { user, logout } = useAuth()
// Check if we're on the exact /me path (not a child route like /me/orders)
const isExactMePath = location.pathname === '/me'
if (!user) {
return (
<AppContainer>
<AppLayout>
<div className="flex flex-col items-center gap-4 py-20">
<MyText>Please sign in</MyText>
<p>Please sign in</p>
<MyButton
textContent="Sign In"
onClick={() => navigate({ to: '/login' })}
/>
</div>
</AppContainer>
</AppLayout>
)
}
@ -65,34 +70,36 @@ function MePage() {
]
return (
<AppContainer>
<AppLayout>
{isExactMePath ? (
<div className="p-4">
{/* Profile Header */}
<div className="mb-6 flex items-center gap-4 rounded-xl bg-brand-50 p-4">
<ProfileImage uri={user.profileImage} size={64} />
<div>
<MyText weight="bold" className="text-lg">
<p className="text-lg font-bold">
{user.name || 'User'}
</MyText>
<MyText className="text-sm text-gray-500">{user.mobile}</MyText>
</p>
<p className="text-sm text-gray-500">{user.mobile}</p>
</div>
</div>
{/* Menu */}
{menuItems.map((section) => (
<div key={section.section} className="mb-6">
<MyText weight="semibold" className="mb-2 text-sm text-gray-500 uppercase tracking-wide">
<p className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
{section.section}
</MyText>
</p>
<div className="rounded-xl border border-gray-100 bg-white shadow-sm">
{section.items.map((item) => (
<MyTouchableOpacity
<div
key={item.label}
onClick={() => navigate({ to: item.to as any })}
className="flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0"
>
<item.icon className="h-5 w-5 text-gray-400" />
<MyText className="flex-1 text-left text-sm">{item.label}</MyText>
</MyTouchableOpacity>
<p className="flex-1 text-left text-sm">{item.label}</p>
</div>
))}
</div>
</div>
@ -107,9 +114,14 @@ function MePage() {
textContent="Logout"
/>
<MyText className="mb-8 text-center text-xs text-gray-400">
<p className="mb-8 text-center text-xs text-gray-400">
Version 1.0.0
</MyText>
</AppContainer>
</p>
</div>
) : (
/* Render child routes when not on exact /me path */
<Outlet />
)}
</AppLayout>
)
}

18
apps/web-ui/src/routes/register.tsx
View file

@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'
import { useAuth } from '../lib/auth-context'
import { trpc } from '../lib/trpc-client'
import { MyText, MyButton, MyTextInput, MyTextButton } from 'web-components'
import { p, MyButton, pInput, pButton } from 'web-components'
export const Route = createFileRoute('/register')({ component: RegisterPage })
@ -31,28 +31,28 @@ function RegisterPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-brand-400 to-brand-700 p-4">
<div className="w-full max-w-md">
<MyText weight="bold" className="mb-2 text-center text-4xl text-white">
<p className="font-bold mb-2 text-center text-4xl text-white">
Create Account
</MyText>
<MyText className="mb-8 text-center text-lg text-blue-100">
</p>
<p className="mb-8 text-center text-lg text-blue-100">
Join Freshyo today
</MyText>
</p>
<div className="rounded-2xl bg-white p-8 shadow-xl">
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<MyTextInput
<pInput
placeholder="Full Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<MyTextInput
<pInput
placeholder="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MyTextInput
<pInput
placeholder="Mobile Number"
value={mobile}
onChange={(e) => {
@ -61,7 +61,7 @@ function RegisterPage() {
}}
required
/>
<MyTextInput
<pInput
placeholder="Password"
type="password"
value={password}

465
apps/web-ui/src/routes/slot-view.tsx Normal file
View file

@ -0,0 +1,465 @@
import {
createFileRoute,
useNavigate,
useSearch,
} from "@tanstack/react-router";
import { useState, useMemo, useEffect } from "react";
import dayjs from "dayjs";
import {
p,
div,
Quantifier,
MiniQuantifier,
} from "web-components";
import {
useSlots,
useAllProducts,
useStores,
} from "../hooks/prominent-api-hooks";
import { useCentralProductStore } from "../lib/stores/central-product-store";
import { useCentralSlotStore } from "../lib/stores/central-slot-store";
import {
useAddToCart,
useGetCart,
useUpdateCartItem,
useRemoveFromCart,
} from "../hooks/cart-query-hooks";
import { usePopulateCentralProductStore } from "../hooks/usePopulateCentralProductStore";
import { AppLayout } from "../components/AppLayout";
import { Truck, Store, Grid3X3, ChevronLeft, ShoppingCart } from "lucide-react";
export const Route = createFileRoute("/slot-view")({
component: SlotViewPage,
});
function SlotViewPage() {
const search = useSearch({ from: "/slot-view" }) as {
slotId?: string;
storeId?: string;
};
const slotId = search.slotId ? Number(search.slotId) : undefined;
const storeId = search.storeId ? Number(search.storeId) : undefined;
const navigate = useNavigate();
const { data: slotsData } = useSlots();
const { productsById } = useCentralProductStore();
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
const { data: storesData } = useStores();
// Populate central product store with products data
usePopulateCentralProductStore();
const stores = storesData?.stores || [];
// Find the specific slot from cached data
const slot = slotsData?.slots?.find((s: any) => s.id === slotId);
const addToCart = useAddToCart("regular");
const { data: cartData } = useGetCart("regular");
const formatTimeRange = (deliveryTime: string) => {
const time = dayjs(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}`;
}
};
const handleAddToCart = (productId: number) => {
const item = filteredProducts.find((p) => p.id === productId);
const deliveryTime = slot?.deliveryTime
? dayjs(slot.deliveryTime).format("ddd, DD MMM • h:mm A")
: "";
addToCart.mutate(
{ productId, quantity: 1, slotId: slotId || 0, storeId: item?.storeId },
{
onSuccess: () => {
alert(
`Added ${item?.name || "item"} for delivery at ${deliveryTime}`,
);
},
},
);
};
// Get product details from central store using slot product IDs
const slotProducts =
slot?.products
?.map((p: any) => productsById[p.id])
?.filter(
(product: any): product is NonNullable<typeof product> =>
product !== null && product !== undefined,
)
?.filter((product: any) => !productSlotsMap[product.id]?.isOutOfStock) ||
[];
const filteredProducts = storeId
? slotProducts.filter((p: any) => p.storeId === storeId)
: slotProducts;
if (!slot) {
return (
<AppLayout>
<div className="flex min-h-screen flex-col items-center justify-center">
<p className="font-bold mb-4 text-2xl text-gray-900">
Slot View
</p>
<p className="text-gray-600">No delivery slot available.</p>
</div>
</AppLayout>
);
}
return (
<AppLayout>
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-3">
<div className="flex items-center gap-3">
<div
onClick={() => navigate({ to: "/home" })}
className="p-2"
>
<ChevronLeft className="h-6 w-6 text-gray-700" />
</div>
<div>
<p className="font-bold text-lg text-gray-900">
{dayjs(slot.deliveryTime).format("ddd, DD MMM")}
</p>
<p className="text-sm text-brand-600">
{formatTimeRange(slot.deliveryTime as any)}
</p>
</div>
</div>
</div>
<div className="flex md:flex-row">
<div className="w-24 sticky">
{/* <div className=""> */}
<StoreSidebar
stores={stores}
slotId={slotId}
storeId={storeId}
onStoreSelect={(newStoreId) =>
navigate({
to: "/slot-view",
search: { slotId, storeId: newStoreId },
})
}
onAllSelect={() =>
navigate({ to: "/slot-view", search: { slotId } })
}
/>
{/* </div> */}
</div>
{/* Products Grid */}
<div className="flex-1 p-4">
<div className="mb-4 flex items-center justify-between">
<p className="font-bold text-xl text-gray-900">
{storeId
? stores.find((s: any) => s.id === storeId)?.name ||
"Store Products"
: "All Products"}
</p>
<p className="text-sm text-gray-500">
{filteredProducts.length} items
</p>
</div>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{filteredProducts.map((product: any) => (
<CompactProductCard
key={product.id}
item={product}
handleAddToCart={handleAddToCart}
onPress={() =>
navigate({
to: "/home/product/$id",
params: { id: String(product.id) },
})
}
/>
))}
</div>
{filteredProducts.length === 0 && (
<div className="py-10 text-center">
<p className="font-medium text-gray-400">
{storeId
? "No products from this store in this slot."
: "No products available for this slot."}
</p>
</div>
)}
</div>
</div>
</div>
</AppLayout>
);
}
const formatQuantity = (
quantity: number,
unit: string,
): { value: string; display: string } => {
if (unit?.toLowerCase() === "kg" && quantity < 1) {
return {
value: `${Math.round(quantity * 1000)} g`,
display: `${Math.round(quantity * 1000)}g`,
};
}
return { value: `${quantity} ${unit}(s)`, display: `${quantity}${unit}` };
};
interface StoreSidebarProps {
stores: any[];
slotId?: number;
storeId?: number;
onStoreSelect: (storeId: number) => void;
onAllSelect: () => void;
}
function StoreSidebar({
stores,
slotId,
storeId,
onStoreSelect,
onAllSelect,
}: StoreSidebarProps) {
return (
<div className="w-full border-b border-gray-200 bg-white p-4 md:w-24 md:border-b-0 md:border-r">
<div className="flex gap-3 overflow-x-auto md:flex-col md:gap-3">
{/* All Products Item */}
<div
onClick={onAllSelect}
className={`flex flex-col items-center rounded-2xl p-3 ${
!storeId
? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
: "border border-gray-100 bg-white text-gray-500"
}`}
>
<div
className={`mb-1 flex h-10 w-10 items-center justify-center rounded-full border ${
!storeId ? "border-white/30 bg-white/20" : "bg-gray-50"
}`}
>
<Grid3X3
className={`h-5 w-5 ${!storeId ? "text-white" : "text-gray-500"}`}
/>
</div>
<p
className={`text-center text-[10px] font-bold ${!storeId ? "text-white" : "text-gray-500"}`}
>
ALL
</p>
</div>
<div className="hidden h-px bg-gray-200 md:my-1 md:block" />
{/* Store Items */}
{stores.map((store: any) => {
const isActive = storeId === store.id;
return (
<div
key={store.id}
onClick={() => onStoreSelect(store.id)}
className={`flex flex-col items-center rounded-2xl p-2 ${
isActive
? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
: "border border-gray-100 bg-white text-gray-500"
}`}
>
<div
className={`mb-2 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2 ${
isActive
? "border-white bg-white"
: "border-gray-100 bg-gray-50"
}`}
>
{store.signedImageUrl ? (
<img
src={store.signedImageUrl}
alt={store.name}
className="h-full w-full object-cover"
/>
) : (
<Store
className={`h-6 w-6 ${isActive ? "text-brand-500" : "text-gray-400"}`}
/>
)}
</div>
<p
className={`w-full text-center text-[10px] leading-tight ${
isActive
? "font-bold text-white"
: "font-medium text-gray-500"
}`}
>
{store.name.replace(/^The\s+/i, "")}
</p>
</div>
);
})}
{stores.map((store: any) => {
const isActive = storeId === store.id;
return (
<div
key={store.id}
onClick={() => onStoreSelect(store.id)}
className={`flex flex-col items-center rounded-2xl p-2 ${
isActive
? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
: "border border-gray-100 bg-white text-gray-500"
}`}
>
<div
className={`mb-2 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2 ${
isActive
? "border-white bg-white"
: "border-gray-100 bg-gray-50"
}`}
>
{store.signedImageUrl ? (
<img
src={store.signedImageUrl}
alt={store.name}
className="h-full w-full object-cover"
/>
) : (
<Store
className={`h-6 w-6 ${isActive ? "text-brand-500" : "text-gray-400"}`}
/>
)}
</div>
<p
className={`w-full text-center text-[10px] leading-tight ${
isActive
? "font-bold text-white"
: "font-medium text-gray-500"
}`}
>
{store.name.replace(/^The\s+/i, "")}
</p>
</div>
);
})}
</div>
</div>
);
}
interface CompactProductCardProps {
item: any;
handleAddToCart: (productId: number) => void;
onPress?: () => void;
}
function CompactProductCard({
item,
handleAddToCart,
onPress,
}: CompactProductCardProps) {
const { data: cartData } = useGetCart("regular");
const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
const updateCartItem = useUpdateCartItem("regular");
const removeFromCart = useRemoveFromCart("regular");
const cartItem = cartData?.items?.find(
(cartItem: any) => cartItem.productId === item.id,
);
const quantity = cartItem?.quantity || 0;
const isOutOfStock = productSlotsMap[item.id]?.isOutOfStock;
const handleQuantityChange = (newQuantity: number) => {
if (newQuantity === 0 && cartItem) {
removeFromCart.mutate(cartItem.id);
} else if (newQuantity === 1 && !cartItem) {
handleAddToCart(item.id);
} else if (cartItem) {
updateCartItem.mutate({ productId: cartItem.id, quantity: newQuantity });
}
};
return (
<div
onClick={onPress}
className="mb-2 overflow-hidden rounded-lg border border-gray-100 bg-white shadow-sm"
>
<div className="relative">
<img
src={item.images?.[0]}
alt={item.name}
className="aspect-square w-full object-cover"
/>
{isOutOfStock && (
<div className="absolute inset-0 flex items-center justify-center bg-black/30">
<p className="text-xs font-bold text-white">
Out of Stock
</p>
</div>
)}
<div className="absolute bottom-2 right-2">
{quantity > 0 ? (
<MiniQuantifier
value={quantity}
setValue={handleQuantityChange}
step={item.incrementStep}
/>
) : (
<div
className="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md"
onClick={(e) => {
e.stopPropagation();
handleQuantityChange(1);
}}
>
<ShoppingCart className="h-4 w-4 text-brand-500" />
</div>
)}
</div>
</div>
<div className="p-2">
<p
className="font-medium mb-1 text-xs text-gray-900"
>
{item.name}
</p>
<div className="flex items-center justify-between">
<div className="flex flex-wrap items-baseline">
<p className="font-bold text-sm text-brand-500">
₹{item.price}
</p>
{item.marketPrice &&
Number(item.marketPrice) > Number(item.price) && (
<p className="ml-1 text-xs text-gray-400 line-through">
₹{item.marketPrice}
</p>
)}
<p className="ml-1 text-xs text-gray-600">
Qty:{" "}
<span className="font-semibold text-brand-500">
{
formatQuantity(
item.productQuantity || 1,
item.unit || item.unitNotation,
).display
}
</span>
</p>
</div>
</div>
</div>
</div>
);
}

26
apps/web-ui/src/routes/stores.$storeId.product.$productId.tsx
View file

@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { useAddToCart } from '../hooks/cart-query-hooks'
import { useState } from 'react'
import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
import { ShoppingCart, ArrowLeft } from 'lucide-react'
export const Route = createFileRoute('/stores/$storeId/product/$productId')({
@ -30,7 +30,7 @@ function StoreProductDetailPage() {
if (!product) {
return (
<AppContainer>
<MyText>Product not found</MyText>
<p>Product not found</p>
</AppContainer>
)
}
@ -40,12 +40,12 @@ function StoreProductDetailPage() {
return (
<AppContainer>
<MyTouchableOpacity
<div
onClick={() => navigate({ to: '/stores/$storeId', params: { storeId } })}
className="mb-4 flex items-center gap-2"
>
<ArrowLeft className="h-5 w-5" />
</MyTouchableOpacity>
</div>
{imageUrl && (
<div className="mb-4 aspect-square w-full overflow-hidden rounded-xl bg-gray-100">
@ -57,26 +57,26 @@ function StoreProductDetailPage() {
</div>
)}
<MyText weight="bold" className="mb-1 text-xl">
<p className="font-bold mb-1 text-xl">
{product.name}
</MyText>
<MyText className="mb-2 text-sm text-gray-500">
</p>
<p className="mb-2 text-sm text-gray-500">
{product.unitValue}{product.unit}
</MyText>
</p>
<div className="mb-4 flex items-baseline gap-2">
<MyText weight="bold" className="text-2xl text-brand-600">
<p className="font-bold text-2xl text-brand-600">
₹{price}
</MyText>
</p>
{product.discountedPrice && (
<MyText className="text-sm text-gray-400 line-through">
<p className="text-sm text-gray-400 line-through">
₹{product.price}
</MyText>
</p>
)}
</div>
{product.description && (
<MyText className="mb-4 text-gray-600">{product.description}</MyText>
<p className="mb-4 text-gray-600">{product.description}</p>
)}
<div className="mb-6">

240
apps/web-ui/src/routes/stores.$storeId.tsx
View file

@ -1,95 +1,207 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useStoreWithProducts } from '../hooks/prominent-api-hooks'
import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
import { useStoreWithProducts, useAllProducts } from '../hooks/prominent-api-hooks'
import { useState, useMemo } from 'react'
import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
import { ArrowLeft } from 'lucide-react'
import { p } from 'web-components'
import { AppLayout } from '../components/AppLayout'
import { ProductCard } from '../components/ProductCard'
import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
import { ArrowLeft, Store, X, Grid3X3 } from 'lucide-react'
export const Route = createFileRoute('/stores/$storeId')({
component: StoreDetailPage,
})
interface Tag {
id: number
tagName: string
productIds?: number[]
}
function StoreDetailPage() {
const { storeId } = Route.useParams()
const { storeId } = useParams({ from: '/stores/$storeId' })
const navigate = useNavigate()
const { data } = useStoreWithProducts(Number(storeId))
const [selectedTag, setSelectedTag] = useState<string | null>(null)
const storeIdNum = Number(storeId)
const [selectedTagId, setSelectedTagId] = useState<number | null>(null)
const store = data?.store
const products = data?.products || []
// Populate central stores with slots and product data for out-of-stock checking
usePopulateCentralStores()
const tags = useMemo(() => {
const tagSet = new Set<string>()
products.forEach((p: any) => {
const tag = p.category || 'All'
tagSet.add(tag)
const { data: storeData, isLoading, error, refetch } = useStoreWithProducts(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 ['All', ...Array.from(tagSet)]
}, [products])
return map
}, [productsData])
const filteredProducts = useMemo(() => {
if (!selectedTag || selectedTag === 'All') return products
return products.filter((p: any) => (p.category || 'All') === selectedTag)
}, [products, selectedTag])
const storeProducts = useMemo(() => {
if (!storeData?.products) return []
return storeData.products
.map((product: any) => productById.get(product.id))
.filter(Boolean)
}, [storeData, productById])
// Filter products based on selected tag
const filteredProducts = selectedTagId
? storeProducts.filter((product: any) => {
const selectedTag = storeData?.tags.find((t: Tag) => t.id === selectedTagId)
return selectedTag?.productIds?.includes(product.id) ?? false
})
: storeProducts
const isMeatStore = storeData?.store?.name?.toLowerCase().includes('meat')
if (isLoading || isProductsLoading) {
return (
<AppLayout>
<div className="flex min-h-screen items-center justify-center bg-gray-50">
<p className="font-medium text-gray-500">
{isLoading ? 'Loading store...' : 'Loading products...'}
</p>
</div>
</AppLayout>
)
}
if (error || !storeData) {
return (
<AppLayout>
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
<svg className="mb-4 h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p className="font-bold mb-2 text-lg text-gray-900">
Oops!
</p>
<p className="text-gray-500">Store not found or error loading</p>
</div>
</AppLayout>
)
}
return (
<AppContainer>
<div className="mb-4 flex items-center gap-3">
<MyTouchableOpacity onClick={() => navigate({ to: '/stores' })}>
<ArrowLeft className="h-5 w-5" />
</MyTouchableOpacity>
<MyText weight="bold" className="text-xl">
{store?.name || 'Store'}
</MyText>
<AppLayout>
<div className="min-h-screen bg-gray-50 pb-24">
{/* Back Button */}
<div className="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-3">
<div className="flex items-center gap-3">
<div onClick={() => navigate({ to: '/stores' })} className="p-2">
<ArrowLeft className="h-5 w-5 text-gray-700" />
</div>
<p className="font-bold text-lg text-gray-900">
{storeData?.store?.name || 'Store'}
</p>
</div>
</div>
{/* Tag Filter */}
<div className="mb-4 flex gap-2 overflow-x-auto pb-2">
{tags.map((tag) => (
<button
key={tag}
onClick={() => setSelectedTag(tag === 'All' ? null : tag)}
className={`whitespace-nowrap rounded-full px-4 py-1.5 text-sm ${
(tag === 'All' && !selectedTag) || selectedTag === tag
? 'bg-brand-500 text-white'
: 'bg-gray-100 text-gray-600'
}`}
>
{tag}
</button>
<div className="px-4 pt-4">
{/* Store Info Card */}
<div className="flex items-center gap-2 mb-6 rounded-2xl border border-gray-100 bg-white p-6 text-center shadow-sm">
<div className="mb-4 flex h-16 w-16 items-center justify-center self-center rounded-full bg-pink-50">
<Store className="h-7 w-7 text-brand-500" />
</div>
<p className="font-bold mb-2 text-center text-2xl text-gray-900">
{storeData?.store?.name}
</p>
{storeData?.store?.description && (
<p className="px-4 text-center leading-5 text-gray-500">
{storeData?.store?.description}
</p>
)}
</div>
{/* Tags Section */}
{storeData?.tags && storeData.tags.length > 0 && (
<div className="mb-6 flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
{storeData.tags.map((tag: Tag) => (
<TagChip
key={tag.id}
tag={tag}
isSelected={selectedTagId === tag.id}
onPress={() => setSelectedTagId(selectedTagId === tag.id ? null : tag.id)}
/>
))}
</div>
)}
{/* Products */}
<div className="grid grid-cols-2 gap-3">
{/* Products Count & Clear Filter */}
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center">
<Grid3X3 className="mr-2 h-5 w-5 text-gray-700" />
<p className="font-bold text-lg text-gray-900">
{selectedTagId
? `${storeData?.tags.find((t: Tag) => t.id === selectedTagId)?.tagName} items`
: `${filteredProducts.length} products`}
</p>
</div>
{selectedTagId && (
<div
onClick={() => setSelectedTagId(null)}
className="flex items-center"
>
<p className="mr-1 text-sm font-medium text-brand-500">Clear</p>
<X className="h-4 w-4 text-brand-500" />
</div>
)}
</div>
{/* Products Grid */}
<div className="grid gap-4 sm:grid-cols-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
{filteredProducts.map((product: any) => (
<MyTouchableOpacity
<ProductCard
key={product.id}
onClick={() =>
item={product}
onPress={() =>
navigate({
to: '/stores/$storeId/product/$productId',
params: { storeId, productId: String(product.id) },
})
}
className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm"
>
<div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
{product.images?.[0] && (
<img
src={product.images[0].uri}
alt={product.name}
className="h-full w-full object-cover"
showDeliveryInfo={false}
miniView={true}
useAddToCartDialog={true}
/>
)}
</div>
<MyText weight="semibold" className="text-sm" numberOfLines={2}>
{product.name}
</MyText>
<MyText weight="bold" className="mt-1 text-brand-600">
₹{product.discountedPrice ?? product.price}
</MyText>
</MyTouchableOpacity>
))}
</div>
</AppContainer>
{filteredProducts.length === 0 && (
<div className="py-10 text-center">
<p className="font-medium text-gray-400">
{selectedTagId ? 'No products in this category' : 'No products available'}
</p>
</div>
)}
</div>
</div>
</AppLayout>
)
}
interface TagChipProps {
tag: Tag
isSelected: boolean
onPress: () => void
}
function TagChip({ tag, isSelected, onPress }: TagChipProps) {
const productCount = tag.productIds?.length || 0
return (
<button
onClick={onPress}
className={`whitespace-nowrap rounded-lg border px-4 py-2 ${
isSelected
? 'border-brand-500 bg-brand-500 text-white'
: 'border-brand-500 bg-white text-brand-500'
}`}
>
<span className={`text-sm font-medium ${isSelected ? 'text-white' : 'text-brand-500'}`}>
{tag.tagName} ({productCount})
</span>
</button>
)
}

232
apps/web-ui/src/routes/stores.tsx
View file

@ -1,53 +1,229 @@
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
import { useStores } from '../hooks/prominent-api-hooks'
import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
import { Store } from 'lucide-react'
import { p, div } from 'web-components'
import { AppLayout } from '../components/AppLayout'
import { Store, ArrowRight, Building2 } from 'lucide-react'
export const Route = createFileRoute('/stores')({ component: StoresPage })
export const ASSETS_BASE_URL = 'http://localhost:4000/assets'
function StoresPage() {
const navigate = useNavigate()
const { data } = useStores()
const stores = data?.data || []
const location = useLocation()
const { data: storesData, isLoading, error } = useStores()
const stores = storesData?.stores || []
// Check if we're on the exact /stores path (not a child like /stores/123)
const isExactStoresPath = location.pathname === '/stores'
if (isLoading) {
return (
<AppLayout>
<div className="flex min-h-screen flex-col items-center justify-center bg-slate-50">
<div className="flex h-20 w-20 items-center justify-center">
<Building2 className="h-12 w-12 text-brand-200" />
</div>
<p className="mt-4 text-[10px] font-black uppercase tracking-widest text-slate-400">
Opening Marketplace...
</p>
</div>
</AppLayout>
)
}
if (error) {
return (
<AppLayout>
<div className="flex min-h-screen flex-col items-center justify-center bg-slate-50 p-10">
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50">
<svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<p className="font-bold mb-2 text-center text-xl text-slate-900">
Store Fetch Failed
</p>
<p className="mb-8 text-center font-medium leading-5 text-slate-500">
We couldn't reach our vendor network.
</p>
<button
onClick={() => window.location.reload()}
className="rounded-2xl bg-brand-600 px-8 py-3 text-xs font-black uppercase tracking-widest text-white shadow-lg shadow-brand-200"
>
Retry
</button>
</div>
</AppLayout>
)
}
return (
<AppContainer>
<MyText weight="bold" className="mb-4 text-xl">
<AppLayout>
<div className="min-h-screen bg-slate-50 pb-32">
{isExactStoresPath ? (
<>
<div className="px-3 pt-6">
{/* Header */}
<div className="mb-4 flex items-center">
<div className="mr-3 h-6 w-1 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
<div>
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
Our Outlets
</p>
<p className="font-bold text-3xl tracking-tight text-slate-900">
Our Stores
</MyText>
</p>
</div>
</div>
<p className="pr-4 text-sm font-medium leading-5 text-slate-500">
Experience the finest selection of premium meat, poultry, fresh fruits, vegetables, and dairy directly from our own stores.
</p>
</div>
<div className="grid grid-cols-2 gap-4">
{/* Store Cards */}
<div className="px-3 pt-4">
{stores.map((store: any) => (
<MyTouchableOpacity
key={store.id}
onClick={() =>
<StoreCard key={store.id} store={store} />
))}
</div>
{stores.length === 0 && (
<div className="flex flex-1 flex-col items-center justify-center py-20">
<div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-sm">
<Building2 className="h-12 w-12 text-slate-400" />
</div>
<p className="font-bold text-center text-xl tracking-tight text-slate-900">
No Stores Available
</p>
</div>
)}
</>
) : (
/* Render child routes (e.g., store detail) when not on exact /stores path */
<Outlet />
)}
</div>
</AppLayout>
)
}
interface StoreCardProps {
store: any
}
function StoreCard({ store }: StoreCardProps) {
const navigate = useNavigate()
const sampleProducts = store.sampleProducts || []
const remainingCount = store.productCount - sampleProducts.length
const isMeatStore = store.name?.toLowerCase().includes('meat')
const navigateToStore = () => {
navigate({
to: '/stores/$storeId',
params: { storeId: String(store.id) },
})
}
className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
>
<div className="mb-3 flex h-32 w-full items-center justify-center overflow-hidden rounded-lg bg-gray-100">
{store.imageUrl ? (
return (
<div className="mb-4 overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-lg shadow-slate-200">
{/* Meat Store Images - Show at top if store name contains 'meat' */}
{/* Top Header Section */}
<div onClick={navigateToStore} className="cursor-pointer p-4 pb-0">
<div className="mb-4 flex items-center">
<div className="h-12 w-12 rounded-xl border border-slate-200 bg-slate-50 p-0.5 shadow-sm">
<div className="relative h-full w-full overflow-hidden rounded-[10px]">
{store.signedImageUrl || store.imageUrl ? (
<img
src={store.imageUrl}
src={store.signedImageUrl || store.imageUrl}
alt={store.name}
className="h-full w-full object-cover"
/>
) : (
<Store className="h-10 w-10 text-gray-400" />
<div className="flex h-full w-full items-center justify-center">
<Store className="h-5 w-5 text-slate-400" />
</div>
)}
</div>
<MyText weight="semibold" className="text-sm">
{store.name}
</MyText>
<MyText className="text-xs text-gray-500">
{store.productCount || 0} products
</MyText>
</MyTouchableOpacity>
))}
</div>
</AppContainer>
<div className="ml-3 flex-1">
<p className="font-bold text-lg text-slate-900">
{store.name}
</p>
</div>
<div className="flex items-center justify-center rounded-xl border border-brand-100 bg-brand-50 px-2.5 py-1.5">
<p className="font-bold text-sm text-brand-700">
{store.productCount}
</p>
<p className="ml-1 text-[8px] font-black uppercase tracking-tighter text-brand-600">
Items
</p>
</div>
</div>
</div>
{/* Horizontal Scrollable Product Collection */}
{sampleProducts.length > 0 && (
<div className="mb-5">
<div className="flex gap-3 overflow-x-auto px-4 pb-2 scrollbar-hide">
{sampleProducts.map((product: any) => (
<div
key={product.id}
onClick={navigateToStore}
className="w-24 shrink-0 cursor-pointer items-center"
>
<div className="mb-2 h-24 w-24 rounded-2xl border border-slate-200 bg-slate-50 p-1 shadow-sm">
<img
src={product.signedImageUrl || product.images?.[0]}
alt={product.name}
className="h-full w-full rounded-xl object-cover"
/>
</div>
<p
className="font-bold text-center text-[10px] leading-tight text-slate-900"
>
{product.name}
</p>
</div>
))}
{remainingCount > 0 && (
<div className="flex shrink-0 flex-col items-center justify-center">
<div
onClick={navigateToStore}
className="flex h-24 w-24 cursor-pointer flex-col items-center justify-center rounded-2xl bg-slate-900 shadow-md"
>
<p className="font-bold text-base text-white">
+{remainingCount}
</p>
<p className="text-[8px] font-black uppercase tracking-widest text-white/60">
Discover
</p>
<ArrowRight className="mt-1 h-4 w-4 text-white" />
</div>
<div className="h-8" />
</div>
)}
</div>
</div>
)}
{/* Explore Store Button */}
<div className="px-4 pb-4">
<div
onClick={navigateToStore}
className="flex flex-row items-center justify-center rounded-[18px] bg-brand-600 py-3 shadow-lg shadow-brand-200"
>
<p className="font-bold mr-2 text-sm uppercase tracking-wider text-white">
Explore Store
</p>
<ArrowRight className="h-4 w-4 text-white" />
</div>
</div>
</div>
)
}
}

44
apps/web-ui/src/styles.css
View file

@ -2,6 +2,19 @@
@import "tailwindcss";
@theme {
--color-brand-25: #EFF8FF;
--color-brand-50: #F5FAFF;
--color-brand-100: #D1E9FF;
--color-brand-200: #B2DDFF;
--color-brand-300: #84CAFF;
--color-brand-400: #53B1FD;
--color-brand-500: #2E90FA;
--color-brand-600: #1570EF;
--color-brand-700: #175CD3;
--color-brand-800: #1849A9;
--color-brand-900: #194185;
}
/* @theme {
--color-brand-25: #FFF5F6;
--color-brand-50: #FFE8EA;
--color-brand-100: #FFD1D6;
@ -13,7 +26,8 @@
--color-brand-700: #9E2630;
--color-brand-800: #771D24;
--color-brand-900: #501318;
}
} */
* {
box-sizing: border-box;
@ -29,3 +43,31 @@ body {
margin: 0;
}
/* Safe area padding for mobile devices */
.pb-safe {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* Line clamp utilities */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Safe area padding for mobile devices */
.pb-safe {
padding-bottom: env(safe-area-inset-bottom, 0px);
}

7
package-lock.json generated
View file

@ -133,6 +133,7 @@
"@trpc/server": "^11.6.0",
"@turf/turf": "^7.2.0",
"@types/bcryptjs": "^2.4.6",
"aws4fetch": "^1.0.20",
"axios": "^1.11.0",
"bcryptjs": "^3.0.2",
"dayjs": "^1.11.18",
@ -9919,6 +9920,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/aws4fetch": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/aws4fetch/-/aws4fetch-1.0.20.tgz",
"integrity": "sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.13.6",
"license": "MIT",

8
packages/web-components/src/components/dialog.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { MyText } from './my-text'
import { p } from './my-text'
import { MyButton } from './my-button'
import { cn } from '../lib/utils'
@ -30,7 +30,7 @@ export function BottomDialog({
if (!visible && !open) return null
return (
<div className="fixed inset-0 z-50 flex items-end justify-center">
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
className={`absolute inset-0 bg-black/30 transition-opacity duration-200 ${
open ? 'opacity-100' : 'opacity-0'
@ -90,9 +90,9 @@ export function ConfirmationDialog({
return (
<BottomDialog open={open} onClose={handleCancel}>
<div className="p-4">
<MyText weight="bold" className="mb-4 text-lg">
<p weight="bold" className="mb-4 text-lg">
{title}
</MyText>
</p>
<p className="mb-6 text-gray-600">{message}</p>
{commentNeeded && (
<textarea

6
packages/web-components/src/components/image-uploader-neo.tsx
View file

@ -1,7 +1,7 @@
import React, { useRef } from 'react'
import { cn } from '../lib/utils'
import { Plus, X } from 'lucide-react'
import { MyTouchableOpacity } from './my-touchable-opacity'
import { div } from './my-touchable-opacity'
export interface ImageUploaderNeoItem {
imgUrl: string
@ -75,7 +75,7 @@ export function ImageUploaderNeo({
alt={`Upload ${index + 1}`}
className="h-full w-full rounded object-cover"
/>
<MyTouchableOpacity
<div
onClick={() =>
onImageRemove({
url: image.imgUrl,
@ -85,7 +85,7 @@ export function ImageUploaderNeo({
className="absolute right-1 top-1 rounded-full bg-red-500 p-1 text-white"
>
<X className="h-3 w-3" />
</MyTouchableOpacity>
</div>
</div>
))}
{(!allowMultiple || totalCount < 1) && (

4
packages/web-components/src/components/my-button.tsx
View file

@ -43,10 +43,10 @@ export function MyButton({
)
}
interface MyTextButtonProps extends Omit<MyButtonProps, 'children'> {
interface pButtonProps extends Omit<MyButtonProps, 'children'> {
text: string
}
export function MyTextButton({ text, ...props }: MyTextButtonProps) {
export function pButton({ text, ...props }: pButtonProps) {
return <MyButton {...props}>{text}</MyButton>
}

12
packages/web-components/src/components/my-text-input.tsx
View file

@ -1,8 +1,8 @@
import React from 'react'
import { cn } from '../lib/utils'
import { MyText } from './my-text'
import { p } from './my-text'
interface MyTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
interface pInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
topLabel?: string
fullWidth?: boolean
shrunkPadding?: boolean
@ -12,7 +12,7 @@ interface MyTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
style?: React.CSSProperties
}
export function MyTextInput({
export function pInput({
topLabel,
fullWidth = true,
shrunkPadding = false,
@ -21,7 +21,7 @@ export function MyTextInput({
className,
style,
...props
}: MyTextInputProps) {
}: pInputProps) {
const inputClasses = cn(
'flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
shrunkPadding ? 'py-1.5' : 'py-2',
@ -34,9 +34,9 @@ export function MyTextInput({
return (
<div style={{ ...(fullWidth ? { width: '100%' } : {}), ...style }}>
{topLabel && (
<MyText weight="medium" className="mb-1 text-sm text-gray-500">
<p weight="medium" className="mb-1 text-sm text-gray-500">
{topLabel}
</MyText>
</p>
)}
{multiline ? (
<textarea

6
packages/web-components/src/components/my-text.tsx
View file

@ -3,7 +3,7 @@ import { cn } from '../lib/utils'
type Weight = 'normal' | 'medium' | 'semibold' | 'bold'
interface MyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
interface pProps extends React.HTMLAttributes<HTMLSpanElement> {
weight?: Weight
numberOfLines?: number
style?: React.CSSProperties
@ -16,14 +16,14 @@ const weightClasses: Record<Weight, string> = {
bold: 'font-bold',
}
export function MyText({
export function p({
children,
weight = 'normal',
numberOfLines,
className,
style,
...props
}: MyTextProps) {
}: pProps) {
return (
<span
className={cn(weightClasses[weight], className)}

6
packages/web-components/src/components/my-touchable-opacity.tsx
View file

@ -1,19 +1,19 @@
import React from 'react'
import { cn } from '../lib/utils'
interface MyTouchableOpacityProps
interface divProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
activeOpacity?: number
children: React.ReactNode
}
export function MyTouchableOpacity({
export function div({
activeOpacity = 0.7,
className,
children,
style,
...props
}: MyTouchableOpacityProps) {
}: divProps) {
return (
<button
className={cn(

10
packages/web-components/src/components/quantifier.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import { cn } from '../lib/utils'
import { MyText } from './my-text'
import { p } from './my-text'
import { Minus, Plus } from 'lucide-react'
interface QuantifierProps {
@ -36,9 +36,9 @@ export function Quantifier({
>
<Minus className="h-3.5 w-3.5" />
</button>
<MyText weight="semibold" className="min-w-[32px] text-center text-sm">
<p weight="semibold" className="min-w-[32px] text-center text-sm">
{value}
</MyText>
</p>
<button
onClick={increase}
disabled={value >= max}
@ -66,9 +66,9 @@ export function MiniQuantifier({
>
<Minus className="h-3 w-3" />
</button>
<MyText weight="semibold" className="min-w-[24px] text-center text-xs">
<p weight="semibold" className="min-w-[24px] text-center text-xs">
{value}
</MyText>
</p>
<button
onClick={() => value < max && setValue(value + step)}
disabled={value >= max}

8
packages/web-components/src/index.ts
View file

@ -1,8 +1,8 @@
// Components
export { MyText } from './components/my-text'
export { MyButton, MyTextButton } from './components/my-button'
export { MyTextInput } from './components/my-text-input'
export { MyTouchableOpacity } from './components/my-touchable-opacity'
export { p } from './components/my-text'
export { MyButton, pButton } from './components/my-button'
export { pInput } from './components/my-text-input'
export { div } from './components/my-touchable-opacity'
export { LoadingDialog } from './components/loading-dialog'
export { BottomDialog, ConfirmationDialog } from './components/dialog'
export { Checkbox } from './components/checkbox'

98
packages/web-components/tailwind.config.ts
View file

@ -1,89 +1,87 @@
import type { Config } from 'tailwindcss'
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ['class'],
content: [
'./src/**/*.{ts,tsx}',
],
darkMode: ["class"],
content: ["./src/**/*.{ts,tsx}"],
theme: {
container: {
center: true,
padding: '2rem',
padding: "2rem",
screens: {
'2xl': '1400px',
"2xl": "1400px",
},
},
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
brand: {
25: '#FFF5F6',
50: '#FFE8EA',
100: '#FFD1D6',
200: '#FFA3AE',
300: '#FF7585',
400: '#FF475D',
500: '#E63946',
600: '#C5303C',
700: '#9E2630',
800: '#771D24',
900: '#501318',
25: "#F5FAFF",
50: "#EFF8FF",
100: "#D1E9FF",
200: "#B2DDFF",
300: "#84CAFF",
400: "#53B1FD",
500: "#2E90FA",
600: "#1570EF",
700: "#175CD3",
800: "#1849A9",
900: "#194185",
},
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--radix-accordion-content-height)' },
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0' },
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [],
}
};
export default config
export default config;