Merge improve frontend in master

.gitignore

@@ -5,3 +5,4 @@
 composer.lock
 phpunit.dusk.xml
 phpunit.xml
+stats.html

composer.json

@@ -17,7 +17,7 @@
     "prefer-stable": true,
     "require": {
         "php": "^8.0.2|^8.1",
-        "blade-ui-kit/blade-heroicons": "^1.3",
+        "blade-ui-kit/blade-heroicons": "^2.0",
         "cviebrock/laravel-elasticsearch": "^9.0|^10.0",
         "illuminate/database": "^9.0|^10.0",
         "illuminate/events": "^9.0|^10.0",

config/rapidez.php

@@ -144,7 +144,6 @@
         'notification'     => 'z-20',
         'slideover'        => 'z-50',
     ],
-
     // From Magento only "Yes/No, Dropdown, Multiple Select and Price" attribute types
     // can be configured as filter. If you'd like to have a filter for an attribute
     // with, for example, the type of "Text", you can specify the attribute code here.

resources/css/app.css

@@ -1,4 +1,5 @@
 @import 'components/vue-slider';
+@import './theme-variables.css';
 
 @tailwind base;
 @tailwind components;

resources/css/theme-variables.css

@@ -0,0 +1,10 @@
+:root {
+    --primary: 47 188 133;
+    --primary-text: 255 255 255;
+    --secondary: 249 115 22;
+    --secondary-text: 255 255 255;
+    --neutral: 51 65 85;
+    --inactive: 100 116 139;
+    --highlight: 241 245 249;
+    --border: 241 245 249;
+}

resources/views/cart/coupon.blade.php

@@ -23,7 +23,7 @@
                 <div class="relative rounded-md" v-if="cart.discount_name && cart.discount_amount < 0">
                     <div class="flex items-center">
                         <button v-on:click="removeCoupon">
-                            <x-heroicon-s-x class="h-4 w-4 text-black-400"/>
+                            <x-heroicon-s-x-mark class="h-4 w-4 text-black-400"/>
                         </button>
                         @lang('Discount'): @{{ cart.discount_name }}
                     </div>

resources/views/cart/overview.blade.php

@@ -5,93 +5,111 @@
 @section('robots', 'NOINDEX,NOFOLLOW')
 
 @section('content')
-    <h1 class="font-bold text-4xl mb-5">@lang('Cart')</h1>
-
-    <cart v-cloak>
-        <div v-if="hasItems" slot-scope="{ cart, hasItems, changeQty, remove }">
-            <div class="flex flex-wrap items-center border-b pb-2 mb-2" v-for="(item, itemId, index) in cart.items">
-                <div class="w-1/6 sm:w-1/12 pr-3">
-                    <a :href="item.url | url" class="block">
-                        <picture>
-                            <source :srcset="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + item.image + '.webp'" type="image/webp">
-                            <img
-                                :alt="item.name"
-                                :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + item.image"
-                                height="100"
-                                class="mx-auto"
-                            />
-                        </picture>
-                    </a>
-                </div>
-                <div class="w-5/6 sm:w-5/12 lg:w-8/12">
-                    <a :href="item.url | url" dusk="cart-item-name" class="font-bold">@{{ item.name }}</a>
-                    <div v-for="(optionValue, option) in item.options">
-                        @{{ option }}: @{{ optionValue }}
+    <div class="container">
+        <h1 class="mb-5 text-4xl font-bold">@lang('Cart')</h1>
+        <cart v-cloak>
+            <div v-if="hasItems" slot-scope="{ cart, hasItems, changeQty, remove }">
+                <div class="flex flex-col gap-x-6 lg:flex-row">
+                    <div class="flex w-full flex-col">
+                        <div class="mb-4 flex flex-wrap items-center border-b pb-2" v-for="(item, itemId, index) in cart.items">
+                            <div class="w-1/6 pr-3 sm:w-1/12">
+                                <a class="block":href="item.url | url">
+                                    <img
+                                        class="mx-auto"
+                                        :alt="item.name"
+                                        :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + item.image + '.webp'"
+                                        height="100"
+                                    />
+                                </a>
+                            </div>
+                            <div class="w-5/6 sm:w-5/12 xl:w-6/12">
+                                <a
+                                    class="font-bold"
+                                    :href="item.url | url"
+                                    dusk="cart-item-name"
+                                >@{{ item.name }}</a>
+                                <div v-for="(optionValue, option) in item.options">
+                                    @{{ option }}: @{{ optionValue }}
+                                </div>
+                                <div v-for="option in cart.items2.find((item) => item.item_id == itemId).options.filter((option) => !['info_buyRequest', 'option_ids'].includes(option.code) && option.label)">
+                                    @{{ option.label }}: @{{ option.value.title || option.value }}
+                                </div>
+                            </div>
+                            <div class="w-2/6 pr-5 text-right sm:w-1/6 xl:w-2/12">
+                                @{{ item.price | price }}
+                            </div>
+                            <div class="w-2/6 sm:w-1/6 xl:w-1/12">
+                                <div class="inline-flex lg:w-3/4 xl:w-full">
+                                    <x-rapidez::input
+                                        class="text-right"
+                                        name="qty"
+                                        type="number"
+                                        :label="false"
+                                        v-model="item.qty"
+                                        v-bind:dusk="'qty-'+index"
+                                        ::min="item.min_sale_qty > item.qty_increments ? item.min_sale_qty : item.qty_increments"
+                                        ::step="item.qty_increments"
+                                    />
+                                    <x-rapidez::button
+                                        class="ml-1"
+                                        :title="__('Update')"
+                                        v-on:click="changeQty(item)"
+                                        v-bind:dusk="'item-update-'+index"
+                                    >
+                                        <x-heroicon-s-arrow-path class="h-4 w-4" />
+                                    </x-rapidez::button>
+                                </div>
+                            </div>
+                            <div class="flex w-2/6 items-center justify-end text-right sm:w-1/6 xl:w-2/12">
+                                @{{ item.total | price }}
+                                <button
+                                    class="ml-2 cursor-pointer"
+                                    title="@lang('Remove')"
+                                    v-on:click="remove(item)"
+                                    v-bind:dusk="'item-delete-' + index"
+                                >
+                                    <x-heroicon-s-x-mark class="h-4 w-4" />
+                                </button>
+                            </div>
+                        </div>
+                        <div class="w-full md:w-auto">
+                            @include('rapidez::cart.coupon')
+                        </div>
                     </div>
-                    <div v-for="option in cart.items2.find((item) => item.item_id == itemId).options.filter((option) => !['info_buyRequest', 'option_ids'].includes(option.code) && option.label)">
-                        @{{ option.label }}: @{{ option.value.title || option.value }}
-                    </div>
-                </div>
-                <div class="w-2/6 sm:w-1/6 lg:w-1/12 text-right pr-5">
-                    @{{ item.price | price }}
-                </div>
-                <div class="w-2/6 sm:w-1/6 lg:w-1/12">
-                    <div class="inline-flex">
-                        <x-rapidez::input
-                            :label="false"
-                            class="text-right"
-                            type="number"
-                            name="qty"
-                            v-model="item.qty"
-                            v-bind:dusk="'qty-'+index"
-                            ::min="item.min_sale_qty > item.qty_increments ? item.min_sale_qty : item.qty_increments"
-                            ::step="item.qty_increments"
-                        />
-                        <x-rapidez::button
-                            class="ml-1"
-                            :title="__('Update')"
-                            v-on:click="changeQty(item)"
-                            v-bind:dusk="'item-update-'+index"
-                        >
-                            <x-heroicon-s-refresh class="w-4 h-4"/>
-                        </x-rapidez::button>
-                    </div>
-                </div>
-                <div class="w-2/6 sm:w-1/6 lg:w-1/12 flex justify-end items-center text-right">
-                    @{{ item.total | price }}
-                    <a href="#" @click.prevent="remove(item)" class="ml-2" title="@lang('Remove')" :dusk="'item-delete-'+index">
-                        <x-heroicon-s-x class="w-4 h-4"/>
-                    </a>
-                </div>
-            </div>
 
-            <div class="sm:flex sm:justify-between sm:items-start mt-5">
-                @include('rapidez::cart.coupon')
-                <div class="flex flex-wrap justify-end sm:w-64">
-                    <div class="flex flex-wrap w-full p-3 mb-5 bg-secondary rounded-lg">
-                        <div class="w-1/2">@lang('Subtotal')</div>
-                        <div class="w-1/2 text-right">@{{ cart.subtotal | price }}</div>
-                        <div class="w-1/2" v-if="cart.tax > 0">@lang('Tax')</div>
-                        <div class="w-1/2 text-right" v-if="cart.tax > 0">@{{ cart.tax | price }}</div>
-                        <div class="w-1/2" v-if="cart.shipping_amount > 0">@lang('Shipping')<br><small>@{{ cart.shipping_description }}</small></div>
-                        <div class="w-1/2 text-right" v-if="cart.shipping_amount > 0">@{{ cart.shipping_amount | price }}</div>
-                        <div class="w-1/2" v-if="cart.discount_name && cart.discount_amount < 0">@lang('Discount'): @{{ cart.discount_name }}</div>
-                        <div class="w-1/2" v-if="!cart.discount_name && cart.discount_amount < 0">@lang('Discount')</div>
-                        <div class="w-1/2 text-right" v-if="cart.discount_amount < 0">@{{ cart.discount_amount | price }}</div>
-                        <div class="w-1/2 font-bold">@lang('Total')</div>
-                        <div class="w-1/2 text-right font-bold">@{{ cart.total | price }}</div>
+                    <div class="flex flex-wrap items-start justify-between">
+                        <div class="flex w-full md:w-auto">
+                            <div class="flex w-full flex-wrap justify-end self-baseline lg:w-64">
+                                <dl class="mb-5 flex w-full flex-wrap rounded-lg border p-3 [&>dd:nth-last-of-type(-n+2)]:border-none [&>dd]:w-1/2 [&>dd]:border-b [&>dd]:py-3">
+                                    <dd>@lang('Subtotal')</dd>
+                                    <dd class="text-right">@{{ cart.subtotal | price }}</dd>
+                                    <dd v-if="cart.tax > 0">@lang('Tax')</dd>
+                                    <dd class="text-right" v-if="cart.tax > 0">@{{ cart.tax | price }}</dd>
+                                    <dd v-if="cart.shipping_amount > 0">@lang('Shipping')<br><small>@{{ cart.shipping_description }}</small></dd>
+                                    <dd class="text-right" v-if="cart.shipping_amount > 0">@{{ cart.shipping_amount | price }}</dd>
+                                    <dd v-if="cart.discount_name && cart.discount_amount < 0">@lang('Discount'): @{{ cart.discount_name }}</dd>
+                                    <dd v-if="!cart.discount_name && cart.discount_amount < 0">@lang('Discount')</dd>
+                                    <dd class="text-right" v-if="cart.discount_amount < 0">@{{ cart.discount_amount | price }}</dd>
+                                    <dd class="font-bold">@lang('Total')</dd>
+                                    <dd class="text-right font-bold">@{{ cart.total | price }}</dd>
+                                </dl>
+                                <x-rapidez::button href="{{ route('checkout') }}" dusk="checkout">
+                                    @lang('Checkout')
+                                </x-rapidez::button>
+                            </div>
+                        </div>
                     </div>
-
-                    <x-rapidez::button href="{{ route('checkout') }}" dusk="checkout">
-                        @lang('Checkout')
-                    </x-rapidez::button>
                 </div>
-            </div>
 
-            <x-rapidez::productlist title="More choices to go with your product" field="id" value="cart.cross_sells"/>
-        </div>
-        <div v-else>
-            @lang('You don\'t have anything in your cart.')
-        </div>
-    </cart>
+                <x-rapidez::productlist
+                    value="cart.cross_sells"
+                    title="More choices to go with your product"
+                    field="id"
+                />
+            </div>
+            <div v-else>
+                @lang('You don\'t have anything in your cart.')
+            </div>
+        </cart>
+    </div>
 @endsection

resources/views/category/overview.blade.php

@@ -5,24 +5,25 @@
 @include('rapidez::layouts.partials.head.hreflang', ['alternates' => $category->alternates])
 
 @section('content')
-    @include('rapidez::category.partials.breadcrumbs')
+    <div class="container">
+        @include('rapidez::category.partials.breadcrumbs')
+        <h1 class="mb-5 text-3xl font-bold">{{ $category->name }}</h1>
 
-    <h1 class="font-bold text-3xl mb-5">{{ $category->name }}</h1>
-
-    @if($category->is_anchor)
-        <x-rapidez::listing query="{ bool: { must: [{ terms: { visibility: [2, 4] } }, { terms: { category_ids: [config.category.entity_id] } }] } }"/>
-    @else
-        <div class="flex flex-col md:flex-row">
-            <div class="md:w-1/5">
-                @widget('sidebar.main', 'anchor_categories', 'catalog_category_view_type_layered', $category->entity_id)
-            </div>
-            <div class="md:w-4/5">
-                @widget('content.top', 'anchor_categories', 'catalog_category_view_type_layered', $category->entity_id)
+        @if ($category->is_anchor)
+            <x-rapidez::listing query="{ bool: { must: [{ terms: { visibility: [2, 4] } }, { terms: { category_ids: [config.category.entity_id] } }] } }" />
+        @else
+            <div class="flex max-md:flex-col">
+                <div class="xl:w-1/5">
+                    @widget('sidebar.main', 'anchor_categories', 'catalog_category_view_type_layered', $category->entity_id)
+                </div>
+                <div class="xl:w-4/5">
+                    @widget('content.top', 'anchor_categories', 'catalog_category_view_type_layered', $category->entity_id)
+                </div>
             </div>
-        </div>
-    @endif
+        @endif
 
-    <div class="prose prose-green max-w-none">
-        {!! $category->description !!}
+        <div class="prose prose-green max-w-none">
+            {!! $category->description !!}
+        </div>
     </div>
 @endsection

resources/views/checkout/overview.blade.php

@@ -5,16 +5,18 @@
 @section('robots', 'NOINDEX,NOFOLLOW')
 
 @section('content')
-    <div class="container mx-auto">
+    <div class="container">
         <checkout v-cloak v-slot="{ checkout, cart, hasItems, save, goToStep }">
             <div>
-                @include('rapidez::checkout.partials.progressbar')
+                <template v-if="checkout.step !== 4">
+                    @include('rapidez::checkout.partials.progressbar')
+                </template>
                 <div v-if="checkout.step == 1 && hasItems">
                     @include('rapidez::checkout.steps.login')
                 </div>
 
-                <div v-if="[2, 3].includes(checkout.step)" class="md:flex -mx-2">
-                    <div class="w-full mb-5 md:w-2/3 lg:w-3/4 px-2">
+                <div v-if="[2, 3].includes(checkout.step)" class="-mx-2 lg:flex">
+                    <div class="mb-5 w-full px-2 lg:w-3/4">
                         <div v-if="checkout.step == 2">
                             @include('rapidez::checkout.steps.credentials')
                         </div>
@@ -23,7 +25,7 @@
                             @include('rapidez::checkout.steps.payment')
                         </div>
                     </div>
-                    <div class="md:w-1/3 lg:w-1/4 px-2 md:mt-20">
+                    <div class="w-full px-2 lg:mt-16 lg:w-1/4">
                         @include('rapidez::checkout.partials.sidebar')
                     </div>
                 </div>