task: Add a contact page

client/api/build-client.js

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios from 'axios';
 
 export default ({ req }) => {
   if (typeof window === 'undefined') {
@@ -8,11 +8,11 @@ export default ({ req }) => {
       baseURL: process.env.NODE_ENV === 'production' ? 'https://www.aurapan.com' : 'http://ingress-nginx-controller.ingress-nginx.svc.cluster.local',
       headers: req.headers,
       withCredentials: true
-    })
+    });
   } else {
     // We must be on the browser
     return axios.create({
       baseUrl: '/'
-    })
+    });
   }
-}
+};

client/components/account/Support.js

@@ -1,43 +1,54 @@
-import React, { useEffect, useState } from "react";
-import { Button, Col, Form, Row, Spinner } from "react-bootstrap";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button, Col, Form, Row, Spinner } from 'react-bootstrap';
 
-import Message from "../common/Message";
+import Message from '../common/Message';
 
 const Support = ({ user }) => {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [subject, setSubject] = useState("");
-	const [message, setMessage] = useState("");
-
-	const [loading, setLoading] = useState(false);
-	const [text, setText] = useState("");
-	const [showMessage, setShowMessage] = useState(false);
-
-	useEffect(() => {
-		if (user) {
-			setName(user.name);
-			setEmail(user.email);
-		}
-
-		// Dummy
-		if (loading) {
-			setTimeout(() => {
-				setLoading(false);
-				setText("Thank you for submit comment!");
-				setShowMessage(true);
-			}, 1000);
-		}
-	}, [loading]);
-
-	const submitHandler = async (e) => {
-		e.preventDefault();
-		setLoading(true);
-	};
-
-	return (
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+
+  const [loading, setLoading] = useState(false);
+  const [successText, setSuccessText] = useState('');
+  const [errorText, setErrorText] = useState('');
+
+  const showSuccessMessage = useMemo(() => !!successText, [successText]);
+  const showErrorMessage = useMemo(() => !!errorText, [errorText]);
+
+  useEffect(() => {
+    if (user) {
+      setName(user.name);
+      setEmail(user.email);
+    }
+
+    // Dummy
+    if (loading) {
+      setTimeout(() => {
+        setLoading(false);
+        setSuccessText('Thank you for submit comment!');
+      }, 1000);
+    }
+  }, [loading]);
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+
+    if (!name || !email || !subject || !message) {
+      setSuccessText('');
+      setErrorText('Please fill out the form.');
+      return;
+    }
+
+    setErrorText('');
+    setLoading(true);
+  };
+
+  return (
 		<Form onSubmit={submitHandler}>
 			<Row>
-				{showMessage && <Message variant="success">{text}</Message>}
+				{showSuccessMessage && <Message variant="success">{successText}</Message>}
+				{showErrorMessage && <Message variant="danger">{errorText}</Message>}
 
 				<Col>
 					<Form.Group controlId="name-contact" className="mb-3">
@@ -53,7 +64,7 @@ const Support = ({ user }) => {
 					<Form.Group controlId="email-contact" className="mb-3">
 						<Form.Label>Your Email</Form.Label>
 						<Form.Control
-							type="text"
+							type="email"
 							placeholder="Enter your email"
 							value={email}
 							onChange={(e) => setEmail(e.target.value)}
@@ -74,15 +85,16 @@ const Support = ({ user }) => {
 						<Form.Label>Message</Form.Label>
 						<Form.Control
 							as="textarea"
-							style={{ height: "100px" }}
+							style={{ height: '100px' }}
 							placeholder="Write your message"
 							value={message}
 							onChange={(e) => setMessage(e.target.value)}
 						></Form.Control>
 					</Form.Group>
 
 					<Button type="submit" variant="dark">
-						{loading ? (
+						{loading
+						  ? (
 							<Spinner
 								animation="border"
 								role="status"
@@ -92,13 +104,14 @@ const Support = ({ user }) => {
 							>
 								<span className="visually-hidden">Loading...</span>
 							</Spinner>
-						) : null}{" "}
+						    )
+						  : null}{' '}
 						Submit
 					</Button>
 				</Col>
 			</Row>
 		</Form>
-	);
+  );
 };
 
 export default Support;

client/components/account/UserReviewList.js

@@ -14,7 +14,7 @@ const UserReviewList = ({ myReviews, products }) => {
 				<Table striped bordered hover responsive className="table-sm">
 					<thead>
 						<tr>
-							<th>ID</th>
+							<th>No.</th>
 							<th>PRODUCT</th>
 							<th>MY RATING</th>
 							<th>OVERALL RATING</th>
@@ -28,7 +28,7 @@ const UserReviewList = ({ myReviews, products }) => {
 						{myReviews.map((review, index) => (
 							<tr key={review.id}>
 								<td>
-									<CustomTooltip index={index} mongoId={review.id} />{' '}
+									<CustomTooltip index={index + 1} mongoId={review.id} />{' '}
 								</td>
 								<td>
 									<Link

client/components/header/Header.js

@@ -9,7 +9,7 @@ const Header = ({ currentUser, products, bestseller }) => {
   const [showNotification, setShowNotification] = useState(false);
   const [onMobile, setOnMobile] = useState(true);
 
-  const { width } = useWindowSize();
+  const { windowSize: { width } } = useWindowSize();
 
   // All category on the website
   const productCategories = ['Top', 'Bottom', 'Dress', 'Set', 'Coat'];

client/components/product/ProductDescription.js

@@ -60,18 +60,16 @@ const ProductDescription = ({ product }) => {
 
 							<div className="description-section">
 								<h6>Wash and Care:</h6>
-								<p>
-									Dignissim enim sit amet venenatis urna. Sollicitudin aliquam
-									ultrices sagittis orci a scelerisque purus. Augue neque
-									gravida in fermentum et. Vel pretium lectus quam id leo.{' '}
-								</p>
-								<p>
-									Quis commodo odio aenean sed. Turpis massa sed elementum
-									tempus egestas. Semper eget duis at tellus. Suscipit tellus
-									mauris a diam maecenas sed enim. Nec nam aliquam sem et tortor
-									consequat id. In ornare quam viverra orci sagittis.
-								</p>
-								<p>Fames ac turpis egestas integer eget aliquet.</p>
+								<p>To keep your clothing looking fresh and vibrant, follow these general care instructions:</p>
+								<ol>
+									<li><strong>Machine Wash</strong>: Wash in cold water on a gentle cycle with like colors to prevent fading and bleeding.</li>
+									<li><strong>Mild Detergent</strong>: Use a mild detergent to maintain the fabric&apos;s quality and colors.</li>
+									<li><strong>Do Not Bleach</strong>: Avoid bleach to protect the integrity of the fabric.</li>
+									<li><strong>Tumble Dry Low</strong>: If using a dryer, tumble dry on low heat. For optimal results, air drying is recommended.</li>
+									<li><strong>Iron with Care</strong>: If needed, iron on low heat while the item is slightly damp to remove wrinkles. For added protection, place a cloth between the iron and fabric.</li>
+									<li><strong>Store Properly</strong>: Hang or fold your clothes in a cool, dry place to maintain shape and quality.</li>
+								</ol>
+								<p>By following these care guidelines, you can ensure that your clothing remains a staple in your wardrobe for years to come!</p>
 							</div>
 						</DynamicTabPane>
 
@@ -80,7 +78,10 @@ const ProductDescription = ({ product }) => {
 							eventKey="size-chart"
 							title="Size Chart"
 						>
-							<SizeChart />
+							<p>Refer to our size chart to find your perfect fit. If you&apos;re between sizes, we recommend sizing up for added comfort.</p>
+							<div className="size-chart-container">
+								<SizeChart />
+							</div>
 						</DynamicTabPane>
 					</DynamicTabContent>
 				</Col>

client/components/product/SizeChart.js

@@ -40,7 +40,7 @@ const SizeChart = () => {
 				</Col>
 			</Row>
 
-			<Row className="mt-5">
+			<Row className="mt-3">
 				<Col className="px-0">
 					<DynamicTabContent>
 						<DynamicTabPane

client/hooks/useWindowSize.js

@@ -9,6 +9,8 @@ const useWindowSize = () => {
     height: isSSR ? 800 : window.innerHeight
   });
 
+  const [onMobile, setOnMobile] = useState(false);
+
   useEffect(() => {
     window.addEventListener('resize', () => {
       setWindowSize({ width: window.innerWidth, height: window.innerHeight });
@@ -21,7 +23,18 @@ const useWindowSize = () => {
     };
   }, []);
 
-  return windowSize;
+  useEffect(() => {
+    if (windowSize.width <= 576) {
+      setOnMobile(true);
+    } else {
+      setOnMobile(false);
+    }
+  }, [windowSize.width]);
+
+  return {
+    windowSize,
+    onMobile
+  };
 };
 
 export default useWindowSize;

client/package.json

@@ -19,6 +19,7 @@
     "react": "17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "17.0.2",
+    "react-icons": "^5.4.0",
     "react-paypal-button-v2": "^2.6.3",
     "react-rating-stars-component": "^2.2.0",
     "react-share": "^4.4.0",

client/pages/404.js

@@ -1,14 +1,14 @@
 import React from 'react';
 
-function Custom404() {
-	return (
+function Custom404 () {
+  return (
 		<p
 			className="d-flex justify-content-center align-items-center"
 			style={{ height: '90vh' }}
 		>
 			404 Page not found :(
 		</p>
-	);
+  );
 }
 
-export default Custom404
+export default Custom404;