Merge branch 'development'

purwadhikafullstack · Jul 13, 2023 · 642f111 · 642f111
2 parents a9ecb30 + 405594e
commit 642f111
Show file tree

Hide file tree

Showing 119 changed files with 5,582 additions and 2,267 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/.DS_Store b/projects/.DS_Store
diff --git a/projects/client/.env.production b/projects/client/.env.production
@@ -1,3 +1,3 @@
-PORT=8000
-REACT_APP_API_BASE_URL=https://jcwdol0901.purwadhikabootcamp.com/api
-REACT_APP_IMAGE_BASE_URL=http://jcwdol0901.purwadhikabootcamp.com/
+PORT=3000
+REACT_APP_API_BASE_URL=http://monorepo.purwadhikabootcamp.com/api
+REACT_APP_IMAGE_BASE_URL=http://monorepo.purwadhikabootcamp.com/
diff --git a/projects/client/package.json b/projects/client/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"start": "react-scripts start",
-		"build": "CI=false set DISABLE_ESLINT_PLUGIN=true && react-scripts build",
+		"build": "set DISABLE_ESLINT_PLUGIN=true && react-scripts build",
 		"test": "react-scripts test",
 		"eject": "react-scripts eject"
 	},

diff --git a/projects/client/public/assets/categories/category_1688963921825718062566.png b/projects/client/public/assets/categories/category_1688963921825718062566.png
diff --git a/projects/client/public/assets/categories/category_1688964011487513965161.png b/projects/client/public/assets/categories/category_1688964011487513965161.png
diff --git a/projects/client/public/assets/images/React App.html b/projects/client/public/assets/images/React App.html
diff --git a/projects/client/public/favicon.ico b/projects/client/public/favicon.ico
diff --git a/projects/client/public/index.html b/projects/client/public/index.html
@@ -5,10 +5,7 @@
 		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
-		<meta
-			name="description"
-			content="Web site created using create-react-app"
-		/>
+		<meta name="description" content="Web site created using create-react-app" />
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 		<!--
       manifest.json provides metadata used when your web app is installed on a
@@ -31,7 +28,7 @@
 		<style>
 			@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 		</style>
-		<title>React App</title>
+		<title>Groseria</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -45,6 +42,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-	</body>
+    --></body>
 </html>
diff --git a/projects/client/public/logo192.png b/projects/client/public/logo192.png
diff --git a/projects/client/public/logo512.png b/projects/client/public/logo512.png
diff --git a/projects/client/public/product/101.png b/projects/client/public/product/101.png
diff --git a/projects/client/public/product/13.png b/projects/client/public/product/13.png
diff --git a/projects/client/public/product/144.png b/projects/client/public/product/144.png
diff --git a/projects/client/public/product/148.png b/projects/client/public/product/148.png
diff --git a/projects/client/public/product/76.png b/projects/client/public/product/76.png
diff --git a/projects/client/public/product/product_1688635521675974377716.png b/projects/client/public/product/product_1688635521675974377716.png
diff --git a/projects/client/public/product/product_168896348589176376639.jpeg b/projects/client/public/product/product_168896348589176376639.jpeg
diff --git a/projects/client/public/product/product_1688963560135636203884.png b/projects/client/public/product/product_1688963560135636203884.png
diff --git a/projects/client/public/product/product_1688963829592463015411.png b/projects/client/public/product/product_1688963829592463015411.png
diff --git a/projects/client/src/App.jsx b/projects/client/src/App.jsx
@@ -37,6 +37,10 @@ import UpdateProduct from "./pages/UpdateProduct/UpdateProduct";
 import ResetPassword from "./pages/ResetPassword/ResetPassword";
 import ForgotPassword from "./pages/ForgotPassword/ForgotPassword";
 import UserAuthGuard from "./pages/UserAuthGuard";
+import OrderPage from "./pages/Order/OrderPage";
+import OrderDetail from "./pages/OrderDetail/OrderDetail";
+import CartPage from "./pages/Cart/CartPage";
+import NotFoundPage from "./pages/NotFoundPage";
 
 function App() {
 	return (
@@ -68,14 +72,17 @@ function App() {
 					element={<UserAuthGuard component={<CreateNewAddress />} />}
 				/>
 				<Route path="/account/edit-address" element={<UserAuthGuard component={<EditAddress />} />} />
+				<Route path="/cart" element={<UserAuthGuard component={<CartPage />} />} />
 				<Route path="/cart/checkout" element={<UserAuthGuard component={<CheckoutPage />} />} />
 				<Route path="/cart/checkout/address/change" element={<UserAuthGuard component={<SwitchAddress />} />} />
 				<Route path="/cart/checkout/voucher/change" element={<UserAuthGuard component={<SwitchVoucher />} />} />
 				<Route
 					path="/cart/checkout/logistic/change"
 					element={<UserAuthGuard component={<SwitchLogistic />} />}
 				/>
+				<Route path="/order" element={<UserAuthGuard component={<OrderPage />} />} />
 				<Route path="/order/upload" element={<UserAuthGuard component={<UploadProof />} />} />
+				<Route path="/order/detail/:transaction_id" element={<UserAuthGuard component={<OrderDetail />} />} />
 
 				{/* //Admin Auth Page */}
 				<Route path="/admin/order" element={<AdminAuthGuard component={<ManageOrder />} />} />
@@ -94,6 +101,8 @@ function App() {
 				<Route path="/admin/product" element={<AdminAuthGuard component={<ManageProduct />} />} />
 				<Route path="/admin/product/create" element={<AdminAuthGuard component={<CreateProduct />} />} />
 				<Route path="/admin/product/update" element={<AdminAuthGuard component={<UpdateProduct />} />} />
+				{/* //Not Found Page */}
+				<Route path="*" element={<NotFoundPage />} />
 			</Routes>
 		</div>
 	);

diff --git a/projects/client/src/components/AccountMenu/AccountMenu.jsx b/projects/client/src/components/AccountMenu/AccountMenu.jsx
@@ -115,7 +115,7 @@ export default function AccountMenu() {
 			<h1 className="text-left font-bold mb-4 ml-6 text-lg text-gray-400">Account Settings</h1>
 			<div className="bg-white shadow overflow-hidden sm:rounded-md mb-6">
 				<ul className="divide-y divide-gray-100">
-					{user.hasLogged ? menus.map((menu) => <MenuButton menu={menu} />) : null}
+					{user.hasLogged ? menus.map((menu, index) => <MenuButton menu={menu} key={index} />) : null}
 					{user.hasLogged ? (
 						<LogoutButton />
 					) : (

diff --git a/projects/client/src/components/AccountMenu/Profile.jsx b/projects/client/src/components/AccountMenu/Profile.jsx
@@ -3,6 +3,7 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import ReferralCard from "../ReferralCard";
 
 const MenuButton = ({ menu }) => {
 	const navigate = useNavigate();
@@ -43,18 +44,7 @@ export default function Profile() {
 					<h1 className="text-left font-bold mb-4 ml-6 text-2xl text-gray-400 capitalize">
 						Hey {user?.name}
 					</h1>
-					<div className="bg-white overflow-hidden sm:rounded-md mb-6 flex justify-center sm:justify-start sm:ml-6">
-						<div className="bg-green-200 min-w-80 w-5/6 sm:w-96 text-white font-semibold rounded-lg p-4 text-left flex overflow-hidden">
-							<img src="/assets/images/gratis_ongkir.png" className="h-24 mr-4" alt="gratis ongkir" />
-							<div className="flex flex-col">
-								<div className="mb-1">Dapatkan Gratis Ongkir 25rb</div>
-								<div className=" font-normal text-xs mb-1">
-									Bagikan & ajak temanmu daftar pakai kode referral
-								</div>
-								<div className=" bg-green-400 w-fit px-1">{user?.referral_code}</div>
-							</div>
-						</div>
-					</div>
+					<ReferralCard user={user} />
 				</div>
 			) : null}
 		</>

diff --git a/projects/client/src/components/Button.jsx b/projects/client/src/components/Button.jsx
@@ -10,7 +10,7 @@ const Button = ({ name, type, onClickHandler = null, disabled, pending, children
 		>
 			{children}
 			<span className="flex items-center disabled:opacity-50">
-				{pending && <span class="material-symbols-rounded animate-spin mr-2">progress_activity</span>}
+				{pending && <span className="material-symbols-rounded animate-spin mr-2">progress_activity</span>}
 				{name}
 			</span>
 		</button>

diff --git a/projects/client/src/components/Cart/CartBox.jsx b/projects/client/src/components/Cart/CartBox.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import CartHeader from "./CartHeader";
+import CartHeaderContent from "./CartHeaderContent";
+import CartBoxDetail from "./CartBoxDetail";
+import { useState } from "react";
+import { getUserCart } from "./handlers/CartHandler";
+
+const CartBox = () => {
+	const [cart, setCart] = useState();
+	const [subTotal, setSubTotal] = useState();
+	const [isUpdate, setIsUpdate] = useState(false);
+
+	React.useEffect(() => {
+		getUserCart()
+			.then((result) => {
+				// if (!result.data) navigate("/404");
+				setCart(result.data);
+				setSubTotal(
+					cart?.reduce((acc, curr) => {
+						const price = curr.Inventory.Product.price;
+						const quantity = curr.quantity;
+						const promoId = curr.Inventory.promo?.Promotion?.id;
+						const promoValue = curr.Inventory.promo?.value;
+						const finalPrice =
+							promoId === 2
+								? price - promoValue
+								: promoId === 3
+								? price - (promoValue / 100) * price
+								: price;
+
+						return acc + finalPrice * quantity;
+					}, 0),
+				);
+				setIsUpdate(false);
+			})
+			.catch((error) => {
+				alert(error);
+			});
+	}, [isUpdate]);
+	return (
+		<>
+			<CartHeader Content={CartHeaderContent} />
+			<CartBoxDetail cart={cart} setIsUpdate={setIsUpdate} />
+		</>
+	);
+};
+
+export default CartBox;
diff --git a/projects/client/src/components/Cart/CartBoxDetail.jsx b/projects/client/src/components/Cart/CartBoxDetail.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import CartPriceDetail from "./CartPriceDetail";
+import QuantityUpdateButtonSet from "./QuantityUpdateButtonSet";
+// import PriceDetail from "./PriceDetail.jsx";
+
+const CartBoxDetail = ({ cart, setIsUpdate }) => {
+	return cart.length ? (
+		<div className="">
+			{cart.map((item, index) => {
+				return (
+					<div key={index} className="flex flex-row p-4 border-b border-dashed">
+						<img
+							src={item.Inventory.Product.image}
+							className="max-w-[100px] border border-green-500 rounded p-2 object-contain"
+							alt={item.Inventory.Product.name}
+						/>
+						<div className="flex flex-col items-start justify-between pl-4 py-1">
+							<span className="font-semibold text-sm">{item.Inventory.Product.name}</span>
+							<span className="text-sm text-left mb-auto mt-0.5">
+								@{item.Inventory.Product.weight} gr
+							</span>
+							<QuantityUpdateButtonSet
+								stock={item.Inventory.stock}
+								amount={item.quantity}
+								inventory_id={item.Inventory.id}
+								setIsUpdate={setIsUpdate}
+							/>
+							<CartPriceDetail item={item} />
+						</div>
+						<span className="text-md font-light mt-auto ml-auto mb-1 mr-1">x {item.quantity}</span>
+					</div>
+				);
+			})}
+		</div>
+	) : (
+		<div className="text-rose-500 font-semibold text-left pl-4 py-2">Cart is empty</div>
+	);
+};
+
+export default CartBoxDetail;
diff --git a/projects/client/src/components/Cart/CartHeader.jsx b/projects/client/src/components/Cart/CartHeader.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const CartHeader = ({ Content }) => {
+	return (
+		<div className="grid grid-cols-7 gap-2 bg-green-200 text-green-100 py-2 font-medium">
+			<Content />
+		</div>
+	);
+};
+
+export default CartHeader;
diff --git a/projects/client/src/components/Cart/CartHeaderContent.jsx b/projects/client/src/components/Cart/CartHeaderContent.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const CartHeaderContent = () => {
+	return (
+		<>
+			<span className="col-span-1 material-symbols-rounded">shopping_cart</span>
+			<span className="col-span-4 text-left">Your Cart:</span>
+		</>
+	);
+};
+
+export default CartHeaderContent;
diff --git a/projects/client/src/components/Cart/CartPriceDetail.jsx b/projects/client/src/components/Cart/CartPriceDetail.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { getDisplayPrice } from "./handlers/CartHandler";
+
+const Promo = ({ item, isBOGO }) => {
+	const text = React.useRef("");
+
+	if (isBOGO) {
+		text.current = "(Buy One Get One)";
+	} else {
+		const promo = item.Inventory.promo;
+
+		if (promo.Promotion.id === 2) {
+			text.current = `Potongan Rp ${promo.value.toLocaleString("id")}`;
+		} else if (promo.Promotion.id === 3) {
+			text.current = `${promo.value}% Off`;
+		}
+	}
+
+	return <span className="text-xs mt-auto text-left text-[#f47229] sm:ml-3">{text.current}</span>;
+};
+
+const PriceWithPromo = ({ item }) => {
+	const price = getDisplayPrice(item);
+
+	return (
+		<div className="flex flex-col sm:flex-row gap-1">
+			<span className="text-sm text-left">Rp {price.final.toLocaleString("id")}</span>
+			{!price.isBOGO && (
+				<span className="text-sm text-xs mt-auto text-left line-through text-gray-200 sm:ml-3">
+					Rp {price.original.toLocaleString("id")}
+				</span>
+			)}
+			<Promo item={item} isBOGO={price.isBOGO} />
+		</div>
+	);
+};
+
+const CartPriceDetail = ({ item }) => {
+	return item.Inventory.promo ? (
+		<PriceWithPromo item={item} />
+	) : (
+		<span className="text-sm text-left">Rp {item.Inventory.Product.price.toLocaleString("id")}</span>
+	);
+};
+
+export default CartPriceDetail;
diff --git a/projects/client/src/components/Cart/CheckoutButton.jsx b/projects/client/src/components/Cart/CheckoutButton.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+// import { useSelector, useDispatch } from "react-redux";
+// import { postTransaction } from "./handlers/checkoutHandler";
+
+const CheckoutButton = ({ cart }) => {
+	// const checkout = useSelector((state) => state.checkout);
+	// const dispatch = useDispatch();
+	const navigate = useNavigate();
+	return (
+		<div className="flex flex-col">
+			<button
+				type="button"
+				className="flex items-center bg-green-500 text-green-100 rounded-lg w-fit ml-auto mr-8 py-3 px-6 mb-6 disabled:opacity-50"
+				onClick={() => navigate("/cart/checkout")}
+				disabled={cart?.length === 0}
+			>
+				<span className="mr-8 font-bold">Checkout Cart</span>
+				<span className="material-symbols-rounded">arrow_right</span>
+			</button>
+		</div>
+	);
+};
+
+export default CheckoutButton;