style: 💄 Change checkout page to two card design

themes/default/sass/app.scss

@@ -6,66 +6,21 @@
 @import "../css/adminlte.min.css";
 @import "../css/slim.min.css";
 
-.gateway-container {
-    background-color: #ffffff;
-}
-
-.checkout-gateway-radio {
+.checkout-gateways {
     // make the radio button clickable
     cursor: pointer;
-    // center the radio button
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 
-.checkout-gateway-radio-input {
-    // make radio button square and show a checkmark instead of a circle when selected
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: #fff;
-    border: 1px solid #d2d6de;
-    height: 20px;
-    width: 20px;
-    border-radius: 4px;
-    position: relative;
-    cursor: pointer;
-    outline: none;
-    // center the thing
-    margin: 0 auto;
-
-    &:checked {
-        background-color: #fff;
-        border: 1px solid #d2d6de;
-        height: 20px;
-        width: 20px;
-        border-radius: 0;
-        position: relative;
-        cursor: pointer;
-        outline: none;
-        &:after {
-            content: "";
-            position: absolute;
-            top: 0px;
-            left: 7px;
-            width: 5px;
-            height: 16px;
-            border: solid #3d6efe;
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg);
-        }
+    // add some space between all gateway divs bit the last one
+    &:not(:last-child) {
+        margin-bottom: 1rem;
     }
 }
 
 .checkout-gateway-label {
     // make the label clickable
     cursor: pointer;
-
     // center the label
     display: flex;
     justify-content: start;
     align-items: center;
-
-    margin: 2px 0;
 }

themes/default/views/store/checkout.blade.php

@@ -24,132 +24,155 @@
     <!-- MAIN CONTENT -->
     <section class="content">
         <div class="container-fluid">
-
-            <div class="row">
-                <div class="col-12">
-
-                    <form x-data="{ payment_method: '', clicked: false }" action="{{ route('payment.pay') }}" method="POST">
-                        @csrf
-                        @method('post')
-                        <!-- Main content -->
-                        <div class="invoice p-3 mb-3">
-                            <!-- title row -->
-                            <div class="row">
-                                <div class="col-12">
-                                    <h4>
-                                        <i class="fas fa-globe"></i> {{ config('app.name', 'Laravel') }}
-                                        <small class="float-right">{{ __('Date') }}:
-                                            {{ Carbon\Carbon::now()->isoFormat('LL') }}</small>
+            <form x-data="{ payment_method: '', clicked: false }" action="{{ route('payment.pay') }}" method="POST">
+                @csrf
+                @method('post')
+                <div class="row d-flex justify-content-center flex-wrap">
+                    @if (!$productIsFree)
+                        <div class="col-xl-4">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h4 class="mb-0">
+                                        <i class="fas fa-money-check-alt"></i>
+                                        Payment Methods
                                     </h4>
                                 </div>
-                                <!-- /.col -->
-                            </div>
-
-                            <!-- Table row -->
-                            <div class="row">
-                                <div class="col-12 table-responsive">
-                                    <table class="table table-striped">
-                                        <thead>
-                                            <tr>
-                                                <th>{{ __('Quantity') }}</th>
-                                                <th>{{ __('Product') }}</th>
-                                                <th>{{ __('Description') }}</th>
-                                                <th>{{ __('Subtotal') }}</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>1</td>
-                                                <td><i class="fa fa-coins mr-2"></i>{{ $product->quantity }}
-                                                    {{ strtolower($product->type) == 'credits' ? $credits_display_name : $product->type }}
-                                                </td>
-                                                <td>{{ $product->description }}</td>
-                                                <td>{{ $product->formatToCurrency($product->price) }}</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
+                                <div class="card-body">
                                     <input type="hidden" name="product_id" value="{{ $product->id }}">
-                                </div>
-                                <!-- /.col -->
-                            </div>
-                            <!-- /.row -->
-
-                            <div class="row">
-                                <!-- accepted payments column -->
-                                <div class="col-6">
-                                    @if (!$productIsFree)
-                                        <p class="lead">{{ __('Payment Methods') }}:</p>
-                                        <div class="rounded pl-3 py-2 gateway-container" style="max-width: 50%;">
+                                    <input type="hidden" name="payment_method" :value="payment_method"
+                                        x-model="payment_method">
+                                    <div class="row">
+                                        <div class="col-lg-12">
                                             @foreach ($paymentGateways as $gateway)
-                                                <div class="row ">
-                                                    <div class="col-sm-10 checkout-gateway-label">
-                                                        <label for="{{ $gateway->name }}">
-                                                            <img height="40" src="{{ $gateway->image }}"></label>
-                                                    </div>
-                                                    <div class="col-sm-2 checkout-gateway-radio">
-                                                        <input class="checkout-gateway-radio-input" x-model="payment_method"
-                                                            type="radio" id="{{ $gateway->name }}"
-                                                            value="{{ $gateway->name }}">
+                                                <div class="row checkout-gateways">
+                                                    <div class="col-12 d-flex justify-content-between">
+                                                        <label class="form-check-label h4 checkout-gateway-label"
+                                                            for="{{ $gateway->name }}">
+                                                            <span class="mr-3">{{ $gateway->name }}</span>
+                                                        </label>
+                                                        <button class="btn btn-primary rounded" type="button"
+                                                            name="payment-method" id="{{ $gateway->name }}"
+                                                            value="{{ $gateway->name }}"
+                                                            :class="payment_method === '{{ $gateway->name }}' ?
+                                                                'active' : ''"
+                                                            @click="payment_method = '{{ $gateway->name }}'; clicked = true;"
+                                                            x-text="payment_method == '{{ $gateway->name }}' ? 'Selected' : 'Select'">Select</button>
+                                                        </button>
+
                                                     </div>
                                                 </div>
                                             @endforeach
                                         </div>
-                                    @endif
-
+                                    </div>
                                 </div>
-                                <!-- /.col -->
-                                <div class="col-6">
-                                    <p class="lead">{{ __('Amount Due') }}
-                                        {{ Carbon\Carbon::now()->isoFormat('LL') }}</p>
+                            </div>
+                        </div>
+                    @endif
+                    <div class="col-xl-3">
+                        <div class="card">
+                            <div class="card-header">
+                                <h4 class="mb-0 text-center">
+                                    <i class="fas fa-shopping-cart"></i>
+                                    Checkout details
+                                </h4>
+                            </div>
+
+                            <div class="card-body">
+                                <ul class="list-group mb-3">
+                                    <li class="list-group-item">
+                                        <div>
+                                            <h5 class="my-0">{{ __('Product details') }}</h5>
+                                        </div>
+                                        <ul class="pl-0">
+                                            <li class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Type') }}</span>
+                                                <span
+                                                    class="text-muted d-inline-block">{{ strtolower($product->type) == 'credits' ? $credits_display_name : $product->type }}</span>
+                                            </li>
+                                            <li class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Amount') }}</span>
+                                                <span class="text-muted d-inline-block">{{ $product->quantity }}</span>
+                                            </li>
+                                            <li class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Total Amount') }}</span>
+                                                <span class="text-muted d-inline-block">{{ $product->quantity }}</span>
+                                            </li>
+                                        </ul>
+
+                                    </li>
+
+
+                                    </li>
+                                    <li class="list-group-item d-flex justify-content-between lh-condensed">
+                                        <div>
+                                            <h6 class="my-0">{{ __('Description') }}</h6>
+                                            <span class="text-muted">
+                                                {{ $product->description }}
+                                            </span>
+                                        </div>
+                                    </li>
+                                    <li class="list-group-item">
+                                        <div>
+                                            <h5 class="my-0">{{ __('Pricing') }}</h5>
+                                        </div>
 
-                                    <div class="table-responsive">
-                                        <table class="table">
+                                        <ul class="pl-0">
+                                            <li class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Subtotal') }}</span>
+                                                <span class="text-muted d-inline-block">
+                                                    {{ $product->formatToCurrency($discountedprice) }}</span>
+                                            </li>
+                                            <div class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Tax') }}
+                                                    @if ($taxpercent > 0)
+                                                        ({{ $taxpercent }}%):
+                                                    @endif
+                                                </span>
+                                                <span class="text-muted d-inline-block">
+                                                    + {{ $product->formatToCurrency($taxvalue) }}</span>
+                                            </div>
                                             @if ($discountpercent && $discountvalue)
-                                                <tr>
-                                                    <th>{{ __('Discount') }} ({{ $discountpercent }}%):</th>
-                                                    <td>{{ $product->formatToCurrency($discountvalue) }}</td>
-                                                </tr>
+                                                <div class="d-flex justify-content-between">
+                                                    <span class="text-muted d-inline-block">{{ __('Discount') }}
+                                                        ({{ $discountpercent }}%):</span>
+                                                    <span
+                                                        class="text-muted d-inline-block">-{{ $product->formatToCurrency($discountvalue) }}</span>
+                                                </div>
                                             @endif
-                                            <tr>
-                                                <th style="width:50%">{{ __('Subtotal') }}:</th>
-                                                <td>{{ $product->formatToCurrency($discountedprice) }}</td>
-                                            </tr>
-                                            <tr>
-                                                <th>{{ __('Tax') }} ({{ $taxpercent }}%):</th>
-                                                <td>{{ $product->formatToCurrency($taxvalue) }}</td>
-                                            </tr>
-                                            <tr>
-                                                <th>{{ __('Total') }}:</th>
-                                                <td>{{ $product->formatToCurrency($total) }}</td>
-                                            </tr>
-                                        </table>
-                                    </div>
-                                </div>
-                                <!-- /.col -->
-                            </div>
-                            <!-- /.row -->
+                                            <hr class="text-white border-secondary">
+                                            <div class="d-flex justify-content-between">
+                                                <span class="text-muted d-inline-block">{{ __('Total') }}</span>
+                                                <span
+                                                    class="text-muted d-inline-block">{{ $product->formatToCurrency($total) }}</span>
+                                            </div>
+                                            <template x-if="payment_method">
+                                                <div class="d-flex justify-content-between">
+                                                    <span class="text-muted d-inline-block">{{ __('Pay with') }}</span>
+                                                    <span class="text-muted d-inline-block" x-text="payment_method"></span>
+                                                </div>
+                                            </template>
+                                        </ul>
+                                    </li>
+                                </ul>
 
-                            <!-- this row will not appear when printing -->
-                            <div class="row no-print">
-                                <div class="col-12">
-                                    <button :disabled="(!payment_method || clicked) && {{ !$productIsFree }}"
-                                        :class="(!payment_method || clicked) && {{ !$productIsFree }} ? 'disabled' : ''"
-                                        class="btn btn-success float-right"><i class="far fa-credit-card mr-2"
-                                            @click="clicked = true"></i>
-                                        @if ($productIsFree)
-                                            {{ __('Get for free') }}
-                                        @else
-                                            {{ __('Submit Payment') }}
-                                        @endif
-                                    </button>
-                                </div>
+                                <button :disabled="(!payment_method || !clicked) && {{ !$productIsFree }}"
+                                    :class="(!payment_method || !clicked) && {{ !$productIsFree }} ? 'disabled' : ''"
+                                    class="btn btn-success float-right w-100">
+                                    <i class="far fa-credit-card mr-2" @click="clicked == true"></i>
+                                    @if ($productIsFree)
+                                        {{ __('Get for free') }}
+                                    @else
+                                        {{ __('Submit Payment') }}
+                                    @endif
+
+                                </button>
                             </div>
                         </div>
-                    </form>
-                    <!-- /.invoice -->
-                </div><!-- /.col -->
-            </div><!-- /.row -->
+                    </div>
+                </div>
+            </form>
         </div>
+
     </section>
     <!-- END CONTENT -->
 @endsection