feat: add SWIFT code field to bank accounts and update card UI for improved copy functionality and layout responsiveness.
This commit is contained in:
Ümit Tunç
@@ -47,8 +47,14 @@ class BankAccountsSection
|
||||
'GBP' => 'Sterlin (£)',
|
||||
])
|
||||
->default('TRY')
|
||||
->live()
|
||||
->required(),
|
||||
|
||||
TextInput::make('swift_code')
|
||||
->label('SWIFT / BIC')
|
||||
->placeholder('Örn: TRHBTR2A')
|
||||
->required(fn (Get $get): bool => $get('currency') !== 'TRY'),
|
||||
|
||||
FileUpload::make('logo')
|
||||
->label('Banka Logosu')
|
||||
->image()
|
||||
|
||||
@@ -35,7 +35,6 @@
|
||||
.bank-account-card__header {
|
||||
position: relative;
|
||||
padding: 2rem 1.5rem 1.75rem;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
text-align: center;
|
||||
min-height: 180px;
|
||||
@@ -46,21 +45,19 @@
|
||||
}
|
||||
.bank-account-card__logo-wrap {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
height: 88px;
|
||||
max-width: 240px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #ffffff;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bank-account-card__logo-wrap img {
|
||||
max-width: 100%;
|
||||
max-height: 72px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
@@ -135,8 +132,7 @@
|
||||
border-top: 1px dashed #e2e8f0;
|
||||
}
|
||||
.bank-account-card__iban {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.8375rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-primary);
|
||||
letter-spacing: 0.02em;
|
||||
@@ -148,7 +144,34 @@
|
||||
border: 1px solid #e2e8f0;
|
||||
user-select: all;
|
||||
}
|
||||
.bank-account-card__copy-btn {
|
||||
.bank-account-card__copy-btn-icon {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
margin: auto 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: var(--bs-primary);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, transform 0.1s;
|
||||
z-index: 2;
|
||||
}
|
||||
.bank-account-card__copy-btn-icon:hover {
|
||||
color: #0f172a;
|
||||
}
|
||||
.bank-account-card__copy-btn-icon:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.bank-account-card__copy-btn-icon.is-copied {
|
||||
color: #16a34a;
|
||||
}
|
||||
.bank-account-card__swift-copy-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
@@ -162,11 +185,11 @@
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.bank-account-card__copy-btn:hover {
|
||||
.bank-account-card__swift-copy-btn:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.bank-account-card__copy-btn.is-copied {
|
||||
.bank-account-card__swift-copy-btn.is-copied {
|
||||
color: #16a34a;
|
||||
}
|
||||
.bank-account-card__footer-bar {
|
||||
@@ -212,6 +235,123 @@
|
||||
color: var(--bs-primary);
|
||||
border-bottom-color: var(--bs-primary);
|
||||
}
|
||||
.bank-accounts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bank-accounts-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.bank-accounts-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.legal-info-box {
|
||||
background: #ffffff;
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
||||
padding: 2.5rem;
|
||||
margin-top: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
||||
}
|
||||
.legal-info-box:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 20px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
.legal-info-box__title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.legal-info-box__title i {
|
||||
color: var(--bs-primary);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.legal-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.legal-info-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.legal-info-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.legal-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.legal-info-item__label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.legal-info-item__value {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.legal-info-box__decor {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: -20px;
|
||||
font-size: 8rem;
|
||||
color: #f1f5f9;
|
||||
line-height: 1;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.legal-info-box__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-copy-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.2s, background-color 0.2s, transform 0.1s;
|
||||
}
|
||||
.btn-copy-inline:hover {
|
||||
color: var(--bs-primary);
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
.btn-copy-inline:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.btn-copy-inline.is-copied {
|
||||
color: #16a34a;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="wrapper bank-accounts-section">
|
||||
@@ -233,13 +373,13 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="row gy-6 justify-content-center">
|
||||
<div class="bank-accounts-grid">
|
||||
@forelse($accounts as $index => $account)
|
||||
@php
|
||||
$currency = $account['currency'] ?? 'TRY';
|
||||
$currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
|
||||
@endphp
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div>
|
||||
<article class="bank-account-card">
|
||||
<div class="bank-account-card__header">
|
||||
<span class="bank-account-card__currency">{{ $currencyLabel }}</span>
|
||||
@@ -272,19 +412,43 @@
|
||||
|
||||
<div class="bank-account-card__iban-box">
|
||||
<span class="bank-account-card__label">IBAN</span>
|
||||
<div class="bank-account-card__iban" id="iban-{{ $index }}">{{ $account['iban'] }}</div>
|
||||
<button
|
||||
type="button"
|
||||
class="bank-account-card__copy-btn"
|
||||
data-iban="{{ $account['iban'] }}"
|
||||
data-copy-label="{!! t('Kopyala') !!}"
|
||||
data-copied-label="{!! t('Kopyalandı') !!}"
|
||||
aria-label="{!! t('IBAN kopyala') !!}"
|
||||
>
|
||||
<i class="uil uil-copy"></i>
|
||||
<span>{!! t('Kopyala') !!}</span>
|
||||
</button>
|
||||
<div style="position: relative;">
|
||||
<div class="bank-account-card__iban" id="iban-{{ $index }}" style="padding-right: 3rem;">{{ $account['iban'] }}</div>
|
||||
<button
|
||||
type="button"
|
||||
class="bank-account-card__copy-btn-icon"
|
||||
data-iban="{{ $account['iban'] }}"
|
||||
data-copy-label="{!! t('Kopyala') !!}"
|
||||
data-copied-label="{!! t('Kopyalandı') !!}"
|
||||
aria-label="{!! t('IBAN kopyala') !!}"
|
||||
>
|
||||
<i class="uil uil-copy" style="font-size: 1.15rem;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$swiftCode = !empty($account['swift_code']) ? $account['swift_code'] : 'TRHBTR2A';
|
||||
@endphp
|
||||
@if($currency !== 'TRY' || !empty($account['swift_code']))
|
||||
<div class="bank-account-card__swift-box mt-3">
|
||||
<span class="bank-account-card__label">SWIFT / BIC</span>
|
||||
<div style="position: relative;">
|
||||
<div class="bank-account-card__iban" id="swift-{{ $index }}" style="padding-right: 3rem;">{{ $swiftCode }}</div>
|
||||
<button
|
||||
type="button"
|
||||
class="bank-account-card__copy-btn-icon"
|
||||
data-iban="{{ $swiftCode }}"
|
||||
data-copy-label="{!! t('Kopyala') !!}"
|
||||
data-copied-label="{!! t('Kopyalandı') !!}"
|
||||
aria-label="{!! t('SWIFT kopyala') !!}"
|
||||
>
|
||||
<i class="uil uil-copy" style="font-size: 1.15rem;"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bank-account-card__footer-bar" aria-hidden="true"></div>
|
||||
@@ -301,6 +465,93 @@
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<!-- Legal Info Box -->
|
||||
<div class="legal-info-box">
|
||||
<div class="legal-info-box__decor" aria-hidden="true">
|
||||
<i class="uil uil-shield-check"></i>
|
||||
</div>
|
||||
<div class="legal-info-box__content">
|
||||
<h3 class="legal-info-box__title">
|
||||
<i class="uil uil-info-circle"></i>
|
||||
<span>{!! t('Yasal & Fatura Bilgileri') !!}</span>
|
||||
</h3>
|
||||
<div class="legal-info-grid">
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('Firma Ünvanı') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('Vergi Dairesi') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>Şahinbey V.D.</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="Şahinbey V.D." aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('Vergi Numarası') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>8591492435</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="8591492435" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('MERSİS No') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>0859149243500001</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="0859149243500001" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('D-U-N-S No') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>595948152</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="595948152" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('SGK Sicil No') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>2-6210-0101-1219355-027-08-80-000</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="2-6210-0101-1219355-027-08-80-000" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('E-Posta') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<a href="mailto:info@truncgil.com.tr" class="text-reset" style="text-decoration: none;">info@truncgil.com.tr</a>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="info@truncgil.com.tr" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal-info-item">
|
||||
<span class="legal-info-item__label">{!! t('Adres') !!}</span>
|
||||
<div class="legal-info-item__value d-flex align-items-center justify-content-between gap-2">
|
||||
<span>Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep</span>
|
||||
<button type="button" class="btn-copy-inline" data-copy-target="Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep" aria-label="{!! t('Kopyala') !!}">
|
||||
<i class="uil uil-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($page->content)
|
||||
<div class="row mt-14">
|
||||
<div class="col-lg-10 mx-auto">
|
||||
@@ -316,9 +567,35 @@
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.querySelectorAll('.bank-account-card__copy-btn').forEach(function (btn) {
|
||||
document.querySelectorAll('.bank-account-card__copy-btn-icon').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var iban = this.getAttribute('data-iban');
|
||||
var text = this.getAttribute('data-iban');
|
||||
var icon = this.querySelector('i');
|
||||
|
||||
function showCopied() {
|
||||
btn.classList.add('is-copied');
|
||||
if (icon) icon.className = 'uil uil-check';
|
||||
setTimeout(function () {
|
||||
btn.classList.remove('is-copied');
|
||||
if (icon) icon.className = 'uil uil-copy';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(showCopied).catch(function () {
|
||||
fallbackCopy(text);
|
||||
showCopied();
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
showCopied();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.bank-account-card__swift-copy-btn').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var swift = this.getAttribute('data-swift');
|
||||
var copyLabel = this.getAttribute('data-copy-label');
|
||||
var copiedLabel = this.getAttribute('data-copied-label');
|
||||
var span = this.querySelector('span');
|
||||
@@ -336,12 +613,12 @@ document.querySelectorAll('.bank-account-card__copy-btn').forEach(function (btn)
|
||||
}
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(iban).then(showCopied).catch(function () {
|
||||
fallbackCopy(iban);
|
||||
navigator.clipboard.writeText(swift).then(showCopied).catch(function () {
|
||||
fallbackCopy(swift);
|
||||
showCopied();
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(iban);
|
||||
fallbackCopy(swift);
|
||||
showCopied();
|
||||
}
|
||||
});
|
||||
@@ -358,6 +635,32 @@ function fallbackCopy(text) {
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var text = this.getAttribute('data-copy-target');
|
||||
var icon = this.querySelector('i');
|
||||
|
||||
function showCopied() {
|
||||
btn.classList.add('is-copied');
|
||||
if (icon) icon.className = 'uil uil-check text-success';
|
||||
setTimeout(function () {
|
||||
btn.classList.remove('is-copied');
|
||||
if (icon) icon.className = 'uil uil-copy';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(showCopied).catch(function () {
|
||||
fallbackCopy(text);
|
||||
showCopied();
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
showCopied();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
Reference in New Issue
Block a user