Merge pull request #14 from ildecimo/develop

dev -> main

src/app/api/approve-review/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse, type NextRequest } from 'next/server';
+import { authorize } from '~/lib/authorize';
+import * as db from '~/lib/db';
+import { approveReview } from '~/server/bigcommerce-api';
+
+export async function POST(req: NextRequest) {
+  const authorized = authorize();
+
+  if (!authorized) {
+    return new NextResponse('Unauthorized', { status: 401 });
+  }
+
+  const accessToken = await db.getStoreToken(authorized.storeHash);
+
+  if (!accessToken) {
+    return new NextResponse(
+      'Access token not found. Try to re-install the app.',
+      { status: 401 }
+    );
+  }
+
+  const reqBody = (await req.json()) as { productId: number; reviewId: number };
+
+  const review = await approveReview({
+    ...reqBody,
+    accessToken,
+    storeHash: authorized.storeHash,
+  });
+
+  return NextResponse.json(review);
+}

src/app/product/[productId]/review/[reviewId]/page.tsx

@@ -2,11 +2,17 @@ import { authorize } from '~/lib/authorize';
 import * as db from '~/lib/db';
 
 import {
+  fetchCustomerOrders,
   fetchProductWithAttributes,
   fetchReview,
+  fetchReviews,
 } from '~/server/bigcommerce-api';
 
 import { ReviewDetail } from '~/components/ReviewDetail';
+import {
+  analyzeIssuesCategory,
+  analyzeReview,
+} from '~/server/google-ai/analyze-review';
 
 interface PageProps {
   params: { reviewId: string; productId: string };
@@ -28,22 +34,40 @@ export default async function Page(props: PageProps) {
   const reviewId = Number(props.params.reviewId);
   const productId = Number(props.params.productId);
 
-  const product = await fetchProductWithAttributes(
-    productId,
-    accessToken,
-    authorized.storeHash
-  );
+  const [product, review, reviews] = await Promise.all([
+    fetchProductWithAttributes(productId, accessToken, authorized.storeHash),
+    fetchReview(productId, reviewId, accessToken, authorized.storeHash),
+    fetchReviews(productId, accessToken, authorized.storeHash),
+  ]);
 
-  const review = await fetchReview(
-    productId,
-    reviewId,
+  const customerOrders = await fetchCustomerOrders({
+    email: review.email,
     accessToken,
-    authorized.storeHash
-  );
+    storeHash: authorized.storeHash,
+  });
+
+  const customerReviews = reviews.filter((r) => r.email === review.email);
+
+  const sentimentAnalysis = await analyzeReview({
+    rating: review.rating,
+    text: review.text,
+    title: review.title,
+  });
+
+  const issuesCategories = await analyzeIssuesCategory({
+    rating: review.rating,
+    text: review.text,
+    title: review.title,
+  });
 
   return (
-    <div>
-      <ReviewDetail product={product} review={review} />
-    </div>
+    <ReviewDetail
+      sentimentAnalysis={sentimentAnalysis}
+      issuesCategories={issuesCategories}
+      customerOrders={customerOrders}
+      customerReviews={customerReviews}
+      product={product}
+      review={review}
+    />
   );
 }

src/components/AIChatBubble.tsx

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+
+interface AIChatBubbleProps {
+  message: string | React.ReactNode;
+  hideAvatar?: boolean;
+}
+
+export const AIChatBubble = ({ message, hideAvatar }: AIChatBubbleProps) => {
+  return (
+    <div className="mb-4 flex max-w-[450px] items-center">
+      {!hideAvatar && (
+        <div className="mr-4 flex flex-none flex-col items-center space-y-1">
+          <Image
+            src="/images/vertex-ai.jpeg"
+            alt="AI Avatar"
+            width={32}
+            height={32}
+            className="rounded-full"
+          />
+          <p className="block text-xs">Vertex AI</p>
+        </div>
+      )}
+      <div
+        className={`relative mb-2 flex-1 rounded-lg bg-gray-100/80 p-2 text-lg ${
+          hideAvatar ? 'ml-[60px]' : ''
+        }`}
+      >
+        <div>{message}</div>
+
+        {!hideAvatar && (
+          <div className="absolute left-0 top-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-gray-100/80"></div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/IssueBadges.tsx

@@ -0,0 +1,23 @@
+import { Badge } from '@bigcommerce/big-design';
+
+interface IssuesBadgesProps {
+  issuesCategoriesArray: string[];
+}
+
+export const IssuesBadges = ({ issuesCategoriesArray }: IssuesBadgesProps) => {
+  return (
+    <div className="flex flex-wrap items-center">
+      <span className="mr-2">Issues found:</span>
+
+      {issuesCategoriesArray.map((issue) => (
+        <Badge
+          key={issue}
+          label={issue}
+          variant={issue === 'no issues' ? 'success' : 'danger'}
+        >
+          {issue}
+        </Badge>
+      ))}
+    </div>
+  );
+};