Merge branch 'development'

purwadhikafullstack · Jul 21, 2023 · 324c11d · 324c11d
2 parents 23aab9f + 4a0bf7d
commit 324c11d
Show file tree

Hide file tree

Showing 148 changed files with 1,342 additions and 644 deletions.
diff --git a/.DS_Store b/.DS_Store
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.development b/projects/client/.env.development
@@ -1,3 +1,3 @@
 PORT=3000
 REACT_APP_API_BASE_URL=http://localhost:2000/api
-REACT_APP_IMAGE_BASE_URL=http://localhost:2000/
+REACT_APP_IMAGE_BASE_URL=http://localhost:2000
diff --git a/projects/client/.env.production b/projects/client/.env.production
@@ -1,3 +1,3 @@
 PORT=8901
 REACT_APP_API_BASE_URL=https://jcwdol0901.purwadhikabootcamp.com/api
-REACT_APP_IMAGE_BASE_URL=https://jcwdol0901.purwadhikabootcamp.com/
+REACT_APP_IMAGE_BASE_URL=https://jcwdol0901.purwadhikabootcamp.com
diff --git a/projects/client/package.json b/projects/client/package.json
@@ -25,6 +25,7 @@
 		"geolocation": "^0.2.0",
 		"js-cookie": "^3.0.5",
 		"material-icons": "^1.13.7",
+		"moment": "^2.29.4",
 		"query-string": "^8.1.0",
 		"react": "^18.2.0",
 		"react-chartjs-2": "^5.2.0",

diff --git a/projects/client/public/assets/images/empty_cart_illustration.png b/projects/client/public/assets/images/empty_cart_illustration.png
diff --git a/projects/client/src/components/AddressMenu/AddressDropDown.jsx b/projects/client/src/components/AddressMenu/AddressDropDown.jsx
@@ -1,7 +1,8 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { setUserLogin } from "../../redux/reducers/user/userAction";
 import { showAlertByError } from "../../helper/alert";
 
 const getDefaultAddress = (token) => {
@@ -14,13 +15,14 @@ const AddressDropDown = () => {
 	const [address, setAddress] = useState();
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
-
 	useEffect(() => {
 		getDefaultAddress(localStorage.getItem("token"))
 			.then((result) => {
 				setAddress(result.data);
 			})
-			.catch((error) => showAlertByError(error, dispatch));
+			.catch((error) => {
+				showAlertByError(error, dispatch);
+			});
 	}, []);
 
 	return (

diff --git a/projects/client/src/components/Cart/AddProductButton.jsx b/projects/client/src/components/Cart/AddProductButton.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { createSearchParams, useNavigate } from "react-router-dom";
+
+const AddProductButton = ({ cart }) => {
+	const navigate = useNavigate();
+	const user = useSelector((state) => state.user);
+	const params = { branch_id: user?.branch?.id };
+	return (
+		<div className="flex flex-col">
+			<button
+				type="button"
+				className="flex items-center bg-green-500 text-green-100 rounded-lg w-fit mx-auto sm:ml-auto sm:mr-8 py-3 px-6 mb-6 disabled:opacity-50"
+				onClick={() => {
+					navigate({
+						pathname: "/products",
+						search: `?${createSearchParams(params)}`,
+					});
+				}}
+				disabled={cart?.length === 0}
+			>
+				<span className="font-bold">Add Product</span>
+			</button>
+		</div>
+	);
+};
+
+export default AddProductButton;
diff --git a/projects/client/src/components/Cart/CartHeader.jsx b/projects/client/src/components/Cart/CartHeader.jsx
@@ -2,7 +2,7 @@ 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">
+		<div className="grid grid-cols-7 gap-2 bg-green-200 text-green-100 py-6 font-bold text-xl sm:rounded-t-xl pl-2">
 			<Content />
 		</div>
 	);

diff --git a/projects/client/src/components/Cart/CheckoutButton.jsx b/projects/client/src/components/Cart/CheckoutButton.jsx
@@ -7,7 +7,7 @@ const CheckoutButton = ({ cart }) => {
 		<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"
+				className="flex items-center bg-green-500 text-green-100 rounded-lg w-fit mx-auto sm:ml-auto sm:mr-8 py-3 px-6 mb-6 disabled:opacity-50"
 				onClick={() => navigate("/cart/checkout")}
 				disabled={cart?.length === 0}
 			>

diff --git a/projects/client/src/components/Cart/QuantityUpdateButtonSet.jsx b/projects/client/src/components/Cart/QuantityUpdateButtonSet.jsx
@@ -1,12 +1,14 @@
 import React from "react";
 import { handleDecrement, handleIncrement } from "./handlers/CartHandler.js";
+import { useDispatch } from "react-redux";
 
 const Decrement = ({ inventory_id, amount, stock, setIsUpdate }) => {
+	const dispatch = useDispatch();
 	return (
 		<button
 			className="border border-green-300 px-2 rounded-lg h-fit disabled:border-gray-300 disabled:text-gray-300 disabled:opacity-50"
 			disabled={amount === 0}
-			onClick={() => handleDecrement(inventory_id, amount, stock, setIsUpdate)}
+			onClick={() => handleDecrement(inventory_id, amount, stock, setIsUpdate, dispatch)}
 		>
 			–
 		</button>
@@ -27,13 +29,17 @@ const Increment = ({ inventory_id, amount, stock, setIsUpdate }) => {
 
 const QuantityUpdateButtonSet = ({ amount, inventory_id, stock, setIsUpdate }) => {
 	return (
-		<div className="flex flex-row w-fit items-center text-green-300 mr-auto my-2">
-			<Decrement inventory_id={inventory_id} amount={amount} stock={stock} setIsUpdate={setIsUpdate} />
-			<div className="flex justify-center items-center bg-green-50 px-2 py-2 rounded-xl mx-3 font-medium text-md box-border w-10 h-10 text-center">
-				<span className="h-fit">{amount}</span>
+		<div className="flex flex-col sm:items-center sm:flex-row w-fit items-start text-green-300 mr-auto my-2">
+			<div className="flex flex-row items-center">
+				<Decrement inventory_id={inventory_id} amount={amount} stock={stock} setIsUpdate={setIsUpdate} />
+				<div className="flex justify-center items-center bg-green-50 px-2 py-2 rounded-xl mx-3 font-medium text-sm sm:text-md box-border w-8 sm:w-10 h-8 sm:h-10 text-center">
+					<span className="h-fit">{amount}</span>
+				</div>
+				<Increment inventory_id={inventory_id} amount={amount} stock={stock} setIsUpdate={setIsUpdate} />
 			</div>
-			<Increment inventory_id={inventory_id} amount={amount} stock={stock} setIsUpdate={setIsUpdate} />
-			<span className="text-[#f47229] ml-4 font-semibold text-xs sm:text-base">{stock - amount} left</span>
+			<span className="text-[#f47229] sm:ml-4 font-semibold text-xs sm:text-base mt-2 sm:mt-0">
+				{stock - amount} left
+			</span>
 		</div>
 	);
 };

diff --git a/projects/client/src/components/Cart/handlers/CartHandler.js b/projects/client/src/components/Cart/handlers/CartHandler.js
@@ -1,5 +1,6 @@
 import axios from "axios";
 import { toCurrency } from "../../../helper/currency";
+import { setCartUpdate } from "../../../redux/reducers/user/userAction";
 
 export const getProductDetail = (inventory_id) => {
 	return axios.get(`${process.env.REACT_APP_API_BASE_URL}/product/${inventory_id}`);
@@ -67,7 +68,7 @@ export const handleIncrement = async (inventory_id, quantity, stock, setIsUpdate
 	}
 };
 
-export const handleDecrement = async (inventory_id, quantity, stock, setIsUpdate) => {
+export const handleDecrement = async (inventory_id, quantity, stock, setIsUpdate, dispatch) => {
 	try {
 		const token = localStorage.getItem("token");
 		const config = {
@@ -77,6 +78,7 @@ export const handleDecrement = async (inventory_id, quantity, stock, setIsUpdate
 		if (quantity === 1) {
 			await axios.delete(`${process.env.REACT_APP_API_BASE_URL}/cart/delete/${inventory_id}`, config);
 			setIsUpdate(true);
+			dispatch(setCartUpdate({ cartUpdate: true }));
 		}
 		if (quantity > 1) {
 			await axios.patch(`${process.env.REACT_APP_API_BASE_URL}/cart/update`, body, config);

diff --git a/projects/client/src/components/Category/CategoryList.jsx b/projects/client/src/components/Category/CategoryList.jsx
@@ -2,7 +2,7 @@ import CategoryTableGroup from "./CategoryTableGroup";
 
 const CategoryList = () => {
 	return (
-		<div className="w-full flex flex-col bg-green-100 p-4 justify-center items-center gap-4">
+		<div className="w-full flex flex-col bg-green-100 p-0 justify-center items-center gap-4">
 			<CategoryTableGroup />
 		</div>
 	);

diff --git a/projects/client/src/components/Category/CategoryTableGroup.jsx b/projects/client/src/components/Category/CategoryTableGroup.jsx
@@ -32,7 +32,7 @@ const CategoryTableGroup = () => {
 	const [input, setInput] = useState("");
 	const itemPerPage = window.innerWidth > 640 ? 6 : 6;
 	return (
-		<div className="max-w-3xl flex flex-col gap-4 py-4 px-10 w-full">
+		<div className="max-w-3xl flex flex-col gap-4 py-4 px-6 w-full">
 			<CategoryFilterSort
 				setFilter={setFilter}
 				order={order}

diff --git a/projects/client/src/components/Category/UpdateCategoryForm.jsx b/projects/client/src/components/Category/UpdateCategoryForm.jsx
@@ -11,7 +11,6 @@ const UpdateCategoryForm = ({ item }) => {
 	const navigate = useNavigate();
 	const [file, setFile] = useState(process.env.REACT_APP_IMAGE_BASE_URL + item.image);
 	const formik = useFormik(formikUpdateCategoryConfiguration(navigate, item));
-	console.log(file);
 
 	return (
 		<div className="my-auto items-center min-w-fit shrink-0 flex flex-col pb-10 px-8">

diff --git a/projects/client/src/components/CategoryCarousel/CategorySlider.jsx b/projects/client/src/components/CategoryCarousel/CategorySlider.jsx
@@ -7,7 +7,7 @@ const fetchCategories = async (setCategories) => {
 		.get(`${process.env.REACT_APP_API_BASE_URL}/category/list`)
 		.then((result) => {
 			setCategories([
-				{ id: "", name: "All Category", image: "uploads/categories/category_0.png" },
+				{ id: "", name: "All Category", image: "/uploads/categories/category_0.png" },
 				...result.data.rows,
 			]);
 		})

diff --git a/projects/client/src/components/CategoryCarousel/SliderSlides.jsx b/projects/client/src/components/CategoryCarousel/SliderSlides.jsx
@@ -86,6 +86,7 @@ const DesktopSlides = ({ categories, setPage }) => {
 			{categories.map((category, index) => {
 				const params = { category_id: category.id, branch_id: user?.branch?.id };
 				const isFocus = category_id == category.id;
+
 				return (
 					<SplideSlide key={index}>
 						<div className="flex flex-col items-center mx-2 pb-2 sm:pb-3 sm:pt-8">

diff --git a/projects/client/src/components/ChangePassword/handlers/changePasswordButtonHandler.js b/projects/client/src/components/ChangePassword/handlers/changePasswordButtonHandler.js
@@ -10,7 +10,6 @@ const validateChangePasswordInput = (input) => {
 };
 
 const ChangePasswordErrorHandler = async (error) => {
-	console.log(error);
 	if (error?.code === "ERR_NETWORK") {
 		return "Server unreachable, try again later!";
 	} else if (error?.code === "CONFIRM_PASS_ERR") {
@@ -40,7 +39,6 @@ export const changePasswordButtonHandler = async (input, setError, navigate) =>
 			navigate(-1);
 		}, 2000);
 	} catch (error) {
-		console.log(error);
 		await setError(await ChangePasswordErrorHandler(error));
 	}
 };
diff --git a/projects/client/src/components/Checkout/AddressBox/HeaderContent.jsx b/projects/client/src/components/Checkout/AddressBox/HeaderContent.jsx
@@ -6,7 +6,7 @@ const HeaderContent = () => {
 		<>
 			<span className="col-span-1 material-symbols-rounded">pin_drop</span>
 			<span className="col-span-4 text-left">Address:</span>
-			<Link className="col-start-7 underline cursor-pointer mr-2" to="address/change">
+			<Link className="col-span-2 sm:col-start-7 underline cursor-pointer mr-2" to="address/change">
 				<span className="text-sm">Edit </span>
 				<span className="material-symbols-rounded text-sm underline"> edit</span>
 			</Link>

diff --git a/projects/client/src/components/Checkout/CreateOrder.jsx b/projects/client/src/components/Checkout/CreateOrder.jsx
@@ -11,7 +11,7 @@ const CreateOrder = () => {
 		<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"
+				className="flex items-center bg-green-500 text-green-100 rounded-lg w-fit mx-auto sm:ml-auto sm:mr-8 py-3 px-6 mb-10 mt-4 disabled:opacity-50"
 				disabled={!checkout?.address?.id || !checkout?.cart?.length || !checkout?.logistic?.code}
 				onClick={() => postTransaction(checkout, dispatch, navigate)}
 			>

diff --git a/projects/client/src/components/Checkout/OrderBox/OrderBoxDetail.jsx b/projects/client/src/components/Checkout/OrderBox/OrderBoxDetail.jsx
@@ -9,17 +9,21 @@ const OrderBoxDetail = ({ cart }) => {
 					<div key={index} className="flex flex-row p-4 border-b border-dashed">
 						<img
 							src={process.env.REACT_APP_IMAGE_BASE_URL + item.Inventory.Product.image}
-							className="max-w-[100px] border border-green-500 rounded p-2"
+							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="font-semibold text-sm text-left">{item.Inventory.Product.name}</span>
 							<span className="text-sm text-left mb-auto mt-0.5">
 								@{item.Inventory.Product.weight} gr
 							</span>
 							<PriceDetail item={item} />
 						</div>
-						<span className="text-md font-light mt-auto ml-auto mb-1 mr-1">x {item.quantity}</span>
+						<div className="ml-auto min-w-fit flex justify-end items-end">
+							<span className="text-sm sm:text-md font-light mt-auto ml-auto mb-1 mr-1">
+								x {item.quantity}
+							</span>
+						</div>
 					</div>
 				);
 			})}

diff --git a/projects/client/src/components/Checkout/OrderBox/PriceDetail.jsx b/projects/client/src/components/Checkout/OrderBox/PriceDetail.jsx
@@ -17,17 +17,17 @@ const Promo = ({ item, isBOGO }) => {
 		}
 	}
 
-	return <span className="text-sm text-xs mt-auto text-left text-[#f47229] ml-3">{text.current}</span>;
+	return <span className="text-xs sm:text-sm mt-auto text-left text-[#f47229] sm:ml-3">{text.current}</span>;
 };
 
 const PriceWithPromo = ({ item }) => {
 	const price = getDisplayPrice(item);
 
 	return (
-		<div className="flex flex-row">
+		<div className="flex flex-col sm:flex-row">
 			<span className="text-sm text-left">{toCurrency(price.final)}</span>
 			{!price.isBOGO && (
-				<span className="text-sm text-xs mt-auto text-left line-through text-gray-200 ml-3">
+				<span className="text-xs sm:text-sm mt-auto text-left line-through text-gray-200 sm:ml-3">
 					{toCurrency(price.original)}
 				</span>
 			)}

diff --git a/projects/client/src/components/Checkout/Summary.jsx b/projects/client/src/components/Checkout/Summary.jsx
@@ -5,28 +5,33 @@ import { toCurrency } from "../../helper/currency";
 const Subtotal = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 font-normal text-left">
-			<span className="col-start-4 col-span-2">Subtotal:</span>
-			<span className="col-start-7 col-span-2">{toCurrency(summary?.raw?.subtotal)}</span>
+			<span className="col-start-2 sm:col-start-4 col-span-3 sm:col-span-2">Subtotal:</span>
+			<span className="col-start-6 sm:col-start-7 col-span-3 sm:col-span-2 text-right">
+				{toCurrency(summary?.raw?.subtotal)}
+			</span>
 		</div>
 	);
 };
 
 const Logistic = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 font-normal my-1 text-left">
-			<span className="col-start-4 col-span-2">Logistic fee:</span>
-			<span className="col-start-7 col-span-2"> {toCurrency(summary?.raw?.logistic)}</span>
+			<span className="col-start-2 sm:col-start-4 col-span-3 sm:col-span-2">Logistic fee:</span>
+			<span className="col-start-6 sm:col-start-7 col-span-3 sm:col-span-2 text-right">
+				{" "}
+				{toCurrency(summary?.raw?.logistic)}
+			</span>
 		</div>
 	);
 };
 
 const Discount = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 font-normal whitespace-nowrap text-left">
-			<span className="col-start-4 col-span-2">Voucher Discount:</span>
-			<span className="col-start-7 col-span-2 text-red">
+			<span className="col-start-2 sm:col-start-4 col-span-3 sm:col-span-2">Voucher Discount:</span>
+			<span className="col-start-6 sm:col-start-7 col-span-3 sm:col-span-2 text-right text-red">
 				{" "}
-				{summary?.discount ? `- ${toCurrency(summary?.discount)}` : "-"}
+				{summary?.discount ? `- ${toCurrency(summary?.discount)}` : `${toCurrency(0)}`}
 			</span>
 		</div>
 	);
@@ -35,8 +40,10 @@ const Discount = ({ summary }) => {
 const Total = ({ summary }) => {
 	return (
 		<div className="grid grid-cols-8 gap-2 text-green-400 py-2 mt-3 font-bold text-left">
-			<span className="col-start-4 col-span-2">Total:</span>
-			<span className="col-start-7 col-span-2">{toCurrency(summary?.total)}</span>
+			<span className="col-start-2 sm:col-start-4 col-span-3 sm:col-span-2">Total:</span>
+			<span className="col-start-6 sm:col-start-7 col-span-3 sm:col-span-2 text-right">
+				{toCurrency(summary?.total)}
+			</span>
 		</div>
 	);
 };
@@ -46,7 +53,7 @@ const Summary = () => {
 
 	return (
 		summary && (
-			<div className="flex flex-col mb-2 mt-8 ml-auto mr-6">
+			<div className="flex flex-col mb-2 mt-8 ml-auto mr-10">
 				<Subtotal summary={summary} />
 				<Logistic summary={summary} />
 				<Discount summary={summary} />

diff --git a/projects/client/src/components/Checkout/SwitchAddress.jsx b/projects/client/src/components/Checkout/SwitchAddress.jsx
@@ -7,9 +7,9 @@ import ContinueButton from "../ContinueButton.jsx";
 const CreateButton = () => {
 	const navigate = useNavigate();
 	return (
-		<div className="pt-10">
+		<div className="pt-10 w-fit mx-auto">
 			<button
-				className="rounded-lg font-bold h-fit bg-green-500 text-green-100 w-full sm:w-fit px-10 py-2 mx-auto mb-6"
+				className="rounded-lg font-bold h-fit bg-green-500 text-green-100 w-full sm:w-fit px-20 py-2 mx-auto mb-6"
 				onClick={() => navigate("/account/create-new-address")}
 			>
 				Add New Address

diff --git a/projects/client/src/components/Checkout/SwitchLogistic.jsx b/projects/client/src/components/Checkout/SwitchLogistic.jsx
@@ -18,7 +18,7 @@ const SwitchLogistic = () => {
 	return (
 		checkout.summary.weight &&
 		checkout.address.id && (
-			<div className="min-h-screen bg-green-100 items-center justify-center sm:p-20 ">
+			<div className="min-h-screen bg-green-100 items-center justify-center sm:p-10 ">
 				<div className="flex flex-col min-h-screen bg-white max-w-7xl  mx-auto rounded-xl shadow-lg sm:min-h-0 sm:p-5">
 					<BackButton color="text-green-400" url="/cart/checkout" />
 					<Logistics />

diff --git a/projects/client/src/components/Checkout/SwitchVoucher.jsx b/projects/client/src/components/Checkout/SwitchVoucher.jsx
@@ -5,7 +5,7 @@ import ContinueButton from "../ContinueButton";
 
 const SwitchVoucher = () => {
 	return (
-		<div className="min-h-screen bg-green-100 items-center justify-center sm:p-20 ">
+		<div className="min-h-screen bg-green-100 items-center justify-center sm:p-10 ">
 			<div className="flex flex-col min-h-screen bg-white max-w-7xl mx-auto rounded-xl shadow-lg sm:min-h-0 sm:p-5">
 				<BackButton color="text-green-400" url="/cart/checkout" />
 				<Vouchers />