Skip to content

Commit

Permalink
Rapidez v3 frontend finetuning (#126)
Browse files Browse the repository at this point in the history
  • Loading branch information
jordythevulder authored Nov 5, 2024
1 parent 6cc528c commit 21b8627
Show file tree
Hide file tree
Showing 24 changed files with 155 additions and 125 deletions.
22 changes: 14 additions & 8 deletions resources/views/account/partials/account-features.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 0 additions & 1 deletion resources/views/account/register.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
@lang('Register')
</x-rapidez-ct::title>


@include('rapidez-ct::account.partials.register-account')

<x-rapidez-ct::toolbar>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/cart/content.blade.php
Original file line number Diff line number Diff line change
@@ -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')
Expand Down
2 changes: 1 addition & 1 deletion resources/views/cart/partials/sidebar/summary.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class="flex w-full items-center justify-center gap-1 mt-6"
</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" />
<x-heroicon-o-check class="h-5 text-ct-accent" stroke-width="2.5" />
@lang('Ordered within 2 minutes')
</div>
</x-rapidez-ct::card>
2 changes: 1 addition & 1 deletion resources/views/checkout/pages/credentials.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="container">
<x-rapidez-ct::layout class="mt-8 sm:mt-14" v-cloak>
<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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/checkout/pages/payment.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/address-card.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ class="w-full sm:min-w-[350px]"
</template>
</div>
</graphql-mutation>
</graphql-mutation>
</graphql-mutation>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/layout.blade.php
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
46 changes: 21 additions & 25 deletions resources/views/checkout/partials/sections/address.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -26,30 +26,26 @@
@include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
</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 partial-submit="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 partial-submit="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>
Original file line number Diff line number Diff line change
Expand Up @@ -70,5 +70,4 @@ class="justify-center"
@lang('Login')
</x-rapidez-ct::button.accent>
</fieldset>
</checkout-login>

</checkout-login>
80 changes: 40 additions & 40 deletions resources/views/checkout/partials/sections/payment.blade.php
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
<graphql-mutation
:query="config.queries.setPaymentMethodOnCart"
:variables="{
cart_id: mask,
code: cart.selected_payment_method.code,
}"
group="payment"
:before-request="handleBeforePaymentMethodHandlers"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
mutate-event="setPaymentMethodOnCart"
v-slot="{ mutate, variables }"
>
<div partial-submit="mutate">
<div v-for="(method, index) in cart.available_payment_methods">
@include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
</div>
<graphql-mutation
:query="config.queries.setPaymentMethodOnCart"
:variables="{
cart_id: mask,
code: cart.selected_payment_method.code,
}"
group="payment"
:before-request="handleBeforePaymentMethodHandlers"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
mutate-event="setPaymentMethodOnCart"
v-slot="{ mutate, variables }"
>
<div partial-submit="mutate">
<div v-for="(method, index) in cart.available_payment_methods">
@include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
</div>
</graphql-mutation>
<graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }">
<div v-if="data?.checkoutAgreements?.length" class="mt-5 flex flex-col gap-y-4" slot-scope="{ data }">
<div v-for="agreement in data.checkoutAgreements">
<label
class="text-ct-primary cursor-pointer text-sm underline"
v-bind:for="agreement.checkbox_text"
v-if="agreement.mode == 'AUTO'"
>
@{{ agreement.checkbox_text }}
</label>
<template v-else>
@include('rapidez-ct::checkout.partials.sections.payment.agreement-checkbox')
</template>
<x-rapidez-ct::slideover id="agreement.checkbox_text">
<x-slot name="title">
@{{ agreement.name }}
</x-slot>
<div v-if="agreement.is_html" v-html="agreement.content"></div>
<div v-else class="whitespace-pre-wrap" v-text="agreement.content"></div>
</x-rapidez-ct::slideover>
</div>
</div>
</graphql-mutation>
<graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }">
<div v-if="data?.checkoutAgreements?.length" class="mt-5 flex flex-col gap-y-4" slot-scope="{ data }">
<div v-for="agreement in data.checkoutAgreements">
<label
class="text-ct-primary cursor-pointer text-sm underline"
v-bind:for="agreement.checkbox_text"
v-if="agreement.mode == 'AUTO'"
>
@{{ agreement.checkbox_text }}
</label>
<template v-else>
@include('rapidez-ct::checkout.partials.sections.payment.agreement-checkbox')
</template>
<x-rapidez-ct::slideover id="agreement.checkbox_text">
<x-slot name="title">
@{{ agreement.name }}
</x-slot>
<div v-if="agreement.is_html" v-html="agreement.content"></div>
<div v-else class="whitespace-pre-wrap" v-text="agreement.content"></div>
</x-rapidez-ct::slideover>
</div>
</graphql>
</div>
</graphql>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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/>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/checkout/partials/shipping/methods.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
v-if="!cart.is_virtual"
>
<fieldset class="mt-5 flex flex-col gap-2" partial-submit="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"
Expand All @@ -36,7 +36,7 @@
</div>
</div>
</x-rapidez-ct::input.radio>
</div>
</template>
</fieldset>
</graphql-mutation>

Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions resources/views/checkout/partials/sidebar/totals.blade.php
Original file line number Diff line number Diff line change
@@ -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>
33 changes: 19 additions & 14 deletions resources/views/checkout/steps/success.blade.php
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion resources/views/components/address.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/card/white.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/newsletter-visual.blade.php
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading

0 comments on commit 21b8627

Please sign in to comment.