[3.x] Add button to remove out of stock products

resources/js/components/RemoveMultipleFromCart.vue

@@ -0,0 +1,28 @@
+<script>
+import { cart } from 'Vendor/rapidez/core/resources/js/stores/useCart.js'
+import { mask } from 'Vendor/rapidez/core/resources/js/stores/useMask.js'
+export default {
+    render() {
+        return this.$scopedSlots.default(this)
+    },
+    methods: {
+        async remove() {
+            await Promise.all(this.outOfStockItems.map(async (item) => {
+                let response = await window.magentoGraphQL(
+                    `mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { cart { ...cart } } } ` + config.fragments.cart,
+                    {
+                        cart_id: mask.value,
+                        cart_item_id: item.id,
+                    },
+                )
+                this.updateCart({}, response)
+            }))
+        }
+    },
+    computed: {
+        outOfStockItems() {
+            return cart.value.items.filter((item) => !this.$root.canOrderCartItem(item))
+        }
+    }
+}
+</script>

resources/js/package.js

@@ -1,3 +1,4 @@
 Vue.component('checkout-address', () => import('./components/CheckoutAddress.vue'))
 Vue.component('checkout-success-addresses', () => import('./components/CheckoutSuccessAddresses.vue'))
-Vue.component('address-card', () => import('./components/AddressCard.vue'))
+Vue.component('address-card', () => import('./components/AddressCard.vue'))
+Vue.component('remove-multiple-from-cart', () => import('./components/RemoveMultipleFromCart.vue'))

resources/views/cart/overview.blade.php

@@ -5,10 +5,11 @@
 @section('robots', 'NOINDEX,NOFOLLOW')
 
 @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" 
+    <graphql
+        v-if="mask"
+        :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/sidebar/summary.blade.php

@@ -29,17 +29,27 @@
             <dd>@{{ cart.prices.grand_total.value | price }}</dd>
         </div>
     </x-rapidez-ct::separated-listing>
-    <div class="w-full" :class="{ 'cursor-not-allowed': !canOrder }">
+    <div class="w-full">
         <x-rapidez-ct::button.enhanced 
             :href="route('checkout')" 
             class="flex w-full items-center justify-center gap-1 mt-6" 
             v-bind:class="{ 'pointer-events-none': !canOrder }"
             dusk="checkout"
+            v-if="canOrder"
         >
             @lang('To checkout')
             <x-heroicon-o-arrow-right class="h-4" />
         </x-rapidez-ct::button.enhanced>
-    </div>
+        <remove-multiple-from-cart v-slot="{ remove }" v-else>
+            <x-rapidez-ct::button.accent
+                @click="remove"
+                class="flex w-full items-center justify-center gap-1 mt-6" 
+                dusk="remove-out-of-stock-items"
+            >
+                @lang('Remove items from cart')
+            </x-rapidez-ct::button.accent>
+        </remove-multiple-from-cart>
+    </div>    
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
         <x-heroicon-o-check class="h-5 text-ct-accent" />
         @lang('Ordered within 2 minutes')