Reviews functionality (#173)

* Reviews functionality

* Check if user is logged in and add error messages for inputs

* Add delete and edit funtionality

* Add layout to reviews

* Delete deprecated component

* Fix build errors

* Reviews functionality

* Check if user is logged in and add error messages for inputs

* Add delete and edit funtionality

* Add layout to reviews

* Delete deprecated component

* Fix build errors

* Rating functionality

* Add reviews counter

* add limit and page to getReviews function

* build fix

* Add pagination

* Add review rating to product

* fix hydration error

* Add default query value

* redirect anon users from account layout

* Reviews update

---------

Co-authored-by: JoaquinEtchegaray <[email protected]>
Co-authored-by: Martín M <[email protected]>

Author: 3 people

app/_components/Globals/Spinner.tsx

@@ -9,7 +9,7 @@ export const Spinner = ({ position = 'center', size = 10, className }: SpinnerPr
     <div className={`text-${position} ${className ? className : ''}`}>
       <div role="status">
         <svg
-          className={`inline mr-2 w-${size} h-${size} text-gray-medium animate-spin dark:text-gray-dark fill-gray`}
+          className={`inline w-${size} h-${size} text-gray-medium animate-spin dark:text-gray-dark fill-gray`}
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

app/_lib/Store.ts

@@ -105,7 +105,8 @@ class Store {
       sku: product.sku || null,
       images: this.transformImages(product),
       categories: product.category_index?.id,
-      stock: product.stock_level
+      stock: product.stock_level,
+      reviewRating: product.review_rating
     };
   }
 
@@ -177,6 +178,59 @@ class Store {
       limit
     };
   }
+
+  async getReviews(reviewInfo: { productId: string; limit?: number; page?: number }) {
+    const { productId, limit = 10, page } = reviewInfo;
+    const reviews = await swell.get('/products:reviews', {
+      parent_id: productId,
+      limit,
+      page
+    });
+    return reviews;
+  }
+
+  async postReview(reviewInfo: {
+    userId: string;
+    comments: string;
+    productId: string;
+    rating: number;
+    title: string;
+  }) {
+    const { userId, comments, productId, rating, title } = reviewInfo;
+
+    const reviews = await swell.post('/products:reviews', {
+      account_id: userId,
+      comments: comments,
+      parent_id: productId,
+      rating: rating,
+      title: title,
+      approved: true
+    });
+    return reviews;
+  }
+
+  async deleteReview(reviewId: string) {
+    const review = await swell.delete(`/products:reviews/${reviewId}`);
+    return review;
+  }
+
+  async editReview(
+    reviewId: string,
+    reviewInfo: {
+      comments: string;
+      rating: number;
+      title: string;
+    }
+  ) {
+    const { comments, rating, title } = reviewInfo;
+
+    const review = await swell.put(`/products:reviews/${reviewId}`, {
+      comments: comments,
+      rating: rating,
+      title: title
+    });
+    return review;
+  }
 }
 
 export default new Store();

app/_lib/SwellAPI.ts

@@ -1,5 +1,4 @@
 import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
 import 'server-only';
 
 import Store from './Store';
@@ -104,6 +103,7 @@ export const getLoggedUser = async (): Promise<SwellAPI_Customer | null> => {
               name
             }
             product {
+              id
               name
               images {
                 file {
@@ -157,7 +157,7 @@ export const getUserInfo = async () => {
   const user = await getLoggedUser();
 
   if (!user?.session.accountId) {
-    return redirect('/account/login');
+    return { authenticated: false, user: null, userId: null, orders: [], addresses: [], cards: [] };
   }
 
   const addresses = await getAddresses();
@@ -166,6 +166,7 @@ export const getUserInfo = async () => {
   return {
     authenticated: true,
     user: user.account,
+    userId: user.session.accountId,
     orders: user.orders.results || [],
     addresses: addresses || [],
     cards: cards || []

app/_types/Generic/Generic.d.ts

@@ -1,5 +1,5 @@
 interface Pagination {
-  total: number;
+  total?: number;
   pages: number[];
   current: number;
   limit: number;

app/_types/Generic/Products.d.ts

@@ -15,6 +15,7 @@ interface Product {
   sku?: string | null;
   categories?: string[];
   stock?: number;
+  reviewRating?: number;
 }
 
 interface ProductImage {

app/_types/Generic/Reviews.d.ts

@@ -0,0 +1,21 @@
+type Reviews = {
+  count: number;
+  page_count: number;
+  page: number;
+  results: Review[];
+  pages: {
+    [key: string]: { start: number; end: number };
+  };
+};
+
+interface Review {
+  account_id: string;
+  comments: string;
+  parent_id: string;
+  rating: number;
+  title: string;
+  name: string;
+  date_created: string;
+  approved: boolean;
+  id: string;
+}

app/_types/Swell/Product.d.ts

@@ -34,6 +34,7 @@ interface SwellProduct {
   sale_price?: number | null;
   sku?: string;
   category_index: CategoryIndex;
+  review_rating: number;
   id: string;
 }
 

app/_types/Swell/SwellAPI.d.ts

@@ -37,6 +37,7 @@ interface SwellAPI_Order {
       name: string;
     };
     product: {
+      id: string;
       name: string;
       price: number;
       images: {

app/account/(anon)/create-account/_components/RegisterForm.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';

app/account/(anon)/reset-password/_components/ResetPasswordForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';

app/account/(user)/addresses/_components/AddressCard.tsx

@@ -28,21 +28,20 @@ const AddressCard = ({ address }: Props) => {
       </div>
       <div className="flex flex-col justify-between">
         <button className="flex justify-center items-center pt-1" onClick={() => setOpen(true)}>
-          <EditIcon />
+          <EditIcon strokeColor="black" />
         </button>
         <DeleteAddressModal
           addressId={address.id}
           openModal={openModal}
           setOpenModal={setOpenModal}
         />
         <button
-          className="hover:stroke-red-500"
           data-delete="address"
           onClick={() => {
             void setOpenModal(true);
           }}
         >
-          <TrashIcon />
+          <TrashIcon strokeColor="red" />
         </button>
         <EditAddressModal open={open} setOpen={setOpen} address={address} />
       </div>

app/account/(user)/layout.tsx

@@ -1,3 +1,5 @@
+import { redirect } from 'next/navigation';
+
 import EditProfileModal from './_components/EditProfileModal';
 import AccountLink from './_components/Link';
 import LogOutModal from './_components/LogOutModal';
@@ -9,6 +11,11 @@ import { getUserInfo } from '~/_lib/SwellAPI';
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const { user: account } = await getUserInfo();
 
+  // Prevent access to account pages if user is not logged in
+  if (!account) {
+    return redirect('/account/login');
+  }
+
   return (
     <Container className="mb-10">
       <div className="grid gap-10 lg:gap-0 lg:grid-cols-12 pt-10 font-quicksand space-x-10">

app/account/(user)/payments/_components/PaymentsCard.tsx

@@ -37,7 +37,7 @@ const PaymentCard = ({ card, defaultCard }: PaymentCardProps) => {
       <div className={`flex flex-col ${defaultCard ? 'justify-between items-end' : 'justify-end'}`}>
         {defaultCard && <p className="bg-gray shadow p-1 px-2 text-xs">Default</p>}
         <button onClick={() => setOpenConfModal(true)}>
-          <TrashIcon />
+          <TrashIcon strokeColor="red" />
         </button>
       </div>
       <DeleteCardModal

app/products/[slug]/_components/ProductInfo/ProductInfo.tsx

@@ -21,7 +21,7 @@ const ProductInfo = async ({ product }: ProductProp) => {
     <div className="w-full space-y-2 mt-5 md:mt-0">
       <ProductTitle title={product.name} />
       <ProductStock stock={product.stock} />
-      <ProductRating rating={3} />
+      <ProductRating rating={product.reviewRating as number} />
       <ProductPriceOptions price={product.price} salePrice={product.salePrice} />
       <ProductOptions product={product} />
       <AddToCart product={product} isAuthenticated={auth} />

app/products/[slug]/_components/ProductInfo/ProductRating.tsx

@@ -1,21 +1,20 @@
 'use client';
 
-import Rater from 'react-rater';
-import 'react-rater/lib/react-rater.css';
+import { Rating } from 'react-simple-star-rating';
 
-import Tooltip from '~/_components/Globals/Tooltip';
-
-type Rating = {
-  rating?: number;
-};
-
-const ProductRating = ({ rating }: Rating) => {
+const ProductRating = ({ rating }: { rating: number }) => {
   return (
-    <Tooltip content="Feature coming soon!">
-      <div className="w-fit">
-        <Rater total={5} rating={rating} />
-      </div>
-    </Tooltip>
+    <div className="flex items-center gap-3">
+      <Rating
+        allowFraction
+        initialValue={rating || 0}
+        readonly
+        size={20}
+        SVGclassName="inline"
+        fillColor="#242323"
+      />
+      <span>({rating || 0} stars)</span>
+    </div>
   );
 };