Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend finetuning after v3 graphql #126

Merged
merged 10 commits into from
Nov 5, 2024
Merged

Frontend finetuning after v3 graphql #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6669a87
Update templates and steps to support V3
indykoning Oct 18, 2024
0a73938
Add success container
indykoning Oct 18, 2024
e3a870f
Ensure payment_method composers are triggered
indykoning Oct 21, 2024
1f09d7d
Translation checker workflow (#123)
Jade-GG Nov 1, 2024
99999cf
Update Core requirement
indykoning Nov 1, 2024
9128ab3
Merge branch 'master' of github.com:rapidez/checkout-theme into featu…
indykoning Nov 1, 2024
c30d232
Frontend finetuning after v3 graphql
jordythevulder Nov 1, 2024
d4b89f5
Resolved feedback
jordythevulder Nov 4, 2024
59b54bf
Resolved merge conflict
jordythevulder Nov 5, 2024
daa946d
forgot one file
jordythevulder Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions resources/views/account/partials/account-features.blade.php
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>
3 changes: 1 addition & 2 deletions resources/views/checkout/partials/sections/login/logged-out.blade.php
View file
Open in desktop
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
View file
Open in desktop
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>
19 changes: 19 additions & 0 deletions resources/views/checkout/partials/sections/success/features.blade.php
View file
Open in desktop
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>
13 changes: 8 additions & 5 deletions resources/views/checkout/partials/shipping-billing-fields.blade.php
View file
Open in desktop
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
View file
Open in desktop
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>

2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sidebar/summary.blade.php
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<div>
Roene-JustBetter marked this conversation as resolved.
Show resolved Hide resolved
<dt>@lang('Subtotal')</dt>
<dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
<dd v-cloak>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
indykoning marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div v-if="cart.prices.applied_taxes.length">
indykoning marked this conversation as resolved.
Show resolved Hide resolved
<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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading