generated from boboko/starter
terms acceptance during login, checkout connection to user account and login process
This commit is contained in:
elvira
+12
-32
@@ -504,35 +504,12 @@ .bbk-checkout-note {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Contact tabs */
|
||||
/* Contact: "logged in as" line, or the guest login prompt */
|
||||
|
||||
.bbk-checkout-tabs { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.bbk-checkout-logged-in,
|
||||
.bbk-checkout-login-prompt { margin: 0; }
|
||||
|
||||
.bbk-checkout-tab {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--bbk-color-border);
|
||||
border-radius: var(--bbk-radius-sm);
|
||||
background: var(--bbk-color-bg);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--bbk-color-muted);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.bbk-checkout-tab[aria-selected="true"] {
|
||||
background: var(--bbk-color-text);
|
||||
border-color: var(--bbk-color-text);
|
||||
color: var(--bbk-color-bg);
|
||||
}
|
||||
|
||||
.bbk-checkout-tab:focus-visible {
|
||||
outline: 2px solid var(--bbk-color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.bbk-checkout-login-prompt a { color: inherit; font-weight: 600; }
|
||||
|
||||
/* Fields */
|
||||
|
||||
@@ -602,6 +579,12 @@ .bbk-checkbox {
|
||||
}
|
||||
|
||||
/* For a full-sentence label that can wrap — align the box to the first line. */
|
||||
/* "I want an invoice": company/ΑΦΜ only while ticked */
|
||||
|
||||
.bbk-invoice { display: flex; flex-direction: column; gap: 1rem; }
|
||||
|
||||
.bbk-invoice:not(:has(input[name="wants_invoice"]:checked)) .bbk-invoice-fields { display: none; }
|
||||
|
||||
.bbk-checkbox--stacked {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -686,6 +669,8 @@ .bbk-checkout-continue {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
@@ -869,8 +854,3 @@ .bbk-address-lines {
|
||||
font-size: 0.875rem;
|
||||
color: var(--bbk-color-muted);
|
||||
}
|
||||
|
||||
.bbk-confirmation-continue {
|
||||
max-width: 280px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@ import { csrfToken } from './csrf'
|
||||
// already uses). Shipping-method radios post to selectShippingUrl the same way.
|
||||
export default class extends Controller {
|
||||
static targets = [
|
||||
'guestTab', 'loginTab', 'guestPanel', 'loginPanel',
|
||||
'sameAsBilling', 'shippingFields',
|
||||
'form', 'shippingOptions', 'status',
|
||||
]
|
||||
@@ -41,22 +40,6 @@ export default class extends Controller {
|
||||
this.saveController?.abort()
|
||||
}
|
||||
|
||||
// ── Contact tabs ────────────────────────────────────────────────────
|
||||
|
||||
showGuest() {
|
||||
this.guestPanelTarget.hidden = false
|
||||
this.loginPanelTarget.hidden = true
|
||||
this.guestTabTarget.setAttribute('aria-selected', 'true')
|
||||
this.loginTabTarget.setAttribute('aria-selected', 'false')
|
||||
}
|
||||
|
||||
showLogin() {
|
||||
this.guestPanelTarget.hidden = true
|
||||
this.loginPanelTarget.hidden = false
|
||||
this.guestTabTarget.setAttribute('aria-selected', 'false')
|
||||
this.loginTabTarget.setAttribute('aria-selected', 'true')
|
||||
}
|
||||
|
||||
// ── Same as billing ────────────────────────────────────────────────
|
||||
|
||||
toggleSameAsBilling() {
|
||||
@@ -93,7 +76,6 @@ export default class extends Controller {
|
||||
// react to fields that actually belong to the address form.
|
||||
const el = event.target
|
||||
const belongsToForm = el.form?.id === 'bbk-address-form'
|
||||
|| el.closest('[data-bbk-checkout-form-target="guestPanel"]')
|
||||
if (!belongsToForm) return
|
||||
|
||||
// No status during the wait — it only shows once the request is in flight,
|
||||
|
||||
@@ -133,6 +133,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Standing opt-in for abandoned-cart reminders (explicit, off by
|
||||
default); checkout starts from it and can change it again. --}}
|
||||
<section class="flex flex-col gap-8" aria-labelledby="account-emails-heading">
|
||||
<h2 id="account-emails-heading" class="font-display text-h4 font-extrabold">{{ __('storefront.account.emails_heading') }}</h2>
|
||||
|
||||
<div>
|
||||
<input type="hidden" name="recovery_consent" value="0">
|
||||
<x-ui.checkbox
|
||||
id="account-recovery-consent"
|
||||
name="recovery_consent"
|
||||
:checked="(bool) old('recovery_consent', data_get($customer, 'meta.recovery_consent'))"
|
||||
:label="__('storefront.account.recovery_consent')"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<x-ui.button type="submit">{{ __('storefront.account.save') }}</x-ui.button>
|
||||
</div>
|
||||
|
||||
@@ -42,6 +42,16 @@
|
||||
/>
|
||||
</x-ui.field>
|
||||
|
||||
{{-- Shown to everyone; for a new account, LoginController::send()
|
||||
records the time and the terms/privacy versions. Unescaped: the
|
||||
label holds the two links (Language Lines, staff only). --}}
|
||||
<p class="text-sm text-neutral-500 [&_a]:underline [&_a:hover]:no-underline">
|
||||
{!! __('storefront.auth.terms_notice', [
|
||||
'terms' => route('legal.terms'),
|
||||
'privacy' => route('legal.privacy'),
|
||||
]) !!}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<x-ui.button type="submit">{{ __('storefront.auth.send_code') }}</x-ui.button>
|
||||
</div>
|
||||
|
||||
@@ -41,6 +41,17 @@
|
||||
|
||||
<p class="bbk-checkout-note">{{ __('checkout.page.confirmation_email_note') }}</p>
|
||||
|
||||
{{-- Guests: logging in with the order's email attaches it to an account
|
||||
(App\Listeners\ClaimGuestOrdersOnLogin), so it shows in their history. --}}
|
||||
@guest
|
||||
@if ($loginRoute = config('checkout.login_route'))
|
||||
<p class="bbk-checkout-note">
|
||||
{{ __('checkout.page.confirmation_login_hint') }}
|
||||
<a href="{{ route($loginRoute) }}">{{ __('checkout.page.login_link') }}</a>
|
||||
</p>
|
||||
@endif
|
||||
@endguest
|
||||
|
||||
<div class="bbk-confirmation-body">
|
||||
<div class="bbk-confirmation-lines">
|
||||
@foreach ($order->lines->where('type', '!=', 'shipping') as $line)
|
||||
@@ -116,9 +127,5 @@
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="bbk-checkout-continue bbk-confirmation-continue" href="{{ route('products', app()->getLocale()) }}">
|
||||
{{ __('checkout.page.confirmation_continue') }}
|
||||
</a>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -38,73 +38,51 @@ class="bbk-checkout-main"
|
||||
data-bbk-payment-processing-slow-value="{{ __('checkout.page.payment_processing_slow') }}"
|
||||
>
|
||||
|
||||
{{-- Contact --}}
|
||||
{{-- Contact. Logged in: the order email is the account's (forced
|
||||
server-side in saveAddress()), so there's no field. Guests type
|
||||
their email, plus a login link when config('checkout.login_route')
|
||||
is set; the storefront's login page sends them back here and Lunar
|
||||
merges the guest cart into the account. --}}
|
||||
@php($loginRoute = config('checkout.login_route'))
|
||||
<section class="bbk-checkout-section">
|
||||
<div
|
||||
class="bbk-checkout-tabs"
|
||||
role="tablist"
|
||||
aria-label="{{ __('checkout.page.contact_heading') }}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="bbk-checkout-tab"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
data-bbk-checkout-form-target="guestTab"
|
||||
data-action="bbk-checkout-form#showGuest"
|
||||
>{{ __('checkout.page.guest_tab') }}</button>
|
||||
@auth
|
||||
<p class="bbk-checkout-logged-in">
|
||||
{{ __('checkout.page.logged_in_as') }} <strong>{{ auth()->user()->email }}</strong>
|
||||
</p>
|
||||
@else
|
||||
@if ($loginRoute)
|
||||
<p class="bbk-checkout-login-prompt">
|
||||
{{ __('checkout.page.login_prompt') }}
|
||||
<a href="{{ route($loginRoute, ['redirect' => route('checkout.show', app()->getLocale(), false)]) }}">{{ __('checkout.page.login_link') }}</a>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="bbk-checkout-tab"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
data-bbk-checkout-form-target="loginTab"
|
||||
data-action="bbk-checkout-form#showLogin"
|
||||
>{{ __('checkout.page.login_tab') }}</button>
|
||||
<x-checkout::field
|
||||
name="contact_email"
|
||||
label="{{ __('checkout.page.email_label') }}"
|
||||
type="email"
|
||||
:value="$shippingAddress?->contact_email ?? $billingAddress?->contact_email"
|
||||
required
|
||||
form="bbk-address-form"
|
||||
/>
|
||||
@endauth
|
||||
|
||||
<div class="bbk-checkout-tab-panel" role="tabpanel" data-bbk-checkout-form-target="guestPanel">
|
||||
<x-checkout::field
|
||||
name="contact_email"
|
||||
label="{{ __('checkout.page.email_label') }}"
|
||||
type="email"
|
||||
:value="$shippingAddress?->contact_email ?? $billingAddress?->contact_email"
|
||||
required
|
||||
form="bbk-address-form"
|
||||
/>
|
||||
|
||||
{{-- Abandoned-cart-recovery opt-in. Optional, unticked, never
|
||||
required — direct marketing under ePrivacy (GR L. 3471/2006
|
||||
art. 11), so it needs an explicit opt-in and checkout can't be
|
||||
gated on it. Narrow scope by design (boboko-core's
|
||||
setRecoveryConsent) — a general newsletter opt-in, if wanted,
|
||||
is a separate checkbox. --}}
|
||||
<label class="bbk-checkbox bbk-checkbox--stacked">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="recovery_consent"
|
||||
value="1"
|
||||
form="bbk-address-form"
|
||||
{{ old('recovery_consent', data_get($cart, 'meta.recovery_consent')) ? 'checked' : '' }}
|
||||
>
|
||||
{{ __('checkout.page.recovery_consent') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{-- Not wired yet — Modules\Core\Auth\Services\UserOtpService exists
|
||||
(email + one-time code, passwordless) but nothing in the storefront
|
||||
calls it yet. UI placeholder only; see project notes. --}}
|
||||
<div class="bbk-checkout-tab-panel" role="tabpanel" hidden data-bbk-checkout-form-target="loginPanel">
|
||||
<div class="bbk-field">
|
||||
<label class="bbk-field-label" for="bbk-login-email">{{ __('checkout.page.login_email_label') }}</label>
|
||||
<input type="email" id="bbk-login-email" class="bbk-field-input" disabled>
|
||||
</div>
|
||||
<button type="button" class="bbk-checkout-continue" disabled>
|
||||
{{ __('checkout.page.send_code') }}
|
||||
</button>
|
||||
<p class="bbk-checkout-note">{{ __('checkout.page.login_coming_soon') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Abandoned-cart-recovery opt-in. Optional, unticked, never
|
||||
required — direct marketing under ePrivacy (GR L. 3471/2006
|
||||
art. 11), so it needs an explicit opt-in and checkout can't be
|
||||
gated on it. Narrow scope by design (boboko-core's
|
||||
setRecoveryConsent) — a general newsletter opt-in, if wanted,
|
||||
is a separate checkbox. --}}
|
||||
<label class="bbk-checkbox bbk-checkbox--stacked">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="recovery_consent"
|
||||
value="1"
|
||||
form="bbk-address-form"
|
||||
{{ old('recovery_consent', data_get($cart, 'meta.recovery_consent')) ? 'checked' : '' }}
|
||||
>
|
||||
{{ __('checkout.page.recovery_consent') }}
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{{-- Autosaves — no submit button. Any `change` inside .bbk-checkout-main
|
||||
@@ -128,9 +106,25 @@ class="bbk-checkout-tab"
|
||||
<x-checkout::field name="billing_last_name" label="{{ __('checkout.page.last_name') }}" :value="$billingAddress?->last_name" required />
|
||||
</div>
|
||||
|
||||
<div class="bbk-field-row">
|
||||
<x-checkout::field name="billing_company_name" label="{{ __('checkout.page.company_name') }}" :value="$billingAddress?->company_name" />
|
||||
<x-checkout::field name="billing_tax_identifier" label="{{ __('checkout.page.tax_identifier') }}" :value="$billingAddress?->tax_identifier" />
|
||||
{{-- Company/ΑΦΜ only when an invoice is wanted. Revealed by CSS
|
||||
(:has on the checkbox), saved/cleared by saveAddress(), and
|
||||
required at place-order. --}}
|
||||
<div class="bbk-invoice">
|
||||
<label class="bbk-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="wants_invoice"
|
||||
value="1"
|
||||
aria-controls="bbk-invoice-fields"
|
||||
@checked($wantsInvoice)
|
||||
>
|
||||
{{ __('checkout.page.wants_invoice') }}
|
||||
</label>
|
||||
|
||||
<div class="bbk-field-row bbk-invoice-fields" id="bbk-invoice-fields">
|
||||
<x-checkout::field name="billing_company_name" label="{{ __('checkout.page.company_name') }}" :value="$billingAddress?->company_name" />
|
||||
<x-checkout::field name="billing_tax_identifier" label="{{ __('checkout.page.tax_identifier') }}" :value="$billingAddress?->tax_identifier" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-checkout::field name="billing_line_one" label="{{ __('checkout.page.address_line_one') }}" :value="$billingAddress?->line_one" required />
|
||||
@@ -173,8 +167,6 @@ class="bbk-checkout-tab"
|
||||
<x-checkout::field name="shipping_last_name" label="{{ __('checkout.page.last_name') }}" :value="$shippingAddress?->last_name" required />
|
||||
</div>
|
||||
|
||||
<x-checkout::field name="shipping_company_name" label="{{ __('checkout.page.company_name') }}" :value="$shippingAddress?->company_name" />
|
||||
|
||||
<x-checkout::field name="shipping_line_one" label="{{ __('checkout.page.address_line_one') }}" :value="$shippingAddress?->line_one" required />
|
||||
|
||||
<div class="bbk-field-row">
|
||||
|
||||
Reference in New Issue
Block a user