[3.x] Changed breakpoints | Frontend fixes checkout

resources/views/account/partials/address-cards.blade.php

@@ -1,7 +1,7 @@
 <x-rapidez-ct::title.lg>
     @lang('My addresses')
 </x-rapidez-ct::title.lg>
-<div class="grid gap-5 sm:grid-cols-2 my-5">
+<div class="grid gap-5 md:grid-cols-2 my-5">
     <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
         <template v-if="data.customer.shipping_address || data.customer.billing_address">
             <x-rapidez-ct::card.address v-bind:address="data.customer.shipping_address ?? data.customer.billing_address" shipping billing check>
@@ -10,7 +10,7 @@
                 </x-rapidez-ct::button.link>
             </x-rapidez-ct::card.address>
         </template>
-        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-sm:hidden">
+        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
             <span>+</span>
             <span>@lang('Add new address')</span>
         </a>
@@ -28,7 +28,7 @@
         </x-rapidez-ct::card.address>
     </template>
 </div>
-<div class="flex gap-5">
+<div class="flex flex-wrap gap-3">
     <x-rapidez-ct::button.accent :href="route('account.address.create')">
         @lang('Add a new address')
     </x-rapidez-ct::button.accent>

resources/views/account/partials/register-account.blade.php

@@ -10,8 +10,8 @@
     <graphql-mutation
         query="@include('rapidez-ct::account.partials.queries.register-account')"
         redirect="{{ route('account.overview') }}"
-        :callback="async (variables, response) => { 
-            await registerCallback(variables, response); 
+        :callback="async (variables, response) => {
+            await registerCallback(variables, response);
             @if(config('rapidez.checkout-theme.register.create-address'))
                 await createAddress();
             @endif
@@ -24,9 +24,9 @@
                 <x-rapidez-ct::title.lg class="mb-5">
                     @lang('Register account')
                 </x-rapidez-ct::title.lg>
-                <form 
-                    id="register" 
-                    class="grid gap-5 sm:grid-cols-2"
+                <form
+                    id="register"
+                    class="grid gap-5 md:grid-cols-2"
                     @if(config('rapidez.checkout-theme.register.create-address'))
                         v-on:submit.prevent="window.document.getElementById('register-address').reportValidity() && mutate()"
                     @else

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

@@ -1,4 +1,4 @@
-<td class="h-24 w-40 !pl-0 max-md:flex max-md:w-1/2">
+<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'">
     <x-rapidez::no-image v-else />
 </td>

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

@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="container">
-        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+        <x-rapidez-ct::layout class="mt-8 sm:mt-14" v-cloak>
             <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Credentials')
             </x-rapidez-ct::title-progress-bar>

resources/views/checkout/partials/address-card.blade.php

@@ -1,56 +1,52 @@
-<div class="grid gap-5 lg:grid-cols-2">
+<graphql-mutation
+    :query="config.queries.setExistingShippingAddressesOnCart"
+    :variables="{
+        cart_id: mask,
+        customer_address_id: cart.shipping_addresses[0]?.customer_address_id,
+    }"
+    :callback="updateCart"
+    :error-callback="checkResponseForExpiredCart"
+    mutate-event="setShippingAddressesOnCart"
+    v-slot="setShippingAddress"
+>
     <graphql-mutation
-        :query="config.queries.setExistingShippingAddressesOnCart"
+        :query="config.queries.setExistingBillingAddressOnCart"
         :variables="{
             cart_id: mask,
-            customer_address_id: cart.shipping_addresses[0]?.customer_address_id,
+            customer_address_id: cart.billing_address?.customer_address_id,
         }"
         :callback="updateCart"
         :error-callback="checkResponseForExpiredCart"
-        mutate-event="setShippingAddressesOnCart"
-        v-slot="setShippingAddress"
+        mutate-event="setBillingAddressOnCart"
+        v-slot="setBillingAddress"
     >
-        <div>
-            <graphql-mutation
-                :query="config.queries.setExistingBillingAddressOnCart"
-                :variables="{
-                    cart_id: mask,
-                    customer_address_id: cart.billing_address?.customer_address_id,
-                }"
-                :callback="updateCart"
-                :error-callback="checkResponseForExpiredCart"
-                mutate-event="setBillingAddressOnCart"
-                v-slot="setBillingAddress"
-            >
-                <div>
-                    <template v-for="userAddress in $root.user.addresses">
-                        <x-rapidez-ct::card.address
-                            v-bind:key="userAddress.id"
-                            v-bind:address="userAddress"
-                            v-bind:billing="setBillingAddress.variables.customer_address_id === userAddress.id"
-                            v-bind:shipping="setShippingAddress.variables.customer_address_id === userAddress.id"
-                            v-bind:check="setBillingAddress.variables.customer_address_id === userAddress.id || setShippingAddress.variables.customer_address_id === userAddress.id"
-                            class="w-full sm:min-w-[350px]"
+        <div class="grid gap-5 lg:grid-cols-2">
+            <template v-for="userAddress in $root.user.addresses">
+                <x-rapidez-ct::card.address
+                    v-bind:key="userAddress.id"
+                    v-bind:address="userAddress"
+                    v-bind:billing="setBillingAddress.variables.customer_address_id === userAddress.id"
+                    v-bind:shipping="setShippingAddress.variables.customer_address_id === userAddress.id"
+                    v-bind:check="setBillingAddress.variables.customer_address_id === userAddress.id || setShippingAddress.variables.customer_address_id === userAddress.id"
+                    class="w-full sm:min-w-[350px]"
+                >
+                        <x-rapidez-ct::button.link
+                            v-if="!cart.is_virtual && setShippingAddress.variables.customer_address_id !== userAddress.id"
+                            v-on:click.prevent="() => window.app.$set(setShippingAddress.variables, 'customer_address_id', userAddress.id) && setShippingAddress.mutate()"
+                            v-bind:class="{'blur pointer-events-none': setShippingAddress.mutating}"
                         >
-                                <x-rapidez-ct::button.link 
-                                    v-if="!cart.is_virtual && setShippingAddress.variables.customer_address_id !== userAddress.id" 
-                                    v-on:click.prevent="() => window.app.$set(setShippingAddress.variables, 'customer_address_id', userAddress.id) && setShippingAddress.mutate()"
-                                    v-bind:class="{'blur pointer-events-none': setShippingAddress.mutating}"
-                                >
-                                    @lang('Select as shipping')
-                                </x-rapidez-ct::button.link>
+                            @lang('Select as shipping')
+                        </x-rapidez-ct::button.link>
 
-                                <x-rapidez-ct::button.link 
-                                    v-if="setBillingAddress.variables.customer_address_id !== userAddress.id" 
-                                    v-on:click.prevent="() => window.app.$set(setBillingAddress.variables, 'customer_address_id', userAddress.id) && setBillingAddress.mutate()"
-                                    v-bind:class="{'blur pointer-events-none': setBillingAddress.mutating}"
-                                >
-                                    @lang('Select as billing')
-                                </x-rapidez-ct::button.link>
-                        </x-rapidez-ct::card.address>
-                    </template>
-                </div>
-            </graphql-mutation>
+                        <x-rapidez-ct::button.link
+                            v-if="setBillingAddress.variables.customer_address_id !== userAddress.id"
+                            v-on:click.prevent="() => window.app.$set(setBillingAddress.variables, 'customer_address_id', userAddress.id) && setBillingAddress.mutate()"
+                            v-bind:class="{'blur pointer-events-none': setBillingAddress.mutating}"
+                        >
+                            @lang('Select as billing')
+                        </x-rapidez-ct::button.link>
+                </x-rapidez-ct::card.address>
+            </template>
         </div>
     </graphql-mutation>
-</div>
+</graphql-mutation>

resources/views/checkout/partials/address-cards.blade.php

@@ -1,4 +1,4 @@
-<div class="grid gap-5 sm:grid-cols-2">
+<div class="grid gap-5 md:grid-cols-2">
     <template v-if="cart.billing_address?.same_as_shipping">
         <x-rapidez-ct::card.address v-bind:address="cart.shipping_addresses[0]" shipping billing check>
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">

resources/views/checkout/partials/buttons/address.blade.php

@@ -1,4 +1,4 @@
-<div class="mt-5">
+<div class="flex flex-wrap gap-3 mt-5">
     <x-rapidez-ct::button.accent v-on:click.prevent="toggleEdit">
         @lang('Use a new address')
     </x-rapidez-ct::button.accent>

resources/views/checkout/partials/buttons/new-address.blade.php

@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-sm:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>

resources/views/checkout/partials/sections/login.blade.php

@@ -1,12 +1,12 @@
 <login v-slot="{ email, password, go, loginInputChange, emailAvailable, logout }">
     <x-rapidez-ct::card.inactive>
-        <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
-            <template v-if="!loggedIn">
-                @include('rapidez-ct::checkout.partials.sections.login.logged-out')
-            </template>
-            <template v-else>
+        <template v-if="!loggedIn">
+            @include('rapidez-ct::checkout.partials.sections.login.logged-out')
+        </template>
+        <template v-else>
+            <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
                 @include('rapidez-ct::checkout.partials.sections.login.logged-in')
-            </template>
-        </div>
+            </div>
+        </template>
     </x-rapidez-ct::card.inactive>
 </login>

resources/views/checkout/partials/sections/login/logged-out.blade.php

@@ -1,5 +1,5 @@
 <checkout-login v-slot="checkoutLogin">
-    <fieldset data-function="go" class="flex flex-col gap-3">
+    <fieldset data-function="go" class="grid gap-4 md:gap-5 md:grid-cols-2">
         <x-rapidez-ct::input
             label="Email"
             name="email"
@@ -10,11 +10,15 @@ class="justify-center"
             required
             :placeholder="__('Enter your e-mail address')"
         />
+
+        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
+            @lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
+        </p>
+
         <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
-            <x-rapidez-ct::input
+            <x-rapidez-ct::input.password
                 label="Password"
                 name="password"
-                type="password"
                 v-model="checkoutLogin.password"
                 required
             />
@@ -29,10 +33,9 @@ class="justify-center"
             </a>
         @endif
         <template v-if="!loggedIn && checkoutLogin.createAccount">
-            <x-rapidez-ct::input
+            <x-rapidez-ct::input.password
                 label="Repeat password"
                 name="password_repeat"
-                type="password"
                 v-model="checkoutLogin.password_repeat"
                 required
             />
@@ -51,16 +54,15 @@ class="justify-center"
                 required
             />
         </template>
+
         <template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
-            <x-rapidez::checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
-                @lang('Create an account')
-            </x-rapidez::checkbox>
+            <div class="col-span-full">
+                <x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account" class="">
+                    @lang('Create an account')
+                </x-rapidez-ct::input.checkbox>
+            </div>
         </template>
 
-        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
-            @lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
-        </p>
-
         <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
             @lang('Register')
         </x-rapidez-ct::button.accent>

resources/views/checkout/partials/sidebar/summary.blade.php

@@ -1,5 +1,5 @@
 <x-rapidez-ct::card class="relative">
-    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-md:hidden [&>*]:h-auto [&>*]:max-h-20 [&>*]:w-full [&>*]:object-contain">
+    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-lg:hidden [&>*]:h-auto [&>*]:max-h-20 [&>*]:w-full [&>*]:object-contain">
         <x-rapidez-ct::logo />
     </a>
     <x-rapidez-ct::title.lg class="mb-4">

resources/views/components/address-form.blade.php

@@ -1,6 +1,6 @@
 @props(['type' => 'shipping', 'address' => 'variables', 'countryKey' => 'country_code'])
 
-<div class="grid gap-4 sm:gap-5 sm:grid-cols-4">
+<div class="grid gap-4 md:gap-5 md:grid-cols-4">
     @if (Rapidez::config('customer/address/company_show', 0) || Rapidez::config('customer/address/taxvat_show', 0))
         @if (Rapidez::config('customer/address/company_show', 0))
             <x-rapidez-ct::input

resources/views/components/card/index.blade.php

@@ -1,4 +1,4 @@
-<div {{ $attributes->class('flex bg-ct-inactive-100 p-3 rounded md:w-[370px]') }}>
+<div {{ $attributes->class('flex bg-ct-inactive-100 p-3 rounded lg:w-[340px] xl:w-[370px]') }}>
     <x-rapidez-ct::card.white>
         {{ $slot }}
     </x-rapidez-ct::card.white>

resources/views/components/input/checkbox.blade.php

@@ -8,6 +8,6 @@ class="text-ct-accent peer h-6 w-6 cursor-pointer rounded border-ct-border trans
         {{ $attributes->except('class') }}
     />
     @isset($slot)
-        <span {{ $slot->attributes ?? '' }}>{{ $slot }}</span>
+        <span {{ $slot->attributes->class('mt-0.5') ?? '' }}>{{ $slot }}</span>
     @endisset
 </label>

resources/views/components/input/password.blade.php

@@ -5,7 +5,6 @@
                 class="[&>input]:pr-12"
                 type="password"
                 v-bind:type="isOpen ? 'text' : 'password'"
-                label="Password"
                 {{ $attributes }}
             />
             @if (!$attributes['disabled'] ?? false)

resources/views/components/layout/index.blade.php

@@ -1,4 +1,4 @@
-<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-md:flex-col') }}>
+<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-lg:flex-col') }}>
     <div class="flex-1">
         {{ $slot }}
     </div>

resources/views/components/layout/sidebar.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->class('mt-10 space-y-5 md:mt-[52px] md:w-[370px]') }}>
+<div {{ $attributes->class('mt-10 space-y-5 lg:mt-[52px] lg:w-[340px] xl:w-[370px]') }}>
     {{ $slot }}
 </div>

resources/views/components/layout/two-column.blade.php

@@ -1,6 +1,6 @@
 <div {{ $attributes->class('flex flex-col mx-auto max-w-4xl w-full') }}>
     {{ $slot }}
-    <div class="mt-5 grid content-center items-start gap-8 sm:grid-cols-2">
+    <div class="mt-5 grid content-center items-start gap-8 lg:grid-cols-2">
         {{ $columns }}
     </div>
 </div>

resources/views/components/title/base.blade.php

@@ -1,7 +1,7 @@
 @props(['tag' => ($isAnchor = $attributes->filter(null)->hasAny('href', ':href', 'v-bind:href')) ? 'a' : 'p'])
 <x-tag is="{{ $tag }}" {{ $attributes->class('font-medium relative group') }}>
     @if ($isAnchor)
-        <x-heroicon-o-arrow-left class="lg:absolute max-lg:mb-5 left-0 top-1/2 h-4 lg:-translate-x-full lg:-translate-y-1/2 lg:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
+        <x-heroicon-o-arrow-left class="xl:absolute max-xl:mb-5 left-0 top-1/2 h-4 xl:-translate-x-full xl:-translate-y-1/2 xl:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
     @endif
     {{ $slot }}
 </x-tag>