Checkout agreements in the global slideover (#612)

resources/views/checkout/pages/onestep.blade.php

@@ -36,6 +36,7 @@
                         @include('rapidez::checkout.steps.payment_method')
                     </div>
                     <div>
+                        @include('rapidez::checkout.steps.agreements')
                         @include('rapidez::checkout.steps.place_order')
                     </div>
                 </form>

resources/views/checkout/steps/agreements.blade.php

@@ -1,38 +1,25 @@
-@php($checkoutAgreements ??= \Rapidez\Core\Models\CheckoutAgreement::all())
-@return(!$checkoutAgreements->count())
-
-@foreach ($checkoutAgreements as $agreement)
-    <x-rapidez::slideover position="right" id="{{ $agreement->agreement_id }}_agreement">
-        <x-slot name="title">
-            {{ $agreement->name }}
-        </x-slot>
-
-        @if ($agreement->is_html)
-            <div class="p-3">
-                {!! $agreement->content !!}
-            </div>
-        @else
-            <div class="whitespace-pre-line p-3">
-                {{ $agreement->content }}
-            </div>
-        @endif
-    </x-rapidez::slideover>
-
-    @if ($agreement->mode == 'AUTO')
-        <label class="text text-sm cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
-            {{ $agreement->checkbox_text }}
-        </label>
-    @else
-        <div>
-            <x-rapidez::input.checkbox.base
-                name="agreement_ids[]"
-                :value="$agreement->agreement_id"
-                dusk="agreements"
-                required
-            />
-            <label class="text text-sm cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
-                {{ $agreement->checkbox_text }}
-            </label>
+<graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }" cache="checkout.agreements" v-cloak>
+    <div slot-scope="{ data }" v-if="data">
+        <div v-for="agreement in data.checkoutAgreements" :key="agreement.agreement_id">
+            <global-slideover :title="agreement.name" :content="'<div class=&quot;p-3' + (!agreement.is_html ? ' whitespace-pre-line' : '') + '&quot;>' + agreement.content + '</div>'" v-slot="slideover">
+                <template v-if="agreement.mode == 'AUTO'">
+                    <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
+                        @{{ agreement.checkbox_text }}
+                    </label>
+                </template>
+                <div v-else>
+                    <x-rapidez::input.checkbox
+                        name="agreement_ids[]"
+                        v-bind:value="agreement.agreement_id"
+                        dusk="agreements"
+                        required
+                    >
+                        <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
+                            @{{ agreement.checkbox_text }}
+                        </label>
+                    </x-rapidez::input.checkbox>
+                </div>
+            </global-slideover>
         </div>
-    @endif
-@endforeach
+    </div>
+</graphql>