-
-
-
+
+
+ Your gift
+
+ £25
+ / month
+
+
+
+
+
+
+
+
+ One-off donation
+
+
+ Monthly donation
+
+
+
+
+
Choose an amount
+
+
+
+
+
+
+ Or another amount
+ £
+ / month
+
+
+
+
+
+
+
+
+ Make my donation worth 25% more with Gift Aid
+ I'm a UK taxpayer and I'd like Highland Group RDA to reclaim Gift Aid on my donation and any donations I make in the future or have made in the last four years.
+
+
+
+
-
-
-
-
-
← Change amount
+
+
+
+ Continue to payment
+
+
+
+
+
+
+
+
+
+
Express checkout
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Donate £25
+
+
+
+
+
+ stripe
+
+
You can cancel anytime
+
Charity SC007357
+
+
+
+
+
+
+
+
Thank you — from all of us at Highland Group RDA.
+
+
+ Close
+
+
+
+
@@ -694,145 +691,203 @@ const ctaCards = [
}
// ── Donate modal ──
- const PRESETS = {
- once: [
- { amt: 10, impact: "covers feed for one session" },
- { amt: 25, impact: "helps with grooming supplies" },
- { amt: 50, impact: "contributes towards farrier costs" },
- { amt: 100, impact: "supports a month of hay" },
+ const D_PRESETS = {
+ oneoff: [
+ { amount: 10, impact: 'Hay for a pony for two days' },
+ { amount: 25, impact: "Funds one rider's session" },
+ { amount: 50, impact: 'Covers a routine vet visit' },
+ { amount: 100, impact: 'A full week of farriery' },
],
monthly: [
- { amt: 5, impact: "provides a weekly treat for a pony" },
- { amt: 10, impact: "covers monthly grooming supplies" },
- { amt: 25, impact: "contributes to monthly vet care" },
- { amt: 50, impact: "supports monthly farrier visits" },
+ { amount: 5, impact: 'A grooming kit each month' },
+ { amount: 10, impact: 'Helps feed our ponies' },
+ { amount: 20, impact: 'Funds a weekly session' },
+ { amount: 35, impact: "A pony's regular farriery" },
],
};
- let donateFreq = "once";
- let donateSelected = 25; // default chip
- let donateCustomActive = false;
+ let _dMode = 'oneoff';
+ let _dAmt = 25;
+ let _dOther = '';
+ let _dGA = false;
- function renderChips() {
- const container = document.getElementById("donate-chips");
- if (!container) return;
- container.innerHTML = "";
- PRESETS[donateFreq].forEach(({ amt }) => {
- const btn = document.createElement("button");
- btn.className = "donate-chip" + (!donateCustomActive && donateSelected === amt ? " selected" : "");
- btn.textContent = "£" + amt;
- btn.setAttribute("aria-pressed", String(!donateCustomActive && donateSelected === amt));
- btn.onclick = () => selectChip(amt);
- container.appendChild(btn);
- });
+ function dGetAmt() {
+ const v = Number(_dOther);
+ return (_dOther && v > 0) ? v : _dAmt;
}
- function getImpact() {
- if (donateCustomActive) return "";
- const preset = PRESETS[donateFreq].find(p => p.amt === donateSelected);
- return preset ? "✦ £" + preset.amt + " " + preset.impact + "." : "";
+ function dRenderChips() {
+ const grid = document.getElementById('donate-chips-grid');
+ if (!grid) return;
+ const presets = D_PRESETS[_dMode];
+ const noOther = !_dOther;
+ grid.innerHTML = presets.map(({ amount, impact }) => {
+ const sel = noOther && _dAmt === amount;
+ return `
+ £${amount}
+ ${impact}
+ `;
+ }).join('');
}
- function updateImpact() {
- const el = document.getElementById("donate-impact");
- if (el) el.textContent = getImpact();
- }
-
- function selectChip(amt) {
- donateSelected = amt;
- donateCustomActive = false;
- const input = document.getElementById("donate-custom");
- if (input) { input.value = ""; input.classList.remove("selected"); }
- renderChips();
- updateImpact();
- }
-
- function onCustomInput() {
- const input = document.getElementById("donate-custom");
- if (!input) return;
- donateCustomActive = !!input.value;
- if (donateCustomActive) input.classList.add("selected");
- else input.classList.remove("selected");
- renderChips();
- updateImpact();
- }
-
- function setFreq(freq) {
- donateFreq = freq;
- document.getElementById("donate-btn-once").classList.toggle("active", freq === "once");
- document.getElementById("donate-btn-monthly").classList.toggle("active", freq === "monthly");
- // keep current selected amount if it exists in new presets, else default to first
- const exists = PRESETS[freq].some(p => p.amt === donateSelected);
- if (!exists) donateSelected = PRESETS[freq][1].amt;
- donateCustomActive = false;
- const input = document.getElementById("donate-custom");
- if (input) { input.value = ""; input.classList.remove("selected"); }
- renderChips();
- updateImpact();
- }
-
- function proceedToCheckout() {
- const customInput = document.getElementById("donate-custom");
- const customVal = parseFloat(customInput?.value);
- const amount = donateCustomActive && customVal > 0 ? customVal : donateSelected;
- const giftAid = document.getElementById("donate-giftaid-cb")?.checked;
- const freqLabel = donateFreq === "monthly" ? "per month" : "one-off gift";
-
- const summaryAmt = document.getElementById("donate-summary-amount");
- const summarySub = document.getElementById("donate-summary-sub");
- if (summaryAmt) summaryAmt.textContent = "£" + (Number.isInteger(amount) ? amount : amount.toFixed(2));
- if (summarySub) {
- summarySub.textContent = freqLabel.charAt(0).toUpperCase() + freqLabel.slice(1)
- + (giftAid ? " · Gift Aid selected" : "")
- + "\nYou'll complete your payment securely via JustGiving.";
+ function dUpdateChip() {
+ const amt = dGetAmt();
+ const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
+ const el = (id) => document.getElementById(id);
+ if (el('donate-chip-label')) el('donate-chip-label').textContent = _dMode === 'monthly' ? 'Your monthly gift' : 'Your gift';
+ if (el('donate-chip-amount')) el('donate-chip-amount').textContent = '£' + (Number.isFinite(amt) ? amt : 0);
+ if (el('donate-chip-freq')) el('donate-chip-freq').style.display = _dMode === 'monthly' ? 'inline' : 'none';
+ if (el('donate-chip-ga')) {
+ el('donate-chip-ga').style.display = (_dGA && amt > 0) ? 'inline' : 'none';
+ el('donate-chip-ga').textContent = `+ £${gaAmt.toFixed(2)} Gift Aid`;
+ }
+ // Update pay button label
+ const gaTotal = amt + gaAmt;
+ const payLabel = el('donate-pay-label');
+ if (payLabel) {
+ payLabel.textContent = `Donate £${Number.isFinite(amt) ? amt : 0}${_dMode === 'monthly' ? ' / month' : ''}${_dGA && amt > 0 ? ` (£${gaTotal.toFixed(2)} with Gift Aid)` : ''}`;
}
-
- document.getElementById("donate-step-amount").style.display = "none";
- document.getElementById("donate-step-pay").style.display = "block";
}
- function backToAmount() {
- document.getElementById("donate-step-pay").style.display = "none";
- document.getElementById("donate-step-amount").style.display = "block";
+ function dSelectChip(amount) {
+ _dAmt = amount;
+ _dOther = '';
+ const inp = document.getElementById('donate-other');
+ if (inp) inp.value = '';
+ dRenderChips();
+ dUpdateChip();
+ }
+
+ function dOnOther() {
+ const inp = document.getElementById('donate-other');
+ _dOther = inp ? inp.value : '';
+ dRenderChips();
+ dUpdateChip();
+ }
+
+ function dSetMode(mode) {
+ _dMode = mode;
+ const toOne = document.getElementById('donate-tab-oneoff');
+ const toMo = document.getElementById('donate-tab-monthly');
+ if (toOne) { toOne.style.background = mode === 'oneoff' ? '#000' : 'transparent'; toOne.style.color = mode === 'oneoff' ? '#fff' : 'rgba(0,0,0,0.55)'; toOne.setAttribute('aria-selected', String(mode === 'oneoff')); }
+ if (toMo) { toMo.style.background = mode === 'monthly' ? '#000' : 'transparent'; toMo.style.color = mode === 'monthly' ? '#fff' : 'rgba(0,0,0,0.55)'; toMo.setAttribute('aria-selected', String(mode === 'monthly')); }
+ _dAmt = mode === 'oneoff' ? 25 : 10;
+ _dOther = '';
+ const inp = document.getElementById('donate-other');
+ if (inp) inp.value = '';
+ const moTag = document.getElementById('donate-other-mo');
+ if (moTag) moTag.style.display = mode === 'monthly' ? 'inline' : 'none';
+ dRenderChips();
+ dUpdateChip();
+ }
+
+ function dToggleGA() {
+ _dGA = !_dGA;
+ const box = document.getElementById('donate-ga-box');
+ const fields = document.getElementById('donate-ga-fields');
+ if (box) {
+ box.style.background = _dGA ? '#7DA371' : '#fff';
+ box.style.borderColor = _dGA ? '#7DA371' : 'rgba(0,0,0,0.3)';
+ box.innerHTML = _dGA
+ ? '
'
+ : '';
+ }
+ if (fields) fields.style.maxHeight = _dGA ? '420px' : '0';
+ dUpdateChip();
+ }
+
+ function dProceed() {
+ const el = (id) => document.getElementById(id);
+ el('donate-step-amount').style.display = 'none';
+ el('donate-step-pay').style.display = 'block';
+ const dd = el('donate-dd-note');
+ if (dd) dd.style.display = _dMode === 'monthly' ? 'block' : 'none';
+ const tc = el('donate-trust-cancel');
+ if (tc) tc.style.display = _dMode === 'monthly' ? 'inline' : 'none';
+ dUpdateChip();
+ document.getElementById('donate-overlay')?.scrollTo(0, 0);
+ }
+
+ function dBack() {
+ document.getElementById('donate-step-pay').style.display = 'none';
+ document.getElementById('donate-step-amount').style.display = 'block';
+ }
+
+ function dComplete() {
+ const amt = dGetAmt();
+ const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
+ const el = (id) => document.getElementById(id);
+ el('donate-step-pay').style.display = 'none';
+ el('donate-step-done').style.display = 'block';
+ el('donate-total-chip').style.display = 'none';
+ el('donate-modal-title').textContent = 'Thank you.';
+ el('donate-header-sub').style.display = 'none';
+ const msg = el('donate-done-msg');
+ if (msg) {
+ msg.innerHTML = `Your ${_dMode === 'monthly' ? 'monthly' : 'one-off'} gift of
£${Number.isFinite(amt) ? amt : 0} ${_dGA ? ` (worth £${(amt + gaAmt).toFixed(2)} with Gift Aid)` : ''} goes directly to our ponies and riders. A receipt is on its way to your inbox.`;
+ }
+ document.getElementById('donate-overlay')?.scrollTo(0, 0);
}
function openDonateModal() {
- renderChips();
- updateImpact();
- // reset to amount step
- const stepAmt = document.getElementById("donate-step-amount");
- const stepPay = document.getElementById("donate-step-pay");
- if (stepAmt) stepAmt.style.display = "block";
- if (stepPay) stepPay.style.display = "none";
-
- const overlay = document.getElementById("donate-overlay");
+ const el = (id) => document.getElementById(id);
+ // Reset state
+ _dMode = 'oneoff'; _dAmt = 25; _dOther = ''; _dGA = false;
+ // Reset UI
+ dSetMode('oneoff');
+ const gaBox = el('donate-ga-box');
+ const gaFields = el('donate-ga-fields');
+ const otherInp = el('donate-other');
+ if (gaBox) { gaBox.style.background = '#fff'; gaBox.style.borderColor = 'rgba(0,0,0,0.3)'; gaBox.innerHTML = ''; }
+ if (gaFields) gaFields.style.maxHeight = '0';
+ if (otherInp) otherInp.value = '';
+ // Reset steps
+ el('donate-step-amount').style.display = 'block';
+ el('donate-step-pay').style.display = 'none';
+ el('donate-step-done').style.display = 'none';
+ el('donate-total-chip').style.display = 'flex';
+ el('donate-modal-title').textContent = 'Make a donation';
+ const sub = el('donate-header-sub');
+ if (sub) sub.style.display = 'block';
+ dRenderChips();
+ dUpdateChip();
+ // Open overlay with animation
+ const overlay = el('donate-overlay');
if (overlay) {
- overlay.classList.add("open");
- document.body.style.overflow = "hidden";
+ overlay.style.display = 'flex';
+ document.body.style.overflow = 'hidden';
+ requestAnimationFrame(() => requestAnimationFrame(() => overlay.classList.add('visible')));
}
}
function closeDonateModal() {
- const overlay = document.getElementById("donate-overlay");
- if (overlay) overlay.classList.remove("open");
- document.body.style.overflow = "";
+ const overlay = document.getElementById('donate-overlay');
+ if (!overlay) return;
+ overlay.classList.remove('visible');
+ document.body.style.overflow = '';
+ setTimeout(() => { overlay.style.display = 'none'; }, 300);
}
- // Close on overlay click
- document.getElementById("donate-overlay")?.addEventListener("click", function(e) {
+ document.getElementById('donate-overlay')?.addEventListener('click', function(e) {
if (e.target === this) closeDonateModal();
});
-
- // Close on Escape
- document.addEventListener("keydown", function(e) {
- if (e.key === "Escape") closeDonateModal();
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'Escape') closeDonateModal();
});
- // Expose globally so onclick attributes work
- Object.assign(window, { openDonateModal, closeDonateModal, setFreq, selectChip, onCustomInput, proceedToCheckout, backToAmount });
+ Object.assign(window, { openDonateModal, closeDonateModal, dSetMode, dSelectChip, dOnOther, dToggleGA, dProceed, dBack, dComplete });
- // Initial render
- renderChips();
- updateImpact();
+ dRenderChips();
+ dUpdateChip();