From 6669a87a594c44083655a37e52f9f39b0f1b6d17 Mon Sep 17 00:00:00 2001
From: indy koning <indy@justbetter.nl>
Date: Fri, 18 Oct 2024 15:50:36 +0200
Subject: [PATCH 01/10] Update templates and steps to support V3

---
 README.md                                     |  2 +
 .../checkout/overview.blade.php               |  1 -
 .../checkout/pages/credentials.blade.php      |  1 +
 .../checkout/pages/login.blade.php            |  1 +
 .../checkout/pages/payment.blade.php          |  1 +
 resources/js/components/CheckoutAddress.vue   | 20 ----
 .../components/CheckoutSuccessAddresses.vue   | 21 +---
 resources/js/package.js                       | 14 +--
 resources/views/account/order.blade.php       |  5 +-
 .../views/account/partials/login.blade.php    | 10 +-
 .../partials/order/order-info.blade.php       | 12 +--
 .../account/partials/order/products.blade.php |  2 +-
 .../views/cart/partials/cart-title.blade.php  |  8 +-
 resources/views/checkout/overview.blade.php   | 13 ---
 .../checkout/pages/credentials.blade.php      | 40 ++++++++
 .../views/checkout/pages/login.blade.php      | 31 ++++++
 .../views/checkout/pages/payment.blade.php    | 30 ++++++
 .../views/checkout/pages/success.blade.php    |  7 ++
 .../checkout/partials/address-card.blade.php  | 71 ++++++++++----
 .../checkout/partials/address-cards.blade.php |  8 +-
 .../partials/sections/address.blade.php       | 49 +++++++++-
 .../sections/login/logged-in.blade.php        |  6 +-
 .../sections/login/logged-out.blade.php       | 98 +++++++++++++------
 .../partials/sections/newsletter.blade.php    |  2 +-
 .../partials/sections/payment.blade.php       | 26 +++--
 .../payment/agreement-checkbox.blade.php      |  1 -
 .../payment/payment-methods.blade.php         | 36 ++++---
 .../sections/success/newsletter.blade.php     |  4 +-
 .../success/order-completed-note.blade.php    |  3 +-
 .../sections/success/order-info.blade.php     |  6 +-
 .../sections/success/products.blade.php       | 19 ++--
 .../shipping-billing-fields.blade.php         | 10 +-
 .../partials/shipping/methods.blade.php       | 58 +++++++----
 .../partials/sidebar/segment.blade.php        | 15 ---
 .../partials/sidebar/summary.blade.php        |  4 +-
 .../partials/sidebar/totals.blade.php         | 26 +++++
 .../partials/sidebar/user-info.blade.php      | 50 +++++-----
 .../checkout/steps/credentials.blade.php      | 28 ++----
 .../views/checkout/steps/login.blade.php      | 10 ++
 .../views/checkout/steps/payment.blade.php    | 19 ----
 .../checkout/steps/payment_method.blade.php   | 29 ++++++
 .../views/checkout/steps/success.blade.php    | 11 ++-
 .../views/components/address-form.blade.php   | 24 ++---
 .../components/newsletter/index.blade.php     |  4 +-
 .../components/progress-bar/index.blade.php   | 27 +++--
 .../components/title-progress-bar.blade.php   |  3 +-
 46 files changed, 552 insertions(+), 314 deletions(-)
 delete mode 100644 resources/core-overwrites/checkout/overview.blade.php
 create mode 100644 resources/core-overwrites/checkout/pages/credentials.blade.php
 create mode 100644 resources/core-overwrites/checkout/pages/login.blade.php
 create mode 100644 resources/core-overwrites/checkout/pages/payment.blade.php
 delete mode 100644 resources/views/checkout/overview.blade.php
 create mode 100644 resources/views/checkout/pages/credentials.blade.php
 create mode 100644 resources/views/checkout/pages/login.blade.php
 create mode 100644 resources/views/checkout/pages/payment.blade.php
 create mode 100644 resources/views/checkout/pages/success.blade.php
 delete mode 100644 resources/views/checkout/partials/sidebar/segment.blade.php
 create mode 100644 resources/views/checkout/partials/sidebar/totals.blade.php
 create mode 100644 resources/views/checkout/steps/login.blade.php
 delete mode 100644 resources/views/checkout/steps/payment.blade.php
 create mode 100644 resources/views/checkout/steps/payment_method.blade.php

diff --git a/README.md b/README.md
index 9c73214d..7e22e50a 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,8 @@ php artisan vendor:publish --tag=payment-icons
 
 ## Customizations
 
+It is recommended to edit the `config/rapidez/frontend.php` and remove the `login` step. This will enable two step checkout.
+
 If you want you *could* publish the views. But it's recommended to only publish and change the views you need so when there is an update you don't have to compare all views with the new version. Also keep in mind this is an opinionated theme, if you want/need to change a lot it's better to build your own in terms of upgradability.
 ```
 php artisan vendor:publish --provider="Rapidez\CheckoutTheme\ServiceProvider" --tag=views
diff --git a/resources/core-overwrites/checkout/overview.blade.php b/resources/core-overwrites/checkout/overview.blade.php
deleted file mode 100644
index 08ed49ac..00000000
--- a/resources/core-overwrites/checkout/overview.blade.php
+++ /dev/null
@@ -1 +0,0 @@
-@include('rapidez-ct::checkout.overview')
diff --git a/resources/core-overwrites/checkout/pages/credentials.blade.php b/resources/core-overwrites/checkout/pages/credentials.blade.php
new file mode 100644
index 00000000..514f804a
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/credentials.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.credentials')
diff --git a/resources/core-overwrites/checkout/pages/login.blade.php b/resources/core-overwrites/checkout/pages/login.blade.php
new file mode 100644
index 00000000..7da99067
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/login.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.login')
diff --git a/resources/core-overwrites/checkout/pages/payment.blade.php b/resources/core-overwrites/checkout/pages/payment.blade.php
new file mode 100644
index 00000000..cb13cdd3
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/payment.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.payment')
diff --git a/resources/js/components/CheckoutAddress.vue b/resources/js/components/CheckoutAddress.vue
index 69454e52..34d4d469 100644
--- a/resources/js/components/CheckoutAddress.vue
+++ b/resources/js/components/CheckoutAddress.vue
@@ -13,26 +13,6 @@
         methods: {
             toggleEdit() {
                 this.editing = !this.editing
-
-                if (this.editing) {
-                    this.$root.checkout['billing_address'].customer_address_id = null
-                    this.$root.checkout['shipping_address'].customer_address_id = null
-                }
-            },
-
-            isType(type, address) {
-                let check = this.$root.checkout[`${type}_address`]
-
-                if (!check) {
-                    return false
-                }
-
-                return check.id == address.id || check.customer_address_id == address.id
-            },
-
-            select(type, address) {
-                this.$root.checkout[`${type}_address`] = address
-                this.$root.checkout[`${type}_address`].customer_address_id = address.id
             },
         },
 
diff --git a/resources/js/components/CheckoutSuccessAddresses.vue b/resources/js/components/CheckoutSuccessAddresses.vue
index 3b6202c6..b1a3b9a6 100644
--- a/resources/js/components/CheckoutSuccessAddresses.vue
+++ b/resources/js/components/CheckoutSuccessAddresses.vue
@@ -32,30 +32,15 @@
             },
 
             shipping() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let shipping = this.order.sales_order_addresses.filter(e => e.address_type == 'shipping')
-                return shipping.length > 1 ? null : shipping.at(-1)
+                return this.order.shipping_address
             },
 
             billing() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let billing = this.order.sales_order_addresses.filter(e => e.address_type == 'billing')
-                return billing.at(-1)
+                return this.order.billing_address
             },
 
             pickup() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let shipping = this.order.sales_order_addresses.filter(e => e.address_type == 'shipping')
-                return shipping.length > 1 ? shipping[0] : null
+                return this.shipping
             }
         }
     }
diff --git a/resources/js/package.js b/resources/js/package.js
index 5d61ae20..dc88cc91 100644
--- a/resources/js/package.js
+++ b/resources/js/package.js
@@ -1,15 +1,3 @@
 Vue.component('checkout-address', () => import('./components/CheckoutAddress.vue'))
 Vue.component('checkout-success-addresses', () => import('./components/CheckoutSuccessAddresses.vue'))
-Vue.component('address-card', () => import('./components/AddressCard.vue'))
-
-Vue.mixin({
-    computed: {
-        billingAndShippingAreTheSame() {
-            if (this.$root.checkout.shipping_address?.customer_address_id) {
-                this.$root.checkout.hide_billing = this.$root.checkout.shipping_address?.customer_address_id == this.$root.checkout.billing_address?.customer_address_id
-            }
-
-            return this.$root.checkout.hide_billing
-        }
-    }
-})
+Vue.component('address-card', () => import('./components/AddressCard.vue'))
\ No newline at end of file
diff --git a/resources/views/account/order.blade.php b/resources/views/account/order.blade.php
index 44758972..ec75d012 100644
--- a/resources/views/account/order.blade.php
+++ b/resources/views/account/order.blade.php
@@ -20,8 +20,9 @@
     <graphql
         query='@include('rapidez::account.partials.queries.order')'
         check="customer.orders.items[0]"
+        :callback="async (variables, response) => {return await updateOrder(variables, {data: response.data.customer.orders.items})}"
     >
-        <div v-if="data" slot-scope="{ data }">
+        <div slot-scope="{ order: data }" v-if="order">
             <x-rapidez-ct::sections>
                 @include('rapidez-ct::account.partials.order.products')
                 @include('rapidez-ct::account.partials.order.order-info')
@@ -31,7 +32,7 @@
                     @lang('Back to my orders')
                 </x-rapidez-ct::button.outline>
                 <span class="text-ct-inactive">
-                    @lang('Order date'): @{{ (new Date(data.customer.orders.items[0].order_date)).toLocaleDateString() }}
+                    @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                 </span>
             </x-rapidez-ct::toolbar>
         </div>
diff --git a/resources/views/account/partials/login.blade.php b/resources/views/account/partials/login.blade.php
index 94d3dd46..b6353eda 100644
--- a/resources/views/account/partials/login.blade.php
+++ b/resources/views/account/partials/login.blade.php
@@ -1,19 +1,17 @@
-<login :checkout-login="false" v-slot="{ email, password, go, loginInputChange }" redirect="{{ $redirect ?? route('account.overview') }}">
+<login :checkout-login="false" v-slot="login" redirect="{{ $redirect ?? route('account.overview') }}">
     <x-rapidez-ct::card.inactive>
-        <form class="space-y-5" v-on:submit.prevent="go()">
+        <form class="space-y-5" v-on:submit.prevent="login.go()">
             <x-rapidez-ct::input
                 name="email"
                 type="email"
                 label="Email"
-                v-bind:value="email"
-                v-on:input="loginInputChange"
+                v-model="login.email"
                 required
             />
             <x-rapidez-ct::input.password
                 name="password"
                 label="Password"
-                v-bind:value="password"
-                v-on:input="loginInputChange"
+                v-model="login.password"
                 required
             />
             <div class="flex items-center justify-between">
diff --git a/resources/views/account/partials/order/order-info.blade.php b/resources/views/account/partials/order/order-info.blade.php
index 1d9ed1f2..e25b6b12 100644
--- a/resources/views/account/partials/order/order-info.blade.php
+++ b/resources/views/account/partials/order/order-info.blade.php
@@ -1,9 +1,9 @@
 <x-rapidez-ct::card.inactive>
     <div class="flex flex-wrap -space-x-px max-sm:-space-y-px">
         <div class="flex flex-1 flex-col -space-y-px">
-            <template v-if="data.customer.orders.items[0].hide_billing || data.customer.orders.items[0].shipping_address?.customer_address_id == data.customer.orders.items[0].billing_address?.customer_address_id">
+            <template v-if="order.hide_billing || hideBilling || order.shipping_address?.customer_address_id == order.billing_address?.customer_address_id">
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].shipping_address"
+                    v-bind:address="order.shipping_address"
                     shipping
                     billing
                     check
@@ -11,12 +11,12 @@
             </template>
             <template v-else>
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].shipping_address"
+                    v-bind:address="order.shipping_address"
                     shipping
                     check
                 />
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].billing_address"
+                    v-bind:address="order.billing_address"
                     billing
                     check
                 />
@@ -29,7 +29,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-for="data in data.customer.orders.items[0].payment_methods">
+                        <li v-for="data in order.payment_methods">
                             @{{ data.name }}
                         </li>
                     </ul>
@@ -46,7 +46,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-text="data.customer.orders.items[0].shipping_method"></li>
+                        <li v-text="order.shipping_method"></li>
                     </ul>
                     @if (!empty($slot))
                         <div class="mt-auto flex flex-col self-end">
diff --git a/resources/views/account/partials/order/products.blade.php b/resources/views/account/partials/order/products.blade.php
index ca3008f5..bef5758a 100644
--- a/resources/views/account/partials/order/products.blade.php
+++ b/resources/views/account/partials/order/products.blade.php
@@ -10,7 +10,7 @@
     </div>
 </div>
 <ul class="flex flex-col divide-y">
-    <li class="flex py-5" v-for="item in data.customer.orders.items[0].items">
+    <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
diff --git a/resources/views/cart/partials/cart-title.blade.php b/resources/views/cart/partials/cart-title.blade.php
index 6ebdf052..a507c8d6 100644
--- a/resources/views/cart/partials/cart-title.blade.php
+++ b/resources/views/cart/partials/cart-title.blade.php
@@ -1,3 +1,5 @@
-<x-rapidez-ct::title-progress-bar>
-    @lang('Cart')
-</x-rapidez-ct::title-progress-bar>
+<div class="flex flex-wrap gap-1 items-baseline justify-between">
+    <x-rapidez-ct::title>
+        @lang('Cart')
+    </x-rapidez-ct::title>
+</div>
\ No newline at end of file
diff --git a/resources/views/checkout/overview.blade.php b/resources/views/checkout/overview.blade.php
deleted file mode 100644
index 8c3e88fc..00000000
--- a/resources/views/checkout/overview.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-@extends('rapidez::layouts.app')
-
-@section('title', __('Checkout'))
-
-@section('robots', 'NOINDEX,NOFOLLOW')
-
-@section('content')
-    <checkout v-slot="{ checkout, save, goToStep, forceAccount }" :set="checkout.step = Math.max(checkout.step, 2)" v-cloak>
-        <div class="container">
-            @include('rapidez-ct::checkout.partials.layout')
-        </div>
-    </checkout>
-@endsection
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
new file mode 100644
index 00000000..22e056b3
--- /dev/null
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -0,0 +1,40 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+                @lang('Credentials')
+            </x-rapidez-ct::title-progress-bar>
+
+            <form
+                class="contents"
+                v-on:submit.prevent="(e) => {
+                    submitFieldsets(e.target?.form ?? e.target)
+                        .then((result) =>
+                            window.app.$emit('checkout-credentials-saved')
+                            && window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'payment']) }}'))
+                        ).catch();
+                }"
+            >
+                @include('rapidez-ct::checkout.steps.credentials')
+                <x-rapidez-ct::toolbar>
+                    <x-rapidez-ct::button.outline :href="route('cart')">
+                        @lang('Back to cart')
+                    </x-rapidez-ct::button.outline>
+
+                    <x-rapidez-ct::button.accent loader>
+                        @lang('Next')
+                    </x-rapidez-ct::button.accent>
+                </x-rapidez-ct::toolbar>
+            </form>
+            <x-slot:sidebar>
+                @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
new file mode 100644
index 00000000..c5dc7e6e
--- /dev/null
+++ b/resources/views/checkout/pages/login.blade.php
@@ -0,0 +1,31 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            @lang('Credentials')
+        </x-rapidez-ct::title-progress-bar>
+        
+        <form
+            v-if="hasCart"
+            v-on:submit.prevent="(e) => {
+                submitFieldsets(e.target?.form ?? e.target)
+                    .then((result) =>
+                        window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'credentials']) }}'))
+                    ).catch();
+            }"
+            class="max-w-md mx-auto"
+            v-cloak
+        >
+            @include('rapidez-ct::checkout.steps.login')
+
+            <x-rapidez-ct::button.accent loader type="submit" dusk="continue" class="mt-3">
+                @lang('Next')
+            </x-rapidez-ct::button.accent>
+        </form>
+    </div>
+@endsection
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
new file mode 100644
index 00000000..6e626c72
--- /dev/null
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -0,0 +1,30 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+            <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
+                @lang('Payment')
+            </x-rapidez-ct::title-progress-bar>
+            <form 
+                class="contents"
+                v-on:submit.prevent="(e) => {
+                    submitFieldsets(e.target?.form ?? e.target)
+                        .then((result) =>
+                            window.app.$emit('checkout-payment-saved')
+                            && window.app.$emit('placeOrder')
+                        ).catch();
+                }"
+            >
+                @include('rapidez-ct::checkout.steps.payment_method')
+            </form>
+            <x-slot:sidebar>
+                @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/checkout/pages/success.blade.php b/resources/views/checkout/pages/success.blade.php
new file mode 100644
index 00000000..afc0791a
--- /dev/null
+++ b/resources/views/checkout/pages/success.blade.php
@@ -0,0 +1,7 @@
+@extends('rapidez::layouts.app')
+
+@section('title', 'Checkout')
+
+@section('content')
+    @include('rapidez::checkout.steps.success')
+@endsection
diff --git a/resources/views/checkout/partials/address-card.blade.php b/resources/views/checkout/partials/address-card.blade.php
index ea2e98ad..da46f182 100644
--- a/resources/views/checkout/partials/address-card.blade.php
+++ b/resources/views/checkout/partials/address-card.blade.php
@@ -1,19 +1,56 @@
 <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="isType('billing', userAddress)"
-            v-bind:shipping="isType('shipping', userAddress)"
-            v-bind:check="isType('billing', userAddress) || isType('shipping', userAddress)"
-            class="w-full sm:min-w-[350px]"
-        >
-            <x-rapidez-ct::button.link v-if="!isType('shipping', userAddress)" v-on:click.prevent="select('shipping', userAddress)">
-                @lang('Select as shipping')
-            </x-rapidez-ct::button.link>
-            <x-rapidez-ct::button.link v-if="!isType('billing', userAddress)" v-on:click.prevent="select('billing', userAddress)">
-                @lang('Select as billing')
-            </x-rapidez-ct::button.link>
-        </x-rapidez-ct::card.address>
-    </template>
+    <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"
+    >
+        <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]"
+                        >
+                                <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>
+
+                                <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>
 </div>
diff --git a/resources/views/checkout/partials/address-cards.blade.php b/resources/views/checkout/partials/address-cards.blade.php
index bfad83ba..389222a2 100644
--- a/resources/views/checkout/partials/address-cards.blade.php
+++ b/resources/views/checkout/partials/address-cards.blade.php
@@ -1,6 +1,6 @@
 <div class="grid gap-5 sm:grid-cols-2">
-    <template v-if="billingAndShippingAreTheSame">
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping billing check>
+    <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">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
@@ -8,7 +8,7 @@
         @include('rapidez-ct::checkout.partials.buttons.new-address')
     </template>
     <template v-else>
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping check class="h-full">
+        <x-rapidez-ct::card.address v-bind:address="cart.shipping_addresses[0]" shipping check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
@@ -20,7 +20,7 @@
                 <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 class="h-full">
+        <x-rapidez-ct::card.address v-bind:address="cart.billing_address" billing check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
index 2dd8476f..32a9d362 100644
--- a/resources/views/checkout/partials/sections/address.blade.php
+++ b/resources/views/checkout/partials/sections/address.blade.php
@@ -1,14 +1,55 @@
-<checkout-address v-slot="{ useCards, editing, toggleEdit, isType, select }">
+<checkout-address v-slot="{ useCards, editing, toggleEdit }">
     <x-rapidez-ct::card.inactive v-if="useCards && !editing">
         @include('rapidez-ct::checkout.partials.address-cards')
         @include('rapidez-ct::checkout.partials.buttons.address')
     </x-rapidez-ct::card.inactive>
 
     <x-rapidez-ct::card.inactive v-else>
-        @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
+        <graphql-mutation
+            :query="config.queries.setNewShippingAddressesOnCart"
+            :variables="{
+                cart_id: mask,
+                ...window.address_defaults,
+                ...cart.shipping_addresses[0],
+                country_code: cart.shipping_addresses[0]?.country.code || window.address_defaults.country_code
+            }"
+            group="shipping"
+            :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingShippingAddressesOnCart : query, variables, options]"
+            :callback="updateCart"
+            :error-callback="checkResponseForExpiredCart"
+            :watch="false"
+            mutate-event="setShippingAddressesOnCart"
+            v-slot="{ mutate, variables }"
+            v-if="!cart.is_virtual"
+        >
+            <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
+            </fieldset>
+        </graphql-mutation>
 
-        <div class="mt-9 pt-7 border-t-2 border-white" v-if="!checkout.hide_billing">
-            @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
+
+        <div class="mt-9 pt-7 border-t-2 border-white">
+            <graphql-mutation
+                :query="config.queries.setNewBillingAddressOnCart"
+                :variables="JSON.parse(JSON.stringify({
+                    cart_id: mask,
+                    ...window.address_defaults,
+                    ...cart.billing_address,
+                    same_as_shipping: !cart.is_virtual && (cart?.billing_address?.same_as_shipping ?? true),
+                    country_code: cart.billing_address?.country.code || window.address_defaults.country_code
+                }))"
+                :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingBillingAddressOnCart : query, variables, options]"
+                :callback="updateCart"
+                :error-callback="checkResponseForExpiredCart"
+                :watch="false"
+                group="billing"
+                mutate-event="setBillingAddressOnCart"
+                v-slot="{ mutate, variables }"
+            >
+                <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                    @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
+                </fieldset>
+            </graphql-mutation>
         </div>
     </x-rapidez-ct::card.inactive>
 </checkout-address>
diff --git a/resources/views/checkout/partials/sections/login/logged-in.blade.php b/resources/views/checkout/partials/sections/login/logged-in.blade.php
index ccf811ce..318fc471 100644
--- a/resources/views/checkout/partials/sections/login/logged-in.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-in.blade.php
@@ -12,7 +12,11 @@ class="justify-center"
     <p class="text-sm font-medium text-ct-neutral">@lang('Welcome back') @{{ $root.user?.firstname }}!</p>
     <span class="text-ct-inactive text-sm">
         @lang('Is this not your account?')
-        <button class="underline" v-on:click.prevent="logout('/login')">@lang('Log out')</button>
+        <user>
+            <template v-slot="user">
+                <button class="underline" v-on:click.prevent="user.logout('/login')">@lang('Log out')</button>
+            </template>
+        </user>
         @lang('and use a different e-mail address.')
     </span>
 </div>
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index cb8c01b8..965a3144 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -1,31 +1,71 @@
-<x-rapidez-ct::input
-    name="email"
-    type="email"
-    label="Email"
-    v-bind:value="email"
-    v-on:input="loginInputChange"
-    v-on:blur="$root.guestEmail = email; if(!password) { go() }"
-    class="justify-center"
-    required
-    :placeholder="__('Enter your e-mail address')"
-/>
+<checkout-login v-slot="checkoutLogin">
+    <fieldset data-function="go" class="flex flex-col gap-3">
+        <x-rapidez-ct::input
+            label="Email"
+            name="email"
+            type="email"
+            v-model="checkoutLogin.email"
+            v-bind:disabled="loggedIn"
+            class="justify-center"
+            required
+            :placeholder="__('Enter your e-mail address')"
+        />
+        <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
+            <x-rapidez-ct::input
+                label="Password"
+                name="password"
+                type="password"
+                v-model="checkoutLogin.password"
+                required
+            />
+        </template>
+        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
+            @lang('You already have an account with this e-mail address. Please log in to continue.')
+        </p>
+        @if (App::providerIsLoaded('Rapidez\Account\AccountServiceProvider'))
+            <a href="{{ route('account.forgotpassword') }}" class="inline-block text-sm hover:underline mt-5" v-if="!checkoutLogin.isEmailAvailable">
+                @lang('Forgot your password?')
+            </a>
+        @endif
+        <template v-if="!loggedIn && checkoutLogin.createAccount">
+            <x-rapidez-ct::input
+                label="Repeat password"
+                name="password_repeat"
+                type="password"
+                v-model="checkoutLogin.password_repeat"
+                required
+            />
+            <x-rapidez-ct::input
+                label="Firstname"
+                name="firstname"
+                type="text"
+                v-model="checkoutLogin.firstname"
+                required
+            />
+            <x-rapidez-ct::input
+                label="Lastname"
+                name="lastname"
+                type="text"
+                v-model="checkoutLogin.lastname"
+                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>
+        </template>
 
-    <x-rapidez-ct::input
-    name="password"
-    type="password"
-    v-if="!emailAvailable"
-    label="Password"
-    ref="password"
-    v-on:input="loginInputChange"
-    required
-/>
+        <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>
+        <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
+            @lang('Login')
+        </x-rapidez-ct::button.accent>
+    </fieldset>
+</checkout-login>
 
-<p v-if="!emailAvailable" class="self-end text-ct-inactive">
-    @lang('You already have an account with this e-mail address. Please log in to continue.')
-</p>
-<p v-else 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 v-if="!emailAvailable" v-on:click.prevent="go" dusk="continue">
-    @lang('Login')
-</x-rapidez-ct::button.accent>
diff --git a/resources/views/checkout/partials/sections/newsletter.blade.php b/resources/views/checkout/partials/sections/newsletter.blade.php
index f2ce217d..0cbcc87d 100644
--- a/resources/views/checkout/partials/sections/newsletter.blade.php
+++ b/resources/views/checkout/partials/sections/newsletter.blade.php
@@ -1 +1 @@
-<x-rapidez-ct::newsletter v-model="checkout.newsletter_subscribe" />
\ No newline at end of file
+<x-rapidez-ct::newsletter/>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment.blade.php b/resources/views/checkout/partials/sections/payment.blade.php
index a299d12e..5a6a13a0 100644
--- a/resources/views/checkout/partials/sections/payment.blade.php
+++ b/resources/views/checkout/partials/sections/payment.blade.php
@@ -1,7 +1,22 @@
-<form id="payment" class="flex flex-col gap-2" v-on:submit.prevent="save(['payment_method'], 4)">
-    <div v-for="(method, index) in checkout.payment_methods">
-        @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
-    </div>
+    <graphql-mutation
+        :query="config.queries.setPaymentMethodOnCart"
+        :variables="{
+            cart_id: mask,
+            code: cart.selected_payment_method.code,
+        }"
+        group="payment"
+        :before-request="handleBeforePaymentMethodHandlers"
+        :callback="updateCart"
+        :error-callback="checkResponseForExpiredCart"
+        mutate-event="setPaymentMethodOnCart"
+        v-slot="{ mutate, variables }"
+    >
+        <div data-function="mutate">
+            <div v-for="(method, index) in cart.available_payment_methods">
+                @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
+            </div>
+        </div>
+    </graphql-mutation>
     <graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }">
         <div v-if="data?.checkoutAgreements?.length" class="mt-5 flex flex-col gap-y-4" slot-scope="{ data }">
             <div v-for="agreement in data.checkoutAgreements">
@@ -24,5 +39,4 @@ class="text-ct-primary cursor-pointer text-sm underline"
                 </x-rapidez-ct::slideover>
             </div>
         </div>
-    </graphql>
-</form>
+    </graphql>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
index e41cce51..5777baf0 100644
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
@@ -1,7 +1,6 @@
 <x-rapidez-ct::input.checkbox
     name="agreement_ids[]"
     v-bind:value="agreement.agreement_id"
-    v-model="checkout.agreement_ids"
     dusk="agreements"
     required
 >
diff --git a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
index e362a501..e9a49c20 100644
--- a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
+++ b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
@@ -1,15 +1,21 @@
-<x-rapidez-ct::input.radio
-    name="payment_method"
-    v-bind:value="method.code"
-    v-bind:dusk="'method-'+index"
-    v-model="checkout.payment_method"
-    required
->
-    <div>@{{ method.title }}</div>
-    <img
-        class="max-h-10 w-12"
-        v-bind:alt="method.code"
-        v-bind:src="`/payment-icons/${method.code}.svg`"
-        onerror="this.onerror=null; this.src='/payment-icons/default.svg'"
-    />
-</x-rapidez-ct::input.radio>
\ No newline at end of file
+<template v-if="false"></template>
+@stack('payment_methods')
+<template v-else>
+    <x-rapidez-ct::input.radio
+        name="payment_method"
+        v-model="variables.code"
+        v-bind:value="method.code"
+        v-bind:dusk="'payment-method-'+index"
+        v-on:change="mutate"
+        required
+    >
+        <div class="flex items-center">
+            <span>@{{ method.title }}</span>
+            <img
+                class="absolute right-5 size-8"
+                v-bind:src="`/payment-icons/${method.code}.svg`"
+                onerror="this.onerror=null; this.src=`/payment-icons/default.svg`"
+            >
+        </div>
+    </x-rapidez-ct::input.radio>
+</template>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/success/newsletter.blade.php b/resources/views/checkout/partials/sections/success/newsletter.blade.php
index e3fea69c..b71f40b9 100644
--- a/resources/views/checkout/partials/sections/success/newsletter.blade.php
+++ b/resources/views/checkout/partials/sections/success/newsletter.blade.php
@@ -1,8 +1,8 @@
-<template v-if="$root.loggedIn">
+<template v-if="user.is_logged_in">
     <x-rapidez-ct::newsletter/>
 </template>
 @if (Rapidez::config('newsletter/subscription/allow_guest_subscribe', 1))
     <template v-else>
-        <x-rapidez-ct::newsletter.input email="$root.guestEmail" />
+        <x-rapidez-ct::newsletter.input email="order.email" />
     </template>
 @endif
diff --git a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
index 1a7a3e42..b06fef87 100644
--- a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
@@ -3,6 +3,7 @@
         @lang('We will get to work for you right away')
     </x-rapidez-ct::title.lg>
     <p class="mt-4 text-sm">
-        @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.increment_id }}', 'email' => '@{{ order.customer_email }}'])
+        @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.number }}', 'email' => '@{{ order.email }}'])
     </p>
+    <p class="mt-4 text-sm">@lang('Your order is currently'): <span class="font-bold" v-blur>@{{ order.status }}</span> <a class="inline-block" href="#" v-on:click.prevent="(e) => {e.target.classList.add('animate-spin'); refreshOrder().finally(() => e.target.classList.remove('animate-spin'))}">&#8635;</a></p>
 </x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/partials/sections/success/order-info.blade.php b/resources/views/checkout/partials/sections/success/order-info.blade.php
index 1d84f1c7..4b8db4b2 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -17,8 +17,8 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-for="method in order.sales_order_payments">
-                            @{{ method.additional_information.method_title || method.additional_information.raw_details_info.method_title }}
+                        <li v-for="method in order.payment_methods">
+                            @{{ method.name || method.type }}
                         </li>
                     </ul>
                     @if (!empty($slot))
@@ -34,7 +34,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-text="order.shipping_description"></li>
+                        <li v-text="order.shipping_method"></li>
                     </ul>
                     @if (!empty($slot))
                         <div class="mt-auto flex flex-col self-end">
diff --git a/resources/views/checkout/partials/sections/success/products.blade.php b/resources/views/checkout/partials/sections/success/products.blade.php
index 048aad46..d64c885f 100644
--- a/resources/views/checkout/partials/sections/success/products.blade.php
+++ b/resources/views/checkout/partials/sections/success/products.blade.php
@@ -9,27 +9,30 @@
 </div>
 
 <ul class="flex flex-col divide-y">
-    <li v-for="(item, productId, index) in order.sales_order_items" class="flex py-5">
+    <li v-for="(item, productId, index) in order.items" class="flex py-5">
         <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.sku}`"
+                    :alt="item.product_name"
+                    :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
                     height="100"
-                    v-if="item.sku"
+                    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.name }}</a>
-                <div v-for="(optionValue, option) in item.options">
-                    @{{ option }}: @{{ optionValue }}
+                <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
+                <div v-for="option in item.selected_options">
+                    @{{ option.label }}: @{{ option.value }}
+                </div>
+                <div v-for="option in item.entered_options">
+                    @{{ option.label }}: @{{ option.value }}
                 </div>
             </div>
             <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
                 <div class="h-14 w-16 border flex items-center justify-center text-sm">
-                    @{{ Math.round(item.qty_ordered) }}
+                    @{{ Math.round(item.quantity_ordered) }}
                 </div>
             </div>
         </div>
diff --git a/resources/views/checkout/partials/shipping-billing-fields.blade.php b/resources/views/checkout/partials/shipping-billing-fields.blade.php
index c0b56ad4..8890a42b 100644
--- a/resources/views/checkout/partials/shipping-billing-fields.blade.php
+++ b/resources/views/checkout/partials/shipping-billing-fields.blade.php
@@ -6,11 +6,13 @@
     @endif
 </p>
 
-<x-rapidez-ct::address-form :$type/>
+<template @if($type == 'billing') v-if="!variables.same_as_shipping" @endif >
+    <x-rapidez-ct::address-form :$type/>
+</template>
 
-@if ($type == 'shipping')
-    <div class="mt-5">
-        <x-rapidez-ct::input.checkbox v-model="checkout.hide_billing">
+@if ($type == 'billing')
+    <div class="mt-5" v-if="!cart.is_virtual">
+        <x-rapidez-ct::input.checkbox v-model="variables.same_as_shipping">
             @lang('My billing and shipping address are the same')
         </x-rapidez-ct::input.checkbox>
     </div>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index 92ce3860..47110b83 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -1,18 +1,42 @@
-<div v-for="(method, index) in checkout.shipping_methods" class="mt-5 flex flex-col gap-2">
-    <x-rapidez-ct::input.radio
-        v-bind:value="method.carrier_code+'_'+method.method_code"
-        v-bind:dusk="'method-'+index"
-        v-model="checkout.shipping_method"
-        name="shipping_method"
-        required
-    >
-        <div class="sm:w-3/5">@{{ method.carrier_title }}</div>
-        <div class="flex-1">@{{ method.method_title }}</div>
-        <div class="text-right text-sm font-medium">
-            <div v-if="method.amount > 0" class="text-ct-inactive">@{{ method.amount | price }}</div>
-            <div v-else class="text-ct-enhanced">
-                @lang('Free')
-            </div>
+<graphql-mutation
+    :query="config.queries.setShippingMethodsOnCart"
+    :variables="{
+        cart_id: mask,
+        method: cart.shipping_addresses[0]?.selected_shipping_method?.carrier_code+'/'+cart.shipping_addresses[0]?.selected_shipping_method?.method_code,
+    }"
+    group="shipping"
+    :callback="updateCart"
+    :error-callback="checkResponseForExpiredCart"
+    :before-request="function (query, variables, options) {
+        variables.carrier_code = variables.method.split('/')[0]
+        variables.method_code = variables.method.split('/')[1]
+        return [query, variables, options]
+    }"
+    mutate-event="setShippingMethodsOnCart"
+    v-slot="{ mutate, variables }"
+    v-if="!cart.is_virtual"
+>
+    <fieldset class="mt-5 flex flex-col gap-2" data-function="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
+        <div class="p-5 border rounded bg-white" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+            <x-rapidez-ct::input.radio
+                name="shipping_method"
+                v-model="variables.method"
+                v-bind:value="method.carrier_code+'/'+method.method_code"
+                v-bind:disabled="!method.available"
+                v-bind:dusk="'shipping-method-'+index"
+                v-on:change="mutate"
+                required
+            >
+                <div class="sm:w-3/5">@{{ method.carrier_title }}</div>
+                <div class="flex-1">@{{ method.method_title }}</div>
+                <div class="text-right text-sm font-medium">
+                    <div v-if="method.amount.value > 0" class="text-ct-inactive">@{{ method.amount.value | price }}</div>
+                    <div v-else class="text-ct-enhanced">
+                        @lang('Free')
+                    </div>
+                </div>
+            </x-rapidez-ct::input.radio>
         </div>
-    </x-rapidez-ct::input.radio>
-</div>
\ No newline at end of file
+    </fieldset>
+</graphql-mutation>
+
diff --git a/resources/views/checkout/partials/sidebar/segment.blade.php b/resources/views/checkout/partials/sidebar/segment.blade.php
deleted file mode 100644
index e43294b9..00000000
--- a/resources/views/checkout/partials/sidebar/segment.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-    <template v-if="segment.code !== 'shipping'">
-        <dt>@{{ segment.title }}</dt>
-        <dd>@{{ segment.value | price }}</dd>
-    </template>
-    <template v-else>
-        <dt>@lang('Shipping')</dt>
-        <dd v-if="checkout.totals.shipping_amount > 0">
-            @{{ checkout.totals.shipping_amount | price }}
-        </dd>
-        <dd v-else class="text-ct-enhanced font-medium">
-            @lang('Free')
-        </dd>
-    </template>
-</div>
diff --git a/resources/views/checkout/partials/sidebar/summary.blade.php b/resources/views/checkout/partials/sidebar/summary.blade.php
index 0e8a4aac..b5cbef46 100644
--- a/resources/views/checkout/partials/sidebar/summary.blade.php
+++ b/resources/views/checkout/partials/sidebar/summary.blade.php
@@ -11,8 +11,6 @@
         </li>
     </x-rapidez-ct::separated-listing>
     <x-rapidez-ct::separated-listing tag="dl">
-        <template v-for="segment in checkout.totals.total_segments" v-if="segment.title">
-            @include('rapidez-ct::checkout.partials.sidebar.segment')
-        </template>
+            @include('rapidez-ct::checkout.partials.sidebar.totals')
     </x-rapidez-ct::separated-listing>
 </x-rapidez-ct::card>
diff --git a/resources/views/checkout/partials/sidebar/totals.blade.php b/resources/views/checkout/partials/sidebar/totals.blade.php
new file mode 100644
index 00000000..38bd5d96
--- /dev/null
+++ b/resources/views/checkout/partials/sidebar/totals.blade.php
@@ -0,0 +1,26 @@
+<div>
+    <dt>@lang('Subtotal')</dt>
+    <dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
+</div>
+<div v-if="cart.prices.applied_taxes.length">
+    <dt>@lang('Tax')</dt>
+    <dd>@{{ cart.prices.applied_taxes[0].amount.value | price }}</dd>
+</div>
+<div v-if="cart.shipping_addresses.length && cart.shipping_addresses[0]?.selected_shipping_method">
+    <dt>
+        @lang('Shipping')<br>
+        <small>@{{ cart.shipping_addresses[0]?.selected_shipping_method.carrier_title }} - @{{ cart.shipping_addresses[0]?.selected_shipping_method.method_title }}</small>
+    </dt>
+    <dd v-if="cart.shipping_addresses[0]?.selected_shipping_method.amount.value > 0">@{{ cart.shipping_addresses[0]?.selected_shipping_method.amount.value | price }}</dd>
+    <dd v-else class="text-ct-enhanced font-medium">
+        @lang('Free')
+    </dd>
+</div>
+<div v-for="discount in cart.prices.discounts">
+    <dt>@{{ discount.label }}</dt>
+    <dd>-@{{ discount.amount.value | price }}</dd>
+</div>
+<div class="font-bold">
+    <dt>@lang('Total')</dt>
+    <dd>@{{ cart.prices.grand_total.value | price }}</dd>
+</div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sidebar/user-info.blade.php b/resources/views/checkout/partials/sidebar/user-info.blade.php
index 9a35e6fa..2e1308da 100644
--- a/resources/views/checkout/partials/sidebar/user-info.blade.php
+++ b/resources/views/checkout/partials/sidebar/user-info.blade.php
@@ -1,27 +1,25 @@
-<template v-if="checkout.step < 4">
-    <template v-if="billingAndShippingAreTheSame">
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.shipping_address" shipping billing>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-    </template>
-    <template v-else>
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.shipping_address" shipping>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.billing_address" billing>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-    </template>
+<template v-if="cart.shipping_addresses[0]?.uid == cart.billing_address?.uid || cart.shipping_addresses[0]?.customer_address_id == cart.billing_address?.customer_address_id">
+    <x-rapidez-ct::card v-if="cart.shipping_addresses[0]">
+        <x-rapidez-ct::address v-bind:address="cart.shipping_addresses[0]" shipping billing>
+            <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
+</template>
+<template v-else>
+    <x-rapidez-ct::card v-if="cart.shipping_addresses[0]">
+        <x-rapidez-ct::address v-bind:address="cart.shipping_addresses[0]" shipping>
+            <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
+    <x-rapidez-ct::card>
+        <x-rapidez-ct::address v-bind:address="cart.billing_address" billing>
+            <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
 </template>
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index da21d6aa..cbced8c7 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -1,22 +1,6 @@
-<x-rapidez-ct::title-progress-bar :href="route('cart')">
-    @lang('Credentials')
-</x-rapidez-ct::title-progress-bar>
-
-<form id="credentials" v-on:submit.prevent="save(['credentials'], 3)">
-    <x-rapidez-ct::sections>
-        @include('rapidez-ct::checkout.partials.sections.login')
-        @include('rapidez-ct::checkout.partials.sections.address')
-        @include('rapidez-ct::checkout.partials.sections.newsletter')
-        @include('rapidez-ct::checkout.partials.sections.shipping')
-    </x-rapidez-ct::sections>
-</form>
-
-<x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline :href="route('cart')">
-        @lang('Back to cart')
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.accent form="credentials" loader>
-        @lang('Next')
-    </x-rapidez-ct::button.accent>
-</x-rapidez-ct::toolbar>
+<x-rapidez-ct::sections>
+    @includeWhen(!in_array('login', $checkoutSteps), 'rapidez-ct::checkout.partials.sections.login')
+    @include('rapidez-ct::checkout.partials.sections.address')
+    @include('rapidez-ct::checkout.partials.sections.newsletter')
+    @include('rapidez-ct::checkout.partials.sections.shipping')
+</x-rapidez-ct::sections>
\ No newline at end of file
diff --git a/resources/views/checkout/steps/login.blade.php b/resources/views/checkout/steps/login.blade.php
new file mode 100644
index 00000000..3e5cc91d
--- /dev/null
+++ b/resources/views/checkout/steps/login.blade.php
@@ -0,0 +1,10 @@
+<x-rapidez-ct::card.inactive>
+    <div class="grid gap-4 sm:gap-5 md:items-end">
+        <template v-if="!loggedIn">
+            @include('rapidez-ct::checkout.partials.sections.login.logged-out')
+        </template>
+        <template v-else>
+            @include('rapidez-ct::checkout.partials.sections.login.logged-in')
+        </template>
+    </div>
+</x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
deleted file mode 100644
index 3068e106..00000000
--- a/resources/views/checkout/steps/payment.blade.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<x-rapidez-ct::title-progress-bar href="#" v-on:click.prevent="goToStep(1)">
-    @lang('Payment')
-</x-rapidez-ct::title-progress-bar>
-
-<x-rapidez-ct::sections>
-    <x-rapidez-ct::card.inactive>
-        @include('rapidez-ct::checkout.partials.sections.payment')
-    </x-rapidez-ct::card.inactive>
-</x-rapidez-ct::sections>
-
-<x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline v-on:click.prevent="goToStep(1)">
-        @lang('Back to credentials')
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.accent class="relative" form="payment" type="submit" dusk="continue" loader>
-        @lang('Place order')
-    </x-rapidez-ct::button.accent>
-</x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/steps/payment_method.blade.php b/resources/views/checkout/steps/payment_method.blade.php
new file mode 100644
index 00000000..17a0f6f0
--- /dev/null
+++ b/resources/views/checkout/steps/payment_method.blade.php
@@ -0,0 +1,29 @@
+<x-rapidez-ct::sections>
+    <x-rapidez-ct::card.inactive>
+        @include('rapidez-ct::checkout.partials.sections.payment')
+    </x-rapidez-ct::card.inactive>
+</x-rapidez-ct::sections>
+
+<x-rapidez-ct::toolbar>
+    <x-rapidez-ct::button.outline :href="route('checkout', ['step' => 'credentials'])">
+        @lang('Back to credentials')
+    </x-rapidez-ct::button.outline>
+
+
+    <graphql-mutation
+        :query="config.queries.placeOrder"
+        :variables="{ cart_id: mask }"
+        :before-request="handleBeforePlaceOrderHandlers"
+        :callback="handlePlaceOrder"
+        mutate-event="placeOrder"
+        redirect="{{ route('checkout.success') }}"
+        v-slot="{ mutate, variables }"
+    >
+        <fieldset>
+            <x-rapidez-ct::button.accent class="relative" type="submit" dusk="continue" loader>
+                @lang('Place order')
+            </x-rapidez-ct::button.accent>
+        </fieldset>
+    </graphql-mutation>
+
+</x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index f6342fc3..651f05c2 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -1,8 +1,11 @@
+@php($checkoutSteps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code')) ?: config('rapidez.frontend.checkout_steps.default'))
 <checkout-success>
-    <div slot-scope="{ order }" dusk="checkout-success">
-        <x-rapidez-ct::title-progress-bar>
-            @lang('Thank you for your order')
-        </x-rapidez-ct::title-progress-bar>
+    <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success">
+        <div class="flex flex-wrap gap-1 items-baseline justify-between">
+            <x-rapidez-ct::title>
+                @lang('Thank you for your order')
+            </x-rapidez-ct::title>
+        </div>
         <x-rapidez-ct::sections>
             @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
         </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index a40da3ef..c645948b 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -1,4 +1,4 @@
-@props(['type' => 'shipping', 'address' => 'checkout.'.$type.'_address', 'countryKey' => 'country_id'])
+@props(['type' => 'shipping', 'address' => 'variables', 'countryKey' => 'country_code'])
 
 <div class="grid gap-4 sm:gap-5 sm:grid-cols-4">
     @if (Rapidez::config('customer/address/company_show', 0) || Rapidez::config('customer/address/taxvat_show', 0))
@@ -7,7 +7,7 @@
                 class="sm:col-span-2"
                 name="{{ $type }}_company"
                 label="Company"
-                v-model.lazy="{{ $address }}.company"
+                v-model="{{ $address }}.company"
             />
         @endif
 
@@ -16,7 +16,7 @@ class="sm:col-span-2"
                 class="sm:col-span-2"
                 name="{{ $type }}_vat_id"
                 label="Tax ID"
-                v-model.lazy="{{ $address }}.vat_id"
+                v-model="{{ $address }}.vat_id"
                 :required="Rapidez::config('customer/address/taxvat_show', 0) == 'req'"
             />
         @endif
@@ -32,7 +32,7 @@ class="sm:col-span-2"
     <x-rapidez-ct::input
         name="{{ $type }}_firstname"
         label="Firstname"
-        v-model.lazy="{{ $address }}.firstname"
+        v-model="{{ $address }}.firstname"
         @class([
             'sm:col-span-2' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
@@ -42,28 +42,28 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_middlename"
             label="Middlename"
-            v-model.lazy="{{ $address }}.middlename"
+            v-model="{{ $address }}.middlename"
         />
     @endif
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_lastname"
         label="Lastname"
-        v-model.lazy="{{ $address }}.lastname"
+        v-model="{{ $address }}.lastname"
         required
     />
     @if (Rapidez::config('customer/address/telephone_show', 'req'))
         <x-rapidez-ct::input
             name="{{ $type }}_telephone"
             label="Telephone"
-            v-model.lazy="{{ $address }}.telephone"
+            v-model="{{ $address }}.telephone"
             :required="Rapidez::config('customer/address/telephone_show', 'req') == 'req'"
         />
     @endif
     <x-rapidez-ct::input
         name="{{ $type }}_postcode"
         label="Postcode"
-        v-model.lazy="{{ $address }}.postcode"
+        v-model="{{ $address }}.postcode"
         v-on:change="window.app.$emit('postcode-change', {{ $address }})"
         required
     />
@@ -71,7 +71,7 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_housenumber"
             label="Housenumber"
-            v-model.lazy="{{ $address }}.street[1]"
+            v-model="{{ $address }}.street[1]"
             v-on:change="window.app.$emit('postcode-change', {{ $address }})"
             type="{{ Rapidez::config('customer/address/street_lines', 3) == 3 ? 'number' : 'text' }}"
             required
@@ -81,21 +81,21 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_addition"
             label="Addition"
-            v-model.lazy="{{ $address }}.street[2]"
+            v-model="{{ $address }}.street[2]"
         />
     @endif
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_street"
         label="Street"
-        v-model.lazy="{{ $address }}.street[0]"
+        v-model="{{ $address }}.street[0]"
         required
     />
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_city"
         label="City"
-        v-model.lazy="{{ $address }}.city"
+        v-model="{{ $address }}.city"
         required
     />
 </div>
diff --git a/resources/views/components/newsletter/index.blade.php b/resources/views/components/newsletter/index.blade.php
index 2cf90100..d4c6873c 100644
--- a/resources/views/components/newsletter/index.blade.php
+++ b/resources/views/components/newsletter/index.blade.php
@@ -13,10 +13,10 @@
         @endphp
         <graphql-mutation
             v-cloak
-            query="mutation subscribeNewsletter ($is_subscribed: Boolean!) { updateCustomerV2(input: { is_subscribed: $is_subscribed }) { customer { is_subscribed } } }"
+            :query="user.is_logged_in ? 'mutation subscribeNewsletter ($is_subscribed: Boolean!) { updateCustomerV2(input: { is_subscribed: $is_subscribed }) { customer { is_subscribed } } }' : 'mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }'"
             :alert="false"
             :clear="false"
-            :variables="{ is_subscribed: {{ $subscribedData }} }"
+            :variables="{ is_subscribed: {{ $subscribedData }}, email: {{ $email ?? 'user.email || cart.email' }} }"
             v-slot="{ mutate, variables }"
         >
     @endif
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
index 7f7bb243..708a2a60 100644
--- a/resources/views/components/progress-bar/index.blade.php
+++ b/resources/views/components/progress-bar/index.blade.php
@@ -1,20 +1,19 @@
-@php($steps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code'), config('rapidez.checkout_steps.' . config('rapidez.store_code'), config('rapidez.frontend.checkout_steps.default'), config('rapidez.checkout_steps.default'))))
-<div class="flex items-center space-x-3.5 sm:space-x-[18px] text-xs" v-cloak>
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
+<div class="flex items-center space-x-3.5 sm:space-x-[18px] text-xs">
     <span class="whitespace-nowrap font-medium text-ct-inactive">
         @lang('Step :step out of :total', [
-            'step' => '@{{ checkout.step }}',
-            'total' => count($steps) - 1,
+            'step' => $currentStepKey + 1,
+            'total' => count($checkoutSteps),
         ])
     </span>
-    @foreach (array_slice($steps, 0, -1) as $stepTitle)
-        <div
-            class="aspect-square w-3 rounded"
-            v-on:click="goToStep({{ $stepTitle == 'Credentials' ? 3 : $loop->index }})"
-            :class="{
-                'bg-ct-accent cursor-pointer': {{ $loop->index + 1 }} <= checkout.step,
-                'bg-ct-border pointer-events-none': {{ $loop->index + 1 }} > checkout.step,
-                'outline-4 outline outline-ct-accent/20': {{ $loop->index + 1 }} === checkout.step
-            }"
-        ></div>
+    @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
+        <a href="{{ route('checkout', $checkoutStep) }}" @class([
+            'aspect-square w-3 rounded text-center',
+            'bg-ct-accent cursor-pointer' => $currentStepKey < $checkoutStepKey,
+            'bg-ct-border pointer-events-none' => $checkoutStepKey > $currentStepKey,
+            'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
+        ])>
+            {{ $checkoutStepKey + 1 }}
+        </a>
     @endforeach
 </div>
diff --git a/resources/views/components/title-progress-bar.blade.php b/resources/views/components/title-progress-bar.blade.php
index f9a0e7de..b617dd25 100644
--- a/resources/views/components/title-progress-bar.blade.php
+++ b/resources/views/components/title-progress-bar.blade.php
@@ -1,5 +1,6 @@
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 <div class="flex flex-wrap gap-1 items-baseline justify-between">
-    <x-rapidez-ct::title {{ $attributes }}>
+    <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
         {{ $slot }}
     </x-rapidez-ct::title>
     <x-rapidez-ct::progress-bar />

From 0a7393882dad3af74676c840b38b3ec6484868c4 Mon Sep 17 00:00:00 2001
From: indy koning <indy@justbetter.nl>
Date: Fri, 18 Oct 2024 16:07:59 +0200
Subject: [PATCH 02/10] Add success container

---
 resources/views/checkout/pages/success.blade.php | 7 -------
 resources/views/checkout/steps/success.blade.php | 2 +-
 2 files changed, 1 insertion(+), 8 deletions(-)
 delete mode 100644 resources/views/checkout/pages/success.blade.php

diff --git a/resources/views/checkout/pages/success.blade.php b/resources/views/checkout/pages/success.blade.php
deleted file mode 100644
index afc0791a..00000000
--- a/resources/views/checkout/pages/success.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@extends('rapidez::layouts.app')
-
-@section('title', 'Checkout')
-
-@section('content')
-    @include('rapidez::checkout.steps.success')
-@endsection
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index 651f05c2..261e85dc 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -1,6 +1,6 @@
 @php($checkoutSteps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code')) ?: config('rapidez.frontend.checkout_steps.default'))
 <checkout-success>
-    <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success">
+    <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success" class="container">
         <div class="flex flex-wrap gap-1 items-baseline justify-between">
             <x-rapidez-ct::title>
                 @lang('Thank you for your order')

From e3a870f76166e2b5cdd283d830005a2d5884ebe7 Mon Sep 17 00:00:00 2001
From: indy koning <indy@justbetter.nl>
Date: Mon, 21 Oct 2024 10:23:10 +0200
Subject: [PATCH 03/10] Ensure payment_method composers are triggered

---
 .../core-overwrites/checkout/steps/payment_method.blade.php     | 1 +
 resources/views/checkout/pages/payment.blade.php                | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 resources/core-overwrites/checkout/steps/payment_method.blade.php

diff --git a/resources/core-overwrites/checkout/steps/payment_method.blade.php b/resources/core-overwrites/checkout/steps/payment_method.blade.php
new file mode 100644
index 00000000..d2c21dc1
--- /dev/null
+++ b/resources/core-overwrites/checkout/steps/payment_method.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.steps.payment_method')
\ No newline at end of file
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index 6e626c72..c296a8e5 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -20,7 +20,7 @@ class="contents"
                         ).catch();
                 }"
             >
-                @include('rapidez-ct::checkout.steps.payment_method')
+                @include('rapidez::checkout.steps.payment_method')
             </form>
             <x-slot:sidebar>
                 @include('rapidez-ct::checkout.partials.sidebar.sidebar')

From 1f09d7de54016bb0750973e1b16c4084a363a030 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Fri, 1 Nov 2024 10:21:45 +0000
Subject: [PATCH 04/10] Translation checker workflow (#123)

---
 .github/workflows/translations.yml            | 26 +++++
 lang/nl.json                                  | 94 +++++++++++++++++++
 .../views/cart/partials/top-bar.blade.php     | 10 --
 3 files changed, 120 insertions(+), 10 deletions(-)
 create mode 100644 .github/workflows/translations.yml
 create mode 100644 lang/nl.json
 delete mode 100644 resources/views/cart/partials/top-bar.blade.php

diff --git a/.github/workflows/translations.yml b/.github/workflows/translations.yml
new file mode 100644
index 00000000..1e4a4bb5
--- /dev/null
+++ b/.github/workflows/translations.yml
@@ -0,0 +1,26 @@
+name: Check translations
+
+on:
+  push:
+    branches:
+      - master
+      - '*.x'
+  pull_request:
+
+jobs:
+  translations:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick
+          coverage: none
+      - name: Install dependencies
+        run: composer install --prefer-dist --no-interaction
+      - name: Check translations
+        uses: rapidez/laravel-translation-checker@master
diff --git a/lang/nl.json b/lang/nl.json
new file mode 100644
index 00000000..bc2137ae
--- /dev/null
+++ b/lang/nl.json
@@ -0,0 +1,94 @@
+{
+    "Account features": "Account voordelen",
+    "Account overview": "Account overzicht",
+    "Account registration successful.": "Accountregistratie succesvol.",
+    "Account settings": "Account instellingen",
+    "Add a new address": "Voeg een nieuw adres toe",
+    "Add address and save": "Voeg adres toe en sla op",
+    "Address": "Adres",
+    "Address changed successfully": "Adres succesvol gewijzigd",
+    "Address created successfully": "Adres succesvol aangemaakt",
+    "Address data": "Adresgegevens",
+    "Already logged in": "Al ingelogd",
+    "Amount": "Bedrag",
+    "An email is send with a password reset link if an account exists with the provided email address.": "Een e-mail is verzonden met een link om het wachtwoord te resetten, als er een account bestaat met het opgegeven e-mailadres.",
+    "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
+    "Back to account": "Terug naar account",
+    "Back to cart": "Terug naar winkelwagen",
+    "Back to credentials": "Terug naar inloggegevens",
+    "Back to dashboard": "Terug naar dashboard",
+    "Back to login": "Terug naar inloggen",
+    "Back to my orders": "Terug naar mijn bestellingen",
+    "Back to settings": "Terug naar instellingen",
+    "Change address and save": "Adres wijzigen en opslaan",
+    "Change credentials / Add addresses / Newsletters": "Wijzig gegevens / Voeg adressen toe / Nieuwsbrieven",
+    "Change e-mail address": "E-mailadres wijzigen",
+    "Change password": "Wachtwoord wijzigen",
+    "Changed successfully!": "Succesvol gewijzigd!",
+    "Contact information": "Contactgegevens",
+    "Continue shopping": "Verder winkelen",
+    "Coupon code": "Kortingscode",
+    "Current password": "Huidig wachtwoord",
+    "Customer centre": "Klantenservice",
+    "Default billing address": "Standaard factuuradres",
+    "Default shipping address": "Standaard verzendadres",
+    "Delete address": "Adres verwijderen",
+    "Delivery method": "Bezorgmethode",
+    "Deselect as billing": "Deselecteer als factuuradres",
+    "Deselect as shipping": "Deselecteer als verzendadres",
+    "Don't have an account yet? Create an account and enjoy faster ordering, repeat orders, status of your order, easy returns and more!": "Nog geen account? Maak een account aan en geniet van sneller bestellen, herhaalde bestellingen, bestelstatus, gemakkelijke retouren en meer!",
+    "Edit": "Bewerken",
+    "Email": "E-mail",
+    "Enter your e-mail address": "Voer uw e-mailadres in",
+    "Enter your email address": "Voer uw e-mailadres in",
+    "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 your account": "Ga naar uw account",
+    "Is this not your account?": "Is dit niet uw account?",
+    "Log out": "Uitloggen",
+    "Logout from your account": "Uitloggen van uw account",
+    "My addresses": "Mijn adressen",
+    "New password": "Nieuw wachtwoord",
+    "No account yet? Create an account and benefit instantly from repeat orders, order statuses and easy returns!": "Nog geen account? Maak direct een account aan en profiteer van herhaalde bestellingen, bestelstatus en gemakkelijke retouren!",
+    "No default address has been set yet.": "Er is nog geen standaardadres ingesteld.",
+    "Number of products": "Aantal producten",
+    "Order": "Bestelling",
+    "Order again": "Bestelling herhalen",
+    "Order date": "Besteldatum",
+    "Order overview": "Bestellingsoverzicht",
+    "Ordered within 2 minutes": "Besteld binnen 2 minuten",
+    "Place repeat order / View orders": "Herhaal bestelling / Bekijk bestellingen",
+    "Please select an address": "Selecteer een adres",
+    "Price": "Prijs",
+    "Product": "Product",
+    "Quick and easy ordering without having to fill in your details every time": "Snel en eenvoudig bestellen zonder elke keer uw gegevens in te vullen",
+    "Register": "Registreren",
+    "Register account": "Account registreren",
+    "Register within 1 minute": "Registreer binnen 1 minuut",
+    "Return to home": "Terug naar home",
+    "Security token": "Beveiligingstoken",
+    "Select an address": "Selecteer een adres",
+    "Select as billing": "Selecteer als factuuradres",
+    "Select as shipping": "Selecteer als verzendadres",
+    "Send": "Versturen",
+    "Step :step out of :total": "Stap :step van :total",
+    "Subscribe to newsletter": "Inschrijven voor nieuwsbrief",
+    "Thank you for subscribing": "Bedankt voor uw inschrijving",
+    "Thank you for your order": "Bedankt voor uw bestelling",
+    "This is a business account": "Dit is een zakelijke account",
+    "To checkout": "Naar afrekenen",
+    "Total price": "Totale prijs",
+    "Total price (incl. VAT)": "Totale prijs (incl. BTW)",
+    "Track status of your order and view order history": "Volg de status van uw bestelling en bekijk uw bestelgeschiedenis",
+    "Use a new address": "Gebruik een nieuw adres",
+    "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 your order confirmation to this e-mail address.": "We sturen uw orderbevestiging naar dit e-mailadres.",
+    "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.",
+    "You do not have any orders yet.": "U heeft nog geen bestellingen.",
+    "You will receive this newsletter approximately 2x a year": "U ontvangt deze nieuwsbrief ongeveer 2x per jaar",
+    "Your password has been changed, please login.": "Uw wachtwoord is gewijzigd, log alstublieft in."
+}
diff --git a/resources/views/cart/partials/top-bar.blade.php b/resources/views/cart/partials/top-bar.blade.php
deleted file mode 100644
index 44c8be39..00000000
--- a/resources/views/cart/partials/top-bar.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="flex flex-wrap justify-between items-baseline">
-    <x-rapidez-ct::title tag="h1">
-        @lang('Cart')
-    </x-rapidez-ct::title>
-    <div class="flex wrap">
-        <div>
-            @lang('Step 1 of 4')
-        </div>
-    </div>
-</div>

From 99999cf4a6c81a1a6ffdb44ee9d6bb8b89f9a18c Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:57:22 +0100
Subject: [PATCH 05/10] Update Core requirement

---
 composer.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composer.json b/composer.json
index 5c805237..98d19a9b 100644
--- a/composer.json
+++ b/composer.json
@@ -19,7 +19,7 @@
     "require": {
         "php": "^8.0|^8.1|^8.2",
         "blade-ui-kit/blade-heroicons": "^2.0",
-        "rapidez/core": "^2.0"
+        "rapidez/core": "^3.0"
     },
     "autoload": {
         "psr-4": {

From 6a4ecb0cc873565a625e918e7fde57580dfa22b0 Mon Sep 17 00:00:00 2001
From: Bob <bob@justbetter.nl>
Date: Mon, 4 Nov 2024 11:04:30 +0100
Subject: [PATCH 06/10] Disable checkout button and add notice if not in stock

---
 .../cart/partials/product/description.blade.php |  3 +++
 .../cart/partials/sidebar/summary.blade.php     | 17 +++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/resources/views/cart/partials/product/description.blade.php b/resources/views/cart/partials/product/description.blade.php
index fbdc99a9..18ba9394 100644
--- a/resources/views/cart/partials/product/description.blade.php
+++ b/resources/views/cart/partials/product/description.blade.php
@@ -9,6 +9,9 @@
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
+            <span class="text-red-600 block" v-if="!canOrderCartItem(item)">
+                @lang('This product it out of stock, remove it to continue your order.')
+            </span>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>
diff --git a/resources/views/cart/partials/sidebar/summary.blade.php b/resources/views/cart/partials/sidebar/summary.blade.php
index ed7450b6..90615469 100644
--- a/resources/views/cart/partials/sidebar/summary.blade.php
+++ b/resources/views/cart/partials/sidebar/summary.blade.php
@@ -29,12 +29,17 @@
             <dd>@{{ cart.prices.grand_total.value | price }}</dd>
         </div>
     </x-rapidez-ct::separated-listing>
-
-    <x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 mt-6" dusk="checkout">
-        @lang('To checkout')
-        <x-heroicon-o-arrow-right class="h-4" />
-    </x-rapidez-ct::button.enhanced>
-
+    <div class="w-full" :class="{ 'cursor-not-allowed': !canOrder }">
+        <x-rapidez-ct::button.enhanced 
+            :href="route('checkout')" 
+            class="flex w-full items-center justify-center gap-1 mt-6" 
+            v-bind:class="{ 'pointer-events-none': !canOrder }"
+            dusk="checkout"
+        >
+            @lang('To checkout')
+            <x-heroicon-o-arrow-right class="h-4" />
+        </x-rapidez-ct::button.enhanced>
+    </div>
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
         <x-heroicon-o-check class="h-5 text-ct-accent" />
         @lang('Ordered within 2 minutes')

From 26a25245c7241af925bdb90fb9fd85639a54b093 Mon Sep 17 00:00:00 2001
From: Bob <bob@justbetter.nl>
Date: Mon, 4 Nov 2024 11:07:06 +0100
Subject: [PATCH 07/10] Added translations

---
 lang/nl.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lang/nl.json b/lang/nl.json
index bc2137ae..426fb8c9 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -15,6 +15,7 @@
     "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
+    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "Back to credentials": "Terug naar inloggegevens",
     "Back to dashboard": "Terug naar dashboard",
     "Back to login": "Terug naar inloggen",

From af0db21d509e0319e88958345cd34c0a0687f967 Mon Sep 17 00:00:00 2001
From: Bob Wezelman <bob@justbetter.nl>
Date: Mon, 4 Nov 2024 11:14:32 +0100
Subject: [PATCH 08/10] span to div

---
 resources/views/cart/partials/product/description.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/cart/partials/product/description.blade.php b/resources/views/cart/partials/product/description.blade.php
index 18ba9394..07ed41ca 100644
--- a/resources/views/cart/partials/product/description.blade.php
+++ b/resources/views/cart/partials/product/description.blade.php
@@ -9,9 +9,9 @@
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
-            <span class="text-red-600 block" v-if="!canOrderCartItem(item)">
+            <div class="text-red-600" v-if="!canOrderCartItem(item)">
                 @lang('This product it out of stock, remove it to continue your order.')
-            </span>
+            </div>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>

From 5b561b4c6e969e518e74555d87a0e510743812e6 Mon Sep 17 00:00:00 2001
From: indy koning <indy@justbetter.nl>
Date: Mon, 4 Nov 2024 14:25:08 +0100
Subject: [PATCH 09/10] Rename submit fieldsets function

---
 resources/views/checkout/pages/credentials.blade.php        | 4 ++--
 resources/views/checkout/pages/login.blade.php              | 4 ++--
 resources/views/checkout/pages/payment.blade.php            | 6 +++---
 .../views/checkout/partials/sections/address.blade.php      | 4 ++--
 .../checkout/partials/sections/login/logged-out.blade.php   | 2 +-
 .../views/checkout/partials/sections/payment.blade.php      | 4 ++--
 .../views/checkout/partials/shipping/methods.blade.php      | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index 22e056b3..a7be0f56 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -14,7 +14,7 @@
             <form
                 class="contents"
                 v-on:submit.prevent="(e) => {
-                    submitFieldsets(e.target?.form ?? e.target)
+                    submitPartials(e.target?.form ?? e.target)
                         .then((result) =>
                             window.app.$emit('checkout-credentials-saved')
                             && window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'payment']) }}'))
@@ -37,4 +37,4 @@ class="contents"
             </x-slot:sidebar>
         </x-rapidez-ct::layout>
     </div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
index c5dc7e6e..564366f9 100644
--- a/resources/views/checkout/pages/login.blade.php
+++ b/resources/views/checkout/pages/login.blade.php
@@ -9,11 +9,11 @@
         <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
             @lang('Credentials')
         </x-rapidez-ct::title-progress-bar>
-        
+
         <form
             v-if="hasCart"
             v-on:submit.prevent="(e) => {
-                submitFieldsets(e.target?.form ?? e.target)
+                submitPartials(e.target?.form ?? e.target)
                     .then((result) =>
                         window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'credentials']) }}'))
                     ).catch();
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index c296a8e5..7ae641f9 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -10,10 +10,10 @@
             <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Payment')
             </x-rapidez-ct::title-progress-bar>
-            <form 
+            <form
                 class="contents"
                 v-on:submit.prevent="(e) => {
-                    submitFieldsets(e.target?.form ?? e.target)
+                    submitPartials(e.target?.form ?? e.target)
                         .then((result) =>
                             window.app.$emit('checkout-payment-saved')
                             && window.app.$emit('placeOrder')
@@ -27,4 +27,4 @@ class="contents"
             </x-slot:sidebar>
         </x-rapidez-ct::layout>
     </div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
index 32a9d362..ff13c6b2 100644
--- a/resources/views/checkout/partials/sections/address.blade.php
+++ b/resources/views/checkout/partials/sections/address.blade.php
@@ -22,7 +22,7 @@
             v-slot="{ mutate, variables }"
             v-if="!cart.is_virtual"
         >
-            <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+            <fieldset partial-submit="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
                 @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
             </fieldset>
         </graphql-mutation>
@@ -46,7 +46,7 @@
                 mutate-event="setBillingAddressOnCart"
                 v-slot="{ mutate, variables }"
             >
-                <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                <fieldset partial-submit="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
                     @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
                 </fieldset>
             </graphql-mutation>
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index 5ab83e24..f7e4e3b4 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/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 partial-submit="go" class="flex flex-col gap-3">
         <x-rapidez-ct::input
             label="Email"
             name="email"
diff --git a/resources/views/checkout/partials/sections/payment.blade.php b/resources/views/checkout/partials/sections/payment.blade.php
index 5a6a13a0..eb3459d8 100644
--- a/resources/views/checkout/partials/sections/payment.blade.php
+++ b/resources/views/checkout/partials/sections/payment.blade.php
@@ -11,7 +11,7 @@
         mutate-event="setPaymentMethodOnCart"
         v-slot="{ mutate, variables }"
     >
-        <div data-function="mutate">
+        <div partial-submit="mutate">
             <div v-for="(method, index) in cart.available_payment_methods">
                 @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
             </div>
@@ -39,4 +39,4 @@ class="text-ct-primary cursor-pointer text-sm underline"
                 </x-rapidez-ct::slideover>
             </div>
         </div>
-    </graphql>
\ No newline at end of file
+    </graphql>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index 47110b83..95ec74e3 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -16,7 +16,7 @@
     v-slot="{ mutate, variables }"
     v-if="!cart.is_virtual"
 >
-    <fieldset class="mt-5 flex flex-col gap-2" data-function="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
+    <fieldset class="mt-5 flex flex-col gap-2" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
         <div class="p-5 border rounded bg-white" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
             <x-rapidez-ct::input.radio
                 name="shipping_method"

From 1597a1dbe8e37c2033d6205d210f2dfdfd672bad Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:09:59 +0100
Subject: [PATCH 10/10] Changed breakpoints and checkout fixes (#125)

---
 .../account/partials/address-cards.blade.php  |  6 +-
 .../partials/register-account.blade.php       | 10 +--
 .../cart/partials/product/image.blade.php     |  2 +-
 .../checkout/pages/credentials.blade.php      |  2 +-
 .../checkout/partials/address-card.blade.php  | 86 +++++++++----------
 .../checkout/partials/address-cards.blade.php |  2 +-
 .../partials/buttons/address.blade.php        |  2 +-
 .../partials/buttons/new-address.blade.php    |  2 +-
 .../partials/sections/login.blade.php         | 14 +--
 .../sections/login/logged-out.blade.php       | 26 +++---
 .../partials/sidebar/summary.blade.php        |  2 +-
 .../views/components/address-form.blade.php   |  2 +-
 .../views/components/card/index.blade.php     |  2 +-
 .../views/components/input/checkbox.blade.php |  2 +-
 .../views/components/input/password.blade.php |  1 -
 .../views/components/layout/index.blade.php   |  2 +-
 .../views/components/layout/sidebar.blade.php |  2 +-
 .../components/layout/two-column.blade.php    |  2 +-
 .../views/components/title/base.blade.php     |  2 +-
 19 files changed, 83 insertions(+), 86 deletions(-)

diff --git a/resources/views/account/partials/address-cards.blade.php b/resources/views/account/partials/address-cards.blade.php
index ab2d70c2..4d17f1a3 100644
--- a/resources/views/account/partials/address-cards.blade.php
+++ b/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>
diff --git a/resources/views/account/partials/register-account.blade.php b/resources/views/account/partials/register-account.blade.php
index 4c13cf7e..6db59188 100644
--- a/resources/views/account/partials/register-account.blade.php
+++ b/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
diff --git a/resources/views/cart/partials/product/image.blade.php b/resources/views/cart/partials/product/image.blade.php
index 0995d6f7..dc720ec2 100644
--- a/resources/views/cart/partials/product/image.blade.php
+++ b/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>
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index a7be0f56..70ece139 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/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>
diff --git a/resources/views/checkout/partials/address-card.blade.php b/resources/views/checkout/partials/address-card.blade.php
index da46f182..e59f4422 100644
--- a/resources/views/checkout/partials/address-card.blade.php
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/address-cards.blade.php b/resources/views/checkout/partials/address-cards.blade.php
index 389222a2..3525c981 100644
--- a/resources/views/checkout/partials/address-cards.blade.php
+++ b/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">
diff --git a/resources/views/checkout/partials/buttons/address.blade.php b/resources/views/checkout/partials/buttons/address.blade.php
index cac66a07..b99be4cb 100644
--- a/resources/views/checkout/partials/buttons/address.blade.php
+++ b/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>
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index fd89f45d..5bd4fed9 100644
--- a/resources/views/checkout/partials/buttons/new-address.blade.php
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/login.blade.php b/resources/views/checkout/partials/sections/login.blade.php
index 9972543e..74e9638e 100644
--- a/resources/views/checkout/partials/sections/login.blade.php
+++ b/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>
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index f7e4e3b4..a54a4c2b 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -1,5 +1,5 @@
 <checkout-login v-slot="checkoutLogin">
-    <fieldset partial-submit="go" class="flex flex-col gap-3">
+    <fieldset partial-submit="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>
diff --git a/resources/views/checkout/partials/sidebar/summary.blade.php b/resources/views/checkout/partials/sidebar/summary.blade.php
index b5cbef46..5ca753f5 100644
--- a/resources/views/checkout/partials/sidebar/summary.blade.php
+++ b/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">
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index fd130706..3b02842e 100644
--- a/resources/views/components/address-form.blade.php
+++ b/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
diff --git a/resources/views/components/card/index.blade.php b/resources/views/components/card/index.blade.php
index 9cfab734..138659ed 100644
--- a/resources/views/components/card/index.blade.php
+++ b/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>
diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index 3331475a..571355b3 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/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>
diff --git a/resources/views/components/input/password.blade.php b/resources/views/components/input/password.blade.php
index 345eba1b..cdc8cfab 100644
--- a/resources/views/components/input/password.blade.php
+++ b/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)
diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
index 1a5a06d8..55459e62 100644
--- a/resources/views/components/layout/index.blade.php
+++ b/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>
diff --git a/resources/views/components/layout/sidebar.blade.php b/resources/views/components/layout/sidebar.blade.php
index beb51706..40af6b48 100644
--- a/resources/views/components/layout/sidebar.blade.php
+++ b/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>
diff --git a/resources/views/components/layout/two-column.blade.php b/resources/views/components/layout/two-column.blade.php
index 5be568a4..c8a77c9b 100644
--- a/resources/views/components/layout/two-column.blade.php
+++ b/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>
diff --git a/resources/views/components/title/base.blade.php b/resources/views/components/title/base.blade.php
index 2c99abd0..4c7e618f 100644
--- a/resources/views/components/title/base.blade.php
+++ b/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>