order emails theming, sold out product card, contact page hcaptcha

resources/views/components/ui/product-card.blade.php

@@ -5,6 +5,8 @@
     'href'      => '#',
     'variantId' => null,
     'hasCustomFields' => false,
+    // Shows the "sold" star and drops the quick add-to-cart/personalize button.
+    'soldOut'   => false,
     // Heart toggle at the top right of the image; needs productId.
     'productId' => null,
     'wishlist'  => false,
@@ -36,7 +38,9 @@ class="w-full h-auto block"
             <x-wishlist-button :product-id="$productId" class="absolute top-4 right-4 z-10" />
         @endif
 
-        @if ($hasCustomFields)
+        @if ($soldOut)
+            <x-ui.sold-badge class="absolute top-2 right-2 {{ $wishlist && $productId ? 'mt-12' : '' }}" />
+        @elseif ($hasCustomFields)
             {{-- Custom fields have to be filled in on the product page. --}}
             <x-ui.button
                 :href="$href"

resources/views/components/ui/sold-badge.blade.php

@@ -0,0 +1,8 @@
+{{-- Black "sold" star for out-of-stock products. Position it from the caller
+     (e.g. class="absolute top-2 right-2"). --}}
+<div {{ $attributes->class('z-10 flex h-20 w-22 items-center justify-center text-black') }}>
+    <svg viewBox="0 0 87 80" class="absolute inset-0 size-full" fill="currentColor" aria-hidden="true">
+        <path d="M56.942,0l2.607,18.642,19.143-3.363L69.468,31.842,87,40,69.468,48.158l9.224,16.563L59.549,61.358,56.942,80,43.5,66.4,30.058,80,27.451,61.358,8.308,64.721l9.224-16.563L0,40l17.532-8.158L8.308,15.279l19.143,3.363L30.058,0,43.5,13.6Z"/>
+    </svg>
+    <span class="relative text-base italic font-black text-white uppercase">{{ __('storefront.product.sold') }}</span>
+</div>