Validate when default address is missing (#64)

rapidez · Jan 9, 2024 · 119e42b · 119e42b
1 parent 7b04df7
commit 119e42b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/resources/views/checkout/partials/address-cards.blade.php b/resources/views/checkout/partials/address-cards.blade.php
@@ -11,15 +11,29 @@
         </button>
     </template>
     <template v-else>
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping check>
+        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
+            <x-slot:empty>
+                <label for="popup" class="flex flex-col items-center justify-center gap-y-2 font-medium rounded max-sm:hidden h-full cursor-pointer">
+                    <span>+</span>
+                    <span>@lang('Select an address')</span>
+                </label>
+                <input type="checkbox" oninvalid="this.setCustomValidity('{{ __('Please select an address') }}')" required class="absolute w-full h-full inset-0 opacity-0 pointer-events-none">
+            </x-slot>
         </x-rapidez-ct::card.address>
-        <x-rapidez-ct::card.address v-bind:address="checkout.billing_address" billing check>
+        <x-rapidez-ct::card.address v-bind:address="checkout.billing_address" billing check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
+            <x-slot:empty>
+                <label for="popup" class="flex flex-col items-center justify-center gap-y-2 font-medium rounded max-sm:hidden h-full cursor-pointer">
+                    <span>+</span>
+                    <span>@lang('Select an address')</span>
+                </label>
+                <input type="checkbox" oninvalid="this.setCustomValidity('{{ __('Please select an address') }}')" required class="absolute w-full h-full inset-0 opacity-0 pointer-events-none">
+            </x-slot>
         </x-rapidez-ct::card.address>
     </template>
 </div>

diff --git a/resources/views/components/address.blade.php b/resources/views/components/address.blade.php
@@ -6,36 +6,41 @@
     @if (!$attributes->has('v-bind:billing')) :billing="{{ var_export($billing) }}" @endif
     v-slot="{ company, name, street, city, country, billing, shipping, isEmpty, customTitle }"
 >
-    <div v-if="!isEmpty" {{ $attributes->whereDoesntStartWith('v-')->class('flex flex-col') }}>
-        @if ($check)
-            <template v-if="{{ $check }}">
-                <div class="bg-ct-accent absolute inset-y-0 left-0 w-1 rounded-l"></div>
-                <x-heroicon-s-check class="text-ct-accent absolute right-7 top-7 w-5" />
-            </template>
-        @endif
-        <x-rapidez-ct::title.lg class="mb-4 pr-8">
-            @if($customTitle)
-                @lang($customTitle)
-            @else
-                <template v-if="billing && shipping">@lang('Shipping & billing address')</template>
-                <template v-else-if="shipping">@lang('Shipping address')</template>
-                <template v-else-if="billing">@lang('Billing address')</template>
-                <template v-else>@lang('Address')</template>
+    <div {{ $attributes->whereDoesntStartWith('v-')->class('flex flex-col') }}>
+        <template v-if="!isEmpty">
+            @if ($check)
+                <template v-if="{{ $check }}">
+                    <div class="bg-ct-accent absolute inset-y-0 left-0 w-1 rounded-l"></div>
+                    <x-heroicon-s-check class="text-ct-accent absolute right-7 top-7 w-5" />
+                </template>
             @endif
-        </x-rapidez-ct::title.lg>
-        <div class="flex flex-1 flex-wrap justify-between">
-            <ul class="flex flex-col gap-1">
-                <li v-if="company">@{{ company }}</li>
-                <li v-if="name">@{{ name }}</li>
-                <li v-if="street">@{{ street }}</li>
-                <li v-if="city">@{{ city }}</li>
-                <li v-if="country">@{{ country }}</li>
-            </ul>
-            @if (!empty($slot))
-                <div class="mt-auto flex flex-col self-end">
-                    {{ $slot }}
-                </div>
-            @endif
-        </div>
+            <x-rapidez-ct::title.lg class="mb-4 pr-8">
+                @if($customTitle)
+                    @lang($customTitle)
+                @else
+                    <template v-if="billing && shipping">@lang('Shipping & billing address')</template>
+                    <template v-else-if="shipping">@lang('Shipping address')</template>
+                    <template v-else-if="billing">@lang('Billing address')</template>
+                    <template v-else>@lang('Address')</template>
+                @endif
+            </x-rapidez-ct::title.lg>
+            <div class="flex flex-1 flex-wrap justify-between">
+                <ul class="flex flex-col gap-1">
+                    <li v-if="company">@{{ company }}</li>
+                    <li v-if="name">@{{ name }}</li>
+                    <li v-if="street">@{{ street }}</li>
+                    <li v-if="city">@{{ city }}</li>
+                    <li v-if="country">@{{ country }}</li>
+                </ul>
+                @if (!empty($slot))
+                    <div class="mt-auto flex flex-col self-end">
+                        {{ $slot }}
+                    </div>
+                @endif
+            </div>
+        </template>
+        <template v-else>
+            {{ $empty ?? '' }}
+        </template>
     </div>
 </address-card>
diff --git a/resources/views/components/card/address.blade.php b/resources/views/components/card/address.blade.php
@@ -3,5 +3,8 @@
 <x-rapidez-ct::card.white {{ $attributes->only('v-if') }}>
     <x-rapidez-ct::address {{ $attributes }} :$customTitle>
         {{ $slot }}
+        <x-slot:empty>
+            {{ $empty ?? '' }}
+        </x-slot>
     </x-rapidez-ct::address>
-</x-rapidez-ct::card.white>
+</x-rapidez-ct::card.white>