Merge pull request #1249 from aksinghania/show-number-of-stocks

Added UI in shop to show if an Item is Limited with Stock

components/arcade/prizes.js

@@ -19,6 +19,7 @@ const Prizes = ({
   onQuantityChange,
   index,
   hoursBalance,
+  Stock,
   ...props
 }) => {
   const parsedFulfillmentDesc = fulfillmentDescription?.replace(
@@ -63,6 +64,24 @@ const Prizes = ({
           alt={text}
         />
       </Flex>
+      {Stock && Stock != null && Stock > 0 && Stock <= 100 && (
+          <Text
+            sx={{
+              background: '#CC6CE7',
+              px: '20px',
+              color: '#FFEEC6',
+              position: 'absolute',
+              top: '-15px',
+              left: '-12px',
+              zIndex: 1,
+              transform: `rotate(${ticketRotation}deg)`
+            }}
+            variant="headline"
+            className="gaegu"
+          >
+            Only {Stock} left!
+          </Text>
+        )}
       <Text
         className="slackey"
         variant="headline"

components/arcade/shop-component.js

@@ -94,6 +94,7 @@ export default function ShopComponent({
               id={item.id}
               onQuantityChange={(id, q) => handleQuantityChange(item.id, q)} // Pass handler to update quantity
               hoursBalance={hoursBalance}
+              Stock={item['Stock']}
             />
           ))}
       </Grid>

pages/arcade/[userAirtableID]/shop.js

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