Frontend finetuning after v3 graphql

rapidez · Nov 1, 2024 · c30d232 · c30d232
1 parent 9128ab3
commit c30d232
Show file tree

Hide file tree

Showing 22 changed files with 110 additions and 81 deletions.
diff --git a/resources/views/account/partials/account-features.blade.php b/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>
diff --git a/resources/views/account/register.blade.php b/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>
@@ -27,5 +26,5 @@
                 @include('rapidez-ct::account.partials.account-features')
             </x-slot:sidebar>
         </x-rapidez-ct::layout>
-    </div>
+    </div>  
 @endsection
diff --git a/resources/views/cart/content.blade.php b/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')

diff --git a/resources/views/cart/partials/sidebar/summary.blade.php b/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>
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="container">
-        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+        <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>

diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="container">
-        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+        <x-rapidez-ct::layout class="mt-4 sm:mt-12">
             <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Payment')
             </x-rapidez-ct::title-progress-bar>

diff --git a/resources/views/checkout/partials/layout.blade.php b/resources/views/checkout/partials/layout.blade.php
@@ -1,4 +1,4 @@
-<x-rapidez-ct::layout class="mt-8 sm:mt-14">
+<x-rapidez-ct::layout class="mt-4 sm:mt-12">
     <template v-if="checkout.step == 2 && $root.cart?.total_quantity">
         @include('rapidez-ct::checkout.steps.credentials')
     </template>

diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
@@ -27,29 +27,26 @@
             </fieldset>
         </graphql-mutation>
 
-
-        <div class="mt-9 pt-7 border-t-2 border-white">
-            <graphql-mutation
-                :query="config.queries.setNewBillingAddressOnCart"
-                :variables="JSON.parse(JSON.stringify({
-                    cart_id: mask,
-                    ...window.address_defaults,
-                    ...cart.billing_address,
-                    same_as_shipping: !cart.is_virtual && (cart?.billing_address?.same_as_shipping ?? true),
-                    country_code: cart.billing_address?.country.code || window.address_defaults.country_code
-                }))"
-                :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingBillingAddressOnCart : query, variables, options]"
-                :callback="updateCart"
-                :error-callback="checkResponseForExpiredCart"
-                :watch="false"
-                group="billing"
-                mutate-event="setBillingAddressOnCart"
-                v-slot="{ mutate, variables }"
-            >
-                <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
-                    @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
-                </fieldset>
-            </graphql-mutation>
-        </div>
+        <graphql-mutation
+            :query="config.queries.setNewBillingAddressOnCart"
+            :variables="JSON.parse(JSON.stringify({
+                cart_id: mask,
+                ...window.address_defaults,
+                ...cart.billing_address,
+                same_as_shipping: !cart.is_virtual && (cart?.billing_address?.same_as_shipping ?? true),
+                country_code: cart.billing_address?.country.code || window.address_defaults.country_code
+            }))"
+            :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingBillingAddressOnCart : query, variables, options]"
+            :callback="updateCart"
+            :error-callback="checkResponseForExpiredCart"
+            :watch="false"
+            group="billing"
+            mutate-event="setBillingAddressOnCart"
+            v-slot="{ mutate, variables }"
+        >
+            <fieldset data-function="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
+            </fieldset>
+        </graphql-mutation>
     </x-rapidez-ct::card.inactive>
 </checkout-address>
diff --git a/resources/views/checkout/partials/sections/success/features.blade.php b/resources/views/checkout/partials/sections/success/features.blade.php
@@ -0,0 +1,19 @@
+<x-rapidez-ct::card>
+    <x-rapidez-ct::title.lg class="mb-5">
+        @lang('Success usps')
+    </x-rapidez-ct::title.lg>
+    <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('Success usp 1')</span>
+        </li>
+        <li>
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <span>@lang('Success usp 2')</span>
+        </li>
+        <li>
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <span>@lang('Success usp 3')</span>
+        </li>
+    </x-rapidez-ct::usp-list>
+</x-rapidez-ct::card>
diff --git a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
@@ -5,5 +5,4 @@
     <p class="mt-4 text-sm">
         @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.number }}', 'email' => '@{{ order.email }}'])
     </p>
-    <p class="mt-4 text-sm">@lang('Your order is currently'): <span class="font-bold" v-blur>@{{ order.status }}</span> <a class="inline-block" href="#" v-on:click.prevent="(e) => {e.target.classList.add('animate-spin'); refreshOrder().finally(() => e.target.classList.remove('animate-spin'))}">&#8635;</a></p>
 </x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/partials/shipping-billing-fields.blade.php b/resources/views/checkout/partials/shipping-billing-fields.blade.php
@@ -1,10 +1,13 @@
-<p class="mb-5 text-lg font-medium">
-    @if ($type == 'shipping')
+@if ($type == 'shipping')
+    <p class="mb-5 text-lg font-medium">
         @lang('Shipping address')
-    @else
+    </p>
+@else
+    <p class="mb-5 text-lg font-medium mt-9 pt-7 border-t-2 border-white" v-if="!variables.same_as_shipping" v-cloak>
         @lang('Billing address')
-    @endif
-</p>
+    </p>
+@endif
+
 
 <template @if($type == 'billing') v-if="!variables.same_as_shipping" @endif >
     <x-rapidez-ct::address-form :$type/>

diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -17,7 +17,7 @@
     v-if="!cart.is_virtual"
 >
     <fieldset class="mt-5 flex flex-col gap-2" data-function="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
-        <div class="p-5 border rounded bg-white" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+        <template v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
             <x-rapidez-ct::input.radio
                 name="shipping_method"
                 v-model="variables.method"
@@ -36,7 +36,7 @@
                     </div>
                 </div>
             </x-rapidez-ct::input.radio>
-        </div>
+        </template>
     </fieldset>
 </graphql-mutation>
 
diff --git a/resources/views/checkout/partials/sidebar/summary.blade.php b/resources/views/checkout/partials/sidebar/summary.blade.php
@@ -5,7 +5,7 @@
     <x-rapidez-ct::title.lg class="mb-4">
         @lang('Order overview')
     </x-rapidez-ct::title.lg>
-    <x-rapidez-ct::separated-listing class="border-b pb-4 mb-4">
+    <x-rapidez-ct::separated-listing class="border-b pb-4 mb-4" v-cloak>
         <li v-for="item in cart.items">
             @{{ item.quantity }}x @{{ item.product.name }}
         </li>

diff --git a/resources/views/checkout/partials/sidebar/totals.blade.php b/resources/views/checkout/partials/sidebar/totals.blade.php
@@ -1,26 +1,27 @@
 <div>
     <dt>@lang('Subtotal')</dt>
-    <dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
+    <dd v-cloak>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
 </div>
 <div v-if="cart.prices.applied_taxes.length">
     <dt>@lang('Tax')</dt>
-    <dd>@{{ cart.prices.applied_taxes[0].amount.value | price }}</dd>
+    <dd v-cloak>@{{ cart.prices.applied_taxes[0].amount.value | price }}</dd>
 </div>
 <div v-if="cart.shipping_addresses.length && cart.shipping_addresses[0]?.selected_shipping_method">
     <dt>
         @lang('Shipping')<br>
-        <small>@{{ cart.shipping_addresses[0]?.selected_shipping_method.carrier_title }} - @{{ cart.shipping_addresses[0]?.selected_shipping_method.method_title }}</small>
+        <small v-cloak>@{{ cart.shipping_addresses[0]?.selected_shipping_method.carrier_title }} - @{{ cart.shipping_addresses[0]?.selected_shipping_method.method_title }}</small>
     </dt>
-    <dd v-if="cart.shipping_addresses[0]?.selected_shipping_method.amount.value > 0">@{{ cart.shipping_addresses[0]?.selected_shipping_method.amount.value | price }}</dd>
+    <dd v-cloak v-if="cart.shipping_addresses[0]?.selected_shipping_method.amount.value > 0">@{{ cart.shipping_addresses[0]?.selected_shipping_method.amount.value | price }}</dd>
     <dd v-else class="text-ct-enhanced font-medium">
         @lang('Free')
     </dd>
 </div>
+
 <div v-for="discount in cart.prices.discounts">
-    <dt>@{{ discount.label }}</dt>
-    <dd>-@{{ discount.amount.value | price }}</dd>
+    <dt v-cloak>@{{ discount.label }}</dt>
+    <dd v-cloak>-@{{ discount.amount.value | price }}</dd>
 </div>
 <div class="font-bold">
     <dt>@lang('Total')</dt>
-    <dd>@{{ cart.prices.grand_total.value | price }}</dd>
+    <dd v-cloak>@{{ cart.prices.grand_total.value | price }}</dd>
 </div>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
@@ -1,22 +1,27 @@
 @php($checkoutSteps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code')) ?: config('rapidez.frontend.checkout_steps.default'))
 <checkout-success>
     <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success" class="container">
-        <div class="flex flex-wrap gap-1 items-baseline justify-between">
+        <x-rapidez-ct::layout class="mt-4 sm:mt-12">
             <x-rapidez-ct::title>
                 @lang('Thank you for your order')
             </x-rapidez-ct::title>
-        </div>
-        <x-rapidez-ct::sections>
-            @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
-        </x-rapidez-ct::sections>
-        <x-rapidez-ct::sections>
-            @include('rapidez-ct::checkout.partials.sections.success.order-info')
-            @include('rapidez-ct::checkout.partials.sections.success.products')
-            @include('rapidez-ct::checkout.partials.sections.success.newsletter')
-            @includeWhen(
-                config('rapidez.checkout-theme.checkout.success.register'),
-                'rapidez-ct::checkout.partials.sections.success.create-account'
-            )
-        </x-rapidez-ct::sections>
+
+            <x-rapidez-ct::sections>
+                @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
+            </x-rapidez-ct::sections>
+
+            <x-rapidez-ct::sections>
+                @include('rapidez-ct::checkout.partials.sections.success.order-info')
+                @include('rapidez-ct::checkout.partials.sections.success.products')
+                @include('rapidez-ct::checkout.partials.sections.success.newsletter')
+                @includeWhen(
+                    config('rapidez.checkout-theme.checkout.success.register'),
+                    'rapidez-ct::checkout.partials.sections.success.create-account'
+                )
+            </x-rapidez-ct::sections>
+            <x-slot:sidebar>
+                @include('rapidez-ct::checkout.partials.sections.success.features')
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
     </div>
 </checkout-success>
diff --git a/resources/views/components/address.blade.php b/resources/views/components/address.blade.php
@@ -11,7 +11,7 @@
         <template v-if="!isEmpty">
             <template v-if="check">
                 <div class="bg-ct-accent absolute inset-y-0 left-0 w-1 rounded-l"></div>
-                <x-heroicon-s-check class="text-ct-accent absolute right-7 top-7 w-5" />
+                <x-heroicon-o-check class="text-ct-accent absolute right-7 top-7 w-5" stroke-width="2.5" />
             </template>
             <template v-else-if="disabled">
                 <x-heroicon-o-lock-closed class="absolute right-5 top-5 w-6" />

diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
@@ -2,7 +2,7 @@
 <div {{ $attributes->class('relative flex-1 rounded border bg-white px-8 py-6') }}>
     @if ($check)
         <template v-if="{{ $check }}">
-            <x-heroicon-s-check class="absolute right-7 top-7 w-5 text-ct-accent" />
+            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-ct-accent" stroke-width="2.5" />
         </template>
     @endif
     {{ $slot }}

diff --git a/resources/views/components/newsletter-visual.blade.php b/resources/views/components/newsletter-visual.blade.php
@@ -1,4 +1,4 @@
-<div class="absolute right-0 top-1/2 -translate-y-1/2 max-sm:hidden">
+<div class="absolute right-7 top-1/2 -translate-y-1/2 max-lg:hidden">
     <div class="bg-ct-inactive-100 text-ct-inactive items-center justify-center rounded-full p-4">
         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
     </div>

diff --git a/resources/views/components/newsletter/input.blade.php b/resources/views/components/newsletter/input.blade.php
@@ -4,7 +4,6 @@
     <x-rapidez-ct::title.lg class="mb-5">
         @lang('Newsletter')
     </x-rapidez-ct::title.lg>
-    <x-rapidez-ct::newsletter-visual />
     <graphql-mutation
         v-cloak
         query="mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }"

diff --git a/resources/views/components/newsletter/partials/input.blade.php b/resources/views/components/newsletter/partials/input.blade.php
@@ -22,7 +22,7 @@ class="relative self-end whitespace-nowrap"
         </div>
         <div class="absolute inset-0 p-3.5" v-if="(mutated || mutating) && !error">
             <x-heroicon-o-arrow-path class="mx-auto h-full animate-spin" v-if="mutating" />
-            <x-heroicon-o-check class="mx-auto h-full" v-else />
+            <x-heroicon-o-check class="mx-auto h-full" v-else stroke-width="2.5" />
         </div>
     </x-rapidez-ct::button.accent>
 </form>
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
@@ -1,5 +1,5 @@
 @aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
-<div class="flex items-center space-x-3.5 sm:space-x-[18px] text-xs">
+<div class="flex items-center gap-x-3.5 sm:gap-x-4 text-xs">
     <span class="whitespace-nowrap font-medium text-ct-inactive">
         @lang('Step :step out of :total', [
             'step' => $currentStepKey + 1,
@@ -8,12 +8,10 @@
     </span>
     @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
         <a href="{{ route('checkout', $checkoutStep) }}" @class([
-            'aspect-square w-3 rounded text-center',
-            'bg-ct-accent cursor-pointer' => $currentStepKey < $checkoutStepKey,
-            'bg-ct-border pointer-events-none' => $checkoutStepKey > $currentStepKey,
+            'size-3 rounded text-center bg-ct-accent',
+            'cursor-pointer' => $currentStepKey < $checkoutStepKey,
+            'pointer-events-none !bg-ct-border' => $checkoutStepKey > $currentStepKey,
             'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
-        ])>
-            {{ $checkoutStepKey + 1 }}
-        </a>
+        ])></a>
     @endforeach
 </div>
diff --git a/resources/views/components/usp-list.blade.php b/resources/views/components/usp-list.blade.php
@@ -0,0 +1,3 @@
+<ul {{ $attributes->class('space-y-5 [&>*]:relative [&>*]:pl-7') }}>
+    {{ $slot }}
+</ul>