From 9f4841b58a8aa8c3e32ab86d7b61bab1c02cd6c9 Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Wed, 13 Mar 2024 11:59:04 +0100
Subject: [PATCH] Removed template / reduced overrides (#16)

---
 resources/views/checkout/overview.blade.php   | 37 -------------
 .../partials/address-cards-popup.blade.php    | 21 +------
 .../checkout/partials/address-cards.blade.php | 41 --------------
 .../partials/buttons/address.blade.php        |  8 +++
 .../partials/buttons/new-address.blade.php    |  4 ++
 .../views/checkout/partials/layout.blade.php  | 23 ++++++++
 .../partials/sections/address.blade.php       | 21 -------
 .../partials/sections/login.blade.php         | 55 -------------------
 .../sections/login/logged-out.blade.php       | 31 +++++++++++
 .../payment/payment-methods.blade.php         |  1 +
 .../partials/sections/shipping.blade.php      | 26 +--------
 .../partials/shipping/methods.blade.php       | 25 +++++++++
 .../checkout/steps/credentials.blade.php      |  9 ++-
 .../views/checkout/steps/payment.blade.php    | 11 +---
 .../views/components/input/radio.blade.php    |  2 +-
 15 files changed, 104 insertions(+), 211 deletions(-)
 delete mode 100644 resources/views/checkout/overview.blade.php
 delete mode 100644 resources/views/checkout/partials/address-cards.blade.php
 create mode 100644 resources/views/checkout/partials/buttons/address.blade.php
 create mode 100644 resources/views/checkout/partials/buttons/new-address.blade.php
 create mode 100644 resources/views/checkout/partials/layout.blade.php
 delete mode 100644 resources/views/checkout/partials/sections/address.blade.php
 delete mode 100644 resources/views/checkout/partials/sections/login.blade.php
 create mode 100644 resources/views/checkout/partials/sections/login/logged-out.blade.php
 create mode 100644 resources/views/checkout/partials/shipping/methods.blade.php

diff --git a/resources/views/checkout/overview.blade.php b/resources/views/checkout/overview.blade.php
deleted file mode 100644
index 2f20da5..0000000
--- a/resources/views/checkout/overview.blade.php
+++ /dev/null
@@ -1,37 +0,0 @@
-@extends('rapidez::layouts.app')
-
-@section('title', __('Checkout'))
-
-@section('robots', 'NOINDEX,NOFOLLOW')
-
-@section('content')
-    <checkout v-slot="{ checkout, cart, hasItems, save, goToStep }" :set="checkout.step = Math.max(checkout.step, 2)" v-cloak>
-        <div class="relative">
-            <div class="container">
-                <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 && hasItems">
-                            @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>
-            </div>
-        </div>
-    </checkout>
-@endsection
diff --git a/resources/views/checkout/partials/address-cards-popup.blade.php b/resources/views/checkout/partials/address-cards-popup.blade.php
index f6a3c06..14a9bcb 100644
--- a/resources/views/checkout/partials/address-cards-popup.blade.php
+++ b/resources/views/checkout/partials/address-cards-popup.blade.php
@@ -6,26 +6,7 @@
             <label class="absolute cursor-pointer top-7 right-7 w-5 h-5" for="popup">
                 <x-heroicon-o-x-mark/>
             </label>
-
-            <div class="grid sm:grid-cols-2 gap-5">
-                <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)"
-                        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>
-            </div>
+            @include('rapidez-ct::checkout.partials.address-card')
         </x-rapidez-ct::card.inactive>
     </x-rapidez-ct::sections>
     <label class="absolute cursor-pointer inset-0 bg-ct-neutral/60" for="popup"></label>
diff --git a/resources/views/checkout/partials/address-cards.blade.php b/resources/views/checkout/partials/address-cards.blade.php
deleted file mode 100644
index 328febd..0000000
--- a/resources/views/checkout/partials/address-cards.blade.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="grid gap-5 sm:grid-cols-2">
-    <template v-if="billingAndShippingAreTheSame">
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping billing check>
-            <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
-                @lang('Edit')
-            </x-rapidez-ct::button.link>
-        </x-rapidez-ct::card.address>
-        <button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium text-ct-inactive bg-ct-inactive-100 rounded-xl max-sm:hidden">
-            <span>+</span>
-            <span>@lang('Add new address')</span>
-        </button>
-    </template>
-    <template v-else>
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping check class="h-full">
-            <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
-                @lang('Edit')
-            </x-rapidez-ct::button.link>
-            <x-slot:empty>
-                <label for="popup" class="flex flex-col items-center justify-center gap-y-2 font-medium rounded max-sm:hidden h-full cursor-pointer">
-                    <span>+</span>
-                    <span>@lang('Select an address')</span>
-                </label>
-                <input type="checkbox" oninvalid="this.setCustomValidity('{{ __('Please select an address') }}')" required class="absolute w-full h-full inset-0 opacity-0 pointer-events-none">
-            </x-slot>
-        </x-rapidez-ct::card.address>
-        <x-rapidez-ct::card.address v-bind:address="checkout.billing_address" billing check class="h-full">
-            <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
-                @lang('Edit')
-            </x-rapidez-ct::button.link>
-            <x-slot:empty>
-                <label for="popup" class="flex flex-col items-center justify-center gap-y-2 font-medium rounded max-sm:hidden h-full cursor-pointer">
-                    <span>+</span>
-                    <span>@lang('Select an address')</span>
-                </label>
-                <input type="checkbox" oninvalid="this.setCustomValidity('{{ __('Please select an address') }}')" required class="absolute w-full h-full inset-0 opacity-0 pointer-events-none">
-            </x-slot>
-        </x-rapidez-ct::card.address>
-    </template>
-</div>
-
-@include('rapidez-ct::checkout.partials.address-cards-popup')
diff --git a/resources/views/checkout/partials/buttons/address.blade.php b/resources/views/checkout/partials/buttons/address.blade.php
new file mode 100644
index 0000000..1d15b78
--- /dev/null
+++ b/resources/views/checkout/partials/buttons/address.blade.php
@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-3 mt-5">
+    <x-rapidez-ct::button.inactive v-on:click.prevent="toggleEdit">
+        @lang('Use a new address')
+    </x-rapidez-ct::button.inactive>
+    <x-rapidez-ct::button.inactive tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
+        @lang('My addresses')
+    </x-rapidez-ct::button.inactive>
+</div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
new file mode 100644
index 0000000..48f852e
--- /dev/null
+++ b/resources/views/checkout/partials/buttons/new-address.blade.php
@@ -0,0 +1,4 @@
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-inactive font-medium bg-ct-inactive-100 rounded-xl max-sm:hidden">
+    <span>+</span>
+    <span>@lang('Add new address')</span>
+</button>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/layout.blade.php b/resources/views/checkout/partials/layout.blade.php
new file mode 100644
index 0000000..600fb34
--- /dev/null
+++ b/resources/views/checkout/partials/layout.blade.php
@@ -0,0 +1,23 @@
+<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 && hasItems">
+            @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>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
deleted file mode 100644
index 713e138..0000000
--- a/resources/views/checkout/partials/sections/address.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<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')
-        <div class="flex flex-wrap items-center gap-3 mt-5">
-            <x-rapidez-ct::button.inactive v-on:click.prevent="toggleEdit">
-                @lang('Use a new address')
-            </x-rapidez-ct::button.inactive>
-            <x-rapidez-ct::button.inactive tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
-                @lang('My addresses')
-            </x-rapidez-ct::button.inactive>
-        </div>
-    </x-rapidez-ct::card.inactive>
-
-    <x-rapidez-ct::card.inactive v-else>
-        @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
-
-        <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>
-</checkout-address>
diff --git a/resources/views/checkout/partials/sections/login.blade.php b/resources/views/checkout/partials/sections/login.blade.php
deleted file mode 100644
index 5e2d5e5..0000000
--- a/resources/views/checkout/partials/sections/login.blade.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<login v-slot="{ email, password, go, loginInputChange, emailAvailable, logout }">
-    <x-rapidez-ct::card.inactive>
-        <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
-            <template v-if="!loggedIn">
-                <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')"
-                />
-
-                <x-rapidez-ct::input
-                    name="password"
-                    type="password"
-                    v-if="!emailAvailable"
-                    label="Password"
-                    ref="password"
-                    v-on:input="loginInputChange"
-                    required
-                />
-
-                <p v-if="!emailAvailable" class="self-end text-ct-inactive text-sm">
-                    @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 text-sm">
-                    @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>
-            <template v-else>
-                <div class="bg-ct-disabled flex h-14 shadow items-center rounded-md border px-4">
-                    <x-heroicon-o-user-circle class="mr-2.5 h-6" />
-                    <span v-text="$root.user?.email"></span>
-                    <x-heroicon-o-lock-closed class="ml-auto h-6 text-ct-neutral" />
-                </div>
-                <div>
-                    <p class="text-base font-medium text-ct-neutral">@lang('Welcome back') @{{ $root.user?.firstname }}!</p>
-                    <span class="text-inactive text-sm">
-                        @lang('Is this not your account?')
-                        <button class="underline" v-on:click.prevent="logout('/login')">@lang('Log out')</button>
-                        @lang('and use a different e-mail address.')
-                    </span>
-                </div>
-            </template>
-        </div>
-    </x-rapidez-ct::card.inactive>
-</login>
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
new file mode 100644
index 0000000..bc78f45
--- /dev/null
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -0,0 +1,31 @@
+<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')"
+/>
+
+    <x-rapidez-ct::input
+    name="password"
+    type="password"
+    v-if="!emailAvailable"
+    label="Password"
+    ref="password"
+    v-on:input="loginInputChange"
+    required
+/>
+
+<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>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
index 258a0bf..b19b483 100644
--- a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
+++ b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
@@ -1,5 +1,6 @@
 <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"
diff --git a/resources/views/checkout/partials/sections/shipping.blade.php b/resources/views/checkout/partials/sections/shipping.blade.php
index 7d3b8a6..63ba523 100644
--- a/resources/views/checkout/partials/sections/shipping.blade.php
+++ b/resources/views/checkout/partials/sections/shipping.blade.php
@@ -3,29 +3,5 @@
         @lang('Shipping method')
     </p>
 
-    <div v-for="(method, index in checkout.shipping_methods" class="mt-5 flex flex-col gap-2">
-        <x-rapidez-ct::input.radio
-            v-bind:value="method.carrier_code+'_'+method.method_code"
-            v-bind:dusk="'method-'+index"
-            v-model="checkout.shipping_method"
-            name="shipping_method"
-            class="!py-4"
-            required
-        >
-            <div class="flex flex-col sm: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">
-                <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/envelope.svg'"
-                />
-            </div>
-        </x-rapidez-ct::input.radio>
-    </div>
+    @include('rapidez-ct::checkout.partials.shipping.methods')
 </x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
new file mode 100644
index 0000000..25d2f53
--- /dev/null
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -0,0 +1,25 @@
+<div v-for="(method, index) in checkout.shipping_methods" class="mt-5 flex flex-col gap-2">
+    <x-rapidez-ct::input.radio
+        v-bind:value="method.carrier_code+'_'+method.method_code"
+        v-bind:dusk="'method-'+index"
+        v-model="checkout.shipping_method"
+        name="shipping_method"
+        class="!py-4"
+        required
+    >
+        <div class="flex flex-col sm: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">
+            <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/envelope.svg'"
+            />
+        </div>
+    </x-rapidez-ct::input.radio>
+</div>
\ 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 fedaf1d..4ca75ee 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -1,4 +1,4 @@
-<x-rapidez-ct::title-progress-bar :href="route('cart')">
+<x-rapidez-ct::title-progress-bar>
     @lang('Credentials')
 </x-rapidez-ct::title-progress-bar>
 
@@ -6,14 +6,17 @@
     <x-rapidez-ct::sections>
         @include('rapidez-ct::checkout.partials.sections.login')
         @include('rapidez-ct::checkout.partials.sections.address')
+        @include('rapidez-ct::checkout.partials.sections.newsletter')
         @include('rapidez-ct::checkout.partials.sections.shipping')
     </x-rapidez-ct::sections>
 </form>
+
 <x-rapidez-ct::toolbar>
     <x-rapidez-ct::button.outline :href="route('cart')" class="flex justify-center items-center !p-0 w-12 h-12 max-md:hidden">
         <x-heroicon-o-arrow-long-left class="w-6 h-6"/>
     </x-rapidez-ct::button.outline>
-    <x-rapidez-ct::button.enhanced form="credentials" class="w-full md:w-1/2" loader>
+
+    <x-rapidez-ct::button.enhanced class="relative w-full md:w-1/2" form="credentials" loader>
         @lang('Continue')
     </x-rapidez-ct::button.enhanced>
-</x-rapidez-ct::toolbar>
\ No newline at end of file
+</x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
index aed198c..342b81b 100644
--- a/resources/views/checkout/steps/payment.blade.php
+++ b/resources/views/checkout/steps/payment.blade.php
@@ -1,4 +1,4 @@
-<x-rapidez-ct::title-progress-bar href="#" v-on:click.prevent="goToStep(1)">
+<x-rapidez-ct::title-progress-bar>
     @lang('Payment')
 </x-rapidez-ct::title-progress-bar>
 
@@ -10,13 +10,8 @@
     <x-rapidez-ct::button.outline v-on:click.prevent="goToStep(1)" class="flex justify-center items-center !p-0 w-12 h-12 max-md: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 md:w-1/2"
-        form="payment"
-        type="submit"
-        dusk="continue"
-        loader
-    >
+
+    <x-rapidez-ct::button.enhanced class="relative w-full md: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/components/input/radio.blade.php b/resources/views/components/input/radio.blade.php
index 71e9b9d..905ddbd 100644
--- a/resources/views/components/input/radio.blade.php
+++ b/resources/views/components/input/radio.blade.php
@@ -1,4 +1,4 @@
-<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-xl px-5 sm:px-7 py-7 text-ct-neutral') }}>
+<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-xl px-5 sm:px-7 py-4 text-ct-neutral') }}>
     <span class="flex aspect-square h-6 w-6 items-center justify-center rounded-full border bg-white">
         <input type="radio" {{ $attributes->except('class') }} class="peer h-3 w-3 border-none text-ct-primary transition checked:bg-none focus:ring-0 focus:ring-offset-0" />
         <span class="overflow-hidden rounded-xl -z-10 absolute inset-0 bg-ct-inactive-100 peer-checked:border-y peer-checked:border-r peer-checked:bg-white peer-checked:shadow before:absolute before:-inset-y-px before:w-1 before:rounded-l before:bg-ct-primary before:opacity-0 before:transition-all before:peer-checked:opacity-100"></span>