diff --git a/client/src/components/onboarding/OrganisationAddress.vue b/client/src/components/onboarding/OrganisationAddress.vue index 0ccf8b8a..b8b59889 100644 --- a/client/src/components/onboarding/OrganisationAddress.vue +++ b/client/src/components/onboarding/OrganisationAddress.vue @@ -4,12 +4,12 @@ import { useEntities } from "@/services/entities"; const props = defineProps<{ modelValue: { - company_name: string; - company_street: string; - company_street_number: string; - company_postal_code: string; - company_city: string; - company_country: string; + organisation_detail_name: string; + organisation_street: string; + organisation_street_number: string; + organisation_postal_code: string; + organisation_city: string; + organisation_country_code: string; }; }>(); @@ -39,7 +39,7 @@ const orgAddress = computed({
{ if (!user.organisation) { @@ -61,56 +44,27 @@ const paymentError = computed(() => { }); const address = ref({ - first_name: "", - last_name: "", - street: "", - street_number: "", - postal_code: "", - city: "", - country: "", - company_name: "", - company_street: "", - company_street_number: "", - company_postal_code: "", - company_city: "", - company_country: "", + first_name: user.first_name, + last_name: user.last_name, + street: user.street, + street_number: user.street_number, + postal_code: user.postal_code, + city: user.city, + country_code: user.country?.country_code ?? "CH", + organisation_detail_name: user.organisation_detail_name, + organisation_street: user.organisation_street, + organisation_street_number: user.organisation_street_number, + organisation_postal_code: user.organisation_postal_code, + organisation_city: user.organisation_city, + organisation_country_code: user.organisation_country?.country_code ?? "CH", + invoice_address: user.invoice_address ?? "prv", }); -const useCompanyAddress = ref(false); -const fetchBillingAddress = useFetch("/api/shop/billing-address/").json(); -const billingAddressData: Ref = fetchBillingAddress.data; +const useCompanyAddress = ref(user.invoice_address === "org"); -watch(billingAddressData, (newVal) => { - if (newVal) { - address.value = newVal; - useCompanyAddress.value = !!newVal.company_name; - } -}); - -const updateAddress = useDebounceFn(() => { - itPut("/api/shop/billing-address/update/", address.value); -}, 500); - -watch( - address, - (newVal, oldVal) => { - if (Object.values(oldVal).every((x) => x === "")) { - return; - } - - updateAddress(); - }, - { deep: true } -); - -const removeCompanyAddress = () => { - useCompanyAddress.value = false; - address.value.company_name = ""; - address.value.company_street = ""; - address.value.company_street_number = ""; - address.value.company_postal_code = ""; - address.value.company_city = ""; - address.value.company_country = ""; +const setUseCompanyAddress = (value: boolean) => { + useCompanyAddress.value = value; + address.value.invoice_address = value ? "org" : "prv"; }; type FormErrors = { @@ -153,44 +107,59 @@ function validateAddress() { formErrors.value.personal.push(t("a.Ort")); } - if (!address.value.country) { + if (!address.value.country_code) { formErrors.value.personal.push(t("a.Land")); } if (useCompanyAddress.value) { - if (!address.value.company_name) { + if (!address.value.organisation_detail_name) { formErrors.value.company.push(t("a.Name")); } - if (!address.value.company_street) { + if (!address.value.organisation_street) { formErrors.value.company.push(t("a.Strasse")); } - if (!address.value.company_street_number) { + if (!address.value.organisation_street_number) { formErrors.value.company.push(t("a.Hausnummmer")); } - if (!address.value.company_postal_code) { + if (!address.value.organisation_postal_code) { formErrors.value.company.push(t("a.PLZ")); } - if (!address.value.company_city) { + if (!address.value.organisation_city) { formErrors.value.company.push(t("a.Ort")); } - if (!address.value.company_country) { + if (!address.value.organisation_country_code) { formErrors.value.company.push(t("a.Land")); } } } -const executePayment = () => { - validateAddress(); +async function saveAddress() { + const { country_code, organisation_country_code, ...profileData } = address.value; + const typedProfileData: Partial = { ...profileData }; + typedProfileData.country = countries.value.find( + (c) => c.country_code === country_code + ); + typedProfileData.organisation_country = countries.value.find( + (c) => c.country_code === organisation_country_code + ); + + await user.updateUserProfile(typedProfileData); +} + +const executePayment = async () => { + validateAddress(); if (formErrors.value.personal.length > 0 || formErrors.value.company.length > 0) { return; } + await saveAddress(); + // Where the payment page will redirect to after the payment is done: // The reason why this is here is convenience: We could also do this in the backend // then we'd need to configure this for all environments (including Caprover). @@ -242,6 +211,7 @@ const executePayment = () => {

{{ $t("a.Adresse") }}

+
{{ address }}

{{ $t( @@ -266,7 +236,7 @@ const executePayment = () => {