+
+ );
+}
diff --git a/src/components/Checkout/Checkout.tsx b/src/components/Checkout/Checkout.tsx
new file mode 100644
index 00000000..a868a9aa
--- /dev/null
+++ b/src/components/Checkout/Checkout.tsx
@@ -0,0 +1,396 @@
+import { useState, useEffect } from 'react';
+import CardInput, { Card } from './CardInput';
+import { RootState } from '@/app/store';
+import { Checkout as CheckoutType } from '@/interfaces/checkout';
+import {
+ selectCheckout,
+ placeOrder,
+ makePayment,
+} from '@/features/Checkout/checkoutSlice';
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import {
+ showSuccessToast,
+ showErrorToast,
+ showInfoToast,
+} from '@/utils/ToastConfig';
+
+function Direction({ rotate }: { rotate: number }) {
+ return (
+
+ );
+}
+
+function Checkout() {
+ const [chosen, setChosen] = useState('card');
+ const [cards, setCards] = useState
+ {errors.cardType && (
+
+ Invalid Card
+ )}
+
+
+
+
+
+
+
+
+ {errors.expirydate && (
+
+
+ Invalid Expiry Date
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+export default Checkout;
diff --git a/src/components/Checkout/header.tsx b/src/components/Checkout/header.tsx
new file mode 100644
index 00000000..c6afcc3e
--- /dev/null
+++ b/src/components/Checkout/header.tsx
@@ -0,0 +1,60 @@
+import Item from '../home/headerItem';
+
+interface HeaderItem {
+ image: string;
+ title: string;
+ description: string;
+ key: number;
+}
+
+const headerItems: HeaderItem[] = [
+ {
+ image: '/icons/icon1.svg',
+ title: 'Free Shipping',
+ description: 'Free shipping on all orders',
+ key: 1,
+ },
+ {
+ image: '/icons/icon4.svg',
+ title: 'Online Support 24/7',
+ description: 'Support online 24 hours a day',
+ key: 2,
+ },
+ {
+ image: '/icons/icon3.svg',
+ title: 'Money Return',
+ description: 'Back guarantee under 7 days',
+ key: 3,
+ },
+ {
+ image: '/icons/icon2.svg',
+ title: 'Member Discount',
+ description: 'On every order over $20.00',
+ key: 4,
+ },
+];
+
+export default function Header() {
+ return (
+
+
+
+ Delivery Address
+
+
+
+
+
+
+
+
+ Payment Methods
+ +
+
+
+ {chosen === 'momo' && (
+
+
+ )}
+
+
+
+ + My Momo Number +
+ +
+
+
+
+
+
+
+
+
+ {chosen === 'card' && (
+
+
+ )}
+
+
+ + My Cards +
+
+ {cards.map((card) => (
+ handleSave(newCard)} />
+ )}
+
+
+
+
+ ))}
+
+ {adding && (
+
+
+
+
+
+
+ {order.orderDetails.map((item) => (
+ 
+ ))}
+
+
+ ))}
+
+
+ Cart Collection
+My saved collection
+For summer sales
+
+
+
+
+ Promo Code
+
+ setCoupon(e.target.value)}
+ value={coupon}
+ />
+
+
+
+
+
+
+
+ Total
+ ${order.totalAmount}
+
+
+
+
+
+ Shipping
+ $0
+
+
+
+
+ Total Cost
+ ${order.totalAmount}
+
+
+
+ Complete Your Order
+ + You are just a few steps away to finsih + + your order... +
+ {headerItems.map((item) => (
+
+
diff --git a/src/components/Orders/Orders.tsx b/src/components/Orders/Orders.tsx
index 7d0f4341..55af4d39 100644
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@@ -23,7 +23,7 @@ export function Orders() {
);
const [currentPage, setCurrentPage] = useState(1);
- const [ordersPerPage] = useState(10);
+ const [ordersPerPage] = useState(5);
const [sortColumn, setSortColumn] = useState(null);
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
const [filterStatus, setFilterStatus] = useState('All');
@@ -75,7 +75,6 @@ export function Orders() {
const results = sortedOrders.filter(
(order) =>
order.id.toString().includes(query) ||
- order.deliveryInfo.toLowerCase().includes(query) ||
order.trackingNumber.toLowerCase().includes(query) ||
order.paymentInfo?.toLowerCase().includes(query) ||
order.updatedAt.toLowerCase().includes(query)
diff --git a/src/features/Checkout/checkoutSlice.tsx b/src/features/Checkout/checkoutSlice.tsx
new file mode 100644
index 00000000..0f37925f
--- /dev/null
+++ b/src/features/Checkout/checkoutSlice.tsx
@@ -0,0 +1,175 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { RootState } from '../../app/store';
+import { Checkout } from '@/interfaces/checkout';
+import Order from '@/interfaces/order';
+
+export interface CheckoutState {
+ checkout: Order;
+ loading: boolean;
+ error: string | null;
+ paying: boolean;
+}
+
+const initialOrder: Order = {
+ id: 31,
+ totalAmount: 160,
+ status: 'Pending',
+ couponCode: '',
+ deliveryInfo: {
+ address: '123 Main St',
+ city: 'Anytown',
+ zip: '12345',
+ },
+ country: 'US',
+ paymentInfo: null,
+ trackingNumber: 'Tr280585',
+ createdAt: '2024-07-22T01:48:05.301Z',
+ updatedAt: '2024-07-22T11:01:20.291Z',
+ paid: true,
+ orderDetails: [
+ {
+ id: 41,
+ quantity: 2,
+ price: 160,
+ },
+ ],
+};
+
+const initialState: CheckoutState = {
+ checkout: initialOrder,
+ loading: false,
+ paying: false,
+ error: null,
+};
+
+const baseUrl = import.meta.env.VITE_BASE_URL;
+
+export const placeOrder = createAsyncThunk(
+ 'order/create',
+ async (order: Checkout) => {
+ const tokenFromStorage = localStorage.getItem('token') || '';
+ const response = await axios.post(
+ `${baseUrl}/checkout`,
+ { ...order },
+ {
+ headers: {
+ Authorization: `Bearer ${tokenFromStorage}`,
+ },
+ }
+ );
+ return response.data.order;
+ }
+);
+
+export const getOrders = createAsyncThunk('order/get', async () => {
+ const tokenFromStorage = localStorage.getItem('token') || '';
+ const response = await axios.get(`${baseUrl}/checkout/getall-order`, {
+ headers: {
+ Authorization: `Bearer ${tokenFromStorage}`,
+ },
+ });
+ return {
+ ...response.data[0],
+ deliveryInfo: JSON.parse(response.data[0].deliveryInfo),
+ };
+});
+
+export const makePayment = createAsyncThunk(
+ 'order/pay',
+ async (orderId: number) => {
+ const tokenFromStorage = localStorage.getItem('token') || '';
+ const response = await axios.post(
+ `${baseUrl}/buyer/payment`,
+ {
+ token: 'tok_visa',
+ orderId,
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${tokenFromStorage}`,
+ },
+ }
+ );
+ return response.data;
+ }
+);
+
+const checkoutSlice = createSlice({
+ name: 'checkout',
+ initialState,
+ reducers: {
+ updateDeliveryInfo: (
+ state,
+ action: PayloadAction>
+ ) => {
+ state.checkout.deliveryInfo = {
+ ...state.checkout.deliveryInfo,
+ ...action.payload,
+ };
+ },
+ updateCouponCode: (state, action: PayloadAction) => {
+ state.checkout.couponCode = action.payload;
+ },
+ updateEmail: (state, action: PayloadAction) => {
+ state.checkout.email = action.payload;
+ },
+ updateFirstName: (state, action: PayloadAction) => {
+ state.checkout.firstName = action.payload;
+ },
+ updateLastName: (state, action: PayloadAction) => {
+ state.checkout.lastName = action.payload;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(placeOrder.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(placeOrder.fulfilled, (state, action: PayloadAction) => {
+ state.loading = false;
+ state.checkout = { ...state.checkout, ...action.payload };
+ })
+ .addCase(placeOrder.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message || 'Failed to place order';
+ })
+ .addCase(getOrders.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(getOrders.fulfilled, (state, action: PayloadAction) => {
+ state.loading = false;
+ state.checkout = { ...state.checkout, ...action.payload[0] };
+ })
+ .addCase(getOrders.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message || 'Failed to fetch orders';
+ })
+ .addCase(makePayment.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ state.paying = true;
+ })
+ .addCase(makePayment.fulfilled, (state) => {
+ state.loading = false;
+ })
+ .addCase(makePayment.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message || 'Payment failed';
+ });
+ },
+});
+
+export const {
+ updateDeliveryInfo,
+ updateCouponCode,
+ updateEmail,
+ updateFirstName,
+ updateLastName,
+} = checkoutSlice.actions;
+
+export const selectCheckout = (state: RootState) => state.checkout;
+
+export default checkoutSlice.reducer;
diff --git a/src/features/Orders/ordersSlice.ts b/src/features/Orders/ordersSlice.ts
index 06161e70..6416c14a 100644
--- a/src/features/Orders/ordersSlice.ts
+++ b/src/features/Orders/ordersSlice.ts
@@ -23,15 +23,23 @@ interface Payload {
export const fetchOrders = createAsyncThunk('orders/fetchOrders', async () => {
const tokenFromStorage = localStorage.getItem('token') || '';
- const response = await axios.get(
- `${baseUrl}/checkout/getall-order`,
- {
- headers: {
- Authorization: `Bearer ${tokenFromStorage}`,
+ const response = await axios.get(`${baseUrl}/checkout/getall-order`, {
+ headers: {
+ Authorization: `Bearer ${tokenFromStorage}`,
+ },
+ });
+ const res = response.data.orders;
+ const orders = res.map((order: any) => {
+ return {
+ ...order,
+ deliveryInfo: {
+ address: JSON.parse(order.deliveryInfo).address,
+ city: JSON.parse(order.deliveryInfo).city,
+ zip: JSON.parse(order.deliveryInfo).zip,
},
- }
- );
- return response.data.orders;
+ };
+ });
+ return orders;
});
const ordersSlice = createSlice({
diff --git a/src/interfaces/checkout.ts b/src/interfaces/checkout.ts
new file mode 100644
index 00000000..f3e4690d
--- /dev/null
+++ b/src/interfaces/checkout.ts
@@ -0,0 +1,73 @@
+interface DeliveryInfo {
+ address: string;
+ city: string;
+ zip: string;
+}
+
+export interface Checkout {
+ deliveryInfo: DeliveryInfo;
+ couponCode: string;
+ email: string;
+ firstName: string;
+ lastName: string;
+}
+
+export interface Order {
+ msg: string;
+ order: {
+ user: {
+ id: number;
+ firstName: string;
+ lastName: string;
+ email: string;
+ password: string;
+ googleId: string | null;
+ facebookId: string | null;
+ picture: string;
+ provider: string | null;
+ isVerified: boolean;
+ status: string;
+ twoFactorCode: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+ totalAmount: number;
+ status: string;
+ deliveryInfo: {
+ address: string;
+ city: string;
+ zip: string;
+ };
+ country: string;
+ trackingNumber: string;
+ orderDetails: {
+ product: {
+ id: number;
+ name: string;
+ image: string;
+ gallery: string[];
+ shortDesc: string;
+ longDesc: string;
+ quantity: number;
+ regularPrice: number;
+ salesPrice: number;
+ tags: string[];
+ type: string;
+ isAvailable: boolean;
+ isFeatured: boolean;
+ averageRating: number;
+ createdAt: string;
+ updatedAt: string;
+ };
+ quantity: number;
+ price: number;
+ id: number;
+ }[];
+ paymentInfo: null;
+ paid: boolean;
+ id: number;
+ createdAt: string;
+ updatedAt: string;
+ };
+ trackingNumber: string;
+}
diff --git a/src/interfaces/order.ts b/src/interfaces/order.ts
index 61edd65f..24b7a09c 100644
--- a/src/interfaces/order.ts
+++ b/src/interfaces/order.ts
@@ -1,8 +1,19 @@
+interface DeliveryInfo {
+ address: string;
+ city: string;
+ zip: string;
+}
+
export interface Order {
id: number;
totalAmount: number;
+ country: string;
status: string;
- deliveryInfo: string;
+ couponCode?: string;
+ email?: string;
+ firstName?: string;
+ lastName?: string;
+ deliveryInfo: DeliveryInfo;
paymentInfo: string | null;
trackingNumber: string;
createdAt: string;
diff --git a/src/pages/Checkout.tsx b/src/pages/Checkout.tsx
new file mode 100644
index 00000000..943612e5
--- /dev/null
+++ b/src/pages/Checkout.tsx
@@ -0,0 +1,11 @@
+import Checkout from '@/components/Checkout/Checkout';
+import Header from '@/components/Checkout/header';
+
+export default function CheckoutPage() {
+ return (
+
+
+ );
+}
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index c6c04c7e..75dccb42 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -15,12 +15,13 @@ import EditProductPage from '@/pages/EditPage';
import Shop from '@/pages/Shop';
import ContactPage from '@/pages/contact';
import Wishlist from '@/pages/Wishlist';
-import { Orders } from '@/components/Orders/Orders';
+import Orders from '@/pages/Orders';
import AddProducts from '@/components/dashBoard/addProducts';
import ProductDetails from '@/pages/ProductDetails';
import ProtectedRoute from '@/components/ProtectedRoute';
import Cart from '@/components/Cart/Cart';
import Seller from '@/pages/Seller';
+import CheckoutPage from '@/pages/Checkout';
function AppRoutes() {
return (
@@ -40,6 +41,7 @@ function AppRoutes() {