feat: show payment error message

client/src/fetchHelpers.ts

@@ -1,6 +1,4 @@
 import { getCookieValue } from "@/router/guards";
-import type { Ref } from "vue";
-import { ref, toValue, watchEffect } from "vue";
 
 class FetchError extends Error {
   response: Response;
@@ -94,24 +92,3 @@ export const itGetCached = (
 
   return itGetPromiseCache.get(url.toString()) as Promise<any>;
 };
-
-export function useFetch(url: Ref<RequestInfo> | RequestInfo | (() => RequestInfo)) {
-  const data = ref(null);
-  const error = ref(null);
-
-  const fetchData = () => {
-    data.value = null;
-    error.value = null;
-
-    fetch(toValue(url))
-      .then((res) => res.json())
-      .then((json) => (data.value = json))
-      .catch((err) => (error.value = err));
-  };
-
-  watchEffect(() => {
-    fetchData();
-  });
-
-  return { data, error };
-}

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

@@ -5,9 +5,10 @@ import { computed, ref, watch } from "vue";
 import { useUserStore } from "@/stores/user";
 import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
 import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
-import { itPost, itPut, useFetch } from "@/fetchHelpers";
+import { itPost, itPut } from "@/fetchHelpers";
 import { useEntities } from "@/services/onboarding";
-import { useDebounceFn } from "@vueuse/core";
+import { useDebounceFn, useFetch } from "@vueuse/core";
+import { useRoute } from "vue-router";
 
 type BillingAddressType = {
   first_name: string;
@@ -26,6 +27,7 @@ type BillingAddressType = {
 };
 
 const user = useUserStore();
+const route = useRoute();
 const { organisations } = useEntities();
 
 const userOrganisationName = computed(() => {
@@ -41,6 +43,10 @@ const userOrganisationName = computed(() => {
   return organisations.value?.find((c) => c.id === user.organisation)?.name;
 });
 
+const paymentError = computed(() => {
+  return "error" in route.query;
+});
+
 const address = ref({
   first_name: "",
   last_name: "",
@@ -59,7 +65,7 @@ const address = ref({
 
 const useCompanyAddress = ref(false);
 
-const fetchBillingAddress = useFetch("/api/shop/billing-address/");
+const fetchBillingAddress = useFetch("/api/shop/billing-address/").json();
 const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;
 
 watch(billingAddressData, (newVal) => {
@@ -199,6 +205,11 @@ const executePayment = () => {
       </p>
       <p>Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.</p>
 
+      <p v-if="paymentError" class="text-bold mt-12 text-lg text-red-700">
+        Fehler bei der Zahlung. Bitte versuche es erneut oder
+        <a href="mailto:help@vbv.ch" class="underline">kontaktiere uns</a>
+      </p>
+
       <h3 class="mb-4 mt-10">Adresse</h3>
       <p>
         Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional

server/vbv_lernwelt/shop/views.py

@@ -153,7 +153,7 @@ def webhook_url(base_url: str) -> str:
 
 
 def checkout_error_url(base_url: str) -> str:
-    return f"{base_url}/onboarding/vv/checkout/address?error=true"
+    return f"{base_url}/onboarding/vv/checkout/address?error"
 
 
 def checkout_cancel_url(base_url: str) -> str: