Create checkout forms

Move section out of container because its more useful that way
give section more styling options
Move basket item out into its own div, as to not override containers styling for no reason
Change formMessage type from sting | Error to just string
Make the booking progress code more readable
This commit is contained in:
Michał Gdula 2024-05-16 19:50:48 +01:00
parent 488503d3ff
commit 5afe4386d6
11 changed files with 377 additions and 85 deletions

View file

@ -0,0 +1,66 @@
<script lang="ts">
import { SealCheck } from "phosphor-svelte";
let name = "";
let email = "";
let nameValid = true;
let emailValid = true;
function validateName() { nameValid = name.length > 1 }
function validateEmail() { emailValid = email.length > 1 }
function onSubmit() {
validateName();
validateEmail();
}
</script>
<h1>Checkout > Payment</h1>
<form on:submit|preventDefault={onSubmit}>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input
bind:value={name}
on:blur={validateName}
on:input={validateName}
type="text"
id="name"
name="name"
class="form-input"
/>
<span class="form-notice error">
{#if !nameValid}
Enter a name
{/if}
</span>
</div>
<div class="spacer half" />
<div class="form-element">
<label class="form-label" for="email">Email</label>
<input
bind:value={email}
on:blur={validateEmail}
on:input={validateEmail}
type="text"
id="email"
name="email"
class="form-input"
/>
<span class="form-notice error">
{#if !emailValid}
Email not valid
{/if}
</span>
</div>
<div class="spacer half" />
<p class="form-message success"><SealCheck weight="fill" />&nbsp;GwaGwa</p>
</form>
<style lang="scss">
@import "../../styles/vars";
</style>