Update templates and steps to support V3

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

resources/core-overwrites/checkout/pages/credentials.blade.php

@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.credentials')

resources/core-overwrites/checkout/pages/login.blade.php

@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.login')

resources/core-overwrites/checkout/pages/payment.blade.php

@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.payment')

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
             },
         },
 

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
             }
         }
     }

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'))

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>

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">

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

@@ -1,22 +1,22 @@
 <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
                 />
             </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">

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

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>

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

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

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

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>