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 <etchegarayjoaco@gmail.com>
Co-authored-by: Martín M <skydiver@users.noreply.github.com>

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';