<div class="c-fold">
<div class="c-fold__summary">
<p class="c-fold__summary-text">Stiamo verificando che sussistano le condizioni per procedere al rimborso che hai richiesto il giorno [data]</p>
</div>
</div>
<div class="c-fold{{#if modifier}} {{modifier}}{{/if}}">
<div class="c-fold__summary">
<p class="c-fold__summary-text">{{{ summary-text }}}</p>
</div>
</div>
{
"summary-text": "Stiamo verificando che sussistano le condizioni per procedere al rimborso che hai richiesto il giorno [data]",
"upsell-items": [
{
"item": {
"name": "Lavaggio autovettura",
"price-item": [
{
"label": "Prezzo min.",
"value": "8,00 €"
},
{
"label": "Prezzo max.",
"value": "24,00 €"
}
]
}
},
{
"item": {
"name": "Pulitura interni",
"price-item": [
{
"label": "Prezzo max.",
"value": "24,00 €"
}
]
}
}
],
"footer-text": "Il pagamento di questi servizi avverrà solo una volta che ne avrai usufruito. Potrai pagarli presso il Presidio Parcheggi al piano terra del P2, prima del ritiro della tua auto"
}
.c-fold {
background-color: secondary(basic-white, 100);
padding: remify(16px);
border-radius: 0 0 remify(20px) remify(20px);
color: primary(night, 100);
border: remify(1px) solid primary(night, 20);
border-top: none;
}
.c-fold__summary {
display: flex;
gap: remify(16px);
flex-direction: column;
align-items: flex-start;
@include min-screen(bp(tablet)) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.c-fold .js-btn-fold-toggle,
.c-fold .c-fold__summary-cta,
.c-fold .c-button--ghost.c-fold__summary-cta {
color: currentColor;
flex-shrink: 0;
@include font-scale(level-1-5, semibold);
padding: remify(4px) remify(12px);
border-radius: remify(8px);
}
.c-fold .c-fold__summary-cta {
padding: 0;
}
.c-fold__details {
display: none;
flex-direction: column;
gap: remify(16px);
margin-top: remify(24px);
@include min-screen(bp(tablet)) {
gap: remify(32px);
margin-top: remify(32px);
}
}
.c-fold__details-items {
display: flex;
flex-direction: column;
gap: remify(16px);
}
.c-fold__summary-text {
color: primary(night, 100);
@include font-scale(level-1-5);
}
.c-fold .c-voucher-main-form {
padding: 0;
}
/*------------------------------------*\
Modifier: c-fold--result
\*------------------------------------*/
.c-fold--result {
.c-fold__summary {
justify-content: initial;
gap: remify(16px) remify(8px);
}
.refund-result {
display: flex;
align-items: center;
gap: remify(4px);
}
}
document.addEventListener('DOMContentLoaded', () => {
// Find all fold containers and set them up
const foldContainers = document.querySelectorAll('.c-fold');
foldContainers.forEach(container => {
// Find the essential parts of the component
const toggleButton = container.querySelector('.js-btn-fold-toggle');
const detailsSection = container.querySelector('.c-fold__details');
// Find the optional close button
const closeButton = container.querySelector('.js-btn-close-fold');
// If there's no toggle button or details section, this isn't a valid fold component
if (!toggleButton || !detailsSection) {
return;
}
// Get button texts from data attributes
const showText = toggleButton.dataset.showText;
const hideText = toggleButton.dataset.hideText;
// --- STATE MANAGEMENT FUNCTIONS ---
const openDetails = () => {
detailsSection.style.display = 'flex';
toggleButton.textContent = hideText;
toggleButton.setAttribute('aria-expanded', 'true');
detailsSection.setAttribute('aria-hidden', 'false');
};
const closeDetails = () => {
detailsSection.style.display = 'none';
toggleButton.textContent = showText;
toggleButton.setAttribute('aria-expanded', 'false');
detailsSection.setAttribute('aria-hidden', 'true');
};
// --- INITIAL STATE ---
// Start with the details section closed
closeDetails();
// --- EVENT LISTENERS ---
// 1. Toggle Button (Open/Close)
const toggleFoldHandler = (event) => {
event.preventDefault();
const isHidden = detailsSection.style.display === 'none';
if (isHidden) {
openDetails();
} else {
closeDetails();
}
};
toggleButton.addEventListener('click', toggleFoldHandler);
toggleButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
toggleFoldHandler(event);
}
});
// 2. Optional Close Button (Close Only)
if (closeButton) {
const closeFoldHandler = (event) => {
event.preventDefault();
closeDetails();
};
closeButton.addEventListener('click', closeFoldHandler);
closeButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
closeFoldHandler(event);
}
});
}
});
});
No notes defined.