From 84f5d52a7e8f9935cde20a9fd35126c9fc4ead0e Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Thu, 12 Dec 2024 17:03:41 +0100
Subject: [PATCH] Rapidez v3 support (#28)

---
 composer.json                                 |   2 +-
 resources/shipping-icons/default.svg          |   3 +
 resources/views/cart/coupon.blade.php         |   2 +-
 .../partials/product/remove-button.blade.php  |   2 +-
 .../checkout/pages/credentials.blade.php      |  45 ++++++++
 .../views/checkout/pages/login.blade.php      |  44 ++++++++
 .../views/checkout/pages/payment.blade.php    |  57 ++++++++++
 .../views/checkout/partials/header.blade.php  |  25 ++---
 .../views/checkout/partials/layout.blade.php  |  23 ----
 .../partials/sections/address.blade.php       |  60 +++++++++--
 .../sections/login/logged-out.blade.php       | 100 +++++++++++++-----
 .../payment/agreement-checkbox.blade.php      |   3 +-
 .../payment/payment-methods.blade.php         |  16 ---
 .../partials/sections/shipping.blade.php      |  10 +-
 .../success/order-completed-note.blade.php    |  14 ++-
 .../sections/success/order-info.blade.php     |  86 ++++++++-------
 .../success/product-quantity.blade.php        |   4 +-
 .../sections/success/products.blade.php       |  52 +++++----
 .../shipping-billing-fields.blade.php         |  22 ++--
 .../partials/shipping/methods.blade.php       |  72 ++++++++-----
 .../partials/sidebar/products.blade.php       |   2 +-
 .../partials/sidebar/sidebar.blade.php        |   2 +-
 .../sidebar/success-sidebar.blade.php         |   9 ++
 .../checkout/steps/credentials.blade.php      |  32 +++---
 .../views/checkout/steps/payment.blade.php    |  19 ----
 .../checkout/steps/payment_method.blade.php   |   5 +
 .../views/checkout/steps/success.blade.php    |  45 ++++----
 .../views/components/address-form.blade.php   |  24 ++---
 .../components/button/inactive.blade.php      |   2 +-
 .../views/components/card/white.blade.php     |   5 +-
 .../views/components/coupon-field.blade.php   |   2 +-
 .../views/components/input/checkbox.blade.php |   2 +-
 .../views/components/input/index.blade.php    |   2 +-
 .../components/layout/checkout.blade.php      |  21 ++--
 .../views/components/layout/index.blade.php   |   2 +-
 .../components/progress-bar/index.blade.php   |  25 +++--
 .../views/components/sections/index.blade.php |   2 +-
 .../separated-listing/index.blade.php         |   4 +-
 .../views/components/slide-in/index.blade.php |   2 +-
 resources/views/components/summary.blade.php  |  22 ++--
 .../components/title-progress-bar.blade.php   |   8 ++
 src/ConfiraServiceProvider.php                |   4 +
 42 files changed, 554 insertions(+), 329 deletions(-)
 create mode 100644 resources/shipping-icons/default.svg
 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
 delete mode 100644 resources/views/checkout/partials/layout.blade.php
 delete mode 100644 resources/views/checkout/partials/sections/payment/payment-methods.blade.php
 create mode 100644 resources/views/checkout/partials/sidebar/success-sidebar.blade.php
 delete mode 100644 resources/views/checkout/steps/payment.blade.php
 create mode 100644 resources/views/checkout/steps/payment_method.blade.php
 create mode 100644 resources/views/components/title-progress-bar.blade.php

diff --git a/composer.json b/composer.json
index 71db978..1e5ef04 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,7 @@
     "prefer-stable": true,
     "require": {
         "php": "^8.1|^8.2",
-        "rapidez/checkout-theme": "^2.11"
+        "rapidez/checkout-theme": "^3.0"
     },
     "autoload": {
         "psr-4": {
diff --git a/resources/shipping-icons/default.svg b/resources/shipping-icons/default.svg
new file mode 100644
index 0000000..806eb5a
--- /dev/null
+++ b/resources/shipping-icons/default.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+</svg>
diff --git a/resources/views/cart/coupon.blade.php b/resources/views/cart/coupon.blade.php
index 524c3df..4adcd6a 100644
--- a/resources/views/cart/coupon.blade.php
+++ b/resources/views/cart/coupon.blade.php
@@ -4,7 +4,7 @@
             <x-rapidez-ct::coupon-field />
             <template v-if="cart.applied_coupons?.length" v-for="coupon in cart.applied_coupons" v-cloak>
                 <graphql-mutation
-                    :query="'mutation ($cart_id: String!) { removeCouponFromCart(input: { cart_id: $cart_id }) { cart { ' + config.queries.cart + ' } } }'"
+                    :query="'mutation ($cart_id: String!) { removeCouponFromCart(input: { cart_id: $cart_id })  { ...cart } } ' + config.fragments.cart"
                     :variables="{ cart_id: mask }"
                     :callback="updateCart"
                     :error-callback="checkResponseForExpiredCart"
diff --git a/resources/views/cart/partials/product/remove-button.blade.php b/resources/views/cart/partials/product/remove-button.blade.php
index 3ac5775..10e2028 100644
--- a/resources/views/cart/partials/product/remove-button.blade.php
+++ b/resources/views/cart/partials/product/remove-button.blade.php
@@ -1,5 +1,5 @@
 <graphql-mutation
-    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { cart { ' + config.queries.cart + ' } } }'"
+    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id })  { ...cart } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, cart_item_id: item.id }"
     :notify="{ message: item.product.name+' '+config.translations.cart.remove }"
     :callback="updateCart"
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
new file mode 100644
index 0000000..4a4897a
--- /dev/null
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -0,0 +1,45 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="overflow-clip">
+        <div class="container">
+            <x-rapidez-ct::layout.checkout>
+                <x-slot:header>
+                    @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
+                </x-slot:header>
+                <x-rapidez-ct::title-progress-bar :$checkoutSteps :$currentStep :$currentStepKey>
+                    @lang('Credentials')
+                </x-rapidez-ct::title-progress-bar>
+
+                <form
+                    class="contents"
+                    v-on:submit.prevent="(e) => {
+                        submitPartials(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.enhanced loader>
+                            @lang('Next')
+                        </x-rapidez-ct::button.enhanced>
+                    </x-rapidez-ct::toolbar>
+                </form>
+                <x-slot:sidebar>
+                    @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+                </x-slot:sidebar>
+            </x-rapidez-ct::layout.checkout>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
new file mode 100644
index 0000000..1c1ed43
--- /dev/null
+++ b/resources/views/checkout/pages/login.blade.php
@@ -0,0 +1,44 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="overflow-clip">
+        <div class="container">
+            <x-rapidez-ct::layout.checkout>
+                <x-slot:header>
+                    @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
+                </x-slot:header>
+                
+                <x-rapidez-ct::title-progress-bar :$checkoutSteps :$currentStep :$currentStepKey>
+                    @lang('Credentials')
+                </x-rapidez-ct::title-progress-bar>
+
+                <form
+                    v-if="hasCart"
+                    v-on:submit.prevent="(e) => {
+                        submitPartials(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::toolbar>
+                        <x-rapidez-ct::button.outline :href="route('cart')">
+                            @lang('Back to cart')
+                        </x-rapidez-ct::button.outline>
+
+                        <x-rapidez-ct::button.enhanced loader type="submit" dusk="continue" >
+                            @lang('Next')
+                        </x-rapidez-ct::button.enhanced>
+                    </x-rapidez-ct::toolbar>
+                </form>
+            </x-rapidez-ct::layout.checkout>
+        </div>
+    </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 0000000..c38caa0
--- /dev/null
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -0,0 +1,57 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="overflow-clip">
+        <div class="container">
+            <x-rapidez-ct::layout.checkout>
+                <x-slot:header>
+                    @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
+                </x-slot:header>
+
+                <x-rapidez-ct::title-progress-bar :$checkoutSteps :$currentStep :$currentStepKey>
+                    @lang('Payment')
+                </x-rapidez-ct::title-progress-bar>
+                
+                <form
+                    class="contents"
+                    v-on:submit.prevent="(e) => {
+                        submitPartials(e.target?.form ?? e.target)
+                            .then((result) =>
+                                window.app.$emit('checkout-payment-saved')
+                                && window.app.$emit('placeOrder')
+                            ).catch();
+                    }"
+                >
+                    @include('rapidez::checkout.steps.payment_method')
+                    <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.enhanced class="relative" type="submit" dusk="continue" loader>
+                                    @lang('Place order')
+                                </x-rapidez-ct::button.enhanced>
+                            </fieldset>
+                        </graphql-mutation>
+                    </x-rapidez-ct::toolbar>
+                </form>
+                <x-slot:sidebar>
+                    @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+                </x-slot:sidebar>
+            </x-rapidez-ct::layout.checkout>
+        </div>
+    </div>
+@endsection
diff --git a/resources/views/checkout/partials/header.blade.php b/resources/views/checkout/partials/header.blade.php
index 81b94f8..acc45f9 100644
--- a/resources/views/checkout/partials/header.blade.php
+++ b/resources/views/checkout/partials/header.blade.php
@@ -1,25 +1,26 @@
-@include('rapidez-ct::components.slide-in.receipt')
+<div class="lg:hidden">
+    @include('rapidez-ct::components.slide-in.receipt')
+</div>
 <div class="flex flex-wrap gap-y-3 max-xl:-mt-5 xl:mr-20">
-    <x-rapidez-ct::button.outline v-if="checkout.step == 2" class="flex items-center justify-center !p-0 w-12 h-12 lg:hidden" :href="route('cart')">
-        <x-heroicon-o-arrow-long-left class="w-6 h-6"/>
-    </x-rapidez-ct::button.outline>
-    <x-rapidez-ct::button.outline v-else class="flex items-center justify-center !p-0 w-12 h-12 lg:hidden" v-on:click.prevent="goToStep(1)">
-        <x-heroicon-o-arrow-long-left class="w-6 h-6"/>
-    </x-rapidez-ct::button.outline>
+    @isset($href)
+        <x-rapidez-ct::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
+            <x-heroicon-o-arrow-long-left class="size-6"/>
+        </x-rapidez-ct::button.outline>
+    @endif
 
-    <div class="flex lg:w-24 [&>*]:w-auto [&>*]:h-auto max-lg:flex-1 max-lg:h-12">
-        <a href="{{ url('/') }}" class="sticky top-0 max-lg:mx-5 flex items-center lg:self-start max-lg:flex-1 lg:pt-4">
-            <div class="w-inherit flex-1">
+    <div class="flex lg:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
+        <a href="{{ url('/') }}" class="sticky top-0 max-lg:mx-5 flex items-center lg:self-start max-lg:flex-1 lg:pt-4 max-w-full">
+            <div class="w-inherit flex-1 *:w-auto *:h-auto *:max-w-full max-w-full h-full *:max-h-full">
                 <x-rapidez-ct::logo />
             </div>
         </a>
     </div>
     <x-rapidez-ct::button.inactive for="slide-in" class="lg:hidden">
         <span class="relative">
-            <span class="absolute flex items-center justify-center w-4 h-4 -right-2 -top-1.5 rounded-full bg-ct-primary text-white text-xs">
+            <span class="absolute flex items-center font-semibold justify-center size-4 -right-2 -top-1.5 rounded-full bg-ct-primary text-white text-xs">
                 @{{ Math.round(cart.total_quantity) }}
             </span>
-            <x-heroicon-o-shopping-cart class="w-6 h-6"/>
+            <x-heroicon-o-shopping-cart class="size-6"/>
         </span>
         @lang('My order')
     </x-rapidez-ct::button.inactive>
diff --git a/resources/views/checkout/partials/layout.blade.php b/resources/views/checkout/partials/layout.blade.php
deleted file mode 100644
index b3b62ad..0000000
--- a/resources/views/checkout/partials/layout.blade.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<template v-if="checkout.step !== 4">
-    <x-rapidez-ct::layout.checkout>
-        <x-slot:header>
-            @include('rapidez-ct::checkout.partials.header')
-        </x-slot:header>
-
-        <template v-if="checkout.step == 2 && $root.cart?.total_quantity">
-            @include('rapidez-ct::checkout.steps.credentials')
-        </template>
-
-        <template v-if="checkout.step == 3">
-            @include('rapidez-ct::checkout.steps.payment')
-        </template>
-
-        <x-slot:sidebar>
-            @include('rapidez-ct::checkout.partials.sidebar.sidebar')
-        </x-slot:sidebar>
-    </x-rapidez-ct::layout.checkout>
-</template>
-
-<template v-if="checkout.step == 4">
-    @include('rapidez-ct::checkout.steps.success')
-</template>
diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
index 62fb6f5..c6f61c7 100644
--- a/resources/views/checkout/partials/sections/address.blade.php
+++ b/resources/views/checkout/partials/sections/address.blade.php
@@ -1,14 +1,52 @@
-<checkout-address v-slot="{ useCards, editing, toggleEdit, isType, select }">
-    <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>
+<checkout-address v-slot="{ useCards, editing, toggleEdit }">
+    <div class="contents">
+        <template v-if="useCards && !editing">
+            @include('rapidez-ct::checkout.partials.address-cards')
+            @include('rapidez-ct::checkout.partials.buttons.address')
+        </template>
 
-    <x-rapidez-ct::card.inactive v-else>
-        @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
+        <template v-else>
+            <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"
+                :callback="updateCart"
+                :error-callback="checkResponseForExpiredCart"
+                :watch="false"
+                mutate-event="setShippingAddressesOnCart"
+                v-slot="{ mutate, variables }"
+                v-if="!cart.is_virtual"
+            >
+                <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>
 
-        <div class="mt-9 pt-7 border-t border-dashed" v-if="!checkout.hide_billing">
-            @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
-        </div>
-    </x-rapidez-ct::card.inactive>
+            <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
+                }))"
+                :callback="updateCart"
+                :error-callback="checkResponseForExpiredCart"
+                :watch="false"
+                group="billing"
+                mutate-event="setBillingAddressOnCart"
+                v-slot="{ mutate, variables }"
+            >
+                <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>
+        </template>
+    </div>
 </checkout-address>
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 b05229f..3811495 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,73 @@
-<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 partial-submit="go" class="contents">
+        <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')"
+        />
 
-    <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>
 
-<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.primary v-if="!emailAvailable" v-on:click.prevent="go" dusk="continue">
-    @lang('Login')
-</x-rapidez-ct::button.primary>
+        <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
+            <x-rapidez-ct::input.password
+                label="Password"
+                name="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.')
+            <a href="{{ route('account.forgotpassword') }}" class="underline hover:no-underline">@lang('Forgot your password?')</a>
+        </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.password
+                label="Repeat password"
+                name="password_repeat"
+                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">
+            <div class="col-span-full">
+                <x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
+                    @lang('Create an account')
+                </x-rapidez-ct::input.checkbox>
+            </div>
+        </template>
+
+        <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>
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 5a6ea04..33997d9 100644
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
@@ -1,11 +1,10 @@
 <x-rapidez-ct::input.checkbox
     name="agreement_ids[]"
     v-bind:value="agreement.agreement_id"
-    v-model="checkout.agreement_ids"
     dusk="agreements"
     required
 >
     <label class="text-ct-neutral cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
         @{{ agreement.checkbox_text }}
     </label>
-</x-rapidez-ct::input.checkbox>
\ No newline at end of file
+</x-rapidez-ct::input.checkbox>
diff --git a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
deleted file mode 100644
index d27ddeb..0000000
--- a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<x-rapidez-ct::input.radio
-    name="payment_method"
-    class="!py-7"
-    v-bind:value="method.code"
-    v-bind:dusk="'method-'+index"
-    v-model="checkout.payment_method"
-    required
->
-    <div class="text-ct-neutral font-medium">@{{ method.title }}</div>
-    <img
-        class="max-h-6"
-        v-bind:alt="method.code"
-        v-bind:src="`/vendor/payment-icons/${method.code}.svg`"
-        onerror="this.onerror=null; this.src='/vendor/payment-icons/default.svg'"
-    />
-</x-rapidez-ct::input.radio>
diff --git a/resources/views/checkout/partials/sections/shipping.blade.php b/resources/views/checkout/partials/sections/shipping.blade.php
index 63ba523..550e86a 100644
--- a/resources/views/checkout/partials/sections/shipping.blade.php
+++ b/resources/views/checkout/partials/sections/shipping.blade.php
@@ -1,7 +1,5 @@
-<x-rapidez-ct::card.inactive>
-    <p class="text-ct-inactive font-medium text-base">
-        @lang('Shipping method')
-    </p>
+<x-rapidez-ct::title.lg class="mb-5">
+    @lang('Shipping method')
+</x-rapidez-ct::title.lg>
 
-    @include('rapidez-ct::checkout.partials.shipping.methods')
-</x-rapidez-ct::card.inactive>
+@include('rapidez-ct::checkout.partials.shipping.methods')
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 e484bd9..941159f 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
@@ -1,8 +1,6 @@
-<x-rapidez-ct::card.inactive class="!bg-ct-primary-100 py-8 px-6 rounded-xl !border-b-0">
-    <p class="text-base text-ct-neutral font-medium">
-        @lang('We will get to work for you right away')
-    </p>
-    <p class="mt-2 text-sm">
-        @lang('We will send a confirmation of your order :orderid to <strong>:email</strong>', ['orderid' => '@{{ order.increment_id }}', 'email' => '@{{ order.customer_email }}'])
-    </p>
-</x-rapidez-ct::card.inactive>
+<p class="text-base text-ct-neutral font-medium">
+    @lang('We will get to work for you right away')
+</p>
+<p class="mt-2 text-sm">
+    @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.number }}', 'email' => '<strong>@{{ order.email }}</strong>'])
+</p>
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 e10016d..656c99d 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -1,48 +1,46 @@
-<x-rapidez-ct::card.inactive>
-    <div class="flex flex-col">
-        <checkout-success-addresses :order="order">
-            <div slot-scope="{ hideBilling, shipping, billing, pickup }" class="flex flex-1 border-t border-dashed justify-between pt-5">
-                <template v-if="hideBilling">
-                    <x-rapidez-ct::card.address-alt v-bind:address="shipping" shipping billing />
-                </template>
-                <x-rapidez-ct::card.address-alt v-if="pickup" v-bind:address="pickup" custom-title="Pickup address"/>
-                <x-rapidez-ct::card.address-alt v-if="!hideBilling && shipping" v-bind:address="shipping" shipping/>
-                <x-rapidez-ct::card.address-alt v-if="!hideBilling && billing" v-bind:address="billing" billing/>
-            </div>
-        </checkout-success-addresses>
-        <div class="flex flex-1 border-t border-dashed justify-between pt-5 mt-6">
-            <div class="flex-1">
-                <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
-                    @lang('Payment method')
-                </p>
-                <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 }}
-                        </li>
-                    </ul>
-                    @if (!empty($slot))
-                        <div class="mt-auto flex flex-col self-end">
-                            {{ $slot }}
-                        </div>
-                    @endif
-                </div>
+<div class="flex flex-col *:gap-x-4">
+    <checkout-success-addresses :order="order">
+        <div slot-scope="{ hideBilling, shipping, billing, pickup }" class="flex flex-1 border-t border-dashed justify-between pt-5">
+            <template v-if="hideBilling">
+                <x-rapidez-ct::card.address-alt v-bind:address="shipping" shipping billing />
+            </template>
+            <x-rapidez-ct::card.address-alt v-if="pickup" v-bind:address="pickup" custom-title="Pickup address"/>
+            <x-rapidez-ct::card.address-alt v-if="!hideBilling && shipping" v-bind:address="shipping" shipping/>
+            <x-rapidez-ct::card.address-alt v-if="!hideBilling && billing" v-bind:address="billing" billing/>
+        </div>
+    </checkout-success-addresses>
+    <div class="flex flex-1 border-t border-dashed justify-between pt-5 mt-6">
+        <div class="flex-1">
+            <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
+                @lang('Payment method')
+            </p>
+            <div class="flex flex-1 flex-wrap justify-between">
+                <ul class="flex flex-col gap-1">
+                    <li v-for="method in order.payment_methods">
+                        @{{ method.name || method.type }}
+                    </li>
+                </ul>
+                @if (!empty($slot))
+                    <div class="mt-auto flex flex-col self-end">
+                        {{ $slot }}
+                    </div>
+                @endif
             </div>
-            <div class="flex-1">
-                <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
-                    @lang('Delivery method')
-                </p>
-                <div class="flex flex-1 flex-wrap justify-between">
-                    <ul class="flex flex-col gap-1">
-                        <li v-text="order.shipping_description"></li>
-                    </ul>
-                    @if (!empty($slot))
-                        <div class="mt-auto flex flex-col self-end">
-                            {{ $slot }}
-                        </div>
-                    @endif
-                </div>
+        </div>
+        <div class="flex-1">
+            <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
+                @lang('Delivery method')
+            </p>
+            <div class="flex flex-1 flex-wrap justify-between">
+                <ul class="flex flex-col gap-1">
+                    <li v-text="order.shipping_method"></li>
+                </ul>
+                @if (!empty($slot))
+                    <div class="mt-auto flex flex-col self-end">
+                        {{ $slot }}
+                    </div>
+                @endif
             </div>
         </div>
     </div>
-</x-rapidez-ct::card.inactive>
+</div>
diff --git a/resources/views/checkout/partials/sections/success/product-quantity.blade.php b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
index 53c2fe8..be8df23 100644
--- a/resources/views/checkout/partials/sections/success/product-quantity.blade.php
+++ b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
@@ -1,5 +1,5 @@
 <div class="flex items-center justify-between gap-10 font-medium max-md:flex-1 md:ml-auto">
-    <div class="h-12 w-16 border flex items-center rounded-full justify-center text-ct-neutral shadow text-base">
-        @{{ Math.round(item.qty_ordered) }}
+    <div class="h-12 w-16 border flex items-center rounded-md justify-center text-ct-neutral ring ring-ct-inactive-100 text-base">
+        @{{ Math.round(item.quantity_ordered) }}
     </div>
 </div>
diff --git a/resources/views/checkout/partials/sections/success/products.blade.php b/resources/views/checkout/partials/sections/success/products.blade.php
index 825aa79..4170c20 100644
--- a/resources/views/checkout/partials/sections/success/products.blade.php
+++ b/resources/views/checkout/partials/sections/success/products.blade.php
@@ -1,24 +1,32 @@
-<p class="text-base font-medium text-inactive !border-b-0 !pb-0 !mb-4">@lang('You ordered this'):</p>
-<ul class="flex flex-col divide-y !pb-0 [&>:first-child]:pt-0 [&>:first-child]:border-t-0">
-    <li v-for="(item, productId, index) in order.sales_order_items" class="flex py-5">
-        <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm md:gap-x-6 md:pr-6 lg:items-start">
-            <div class="flex h-24 items-center justify-center">
-                <img
-                    class="max-h-24"
-                    :alt="item.name"
-                    :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.sku}`"
-                    height="100"
-                    v-if="item.sku"
-                >
-                <x-rapidez::no-image v-else class="h-24 w-24"/>
-            </div>
-            <div class="flex w-36 flex-1 flex-col items-start">
-                <a :href="item.url" class="text-ct-neutral text-base font-medium" dusk="cart-item-name">@{{ item.name }}</a>
-                <div class="text-sm text-inactive" v-for="(optionValue, option) in item.options">
-                    @{{ option }}: @{{ optionValue }}
+<div class="!pt-0">
+    <p class="text-base font-medium text-inactive mb-4">@lang('You ordered this'):</p>
+    <ul class="flex flex-col divide-y divide-dashed first:*:pt-0 last:*:pb-0">
+        <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 md:gap-x-6 lg:items-start">
+                <div class="flex h-24 items-center justify-center">
+                    <img
+                        class="max-h-24"
+                        :alt="item.product_name"
+                        :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
+                        height="100"
+                        v-if="item.product_sku"
+                    >
+                    <x-rapidez::no-image v-else class="size-24"/>
+                </div>
+                <div class="flex flex-1 flex-wrap justify-between gap-x-6 items-start">
+                    <div class="flex-1">
+                        <a class="font-medium" :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
+                        <div v-for="option in item.selected_options" class="text-inactive">
+                            @{{ option.label }}: @{{ option.value }}
+                        </div>
+                        <div v-for="option in item.entered_options" class="text-inactive">
+                            @{{ option.label }}: @{{ option.value }}
+                        </div>
+                    </div>
+
+                    @include('rapidez-ct::checkout.partials.sections.success.product-quantity')
                 </div>
             </div>
-            @include('rapidez-ct::checkout.partials.sections.success.product-quantity')
-        </div>
-    </li>
-</ul>
+        </li>
+    </ul>   
+</div>
diff --git a/resources/views/checkout/partials/shipping-billing-fields.blade.php b/resources/views/checkout/partials/shipping-billing-fields.blade.php
index d424783..c313ab7 100644
--- a/resources/views/checkout/partials/shipping-billing-fields.blade.php
+++ b/resources/views/checkout/partials/shipping-billing-fields.blade.php
@@ -1,16 +1,20 @@
-<p class="flex flex-wrap gap-3 justify-between items-center mb-5 text-base text-ct-inactive font-medium">
-    @if ($type == 'shipping')
+@if ($type == 'shipping')
+    <x-rapidez-ct::title.lg class="mb-5">
         @lang('Shipping address')
-    @else
+    </x-rapidez-ct::title.lg>
+@else
+    <x-rapidez-ct::title.lg class="mb-5 mt-9 pt-7 border-t border-dashed" v-if="!variables.same_as_shipping" v-cloak>   
         @lang('Billing address')
-    @endif
-</p>
+    </x-rapidez-ct::title.lg>
+@endif
 
-<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 4f2f437..586d053 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -1,25 +1,49 @@
-<div v-for="(method, index) in checkout.shipping_methods" class="mt-4 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"
-        class="!py-4"
-        required
-    >
-        <div class="flex flex-col md:w-3/5">
-            <span class="text-ct-neutral font-medium text-base">@{{ method.carrier_title }}</span>
-            <span class="text-ct-inactive text-sm">@{{ method.method_title }}</span>
+
+<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="flex flex-col gap-2" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
+        <div v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods" class="flex flex-col gap-2">
+            <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"
+                class="!py-4"
+                required
+            >
+                <div class="flex flex-col md:w-3/5">
+                    <span class="text-ct-neutral font-medium text-base">@{{ method.carrier_title }}</span>
+                    <span class="text-ct-inactive text-sm">@{{ method.method_title }}</span>
+                </div>
+                <div class="text-right text-sm font-medium shrink-0">
+                    <img
+                        width="32"
+                        height="32"
+                        class="max-h-8"
+                        v-bind:alt="method.carrier_title"
+                        v-bind:src="`/vendor/shipping-icons/${method.carrier_title}.svg`"
+                        onerror="this.onerror=null; this.src='/vendor/shipping-icons/default.svg'"
+                    />
+                </div>
+            </x-rapidez-ct::input.radio>
         </div>
-        <div class="text-right text-sm font-medium">
-            <img
-                width="32"
-                height="32"
-                class="max-h-8"
-                v-bind:alt="method.carrier_title"
-                v-bind:src="`/vendor/shipping-icons/${method.carrier_title}.svg`"
-                onerror="this.onerror=null; this.src='/vendor/shipping-icons/default.svg'"
-            />
-        </div>
-    </x-rapidez-ct::input.radio>
-</div>
+    </fieldset>
+</graphql-mutation>
diff --git a/resources/views/checkout/partials/sidebar/products.blade.php b/resources/views/checkout/partials/sidebar/products.blade.php
index 257c48a..dcd396b 100644
--- a/resources/views/checkout/partials/sidebar/products.blade.php
+++ b/resources/views/checkout/partials/sidebar/products.blade.php
@@ -1,5 +1,5 @@
 <toggler>
-    <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5">
+    <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5 bg-ct-primary-100">
         <div v-for="(item, index) in cart.items" v-show="isOpen || index < 2" class="flex gap-3">
             <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
             <div class="flex flex-col">
diff --git a/resources/views/checkout/partials/sidebar/sidebar.blade.php b/resources/views/checkout/partials/sidebar/sidebar.blade.php
index 71fc02c..6d39bca 100644
--- a/resources/views/checkout/partials/sidebar/sidebar.blade.php
+++ b/resources/views/checkout/partials/sidebar/sidebar.blade.php
@@ -8,7 +8,7 @@
 
 @include('rapidez-ct::cart.partials.sidebar.payment')
 @include('rapidez-ct::cart.partials.sidebar.usps')
-<div class="mt-5 flex flex-wrap justify-between border-y border-dashed py-5">
+<div class="mt-5 flex flex-wrap justify-between border-y border-dashed py-5 empty:hidden">
     @include('rapidez-ct::checkout.partials.sidebar.user-info')
 </div>
 @include('rapidez-ct::checkout.partials.sidebar.bottom-links')
diff --git a/resources/views/checkout/partials/sidebar/success-sidebar.blade.php b/resources/views/checkout/partials/sidebar/success-sidebar.blade.php
new file mode 100644
index 0000000..254afcd
--- /dev/null
+++ b/resources/views/checkout/partials/sidebar/success-sidebar.blade.php
@@ -0,0 +1,9 @@
+<x-rapidez-ct::title.xl class="mb-4">
+    @lang('Overview')
+</x-rapidez-ct::title.xl>
+
+<x-rapidez-ct::summary type="order" />
+
+@include('rapidez-ct::cart.partials.sidebar.payment')
+@include('rapidez-ct::cart.partials.sidebar.usps')
+@include('rapidez-ct::checkout.partials.sections.success.order-info')
\ No newline at end of file
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index fd9595e..afd3c1d 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -1,22 +1,16 @@
-<x-rapidez-ct::title-progress-bar>
-    @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')
+<x-rapidez-ct::sections>
+    @unless (in_array('login', $checkoutSteps))
+        <x-rapidez-ct::card.inactive>
+            @include('rapidez-ct::checkout.partials.sections.login')
+        </x-rapidez-ct::card.inactive>
+    @endunless
+    <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.address')
+    </x-rapidez-ct::card.inactive>
+    <x-rapidez-ct::card.inactive class="[&_label]:ring-ct-inactive-100 [&_label]:ring">
         @include('rapidez-ct::checkout.partials.sections.newsletter')
+    </x-rapidez-ct::card.inactive>
+    <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.shipping')
-    </x-rapidez-ct::sections>
-</form>
-
-<x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline :href="route('cart')" class="flex justify-center items-center !p-0 w-12 h-12 max-lg:hidden">
-        <x-heroicon-o-arrow-long-left class="w-6 h-6"/>
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.enhanced class="relative w-full lg:w-1/2" form="credentials" loader>
-        @lang('Continue')
-    </x-rapidez-ct::button.enhanced>
-</x-rapidez-ct::toolbar>
+    </x-rapidez-ct::card.inactive>
+</x-rapidez-ct::sections>
diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
deleted file mode 100644
index f05bd66..0000000
--- a/resources/views/checkout/steps/payment.blade.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<x-rapidez-ct::title-progress-bar>
-    @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)" class="flex justify-center items-center !p-0 w-12 h-12 max-lg:hidden">
-        <x-heroicon-o-arrow-long-left class="w-6 h-6"/>
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.enhanced class="relative w-full lg:w-1/2" form="payment" type="submit" dusk="continue" loader>
-        @lang('Place order')
-    </x-rapidez-ct::button.enhanced>
-</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 0000000..e0139e6
--- /dev/null
+++ b/resources/views/checkout/steps/payment_method.blade.php
@@ -0,0 +1,5 @@
+<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>
\ No newline at end of file
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index 142aaf2..919b2da 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -1,29 +1,34 @@
+@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" class="mt-4">
-        <x-rapidez-ct::layout>
-            <x-rapidez-ct::title-progress-bar>
+    <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success" class="container">
+        <x-rapidez-ct::layout class="mt-4 sm:mt-12">
+            <x-rapidez-ct::title>
                 @lang('Thank you for your order')
-            </x-rapidez-ct::title-progress-bar>
+            </x-rapidez-ct::title>
+
             <x-rapidez-ct::sections>
-                @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
+                <x-rapidez-ct::card.inactive class="!bg-ct-primary-100 py-8 px-6 rounded-xl border-b border-black/5">
+                    @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
+                </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
-            <x-rapidez-ct::sections class="!pb-0">
+
+            <x-rapidez-ct::sections>
                 @include('rapidez-ct::checkout.partials.sections.success.products')
-                @includeWhen(
-                    config('rapidez.checkout-theme.checkout.success.register'),
-                    'rapidez-ct::checkout.partials.sections.success.create-account'
-                )
-            </x-rapidez-ct::sections>
 
-            <x-slot:sidebar>
-                <x-rapidez-ct::title class="uppercase mb-4">
-                    @lang('Overview')
-                </x-rapidez-ct::title>
-                @include('rapidez-ct::checkout.partials.sections.success.summary')
-                @include('rapidez-ct::cart.partials.sidebar.payment')
-                @include('rapidez-ct::cart.partials.sidebar.usps')
-                @include('rapidez-ct::checkout.partials.sections.success.order-info')
+                <x-rapidez-ct::card.inactive>
+                    @include('rapidez-ct::checkout.partials.sections.success.newsletter')
+                </x-rapidez-ct::card.inactive>
+                
+                @if (config('rapidez.checkout-theme.checkout.success.register'))
+                    <x-rapidez-ct::card.inactive>
+                        @include('rapidez-ct::checkout.partials.sections.success.create-account')
+                    </x-rapidez-ct::card.inactive>
+                @endif
+                
+            </x-rapidez-ct::sections>
+            <x-slot:sidebar class="max-lg:border-t max-lg:border-dashed max-lg:mt-1 max-lg:pt-6">
+                @include('rapidez-ct::checkout.partials.sidebar.success-sidebar')
             </x-slot:sidebar>
         </x-rapidez-ct::layout>
     </div>
-</checkout-success>
\ No newline at end of file
+</checkout-success>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index bb029b6..5eb4047 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -1,10 +1,10 @@
-@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 grid-cols-6">
     <x-rapidez-ct::input
         name="{{ $type }}_firstname"
         label="Firstname"
-        v-model.lazy="{{ $address }}.firstname"
+        v-model="{{ $address }}.firstname"
         @class([
             'max-sm:col-span-3 col-span-2',
             'sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
@@ -18,7 +18,7 @@
             class="col-span-3 sm:col-span-2"
             name="{{ $type }}_middlename"
             label="Middlename"
-            v-model.lazy="{{ $address }}.middlename"
+            v-model="{{ $address }}.middlename"
             :placeholder="__('Middlename')"
         />
     @endif
@@ -26,7 +26,7 @@ class="col-span-3 sm:col-span-2"
         class="col-span-full sm:col-span-2"
         name="{{ $type }}_lastname"
         label="Lastname"
-        v-model.lazy="{{ $address }}.lastname"
+        v-model="{{ $address }}.lastname"
         required
         :placeholder="__('Lastname')"
     />
@@ -35,7 +35,7 @@ class="col-span-full sm:col-span-2"
             class="col-span-full sm:col-span-3"
             name="{{ $type }}_telephone"
             label="Telephone"
-            v-model.lazy="{{ $address }}.telephone"
+            v-model="{{ $address }}.telephone"
             :required="Rapidez::config('customer/address/telephone_show', 'req') == 'req'"
             :placeholder="__('Telephone')"
         />
@@ -52,7 +52,7 @@ class="col-span-full sm:col-span-3"
         class="col-span-full sm:col-span-2"
         name="{{ $type }}_postcode"
         label="Postcode"
-        v-model.lazy="{{ $address }}.postcode"
+        v-model="{{ $address }}.postcode"
         v-on:change="window.app.$emit('postcode-change', {{ $address }})"
         required
         :placeholder="__('Postcode')"
@@ -62,7 +62,7 @@ class="col-span-full sm:col-span-2"
             class="col-span-3 sm:col-span-2"
             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
@@ -74,7 +74,7 @@ class="col-span-3 sm:col-span-2"
             class="col-span-3 sm:col-span-2"
             name="{{ $type }}_addition"
             label="Addition"
-            v-model.lazy="{{ $address }}.street[2]"
+            v-model="{{ $address }}.street[2]"
             :placeholder="__('Addition')"
         />
     @endif
@@ -82,7 +82,7 @@ class="col-span-3 sm:col-span-2"
         class="col-span-full sm:col-span-3"
         name="{{ $type }}_street"
         label="Street"
-        v-model.lazy="{{ $address }}.street[0]"
+        v-model="{{ $address }}.street[0]"
         required
         :placeholder="__('Street')"
     />
@@ -90,7 +90,7 @@ class="col-span-full sm:col-span-3"
         class="col-span-full sm:col-span-3"
         name="{{ $type }}_city"
         label="City"
-        v-model.lazy="{{ $address }}.city"
+        v-model="{{ $address }}.city"
         required
         :placeholder="__('City')"
     />
@@ -101,7 +101,7 @@ class="col-span-full sm:col-span-3"
                 class="col-span-3"
                 name="{{ $type }}_company"
                 label="Company"
-                v-model.lazy="{{ $address }}.company"
+                v-model="{{ $address }}.company"
                 :placeholder="__('Company')"
             />
         @endif
@@ -111,7 +111,7 @@ class="col-span-3"
                 class="col-span-3"
                 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'"
                 :placeholder="__('Tax ID')"
             />
diff --git a/resources/views/components/button/inactive.blade.php b/resources/views/components/button/inactive.blade.php
index c09d402..6f657f3 100644
--- a/resources/views/components/button/inactive.blade.php
+++ b/resources/views/components/button/inactive.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez-ct::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg-ct-inactive-100 rounded-xl text-sm font-medium text-ct-inactive border-b']) }}>
+<x-rapidez-ct::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg-ct-inactive-100 text-sm font-medium text-ct-inactive border-b rounded-md']) }}>
     {{ $slot }}
 </x-rapidez-ct::button>
diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
index 298569f..ace29d0 100644
--- a/resources/views/components/card/white.blade.php
+++ b/resources/views/components/card/white.blade.php
@@ -1,8 +1,9 @@
 @props(['check' => false])
-<div {{ $attributes->class('relative flex-1 rounded-xl border bg-white px-5 py-6 overflow-hidden shadow-sm') }}>
+<div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-5 py-6 overflow-hidden ring ring-ct-inactive-100') }}>
     @if ($check)
         <template v-if="{{ $check }}">
-            <x-heroicon-s-check class="absolute right-7 top-7 w-5 text-ct-accent" />
+            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-ct-accent" stroke-width="2.5" />
+            <div class="w-1 bg-ct-accent absolute left-0 inset-y-0"></div>
         </template>
     @endif
     {{ $slot }}
diff --git a/resources/views/components/coupon-field.blade.php b/resources/views/components/coupon-field.blade.php
index 3f83f1a..c597ae9 100644
--- a/resources/views/components/coupon-field.blade.php
+++ b/resources/views/components/coupon-field.blade.php
@@ -1,5 +1,5 @@
 <graphql-mutation
-    :query="'mutation ($cart_id: String!, $coupon_code: String!) { applyCouponToCart(input: { cart_id: $cart_id, coupon_code: $coupon_code }) { cart { ' + config.queries.cart + ' } } }'"
+    :query="'mutation ($cart_id: String!, $coupon_code: String!) { applyCouponToCart(input: { cart_id: $cart_id, coupon_code: $coupon_code })  { ...cart } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, coupon_code: '' }"
     :notify="{ message: config.translations.cart.coupon.applied }"
     :clear="true"
diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index fea519f..2fa7c60 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -1,7 +1,7 @@
 @props(['name' => '', 'id' => uniqid('checkbox-')])
 <label for="{{ $id }}" {{ $attributes->only('class')->class('text-ct-inactive relative flex items-center cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
     <input
-        class="shadow-sm text-ct-neutral peer h-6 w-6 cursor-pointer rounded-md border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0 checked:shadow-none"
+        class="text-ct-neutral peer h-6 w-6 cursor-pointer rounded-md border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0"
         id="{{ $id }}"
         name="{{ $name }}"
         type="checkbox"
diff --git a/resources/views/components/input/index.blade.php b/resources/views/components/input/index.blade.php
index 17b3508..beeeb2b 100644
--- a/resources/views/components/input/index.blade.php
+++ b/resources/views/components/input/index.blade.php
@@ -1,5 +1,5 @@
 @props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'class'])->merge(['class' => 'relative flex flex-col gap-y-1.5 sm:gap-y-2 text-sm']) }}>
+<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'relative flex flex-col gap-y-1.5 sm:gap-y-2 text-sm']) }}>
     <input {{ $attributes->merge([
         'id' => $attributes->get('name'),
         'placeholder' => $attributes->get('placeholder'),
diff --git a/resources/views/components/layout/checkout.blade.php b/resources/views/components/layout/checkout.blade.php
index 5071e84..170ba4a 100644
--- a/resources/views/components/layout/checkout.blade.php
+++ b/resources/views/components/layout/checkout.blade.php
@@ -7,22 +7,17 @@
             {{ $slot }}
         </div>
     </div>
-    <x-rapidez-ct::layout.sidebar class="sticky top-0 flex flex-col justify-start pt-10 max-lg:hidden lg:ml-20 lg:h-screen xl:pt-12 overflow-y-auto overflow-x-hidden">
-        <div class="flex flex-1 lg:pb-6">
-            <div class="sticky flex flex-col flex-1 top-12">
-                {{ $sidebar }}
+    <x-rapidez-ct::layout.sidebar class="sticky top-0 flex flex-col justify-start pt-10 max-lg:hidden lg:ml-20 lg:h-screen xl:pt-12">
+        <div class="absolute -left-20 inset-y-0 bg-ct-primary-100 w-screen"></div>
+        <div class="overflow-y-auto overflow-x-hidden flex flex-1 scrollbar-hide">
+            <div class="flex flex-1 lg:pb-6">
+                <div class="sticky flex flex-col flex-1 top-12">
+                    {{ $sidebar }}
+                </div>
             </div>
         </div>
     </x-rapidez-ct::layout.sidebar>
     <div class="lg:hidden">
         @include('rapidez-ct::checkout.partials.sidebar.bottom-links')
     </div>
-</div>
-
-<div class="fixed inset-0 overflow-hidden -z-10 pointer-events-none max-lg:hidden">
-    <div class="container flex justify-end">
-        <x-rapidez-ct::layout.sidebar class="h-screen relative">
-            <div class="absolute -left-20 bg-ct-primary-100 w-screen inset-y-0"></div>
-        </x-rapidez-ct::layout.sidebar>
-    </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
index 2f8df2b..d77fbe6 100644
--- a/resources/views/components/layout/index.blade.php
+++ b/resources/views/components/layout/index.blade.php
@@ -7,7 +7,7 @@
             {{ $slot }}
         </div>
     </div>
-    <x-rapidez-ct::layout.sidebar>
+    <x-rapidez-ct::layout.sidebar :attributes="$sidebar->attributes">
         {{ $sidebar }}
     </x-rapidez-ct::layout.sidebar>
 </div>
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
index 759d725..f2c3ac1 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.checkout_steps.default'))))
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 <div class="flex items-center space-x-3.5 md:space-x-4 text-xs" v-cloak>
     <span class="whitespace-nowrap font-medium text-ct-inactive">
         @lang('Step :step / :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-primary cursor-pointer': {{ $loop->index + 1 }} <= checkout.step,
-                'bg-ct-border pointer-events-none': {{ $loop->index + 1 }} > checkout.step,
-                'outline-4 outline outline-ct-primary/20': {{ $loop->index + 1 }} === checkout.step
-            }"
-        ></div>
+    @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
+        <a
+            href="{{ route('checkout', $checkoutStep) }}"
+            @class([
+                'bg-ct-accent aspect-square w-3 rounded',
+                '!bg-ct-disabled pointer-events-none' => $currentStepKey < $checkoutStepKey,
+                'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
+            ])
+        ></a>
     @endforeach
 </div>
diff --git a/resources/views/components/sections/index.blade.php b/resources/views/components/sections/index.blade.php
index c48c219..4697229 100644
--- a/resources/views/components/sections/index.blade.php
+++ b/resources/views/components/sections/index.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->class('[&>*]:border-b [&>*]:border-dashed [&>*]:pb-8 [&>*]:mb-6 mt-5 mb-6') }}>
+<div {{ $attributes->class('divide-y divide-dashed *:pt-6 *:mb-6 mt-5 mb-6 first:*:pt-0') }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/separated-listing/index.blade.php b/resources/views/components/separated-listing/index.blade.php
index 68df059..f37b781 100644
--- a/resources/views/components/separated-listing/index.blade.php
+++ b/resources/views/components/separated-listing/index.blade.php
@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm text-ct-inactive [&>*]:py-1 [&>*:first-child]:pt-0 [&>*:last-child]:py-3 [&>*]:flex [&>*]:flex-wrap [&>*]:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm text-ct-inactive *:py-1 first-child:*:pt-0 last-child:*:py-3 *:flex *:flex-wrap *:justify-between') }}>
     {{ $slot }}
-</x-tag>
+</x-rapidez::tag>
diff --git a/resources/views/components/slide-in/index.blade.php b/resources/views/components/slide-in/index.blade.php
index 45dcda6..c6826dd 100644
--- a/resources/views/components/slide-in/index.blade.php
+++ b/resources/views/components/slide-in/index.blade.php
@@ -1,7 +1,7 @@
 <slide-in>
     <template slot-scope="{ isSwiping, top, _self }">
         <div ref="container">
-            <input v-if="_self" v-model="_self.isOpen" id="slide-in" type="checkbox" class="relative z-50 opacity-0 h-0 peer" />
+            <input v-if="_self" v-model="_self.isOpen" id="slide-in" type="checkbox" class="hidden peer" />
             <div
                 ref="target"
                 class="!touch-none absolute top-1.5 inset-x-0 bg-ct-primary-100 z-30 rounded-b-xl px-5 pt-6 pb-12 overflow-y-auto scrollbar-hide opacity-0 -translate-y-full peer-checked:opacity-100 peer-checked:translate-y-0"
diff --git a/resources/views/components/summary.blade.php b/resources/views/components/summary.blade.php
index d0d8777..aa45118 100644
--- a/resources/views/components/summary.blade.php
+++ b/resources/views/components/summary.blade.php
@@ -1,22 +1,26 @@
+@props(['type' => 'cart'])
 <x-rapidez-ct::separated-listing>
     <li>
         <div class="flex w-full justify-between items-center">
-            <span>@lang('Total products') (@{{ Math.round(cart.total_quantity) }})</span>
-            <div class="font-medium text-ct-neutral text-base">@{{ cart.prices.subtotal_including_tax.value | price }}</div>
+            <span>
+                @lang('Total products')
+                (<span v-text="Math.round({{ $type }}.items.length)"></span>)
+            </span>
+            <div class="font-medium text-ct-neutral text-base" v-text="$options.filters.price({{ $type }}.prices?.subtotal_including_tax?.value ?? {{ $type }}.total?.subtotal?.value)"></div>
         </div>
     </li>
-    <li v-if="cart.tax > 0">
+    <li v-if="{{ $type }}.tax > 0">
         <div>@lang('Tax')</div>
-        <div class="font-medium text-ct-neutral">@{{ cart.prices.applied_taxes[0].amount.value | price }}</div>
+        <div class="font-medium text-ct-neutral" v-text="$options.filters.price({{ $type }}.prices.applied_taxes[0].amount.value)"></div>
     </li>
-    <li v-for="discount in cart.prices.discounts">
+    <li v-for="discount in {{ $type }}?.prices?.discounts">
         <div>@{{ discount.label }}</div>
         <div class="text-ct-primary font-medium">@{{ discount.amount.value | price }}</div>
     </li>
-    <li v-if="cart.shipping_method">
+    <li v-if="{{ $type }}?.shipping_method">
         <div>@lang('Shipping')</div>
-        <div v-if="cart.shipping_addresses[0].selected_shipping_method.amount.value > 0 " class="font-medium text-ct-neutral">
-            @{{ cart.shipping_addresses[0].selected_shipping_method.amount.value | price }}
+        <div v-if="{{ $type }}?.total?.total_shipping.value > 0 || {{ $type }}?.shipping_addresses[0]?.selected_shipping_method?.amount?.value > 0" class="font-medium text-ct-neutral">
+            <span v-text="$options.filters.price({{ $type }}?.total?.total_shipping?.value ?? {{ $type }}?.shipping_addresses[0]?.selected_shipping_method?.amount?.value)"></span>
         </div>
         <div v-else class="font-medium text-ct-neutral">
             @lang('Free')
@@ -24,6 +28,6 @@
     </li>
     <li class="border-t border-dashed mt-2.5">
         <div class="text-base text-ct-neutral">@lang('Total price')</div>
-        <div class="font-bold text-lg text-ct-neutral">@{{ cart.prices.grand_total.value | price }}</div>
+        <div class="font-semibold text-lg text-ct-neutral" v-text="$options.filters.price({{ $type }}?.prices?.grand_total?.value || {{ $type }}?.total?.grand_total?.value)"></div>
     </li>
 </x-rapidez-ct::separated-listing>
diff --git a/resources/views/components/title-progress-bar.blade.php b/resources/views/components/title-progress-bar.blade.php
new file mode 100644
index 0000000..9a6e855
--- /dev/null
+++ b/resources/views/components/title-progress-bar.blade.php
@@ -0,0 +1,8 @@
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
+
+<div class="flex flex-wrap items-end justify-between gap-1">
+    <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
+        {{ $slot }}
+    </x-rapidez-ct::title>
+    <x-rapidez-ct::progress-bar />
+</div>
diff --git a/src/ConfiraServiceProvider.php b/src/ConfiraServiceProvider.php
index 87d44e2..5d46baf 100644
--- a/src/ConfiraServiceProvider.php
+++ b/src/ConfiraServiceProvider.php
@@ -39,6 +39,10 @@ public function bootPublishables() : self
             __DIR__.'/../config/rapidez/confira.php' => config_path('rapidez/confira.php'),
         ], 'rapidez-confira-config');
 
+        $this->publishes([
+            __DIR__ . '/../resources/shipping-icons' => public_path('vendor/shipping-icons'),
+        ], 'shipping-icons');
+
         return $this;
     }