Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve order api endpoints #623

Merged
merged 4 commits into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions frontend/src/components/modals/CancelOrderModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,16 @@ import { Label } from "@/components/ui/label";
import { paths } from "@/gen/api";
import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";

type Order =
paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];
import type { OrderWithProduct } from "@/lib/types/orders";

type RefundRequest =
paths["/stripe/refunds/{order_id}"]["put"]["requestBody"]["content"]["application/json"];

interface CancelOrderModalProps {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
order: Order;
onOrderUpdate: (updatedOrder: Order) => void;
order: OrderWithProduct;
onOrderUpdate: (updatedOrder: OrderWithProduct) => void;
}

const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
Expand Down Expand Up @@ -90,7 +88,7 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({

try {
const { data, error } = await client.PUT("/stripe/refunds/{order_id}", {
params: { path: { order_id: order.id } },
params: { path: { order_id: order.order.id } },
body: cancellation,
});

Expand All @@ -99,7 +97,10 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
console.error("Error canceling order:", error);
} else {
addAlert("Order successfully canceled", "success");
onOrderUpdate(data);
onOrderUpdate({
order: data,
product: order.product,
});
}

onOpenChange(false);
Expand Down
32 changes: 16 additions & 16 deletions frontend/src/components/modals/EditAddressModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,15 @@ import {
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { paths } from "@/gen/api";
import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";

type Order =
paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];
import type { OrderWithProduct } from "@/lib/types/orders";

interface EditAddressModalProps {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
order: Order;
onOrderUpdate: (updatedOrder: Order) => void;
order: OrderWithProduct;
onOrderUpdate: (updatedOrder: OrderWithProduct) => void;
}

const EditAddressModal: React.FC<EditAddressModalProps> = ({
Expand All @@ -32,13 +29,13 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
const { client } = useAuthentication();
const { addAlert, addErrorAlert } = useAlertQueue();
const [address, setAddress] = useState({
shipping_name: order.shipping_name || "",
shipping_address_line1: order.shipping_address_line1 || "",
shipping_address_line2: order.shipping_address_line2 || "",
shipping_city: order.shipping_city || "",
shipping_state: order.shipping_state || "",
shipping_postal_code: order.shipping_postal_code || "",
shipping_country: order.shipping_country || "",
shipping_name: order.order.shipping_name || "",
shipping_address_line1: order.order.shipping_address_line1 || "",
shipping_address_line2: order.order.shipping_address_line2 || "",
shipping_city: order.order.shipping_city || "",
shipping_state: order.order.shipping_state || "",
shipping_postal_code: order.order.shipping_postal_code || "",
shipping_country: order.order.shipping_country || "",
});

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand All @@ -50,9 +47,9 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
e.preventDefault();
try {
const { data, error } = await client.PUT(
"/orders/update-order-address/{order_id}",
"/orders/{order_id}/shipping-address",
{
params: { path: { order_id: order.id } },
params: { path: { order_id: order.order.id } },
body: address,
},
);
Expand All @@ -62,7 +59,10 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
console.error("Error updating address:", error);
} else {
addAlert("Delivery address updated", "success");
onOrderUpdate(data);
onOrderUpdate({
order: data,
product: order.product,
});
}

onOpenChange(false);
Expand Down
18 changes: 6 additions & 12 deletions frontend/src/components/orders/OrderCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,10 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { paths } from "@/gen/api";
import type { OrderWithProduct } from "@/lib/types/orders";
import { formatPrice } from "@/lib/utils/formatNumber";
import { normalizeStatus } from "@/lib/utils/formatString";

type OrderWithProduct =
paths["/orders/user-orders-with-products"]["get"]["responses"][200]["content"]["application/json"][0];

type Order =
paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];

enum OrderStatus {
PREORDER = -1,
PROCESSING = 0,
Expand Down Expand Up @@ -60,7 +54,7 @@ const canModifyStatuses = [
const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
orderWithProduct: initialOrderWithProduct,
}) => {
const [orderWithProduct, setOrderWithProduct] = useState(
const [orderWithProduct, setOrderWithProduct] = useState<OrderWithProduct>(
initialOrderWithProduct,
);
const { order, product } = orderWithProduct;
Expand Down Expand Up @@ -92,8 +86,8 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({

const unitPrice = order.price_amount / order.quantity;

const handleOrderUpdate = (updatedOrder: Order) => {
setOrderWithProduct((prev) => ({ ...prev, order: updatedOrder }));
const handleOrderUpdate = (updatedOrder: OrderWithProduct) => {
setOrderWithProduct(updatedOrder);
};

const canModifyOrder = () => {
Expand Down Expand Up @@ -281,13 +275,13 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
<EditAddressModal
isOpen={isEditAddressModalOpen}
onOpenChange={setIsEditAddressModalOpen}
order={order}
order={orderWithProduct}
onOrderUpdate={handleOrderUpdate}
/>
<CancelOrderModal
isOpen={isCancelOrderModalOpen}
onOpenChange={setIsCancelOrderModalOpen}
order={order}
order={orderWithProduct}
onOrderUpdate={handleOrderUpdate}
/>
</div>
Expand Down
16 changes: 6 additions & 10 deletions frontend/src/components/pages/Orders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,16 @@ import { useNavigate } from "react-router-dom";
import OrderCard from "@/components/orders/OrderCard";
import Spinner from "@/components/ui/Spinner";
import { Button } from "@/components/ui/button";
import type { paths } from "@/gen/api";
import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";
import { ApiError } from "@/lib/types/api";
import type { OrderWithProduct } from "@/lib/types/orders";
import ROUTES from "@/lib/types/routes";

type OrderWithProduct =
paths["/orders/user-orders-with-products"]["get"]["responses"][200]["content"]["application/json"][number];

const OrdersPage: React.FC = () => {
const navigate = useNavigate();
const { api, currentUser, isAuthenticated, isLoading } = useAuthentication();
const [orders, setOrders] = useState<OrderWithProduct[] | null>(null);
const [orders, setOrders] = useState<OrderWithProduct[]>([]);
const [loadingOrders, setLoadingOrders] = useState(true);
const { addErrorAlert } = useAlertQueue();

Expand All @@ -25,9 +22,8 @@ const OrdersPage: React.FC = () => {
if (isAuthenticated && currentUser) {
setLoadingOrders(true);
try {
const { data, error } = await api.client.GET(
"/orders/user-orders-with-products",
);
const { data, error } = await api.client.GET("/orders/me");

if (error) {
const apiError = error as ApiError;
if (apiError.status === 500) {
Expand All @@ -38,7 +34,7 @@ const OrdersPage: React.FC = () => {
}
setOrders([]);
} else {
setOrders(data || []);
setOrders(data as OrderWithProduct[]);
}
} finally {
setLoadingOrders(false);
Expand Down Expand Up @@ -69,7 +65,7 @@ const OrdersPage: React.FC = () => {
<div className="flex justify-center items-center p-4 md:p-10 rounded-lg max-w-md mx-auto">
<Spinner className="p-1" />
</div>
) : orders && orders.length > 0 ? (
) : orders.length > 0 ? (
<div className="grid gap-2 md:gap-6 md:grid-cols-1 lg:grid-cols-2">
{orders.map((orderWithProduct: OrderWithProduct) => (
<OrderCard
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/pages/SellerOnboarding.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ export default function SellerOnboarding() {

if (data?.account_id) {
setConnectedAccountId(data.account_id);
// Refresh user data to get updated stripe connect account id
await auth.fetchCurrentUser();
}
} catch (error) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/stripe/CheckoutButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const CheckoutButton: React.FC<Props> = ({

try {
const { data, error } = await auth.client.POST(
"/stripe/create-checkout-session",
"/stripe/checkout-session",
{
body: {
listing_id: listingId,
Expand Down
Loading
Loading