Skip to content

Commit

Permalink
Move card component outside of includes for more extendability (#139)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jade-GG authored Nov 12, 2024
1 parent 2755286 commit aae96f5
Show file tree
Hide file tree
Showing 28 changed files with 374 additions and 353 deletions.
16 changes: 12 additions & 4 deletions resources/views/account/edit.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,18 @@
<graphql query="@include('rapidez::account.partials.queries.overview')" :callback="sortOrdersCallback">
<div v-if="data" slot-scope="{ data, runQuery }">
<x-rapidez-ct::sections>
@include('rapidez-ct::account.partials.sections.edit.addresses')
@include('rapidez-ct::account.partials.sections.edit.newsletter')
@include('rapidez-ct::account.partials.sections.edit.email')
@include('rapidez-ct::account.partials.sections.edit.password')
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.sections.edit.addresses')
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.sections.edit.newsletter')
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.sections.edit.email')
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.sections.edit.password')
</x-rapidez-ct::card.inactive>
</x-rapidez-ct::sections>
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('account.overview')">
Expand Down
8 changes: 6 additions & 2 deletions resources/views/account/forgotpassword.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@
@lang('Login')
</x-rapidez-ct::title>
<x-slot:columns>
@include('rapidez-ct::account.partials.forgotpassword')
@include('rapidez-ct::account.partials.register')
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.forgotpassword')
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card class="md:w-auto">
@include('rapidez-ct::account.partials.register')
</x-rapidez-ct::card>
</x-slot:columns>
</x-rapidez-ct::layout.two-column>
</div>
Expand Down
8 changes: 6 additions & 2 deletions resources/views/account/login.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@
@lang('Login')
</x-rapidez-ct::title>
<x-slot:columns>
@include('rapidez-ct::account.partials.login')
@include('rapidez-ct::account.partials.register')
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.login')
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card class="md:w-auto">
@include('rapidez-ct::account.partials.register')
</x-rapidez-ct::card>
</x-slot:columns>
</x-rapidez-ct::layout.two-column>
</div>
Expand Down
4 changes: 3 additions & 1 deletion resources/views/account/order.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
<div slot-scope="{ order: data }" v-if="order">
<x-rapidez-ct::sections>
@include('rapidez-ct::account.partials.order.products')
@include('rapidez-ct::account.partials.order.order-info')
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.order.order-info')
</x-rapidez-ct::card.inactive>
</x-rapidez-ct::sections>
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline href="/account/orders">
Expand Down
60 changes: 29 additions & 31 deletions resources/views/account/partials/forgotpassword.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,33 @@
:clear="true"
:notify="{ message: '@lang('An email is send with a password reset link if an account exists with the provided email address.')' }"
>
<x-rapidez-ct::card.inactive slot-scope="{ mutate, variables }">
<form v-on:submit.prevent="mutate">
<x-rapidez-ct::title.lg class="mb-4">
@lang('Forgot Your Password?')
</x-rapidez-ct::title.lg>
<p class="mb-5 text-sm">
@lang('Enter your email address below, you will receive an email within minutes to reset the password.')
</p>
<x-rapidez-ct::input
name="email"
type="email"
v-model="variables.email"
label="Email"
required
/>
<div class="mt-5 flex items-center justify-between">
<a href="{{ route('account.login') }}" class="text-sm text-ct-inactive underline">
@lang('Back to login')
</a>
<x-rapidez-ct::button.accent
class="flex items-center gap-1"
type="submit"
dusk="continue"
loader
>
@lang('Send')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.accent>
</div>
</form>
</x-rapidez-ct::card.inactive>
<form v-on:submit.prevent="mutate">
<x-rapidez-ct::title.lg class="mb-4">
@lang('Forgot Your Password?')
</x-rapidez-ct::title.lg>
<p class="mb-5 text-sm">
@lang('Enter your email address below, you will receive an email within minutes to reset the password.')
</p>
<x-rapidez-ct::input
name="email"
type="email"
v-model="variables.email"
label="Email"
required
/>
<div class="mt-5 flex items-center justify-between">
<a href="{{ route('account.login') }}" class="text-sm text-ct-inactive underline">
@lang('Back to login')
</a>
<x-rapidez-ct::button.accent
class="flex items-center gap-1"
type="submit"
dusk="continue"
loader
>
@lang('Send')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.accent>
</div>
</form>
</graphql-mutation>
8 changes: 6 additions & 2 deletions resources/views/account/partials/layout.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,12 @@
@lang('Login')
</x-rapidez-ct::title>
<x-slot:columns>
@include('rapidez-ct::account.partials.login', ['redirect' => false])
@include('rapidez-ct::account.partials.register')
<x-rapidez-ct::card.inactive>
@include('rapidez-ct::account.partials.login', ['redirect' => false])
</x-rapidez-ct::card.inactive>
<x-rapidez-ct::card class="md:w-auto">
@include('rapidez-ct::account.partials.register')
</x-rapidez-ct::card>
</x-slot:columns>
</x-rapidez-ct::layout.two-column>
</template>
Expand Down
60 changes: 29 additions & 31 deletions resources/views/account/partials/login.blade.php
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
<login :checkout-login="false" v-slot="login" redirect="{{ $redirect ?? route('account.overview') }}">
<x-rapidez-ct::card.inactive>
<form class="space-y-5" v-on:submit.prevent="login.go()">
<x-rapidez-ct::input
name="email"
type="email"
label="Email"
v-model="login.email"
required
/>
<x-rapidez-ct::input.password
name="password"
label="Password"
v-model="login.password"
required
/>
<div class="flex items-center justify-between">
<a href="{{ route('account.forgotpassword') }}" class="text-sm text-ct-inactive underline">
@lang('Forgot your password?')
</a>
<x-rapidez-ct::button.accent
class="flex items-center gap-1"
type="submit"
dusk="continue"
loader
>
@lang('Login')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.accent>
</div>
</form>
</x-rapidez-ct::card.inactive>
<form class="space-y-5" v-on:submit.prevent="login.go()">
<x-rapidez-ct::input
name="email"
type="email"
label="Email"
v-model="login.email"
required
/>
<x-rapidez-ct::input.password
name="password"
label="Password"
v-model="login.password"
required
/>
<div class="flex items-center justify-between">
<a href="{{ route('account.forgotpassword') }}" class="text-sm text-ct-inactive underline">
@lang('Forgot your password?')
</a>
<x-rapidez-ct::button.accent
class="flex items-center gap-1"
type="submit"
dusk="continue"
loader
>
@lang('Login')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.accent>
</div>
</form>
</login>
116 changes: 57 additions & 59 deletions resources/views/account/partials/order/order-info.blade.php
Original file line number Diff line number Diff line change
@@ -1,60 +1,58 @@
<x-rapidez-ct::card.inactive>
<div class="flex flex-wrap -space-x-px max-sm:-space-y-px">
<div class="flex flex-1 flex-col -space-y-px">
<template v-if="order.hide_billing || hideBilling || order.shipping_address?.customer_address_id == order.billing_address?.customer_address_id">
<x-rapidez-ct::card.address
v-bind:address="order.shipping_address"
shipping
billing
check
/>
</template>
<template v-else>
<x-rapidez-ct::card.address
v-bind:address="order.shipping_address"
shipping
check
/>
<x-rapidez-ct::card.address
v-bind:address="order.billing_address"
billing
check
/>
</template>
</div>
<div class="flex flex-1 flex-col -space-y-px">
<x-rapidez-ct::card.white class="flex-1" check>
<x-rapidez-ct::title.lg class="mb-4 pr-8">
@lang('Payment method')
</x-rapidez-ct::title.lg>
<div class="flex flex-1 flex-wrap justify-between">
<ul class="flex flex-col gap-1">
<li v-for="data in order.payment_methods">
@{{ data.name }}
</li>
</ul>
@if (!empty($slot))
<div class="mt-auto flex flex-col self-end">
{{ $slot }}
</div>
@endif
</div>
</x-rapidez-ct::card.white>
<x-rapidez-ct::card.white class="flex-1" check>
<x-rapidez-ct::title.lg class="mb-4 pr-8">
@lang('Delivery method')
</x-rapidez-ct::title.lg>
<div class="flex flex-1 flex-wrap justify-between">
<ul class="flex flex-col gap-1">
<li v-text="order.shipping_method"></li>
</ul>
@if (!empty($slot))
<div class="mt-auto flex flex-col self-end">
{{ $slot }}
</div>
@endif
</div>
</x-rapidez-ct::card.white>
</div>
<div class="flex flex-wrap -space-x-px max-sm:-space-y-px">
<div class="flex flex-1 flex-col -space-y-px">
<template v-if="order.hide_billing || hideBilling || order.shipping_address?.customer_address_id == order.billing_address?.customer_address_id">
<x-rapidez-ct::card.address
v-bind:address="order.shipping_address"
shipping
billing
check
/>
</template>
<template v-else>
<x-rapidez-ct::card.address
v-bind:address="order.shipping_address"
shipping
check
/>
<x-rapidez-ct::card.address
v-bind:address="order.billing_address"
billing
check
/>
</template>
</div>
</x-rapidez-ct::card.inactive>
<div class="flex flex-1 flex-col -space-y-px">
<x-rapidez-ct::card.white class="flex-1" check>
<x-rapidez-ct::title.lg class="mb-4 pr-8">
@lang('Payment method')
</x-rapidez-ct::title.lg>
<div class="flex flex-1 flex-wrap justify-between">
<ul class="flex flex-col gap-1">
<li v-for="data in order.payment_methods">
@{{ data.name }}
</li>
</ul>
@if (!empty($slot))
<div class="mt-auto flex flex-col self-end">
{{ $slot }}
</div>
@endif
</div>
</x-rapidez-ct::card.white>
<x-rapidez-ct::card.white class="flex-1" check>
<x-rapidez-ct::title.lg class="mb-4 pr-8">
@lang('Delivery method')
</x-rapidez-ct::title.lg>
<div class="flex flex-1 flex-wrap justify-between">
<ul class="flex flex-col gap-1">
<li v-text="order.shipping_method"></li>
</ul>
@if (!empty($slot))
<div class="mt-auto flex flex-col self-end">
{{ $slot }}
</div>
@endif
</div>
</x-rapidez-ct::card.white>
</div>
</div>
4 changes: 3 additions & 1 deletion resources/views/account/partials/register-account.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@ class="grid gap-5 md:grid-cols-2"
</x-rapidez-ct::card.inactive>
@endif

<x-rapidez-ct::newsletter v-model="variables.is_subscribed"/>
<x-rapidez-ct::card.inactive>
<x-rapidez-ct::newsletter v-model="variables.is_subscribed"/>
</x-rapidez-ct::card.inactive>
</x-rapidez-ct::sections>
</graphql-mutation>
</graphql-mutation>
22 changes: 10 additions & 12 deletions resources/views/account/partials/register.blade.php
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<x-rapidez-ct::card class="md:w-auto">
<x-rapidez-ct::title.lg class="mb-4">
@lang('Register within 1 minute')
</x-rapidez-ct::title.lg>
<p class="mb-5 text-sm">
@lang('Don\'t have an account yet? Create an account and enjoy faster ordering, repeat orders, status of your order, easy returns and more!')
</p>
<x-rapidez-ct::button.outline :href="route('account.register')" class="flex w-fit items-center gap-1">
@lang('Register')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.outline>
</x-rapidez-ct::card>
<x-rapidez-ct::title.lg class="mb-4">
@lang('Register within 1 minute')
</x-rapidez-ct::title.lg>
<p class="mb-5 text-sm">
@lang('Don\'t have an account yet? Create an account and enjoy faster ordering, repeat orders, status of your order, easy returns and more!')
</p>
<x-rapidez-ct::button.outline :href="route('account.register')" class="flex w-fit items-center gap-1">
@lang('Register')
<x-heroicon-o-arrow-right class="h-4" />
</x-rapidez-ct::button.outline>
Loading

0 comments on commit aae96f5

Please sign in to comment.