Added shop details

src/app/harbor/shipyard/ships.tsx

@@ -234,7 +234,7 @@ export default function Ships({
                   </Button>
 
                   <Modal isOpen={shipModal} close={() => setShipModal(false)}>
-                    <div className="p-4 max-h-96 overflow-y-auto">
+                    <div className="p-4 max-h-[70vh] overflow-y-auto">
                       <h2 className="text-3xl font-bold text-center">
                         Confirm Shipping
                       </h2>

src/app/harbor/shop/shop-item-component.js

@@ -8,11 +8,13 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { cantAffordWords, purchaseWords, sample } from '../../../../lib/flavor'
 import useLocalStorageState from '../../../../lib/useLocalStorageState.js'
 import { useState } from 'react'
 import Icon from '@hackclub/icons'
+import Modal from '@/components/ui/modal'
+import Image from 'next/image'
 const ActionArea = ({ item, filterIndex, affordable }) => {
   const buyWord = useMemo(() => sample(purchaseWords), [item.id])
   const getYourRacksUp = useMemo(() => sample(cantAffordWords), [item.id])
@@ -46,15 +48,93 @@ export const ShopItemComponent = ({
   setFavouriteItems,
   favouriteItems,
 }) => {
+  let [detailsModal, setDetailsModal] = useState(false)
+
   const cardHoverProps = {
     whileHover: {
       scale: 1.05,
     },
   }
 
+  const linkIndex = Number(filterIndex) - 1
+
   return (
-    <motion.div {...cardHoverProps}>
+    <motion.div {...cardHoverProps} className="cursor-pointer">
+      <Modal isOpen={detailsModal} close={() => setDetailsModal(false)}>
+        <div className="flex flex-col max-h-[60vh] overflow-y-auto px-2 mb-5">
+          <h2 className="text-3xl">{item.name}</h2>
+          <h3
+            className="text-xl"
+            dangerouslySetInnerHTML={{ __html: item.subtitle }}
+          ></h3>
+          <img
+            src={item.imageUrl}
+            alt={item.name}
+            className="max-w-sm mx-auto my-3"
+          />
+
+          {item.description && (
+            <p
+              className="my-5"
+              dangerouslySetInnerHTML={{ __html: item.description }}
+            ></p>
+          )}
+
+          <Image
+            src="/hr.svg"
+            className="w-2/3 mx-auto my-3"
+            alt=""
+            width={461}
+            height={11}
+          />
+
+          {item.limited_qty && (
+            <i className="mt-3 text-amber-100">
+              This item is limited, buy it while you can!
+            </i>
+          )}
+
+          {item.fulfillment_description && (
+            <p
+              className="my-2 text-lg"
+              dangerouslySetInnerHTML={{ __html: item.fulfillment_description }}
+            ></p>
+          )}
+
+          {item.links && linkIndex >= 0 && item.links[linkIndex] && (
+            <p>
+              We will most likely order it from{' '}
+              <a
+                className="underline"
+                target="_blank"
+                href={item.links[Number(filterIndex) - 1]}
+              >
+                this link
+              </a>
+            </p>
+          )}
+
+          {item.customs_likely && linkIndex !== 0 && (
+            <p className="font-bold italic text-xl">
+              Customs may apply outside of US!
+            </p>
+          )}
+        </div>
+
+        <Button
+          className="float-right mr-10"
+          onClick={() => setDetailsModal(false)}
+        >
+          Close
+        </Button>
+      </Modal>
+
       <Card
+        onClick={(e) => {
+          if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'FORM') {
+            setDetailsModal(true)
+          }
+        }}
         id={id}
         className="h-full flex flex-col overflow-hidden shadow-lg transition-shadow duration-300 hover:shadow-xl"
       >
@@ -112,7 +192,8 @@ export const ShopItemComponent = ({
             }
           />
           <Button
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation()
               setFavouriteItems((prevFav) => {
                 if (prevFav.includes(item.id)) {
                   console.log('remove', prevFav)

src/app/harbor/shop/shop-utils.ts

@@ -30,6 +30,11 @@ export interface ShopItem {
   outOfStock: boolean
   minimumHoursEstimated: number
   maximumHoursEstimated: number
+  description: string | null
+  customs_likely: boolean | null
+  fulfillment_description: string | null
+  links: string[] | null[]
+  limited_qty: boolean | null
 }
 
 export async function getPerson() {
@@ -89,6 +94,18 @@ export async function getShop(): Promise<ShopItem[]> {
               maximumHoursEstimated: Number(
                 record.get('maximum_hours_estimated'),
               ),
+              description: record.get('description') as string | null,
+              customs_likely: Boolean(record.get('customs_likely')) as boolean,
+              fulfillment_description: record.get('fulfillment_description') as
+                | string
+                | null,
+              links: [
+                record.get('third_party_link_us') as string,
+                record.get('third_party_link_eu') as string,
+                record.get('third_party_link_in') as string,
+                record.get('third_party_link_ca') as string,
+              ],
+              limited_qty: Boolean(record.get('limited_qty')) as boolean,
             })
           })