94 lines
2.1 KiB
Svelte
94 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { germanyStates } from "../../../../config"
|
|
import Input from "../blocks/form/Input.svelte"
|
|
import Select from "../blocks/form/Select.svelte"
|
|
import { onChange } from "./helper"
|
|
|
|
export let address: BigCommerceAddress
|
|
const stateOptions = germanyStates.map((state) => ({
|
|
label: state.name,
|
|
value: state.name,
|
|
}))
|
|
</script>
|
|
|
|
<div class="row">
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.first_name}"
|
|
placeholder="Vorname*"
|
|
id="firstName"
|
|
/>
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.last_name}"
|
|
placeholder="Nachname*"
|
|
id="lastName"
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.address1}"
|
|
placeholder="Straße*"
|
|
id="address1"
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.address2}"
|
|
placeholder="Zusatz"
|
|
id="address2"
|
|
/>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.postal_code}"
|
|
placeholder="PLZ*"
|
|
id="postalCode"
|
|
/>
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.city}"
|
|
placeholder="Stadt*"
|
|
id="city"
|
|
/>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<Select
|
|
bind:value="{address.state_or_province}"
|
|
options="{stateOptions}"
|
|
placeholder="Bundesland*"
|
|
selectedOption="{stateOptions[0]}"
|
|
/>
|
|
<Select
|
|
bind:value="{address.country_code}"
|
|
options="{[{ label: 'Deutschland', value: 'DE' }]}"
|
|
selectedOption="{{ label: 'Deutschland', value: 'DE' }}"
|
|
placeholder="Land*"
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<Input
|
|
onChange="{onChange}"
|
|
bind:value="{address.phone}"
|
|
placeholder="Telefonnummer"
|
|
id="phone"
|
|
/>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../../assets/css/variables.less";
|
|
.row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 1.2rem;
|
|
@media @mobile {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|