Initial commit

frontend/src/lib/components/pagebuilder/profile/AddressForm.svelte

@@ -0,0 +1,93 @@
+<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>