Skip to content

Refactor #49

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.

Sign up for GitHub

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

Merged
arturgesiarz merged 8 commits into from
Jan 11, 2026
Merged

Refactor #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
40b882a
Delete payment section
arturgesiarz Jan 11, 2026
4887da2
Add free delivery
arturgesiarz Jan 11, 2026
7bb0697
Delete some buttons
arturgesiarz Jan 11, 2026
dd613e2
Add button
arturgesiarz Jan 11, 2026
bbce176
Format
arturgesiarz Jan 11, 2026
3c11eb9
Lint
arturgesiarz Jan 11, 2026
77bae6e
Format
arturgesiarz Jan 11, 2026
5bf108a
Merge with main
arturgesiarz Jan 11, 2026
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
5 changes: 1 addition & 4 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,7 @@ export default function App() {
<Route path="/product/:id" element={<ProductPage />} />
<Route path="/cart" element={<CartPage />} />
<Route path="/order/:orderId" element={<CheckoutPage />} />
<Route
path="/payment/:paymentId/:orderId"
element={<PaymentPage />}
/>
<Route path="/payment/:orderId" element={<PaymentPage />} />
<Route
path="/order-confirmation/:orderId/:token"
element={<OrderConfirmationPage />}
Expand Down
41 changes: 26 additions & 15 deletions src/components/orders/OrderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { GetVariantResponseDTO } from "../../types/products";
import { formatDate } from "../../utils/string.ts";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import PaymentIcon from "@mui/icons-material/Payment";
import {
Box,
Button,
Expand All @@ -23,6 +24,7 @@ import {
CircularProgress,
Avatar,
} from "@mui/material";
import { useNavigate } from "react-router-dom";

const calculateTotalPrice = (items: OrderItemDetails[]): number => {
return items.reduce((sum, item) => sum + item.quantity * item.price, 0);
Expand Down Expand Up @@ -217,11 +219,15 @@ const OrderItemsList: React.FC<OrderItemsListProps> = ({ order }) => {
};

interface OrderSummaryProps {
order: OrderDetailsResponse;
totalPrice: number;
orderStatus: string;
orderId: string;
}

const OrderSummary: React.FC<OrderSummaryProps> = ({ order, totalPrice }) => {
const OrderSummary: React.FC<OrderSummaryProps> = ({ totalPrice, orderStatus, orderId }) => {
const navigate = useNavigate();
const isPending = orderStatus === "ORDER_STATUS_PENDING";

return (
<Box
sx={{
Expand All @@ -240,19 +246,20 @@ const OrderSummary: React.FC<OrderSummaryProps> = ({ order, totalPrice }) => {
{totalPrice.toFixed(2)} PLN
</Typography>
</Box>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
<Button variant="outlined" size="medium">
Generate Invoice
</Button>
<Button variant="outlined" size="medium" color="info">
Tracking Details
{isPending && (
<Button
variant="contained"
color="primary"
startIcon={<PaymentIcon />}
onClick={() => navigate(`/payment/${orderId}`)}
sx={{
textTransform: "none",
fontWeight: 600,
}}
>
Pay Now
</Button>
{getStatusColor(order.orderStatus) === "error" && (
<Button variant="outlined" size="medium" color="warning">
Manage Return
</Button>
)}
</Box>
)}
</Box>
);
};
Expand All @@ -270,7 +277,11 @@ const OrderDetails: React.FC<OrderDetailsProps> = ({ order, totalPrice }) => {
<Divider sx={{ my: 3 }} />
<OrderItemsList order={order} />
<Divider sx={{ my: 3 }} />
<OrderSummary order={order} totalPrice={totalPrice} />
<OrderSummary
totalPrice={totalPrice}
orderStatus={order.orderStatus}
orderId={order.orderId}
/>
</Paper>
</Box>
);
Expand Down
37 changes: 3 additions & 34 deletions src/hooks/useCheckout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import type { ShippingFormValues } from "../components/forms/ShippingForm.tsx";
import { useCartContext } from "../contexts/CartContext";
import { useNavigate } from "react-router-dom";

const SHIPPING_COST = 19.99;
const FREE_SHIPPING_THRESHOLD = 500;
const DISCOUNT_CODE = "RABAT20";
const DISCOUNT_PERCENTAGE = 0.2; // 20%

Expand All @@ -32,7 +30,6 @@ interface CheckoutStorageData {
shippingData: ShippingFormValues;
invoiceData: InvoiceFormValues;
wantsInvoice: boolean;
paymentMethod: "card" | "cod";
discountCode: string;
isDiscountApplied: boolean;
}
Expand Down Expand Up @@ -64,9 +61,6 @@ export const useCheckout = (initialOrderId?: string) => {
const [shippingModalOpen, setShippingModalOpen] = useState(false);
const [invoiceModalOpen, setInvoiceModalOpen] = useState(false);
const [wantsInvoice, setWantsInvoice] = useState(savedData?.wantsInvoice || false);
const [paymentMethod, setPaymentMethod] = useState<"card" | "cod">(
savedData?.paymentMethod || "card",
);
const [discountCode, setDiscountCode] = useState(savedData?.discountCode || "");
const [isDiscountApplied, setIsDiscountApplied] = useState(savedData?.isDiscountApplied || false);
const [discountError, setDiscountError] = useState<string | null>(null);
Expand Down Expand Up @@ -102,9 +96,6 @@ export const useCheckout = (initialOrderId?: string) => {
if (newSavedData.wantsInvoice !== undefined && newSavedData.wantsInvoice !== wantsInvoice) {
setWantsInvoice(newSavedData.wantsInvoice);
}
if (newSavedData.paymentMethod && newSavedData.paymentMethod !== paymentMethod) {
setPaymentMethod(newSavedData.paymentMethod);
}
if (newSavedData.discountCode && newSavedData.discountCode !== discountCode) {
setDiscountCode(newSavedData.discountCode);
}
Expand All @@ -130,7 +121,6 @@ export const useCheckout = (initialOrderId?: string) => {
JSON.stringify(parsed.shippingData) === JSON.stringify(shippingData) &&
JSON.stringify(parsed.invoiceData) === JSON.stringify(invoiceData) &&
parsed.wantsInvoice === wantsInvoice &&
parsed.paymentMethod === paymentMethod &&
parsed.discountCode === discountCode &&
parsed.isDiscountApplied === isDiscountApplied
) {
Expand All @@ -145,31 +135,19 @@ export const useCheckout = (initialOrderId?: string) => {
shippingData,
invoiceData,
wantsInvoice,
paymentMethod,
discountCode,
isDiscountApplied,
};
sessionStorage.setItem(storageKey, JSON.stringify(dataToSave));
}
}, [
orderId,
shippingData,
invoiceData,
wantsInvoice,
paymentMethod,
discountCode,
isDiscountApplied,
]);
}, [orderId, shippingData, invoiceData, wantsInvoice, discountCode, isDiscountApplied]);

const subtotal = useMemo(
() => cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
[cartItems],
);

const shipping = useMemo(
() => (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_COST),
[subtotal],
);
const shipping = 0; // Always free shipping

const discountAmount = useMemo(() => {
if (!isDiscountApplied) return 0;
Expand Down Expand Up @@ -228,13 +206,7 @@ export const useCheckout = (initialOrderId?: string) => {
return;
}

if (paymentMethod === "card") {
const paymentId = crypto.randomUUID();
navigate(`/payment/${paymentId}/${orderId}`);
} else {
const confirmationToken = crypto.randomUUID();
navigate(`/order-confirmation/${orderId}/${confirmationToken}`);
}
navigate(`/payment/${orderId}`);
};

const getShippingDataForInvoice = ():
Expand Down Expand Up @@ -268,13 +240,11 @@ export const useCheckout = (initialOrderId?: string) => {
shippingModalOpen,
invoiceModalOpen,
wantsInvoice,
paymentMethod,
discountCode,
shippingData,
invoiceData,
orderId,
subtotal,
shipping,
total,
totalBeforeDiscount,
discountAmount,
Expand All @@ -284,7 +254,6 @@ export const useCheckout = (initialOrderId?: string) => {

setShippingModalOpen,
setInvoiceModalOpen,
setPaymentMethod,
setDiscountCode,

handleShippingSubmit,
Expand Down
9 changes: 1 addition & 8 deletions src/hooks/usePayment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ const VALID_CARD = {
cvv: "123",
};

const SHIPPING_COST = 19.99;
const FREE_SHIPPING_THRESHOLD = 500;

export interface CardFormValues {
cardNumber: string;
cardholderName: string;
Expand All @@ -28,10 +25,7 @@ export const usePayment = () => {
[cartItems],
);

const shipping = useMemo(
() => (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_COST),
[subtotal],
);
const shipping = 0; // Always free shipping

const total = useMemo(() => subtotal + shipping, [subtotal, shipping]);

Expand Down Expand Up @@ -81,7 +75,6 @@ export const usePayment = () => {

return {
subtotal,
shipping,
total,
paymentError,
isProcessing,
Expand Down
80 changes: 23 additions & 57 deletions src/pages/CartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,6 @@ import {
} from "@mui/material";
import { useNavigate } from "react-router-dom";

const SHIPPING_COST = 19.99;
const FREE_SHIPPING_THRESHOLD = 500;

const CartProductCard: React.FC<{ item: CartItem; onClick: () => void }> = ({ item, onClick }) => {
const { updateProductQuantity, overwriteProductQuantity, removeProduct } = useCartContext();
const theme = useTheme();
Expand Down Expand Up @@ -281,7 +278,7 @@ const CartPage: React.FC = () => {
}
return sum + item.price * item.quantity;
}, 0);
const shipping = subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_COST;
const shipping = 0; // Always free shipping
const total = subtotal + shipping;

const handleCheckout = async () => {
Expand Down Expand Up @@ -349,56 +346,25 @@ const CartPage: React.FC = () => {
);
})}

{FREE_SHIPPING_THRESHOLD - subtotal > 0 && (
<Paper
elevation={0}
sx={{
mt: 3,
p: 3,
bgcolor: alpha(theme.palette.primary.main, 0.05),
border: "2px solid",
borderColor: alpha(theme.palette.primary.main, 0.2),
borderRadius: 3,
display: "flex",
alignItems: "center",
gap: 2,
}}
>
<LocalShippingIcon color="primary" sx={{ fontSize: 40 }} />
<Box sx={{ flex: 1 }}>
<Typography variant="h6" fontWeight={600} color="primary.main" gutterBottom>
Free shipping within reach!
</Typography>
<Typography variant="body2" color="text.secondary">
Add products worth{" "}
<strong>{(FREE_SHIPPING_THRESHOLD - subtotal).toFixed(2)} PLN</strong>{" "}
more and get free shipping!
</Typography>
</Box>
</Paper>
)}

{shipping === 0 && (
<Paper
elevation={0}
sx={{
mt: 3,
p: 2,
bgcolor: alpha(theme.palette.success.main, 0.1),
border: "1px solid",
borderColor: "success.main",
borderRadius: 2,
display: "flex",
alignItems: "center",
gap: 1,
}}
>
<LocalShippingIcon color="success" />
<Typography variant="body2" color="success.main" fontWeight={600}>
Congratulations! You have free shipping!
</Typography>
</Paper>
)}
<Paper
elevation={0}
sx={{
mt: 3,
p: 2,
bgcolor: alpha(theme.palette.success.main, 0.1),
border: "1px solid",
borderColor: "success.main",
borderRadius: 2,
display: "flex",
alignItems: "center",
gap: 1,
}}
>
<LocalShippingIcon color="success" />
<Typography variant="body2" color="success.main" fontWeight={600}>
Free shipping on all orders!
</Typography>
</Paper>
</>
) : (
<Paper
Expand Down Expand Up @@ -457,15 +423,15 @@ const CartPage: React.FC = () => {
<Typography
variant="body1"
fontWeight={600}
color={shipping === 0 ? "success.main" : "text.primary"}
color="success.main"
sx={{
display: "flex",
alignItems: "center",
gap: 0.5,
}}
>
{shipping === 0 && <LocalShippingIcon fontSize="small" />}
{shipping === 0 ? "GRATIS" : `${shipping.toFixed(2)} PLN`}
<LocalShippingIcon fontSize="small" />
GRATIS
</Typography>
</Box>

Expand Down
Loading