add cart recs to cart (#13)

Author: StephDietz

frontend/app/actions.ts

@@ -226,3 +226,33 @@ export async function decreaseItemQuantity(productId: string) {
     return { data };
   }
 }
+
+export async function recommendProductByCart(cartId: string, maxItems: number) {
+  const graphqlQuery = `
+    query recommendProductByCart($cartId: String!, $maxItems: Int!) {
+      recommendProductByCart(cartId: $cartId, maxItems: $maxItems) {
+        searchObjs {
+          product {
+            name
+            id
+            image
+            description
+            stars
+            price
+            isStocked
+            category
+          }
+        }
+      }
+    } 
+  `;
+  const { error, data } = await fetchQuery({
+    query: graphqlQuery,
+    variables: { cartId, maxItems },
+  });
+  if (error) {
+    return { error: Array.isArray(error) ? error[0] : error };
+  } else {
+    return { data };
+  }
+}

frontend/app/components/cart/RecommendedProducts.tsx

@@ -0,0 +1,36 @@
+import { addToCart } from "@/app/actions";
+import Link from "next/link";
+
+export function RecommendedProducts({
+  recommendedItems,
+}: {
+  recommendedItems: any;
+}) {
+  return (
+    <div>
+      <div className="text-sm text-white/70">We think you might also like:</div>
+      <div className="flex">
+        {recommendedItems.map((item: any, i: number) => (
+          <div key={i} className="p-2 mb-auto">
+            <Link href={`/product/${item.product.id}`}>
+              <img
+                src={item.product.image}
+                alt={item.product.name}
+                className="w-24 h-24 object-cover rounded-md"
+              />
+            </Link>
+            <div className="flex items-center justify-between mt-2 border border-white/50 rounded-full w-full h-7 pl-2">
+              <div className="text-xs text-white/70">${item.product.price}</div>
+              <button
+                onClick={() => addToCart(item.product.id)}
+                className="h-full border-l px-2 border-white/50"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/components/cart/cart-modal.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { EditItemQuantityButton } from "./edit-quantity";
 import { DeleteItemButton } from "./delete-item";
+import { RecommendedProducts } from "./RecommendedProducts";
 
 function Price({ amount, className }: { amount: number; className: string }) {
   return <span className={className}>$ {amount}</span>;
@@ -31,7 +32,13 @@ function OpenCart({ quantity }: { quantity: number }) {
   );
 }
 
-export default function CartModal({ cart }: { cart: any }) {
+export default function CartModal({
+  cart,
+  recommendedItems,
+}: {
+  cart: any;
+  recommendedItems: Array<any>;
+}) {
   const cartItems = cart?.data?.getCart?.items;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -120,6 +127,7 @@ export default function CartModal({ cart }: { cart: any }) {
                     </li>
                   ))}
                 </ul>
+                <RecommendedProducts recommendedItems={recommendedItems} />
                 <a className="block w-full rounded-full bg-indigo-500 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100">
                   Proceed to Checkout
                 </a>

frontend/app/components/cart/index.tsx

@@ -1,14 +1,20 @@
-import { getCart } from "../../actions";
+import { getCart, recommendProductByCart } from "../../actions";
 import { cookies } from "next/headers";
 import CartModal from "./cart-modal";
 
 export default async function Cart() {
   const cartId = cookies().get("cartId")?.value;
   let cart;
-
+  let recommended;
   if (cartId) {
     cart = await getCart(cartId);
+    recommended = await recommendProductByCart(cartId, 3);
   }
 
-  return <CartModal cart={cart} />;
+  return (
+    <CartModal
+      cart={cart}
+      recommendedItems={recommended?.data?.recommendProductByCart?.searchObjs}
+    />
+  );
 }