Skip to content

Commit

Permalink
Order Refunds, updated refund/address modals, removed dead order code (…
Browse files Browse the repository at this point in the history 
…#624)

* Remove unused order CRUD functions and rearrange router order to fix endpoint 404

* Fix/improve cancel order refunds and edit address, and updated UI

* Refunds/cancellations for preorder deposits
  • Loading branch information
@Winston-Hsiao
Winston-Hsiao authored Nov 18, 2024
1 parent a93b46c commit b3315be
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 168 deletions.
45 changes: 17 additions & 28 deletions frontend/src/components/modals/CancelOrderModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import React, { useState } from "react";

import Modal from "@/components/ui/Modal";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { paths } from "@/gen/api";
import { useAlertQueue } from "@/hooks/useAlertQueue";
Expand Down Expand Up @@ -43,9 +38,13 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
const MAX_REASON_LENGTH = 500;

const [cancellation, setCancellation] = useState<RefundRequest>({
payment_intent_id: "",
payment_intent_id: order.order.stripe_payment_intent_id,
cancel_reason: { reason: "", details: "" },
amount: 0,
amount:
order.order.status === "preorder_placed" &&
order.order.preorder_deposit_amount
? order.order.preorder_deposit_amount
: order.order.price_amount,
});
const [customReason, setCustomReason] = useState("");

Expand Down Expand Up @@ -81,11 +80,6 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();

if (!cancellation.payment_intent_id) {
addErrorAlert("Invalid payment information");
return;
}

try {
const { data, error } = await client.PUT("/stripe/refunds/{order_id}", {
params: { path: { order_id: order.order.id } },
Expand All @@ -110,15 +104,13 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
};

return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
<DialogHeader>
<DialogTitle>Cancel Order</DialogTitle>
</DialogHeader>
<Modal isOpen={isOpen} onClose={() => onOpenChange(false)}>
<div className="p-6">
<h2 className="text-xl font-semibold mb-4">Cancel Order</h2>
<form onSubmit={handleSubmit}>
<div className="grid gap-4 py-4">
<div className="grid gap-4 py-4 mb-4">
<div className="grid gap-2">
<Label htmlFor="cancel_reason">Cancel Reason</Label>
<Label htmlFor="cancel_reason">Reason for cancelling</Label>
<select
id="cancel_reason"
name="cancel_reason"
Expand All @@ -127,7 +119,7 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
className="bg-gray-2 border-gray-3 text-gray-12 rounded-md p-2"
>
<option value="" disabled>
Select a reason for cancellation
Select a reason for cancelling
</option>
{cancellationReasons.map((reason) => (
<option key={reason} value={reason}>
Expand Down Expand Up @@ -156,21 +148,18 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
<div className="flex justify-end gap-2">
<Button
type="button"
variant="outline"
variant="default"
onClick={() => onOpenChange(false)}
>
Cancel
</Button>
<Button
type="submit"
className="bg-primary-9 text-gray-1 hover:bg-gray-12"
>
<Button type="submit" variant="outline">
Save Changes
</Button>
</div>
</form>
</DialogContent>
</Dialog>
</div>
</Modal>
);
};

Expand Down
70 changes: 31 additions & 39 deletions frontend/src/components/modals/EditAddressModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import React, { useState } from "react";

import Modal from "@/components/ui/Modal";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useAlertQueue } from "@/hooks/useAlertQueue";
Expand Down Expand Up @@ -47,7 +42,7 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
e.preventDefault();
try {
const { data, error } = await client.PUT(
"/orders/{order_id}/shipping-address",
"/orders/shipping-address/{order_id}",
{
params: { path: { order_id: order.order.id } },
body: address,
Expand All @@ -72,13 +67,11 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
};

return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
<DialogHeader>
<DialogTitle>Edit Delivery Address</DialogTitle>
</DialogHeader>
<Modal isOpen={isOpen} onClose={() => onOpenChange(false)}>
<div className="p-6">
<h2 className="text-xl font-semibold mb-4">Edit Delivery Address</h2>
<form onSubmit={handleSubmit}>
<div className="grid gap-4 py-4">
<div className="grid gap-3 py-4">
<div className="grid gap-2">
<Label htmlFor="shipping_name">Name</Label>
<Input
Expand Down Expand Up @@ -129,45 +122,44 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
className="bg-gray-2 border-gray-3 text-gray-12"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="shipping_postal_code">Postal Code</Label>
<Input
id="shipping_postal_code"
name="shipping_postal_code"
value={address.shipping_postal_code}
onChange={handleInputChange}
className="bg-gray-2 border-gray-3 text-gray-12"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="shipping_country">Country</Label>
<Input
id="shipping_country"
name="shipping_country"
value={address.shipping_country}
onChange={handleInputChange}
className="bg-gray-2 border-gray-3 text-gray-12"
/>
<div className="grid grid-cols-2 gap-3">
<div className="grid gap-2">
<Label htmlFor="shipping_postal_code">Postal Code</Label>
<Input
id="shipping_postal_code"
name="shipping_postal_code"
value={address.shipping_postal_code}
onChange={handleInputChange}
className="bg-gray-2 border-gray-3 text-gray-12"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="shipping_country">Country</Label>
<Input
id="shipping_country"
name="shipping_country"
value={address.shipping_country}
onChange={handleInputChange}
className="bg-gray-2 border-gray-3 text-gray-12"
/>
</div>
</div>
</div>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="outline"
variant="default"
onClick={() => onOpenChange(false)}
>
Cancel
</Button>
<Button
type="submit"
className="bg-primary-9 text-gray-1 hover:bg-gray-12"
>
<Button type="submit" variant="outline">
Save Changes
</Button>
</div>
</form>
</DialogContent>
</Dialog>
</div>
</Modal>
);
};

Expand Down
18 changes: 17 additions & 1 deletion frontend/src/components/orders/OrderCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const activeStatuses = [

const redStatuses = ["cancelled", "refunded", "failed"];
const canModifyStatuses = [
"preorder_placed",
"processing",
"in_development",
"being_assembled",
Expand Down Expand Up @@ -124,6 +125,14 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
</div>
)}

{order.status === "refunded" && order.preorder_deposit_amount && (
<div className="mb-4 p-3 bg-gray-4 text-gray-12 rounded-md">
<p className="font-medium">
Pre-order Deposit: {formatPrice(order.preorder_deposit_amount)}
</p>
</div>
)}

{order.status === "awaiting_final_payment" && (
<div className="mb-4 p-3 bg-gray-4 text-gray-12 rounded-md">
<p className="font-medium">
Expand All @@ -143,7 +152,14 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
<p>Order ID: {order.id}</p>
<div className="mb-2">
<DropdownMenu>
<DropdownMenuTrigger className="text-gray-12 underline cursor-pointer">
<DropdownMenuTrigger
className={`underline ${
!canModifyOrder()
? "text-gray-11 cursor-not-allowed"
: "text-gray-12 cursor-pointer"
}`}
disabled={!canModifyOrder()}
>
Manage order
</DropdownMenuTrigger>
<DropdownMenuContent>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ui/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
className="absolute inset-0 bg-gray-1 opacity-50"
className="absolute inset-0 bg-gray-11 opacity-50"
onClick={onClose}
></div>
<div className="bg-gray-2 rounded-lg z-10 max-w-md w-full">
<div className="bg-gray-12 rounded-lg z-10 max-w-md w-full">
{children}
</div>
</div>
Expand Down
54 changes: 27 additions & 27 deletions frontend/src/gen/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -652,15 +652,15 @@ export interface paths {
patch?: never;
trace?: never;
};
"/orders/{order_id}": {
"/orders/me": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
/** Get Order */
get: operations["get_order_orders__order_id__get"];
/** Get User Orders */
get: operations["get_user_orders_orders_me_get"];
put?: never;
post?: never;
delete?: never;
Expand All @@ -669,15 +669,15 @@ export interface paths {
patch?: never;
trace?: never;
};
"/orders/me": {
"/orders/{order_id}": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
/** Get User Orders */
get: operations["get_user_orders_orders_me_get"];
/** Get Order */
get: operations["get_order_orders__order_id__get"];
put?: never;
post?: never;
delete?: never;
Expand All @@ -686,7 +686,7 @@ export interface paths {
patch?: never;
trace?: never;
};
"/orders/{order_id}/shipping-address": {
"/orders/shipping-address/{order_id}": {
parameters: {
query?: never;
header?: never;
Expand All @@ -695,7 +695,7 @@ export interface paths {
};
get?: never;
/** Update Order Shipping Address */
put: operations["update_order_shipping_address_orders__order_id__shipping_address_put"];
put: operations["update_order_shipping_address_orders_shipping_address__order_id__put"];
post?: never;
delete?: never;
options?: never;
Expand Down Expand Up @@ -1700,7 +1700,7 @@ export interface components {
/** Stripe Price Id */
stripe_price_id: string;
/** Stripe Payment Intent Id */
stripe_payment_intent_id?: string | null;
stripe_payment_intent_id: string;
/** Preorder Release Date */
preorder_release_date?: number | null;
/** Preorder Deposit Amount */
Expand Down Expand Up @@ -3291,13 +3291,11 @@ export interface operations {
};
};
};
get_order_orders__order_id__get: {
get_user_orders_orders_me_get: {
parameters: {
query?: never;
header?: never;
path: {
order_id: string;
};
path?: never;
cookie?: never;
};
requestBody?: never;
Expand All @@ -3308,25 +3306,18 @@ export interface operations {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["OrderWithProduct"];
};
};
/** @description Validation Error */
422: {
headers: {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["HTTPValidationError"];
"application/json": components["schemas"]["OrderWithProduct"][];
};
};
};
};
get_user_orders_orders_me_get: {
get_order_orders__order_id__get: {
parameters: {
query?: never;
header?: never;
path?: never;
path: {
order_id: string;
};
cookie?: never;
};
requestBody?: never;
Expand All @@ -3337,12 +3328,21 @@ export interface operations {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["OrderWithProduct"][];
"application/json": components["schemas"]["OrderWithProduct"];
};
};
/** @description Validation Error */
422: {
headers: {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["HTTPValidationError"];
};
};
};
};
update_order_shipping_address_orders__order_id__shipping_address_put: {
update_order_shipping_address_orders_shipping_address__order_id__put: {
parameters: {
query?: never;
header?: never;
Expand Down
Loading

0 comments on commit b3315be

Please sign in to comment.