Merge branch 'akaunting:master' into sentry

This commit is contained in:
Burak Civan 2022-11-21 16:57:16 +03:00 committed by GitHub
commit 3a7410f0fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 273 additions and 194 deletions

View File

@ -29,6 +29,9 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
let td_item = td[i]; let td_item = td[i];
td_item.addEventListener("click", (event) => { td_item.addEventListener("click", (event) => {
if (document.body.clientWidth < 768 && event.target.closest('[overflow-x-hidden]')) {
return;
}
// click disabled when preview dialog is open // click disabled when preview dialog is open
if (event.target.closest('[data-tooltip-target]')) { if (event.target.closest('[data-tooltip-target]')) {
return; return;
@ -436,6 +439,7 @@ function marqueeAnimation(truncate) {
//there is overflow class for the animation does not overflow the width //there is overflow class for the animation does not overflow the width
truncate.parentElement.parentElement.classList.add('overflow-x-hidden'); truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
truncate.parentElement.parentElement.setAttribute('overflow-x-hidden', true);
} }
} }

76
public/css/app.css vendored
View File

@ -53686,6 +53686,16 @@ table thead a:hover{
padding-right: 8px !important; padding-right: 8px !important;
} }
.el-select-dropdown__item .new-badge {
width: 45px !important;
margin-left: 8px;
z-index: 99;
}
.el-select-dropdown__item .new-badge:hover {
background-color: #6ea152;
}
.el-select-dropdown__item .material-icons { .el-select-dropdown__item .material-icons {
padding-right: 0 !important; padding-right: 0 !important;
padding-left: 0 !important; padding-left: 0 !important;
@ -54088,6 +54098,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
.full-width-mobile { .full-width-mobile {
width: 100% !important; width: 100% !important;
} }
.full-height-mobile {
height: 100% !important;
}
} }
/* full-width for mobile. Some component use inline styling for width */ /* full-width for mobile. Some component use inline styling for width */
@ -55817,14 +55831,14 @@ body{
padding-right: 0.75rem; padding-right: 0.75rem;
} }
[dir="ltr"] .ltr\:pl-10{
padding-left: 2.5rem;
}
[dir="ltr"] .ltr\:pr-10{ [dir="ltr"] .ltr\:pr-10{
padding-right: 2.5rem; padding-right: 2.5rem;
} }
[dir="ltr"] .ltr\:pl-10{
padding-left: 2.5rem;
}
[dir="ltr"] .ltr\:text-left{ [dir="ltr"] .ltr\:text-left{
text-align: left; text-align: left;
} }
@ -56826,14 +56840,14 @@ body{
padding-left: 0.75rem; padding-left: 0.75rem;
} }
[dir="rtl"] .rtl\:pr-10{
padding-right: 2.5rem;
}
[dir="rtl"] .rtl\:pl-10{ [dir="rtl"] .rtl\:pl-10{
padding-left: 2.5rem; padding-left: 2.5rem;
} }
[dir="rtl"] .rtl\:pr-10{
padding-right: 2.5rem;
}
[dir="rtl"] .rtl\:text-left{ [dir="rtl"] .rtl\:text-left{
text-align: left; text-align: left;
} }
@ -56893,6 +56907,10 @@ body{
float: right; float: right;
} }
.sm\:mt-6{
margin-top: 1.5rem;
}
.sm\:mt-12{ .sm\:mt-12{
margin-top: 3rem; margin-top: 3rem;
} }
@ -57086,10 +57104,19 @@ body{
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
} }
.sm\:p-10{
padding: 2.5rem;
}
.sm\:p-7{ .sm\:p-7{
padding: 1.75rem; padding: 1.75rem;
} }
.sm\:py-10{
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.sm\:px-0{ .sm\:px-0{
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
@ -57100,6 +57127,31 @@ body{
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.sm\:text-xs{
font-size: 0.75rem;
line-height: 1rem;
}
.sm\:text-base{
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}
.sm\:text-2xl{
font-size: 1.375rem;
line-height: 1.5rem;
}
.sm\:text-6xl{ .sm\:text-6xl{
font-size: 2.5rem; font-size: 2.5rem;
line-height: 2.75rem; line-height: 2.75rem;
@ -57114,6 +57166,10 @@ body{
right: 1rem; right: 1rem;
} }
[dir="ltr"] .sm\:ltr\:pl-10{
padding-left: 2.5rem;
}
[dir="rtl"] .sm\:rtl\:left-4{ [dir="rtl"] .sm\:rtl\:left-4{
left: 1rem; left: 1rem;
} }
@ -57121,6 +57177,10 @@ body{
[dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){ [dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 1; --tw-space-x-reverse: 1;
} }
[dir="rtl"] .sm\:rtl\:pr-10{
padding-right: 2.5rem;
}
} }
@media (min-width: 768px){ @media (min-width: 768px){

View File

@ -105,7 +105,7 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component> <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span> <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
<select :name="name" :id="name" class="hidden"> <select :name="name" :id="name" class="hidden">
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option> <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>

View File

@ -102,7 +102,7 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component> <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span> <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
<select :name="name" :id="name" class="hidden"> <select :name="name" :id="name" class="hidden">
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option> <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
@ -202,7 +202,7 @@
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component> <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span> <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected] || (sorted_options.length && sorted_options[sorted_options.length - 1].mark_new && sorted_options[sorted_options.length - 1].key == selected)">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none"> <select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option> <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>

View File

@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;"> <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps> <WizardSteps :active_state="active"></WizardSteps>
<form ref="form" class="w-full"> <form ref="form" class="w-full">
<div class="relative"> <div class="relative">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50"> <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span> <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div> </div>
<div class="flex flex-col justify-between"> <div class="flex flex-col justify-between -mt-5 sm:mt-0">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10"> <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
<div class="sm:col-span-6"> <div class="sm:col-span-6">
<base-input <base-input

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;"> <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps> <WizardSteps :active_state="active"></WizardSteps>
<div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)"> <div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50"> <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span> <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div> </div>

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden"> <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
<div class="pr-10"> <div class="pr-10">
<WizardSteps :active_state="active"></WizardSteps> <WizardSteps :active_state="active"></WizardSteps>
</div> </div>
<div modal-container class="flex flex-col justify-between" style="height:565px;"> <div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50"> <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span> <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
</div> </div>

View File

@ -2,7 +2,7 @@
<div> <div>
<nav aria-label="Progress"> <nav aria-label="Progress">
<ol role="list" class="flex mb-10"> <ol role="list" class="flex mb-10">
<li class="w-1/4"> <li class="w-1/3">
<span class="pr-6 flex flex-col"> <span class="pr-6 flex flex-col">
<span <span
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]" :class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
@ -15,7 +15,7 @@
</span> </span>
</li> </li>
<li class="w-1/4"> <li class="w-1/3">
<span class="px-3 flex flex-col"> <span class="px-3 flex flex-col">
<span <span
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]" :class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
@ -28,7 +28,7 @@
</span> </span>
</li> </li>
<li class="w-1/4"> <li class="w-1/3">
<span class="pl-6 flex flex-col"> <span class="pl-6 flex flex-col">
<span <span
:class="[{'bg-purple': active_state == 3}]" :class="[{'bg-purple': active_state == 3}]"

View File

@ -308,6 +308,16 @@
padding-right: 8px !important; padding-right: 8px !important;
} }
.el-select-dropdown__item .new-badge {
width: 45px !important;
margin-left: 8px;
z-index: 99;
}
.el-select-dropdown__item .new-badge:hover {
background-color: #6ea152;
}
.el-select-dropdown__item .material-icons { .el-select-dropdown__item .material-icons {
padding-right: 0 !important; padding-right: 0 !important;
padding-left: 0 !important; padding-left: 0 !important;
@ -595,6 +605,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
.full-width-mobile { .full-width-mobile {
width: 100% !important; width: 100% !important;
} }
.full-height-mobile {
height: 100% !important;
}
} }
/* full-width for mobile. Some component use inline styling for width */ /* full-width for mobile. Some component use inline styling for width */

View File

@ -4,7 +4,7 @@
</x-slot> </x-slot>
<x-slot name="info"> <x-slot name="info">
<div class="mt-3"> <div class="mt-4">
@if (! $account->enabled) @if (! $account->enabled)
<x-index.disable text="{{ trans_choice('general.accounts', 1) }}" /> <x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />
@endif @endif

View File

@ -1,7 +1,7 @@
<akaunting-recurring <akaunting-recurring
start-text="{!! trans('recurring.limit_date', ['type' => Str::replace('-recurring', '', $type)]) !!}" start-text="{!! trans('recurring.limit_date', ['type' => Str::replace('-recurring', '', $type)]) !!}"
:date-range-text="{{ json_encode(trans('general.date_range')) }}" :date-range-text="{{ json_encode(trans('general.date_range')) }}"
middleText="{!! trans('recurring.limit_middle') !!}" middle-text="{!! trans('recurring.limit_middle') !!}"
end-text="{{ Str::plural(Str::replace('-recurring', '', $type)) }}" end-text="{{ Str::plural(Str::replace('-recurring', '', $type)) }}"
:frequencies="{{ json_encode($frequencies) }}" :frequencies="{{ json_encode($frequencies) }}"
@ -64,4 +64,4 @@
{{ $attributes }} {{ $attributes }}
> >
</akaunting-recurring> </akaunting-recurring>

View File

@ -13,7 +13,7 @@
</h1> </h1>
@if (! empty($status)) @if (! empty($status))
<div class="ltr:ml-4 rtl:mr-4"> <div class="ltr:ml-4 rtl:mr-4 mt-2">
{!! $status !!} {!! $status !!}
</div> </div>
@endif @endif

View File

@ -1,7 +1,7 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6 -mt-2"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page"> <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
<div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@ -13,7 +13,7 @@
</h1> </h1>
@if (! empty($status)) @if (! empty($status))
<div class="ltr:ml-4 rtl:mr-4"> <div class="ltr:ml-4 rtl:mr-4 mt-2">
{!! $status !!} {!! $status !!}
</div> </div>
@endif @endif

View File

@ -1,7 +1,7 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6 -mt-2"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page"> <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
<div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@ -13,7 +13,7 @@
</h1> </h1>
@if (! empty($status)) @if (! empty($status))
<div class="ltr:ml-4 rtl:mr-4"> <div class="ltr:ml-4 rtl:mr-4 mt-2">
{!! $status !!} {!! $status !!}
</div> </div>
@endif @endif

View File

@ -1,7 +1,7 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6 -mt-2"> <div id="header" class="xl:pt-6 -mt-2">
<div lass="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page"> <div lass="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
<div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
@ -13,7 +13,7 @@
</h1> </h1>
@if (! empty($status)) @if (! empty($status))
<div class="ltr:ml-4 rtl:mr-4"> <div class="ltr:ml-4 rtl:mr-4 mt-2">
{!! $status !!} {!! $status !!}
</div> </div>
@endif @endif

View File

@ -23,72 +23,69 @@
<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="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"> <div class="w-full lg:w-5/12">
@if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled'])) @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
<x-tabs active="{{ reset($payment_methods) }}"> <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
<div role="tablist" class="flex flex-wrap"> <div role="tablist" class="flex flex-wrap">
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
<div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}"> <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
<div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_tab_start')
@stack('invoice_{{ $key }}_tab_start') <div
<div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"> x-on:click="active = '{{ $name }}'"
<x-tabs.nav @click="onChangePaymentMethodSigned('{{ $key }}')"
id="{{ $name }}" id="tabs-payment-method-{{ $key }}-tab"
@click="onChangePaymentMethodSigned('{{ $key }}')" 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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
<div> >
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> @stack('invoice_{{ $key }}_tab_end')
</div>
@stack('invoice_{{ $key }}_tab_end')
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div>
@if (count($payment_methods) > 3)
<div class="swiper-button-next bg-body text-white flex items-center justify-center right-0 top-3">
<span class="material-icons text-purple text-4xl">chevron_right</span>
</div> </div>
@if (count($payment_methods) > 3) <div class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
<div class="swiper-button-next top-3 right-0"> <span class="material-icons text-purple text-4xl">chevron_left</span>
<span class="material-icons">chevron_right</span> </div>
</div> @endif
</div>
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
@endif
</div>
</x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="content"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_content_start')
@stack('invoice_{{ $key }}_content_start') <div
<x-tabs.tab id="{{ $name }}"> x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
<div class="my-3"> class="my-3"
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component> id="tabs-payment-method-{{ $key }}"
</div> >
</x-tabs.tab> <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
@stack('invoice_{{ $key }}_content_end') </div>
@stack('invoice_{{ $key }}_content_end')
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
<x-form id="portal"> <x-form id="portal">
<x-form.group.payment-method <x-form.group.payment-method
id="payment-method" id="payment-method"
:selected="array_key_first($payment_methods)" :selected="array_key_first($payment_methods)"
not-required not-required
form-group-class="invisible" form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}" placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')" change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
/> />
<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" /> <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form> </x-form>
</x-slot> </div>
</x-tabs>
@endif @endif
@if ($invoice->transactions->count()) @if ($invoice->transactions->count())

View File

@ -21,72 +21,69 @@
<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="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"> <div class="w-full lg:w-5/12">
@if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled'])) @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
<x-tabs active="{{ reset($payment_methods) }}"> <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
<div role="tablist" class="flex flex-wrap"> <div role="tablist" class="flex flex-wrap">
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
<div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}"> <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
<div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_tab_start')
@stack('invoice_{{ $key }}_tab_start') <div
<div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"> x-on:click="active = '{{ $name }}'"
<x-tabs.nav @click="onChangePaymentMethodSigned('{{ $key }}')"
id="{{ $name }}" id="tabs-payment-method-{{ $key }}-tab"
@click="onChangePaymentMethodSigned('{{ $key }}')" 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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
<div> >
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> @stack('invoice_{{ $key }}_tab_end')
</div>
@stack('invoice_{{ $key }}_tab_end')
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div>
@if (count($payment_methods) > 3)
<div class="swiper-button-next bg-body text-white flex items-center justify-center right-0 top-3">
<span class="material-icons text-purple text-4xl">chevron_right</span>
</div> </div>
@if (count($payment_methods) > 3) <div class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
<div class="swiper-button-next top-3 right-0"> <span class="material-icons text-purple text-4xl">chevron_left</span>
<span class="material-icons">chevron_right</span> </div>
</div> @endif
</div>
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
@endif
</div>
</x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="content"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_content_start')
@stack('invoice_{{ $key }}_content_start') <div
<x-tabs.tab id="{{ $name }}"> x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
<div class="my-3"> class="my-3"
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component> id="tabs-payment-method-{{ $key }}"
</div> >
</x-tabs.tab> <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
@stack('invoice_{{ $key }}_content_end') </div>
@stack('invoice_{{ $key }}_content_end')
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
<x-form id="portal"> <x-form id="portal">
<x-form.group.payment-method <x-form.group.payment-method
id="payment-method" id="payment-method"
:selected="array_key_first($payment_methods)" :selected="array_key_first($payment_methods)"
not-required not-required
form-group-class="invisible" form-group-class="invisible"
placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}" placeholder="{{ trans('general.form.select.field', ['field' => trans_choice('general.payment_methods', 1)]) }}"
change="onChangePaymentMethod('{{ array_key_first($payment_methods) }}')" change="onChangePaymentMethodSigned('{{ array_key_first($payment_methods) }}')"
/> />
<x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" /> <x-form.input.hidden name="document_id" :value="$invoice->id" v-model="form.document_id" />
</x-form> </x-form>
</x-slot> </div>
</x-tabs>
@endif @endif
@if ($invoice->transactions->count()) @if ($invoice->transactions->count())

View File

@ -30,72 +30,69 @@
<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="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"> <div class="w-full lg:w-5/12">
@if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled'])) @if (! empty($payment_methods) && ! in_array($invoice->status, ['paid', 'cancelled']))
<x-tabs active="{{ reset($payment_methods) }}"> <div class="tabs w-full" x-data="{ active: '{{ reset($payment_methods) }}' }">
<div role="tablist" class="flex flex-wrap"> <div role="tablist" class="flex flex-wrap">
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <div class="{{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}">
<div class="w-full flex {{ count($payment_methods) > 3 ? 'swiper swiper-links': 'w-full flex' }}"> <div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'inline-flex' }}">
<div class="{{ count($payment_methods) > 3 ? 'swiper-wrapper' : 'w-full flex' }}"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_tab_start')
@stack('invoice_{{ $key }}_tab_start') <div
<div class="{{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"> x-on:click="active = '{{ $name }}'"
<x-tabs.nav @click="onChangePaymentMethodSigned('{{ $key }}')"
id="{{ $name }}" id="tabs-payment-method-{{ $key }}-tab"
@click="onChangePaymentMethodSigned('{{ $key }}')" 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 px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link {{ count($payment_methods) > 3 ? 'swiper-slide': '' }}"
<div> >
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> @stack('invoice_{{ $key }}_tab_end')
</div>
@stack('invoice_{{ $key }}_tab_end')
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div>
@if (count($payment_methods) > 3)
<div class="swiper-button-next bg-body text-white flex items-center justify-center right-0 top-3">
<span class="material-icons text-purple text-4xl">chevron_right</span>
</div> </div>
@if (count($payment_methods) > 3) <div class="swiper-button-prev bg-body text-white flex items-center justify-center left-0 top-3">
<div class="swiper-button-next top-3 right-0"> <span class="material-icons text-purple text-4xl">chevron_left</span>
<span class="material-icons">chevron_right</span> </div>
</div> @endif
</div>
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
@endif
</div>
</x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="content"> @foreach ($payment_methods as $key => $name)
@foreach ($payment_methods as $key => $name) @stack('invoice_{{ $key }}_content_start')
@stack('invoice_{{ $key }}_content_start') <div
<x-tabs.tab id="{{ $name }}"> x-bind:class="active != '{{ $name }}' ? 'hidden': 'block'"
<div class="my-3"> class="my-3"
<component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component> id="tabs-payment-method-{{ $key }}"
</div> >
</x-tabs.tab> <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
@stack('invoice_{{ $key }}_content_end') </div>
@stack('invoice_{{ $key }}_content_end')
@php $is_active = false; @endphp
@endforeach
<x-form id="portal"> @php $is_active = false; @endphp
<x-form.group.payment-method @endforeach
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 id="portal">
</x-form> <x-form.group.payment-method
</x-slot> id="payment-method"
</x-tabs> :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>
</div>
@endif @endif
@if ($invoice->transactions->count()) @if ($invoice->transactions->count())

View File

@ -18,6 +18,16 @@ sm:min-h-500
sm:max-w-4xl sm:max-w-4xl
sm:space-x-4 sm:space-x-4
sm:text-purple sm:text-purple
sm:text-xs
sm:text-base
sm:text-lg
sm:text-xl
sm:text-2xl
sm:p-10
sm:py-10
sm:ltr:pl-10
sm:rtl:pr-10
sm:mt-6
md:grid-cols-2 md:grid-cols-2
lg:mt-2 lg:mt-2
lg:mt-4 lg:mt-4