Update templates and steps to support V3

.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

@@ -15,6 +15,7 @@
     "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
+    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "Back to credentials": "Terug naar inloggegevens",
     "Back to dashboard": "Terug naar dashboard",
     "Back to login": "Terug naar inloggen",
@@ -72,7 +73,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/address-cards.blade.php

@@ -1,7 +1,7 @@
 <x-rapidez-ct::title.lg>
     @lang('My addresses')
 </x-rapidez-ct::title.lg>
-<div class="grid gap-5 sm:grid-cols-2 my-5">
+<div class="grid gap-5 md:grid-cols-2 my-5">
     <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
         <template v-if="data.customer.shipping_address || data.customer.billing_address">
             <x-rapidez-ct::card.address v-bind:address="data.customer.shipping_address ?? data.customer.billing_address" shipping billing check>
@@ -10,7 +10,7 @@
                 </x-rapidez-ct::button.link>
             </x-rapidez-ct::card.address>
         </template>
-        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-sm:hidden">
+        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
             <span>+</span>
             <span>@lang('Add new address')</span>
         </a>
@@ -28,7 +28,7 @@
         </x-rapidez-ct::card.address>
     </template>
 </div>
-<div class="flex gap-5">
+<div class="flex flex-wrap gap-3">
     <x-rapidez-ct::button.accent :href="route('account.address.create')">
         @lang('Add a new address')
     </x-rapidez-ct::button.accent>

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

@@ -10,8 +10,8 @@
     <graphql-mutation
         query="@include('rapidez-ct::account.partials.queries.register-account')"
         redirect="{{ route('account.overview') }}"
-        :callback="async (variables, response) => { 
-            await registerCallback(variables, response); 
+        :callback="async (variables, response) => {
+            await registerCallback(variables, response);
             @if(config('rapidez.checkout-theme.register.create-address'))
                 await createAddress();
             @endif
@@ -24,9 +24,9 @@
                 <x-rapidez-ct::title.lg class="mb-5">
                     @lang('Register account')
                 </x-rapidez-ct::title.lg>
-                <form 
-                    id="register" 
-                    class="grid gap-5 sm:grid-cols-2"
+                <form
+                    id="register"
+                    class="grid gap-5 md:grid-cols-2"
                     @if(config('rapidez.checkout-theme.register.create-address'))
                         v-on:submit.prevent="window.document.getElementById('register-address').reportValidity() && mutate()"
                     @else

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/product/description.blade.php

@@ -9,6 +9,9 @@
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
+            <div class="text-red-600" v-if="!canOrderCartItem(item)">
+                @lang('This product it out of stock, remove it to continue your order.')
+            </div>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>

resources/views/cart/partials/product/image.blade.php

@@ -1,4 +1,4 @@
-<td class="h-24 w-40 !pl-0 max-md:flex max-md:w-1/2">
+<td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img v-if="item.product.image" class="object-contain" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
     <x-rapidez::no-image v-else />
 </td>

resources/views/cart/partials/sidebar/summary.blade.php

@@ -29,12 +29,17 @@
             <dd>@{{ cart.prices.grand_total.value | price }}</dd>
         </div>
     </x-rapidez-ct::separated-listing>
-
-    <x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 mt-6" dusk="checkout">
-        @lang('To checkout')
-        <x-heroicon-o-arrow-right class="h-4" />
-    </x-rapidez-ct::button.enhanced>
-
+    <div class="w-full" :class="{ 'cursor-not-allowed': !canOrder }">
+        <x-rapidez-ct::button.enhanced 
+            :href="route('checkout')" 
+            class="flex w-full items-center justify-center gap-1 mt-6" 
+            v-bind:class="{ 'pointer-events-none': !canOrder }"
+            dusk="checkout"
+        >
+            @lang('To checkout')
+            <x-heroicon-o-arrow-right class="h-4" />
+        </x-rapidez-ct::button.enhanced>
+    </div>
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
         <x-heroicon-o-check class="h-5 text-ct-accent" />
         @lang('Ordered within 2 minutes')