Skip to content

Commit

Permalink
portal payment methods slider convert to tab component
Browse files Browse the repository at this point in the history
  • Loading branch information
@brkcvn
brkcvn committed Aug 16, 2022
1 parent 37fc090 commit 36304d9
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 144 deletions.
106 changes: 54 additions & 52 deletions resources/views/portal/invoices/preview.blade.php
View file
Expand Up @@ -23,68 +23,70 @@
<div class="flex flex-col lg:flex-row my-10 lg:space-x-24 rtl:space-x-reverse space-y-12 lg:space-y-0">
<div class="w-full lg:w-5/12">
@if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
<div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
<x-tabs active="{{ reset($payment_methods) }}">
<div role="tablist" class="flex flex-wrap">
@php $is_active = true; @endphp

<div class="swiper swiper-links w-full">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide">
<div
x-on:click="active = '{{ $name }}'"
@click="onChangePaymentMethodSigned('{{ $key }}')"
id="tabs-payment-method-{{ $key }}-tab"
x-bind:class="active != '{{ $name }}' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
class="relative text-sm text-black text-center pb-2 border-b cursor-pointer transition-all tabs-link"
>
{{ $name }}
<x-slot name="navs">
<div class="swiper swiper-links w-full">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide">
<x-tabs.nav
id="{{ $name }}"
@click="onChangePaymentMethodSigned('{{ $key }}')"
>
<div class="w-24 truncate">
{{ $name }}
</div>
</x-tabs.nav>
</div>
</div>
@stack('invoice_{{ $key }}_tab_end')
@stack('invoice_{{ $key }}_tab_end')

@php $is_active = false; @endphp
@endforeach
</div>
@php $is_active = false; @endphp
@endforeach
</div>

<div class="swiper-button-next top-3 right-0">
<span class="material-icons">chevron_right</span>
</div>
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
<div class="swiper-button-next top-3 right-0">
<span class="material-icons">chevron_right</span>
</div>

<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
</div>
</div>
</x-slot>
</div>
@php $is_active = true; @endphp

@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_content_start')
<div
x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
class="my-3"
id="tabs-payment-method-{{ $key }}"
>
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
</div>
@stack('invoice_{{ $key }}_content_end')

@php $is_active = false; @endphp
@endforeach
</div>

<x-form id="portal">
<x-form.group.payment-method
id="payment-method"
:selected="array_key_first($payment_methods)"
not-required
form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
/>

<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form>
<x-slot name="content">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_content_start')
<x-tabs.tab id="{{ $name }}">
<div class="my-3">
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
</div>
</x-tabs.tab>
@stack('invoice_{{ $key }}_content_end')

@php $is_active = false; @endphp
@endforeach

<x-form id="portal">
<x-form.group.payment-method
id="payment-method"
:selected="array_key_first($payment_methods)"
not-required
form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
/>

<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form>
</x-slot>
</x-tabs>
@endif

@if ($invoice->transactions->count())
Expand Down
108 changes: 56 additions & 52 deletions resources/views/portal/invoices/show.blade.php
View file
Expand Up @@ -21,66 +21,70 @@
<div class="flex flex-col lg:flex-row my-10 lg:space-x-24 rtl:space-x-reverse space-y-12 lg:space-y-0">
<div class="w-full lg:w-5/12">
@if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
<div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
<div role="tablist" class="flex flex-wrap gap-y-4">
<x-tabs active="{{ reset($payment_methods) }}">
<div role="tablist" class="flex flex-wrap">
@php $is_active = true; @endphp

<div class="swiper swiper-links w-full">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start')

<div class="swiper-slide">
<div
x-on:click="active = '{{ $name }}'"
@click="onChangePaymentMethod('{{ $key }}')"
id="tabs-payment-method-{{ $key }}-tab"
x-bind:class="active != '{{ $name }}' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
class="text-sm text-black text-center pb-2 border-b cursor-pointer transition-all tabs-link"
>
{{ $name }}
</div>
</div>
<x-slot name="navs">
<div class="swiper swiper-links w-full">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide">
<x-tabs.nav
id="{{ $name }}"
@click="onChangePaymentMethodSigned('{{ $key }}')"
>
<div class="w-24 truncate">
{{ $name }}
</div>
</x-tabs.nav>
</div>
@stack('invoice_{{ $key }}_tab_end')

@php $is_active = false; @endphp
@endforeach
</div>

@stack('invoice_{{ $key }}_tab_end')
<div class="swiper-button-next top-3 right-0">
<span class="material-icons">chevron_right</span>
</div>

@php $is_active = false; @endphp
@endforeach
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
</div>
</div>
</x-slot>
</div>

@php $is_active = true; @endphp

@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_content_start')

<div
x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
class="my-3"
id="tabs-payment-method-{{ $key }}"
>
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
</div>

@stack('invoice_{{ $key }}_content_end')

@php $is_active = false; @endphp
@endforeach
</div>

<x-form id="portal">
<x-form.group.payment-method
id="payment-method"
:selected="array_key_first($payment_methods)"
not-required
form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethod('{{ array_key_first($payment_methods) }}')"
/>

<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form>
<x-slot name="content">
@foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_content_start')
<x-tabs.tab id="{{ $name }}">
<div class="my-3">
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
</div>
</x-tabs.tab>
@stack('invoice_{{ $key }}_content_end')

@php $is_active = false; @endphp
@endforeach

<x-form id="portal">
<x-form.group.payment-method
id="payment-method"
:selected="array_key_first($payment_methods)"
not-required
form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethod('{{ array_key_first($payment_methods) }}')"
/>

<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form>
</x-slot>
</x-tabs>
@endif

@if ($invoice->transactions->count())
Expand Down

0 comments on commit 36304d9

Please sign in to comment.