adding reviews

cactussia · Oct 24, 2023 · 97cef63 · 97cef63
1 parent 8b288e8
commit 97cef63
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 57 deletions.
diff --git a/src/components/Reviews/Rating.jsx b/src/components/Reviews/Rating.jsx
@@ -15,7 +15,7 @@ export default function Rating({stars=5, rate, setRate, height, width, className
     <div className='flex justify-center items-center gap-1' title={`Rated By ${rate} Stars`}>
       {stars > 0 && ( Array(stars).fill(0).map((_, i) => 
         <div onClick={() => setRate(i+1)} onMouseEnter={() => setRate(i+1)} key={i}>
-          <Rate className={className} height={height} width={width} fill={rate > 0 && i < rate} color={"#d37036"}/>
+          <Rate className={className} height={height} width={width} fill={rate > 0 && i < rate} color={"#e7702b"}/>
         </div>
       ))}
     </div>

diff --git a/src/components/Reviews/Stars.jsx b/src/components/Reviews/Stars.jsx
@@ -7,12 +7,12 @@ Stars.propTypes = {
     className: PropType.string,
 }
 
-export default function Stars({rate, stars=5, className="w-6 h-6"}) {
+export default function Stars({rate, stars=5, className}) {
   return (
-    <div className='flex justify-center items-center gap-1' title={`Rated By ${rate} Stars`}>
+    <div className='bg-[#e7702b]- flex justify-center items-center gap-1' title={`Rated By ${rate} Stars`}>
     {stars > 0 && ( Array(stars).fill(0).map((_, i) => 
       <div key={i}>
-        <Rate fill={rate > 0 && i < rate} className={className} color={"#d37036"}/>
+        <Rate fill={rate > 0 && i < rate} className={className + " w-6 h-6"} color={"#e7702b"}/>
       </div>
     ))}
     </div>

diff --git a/src/components/Reviews/index.jsx b/src/components/Reviews/index.jsx
@@ -1,5 +1,5 @@
 import Stars from "./Stars";
-import Overlay from "../../assets/icons/cactus.png";
+// import Overlay from "../../assets/icons/cactus.png";
 import PropsTypes from 'prop-types';
 
 Review.propTypes = {
@@ -11,13 +11,13 @@ Review.propTypes = {
 export default function Review({author="Anonymous", review, rate}) {
   return (
     <figure className="relative flex justify-center items-center gap-4 flex-col">
-			<img src={Overlay} className={`-z-20 max-w-[140px] max-h-[90%] absolute object-contain mix-blend-screen opacity-40 transition-all duration-700 delay-300 animate-bounce`} alt="Lotus Overlay" />
+			{/* <img src={Overlay} className={`-z-20 max-w-[140px] max-h-[90%] absolute object-contain mix-blend-screen opacity-40 transition-all duration-700 delay-300 animate-bounce`} alt="Lotus Overlay" /> */}
 			<figcaption className="flex justify-center items-center flex-col gap-4">
-				<h3 className="cinzel text-center text-2xl font-bold text-white capitalize">{author}</h3>
-				<Stars rate={rate}/>
+				<h3 className="cinzel text-center text-2xl font-bold text-white uppercase">{author}</h3>
+				<Stars rate={rate} className="drop-shadow"/>
         </figcaption>
         {review && <blockquote className="p-1">
-					<p className="text-white sm:text-lg text-center z-10 sm:px-0 px-4">{review}</p>
+					<p className="text-white sm:text-lg text-[17px] text-center z-10 sm:px-0 px-4">{review}</p>
         </blockquote>}
     </figure>
   )

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -24,7 +24,7 @@ function Home() {
       `}
       />
     </section>
-    {/* <Reviews/> */}
+    <Reviews/>
     <WhatsappBtn/>
     <Footer/>
     </>

diff --git a/src/pages/Reviews.jsx b/src/pages/Reviews.jsx
@@ -25,46 +25,40 @@ export default function Reviews() {
 
   const [reviews, setReviews] = useState([]);
   const [reviewData, setReviewData] = useState({});
-  const [error, setError] = useState(false);
+  const [error, setError] = useState({trigger: false, message: ""});
 
   const [rate, setRate] = useState(5);
   const [isFormActive, setIsFormActive] = useState(false);
   const [thankPage, setThankPage] = useState(false);
 
-  // const TFields = t(`${activePage}.reviews.form.fields`, {returnObjects: true});
-  // const TFieldsErrors = t(`${activePage}.reviews.form.fieldserrors`, {returnObjects: true});
+  const localization = (id) => lang.filter(f=>f.id_phrase==id)[0][langs[langSelected]] ?? id;
 
-  // const ReviewsFields = useMemo(() => reviewsFields.map(field => {
-  //     field.placeholder = TFields[field.name.toLowerCase()] || field.placeholder;
-  //     field.error = TFieldsErrors[field.name.toLowerCase()] || field.error;
-  //     field.empty = t('GlobalForm.emptyField', {field: field.placeholder});
-  //     return field;
-  // }), [TFields, TFieldsErrors, t]);
-
-  const storeReview = e => {
-    const { name, value } = e.target;
-    setReviewData({ ...reviewData, [name]: value.trim() });
+  const storeReview = (field, value) => {
+    setReviewData({ ...reviewData, [field.name]: value.trim() });
+    (field.required && !value.trim()) && setError({trigger: true, message: field.translateEmpty[langSelected]});
   }
 
   // submitting the review form to firebase collection called "reviews"
   const sendReview = async (e) => {
     e.preventDefault();
     try {
       // clear the error message
-      setError(false);
+      setError({trigger: false, message: ""});
       await addDoc(collection(db, "Reviews"), {...reviewData, rate, createdAt: serverTimestamp()});
       if (reviewData.rate >= 4) setReviews([...reviews, reviewData]);
       setThankPage(true);
     } catch (e) {
-      setError(true);
+      setError({trigger: true, message: e.message});
       console.error(e);
     }
   }
 
   // clear the form data
   const reset = () => {
     setIsFormActive(false);
+    setThankPage(false);
     setReviewData({});
+    setError({trigger: false, message: ""});
     setRate(5);
   }
 
@@ -93,16 +87,16 @@ export default function Reviews() {
 
   // effect to clear custom error messages
   useEffect(() => {
-    if(!error) return
+    if(!error.trigger) return
     const timeout = setTimeout(() => {
-      setError(false);
+      setError({trigger: false, message: ""});
     }, 5000);
     return () => clearTimeout(timeout);
   }, [error]);
 
 
   return (
-    <section id="reviews" className="w-full max-h-[700px] relative py-10 flex flex-1 justify-center items-center flex-col gap-10 shadow-inner overflow-hidden " style={{backgroundImage: `url(${BG})`}}>
+    <section id="reviews" className="h-full w-full max-h-screen sm:max-h-[680px] relative py-10 sm:px-8 flex flex-1 justify-center items-center flex-col gap-10 shadow-inner overflow-hidden " style={{backgroundImage: `url(${BG})`}}>
       <div className='w-full flex justify-center items-center flex-col gap-4'>
         <div className={`h-14 w-24 flex items-center justify-between bg-[#ffb4b6]] transition-all select-none z-20`}>
           <Icon
@@ -113,59 +107,50 @@ export default function Reviews() {
             width={140}
           />
         </div>
-        <h2 className={`sm:text-4xl text-center text-bleach-light text-4xl uppercase font-bold`}>What People Says About Cactusia</h2>
+        <h2 className={`sm:text-4xl text-center text-bleach-light text-4xl uppercase font-bold`}>{localization("reviewsTitle")}</h2>
       </div>
     {isFormActive ? 
     <section className='w-full flex flex-1 justify-center items-center px-4 flex-col'>
     {thankPage ?        
         <article className="w-full flex flex-1 justify-center items-center flex-col gap-4">
-          <h1 className="sm:text-4xl text-3x text-center text-yoga-white font-bold uppercase">Thank You '{reviewData.fullname}' For Your Review</h1>
-          <button onClick={() => setIsFormActive(false)} className="cinzel font-bold yoga-btn">Go Back</button>
+          <h1 className="sm:text-3xl text-center text-bleach-light text-2xl uppercase font-bold">Thank You '{reviewData.author}' For Your Review</h1>
+          <button type="reset" onClick={reset} className="shadow-xl rounded-lg md:w-[250px] w-full max-w-[90%] hover:bg-bleach-fade duration-200 active:scale-90 px-6 py-3 bg-bleach flex justify-center items-center text-green-dark font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">{localization("goback")}</button>
         </article>
     :
-        // <Form
-        // animatedIcon
-        // title={"Add Your Review"}
-        // onSubmit={sendReview}
-        // state={[reviewData, setReviewData]}
-        // fields={ReviewsFields}
-        // submitBtn={t('contact.form.submitBtn')}
-        // resetBtn={t(`${activePage}.reviews.form.resetBtn`)}
-        // EmptyErrorMessage={t('GlobalForm.emptyFields')}
-        // ErrorMessage={t('GlobalError.text')}
-        // errorTrigger={error}
-        // onReset={() => {setIsFormActive(false); setRate(5)}}
-        // insertElement={<Rating  className='h-8 w-8 cursor-pointer' rate={rate} setRate={setRate}/>}
-        // />
-
-      <form onSubmit={sendReview} action="" className="flex flex-col gap-4">
-        <Rating  className='h-8 w-8 cursor-pointer' rate={rate} setRate={setRate}/>
+      <form onSubmit={sendReview} action="" className="w-full max-w-sm flex items-center flex-col gap-4">
+        <Rating  className='h-8 w-8 cursor-pointer drop-shadow' rate={rate} setRate={setRate}/>
         { ReviewsFields.map((field,i)=>(
           <fieldset key={i} className='md:w-[400px] w-full flex items-start justify-center gap-1 flex-col'>
             {
               field.type === "textarea" ?
               <textarea
-              onChange={storeReview}
-              className={`shadow-lg p-4 rounded-lg w-full font-semibold text-base border-2 border-[#a0a08e] text-[#728b67] outline-2 outline-[#728b67] resize-y`}
+              onChange={e => storeReview(field, e.target.value)}
+              className={`shadow-lg p-4 rounded-lg w-full font-semibold text-base bg-bleach-light border-2 border-[#a0a08e] text-[#728b67] outline-2 outline-[#728b67] resize-y`}
               name={field.name}
               placeholder={field.translateLabels[langSelected]}
               // the textarea expand when the user type new lines
               rows={reviewData[field.name]?.split("\n").length}
+              autoComplete="on"
+              // setting the max characters to 500
+              maxLength={field.max}
+              required={field.required}
               ></textarea>
               :
               <input
-              onChange={storeReview}
-              className={`shadow-lg p-4 rounded-lg w-full font-semibold text-base border-2 border-[#a0a08e] text-[#728b67] outline-2 outline-[#728b67] `}
+              onChange={e => storeReview(field, e.target.value)}
+              className={`shadow-lg p-4 rounded-lg w-full font-semibold text-base bg-bleach-light border-2 border-[#a0a08e] text-[#728b67] outline-2 outline-[#728b67] `}
               type={field.type}
               name={field.name} 
               placeholder={field.translateLabels[langSelected]}
+              autoComplete="on"
+              required={field.required}
               />
             }
           </fieldset>
         ))}
-        <div className="flex justify-center items-center gap-4">
-          <button type="reset" onClick={reset} className="shadow-xl rounded-lg w-1/2 hover:bg-bleach-fade hover:text-green-dark duration-200 active:scale-90 px-6 py-3 flex justify-center items-center text-bleach border-2 border-[#CFCFB5] font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">Cancel</button>
-          <button type="submit" className="shadow-xl rounded-lg w-1/2 hover:bg-bleach-fade duration-200 active:scale-90 px-6 py-3 bg-bleach flex justify-center items-center text-green-dark font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">Send</button>
+        <div className="max-w-[90%] w-full flex justify-center items-center gap-4">
+          <button type="reset" onClick={reset} className="shadow-xl rounded-lg w-1/2 hover:bg-bleach-fade hover:text-green-dark duration-200 active:scale-90 px-6 py-3 flex justify-center items-center text-bleach border-2 border-[#CFCFB5] font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">{localization("reviewsCancelBtn")}</button>
+          <button type="submit" className="shadow-xl rounded-lg w-1/2 hover:bg-bleach-fade duration-200 active:scale-90 px-6 py-3 bg-bleach flex justify-center items-center text-green-dark font-semibold text-lg uppercase border-2 border-[#CFCFB5] tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">{localization("reviewsSendBtn")}</button>
         </div>
       </form>
 
@@ -175,7 +160,7 @@ export default function Reviews() {
       <Swiper
         className="w-full h-full"
         modules={[Autoplay, A11y]}
-        loop
+        loop={true}
         grabCursor
         centeredSlides
         content="center"
@@ -213,7 +198,7 @@ export default function Reviews() {
       </Swiper>
     </section>
     }
-    {!isFormActive && <button onClick={() => setIsFormActive(true)} className="shadow-xl rounded-lg md:w-[250px] w-full hover:bg-bleach-fade duration-200 active:scale-90 px-6 py-3 bg-bleach flex justify-center items-center text-green-dark font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">Add Your Review</button> }
+    {!isFormActive && <button onClick={() => setIsFormActive(true)} className="shadow-xl rounded-lg md:w-[250px] w-full max-w-[90%] hover:bg-bleach-fade duration-200 active:scale-90 px-6 py-3 bg-bleach flex justify-center items-center text-green-dark font-semibold text-lg uppercase tracking-wider outline-[#728b67] disabled:active:scale-100 disabled:bg-gray-600 disabled:cursor-not-allowed">{localization("reviewsAddBtn")}</button> }
     </section>
   )
 }
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -32,7 +32,9 @@
   .bg-bleach-brown { @apply bg-[#cfcbb5]; }
   .bg-bleach-brown-light { @apply bg-[#ebe7d3]; }
   .bg-bleach-fade { @apply bg-[#f0f0e5]; }
+  /* .bg-bleach-light { @apply bg-[#ddddcb]; } */
   .bg-bleach-light { @apply bg-[#eeeee4]; }
+  .bg-bleach-lighter { @apply bg-[#eeeee4]; }
 
   .bg-green-dark { @apply bg-[#586d49]; }
   .bg-green { @apply bg-[#768F6A]; }

diff --git a/src/utils/form.js b/src/utils/form.js
@@ -68,6 +68,9 @@ export const ReviewsFields = [
   {
     type: "textarea",
     name: "review",
+    required: true,
+    max: 600,
     translateLabels: ["Message", "Message"],
+    translateEmpty: ["Message is required", "Le message est requis"],
   },
 ]