153 lines
5.4 KiB
JavaScript
153 lines
5.4 KiB
JavaScript
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 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";
|
|
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/checkout-CaijlEpv.js
|
|
var import_react = /* @__PURE__ */ __toESM(require_react());
|
|
var import_jsx_runtime = require_jsx_runtime();
|
|
function CheckoutPage() {
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { isAuthenticated } = useAuth();
|
|
const { data: cart } = useGetCart("regular");
|
|
const { data: productsData } = useAllProducts();
|
|
const [isLoading, setIsLoading] = (0, import_react.useState)(false);
|
|
const products = productsData?.products || [];
|
|
const productsById = {};
|
|
products.forEach((p) => {
|
|
productsById[p.id] = p;
|
|
});
|
|
const { data: addresses } = trpc.user.address.getUserAddresses.useQuery(void 0, { enabled: isAuthenticated });
|
|
const [selectedAddressId, setSelectedAddressId] = (0, import_react.useState)(null);
|
|
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;
|
|
});
|
|
const placeOrderMutation = trpc.user.order.placeOrder.useMutation({
|
|
onSuccess: (data) => {
|
|
const order = data.data?.[0];
|
|
clearLocalCart("regular");
|
|
queryClient.invalidateQueries({ queryKey: ["local-cart-regular"] });
|
|
navigate({
|
|
to: "/home/order-success",
|
|
search: {
|
|
orderId: order?.id,
|
|
totalAmount: total
|
|
}
|
|
});
|
|
},
|
|
onSettled: () => setIsLoading(false)
|
|
});
|
|
const handlePlaceOrder = () => {
|
|
if (!selectedAddressId) return;
|
|
setIsLoading(true);
|
|
placeOrderMutation.mutate({
|
|
selectedItems: cartItems.map((item) => ({
|
|
productId: item.productId,
|
|
quantity: item.quantity,
|
|
slotId: null
|
|
})),
|
|
addressId: selectedAddressId,
|
|
paymentMethod: "cod",
|
|
isFlashDelivery: false
|
|
});
|
|
};
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
|
|
/* @__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)(p, {
|
|
weight: "semibold",
|
|
className: "mb-2",
|
|
children: "Delivery Address"
|
|
}), addresses?.data?.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
|
|
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)(p, {
|
|
weight: "semibold",
|
|
children: addr.name
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
|
|
className: "text-sm text-gray-600",
|
|
children: [
|
|
addr.addressLine1,
|
|
", ",
|
|
addr.city
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
|
|
className: "text-sm text-gray-500",
|
|
children: addr.phone
|
|
})
|
|
]
|
|
}, addr.id))]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "mb-6",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
|
|
weight: "semibold",
|
|
className: "mb-2",
|
|
children: "Order Summary"
|
|
}),
|
|
cartItems.map((item) => {
|
|
const product = productsById[item.productId];
|
|
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)(p, {
|
|
className: "text-sm",
|
|
numberOfLines: 1,
|
|
children: [
|
|
product.name,
|
|
" x",
|
|
item.quantity
|
|
]
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
|
|
className: "text-sm font-bold",
|
|
children: ["₹", product.price * item.quantity]
|
|
})]
|
|
}, item.productId);
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
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)(p, {
|
|
weight: "bold",
|
|
children: "Total"
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
|
|
weight: "bold",
|
|
className: "text-brand-600",
|
|
children: ["₹", total]
|
|
})]
|
|
})
|
|
})
|
|
]
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
|
|
fullWidth: true,
|
|
textContent: "Place Order (COD)",
|
|
onClick: handlePlaceOrder,
|
|
disabled: !selectedAddressId || placeOrderMutation.isPending,
|
|
className: "bg-brand-500 text-white"
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingDialog, {
|
|
open: isLoading,
|
|
message: "Placing your order..."
|
|
})
|
|
] });
|
|
}
|
|
//#endregion
|
|
export { CheckoutPage as component };
|