Reflect pre-order state in add to cart button

teacaps · Jul 19, 2023 · c1df6bf · c1df6bf
1 parent 2694a1f
commit c1df6bf
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/product/ProductInfo.client.tsx b/src/components/product/ProductInfo.client.tsx
@@ -65,7 +65,7 @@ function ProductDescription({ product, gallery }: ProductInfoProps) {
 						</span>
 					) : null}
 				</div>
-				<AddToCart />
+				<AddToCart product={product} />
 			</div>
 		</div>
 	);
@@ -183,7 +183,7 @@ function VariantSelector({ gallery }: { gallery: RefObject<ImageGallery> }) {
 	);
 }
 
-function AddToCart() {
+function AddToCart({ product }: { product: ProductDetailsFragment }) {
 	const { selectedVariant } = useProductOptions();
 	const { status: cartStatus } = useCart();
 	const outOfStock = !selectedVariant?.availableForSale ?? true;
@@ -196,7 +196,13 @@ function AddToCart() {
 
 	useEffect(() => {
 		if (isLoadingState()) setButtonText("Loading...");
-		if (isIdleState()) setButtonText(outOfStock ? "Sold out" : "Add to cart");
+		if (isIdleState()) {
+			if (outOfStock) {
+				const isPreOrder = product.preorder?.value === "true";
+				if (isPreOrder) setButtonText("Coming soon");
+				else setButtonText("Currently unavailable");
+			} else setButtonText("Add to cart");
+		}
 	}, [cartStatus]);
 
 	return (