wip: billing address frontend

client/src/pages/onboarding/vv/CheckoutAddress.vue

@@ -1,9 +1,26 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
-import { ref } from "vue";
+import type { Ref } from "vue";
+import { ref, watch } from "vue";
 import { useUserStore } from "@/stores/user";
 import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
 import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
+import { itPut, useFetch } from "@/fetchHelpers";
+
+type BillingAddressType = {
+  first_name: string;
+  last_name: string;
+  street: string;
+  street_number: string;
+  postal_code: string;
+  city: string;
+  country: string;
+  company_street: string;
+  company_street_number: string;
+  company_postal_code: string;
+  company_city: string;
+  company_country: string;
+};
 
 const user = useUserStore();
 
@@ -27,8 +44,48 @@ const orgAddress = ref({
   country: "",
 });
 
+const fetchBillingAddress = useFetch("/api/shop/billing-address/");
+const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;
+
+watch(billingAddressData, (newVal) => {
+  if (newVal) {
+    console.log("New billing address data: ", newVal);
+    // TODO: we get the billing address from the shop api but updating the form does not work
+    // TODO: I don't understand how this was supposed to work in the first place -> how do we do this? :)
+    address.value = {
+      firstName: newVal.first_name,
+      lastName: newVal.last_name,
+      street: newVal.street,
+      streetNumber: newVal.street_number,
+      postalCode: newVal.postal_code,
+      city: newVal.city,
+      country: newVal.country,
+    };
+    orgAddress.value = {
+      street: newVal.company_street,
+      streetNumber: newVal.company_street_number,
+      postalCode: newVal.company_postal_code,
+      city: newVal.company_city,
+      country: newVal.company_country,
+    };
+  }
+});
+
 const executePayment = () => {
-  console.log("Validate & Execute Payment");
+  itPut("/api/shop/billing-address/update", {
+    first_name: address.value.firstName,
+    last_name: address.value.lastName,
+    street: address.value.street,
+    street_number: address.value.streetNumber,
+    postal_code: address.value.postalCode,
+    city: address.value.city,
+    country: address.value.country,
+    company_street: orgAddress.value.street,
+    company_street_number: orgAddress.value.streetNumber,
+    company_postal_code: orgAddress.value.postalCode,
+    company_city: orgAddress.value.city,
+    company_country: orgAddress.value.country,
+  });
 };
 </script>