feat: implement order page

src/App.js

@@ -34,6 +34,7 @@ import SignIn from './components/views/SignIn';
 import SignUp from './components/views/SignUp';
 import SignInAuth from './components/views/SignInAuth';
 import Cart from './components/views/Cart';
+import ShopOrders from './components/views/ShopOrders';
 
 const commitRef = process?.env?.REACT_APP_COMMIT_REF || '';
 
@@ -167,6 +168,7 @@ export default function App() {
           <Route exact path='/auth/:id' element={<SignInAuth />} />
           <Route exact path='/shop/product/:id' element={<ProductItem />} />
           <Route exact path='/shop/:category' element={<ShopCategory />} />
+          <Route exact path='/shop/orders' element={<ShopOrders />} />
           <Route exact path='/shop' element={<Shop />} />
           <Route path={`/p/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
             <Route path='post' element={<Board />} />

src/common/shop/cart.js

@@ -42,10 +42,6 @@ export async function getCart(cartId) {
       headers: headers,
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {
@@ -70,10 +66,6 @@ export async function addItemToCart(cartId, body) {
       body: JSON.stringify(body),
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {
@@ -97,10 +89,6 @@ export async function removeItemFromCart(cartId, line_item_id) {
       headers: headers,
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {
@@ -125,10 +113,6 @@ export async function updateItemInCart(cartId, line_item_id, body) {
       body: JSON.stringify(body),
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {

src/common/shop/orders.js

@@ -0,0 +1,30 @@
+const token = 'sk_test_56290c1603cc68a61b59eb003647fdb91940a2cdc5b31';
+
+export async function getOrders(email) {
+  try {
+    const url = new URL(`https://api.chec.io/v1/orders`);
+
+    // const params = {
+    //   query: `cart_id=cart_ypbroEWYe7l8n4`,
+    // };
+
+    // Object.keys(params).forEach((key) => url.searchParams.append(key, params[key]));
+
+    const headers = {
+      'X-Authorization': token,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: headers,
+    });
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}

src/common/shop/products.js

@@ -15,10 +15,6 @@ export async function getProducts() {
       headers: headers,
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {
@@ -42,10 +38,6 @@ export async function getProduct(productId) {
       headers: headers,
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
     const data = await response.json();
     return data;
   } catch (error) {

src/components/views/Shop.jsx

@@ -1,6 +1,19 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, BoardsBox, BoardsContent, LoadingContainer } from '../styled/views/Home.styled';
+import {
+  Container,
+  Header,
+  Logo,
+  Page,
+  Search,
+  About,
+  AboutTitle,
+  AboutContent,
+  BoardsBox,
+  BoardsContent,
+  LoadingContainer,
+  CustomLink,
+} from '../styled/views/Home.styled';
 import { Link } from 'react-router-dom';
 import Product from '../Shop/Product';
 import Categories from '../Shop/Categories';
@@ -17,6 +30,8 @@ const Shop = () => {
   const [products, setProducts] = useRecoilState(productsState);
   const [loading, setLoading] = useState(true);
 
+  const customerEmail = localStorage.getItem('email') ?? '';
+
   useEffect(() => {
     const fetchProducts = async () => {
       try {
@@ -84,6 +99,8 @@ const Shop = () => {
           </About>
         </Page>
         <br />
+        {customerEmail?.length ? <CustomLink to='/shop/orders'>My Orders</CustomLink> : null}
+
         <Categories />
         <BoardsBox>
           <div className='boxbar'>

src/components/views/ShopCategory.jsx

@@ -19,7 +19,7 @@ function capitalizeFirstLetter(string) {
 //   return stringWithoutHyphens.charAt(0).toUpperCase() + stringWithoutHyphens.slice(1);
 // }
 
-const Shop = () => {
+const ShopCategory = () => {
   const { category } = useParams();
   const inputRef = useRef(null);
   const [keyword, setKeyword] = useState('');
@@ -94,4 +94,4 @@ const Shop = () => {
   );
 };
 
-export default Shop;
+export default ShopCategory;

src/components/views/ShopOrders.jsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Container, Header, Logo, AboutContent, BoardsBox, BoardsContent, CustomLink, LoadingContainer } from '../styled/views/Home.styled';
+import { Link, useParams } from 'react-router-dom';
+import Categories from '../Shop/Categories';
+import FooterSection from '../FooterSection';
+import SidebarMenu from '../SidebarMenu';
+import { getOrders } from '../../common/shop/orders';
+import styled from 'styled-components';
+
+const OrderItem = styled.div`
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  text-align: left;
+  padding: 12px;
+  margin: 12px;
+  gap: 32px;
+`;
+
+const OrderInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  p {
+    margin: 0;
+  }
+`;
+
+const ShopOrders = () => {
+  const [orders, setOrders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const loaded = useRef(false);
+
+  useEffect(() => {
+    if (loaded.current) return;
+    loaded.current = true;
+
+    const fetchOrders = async () => {
+      try {
+        const email = localStorage.getItem('email') ?? '';
+        const res = await getOrders(email);
+
+        console.log('res:', res);
+        setLoading(false);
+        setOrders(res?.data);
+      } catch (error) {
+        console.error('Error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchOrders();
+  }, [loaded]);
+
+  return (
+    <>
+      <Helmet>
+        <title>Orders | AcidChan</title>
+      </Helmet>
+      <SidebarMenu />
+      <Container>
+        <AboutContent>
+          <Header>
+            <Logo>
+              <Link to='/'>
+                <img alt='acidchan' src='assets/logo/logo-transparent.png' />
+              </Link>
+            </Logo>
+          </Header>
+        </AboutContent>
+        <br />
+        <CustomLink to='/shop'>Back to shop</CustomLink>
+        <Categories />
+        <BoardsBox>
+          <BoardsContent>
+            {loading ? (
+              <LoadingContainer>Loading..</LoadingContainer>
+            ) : orders?.length ? (
+              orders.map((order) => (
+                <OrderItem>
+                  <OrderInfo>
+                    <p>Date</p>
+                    <p>{new Date(order?.created * 1000).toLocaleString()}</p>
+                  </OrderInfo>
+                  <OrderInfo>
+                    <p>Order Value</p>
+                    <p>{order?.order_value?.formatted_with_code}</p>
+                  </OrderInfo>
+                  <OrderInfo>
+                    <p>Status</p>
+                    <p>{order?.status_payment}</p>
+                  </OrderInfo>
+                  <OrderInfo>
+                    <p>Shipping Address</p>
+                    <p>
+                      {order?.shipping?.name +
+                        ' ' +
+                        order?.shipping?.street +
+                        ' ' +
+                        order?.shipping?.street_2 +
+                        ' ' +
+                        order?.shipping?.town_city +
+                        ' ' +
+                        order?.shipping?.postal_zip_code +
+                        ' ' +
+                        order?.shipping?.county_state +
+                        ' ' +
+                        order?.shipping?.country}
+                    </p>
+                  </OrderInfo>
+                </OrderItem>
+              ))
+            ) : (
+              <h2>No orders found</h2>
+            )}
+          </BoardsContent>
+        </BoardsBox>
+        <br />
+        <FooterSection />
+      </Container>
+    </>
+  );
+};
+
+export default ShopOrders;

src/components/views/SignIn.jsx

@@ -48,7 +48,7 @@ const SignIn = () => {
         body: JSON.stringify({ email, base_url: base_url + '/#/auth' }),
       }).then((response) => response.json());
 
-      console.log('Signup Successful', response);
+      localStorage.setItem('email', response?.email);
       setDone(true);
     } catch (error) {
       console.error('Signin Failed', error);