102 lines
4.2 KiB
JavaScript
102 lines
4.2 KiB
JavaScript
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 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";
|
|
//#region node_modules/.nitro/vite/services/ssr/assets/cart-CHg5Ccyz.js
|
|
var import_jsx_runtime = require_jsx_runtime();
|
|
function CartPage() {
|
|
const navigate = useNavigate();
|
|
const { data: cart } = useGetCart("regular");
|
|
const { data: productsData } = useAllProducts();
|
|
const updateItem = useUpdateCartItem("regular");
|
|
const removeItem = useRemoveFromCart("regular");
|
|
const products = productsData?.products || [];
|
|
const productsById = {};
|
|
products.forEach((p) => {
|
|
productsById[p.id] = p;
|
|
});
|
|
const cartItems = (cart?.items || []).filter((item) => productsById[item.productId]);
|
|
let total = 0;
|
|
cartItems.forEach((item) => {
|
|
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)(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)(p, {
|
|
className: "text-gray-500",
|
|
children: "Your cart is empty"
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
|
|
textContent: "Browse Products",
|
|
onClick: () => navigate({ to: "/home" })
|
|
})]
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "flex flex-col gap-3",
|
|
children: cartItems.map((item) => {
|
|
const product = productsById[item.productId];
|
|
const price = product.price;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex items-center gap-3 rounded-xl border border-gray-100 bg-white p-3 shadow-sm",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
src: product.images?.[0],
|
|
alt: product.name,
|
|
className: "h-16 w-16 rounded-lg object-cover"
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex-1",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
|
|
weight: "semibold",
|
|
className: "text-sm",
|
|
numberOfLines: 1,
|
|
children: product.name
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
|
|
className: "text-brand-600 text-sm font-bold",
|
|
children: ["₹", price]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Quantifier, {
|
|
value: item.quantity,
|
|
setValue: (q) => updateItem.mutate({
|
|
productId: item.productId,
|
|
quantity: q
|
|
})
|
|
})
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
|
|
onClick: () => removeItem.mutate(item.productId),
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-5 w-5 text-red-500" })
|
|
})
|
|
]
|
|
}, item.productId);
|
|
})
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
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)(p, {
|
|
weight: "bold",
|
|
children: "Total"
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
|
|
weight: "bold",
|
|
className: "text-lg text-brand-600",
|
|
children: ["₹", total]
|
|
})]
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
|
|
fullWidth: true,
|
|
textContent: "Proceed to Checkout",
|
|
onClick: () => navigate({ to: "/checkout" }),
|
|
className: "bg-brand-500 text-white"
|
|
})]
|
|
})] })] });
|
|
}
|
|
//#endregion
|
|
export { CartPage as component };
|