[3] Enhance out of stock message

lang/nl.json

@@ -10,7 +10,7 @@
     "Address created successfully": "Adres succesvol aangemaakt",
     "Address data": "Adresgegevens",
     "Already logged in": "Al ingelogd",
-    "Amount": "Bedrag",
+    "Amount": "Aantal",
     "An email is send with a password reset link if an account exists with the provided email address.": "Een e-mail is verzonden met een link om het wachtwoord te resetten, als er een account bestaat met het opgegeven e-mailadres.",
     "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
     "Back to account": "Terug naar account",
@@ -72,6 +72,7 @@
     "Select an address": "Selecteer een adres",
     "Select as billing": "Selecteer als factuuradres",
     "Select as shipping": "Selecteer als verzendadres",
+    "This product is out of stock":"Dit product is op dit moment niet op voorraad",
     "Send": "Versturen",
     "Step :step out of :total": "Stap :step van :total",
     "Subscribe to newsletter": "Inschrijven voor nieuwsbrief",

resources/views/cart/overview.blade.php

@@ -6,9 +6,9 @@
 
 @section('content')
     <graphql v-if="mask"
-        :query="'query getCart($cart_id: String!) { cart (cart_id: $cart_id) { ' + config.queries.cart + ' } }'"
-        :variables="{ cart_id: mask }" 
-        :callback="updateCart" 
+        :query="'query getCart($cart_id: String!) { cart (cart_id: $cart_id) { ...cart } } ' + config.fragments.cart"
+        :variables="{ cart_id: mask }"
+        :callback="updateCart"
         :error-callback="checkResponseForExpiredCart"
     >
     </graphql>

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

@@ -1,23 +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 class="text-red-600" v-if="!canOrderCartItem(item)">
+            <div v-if="!canOrderCartItem(item)" 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,5 +1,10 @@
 <td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
-    <img v-if="item.product.image" class="object-contain" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
+    <img
+        v-if="item.product.image"
+        v-bind:class="{'opacity-20' : !canOrderCartItem(item)}"
+        class="object-contain"
+        :alt="item.product.name"
+        :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'"
+    >
     <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="canOrderCartItem(item)">
+        <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.queries.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' : !canOrderCartItem(item)}"
+        :dusk="'item-delete-' + index"
+    >
         @lang('Remove')
     </button>
-</graphql-mutation>
+</graphql-mutation>