show out of stock items separately

components/arcade/prizes.js

@@ -20,6 +20,7 @@ const Prizes = ({
   index,
   hoursBalance = null,
   stock,
+  inStock = true,
   ...props
 }) => {
   const parsedFulfillmentDesc = fulfillmentDescription?.replace(
@@ -36,7 +37,7 @@ const Prizes = ({
   return (
     <Flex
       sx={{
-        background: '#09AFB4',
+        background: inStock ? '#09AFB4' : '#808080',
         borderRadius: '10px',
         flexDirection: 'column',
         justifyContent: 'space-between',
@@ -61,11 +62,12 @@ const Prizes = ({
         >
           <img
             src={img}
-            sx={{ height: 'auto', maxWidth: '280px', maxHeight: '250px' }}
+            sx={{ height: 'auto', maxWidth: '280px', maxHeight: '250px', filter: inStock ? 'none' : 'greyscale(1)' }}
             alt={text}
+            
           />
         </Flex>
-        {stock && stock != null && stock > 0 && stock <= 100 && (
+        {inStock && stock != null && stock > 0 && stock <= 100 && (
           <Text
             sx={{
               background: '#CC6CE7',
@@ -102,14 +104,15 @@ const Prizes = ({
           />
         </Balancer>
       </Flex>
+      {inStock && (
 
-      <Flex sx={{ flexDirection: 'column' }}>
+        <Flex sx={{ flexDirection: 'column' }}>
         <Balancer>
           <Text
             as="p"
             variant="caption"
             sx={{ color: '#FFEEC6', mt: 0, mb: 2 }}
-          >
+            >
             <em>You can order up to {quantity} of these</em>
           </Text>
         </Balancer>
@@ -119,10 +122,10 @@ const Prizes = ({
             // only show the quantity dropdown if you have enough hours to buy at least 2 of the item
             (hoursBalance ? hoursBalance / cost < 2 : null) ? null : (
               <Quantity
-                numOptions={Math.min(quantity, Math.floor(hoursBalance / cost))}
-                label={text}
-                onQuantityChange={onQuantityChange}
-                index={index}
+              numOptions={Math.min(quantity, Math.floor(hoursBalance / cost))}
+              label={text}
+              onQuantityChange={onQuantityChange}
+              index={index}
               />
             )
           }
@@ -130,15 +133,15 @@ const Prizes = ({
             // only show the buy button if you have enough hours to buy at least 1 of the item
             (hoursBalance ? hoursBalance / cost < 1 : null) ? null : (
               <Button
-                sx={{
-                  borderRadius: '5px',
-                  color: '#FFEEC6',
-                  backgroundColor: '#09878b',
-                  width: 'fit-content'
-                }}
-                as="a"
-                href={link}
-                className="gaegu"
+              sx={{
+                borderRadius: '5px',
+                color: '#FFEEC6',
+                backgroundColor: '#09878b',
+                width: 'fit-content'
+              }}
+              as="a"
+              href={link}
+              className="gaegu"
               >
                 Buy
               </Button>
@@ -147,6 +150,7 @@ const Prizes = ({
         </Flex>
         )}
       </Flex>
+        )}
 
       <Text
         sx={{
@@ -161,9 +165,11 @@ const Prizes = ({
         variant="headline"
         className="gaegu"
       >
-        {cost} {link ? '🎟️' : cost == 1 ? 'ticket' : 'tickets'}
+        {cost} 🎟️
       </Text>
-      <Text
+      {inStock && (
+
+        <Text
         variant="headline"
         sx={{
           position: 'absolute',
@@ -177,24 +183,25 @@ const Prizes = ({
         onClick={() => {
           document.getElementById(`${parsedFullName}-info`).showModal()
         }}
-      >
+        >
         📦
       </Text>
+    )}
       <dialog
-        id={`${parsedFullName}-info`}
-        sx={{
-          background: '#09AFB4',
-          borderRadius: '10px',
-          flexDirection: 'column',
-          padding: '30px',
-          border: 'none',
-          scrollbarWidth: 'none',
-          textAlign: 'center',
-          maxWidth: '400px',
-          '@media (max-width: 400px)': {
-            maxWidth: '300px'
-          }
-        }}
+      id={`${parsedFullName}-info`}
+      sx={{
+        background: '#09AFB4',
+        borderRadius: '10px',
+        flexDirection: 'column',
+        padding: '30px',
+        border: 'none',
+        scrollbarWidth: 'none',
+        textAlign: 'center',
+        maxWidth: '400px',
+        '@media (max-width: 400px)': {
+          maxWidth: '300px'
+        }
+      }}
       >
         <Close
           sx={{

components/arcade/shop-component.js

@@ -52,7 +52,7 @@ export default function ShopComponent({
 
 
   const inStockItems = availableItems.filter(item => item['Stock'] === null || item['Stock'] > 0 );
-const outOfStockItems = availableItems.filter(item => item['Stock'] !== null && item['Stock'] <= 0);
+  const outOfStockItems = availableItems.filter(item => item['Stock'] !== null && item['Stock'] <= 0);
 
   return (
     <>
@@ -107,7 +107,7 @@ const outOfStockItems = availableItems.filter(item => item['Stock'] !== null &&
             />
           ))}
       </Grid>
-      <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle' >Out of stock items</Text>
+      <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='headline' >Out of stock items</Text>
       <Grid
         sx={{
           pt: '50px',

pages/arcade/shop.js

@@ -79,7 +79,7 @@ export async function getStaticProps() {
         id: item.id,
         'Image URL': item['Image URL'] || null,
         'Max Order Quantity': item['Max Order Quantity'] || 1,
-        Stock: item['Stock'] || null
+        Stock: item['Stock'] >= 0 ? item['Stock'] : null
       }))
       props.availableItems = availableItems
     }),