Add Brilliant quantity to all variants

src/templates/merch/Product.tsx

@@ -15,6 +15,7 @@ import { useCartStore } from './store'
 import { ShopifyProduct } from './types'
 import { getProductMetafield } from './utils'
 import SEO from 'components/seo'
+import { IconSpinner } from '@posthog/icons'
 
 type ProductPageProps = {
     className?: string
@@ -120,14 +121,20 @@ export default function Product(props: ProductPageProps): React.ReactElement {
                         <Quantity value={quantity} onChange={setQuantity} />
 
                         <CallToAction
-                            disabled={outOfStock}
+                            disabled={loading || outOfStock}
                             onClick={handleAddToCart}
                             type="primary"
                             className="relative w-full"
                         >
                             <>
                                 <span className={cn('', isAdding && 'invisible')}>
-                                    {outOfStock ? 'Out of Stock' : 'Add to Cart'}
+                                    {loading ? (
+                                        <IconSpinner className="w-5 mx-auto animate-spin" />
+                                    ) : outOfStock ? (
+                                        'Out of Stock'
+                                    ) : (
+                                        'Add to Cart'
+                                    )}
                                 </span>
                                 <LoaderIcon
                                     className={cn(

src/templates/merch/ProductPanel.tsx

@@ -13,6 +13,7 @@ import { ShopifyProduct } from './types'
 import { getProductMetafield } from './utils'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import { getShopifyImage } from 'gatsby-source-shopify'
+import { IconSpinner } from '@posthog/icons'
 
 type ProductPanelProps = {
     className?: string
@@ -104,10 +105,21 @@ export function ProductPanel(props: ProductPanelProps): React.ReactElement {
 
             <Quantity value={quantity} onChange={setQuantity} />
 
-            <CallToAction disabled={outOfStock} onClick={handleAddToCart} type="primary" className="relative w-full">
+            <CallToAction
+                disabled={loading || outOfStock}
+                onClick={handleAddToCart}
+                type="primary"
+                className="relative w-full"
+            >
                 <>
                     <span className={cn('', isAdding && 'invisible')}>
-                        {outOfStock ? 'Out of Stock' : 'Add to Cart'}
+                        {loading ? (
+                            <IconSpinner className="w-5 mx-auto animate-spin" />
+                        ) : outOfStock ? (
+                            'Out of Stock'
+                        ) : (
+                            'Add to Cart'
+                        )}
                     </span>
                     <LoaderIcon
                         className={cn(

src/templates/merch/hooks.ts

@@ -95,9 +95,7 @@ export function useProduct(id: string): {
         })
     }
 
-    const outOfStock = selectedVariant
-        ? selectedVariant?.quantityAvailable <= 0 && !selectedVariant?.currentlyNotInStock
-        : false
+    const outOfStock = (selectedVariant?.brilliantQuantity || 0) <= 0
 
     return { selectedOptions, setOptionAtIndex, selectedVariant, loading, outOfStock }
 }
@@ -166,6 +164,7 @@ function useFetchProductOptions(id: string): { product: StorefrontProduct | null
 
                 const json = (await response.json()) as StorefrontShopRequestBody
                 const responseData = getProduct(json.data)
+                await assignBrilliantQuantities(responseData.variants)
                 setProductData(responseData)
                 setLoading(false)
             } catch (err) {
@@ -189,3 +188,23 @@ function getProduct(responseData: StorefrontShopResponse): StorefrontProduct {
 function getVariants(variants: StorefrontProductVariantsEdges): StorefrontProductVariantNode[] {
     return variants.edges.map((e: StorefrontProductVariantEdge) => e.node)
 }
+
+async function assignBrilliantQuantities(variants: StorefrontProductVariantNode[]): Promise<void> {
+    await Promise.all(
+        variants.map((v) => {
+            return fetch(
+                `${process.env.GATSBY_SQUEAK_API_HOST}/api/brilliant/inventory/${
+                    v.id.split('gid://shopify/ProductVariant/')[1]
+                }`
+            )
+                .then((res) => res.json())
+                .then((data) => {
+                    v.brilliantQuantity = data?.quantity || 0
+                })
+                .catch((err) => {
+                    console.error('Error fetching quantity:', err)
+                    v.brilliantQuantity = 0
+                })
+        })
+    )
+}

src/templates/merch/types.ts

@@ -151,6 +151,7 @@ export interface StorefrontProductVariantNode {
     }
     quantityAvailable: number
     selectedOptions: VariantSelectedOption[]
+    brilliantQuantity: number
 }
 
 export type StorefrontProductVariant = StorefrontProductVariantNode