Frontend finetuning after v3 graphql

.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

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

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

lang/nl.json

@@ -72,7 +72,6 @@
     "Select as billing": "Selecteer als factuuradres",
     "Select as shipping": "Selecteer als verzendadres",
     "Send": "Versturen",
-    "Step 1 of 4": "Stap 1 van 4",
     "Step :step out of :total": "Stap :step van :total",
     "Subscribe to newsletter": "Inschrijven voor nieuwsbrief",
     "Thank you for subscribing": "Bedankt voor uw inschrijving",

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/core-overwrites/checkout/steps/payment_method.blade.php

@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.steps.payment_method')

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/account-features.blade.php

@@ -2,12 +2,18 @@
     <x-rapidez-ct::title.lg class="mb-5">
         @lang('Account features')
     </x-rapidez-ct::title.lg>
-    <ul class="space-y-5 [&>*]:relative [&>*]:pl-7">
-        @foreach (['Track status of your order and view order history', 'Quick and easy ordering without having to fill in your details every time', 'Everything centralized in 1 place such as returns, exchanges and customer service'] as $feature)
-            <li>
-                <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" />
-                <span>@lang($feature)</span>
-            </li>
-        @endforeach
-    </ul>
+    <x-rapidez-ct::usp-list>
+        <li>
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <span>@lang('Track status of your order and view order history')</span>
+        </li>
+        <li>
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <span>@lang('Quick and easy ordering without having to fill in your details every time')</span>
+        </li>
+        <li>
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <span>@lang('Everything centralized in 1 place such as returns, exchanges and customer service')</span>
+        </li>
+    </x-rapidez-ct::usp-list>
 </x-rapidez-ct::card>

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/account/register.blade.php

@@ -11,7 +11,6 @@
                 @lang('Register')
             </x-rapidez-ct::title>
 
-
             @include('rapidez-ct::account.partials.register-account')
 
             <x-rapidez-ct::toolbar>

resources/views/cart/content.blade.php

@@ -1,4 +1,4 @@
-<x-rapidez-ct::layout>
+<x-rapidez-ct::layout class="mt-4 sm:mt-12">
     @include('rapidez-ct::cart.cart')
     <x-slot:sidebar>
         @include('rapidez-ct::cart.partials.sidebar.sidebar')

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/cart/partials/sidebar/summary.blade.php

@@ -36,7 +36,7 @@
     </x-rapidez-ct::button.enhanced>
 
     <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" />
+        <x-heroicon-o-check class="h-5 text-ct-accent" stroke-width="2.5" />
         @lang('Ordered within 2 minutes')
     </div>
 </x-rapidez-ct::card>

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-4 sm:mt-12">
+            <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