This commit is contained in:
2026-03-25 17:45:13 +01:00
parent 2af73782f2
commit df13b3613c
11 changed files with 2341 additions and 524 deletions

View File

@@ -54,7 +54,7 @@
Modal Overlay & Container
═══════════════════════════════════════════ */
.carei-modal-overlay {
display: none;
display: flex;
position: fixed;
inset: 0;
z-index: 100000;
@@ -62,9 +62,13 @@
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.carei-modal-overlay.is-open {
display: flex;
opacity: 1;
visibility: visible;
}
.carei-modal {
background: var(--carei-bg);
@@ -76,6 +80,11 @@
padding: 40px 48px;
position: relative;
font-family: var(--carei-font);
transform: scale(0.95) translateY(10px);
transition: transform 0.3s ease;
}
.carei-modal-overlay.is-open .carei-modal {
transform: scale(1) translateY(0);
}
.carei-modal-close {
position: absolute;
@@ -134,8 +143,21 @@
grid-template-columns: 1fr 1fr;
gap: var(--carei-gap-inner);
}
.carei-form__row--dates {
grid-template-columns: 1fr 1fr;
.carei-form__row--top {
grid-template-columns: 1fr 1fr 1fr;
}
.carei-form__row--pickup {
display: flex;
align-items: center;
gap: var(--carei-gap-inner);
}
.carei-form__row--pickup > .carei-form__field {
flex: 1;
min-width: 0;
}
.carei-form__checkbox-label--inline {
white-space: nowrap;
flex-shrink: 0;
}
.carei-form__field {
display: flex;
@@ -483,6 +505,20 @@
pointer-events: none;
}
/* Disabled select */
.carei-form__select-wrap select:disabled {
color: var(--carei-placeholder);
cursor: not-allowed;
opacity: 0.6;
}
/* Extras wrapper — hidden until segment + pickup selected */
.carei-form__extras-wrapper {
display: flex;
flex-direction: column;
gap: var(--carei-gap-section);
}
/* Return branch slide */
.carei-form__return-wrap {
overflow: hidden;
@@ -496,6 +532,37 @@
display: block !important;
}
/* ═══════════════════════════════════════════
Step Transitions (form ↔ summary ↔ success)
═══════════════════════════════════════════ */
.carei-step {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.carei-step--hidden {
display: none !important;
}
.carei-step--exiting {
opacity: 0;
transform: translateY(-8px);
}
.carei-step--entering {
opacity: 0;
transform: translateY(8px);
}
/* Screen reader only */
.carei-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════
Mobile Responsive (<768px)
═══════════════════════════════════════════ */
@@ -516,7 +583,7 @@
.carei-form__row {
grid-template-columns: 1fr;
}
.carei-form__row--dates {
.carei-form__row--top {
grid-template-columns: 1fr 1fr;
}
.carei-form__footer {
@@ -528,14 +595,246 @@
justify-content: center;
padding: 16px;
}
.carei-form__row--address {
grid-template-columns: 1fr;
}
.carei-summary__actions {
flex-direction: column;
}
.carei-summary__btn {
width: 100%;
justify-content: center;
}
}
/* Very small screens */
@media (max-width: 480px) {
.carei-form__row--dates {
.carei-form__row--top {
grid-template-columns: 1fr;
}
.carei-modal {
padding: 24px 16px;
}
}
/* ═══════════════════════════════════════════
Address Row
═══════════════════════════════════════════ */
.carei-form__row--address {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--carei-gap-inner);
}
.carei-form__field--zipcode {
width: 120px;
}
/* ═══════════════════════════════════════════
Summary Overlay
═══════════════════════════════════════════ */
.carei-summary {
display: flex;
flex-direction: column;
gap: var(--carei-gap-section);
}
.carei-summary__title {
font-family: var(--carei-font);
font-weight: 700;
font-size: 20px;
color: var(--carei-blue);
text-align: center;
margin: 0;
}
.carei-summary__title span {
color: var(--carei-red);
}
.carei-summary__details {
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
display: flex;
flex-direction: column;
gap: 6px;
background: var(--carei-white);
padding: 16px;
border-radius: var(--carei-radius);
}
.carei-summary__details strong {
color: var(--carei-blue);
}
.carei-summary__table table {
width: 100%;
border-collapse: collapse;
font-family: var(--carei-font);
font-size: 13px;
}
.carei-summary__table th {
text-align: left;
font-weight: 600;
color: var(--carei-blue);
padding: 8px 12px;
border-bottom: 2px solid var(--carei-border);
font-size: 12px;
text-transform: uppercase;
}
.carei-summary__table td {
padding: 8px 12px;
border-bottom: 1px solid var(--carei-border);
color: var(--carei-gray);
}
.carei-summary__table tr:nth-child(even) td {
background: rgba(237, 237, 243, 0.5);
}
.carei-summary__table .carei-summary__auto-item td {
font-style: italic;
color: var(--carei-placeholder);
}
.carei-summary__table td:last-child {
text-align: right;
font-weight: 600;
color: var(--carei-blue);
}
.carei-summary__total {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
padding: 0 12px;
}
.carei-summary__total-row {
display: flex;
gap: 16px;
}
.carei-summary__total-row--gross {
font-size: 18px;
font-weight: 700;
color: var(--carei-blue);
}
.carei-summary__total-label {
min-width: 120px;
text-align: right;
}
.carei-summary__total-value {
min-width: 100px;
text-align: right;
}
.carei-summary__actions {
display: flex;
justify-content: space-between;
gap: var(--carei-gap-inner);
padding-top: 8px;
}
.carei-summary__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-family: var(--carei-font);
font-weight: 600;
font-size: 14px;
border-radius: var(--carei-radius);
cursor: pointer;
transition: all 0.2s;
line-height: 1;
white-space: nowrap;
}
.carei-summary__btn svg {
width: 16px;
height: 16px;
}
.carei-summary__btn--back {
background: transparent;
border: 1px solid var(--carei-blue);
color: var(--carei-blue);
}
.carei-summary__btn--back:hover {
background: rgba(47, 36, 130, 0.05);
}
.carei-summary__btn--confirm {
background: var(--carei-red);
border: 1px solid var(--carei-red);
color: var(--carei-white);
}
.carei-summary__btn--confirm:hover {
background: var(--carei-red-hover);
border-color: var(--carei-red-hover);
}
.carei-summary__btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.carei-summary__error {
background: rgba(255, 0, 0, 0.05);
color: var(--carei-red);
padding: 12px 16px;
border-radius: var(--carei-radius);
font-family: var(--carei-font);
font-size: 13px;
text-align: center;
}
/* ═══════════════════════════════════════════
Success View
═══════════════════════════════════════════ */
.carei-success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 40px 0;
}
.carei-success__icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: #22c55e;
display: flex;
align-items: center;
justify-content: center;
}
.carei-success__title {
font-family: var(--carei-font);
font-weight: 700;
font-size: 22px;
color: var(--carei-blue);
margin: 0;
}
.carei-success__number {
font-family: var(--carei-font);
font-weight: 700;
font-size: 16px;
color: var(--carei-blue);
background: var(--carei-white);
padding: 12px 24px;
border-radius: var(--carei-radius);
margin: 0;
}
.carei-success__message {
font-family: var(--carei-font);
font-size: 14px;
color: var(--carei-gray);
margin: 0;
}
.carei-success__close {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: var(--carei-red);
color: var(--carei-white);
font-family: var(--carei-font);
font-weight: 600;
font-size: 14px;
border: none;
border-radius: var(--carei-radius);
cursor: pointer;
transition: background-color 0.2s;
margin-top: 8px;
}
.carei-success__close:hover {
background: var(--carei-red-hover);
}

View File

@@ -56,29 +56,28 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
<?php echo $button_text; ?>
</button>
<div class="carei-modal-overlay" data-carei-modal>
<div class="carei-modal-overlay" data-carei-modal role="dialog" aria-modal="true" aria-labelledby="carei-modal-title">
<div class="carei-modal">
<button type="button" class="carei-modal-close" data-carei-close-modal>
<button type="button" class="carei-modal-close" data-carei-close-modal aria-label="Zamknij formularz">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<h2 class="carei-modal-title">Wypełnij formularz rezerwacji<span>.</span></h2>
<h2 class="carei-modal-title" id="carei-modal-title">Wypełnij formularz rezerwacji<span>.</span></h2>
<form class="carei-form" id="carei-reservation-form" novalidate>
<!-- Dane wynajmu -->
<div class="carei-form__section">
<div class="carei-form__field carei-form__field--full">
<div class="carei-form__select-wrap">
<select id="carei-segment" name="segment" required>
<option value="" disabled selected>Wybierz segment pojazdu</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
<div class="carei-form__row carei-form__row--top">
<div class="carei-form__field">
<div class="carei-form__select-wrap">
<select id="carei-segment" name="segment" required>
<option value="" disabled selected>Wybierz segment pojazdu</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
</div>
<div class="carei-form__row carei-form__row--dates">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-date-from">Od kiedy?</label>
<input type="datetime-local" id="carei-date-from" name="dateFrom" class="carei-form__input" required>
@@ -94,24 +93,25 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
<div class="carei-form__days-count" id="carei-days-count">Wybrano: <strong>0 dni</strong></div>
<div class="carei-form__field carei-form__field--full">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
<select id="carei-pickup-branch" name="pickupBranch" required>
<option value="" disabled selected>Miejsce odbioru</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
<div class="carei-form__row carei-form__row--pickup">
<div class="carei-form__field">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
<select id="carei-pickup-branch" name="pickupBranch" required>
<option value="" disabled selected>Miejsce odbioru</option>
</select>
<svg class="carei-form__select-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</div>
</div>
<label class="carei-form__checkbox-label carei-form__checkbox-label--inline">
<input type="checkbox" id="carei-same-return" name="sameReturn" checked>
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
</label>
</div>
<label class="carei-form__checkbox-label">
<input type="checkbox" id="carei-same-return" name="sameReturn" checked>
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__checkbox-text">Zwrot w tej samej lokalizacji</span>
</label>
<div class="carei-form__field carei-form__field--full carei-form__return-wrap" id="carei-return-wrap" style="display:none;">
<div class="carei-form__select-wrap carei-form__select-wrap--icon">
<svg class="carei-form__icon-pin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z" fill="currentColor"/></svg>
@@ -123,38 +123,23 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<!-- Opcje dodatkowe -->
<div class="carei-form__divider"><span>Opcje dodatkowe</span></div>
<!-- Ubezpieczenie + Opcje dodatkowe (ukryte do wybrania segmentu i miejsca odbioru) -->
<div id="carei-extras-wrapper" class="carei-form__extras-wrapper" style="display:none;">
<div class="carei-form__section">
<div class="carei-form__row" id="carei-extras-container">
<div class="carei-form__extra-card">
<label class="carei-form__checkbox-label carei-form__checkbox-label--card">
<input type="checkbox" name="extras[]" value="insurance">
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__extra-content">
<strong>Rozszerzone ubezpieczenie</strong>
<span class="carei-form__extra-desc">Obejmuje brak odpowiedzialności najemcy za wszelki szkody poniesione na aucie.</span>
<span class="carei-form__extra-price">300 zł</span>
</span>
</label>
</div>
<div class="carei-form__extra-card">
<label class="carei-form__checkbox-label carei-form__checkbox-label--card">
<input type="checkbox" name="extras[]" value="child-seat">
<span class="carei-form__checkbox-box">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="carei-form__extra-content">
<strong>Fotelik dla dziecka</strong>
<span class="carei-form__extra-desc">Prosimy zawrzeć wiek dziecka w wiadomości.</span>
<span class="carei-form__extra-price">50 zł</span>
</span>
</label>
<div class="carei-form__divider"><span>Ubezpieczenie</span></div>
<div class="carei-form__section">
<div class="carei-form__row" id="carei-insurance-container">
<!-- Dynamicznie z API pricelist -->
</div>
</div>
<div class="carei-form__divider"><span>Opcje dodatkowe</span></div>
<div class="carei-form__section">
<div class="carei-form__row" id="carei-extras-container">
<!-- Dynamicznie z API pricelist -->
</div>
</div>
</div>
<!-- Dane najemcy -->
@@ -172,6 +157,21 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<div class="carei-form__row carei-form__row--address">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-city">Miejscowość</label>
<input type="text" id="carei-city" name="city" class="carei-form__input" required>
</div>
<div class="carei-form__field carei-form__field--zipcode">
<label class="carei-form__label-small" for="carei-zipcode">Kod pocztowy</label>
<input type="text" id="carei-zipcode" name="zipCode" class="carei-form__input" placeholder="00-000" maxlength="6" required>
</div>
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-street">Ulica i nr domu</label>
<input type="text" id="carei-street" name="street" class="carei-form__input" required>
</div>
</div>
<div class="carei-form__row">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-email">Adres e-mail</label>
@@ -189,6 +189,14 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</div>
<div class="carei-form__row">
<div class="carei-form__field">
<label class="carei-form__label-small" for="carei-pesel">PESEL</label>
<input type="text" id="carei-pesel" name="pesel" class="carei-form__input" maxlength="11" placeholder="00000000000" required>
</div>
<div class="carei-form__field"></div>
</div>
<div class="carei-form__field carei-form__field--full">
<textarea id="carei-message" name="message" class="carei-form__textarea" placeholder="Twoja wiadomość dotycząca rezerwacji" rows="4"></textarea>
</div>
@@ -203,7 +211,7 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</span>
<span class="carei-form__checkbox-text">Zgadzam się na <a href="/polityka-prywatnosci/" target="_blank">Politykę Prywatności</a></span>
</label>
<button type="submit" class="carei-form__submit">
<button type="submit" class="carei-form__submit" aria-busy="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Wyślij
</button>
@@ -214,6 +222,37 @@ class Carei_Reservation_Widget extends \Elementor\Widget_Base {
</div>
</form>
<!-- Podsumowanie kosztów (po submit) -->
<div id="carei-summary-overlay" class="carei-summary" style="display:none;">
<h3 class="carei-summary__title" tabindex="-1">Podsumowanie rezerwacji<span>.</span></h3>
<div class="carei-summary__details" id="carei-summary-details"></div>
<div class="carei-summary__table" id="carei-summary-table"></div>
<div class="carei-summary__total" id="carei-summary-total"></div>
<div class="carei-summary__error" id="carei-summary-error" style="display:none;"></div>
<div class="carei-summary__actions">
<button type="button" class="carei-summary__btn carei-summary__btn--back" id="carei-summary-back">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Wróć do formularza
</button>
<button type="button" class="carei-summary__btn carei-summary__btn--confirm" id="carei-summary-confirm" aria-busy="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
Potwierdź rezerwację
</button>
</div>
</div>
<!-- Sukces -->
<div id="carei-success-view" class="carei-success" style="display:none;">
<div class="carei-success__icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 class="carei-success__title" tabindex="-1">Rezerwacja złożona!</h3>
<p class="carei-success__number" id="carei-success-number"></p>
<p class="carei-success__message">Potwierdzenie zostanie wysłane na podany adres e-mail.</p>
<button type="button" class="carei-success__close" id="carei-success-close">Zamknij</button>
</div>
</div>
</div>
<?php

View File

@@ -157,6 +157,60 @@ class Carei_Softra_API {
return $this->request( 'GET', '/car/class/listAll' );
}
/**
* Get branches list with all segment names.
* Returns branches + all segments. Frontend shows all branches for any segment
* (actual availability verified at booking time by the API).
* Cached as WP transient for 6 hours.
*/
public function get_segments_branches_map() {
$cache_key = 'carei_segments_branches_map';
$cached = get_transient( $cache_key );
if ( false !== $cached ) {
return $cached;
}
$branches = $this->get_branches();
if ( is_wp_error( $branches ) || ! is_array( $branches ) ) {
return is_wp_error( $branches ) ? $branches : array();
}
$all_classes = $this->get_all_car_classes();
$segments = array();
if ( ! is_wp_error( $all_classes ) && is_array( $all_classes ) ) {
foreach ( $all_classes as $cls ) {
$seg = is_string( $cls ) ? $cls : ( isset( $cls['name'] ) ? $cls['name'] : '' );
if ( '' !== $seg ) {
$segments[] = $seg;
}
}
}
// All branches potentially have all segments.
// Actual availability is checked at booking via /car/class/list.
$branch_names = array();
foreach ( $branches as $b ) {
if ( ! empty( $b['name'] ) ) {
$branch_names[] = $b['name'];
}
}
$map = array();
foreach ( $segments as $seg ) {
$map[ $seg ] = $branch_names;
}
$result = array(
'segmentToBranches' => $map,
'branchToSegments' => array(),
'branches' => $branches,
);
set_transient( $cache_key, $result, 6 * HOUR_IN_SECONDS );
return $result;
}
public function get_car_classes( $date_from, $date_to, $branch_name ) {
return $this->request( 'POST', '/car/class/list', array(
'dateFrom' => $date_from,
@@ -203,6 +257,13 @@ class Carei_Softra_API {
) );
}
public function cancel_booking( $reservation_id, $reason ) {
return $this->request( 'POST', '/rent/cancel', array(
'reservationId' => $reservation_id,
'reason' => $reason,
) );
}
public function get_agreements() {
return $this->request( 'GET', '/agreement/def/list' );
}