Added shop details

lib/redis-lock.ts

@@ -15,10 +15,7 @@ async function aquireLock(key: string): Promise<string | null> {
   return acquired ? lockValue : null
 }
 
-async function releaseLock(
-  lockKey: string,
-  lockValue: string,
-): Promise<void> {
+async function releaseLock(lockKey: string, lockValue: string): Promise<void> {
   const currentLockValue = await kv.get(lockKey)
   if (currentLockValue === lockValue) {
     await kv.del(lockKey)

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

@@ -10,10 +10,12 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { cantAffordWords, purchaseWords, sample } from '../../../../lib/flavor'
 import Icon from '@hackclub/icons'
 import { transcript } from '../../../../lib/transcript'
+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])
@@ -47,6 +49,8 @@ export const ShopItemComponent = ({
   setFavouriteItems,
   favouriteItems,
 }) => {
+  let [detailsModal, setDetailsModal] = useState(false)
+
   const cardHoverProps = {
     whileHover: {
       scale: 1.05,
@@ -89,9 +93,85 @@ export const ShopItemComponent = ({
     })
   }
 
+  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"
       >
@@ -133,7 +213,9 @@ export const ShopItemComponent = ({
               <img
                 src={item.imageUrl}
                 alt={item.name}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setDetailsModal(false)
                   let interaction = transcript('item.base', {
                     name: item.name,
                     price: localPrice,

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 getShop(): Promise<ShopItem[]> {
@@ -80,6 +85,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,
             })
           })
 

src/app/harbor/tavern/tavern.tsx

@@ -47,36 +47,49 @@ export default function Tavern() {
         </h1>
         <Card className="mb-8 p-6">
           <p className="mb-4">
-            On January 31st, thousands of ships will sail back to port, weathered and weary from their months-long voyage upon the High Seas. And yet, their journey—your journey—ends not at the dock… but in the firelit alcoves of the ✨Mystic Tavern✨.
+            On January 31st, thousands of ships will sail back to port,
+            weathered and weary from their months-long voyage upon the High
+            Seas. And yet, their journey—your journey—ends not at the dock… but
+            in the firelit alcoves of the ✨Mystic Tavern✨.
           </p>
           <p className="mb-4">
-            Join your fellow sailors to share tales and make merry over flagons of milk, to boast of your booty and exclaim the exploits of your greatest ships! Oh, and since most pirates don’t own cars, Hack Club’s <a href="#" target="_blank">gas fund</a> will cover your transportation.
+            Join your fellow sailors to share tales and make merry over flagons
+            of milk, to boast of your booty and exclaim the exploits of your
+            greatest ships! Oh, and since most pirates don’t own cars, Hack
+            Club’s{' '}
+            <a href="#" target="_blank">
+              gas fund
+            </a>{' '}
+            will cover your transportation.
           </p>
           <p className="mb-4">
-            The tavern is not a single location, but a manifestation of pirate camaraderie known to appear wherever an intrepid sailor focuses their spirit. <strong>We need captains in every city to step up and make their local Mystic Tavern their final and most selfless ship.</strong>
+            The tavern is not a single location, but a manifestation of pirate
+            camaraderie known to appear wherever an intrepid sailor focuses
+            their spirit.{' '}
+            <strong>
+              We need captains in every city to step up and make their local
+              Mystic Tavern their final and most selfless ship.
+            </strong>
           </p>
           <p className="mb-4">
-            Should you wish to organize such a gathering of shipmates, here are some things that will be asked of you:
+            Should you wish to organize such a gathering of shipmates, here are
+            some things that will be asked of you:
           </p>
           <ul className="list-disc ml-6 mb-4">
+            <li>Pick a date during the third week of February</li>
             <li>
-              Pick a date during the third week of February
-            </li>
-            <li>
-              Find a local venue (coffee shop, restaurant, library, park, whatever)
-            </li>
-            <li>
-              Manage signups and communications for pirates in your area
-            </li>
-            <li>
-              Receive and distribute special shirts at the event
-            </li>
-            <li>
-              Make it memorable for people!
+              Find a local venue (coffee shop, restaurant, library, park,
+              whatever)
             </li>
+            <li>Manage signups and communications for pirates in your area</li>
+            <li>Receive and distribute special shirts at the event</li>
+            <li>Make it memorable for people!</li>
           </ul>
           <p className="mb-4">
-            So RSVP today to meet your local hearties at a tavern near you. Better yet, volunteer to make one happen! Because like, Hack Club is made of real people. You should meet each other, you’re pretty cool 😉
+            So RSVP today to meet your local hearties at a tavern near you.
+            Better yet, volunteer to make one happen! Because like, Hack Club is
+            made of real people. You should meet each other, you’re pretty cool
+            😉
           </p>
         </Card>