Enhance out of stock message (#143)

lang/nl.json

@@ -8,11 +8,9 @@
     "Address created successfully": "Adres succesvol aangemaakt",
     "Address data": "Adresgegevens",
     "Already logged in": "Al ingelogd",
-    "Amount": "Bedrag",
-    "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
+    "Amount": "Aantal",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
-    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "Back to credentials": "Terug naar inloggegevens",
     "Back to dashboard": "Terug naar dashboard",
     "Back to login": "Terug naar inloggen",
@@ -34,7 +32,6 @@
     "Enter your email address below, you will receive an email within minutes to reset the password.": "Voer hieronder uw e-mailadres in, u ontvangt binnen enkele minuten een e-mail om het wachtwoord te resetten.",
     "Everything centralized in 1 place such as returns, exchanges and customer service": "Alles gecentraliseerd op 1 plek zoals retouren, ruilingen en klantenservice",
     "Free": "Gratis",
-    "Go to your account": "Ga naar uw account",
     "Is this not your account?": "Is dit niet uw account?",
     "Log out": "Uitloggen",
     "Logout from your account": "Uitloggen van uw account",
@@ -64,6 +61,8 @@
     "Thank you for subscribing": "Bedankt voor uw inschrijving",
     "Thank you for your order": "Bedankt voor uw bestelling",
     "This is a business account": "Dit is een zakelijke account",
+    "This product is out of stock": "Dit product is op dit moment niet op voorraad",
+    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met uw bestelling.",
     "To checkout": "Naar afrekenen",
     "Total price": "Totale prijs",
     "Total price (incl. VAT)": "Totale prijs (incl. BTW)",
@@ -76,7 +75,7 @@
     "Welcome back": "Welkom terug",
     "Yes, I want to subscribe to the newsletter": "Ja, ik wil me inschrijven voor de nieuwsbrief",
     "You already have an account with this e-mail address. Please log in to continue.": "U heeft al een account met dit e-mailadres. Log in om verder te gaan.",
-    "You do not have any orders yet.": "U heeft nog geen bestellingen.",
     "You will receive this newsletter approximately 2x a year": "U ontvangt deze nieuwsbrief ongeveer 2x per jaar",
-    "Your order is currently": "Uw bestelling is momenteel"
+    "Your order is currently": "Uw bestelling is momenteel",
+    "and use a different e-mail address.": "en gebruik een ander e-mailadres."
 }

resources/views/cart/partials/product/description.blade.php

@@ -1,20 +1,23 @@
 <td class="flex max-md:w-1/2 md:table-cell">
     @include('rapidez-ct::cart.partials.product.alert')
     <div class="flex flex-col items-start">
-        <a :href="item.product.url_key + item.product.url_suffix | url">
-            <div dusk="cart-item-name">@{{ item.product.name }}</div>
+        <div>
+            <a :href="item.product.url_key + item.product.url_suffix | url" dusk="cart-item-name">@{{ item.product.name }}</a>
             <div v-for="option in item.configurable_options">
                 @{{ option.option_label }}: @{{ option.value_label }}
             </div>
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
+            <div v-if="!item.is_available" class="text-ct-error text-balance bg-ct-error/5 my-2 max-w-sm p-2">
+                @lang('This product is out of stock, remove it to continue your order.')
+            </div>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>
                 </template>
             </div>
-        </a>
+        </div>
         @include('rapidez-ct::cart.partials.product.remove-button')
     </div>
 </td>

resources/views/cart/partials/product/image.blade.php

@@ -1,10 +1,10 @@
 <td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img
         v-if="item.product.image"
+        v-bind:class="{'opacity-20' : !item.is_available}"
         class="object-contain"
         :alt="item.product.name"
         :src="resizedPath(item.product.image.url + '.webp', '200')"
     />
     <x-rapidez::no-image v-else />
 </td>
-

resources/views/cart/partials/product/price.blade.php

@@ -7,7 +7,9 @@
     </div>
 </td>
 <td class="flex items-center font-medium max-md:w-1/3 md:table-cell *:mx-auto">
-    <x-rapidez-ct::input.quantity/>
+    <template v-if="item.is_available">
+        <x-rapidez-ct::input.quantity/>
+    </template>
 </td>
 <td class="flex items-center justify-end text-right font-medium max-md:w-1/3 md:table-cell">
     @{{ item.prices.row_total_including_tax.value | price }}

resources/views/cart/partials/product/remove-button.blade.php

@@ -1,12 +1,17 @@
 <graphql-mutation
+    v-slot="{ mutate }"
     :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id })  { ...cart } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, cart_item_id: item.id }"
-    :notify="{ message: item.product.name+' '+config.translations.cart.remove }"
+    :notify="{ message: item.product.name + ' ' + config.translations.cart.remove }"
     :callback="updateCart"
     :error-callback="checkResponseForExpiredCart"
-    v-slot="{ mutate }"
 >
-    <button v-on:click="mutate" class="text-ct-inactive mt-1 text-xs hover:underline" :dusk="'item-delete-' + index">
+    <button
+        v-on:click="mutate"
+        class="text-ct-inactive mt-1 text-xs hover:underline"
+        v-bind:class="{'!text-ct-error !underline' : !item.is_available}"
+        :dusk="'item-delete-' + index"
+    >
         @lang('Remove')
     </button>
 </graphql-mutation>