Implemented Rapidez v3 colors and various tweaks (#160)

README.md

@@ -46,30 +46,7 @@ php artisan vendor:publish --provider="Rapidez\CheckoutTheme\ServiceProvider" --
 
 If you've already overwritten these by yourself before you installed this package, you will have to manually overwrite these as the publish command will not overwrite already existing files.
 
-Add these colors to your `tailwind.config.js` and modify them to your liking:
-(Alternatively, you could add these to a separate file and add it as a preset to your tailwind.config.js)
-```
-colors: {
-    ct: {
-        enhanced: {
-            DEFAULT: '#40C42A',
-        },
-        inactive: {
-            DEFAULT: '#8A8275',
-            100: '#F6F4EE',
-        },
-        disabled: '#EBE8DE',
-        accent: {
-            DEFAULT: '#FEAB05',
-        },
-        primary: {
-            DEFAULT: '#625B50',
-        },
-        border: '#EAE7DC',
-        error: '#DF241D',
-    },
-},
-```
+If you want more information about how we use color variables; Check our [https://docs.rapidez.io/3.x/theming.html#colors](Rapidez docs).
 
 This package also requires the `SKU` functionality to be enabled in the image resizer. This is normally enabled by default.
 

composer.json

@@ -20,7 +20,7 @@
         "php": "^8.0|^8.1|^8.2",
         "blade-ui-kit/blade-heroicons": "^2.0",
         "rapidez/account": "^3.0",
-        "rapidez/core": "^3.0"
+        "rapidez/core": "^3.1"
     },
     "autoload": {
         "psr-4": {

lang/nl.json

@@ -8,7 +8,8 @@
     "Address created successfully": "Adres succesvol aangemaakt",
     "Address data": "Adresgegevens",
     "Already logged in": "Al ingelogd",
-    "Amount": "Aantal",
+    "Quantity": "Aantal",
+    "Amount": "Bedrag",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
     "Back to credentials": "Terug naar inloggegevens",
@@ -22,6 +23,7 @@
     "Continue shopping": "Verder winkelen",
     "Coupon code": "Kortingscode",
     "Customer centre": "Klantenservice",
+    "Decrease quantity": "Aantal verlagen",
     "Delete address": "Adres verwijderen",
     "Delivery method": "Bezorgmethode",
     "Deselect as billing": "Deselecteer als factuuradres",
@@ -32,6 +34,8 @@
     "Enter your email address below, you will receive an email within minutes to reset the password.": "Voer hieronder uw e-mailadres in, u ontvangt binnen enkele minuten een e-mail om het wachtwoord te resetten.",
     "Everything centralized in 1 place such as returns, exchanges and customer service": "Alles gecentraliseerd op 1 plek zoals retouren, ruilingen en klantenservice",
     "Free": "Gratis",
+    "Go to step :step": "Ga naar stap :step",
+    "Increase quantity": "Aantal verhogen",
     "Is this not your account?": "Is dit niet uw account?",
     "Log out": "Uitloggen",
     "Logout from your account": "Uitloggen van uw account",
@@ -71,7 +75,7 @@
     "Vat ID": "BTW-nummer",
     "We will also check if you already have an account so you can checkout more efficiently.": "We zullen ook controleren of u al een account heeft, zodat u efficiënter kunt afrekenen.",
     "We will send a confirmation of your order :orderid to :email": "We sturen een orderbevestiging van bestelling :orderid naar :email",
-    "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.": "We sturen uw orderbevestiging naar dit e-mailadres. We zullen ook controleren of u al een account heeft om het bestelproces te versnellen.",
+    "We'll email your order confirmation and check if you have an account for faster checkout.": "Op dit e-mailadres ontvang je de orderbevestiging. Ook checken we of je al een account hebt.",
     "Welcome back": "Welkom terug",
     "Yes, I want to subscribe to the newsletter": "Ja, ik wil me inschrijven voor de nieuwsbrief",
     "You already have an account with this e-mail address. Please log in to continue.": "U heeft al een account met dit e-mailadres. Log in om verder te gaan.",

resources/core-overwrites/layouts/checkout/footer.blade.php

@@ -1,5 +1,5 @@
 <footer class="mt-auto">
-    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-ct-enhanced bg-ct-inactive-100 py-4 text-sm text-ct-inactive">
+    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-primary bg py-4 text-sm text-muted">
         @foreach (['Privacy Policy', 'Terms & Conditions'] as $link)
             <a class="hover:underline" href="#">
                 {{ $link }}

resources/core-overwrites/layouts/checkout/header.blade.php

@@ -1,16 +1,18 @@
-<div class="bg-inactive-100 text-ct-inactive relative py-3 text-xs font-semibold">
-    <slider reference="header-usp-slider" autoplay loop>
-        <div
+<div class="bg text-muted relative py-3 text-xs font-semibold">
+    <slider reference="header-usp-slider" autoplay>
+        <ul
             ref="header-usp-slider"
             class="scrollbar-hide flex snap-x snap-mandatory items-center gap-7 overflow-x-auto lg:justify-center"
             slot-scope="{ navigate, currentSlide, slidesTotal }"
+            tabindex="0"
+            aria-label="USP features"
         >
             @foreach (['Wide range of products', 'Free returns', 'All items shown are in stock', 'Free shipping'] as $usp)
-                <div class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
-                    <x-heroicon-o-check class="size-4 text-ct-enhanced stroke-2" />
+                <li class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
+                    <x-heroicon-o-check class="size-4 text-primary stroke-2" />
                     <span>{{ $usp }}</span>
-                </div>
+                </li>
             @endforeach
-        </div>
+        </ul>
     </slider>
 </div>

resources/js/components/CheckoutSuccessAddresses.vue

@@ -38,10 +38,6 @@
             billing() {
                 return this.order.billing_address
             },
-
-            pickup() {
-                return this.shipping
-            }
         }
     }
 </script>

resources/views/account/address-edit.blade.php

@@ -8,7 +8,7 @@
     <x-rapidez-ct::sections>
         <graphql
             query="{ customer { addresses { id firstname middlename lastname street city postcode country_code telephone company vat_id default_billing default_shipping } } }"
-            check="(data) => data.customer?.addresses.find(a => a.id == {{ request()->id }})"
+            :check="(data) => data.customer?.addresses.find(a => a.id == {{ request()->id }})"
             redirect="{{ route('account.edit') }}"
         >
             <div v-if="data && data?.customer?.addresses" slot-scope="{ data }">

resources/views/account/order.blade.php

@@ -4,7 +4,7 @@
 @section('title', __('Order') . ' #' . $id)
 @section('button')
     <graphql-mutation
-        query='mutation { reorderItems(orderNumber: "{{ request()->id }}") { cart { id } userInputErrors { message } } }'
+        :query='`mutation { reorderItems(orderNumber: "{{ request()->id }}") { cart { ...cart } userInputErrors { message } } } ${config.fragments.cart}`'
         redirect="{{ route('cart') }}"
         :callback="reorderCallback"
     >
@@ -19,7 +19,7 @@
 @section('account-content')
     <graphql
         query='@include('rapidez::account.partials.queries.order')'
-        check="(data) => data.customer.orders.items[0]"
+        :check="(data) => data.customer.orders.items[0]"
         :callback="async (variables, response) => {return await updateOrder(variables, {data: response.data.customer.orders.items})}"
     >
         <div slot-scope="{ order: data }" v-if="order">
@@ -33,7 +33,7 @@
                 <x-rapidez::button.outline href="/account/orders">
                     @lang('Back to my orders')
                 </x-rapidez::button.outline>
-                <span class="text-ct-inactive">
+                <span class="text-muted">
                     @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                 </span>
             </x-rapidez-ct::toolbar>

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

@@ -4,15 +4,15 @@
     </x-rapidez-ct::title.lg>
     <x-rapidez-ct::usp-list>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Track status of your order and view order history')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Quick and easy ordering without having to fill in your details every time')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Everything centralized in 1 place such as returns, exchanges and customer service')</span>
         </li>
     </x-rapidez-ct::usp-list>

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

@@ -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-md:hidden">
+        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-emphasis rounded max-md:hidden">
             <span>+</span>
             <span>@lang('Add a new address')</span>
         </a>

resources/views/account/partials/default-addresses.blade.php

@@ -5,7 +5,7 @@
         v-bind:set-billing="data.customer.billing_address = data.customer.addresses.find(e => e.default_billing)"
         v-bind:set-shipping="data.customer.shipping_address = data.customer.addresses.find(e => e.default_shipping)"
     >
-        <x-rapidez-ct::separated-listing>
+        <x-rapidez-ct::separated-listing tag="div">
             <template v-if="data.customer.addresses.length">
                 <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
                     <x-rapidez-ct::address v-bind:address="data.customer.shipping_address" shipping billing/>
@@ -23,7 +23,7 @@
             </div>
             <a href="{{ route('account.edit') }}" class="font-medium">
                 <span>@lang('Account settings')</span>
-                <x-heroicon-o-cog class="h-6 stroke-[1.5px]" />
+                <x-heroicon-o-cog class="size-6 stroke-[1.5px]" />
             </a>
         </x-rapidez-ct::separated-listing>
     </x-rapidez-ct::card>

resources/views/account/partials/forgotpassword.blade.php

@@ -22,7 +22,7 @@
             />
         </label>
         <div class="mt-5 flex items-center justify-between">
-            <a href="{{ route('account.login') }}" class="text-sm text-ct-inactive underline">
+            <a href="{{ route('account.login') }}" class="text-sm text-muted underline">
                 @lang('Back to login')
             </a>
             <x-rapidez::button.secondary
@@ -32,7 +32,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Send')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>

resources/views/account/partials/login.blade.php

@@ -18,7 +18,7 @@
             />
         </label>
         <div class="flex items-center justify-between">
-            <a href="{{ route('account.forgotpassword') }}" class="text-sm text-ct-inactive underline">
+            <a href="{{ route('account.forgotpassword') }}" class="text-sm text-muted underline">
                 @lang('Forgot your password?')
             </a>
             <x-rapidez::button.secondary
@@ -28,7 +28,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Login')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>

resources/views/account/partials/order/order-total.blade.php

@@ -1,6 +1,6 @@
 <graphql
     query='@include('rapidez::account.partials.queries.order')'
-    check="(data) => data.customer.orders.items[0]"
+    :check="(data) => data.customer.orders.items[0]"
     cache="orderdetail{{ $id }}"
 >
     <x-rapidez-ct::card v-if="data" slot-scope="{ data }">

resources/views/account/partials/order/products.blade.php

@@ -1,47 +1,49 @@
-<div class="mt-5 rounded bg-ct-inactive-100 py-4 text-sm">
-    <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
-        <div class="sm:w-[150px]"></div>
-        <div class="flex-1 sm:w-[150px]">@lang('Product')</div>
-        <div class="flex items-center justify-between gap-10 font-medium max-md:hidden max-sm:flex-1 sm:ml-auto">
-            <div class="w-[60px]">@lang('Price')</div>
-            <div class="w-16 text-center">@lang('Amount')</div>
-            <div class="w-[60px]">@lang('Subtotal')</div>
-        </div>
-    </div>
-</div>
-<ul class="flex flex-col divide-y">
-    <li class="flex py-5" v-for="item in order.items">
+<div class="mt-5">
+    <div class="rounded bg py-4 text-sm">
         <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
-            <div class="flex h-[100px] w-[150px] items-center justify-center">
-                <img
-                    class="max-h-[100px] max-w-[150px]"
-                    :alt="item.name"
-                    :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
-                    height="100"
-                    v-if="item.product_sku"
-                >
-                <x-rapidez::no-image v-else class="h-[100px] w-[150px]"/>
-            </div>
-            <div class="flex w-[150px] flex-1 flex-col items-start">
-                <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
-                <div class="text-xs text-ct-inactive">
-                    @{{ item.product_sku }}
-                </div>
-                <div v-for="(optionValue, option) in item.options">
-                    @{{ option }}: @{{ optionValue }}
-                </div>
+            <div class="sm:w-[150px]"></div>
+            <div class="flex-1 sm:w-[150px]">@lang('Product')</div>
+            <div class="flex items-center justify-between gap-10 font-medium max-md:hidden max-sm:flex-1 sm:ml-auto">
+                <div class="w-[60px]">@lang('Price')</div>
+                <div class="w-16 text-center">@lang('Quantity')</div>
+                <div class="w-[60px]">@lang('Subtotal')</div>
             </div>
-            <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
-                <div class="flex flex-col gap-px text-sm sm:w-[60px]">
-                    @{{ item.product_sale_price.value | price }}
+        </div>
+    </div>
+    <ul class="flex flex-col divide-y">
+        <li class="flex py-5" v-for="item in order.items">
+            <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
+                <div class="flex h-[100px] w-[150px] items-center justify-center">
+                    <img
+                        class="max-h-[100px] max-w-[150px]"
+                        :alt="item.product_name"
+                        :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
+                        height="100"
+                        v-if="item.product_sku"
+                    >
+                    <x-rapidez::no-image v-else class="h-[100px] w-[150px]"/>
                 </div>
-                <div class="flex h-14 w-16 items-center justify-center border text-sm">
-                    @{{ Math.round(item.quantity_ordered) }}
+                <div class="flex w-[150px] flex-1 flex-col items-start">
+                    <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
+                    <div class="text-xs text-muted">
+                        @{{ item.product_sku }}
+                    </div>
+                    <div v-for="(optionValue, option) in item.options">
+                        @{{ option }}: @{{ optionValue }}
+                    </div>
                 </div>
-                <div class="text-sm sm:w-[60px]">
-                    @{{ item.product_sale_price.value * item.quantity_ordered | price }}
+                <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
+                    <div class="flex flex-col gap-px text-sm sm:w-[60px]">
+                        @{{ item.product_sale_price.value | price }}
+                    </div>
+                    <div class="flex h-14 w-16 items-center justify-center border text-sm">
+                        @{{ Math.round(item.quantity_ordered) }}
+                    </div>
+                    <div class="text-sm sm:w-[60px]">
+                        @{{ item.product_sale_price.value * item.quantity_ordered | price }}
+                    </div>
                 </div>
             </div>
-        </div>
-    </li>
-</ul>
+        </li>
+    </ul>
+</div>

resources/views/account/partials/orders.blade.php

@@ -7,19 +7,19 @@
                         @lang('Order') #@{{ order.number }}
                     </x-rapidez-ct::title.lg>
                     <x-rapidez-ct::card.white class="mt-5 flex flex-wrap items-center gap-x-3 md:gap-x-8">
-                        <x-heroicon-s-shopping-cart class="h-5 text-ct-inactive" />
+                        <x-heroicon-s-shopping-cart class="size-5 text-muted" />
                         <div class="flex flex-col">
                             <span class="font-medium">
                                 @lang('Number of products')
                                 (@{{ order.items.length }})
                             </span>
-                            <span class="text-ct-inactive">
+                            <span class="text-muted">
                                 @lang('Total price'): @{{ order.total.grand_total.value | price }}
                                 /
                                 @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                             </span>
                         </div>
-                        <x-heroicon-o-chevron-right class="ml-auto h-4 max-sm:hidden" />
+                        <x-heroicon-o-chevron-right class="ml-auto size-4 max-sm:hidden" />
                     </x-rapidez-ct::card.white>
                 </x-rapidez-ct::card.inactive>
             </a>

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

@@ -110,7 +110,7 @@
             <span class="relative flex flex-col gap-y-1.5 sm:gap-y-2 text-sm !mb-3">
                 <label>
                     <x-rapidez::label>@lang('Country')</x-rapidez::label>
-                    <x-rapidez::country-select
+                    <x-rapidez::input.select.country
                         name="country_code"
                         v-model="addressVariables.country_code"
                         v-on:change="window.app.$emit('postcode-change', addressVariables)"

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

@@ -6,5 +6,5 @@
 </p>
 <x-rapidez::button.outline :href="route('account.register')" class="flex w-fit items-center gap-1">
     @lang('Register')
-    <x-heroicon-o-arrow-right class="h-4" />
+    <x-heroicon-o-arrow-right class="size-4" />
 </x-rapidez::button.outline>

resources/views/cart/coupon.blade.php

@@ -10,7 +10,7 @@
                     :error-callback="checkResponseForExpiredCart"
                     v-slot="{ mutate }"
                 >
-                    <form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
+                    <form v-on:submit.prevent="mutate" class="text-muted mt-1 flex items-center gap-x-2">
                         <button type="submit">
                             <x-heroicon-s-x-mark class="size-4 text-black-400"/>
                         </button>