ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: show payment error message

This commit is contained in:
Reto Aebersold 2023-11-17 14:30:54 +01:00 committed by Christian Cueni
parent dc1eaad412
commit 3787e1726a
3 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/fetchHelpers.ts
View File

@ -1,6 +1,4 @@
import { getCookieValue } from "@/router/guards"; import { getCookieValue } from "@/router/guards";
import type { Ref } from "vue";
import { ref, toValue, watchEffect } from "vue";
class FetchError extends Error { class FetchError extends Error {
response: Response; response: Response;
@ -94,24 +92,3 @@ export const itGetCached = (
return itGetPromiseCache.get(url.toString()) as Promise<any>; 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 };
}

17
client/src/pages/onboarding/vv/CheckoutAddress.vue
View File

@ -5,9 +5,10 @@ import { computed, ref, watch } from "vue";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import PersonalAddress from "@/components/onboarding/PersonalAddress.vue"; import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
import OrganisationAddress from "@/components/onboarding/OrganisationAddress.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 { useEntities } from "@/services/onboarding";
import { useDebounceFn } from "@vueuse/core"; import { useDebounceFn, useFetch } from "@vueuse/core";
import { useRoute } from "vue-router";
type BillingAddressType = { type BillingAddressType = {
first_name: string; first_name: string;
@ -26,6 +27,7 @@ type BillingAddressType = {
}; };
const user = useUserStore(); const user = useUserStore();
const route = useRoute();
const { organisations } = useEntities(); const { organisations } = useEntities();
const userOrganisationName = computed(() => { const userOrganisationName = computed(() => {
@ -41,6 +43,10 @@ const userOrganisationName = computed(() => {
return organisations.value?.find((c) => c.id === user.organisation)?.name; return organisations.value?.find((c) => c.id === user.organisation)?.name;
}); });
const paymentError = computed(() => {
return "error" in route.query;
});
const address = ref({ const address = ref({
first_name: "", first_name: "",
last_name: "", last_name: "",
@ -59,7 +65,7 @@ const address = ref({
const useCompanyAddress = ref(false); 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; const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;
watch(billingAddressData, (newVal) => { watch(billingAddressData, (newVal) => {
@ -199,6 +205,11 @@ const executePayment = () => {
</p> </p>
<p>Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.</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> <h3 class="mb-4 mt-10">Adresse</h3>
<p> <p>
Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional

2
server/vbv_lernwelt/shop/views.py
View File

@ -153,7 +153,7 @@ def webhook_url(base_url: str) -> str:
def checkout_error_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: def checkout_cancel_url(base_url: str) -> str: