86 lines
4.1 KiB
Cheetah
86 lines
4.1 KiB
Cheetah
{{define "onboarding-profile"}}
|
|
<div class="container-sm" style="padding:4rem 1rem">
|
|
<p class="label accent mb-3" style="text-align:center">Step 2 of 3</p>
|
|
<h1 class="mb-4" style="text-align:center">A few details</h1>
|
|
<p class="lead mb-8" style="text-align:center">Your billing address is required by Paddle to charge tax correctly. We never share it.</p>
|
|
|
|
<div id="profile-error" class="mb-4" style="display:none;color:var(--brand-red);text-align:center"></div>
|
|
|
|
<form id="profile-form" style="display:flex;flex-direction:column;gap:14px">
|
|
<label>
|
|
<span class="form-label">Name</span>
|
|
<input type="text" name="name" required autocomplete="name"
|
|
style="width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
<label>
|
|
<span class="form-label">Address (optional)</span>
|
|
<input type="text" name="address1" autocomplete="street-address"
|
|
style="width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
|
|
<label>
|
|
<span class="form-label">City (optional)</span>
|
|
<input type="text" name="city" autocomplete="address-level2"
|
|
style="width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
<label>
|
|
<span class="form-label">Zip / postal (optional)</span>
|
|
<input type="text" name="zip" autocomplete="postal-code"
|
|
style="width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
|
|
<label>
|
|
<span class="form-label">State / region (optional)</span>
|
|
<input type="text" name="region" autocomplete="address-level1"
|
|
style="width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
<label>
|
|
<span class="form-label">Country</span>
|
|
<input type="text" name="country_code" required maxlength="2" placeholder="US" autocomplete="country" style="text-transform:uppercase;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:0.9rem">
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="padding:12px;margin-top:8px">Continue →</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "onboarding-profile-script"}}
|
|
<script>
|
|
document.getElementById('profile-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById('profile-error');
|
|
const btn = this.querySelector('button');
|
|
errEl.style.display = 'none';
|
|
btn.disabled = true; btn.textContent = 'Saving...';
|
|
const data = {
|
|
name: this.name.value.trim(),
|
|
address1: this.address1.value.trim(),
|
|
city: this.city.value.trim(),
|
|
region: this.region.value.trim(),
|
|
zip: this.zip.value.trim(),
|
|
country_code: this.country_code.value.trim().toUpperCase(),
|
|
};
|
|
try {
|
|
const r = await fetch('/onboarding/profile', {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify(data)
|
|
});
|
|
const d = await r.json();
|
|
if (d.ok) {
|
|
window.location = d.next || '/onboarding/plan';
|
|
} else {
|
|
errEl.textContent = d.error || 'Could not save.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false; btn.textContent = 'Continue \u2192';
|
|
}
|
|
} catch(err) {
|
|
errEl.textContent = 'Connection error. Try again.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false; btn.textContent = 'Continue \u2192';
|
|
}
|
|
});
|
|
</script>
|
|
{{end}}
|