From da5c6d07d2398d858b9e56461246a44daae83158 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 20 Jun 2024 14:05:49 +0200
Subject: [PATCH 01/19] Add Cypress test for checkout process

---
 .../components/dashboard/NoCourseSession.vue  |  5 +-
 .../src/pages/onboarding/AccountConfirm.vue   | 10 +-
 .../src/pages/onboarding/AccountProfile.vue   |  5 +-
 .../pages/onboarding/vv/CheckoutAddress.vue   |  7 +-
 .../pages/onboarding/vv/CheckoutComplete.vue  |  4 +-
 cypress/consts.js                             | 16 ++-
 cypress/e2e/checkout-vv/checkout.cy.js        | 97 +++++++++++++++++++
 cypress/support/commands.js                   | 12 ++-
 server/vbv_lernwelt/assignment/serializers.py |  2 +-
 .../shop/datatrans_fake_server.py             |  4 +-
 server/vbv_lernwelt/shop/serializers.py       |  8 ++
 11 files changed, 154 insertions(+), 16 deletions(-)
 create mode 100644 cypress/e2e/checkout-vv/checkout.cy.js

diff --git a/client/src/components/dashboard/NoCourseSession.vue b/client/src/components/dashboard/NoCourseSession.vue
index 4386d269..55c16f65 100644
--- a/client/src/components/dashboard/NoCourseSession.vue
+++ b/client/src/components/dashboard/NoCourseSession.vue
@@ -24,7 +24,9 @@ const user = useUserStore();
         <p class="mb-4">
           {{ $t("start.vvDescription") }}
         </p>
-        <a href="/start/vv" class="btn-primary">{{ $t("a.Mehr erfahren") }}</a>
+        <a href="/start/vv" class="btn-primary" data-cy="start-vv">
+          {{ $t("a.Mehr erfahren") }}
+        </a>
       </div>
 
       <div>
@@ -39,6 +41,7 @@ const user = useUserStore();
         <router-link
           :to="{ name: 'accountProfile', params: { courseType: 'uk' } }"
           class="btn-primary"
+          data-cy="start-uk"
         >
           {{ $t("a.Jetzt mit Lehrgang starten") }}
         </router-link>
diff --git a/client/src/pages/onboarding/AccountConfirm.vue b/client/src/pages/onboarding/AccountConfirm.vue
index 26be7b8d..8750119b 100644
--- a/client/src/pages/onboarding/AccountConfirm.vue
+++ b/client/src/pages/onboarding/AccountConfirm.vue
@@ -9,7 +9,9 @@ const userStore = useUserStore();
 <template>
   <WizardPage :step="0.5">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
+      <h2 class="my-10" data-cy="account-confirm-title">
+        {{ $t("a.Konto erstellen") }}
+      </h2>
       <InfoBox color="text-green-500" icon="it-icon-check">
         <template #content>
           <p class="text-lg font-bold">
@@ -27,7 +29,11 @@ const userStore = useUserStore();
     </template>
 
     <template #footer>
-      <router-link :to="{ name: 'accountProfile' }" class="btn-blue flex items-center">
+      <router-link
+        :to="{ name: 'accountProfile' }"
+        class="btn-blue flex items-center"
+        data-cy="continue-button"
+      >
         {{ $t("general.next") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </router-link>
diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue
index be7e1ed4..4a0d780b 100644
--- a/client/src/pages/onboarding/AccountProfile.vue
+++ b/client/src/pages/onboarding/AccountProfile.vue
@@ -70,7 +70,9 @@ const nextRoute = computed(() => {
 <template>
   <WizardPage :step="1">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Profil ergänzen") }}</h2>
+      <h2 class="my-10" data-cy="account-profile-title">
+        {{ $t("a.Profil ergänzen") }}
+      </h2>
 
       <h3 class="mb-3">{{ $t("a.Gesellschaft") }}</h3>
 
@@ -120,6 +122,7 @@ const nextRoute = computed(() => {
           :disabled="!validOrganisation"
           class="btn-blue flex items-center"
           role="link"
+          data-cy="continue-button"
           @click="navigate"
         >
           {{ $t("general.next") }}
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 50f94aa8..6cc9cdc8 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -180,7 +180,9 @@ const executePayment = async () => {
 <template>
   <WizardPage :step="2">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Lehrgang kaufen") }}</h2>
+      <h2 class="my-10" data-cy="account-checkout-title">
+        {{ $t("a.Lehrgang kaufen") }}
+      </h2>
       <p class="mb-4">
         <i18next
           :translation="$t('a.Der Preis für den Lehrgang {course} beträgt {price}.')"
@@ -234,6 +236,7 @@ const executePayment = async () => {
       <button
         v-if="!useCompanyAddress"
         class="underline"
+        data-cy="add-company-address"
         @click="setUseCompanyAddress(true)"
       >
         <template v-if="userOrganisationName">
@@ -285,7 +288,7 @@ const executePayment = async () => {
         <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
         {{ $t("general.back") }}
       </router-link>
-      <button class="btn-blue flex items-center" @click="executePayment">
+      <button class="btn-blue flex items-center" data-cy="continue-pay" @click="executePayment">
         {{ $t("a.Mit Kreditkarte bezahlen") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </button>
diff --git a/client/src/pages/onboarding/vv/CheckoutComplete.vue b/client/src/pages/onboarding/vv/CheckoutComplete.vue
index cceb0a5d..bd8c2e8d 100644
--- a/client/src/pages/onboarding/vv/CheckoutComplete.vue
+++ b/client/src/pages/onboarding/vv/CheckoutComplete.vue
@@ -6,7 +6,7 @@ const user = useUserStore();
 
 <template>
   <div class="flex flex-grow flex-col items-center gap-y-8 p-16">
-    <h1 class="my-10">{{ $t("a.Gratuliere!") }}</h1>
+    <h1 class="my-10" data-cy="checkout-success-title">{{ $t("a.Gratuliere!") }}</h1>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="472"
@@ -43,7 +43,7 @@ const user = useUserStore();
         </template>
       </i18next>
     </p>
-    <router-link to="/" class="btn-blue flex items-center">
+    <router-link to="/" class="btn-blue flex items-center" data-cy="start-vv-button">
       {{ $t("a.Jetzt mit Lehrgang starten") }}
     </router-link>
   </div>
diff --git a/cypress/consts.js b/cypress/consts.js
index c10d4f95..43ef6b5b 100644
--- a/cypress/consts.js
+++ b/cypress/consts.js
@@ -1,8 +1,16 @@
 // ids for cypress test data
-export const ADMIN_USER_ID = "872efd96-3bd7-4a1e-a239-2d72cad9f604";
-export const TEST_TRAINER1_USER_ID = "b9e71f59-c44f-4290-b93a-9b3151e9a2fc";
-export const TEST_STUDENT1_USER_ID = "65c73ad0-6d53-43a9-a4a4-64143f27b03a";
-export const TEST_STUDENT2_USER_ID = "19c40d94-15cc-4198-aaad-ef707c4b0900";
+export const ADMIN_USER_ID = "872efd96-3bd7-4a1e-a239-2d72cad9f604"
+export const TEST_SUPERVISOR1_USER_ID = "a9a8b741-f115-4521-af2d-7dfef673b8c5"
+export const TEST_TRAINER1_USER_ID = "b9e71f59-c44f-4290-b93a-9b3151e9a2fc"
+export const TEST_TRAINER2_USER_ID = "299941ae-1e4b-4f45-8180-876c3ad340b4"
+export const TEST_STUDENT1_USER_ID = "65c73ad0-6d53-43a9-a4a4-64143f27b03a"
+export const TEST_STUDENT2_USER_ID = "19c40d94-15cc-4198-aaad-ef707c4b0900"
+export const TEST_STUDENT3_USER_ID = "bcf94dba-53bc-474b-a22d-e4af39aa042b"
+export const TEST_MENTOR1_USER_ID = "d1f5f5a9-5b0a-4e1a-9e1a-9e9b5b5e1b1b"
+export const TEST_STUDENT1_VV_USER_ID = "5ff59857-8de5-415e-a387-4449f9a0337a"
+export const TEST_STUDENT2_VV_AND_VV_MENTOR_USER_ID = "7e8ebf0b-e6e2-4022-88f4-6e663ba0a9db"
+export const TEST_USER_EMPTY_ID = "daecbabe-4ab9-4edf-a71f-4119042ccb02"
+
 
 export const TEST_COURSE_SESSION_BERN_ID = -1;
 export const TEST_COURSE_SESSION_ZURICH_ID = -2;
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
new file mode 100644
index 00000000..45c93c5f
--- /dev/null
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -0,0 +1,97 @@
+import { TEST_USER_EMPTY_ID } from "../../consts";
+import { login } from "../helpers";
+
+describe("checkout.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+
+    login("empty@example.com", "test");
+    cy.visit("/");
+  });
+
+  it("can register and buy Versicherungsvermittlerin with credit card", () => {
+    cy.get('[data-cy="start-vv"]').click();
+
+    // wähle "Deutsch"
+    cy.get('[href="/onboarding/vv-de/account/create"]').click();
+
+    cy.get('[data-cy="account-confirm-title"]').should(
+      "contain",
+      "Konto erstellen"
+    );
+    cy.get('[data-cy="continue-button"]').click();
+
+    cy.get('[data-cy="account-profile-title"]').should(
+      "contain",
+      "Profil ergänzen"
+    );
+    cy.get('[data-cy="dropdown-select"]').click();
+    cy.get('[data-cy="dropdown-select-option-Baloise"]').click();
+    cy.get('[data-cy="continue-button"]').click();
+
+    // Adressdaten ausfüllen
+    cy.get('[data-cy="account-checkout-title"]').should(
+      "contain",
+      "Lehrgang kaufen"
+    );
+    cy.get("#street-address").type("Eggersmatt");
+    cy.get("#street-number").type("32");
+    cy.get("#postal-code").type("1719");
+    cy.get("#city").type("Zumholz");
+    cy.get('[data-cy="add-company-address"]').click();
+
+    cy.get("#company-name").type("Iterativ GmbH");
+    cy.get("#company-street-address").type("Brückfeldstrasse");
+    cy.get("#company-street-number").type("16");
+    cy.get("#company-postal-code").type("3012");
+    cy.get("#company-city").type("Bern");
+
+    cy.get('[data-cy="continue-pay"]').click();
+
+    // check that results are stored on server
+    cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
+      expect(ci.first_name).to.equal("Flasche");
+      expect(ci.last_name).to.equal("Leer");
+
+      expect(ci.street).to.equal("Eggersmatt");
+      expect(ci.street_number).to.equal("32");
+      expect(ci.postal_code).to.equal("1719");
+      expect(ci.city).to.equal("Zumholz");
+      expect(ci.country).to.equal("CH");
+
+      expect(ci.invoice_address).to.equal("org");
+      expect(ci.organisation_detail_name).to.equal("Iterativ GmbH");
+      expect(ci.organisation_street).to.equal("Brückfeldstrasse");
+      expect(ci.organisation_street_number).to.equal("16");
+      expect(ci.organisation_postal_code).to.equal("3012");
+      expect(ci.organisation_city).to.equal("Bern");
+
+      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
+      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
+      expect(ci.product_price).to.equal(32400);
+
+      expect(ci.state).to.equal("ongoing");
+    });
+
+    // pay
+    cy.get('[data-cy="pay-button"]').click();
+
+    cy.get('[data-cy="checkout-success-title"]').should(
+      "contain",
+      "Gratuliere"
+    );
+    // wait for payment callback
+    cy.wait(3000);
+    cy.get('[data-cy="start-vv-button"]').click();
+
+    // back on dashboard page
+    cy.get('[data-cy="db-course-title"]').should(
+      "contain",
+      "Versicherungsvermittler"
+    );
+
+    cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
+      expect(ci.state).to.equal("paid");
+    });
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index a7d20f73..eaf772c1 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -133,7 +133,7 @@ Cypress.Commands.add("loadAssignmentCompletion", (key, value) => {
     key,
     value,
     "vbv_lernwelt.assignment.models.AssignmentCompletion",
-    "vbv_lernwelt.assignment.serializers.AssignmentCompletionSerializer",
+    "vbv_lernwelt.assignment.serializers.CypressAssignmentCompletionSerializer",
     true
   );
 });
@@ -148,6 +148,16 @@ Cypress.Commands.add("loadFeedbackResponse", (key, value) => {
   );
 });
 
+Cypress.Commands.add("loadCheckoutInformation", (key, value) => {
+  return loadObjectJson(
+    key,
+    value,
+    "vbv_lernwelt.shop.models.CheckoutInformation",
+    "vbv_lernwelt.shop.serializers.CypressCheckoutInformationSerializer",
+    true
+  );
+});
+
 Cypress.Commands.add("makeSelfEvaluation", (answers) => {
   for (let i = 0; i < answers.length; i++) {
     const answer = answers[i];
diff --git a/server/vbv_lernwelt/assignment/serializers.py b/server/vbv_lernwelt/assignment/serializers.py
index 18d27044..6ecb6dfd 100644
--- a/server/vbv_lernwelt/assignment/serializers.py
+++ b/server/vbv_lernwelt/assignment/serializers.py
@@ -3,7 +3,7 @@ from rest_framework import serializers
 from vbv_lernwelt.assignment.models import AssignmentCompletion
 
 
-class AssignmentCompletionSerializer(serializers.ModelSerializer):
+class CypressAssignmentCompletionSerializer(serializers.ModelSerializer):
     class Meta:
         model = AssignmentCompletion
         fields = [
diff --git a/server/vbv_lernwelt/shop/datatrans_fake_server.py b/server/vbv_lernwelt/shop/datatrans_fake_server.py
index 34fccb10..61680c60 100644
--- a/server/vbv_lernwelt/shop/datatrans_fake_server.py
+++ b/server/vbv_lernwelt/shop/datatrans_fake_server.py
@@ -88,8 +88,8 @@ def fake_datatrans_pay_view(request, api_url=""):
                       <label>failed</label>
                     </div>
                     <div>
-                      <button type="submit">
-                        Pay with selected Status
+                      <button type="submit" data-cy="pay-button">
+                        Pay with selected status
                       </button>
                     </div>
                   </fieldset>
diff --git a/server/vbv_lernwelt/shop/serializers.py b/server/vbv_lernwelt/shop/serializers.py
index 8b137891..f5af7184 100644
--- a/server/vbv_lernwelt/shop/serializers.py
+++ b/server/vbv_lernwelt/shop/serializers.py
@@ -1 +1,9 @@
+from rest_framework import serializers
 
+from vbv_lernwelt.shop.models import CheckoutInformation
+
+
+class CypressCheckoutInformationSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = CheckoutInformation
+        fields = "__all__"

From e776103eb72fc15d1717d1c7a8eab19dfaa23458 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 20 Jun 2024 16:25:28 +0200
Subject: [PATCH 02/19] Add new fields for cembra pay

---
 .../components/onboarding/PersonalAddress.vue | 35 +++++++++
 .../pages/onboarding/vv/CheckoutAddress.vue   | 72 ++++++++++++-------
 client/src/stores/user.ts                     |  2 +
 cypress/e2e/checkout-vv/checkout.cy.js        | 63 +++++++++++++++-
 .../config/settings/test_cypress_datatrans.py | 26 +++++++
 .../migrations/0010_auto_20240620_1625.py     | 23 ++++++
 server/vbv_lernwelt/core/models.py            |  4 ++
 server/vbv_lernwelt/core/serializers.py       |  2 +
 .../shop/datatrans_fake_server.py             |  8 +++
 .../migrations/0015_auto_cembra_fields.py     | 43 +++++++++++
 server/vbv_lernwelt/shop/models.py            |  8 +++
 server/vbv_lernwelt/shop/services.py          |  7 ++
 server/vbv_lernwelt/shop/views.py             | 43 +++++++++++
 13 files changed, 308 insertions(+), 28 deletions(-)
 create mode 100644 server/config/settings/test_cypress_datatrans.py
 create mode 100644 server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
 create mode 100644 server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index dfa85eac..233391a0 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -11,6 +11,9 @@ const props = defineProps<{
     postal_code: string;
     city: string;
     country_code: string;
+
+    phone_number: string;
+    birth_date: string;
   };
 }>();
 
@@ -163,5 +166,37 @@ const address = computed({
         </select>
       </div>
     </div>
+
+    <div class="col-span-full">
+      <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
+        {{ $t("a.Telefonnummer") }}
+      </label>
+      <div class="mt-2">
+        <input
+          id="phone"
+          v-model="address.phone_number"
+          type="text"
+          name="phone"
+          autocomplete="phone-number"
+          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+        />
+      </div>
+    </div>
+
+    <div class="col-span-full">
+      <label for="birth-date" class="block text-sm font-medium leading-6 text-gray-900">
+        {{ $t("a.Geburtsdatum") }}
+      </label>
+      <div class="mt-2">
+        <input
+          id="birth-date"
+          v-model="address.birth_date"
+          type="text"
+          name="phone"
+          autocomplete="birth-date"
+          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 6cc9cdc8..3b5b8049 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -9,6 +9,7 @@ import { useEntities } from "@/services/entities";
 import { useRoute } from "vue-router";
 import { useTranslation } from "i18next-vue";
 import { getVVCourseName } from "./composables";
+import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
 
 const props = defineProps({
   courseType: {
@@ -50,6 +51,10 @@ const address = ref({
   postal_code: user.postal_code,
   city: user.city,
   country_code: user.country?.country_code ?? "CH",
+
+  phone_number: user.phone_number,
+  birth_date: user.birth_date,
+
   organisation_detail_name: user.organisation_detail_name,
   organisation_street: user.organisation_street,
   organisation_street_number: user.organisation_street_number,
@@ -59,13 +64,15 @@ const address = ref({
   invoice_address: user.invoice_address ?? "prv",
 });
 
-const useCompanyAddress = ref(user.invoice_address === "org");
+const withCompanyAddress = ref(user.invoice_address === "org");
 
-const setUseCompanyAddress = (value: boolean) => {
-  useCompanyAddress.value = value;
+const setWithCompanyAddress = (value: boolean) => {
+  withCompanyAddress.value = value;
   address.value.invoice_address = value ? "org" : "prv";
 };
 
+const withCembraInvoice = ref<boolean>(false);
+
 type FormErrors = {
   personal: string[];
   company: string[];
@@ -110,7 +117,7 @@ function validateAddress() {
     formErrors.value.personal.push(t("a.Land"));
   }
 
-  if (useCompanyAddress.value) {
+  if (withCompanyAddress.value) {
     if (!address.value.organisation_detail_name) {
       formErrors.value.company.push(t("a.Name"));
     }
@@ -170,6 +177,7 @@ const executePayment = async () => {
     redirect_url: fullHost,
     address: address.value,
     product: props.courseType,
+    with_cembra_invoice: withCembraInvoice.value,
   }).then((res: any) => {
     console.log("Going to next page", res.next_step_url);
     window.location.href = res.next_step_url;
@@ -228,26 +236,34 @@ const executePayment = async () => {
       </p>
       <PersonalAddress v-model="address" />
 
-      <p v-if="formErrors.personal.length" class="mb-10 text-red-700">
-        {{ $t("a.Bitte folgende Felder ausfüllen") }}:
-        {{ formErrors.personal.join(", ") }}
-      </p>
+      <div class="flex flex-row items-center space-x-2 text-sm">
+        <ItToggleSwitch
+          data-cy="cembra-switch"
+          :initially-switched-left="withCembraInvoice"
+          @click="withCembraInvoice = !withCembraInvoice"
+        ></ItToggleSwitch>
+        <span :class="{ 'text-gray-700': !withCembraInvoice }">
+          "TODO: Zahlung auf Rechnung/Cembra"
+        </span>
+      </div>
 
-      <button
-        v-if="!useCompanyAddress"
-        class="underline"
-        data-cy="add-company-address"
-        @click="setUseCompanyAddress(true)"
-      >
-        <template v-if="userOrganisationName">
-          {{
-            $t("a.Rechnungsadresse von {organisation} hinzufügen", {
-              organisation: userOrganisationName,
-            })
-          }}
-        </template>
-        <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
-      </button>
+      <div class="mt-4">
+        <button
+          v-if="!withCompanyAddress"
+          class="underline"
+          data-cy="add-company-address"
+          @click="setWithCompanyAddress(true)"
+        >
+          <template v-if="userOrganisationName">
+            {{
+              $t("a.Rechnungsadresse von {organisation} hinzufügen", {
+                organisation: userOrganisationName,
+              })
+            }}
+          </template>
+          <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
+        </button>
+      </div>
 
       <transition
         enter-active-class="transition ease-out duration-100"
@@ -257,7 +273,7 @@ const executePayment = async () => {
         leave-from-class="transform opacity-100 scale-y-100"
         leave-to-class="transform opacity-0 scale-y-95"
       >
-        <div v-if="useCompanyAddress">
+        <div v-if="withCompanyAddress">
           <div class="flex items-center justify-between">
             <h3 v-if="userOrganisationName">
               {{
@@ -267,7 +283,7 @@ const executePayment = async () => {
               }}
             </h3>
             <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
-            <button class="underline" @click="setUseCompanyAddress(false)">
+            <button class="underline" @click="setWithCompanyAddress(false)">
               {{ $t("a.Entfernen") }}
             </button>
           </div>
@@ -288,7 +304,11 @@ const executePayment = async () => {
         <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
         {{ $t("general.back") }}
       </router-link>
-      <button class="btn-blue flex items-center" data-cy="continue-pay" @click="executePayment">
+      <button
+        class="btn-blue flex items-center"
+        data-cy="continue-pay"
+        @click="executePayment"
+      >
         {{ $t("a.Mit Kreditkarte bezahlen") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </button>
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index 306ed152..4436c7b6 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -36,6 +36,8 @@ export interface User {
   postal_code: string;
   city: string;
   country: Country | null;
+  birth_date: string;
+  phone_number: string;
   organisation_detail_name: string;
   organisation_street: string;
   organisation_street_number: string;
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 45c93c5f..41006853 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -9,7 +9,7 @@ describe("checkout.cy.js", () => {
     cy.visit("/");
   });
 
-  it("can register and buy Versicherungsvermittlerin with credit card", () => {
+  it("can checkout and buy Versicherungsvermittlerin with credit card", () => {
     cy.get('[data-cy="start-vv"]').click();
 
     // wähle "Deutsch"
@@ -66,7 +66,6 @@ describe("checkout.cy.js", () => {
       expect(ci.organisation_postal_code).to.equal("3012");
       expect(ci.organisation_city).to.equal("Bern");
 
-      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
       expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
       expect(ci.product_price).to.equal(32400);
 
@@ -94,4 +93,64 @@ describe("checkout.cy.js", () => {
       expect(ci.state).to.equal("paid");
     });
   });
+
+  it.only("can checkout and pay Versicherungsvermittlerin with Cembra invoice", () => {
+    cy.get('[data-cy="start-vv"]').click();
+
+    // wähle "Deutsch"
+    cy.get('[href="/onboarding/vv-de/account/create"]').click();
+
+    cy.get('[data-cy="account-confirm-title"]').should(
+      "contain",
+      "Konto erstellen"
+    );
+    cy.get('[data-cy="continue-button"]').click();
+
+    cy.get('[data-cy="account-profile-title"]').should(
+      "contain",
+      "Profil ergänzen"
+    );
+    cy.get('[data-cy="dropdown-select"]').click();
+    cy.get('[data-cy="dropdown-select-option-Baloise"]').click();
+    cy.get('[data-cy="continue-button"]').click();
+
+    // Adressdaten ausfüllen
+    cy.get('[data-cy="account-checkout-title"]').should(
+      "contain",
+      "Lehrgang kaufen"
+    );
+    cy.get("#street-address").type("Eggersmatt");
+    cy.get("#street-number").type("32");
+    cy.get("#postal-code").type("1719");
+    cy.get("#city").type("Zumholz");
+
+    cy.get("#phone").type("+41 79 201 85 86");
+    cy.get("#birth-date").type("1982-06-09");
+
+    cy.get('[data-cy="cembra-switch"]').click();
+
+    cy.get('[data-cy="continue-pay"]').click();
+
+    // check that results are stored on server
+    cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
+      expect(ci.first_name).to.equal("Flasche");
+      expect(ci.last_name).to.equal("Leer");
+
+      expect(ci.street).to.equal("Eggersmatt");
+      expect(ci.street_number).to.equal("32");
+      expect(ci.postal_code).to.equal("1719");
+      expect(ci.city).to.equal("Zumholz");
+      expect(ci.country).to.equal("CH");
+      expect(ci.phone_number).to.equal("+41 79 201 85 86");
+      expect(ci.birth_date).to.equal("1982-06-09");
+      expect(ci.cembra_invoice).to.be.true;
+
+      expect(ci.invoice_address).to.equal("prv");
+
+      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
+      expect(ci.product_price).to.equal(32400);
+
+      expect(ci.state).to.equal("ongoing");
+    });
+  });
 });
diff --git a/server/config/settings/test_cypress_datatrans.py b/server/config/settings/test_cypress_datatrans.py
new file mode 100644
index 00000000..c87bf278
--- /dev/null
+++ b/server/config/settings/test_cypress_datatrans.py
@@ -0,0 +1,26 @@
+# pylint: disable=unused-wildcard-import,wildcard-import,wrong-import-position
+import os
+
+from dotenv import dotenv_values
+
+script_path = os.path.abspath(__file__)
+script_dir = os.path.dirname(script_path)
+
+dev_env = dotenv_values(f"{script_dir}/../../../env_secrets/caprover_vbv-develop.env")
+
+os.environ["IT_APP_ENVIRONMENT"] = "local"
+
+os.environ["AWS_S3_SECRET_ACCESS_KEY"] = dev_env.get("AWS_S3_SECRET_ACCESS_KEY")
+os.environ["DATATRANS_BASIC_AUTH_KEY"] = dev_env.get("DATATRANS_BASIC_AUTH_KEY")
+os.environ["DATATRANS_HMAC_KEY"] = dev_env.get("DATATRANS_HMAC_KEY")
+
+os.environ["IT_APP_ENVIRONMENT"] = "local"
+os.environ["AWS_S3_SECRET_ACCESS_KEY"] = os.environ.get(
+    "AWS_S3_SECRET_ACCESS_KEY",
+    "!!!default_for_quieting_cypress_within_pycharm!!!",
+)
+
+from .test_cypress import *  # noqa
+
+DATATRANS_API_ENDPOINT = "https://api.sandbox.datatrans.com"
+DATATRANS_PAY_URL = "https://pay.sandbox.datatrans.com"
diff --git a/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py b/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
new file mode 100644
index 00000000..dfafcf04
--- /dev/null
+++ b/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.20 on 2024-06-20 14:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0009_country_refactor'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='birth_date',
+            field=models.DateField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='phone_number',
+            field=models.CharField(blank=True, default='', max_length=255),
+        ),
+    ]
diff --git a/server/vbv_lernwelt/core/models.py b/server/vbv_lernwelt/core/models.py
index 781affb5..d1af6853 100644
--- a/server/vbv_lernwelt/core/models.py
+++ b/server/vbv_lernwelt/core/models.py
@@ -111,6 +111,10 @@ class User(AbstractUser):
         blank=True,
     )
 
+    # fields gathered from cembra pay form
+    birth_date = models.DateField(null=True, blank=True)
+    phone_number = models.CharField(max_length=255, blank=True, default="")
+
     # is only set by abacus invoice export code
     abacus_debitor_number = models.BigIntegerField(unique=True, null=True, blank=True)
 
diff --git a/server/vbv_lernwelt/core/serializers.py b/server/vbv_lernwelt/core/serializers.py
index 435ed187..b1cd79df 100644
--- a/server/vbv_lernwelt/core/serializers.py
+++ b/server/vbv_lernwelt/core/serializers.py
@@ -69,6 +69,8 @@ class UserSerializer(serializers.ModelSerializer):
             "postal_code",
             "city",
             "country",
+            "phone_number",
+            "birth_date",
             "organisation_detail_name",
             "organisation_street",
             "organisation_street_number",
diff --git a/server/vbv_lernwelt/shop/datatrans_fake_server.py b/server/vbv_lernwelt/shop/datatrans_fake_server.py
index 61680c60..cbbd8146 100644
--- a/server/vbv_lernwelt/shop/datatrans_fake_server.py
+++ b/server/vbv_lernwelt/shop/datatrans_fake_server.py
@@ -6,6 +6,7 @@ import time
 
 import requests
 from django.conf import settings
+from django.db import transaction
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import redirect
 from django.views.decorators.csrf import csrf_exempt
@@ -16,12 +17,19 @@ from vbv_lernwelt.core.models import User
 
 @csrf_exempt
 @django_view_authentication_exempt
+@transaction.non_atomic_requests
 def fake_datatrans_api_view(request, api_url=""):
     if api_url == "/v1/transactions" and request.method == "POST":
         data = json.loads(request.body.decode("utf-8"))
         user = User.objects.get(id=data["user_id"])
+
+        if "customer" in data and not user.abacus_debitor_number:
+            user.set_increment_abacus_debitor_number()
+            data["customer"]["id"] = user.abacus_debitor_number
+
         user.additional_json_data["datatrans_transaction_payload"] = data
         user.save()
+
         return JsonResponse({"transactionId": data["refno"]}, status=201)
 
     return HttpResponse(
diff --git a/server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py b/server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py
new file mode 100644
index 00000000..6de9f51a
--- /dev/null
+++ b/server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py
@@ -0,0 +1,43 @@
+# Generated by Django 3.2.20 on 2024-06-21 08:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('shop', '0014_checkoutinformation_abacus_ssh_upload_done'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='birth_date',
+            field=models.DateField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='cembra_invoice',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='device_fingerprint',
+            field=models.TextField(blank=True, default=''),
+        ),
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='email',
+            field=models.CharField(blank=True, default='', max_length=255),
+        ),
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='ip_address',
+            field=models.CharField(blank=True, default='', max_length=255),
+        ),
+        migrations.AddField(
+            model_name='checkoutinformation',
+            name='phone_number',
+            field=models.CharField(blank=True, default='', max_length=255),
+        ),
+    ]
diff --git a/server/vbv_lernwelt/shop/models.py b/server/vbv_lernwelt/shop/models.py
index af987a6e..84bd177b 100644
--- a/server/vbv_lernwelt/shop/models.py
+++ b/server/vbv_lernwelt/shop/models.py
@@ -78,6 +78,14 @@ class CheckoutInformation(models.Model):
         blank=True,
     )
 
+    # optional fields for cembra payment
+    cembra_invoice = models.BooleanField(default=False)
+    birth_date = models.DateField(null=True, blank=True)
+    phone_number = models.CharField(max_length=255, blank=True, default="")
+    email = models.CharField(max_length=255, blank=True, default="")
+    device_fingerprint = models.TextField(blank=True, default="")
+    ip_address = models.CharField(max_length=255, blank=True, default="")
+
     invoice_address = models.CharField(
         max_length=3, choices=INVOICE_ADDRESS_CHOICES, default="prv"
     )
diff --git a/server/vbv_lernwelt/shop/services.py b/server/vbv_lernwelt/shop/services.py
index a5aaef4d..20c1aee8 100644
--- a/server/vbv_lernwelt/shop/services.py
+++ b/server/vbv_lernwelt/shop/services.py
@@ -52,6 +52,8 @@ def init_datatrans_transaction(
     redirect_url_error: str,
     redirect_url_cancel: str,
     webhook_url: str,
+    datatrans_customer_data: dict = None,
+    datatrans_int_data: dict = None,
 ):
     payload = {
         # We use autoSettle=True, so that we don't have to settle the transaction:
@@ -69,6 +71,11 @@ def init_datatrans_transaction(
         },
     }
 
+    if datatrans_customer_data:
+        payload["customer"] = datatrans_customer_data
+    if datatrans_int_data:
+        payload["INT"] = datatrans_int_data
+
     # add testing configuration data
     if "fakeapi" in settings.DATATRANS_API_ENDPOINT:
         payload["user_id"] = str(user.id)
diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index e170cc5c..7d758e24 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -1,3 +1,5 @@
+from datetime import date
+
 import structlog
 from django.conf import settings
 from django.http import JsonResponse
@@ -106,7 +108,40 @@ def checkout_vv(request):
     if checkouts.filter(state=CheckoutState.PAID).exists():
         return next_step_response(url="/")
 
+    with_cembra_invoice = request.data.get("with_cembra_invoice", False)
+    ip_address = request.META.get("REMOTE_ADDR")
+    email = request.user.email
+
     try:
+        datatrans_customer_data = None
+        datatrans_int_data = None
+        if with_cembra_invoice:
+
+            if "fakeapi" not in settings.DATATRANS_API_ENDPOINT:
+                request.user.set_increment_abacus_debitor_number()
+
+            # see https://api-reference.datatrans.ch/#tag/v1transactions as reference
+            datatrans_customer_data = {
+                "firstName": request.user.first_name,
+                "lastName": request.user.last_name,
+                "id": request.user.abacus_debitor_number,
+                "street": f'{request.data["address"]["street"]} {request.data["address"]["street_number"]}',
+                "city": request.data["address"]["city"],
+                "zipCode": request.data["address"]["postal_code"],
+                "country": request.data["address"]["country_code"],
+                "phone": request.data["address"]["phone_number"],
+                "email": email,
+                "birthDate": request.data["address"]["birth_date"],
+                "language": request.user.language,
+                "ipAddress": ip_address,
+                "type": "P",
+            }
+            datatrans_int_data = {
+                "subtype": "INVOICE",
+                "riskOwner": "IJ",
+                "repaymentType": 3,
+                "deviceFingerprintId": "TODO",
+            }
         transaction_id = init_datatrans_transaction(
             user=request.user,
             amount_chf_centimes=product.price,
@@ -118,6 +153,8 @@ def checkout_vv(request):
             ),
             redirect_url_cancel=checkout_cancel_url(base_redirect_url),
             webhook_url=webhook_url(base_redirect_url),
+            datatrans_customer_data=datatrans_customer_data,
+            datatrans_int_data=datatrans_int_data,
         )
     except InitTransactionException as e:
         if not settings.DEBUG:
@@ -138,6 +175,9 @@ def checkout_vv(request):
         organisation_country_code = address_data.pop("organisation_country_code")
     address_data["organisation_country_id"] = organisation_country_code
 
+    if "birth_date" in address_data and address_data["birth_date"]:
+        address_data["birth_date"] = date.fromisoformat(address_data["birth_date"])
+
     checkout_info = CheckoutInformation.objects.create(
         user=request.user,
         state=CheckoutState.ONGOING,
@@ -147,6 +187,9 @@ def checkout_vv(request):
         product_price=product.price,
         product_name=product.name,
         product_description=product.description,
+        email=email,
+        ip_address=ip_address,
+        cembra_invoice=with_cembra_invoice,
         # address
         **request.data["address"],
     )

From b6e4f30b58af1ccd7a899698968e2656d74d4947 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Jun 2024 12:01:03 +0200
Subject: [PATCH 03/19] Add device fingerprint code

---
 .../DatatransCembraDeviceFingerprint.vue      | 47 +++++++++++++++++++
 client/src/main.ts                            |  3 ++
 .../pages/onboarding/vv/CheckoutAddress.vue   |  4 ++
 client/src/statistics.ts                      | 46 ++++++++++++++++++
 cypress/e2e/checkout-vv/checkout.cy.js        |  7 ++-
 ...cembra_fields.py => 0015_cembra_fields.py} |  6 +--
 server/vbv_lernwelt/shop/models.py            |  4 +-
 server/vbv_lernwelt/shop/views.py             |  3 +-
 8 files changed, 113 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
 create mode 100644 client/src/statistics.ts
 rename server/vbv_lernwelt/shop/migrations/{0015_auto_cembra_fields.py => 0015_cembra_fields.py} (87%)

diff --git a/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue b/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
new file mode 100644
index 00000000..3ff87c27
--- /dev/null
+++ b/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
@@ -0,0 +1,47 @@
+<template>
+  <div ref="scriptContainer"></div>
+  <noscript>
+    <iframe
+      :src="iframeSrc"
+      style="width: 100px; height: 100px; border: 0; position: absolute; top: -5000px"
+    ></iframe>
+  </noscript>
+</template>
+
+<script>
+import { ref, computed, onMounted } from "vue";
+import { getLocalSessionKey } from "@/statistics";
+
+export default {
+  // code needed for Datatrans/Cembra device fingerprinting
+  setup() {
+    const scriptContainer = ref(null);
+    const sessionId = getLocalSessionKey();
+
+    const iframeSrc = computed(() => {
+      return `https://h.online-metrix.net/tags?org_id=lq866c5i&session_id=${sessionId}`;
+    });
+
+    const insertScript = () => {
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = `https://h.online-metrix.net/fp/tags.js?org_id=lq866c5i&session_id=${sessionId}`;
+      if (scriptContainer.value) {
+        scriptContainer.value.appendChild(script);
+      }
+    };
+
+    onMounted(() => {
+      insertScript();
+    });
+
+    return {
+      scriptContainer,
+      iframeSrc,
+    };
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/client/src/main.ts b/client/src/main.ts
index 84ad3781..900b094d 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -9,6 +9,7 @@ import type { Router } from "vue-router";
 import "../tailwind.css";
 import App from "./App.vue";
 import router from "./router";
+import { generateLocalSessionKey } from "@/statistics";
 
 declare module "pinia" {
   export interface PiniaCustomProperties {
@@ -24,6 +25,8 @@ if (appEnv.startsWith("prod")) {
   log.setLevel("trace");
 }
 
+generateLocalSessionKey();
+
 const commit = "VBV_VERSION_BUILD_NUMBER_VBV";
 log.warn(`application started appEnv=${appEnv}, build=${commit}`);
 
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 3b5b8049..ad72cc85 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -10,6 +10,8 @@ import { useRoute } from "vue-router";
 import { useTranslation } from "i18next-vue";
 import { getVVCourseName } from "./composables";
 import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
+import DatatransCembraDeviceFingerprint from "@/components/onboarding/DatatransCembraDeviceFingerprint.vue";
+import { getLocalSessionKey } from "@/statistics";
 
 const props = defineProps({
   courseType: {
@@ -178,6 +180,7 @@ const executePayment = async () => {
     address: address.value,
     product: props.courseType,
     with_cembra_invoice: withCembraInvoice.value,
+    device_fingerprint_session_key: getLocalSessionKey(),
   }).then((res: any) => {
     console.log("Going to next page", res.next_step_url);
     window.location.href = res.next_step_url;
@@ -188,6 +191,7 @@ const executePayment = async () => {
 <template>
   <WizardPage :step="2">
     <template #content>
+      <DatatransCembraDeviceFingerprint v-if="withCembraInvoice" />
       <h2 class="my-10" data-cy="account-checkout-title">
         {{ $t("a.Lehrgang kaufen") }}
       </h2>
diff --git a/client/src/statistics.ts b/client/src/statistics.ts
new file mode 100644
index 00000000..58a7245d
--- /dev/null
+++ b/client/src/statistics.ts
@@ -0,0 +1,46 @@
+let statisticsLocalSessionKey = "";
+let statisticsLocalSessionRef = "";
+
+export function uuidv4() {
+  // copied from https://stackoverflow.com/a/2117523/669561
+  // @ts-ignore
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+  );
+}
+
+export function getLocalSessionKey() {
+  return (
+    window.sessionStorage.getItem("statisticsLocalSessionKey") ||
+    statisticsLocalSessionKey ||
+    ""
+  );
+}
+
+export function generateLocalSessionKey() {
+  let localSessionKey =
+    window.sessionStorage.getItem("statisticsLocalSessionKey") ||
+    statisticsLocalSessionKey;
+  if (!localSessionKey) {
+    localSessionKey = uuidv4();
+  }
+  statisticsLocalSessionKey = localSessionKey;
+  window.sessionStorage.setItem("statisticsLocalSessionKey", localSessionKey);
+
+  return localSessionKey;
+}
+
+export function getLocalSessionRef() {
+  return (
+    window.sessionStorage.getItem("statisticsLocalSessionRef") ||
+    statisticsLocalSessionRef ||
+    ""
+  );
+}
+
+export function setLocalSessionRef(sessionRef: string) {
+  if (sessionRef) {
+    statisticsLocalSessionRef = sessionRef;
+    window.sessionStorage.setItem("statisticsLocalSessionRef", sessionRef);
+  }
+}
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 41006853..8a480d85 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -119,6 +119,8 @@ describe("checkout.cy.js", () => {
       "contain",
       "Lehrgang kaufen"
     );
+    cy.get('[data-cy="cembra-switch"]').click();
+
     cy.get("#street-address").type("Eggersmatt");
     cy.get("#street-number").type("32");
     cy.get("#postal-code").type("1719");
@@ -127,8 +129,6 @@ describe("checkout.cy.js", () => {
     cy.get("#phone").type("+41 79 201 85 86");
     cy.get("#birth-date").type("1982-06-09");
 
-    cy.get('[data-cy="cembra-switch"]').click();
-
     cy.get('[data-cy="continue-pay"]').click();
 
     // check that results are stored on server
@@ -151,6 +151,9 @@ describe("checkout.cy.js", () => {
       expect(ci.product_price).to.equal(32400);
 
       expect(ci.state).to.equal("ongoing");
+
+      expect(ci.ip_address).to.not.be.empty;
+      expect(ci.device_fingerprint_session_key).to.not.be.empty;
     });
   });
 });
diff --git a/server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
similarity index 87%
rename from server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py
rename to server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
index 6de9f51a..06fa2a94 100644
--- a/server/vbv_lernwelt/shop/migrations/0015_auto_cembra_fields.py
+++ b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.2.20 on 2024-06-21 08:47
+# Generated by Django 3.2.20 on 2024-06-21 09:54
 
 from django.db import migrations, models
 
@@ -22,8 +22,8 @@ class Migration(migrations.Migration):
         ),
         migrations.AddField(
             model_name='checkoutinformation',
-            name='device_fingerprint',
-            field=models.TextField(blank=True, default=''),
+            name='device_fingerprint_session_key',
+            field=models.CharField(blank=True, default='', max_length=255),
         ),
         migrations.AddField(
             model_name='checkoutinformation',
diff --git a/server/vbv_lernwelt/shop/models.py b/server/vbv_lernwelt/shop/models.py
index 84bd177b..0bd11045 100644
--- a/server/vbv_lernwelt/shop/models.py
+++ b/server/vbv_lernwelt/shop/models.py
@@ -83,7 +83,9 @@ class CheckoutInformation(models.Model):
     birth_date = models.DateField(null=True, blank=True)
     phone_number = models.CharField(max_length=255, blank=True, default="")
     email = models.CharField(max_length=255, blank=True, default="")
-    device_fingerprint = models.TextField(blank=True, default="")
+    device_fingerprint_session_key = models.CharField(
+        max_length=255, blank=True, default=""
+    )
     ip_address = models.CharField(max_length=255, blank=True, default="")
 
     invoice_address = models.CharField(
diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index 7d758e24..485afbaa 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -140,7 +140,7 @@ def checkout_vv(request):
                 "subtype": "INVOICE",
                 "riskOwner": "IJ",
                 "repaymentType": 3,
-                "deviceFingerprintId": "TODO",
+                "deviceFingerprintId": request.data["device_fingerprint_session_key"],
             }
         transaction_id = init_datatrans_transaction(
             user=request.user,
@@ -190,6 +190,7 @@ def checkout_vv(request):
         email=email,
         ip_address=ip_address,
         cembra_invoice=with_cembra_invoice,
+        device_fingerprint_session_key=request.data["device_fingerprint_session_key"],
         # address
         **request.data["address"],
     )

From 42fd2f13774a9c55c760d17652088268d9dbcb42 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Jun 2024 13:29:09 +0200
Subject: [PATCH 04/19] Add logic/validation for cembra fields

---
 .../pages/onboarding/vv/CheckoutAddress.vue   | 123 +++++++++++-------
 1 file changed, 79 insertions(+), 44 deletions(-)

diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index ad72cc85..6dc7676b 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -75,6 +75,13 @@ const setWithCompanyAddress = (value: boolean) => {
 
 const withCembraInvoice = ref<boolean>(false);
 
+function toggleCembraInvoice() {
+  withCembraInvoice.value = !withCembraInvoice.value;
+  if (!withCembraInvoice.value) {
+    setWithCompanyAddress(false);
+  }
+}
+
 type FormErrors = {
   personal: string[];
   company: string[];
@@ -119,6 +126,16 @@ function validateAddress() {
     formErrors.value.personal.push(t("a.Land"));
   }
 
+  if (withCembraInvoice.value) {
+    if (!address.value.phone_number) {
+      formErrors.value.personal.push(t("a.Telefonnummer"));
+    }
+
+    if (!address.value.birth_date) {
+      formErrors.value.personal.push(t("a.Geburtsdatum"));
+    }
+  }
+
   if (withCompanyAddress.value) {
     if (!address.value.organisation_detail_name) {
       formErrors.value.company.push(t("a.Name"));
@@ -240,64 +257,77 @@ const executePayment = async () => {
       </p>
       <PersonalAddress v-model="address" />
 
+      <p v-if="formErrors.personal.length" class="mb-10 text-red-700">
+        {{ $t("a.Bitte folgende Felder ausfüllen") }}:
+        {{ formErrors.personal.join(", ") }}
+      </p>
+
       <div class="flex flex-row items-center space-x-2 text-sm">
         <ItToggleSwitch
           data-cy="cembra-switch"
           :initially-switched-left="withCembraInvoice"
-          @click="withCembraInvoice = !withCembraInvoice"
+          @click="toggleCembraInvoice()"
         ></ItToggleSwitch>
         <span :class="{ 'text-gray-700': !withCembraInvoice }">
           "TODO: Zahlung auf Rechnung/Cembra"
         </span>
       </div>
 
-      <div class="mt-4">
-        <button
-          v-if="!withCompanyAddress"
-          class="underline"
-          data-cy="add-company-address"
-          @click="setWithCompanyAddress(true)"
-        >
-          <template v-if="userOrganisationName">
-            {{
-              $t("a.Rechnungsadresse von {organisation} hinzufügen", {
-                organisation: userOrganisationName,
-              })
-            }}
-          </template>
-          <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
-        </button>
-      </div>
-
-      <transition
-        enter-active-class="transition ease-out duration-100"
-        enter-from-class="transform opacity-0 scale-y-95"
-        enter-to-class="transform opacity-100 scale-y-100"
-        leave-active-class="transition ease-in duration-75"
-        leave-from-class="transform opacity-100 scale-y-100"
-        leave-to-class="transform opacity-0 scale-y-95"
-      >
-        <div v-if="withCompanyAddress">
-          <div class="flex items-center justify-between">
-            <h3 v-if="userOrganisationName">
+      <section v-if="withCembraInvoice">
+        <p class="mt-4">
+          TODO: Bei Zahlung auf Rechnung/Cembra, wird immer auf deine Privatadresse
+          verrechnet. Du musst zwinged deine Telefonnummer und Geburtsdatum angeben.
+        </p>
+      </section>
+      <section v-else>
+        <div class="mt-4">
+          <button
+            v-if="!withCompanyAddress"
+            class="underline"
+            data-cy="add-company-address"
+            @click="setWithCompanyAddress(true)"
+          >
+            <template v-if="userOrganisationName">
               {{
-                $t("a.Rechnungsadresse von {organisation}", {
+                $t("a.Rechnungsadresse von {organisation} hinzufügen", {
                   organisation: userOrganisationName,
                 })
               }}
-            </h3>
-            <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
-            <button class="underline" @click="setWithCompanyAddress(false)">
-              {{ $t("a.Entfernen") }}
-            </button>
-          </div>
-          <OrganisationAddress v-model="address" />
-          <p v-if="formErrors.company.length" class="text-red-700">
-            {{ $t("a.Bitte folgende Felder ausfüllen") }}:
-            {{ formErrors.company.join(", ") }}
-          </p>
+            </template>
+            <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
+          </button>
         </div>
-      </transition>
+
+        <transition
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-y-95"
+          enter-to-class="transform opacity-100 scale-y-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-y-100"
+          leave-to-class="transform opacity-0 scale-y-95"
+        >
+          <div v-if="withCompanyAddress">
+            <div class="flex items-center justify-between">
+              <h3 v-if="userOrganisationName">
+                {{
+                  $t("a.Rechnungsadresse von {organisation}", {
+                    organisation: userOrganisationName,
+                  })
+                }}
+              </h3>
+              <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
+              <button class="underline" @click="setWithCompanyAddress(false)">
+                {{ $t("a.Entfernen") }}
+              </button>
+            </div>
+            <OrganisationAddress v-model="address" />
+            <p v-if="formErrors.company.length" class="text-red-700">
+              {{ $t("a.Bitte folgende Felder ausfüllen") }}:
+              {{ formErrors.company.join(", ") }}
+            </p>
+          </div>
+        </transition>
+      </section>
     </template>
 
     <template #footer>
@@ -313,7 +343,12 @@ const executePayment = async () => {
         data-cy="continue-pay"
         @click="executePayment"
       >
-        {{ $t("a.Mit Kreditkarte bezahlen") }}
+        <template v-if="withCembraInvoice">
+          TODO: Mit Rechnung/Cembra bezahlen
+        </template>
+        <template v-else>
+          {{ $t("a.Mit Kreditkarte bezahlen") }}
+        </template>
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </button>
     </template>

From b9f8e5d7712a68e3b97291b2248a7d8732ae18cf Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Jun 2024 14:18:59 +0200
Subject: [PATCH 05/19] Handle phone numbers

---
 .../pages/onboarding/vv/CheckoutAddress.vue   | 20 ++++--
 client/src/utils/__tests__/phone.spec.ts      | 58 ++++++++++++++++
 client/src/utils/phone.ts                     | 69 +++++++++++++++++++
 cypress/e2e/checkout-vv/checkout.cy.js        |  4 +-
 4 files changed, 145 insertions(+), 6 deletions(-)
 create mode 100644 client/src/utils/__tests__/phone.spec.ts
 create mode 100644 client/src/utils/phone.ts

diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 6dc7676b..952d96d0 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -12,6 +12,8 @@ import { getVVCourseName } from "./composables";
 import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
 import DatatransCembraDeviceFingerprint from "@/components/onboarding/DatatransCembraDeviceFingerprint.vue";
 import { getLocalSessionKey } from "@/statistics";
+import log from "loglevel";
+import { normalizeSwissPhoneNumber, validatePhoneNumber } from "@/utils/phone";
 
 const props = defineProps({
   courseType: {
@@ -126,6 +128,14 @@ function validateAddress() {
     formErrors.value.personal.push(t("a.Land"));
   }
 
+  if (address.value.phone_number) {
+    const normalizedPhoneNumber = normalizeSwissPhoneNumber(address.value.phone_number);
+    log.debug("normalizedPhoneNumber", normalizedPhoneNumber);
+    if (!validatePhoneNumber(normalizedPhoneNumber)) {
+      formErrors.value.personal.push(t("a.Telefonnummer hat das falsche Format"));
+    }
+  }
+
   if (withCembraInvoice.value) {
     if (!address.value.phone_number) {
       formErrors.value.personal.push(t("a.Telefonnummer"));
@@ -164,7 +174,8 @@ function validateAddress() {
 }
 
 async function saveAddress() {
-  const { country_code, organisation_country_code, ...profileData } = address.value;
+  const { country_code, organisation_country_code, phone_number, ...profileData } =
+    address.value;
   const typedProfileData: Partial<User> = { ...profileData };
 
   typedProfileData.country = countries.value.find(
@@ -173,6 +184,7 @@ async function saveAddress() {
   typedProfileData.organisation_country = countries.value.find(
     (c) => c.country_code === organisation_country_code
   );
+  typedProfileData.phone_number = normalizeSwissPhoneNumber(phone_number);
 
   await user.updateUserProfile(typedProfileData);
 }
@@ -192,6 +204,8 @@ const executePayment = async () => {
   // anyway, so it seems fine to do it here.
   const fullHost = `${window.location.protocol}//${window.location.host}`;
 
+  address.value.phone_number = normalizeSwissPhoneNumber(address.value.phone_number);
+
   itPost("/api/shop/vv/checkout/", {
     redirect_url: fullHost,
     address: address.value,
@@ -343,9 +357,7 @@ const executePayment = async () => {
         data-cy="continue-pay"
         @click="executePayment"
       >
-        <template v-if="withCembraInvoice">
-          TODO: Mit Rechnung/Cembra bezahlen
-        </template>
+        <template v-if="withCembraInvoice">TODO: Mit Rechnung/Cembra bezahlen</template>
         <template v-else>
           {{ $t("a.Mit Kreditkarte bezahlen") }}
         </template>
diff --git a/client/src/utils/__tests__/phone.spec.ts b/client/src/utils/__tests__/phone.spec.ts
new file mode 100644
index 00000000..62aef4cb
--- /dev/null
+++ b/client/src/utils/__tests__/phone.spec.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { normalizeSwissPhoneNumber, validatePhoneNumber } from "../phone";
+
+describe("normalizeSwissPhoneNumber", () => {
+  it("should normalize a Swiss phone number", () => {
+    expect(normalizeSwissPhoneNumber("079 123 45 67")).toBe("+41791234567");
+    expect(normalizeSwissPhoneNumber("00 41 79 123 45 67")).toBe("+41791234567");
+    expect(normalizeSwissPhoneNumber("+41 (0)79 201 85 86")).toBe("+41792018586");
+    expect(normalizeSwissPhoneNumber("+41 79 201 85 86")).toBe("+41792018586");
+  });
+
+  it("should normalize remove spaces and special chars from foreign numbers", () => {
+    expect(normalizeSwissPhoneNumber("+49 30 12345678")).toBe("+493012345678");
+    expect(normalizeSwissPhoneNumber("+49-30-12345678")).toBe("+493012345678");
+
+    expect(normalizeSwissPhoneNumber("+33 1 23 45 67 89")).toBe("+33123456789");
+    expect(normalizeSwissPhoneNumber("+33-1-23-45-67-89")).toBe("+33123456789");
+
+    expect(normalizeSwissPhoneNumber("+39 06 12345678")).toBe("+390612345678");
+    expect(normalizeSwissPhoneNumber("+43 1 2345678")).toBe("+4312345678");
+    expect(normalizeSwissPhoneNumber("+423 234 5678")).toBe("+4232345678");
+  });
+});
+
+describe("validatePhoneNumber", () => {
+  it("should validate a Swiss phone number", () => {
+    expect(validatePhoneNumber("079 123 45 67")).toBe(true);
+    expect(validatePhoneNumber("00 41 79 123 45 67")).toBe(true);
+    expect(validatePhoneNumber("+41 (0)79 201 85 86")).toBe(true);
+    expect(validatePhoneNumber("+41 79 201 85 86")).toBe(true);
+    expect(validatePhoneNumber("026 418 01 31")).toBe(true);
+
+    expect(validatePhoneNumber("+41 79 201 85 86 8")).toBe(false);
+    expect(validatePhoneNumber("079 201 85 8")).toBe(false);
+    expect(validatePhoneNumber("aaa aaa aaa aaa")).toBe(false);
+  });
+
+  it("should validate a foreign phone number", () => {
+    expect(validatePhoneNumber("+49 30 12345678")).toBe(true);
+    expect(validatePhoneNumber("+49 30 1234567")).toBe(false);
+    expect(validatePhoneNumber("+49 30 123456789")).toBe(false);
+
+    expect(validatePhoneNumber("+33 1 23 45 67 89")).toBe(true);
+    expect(validatePhoneNumber("+33 1 23 45 67 89 9")).toBe(false);
+
+    expect(validatePhoneNumber("+39 06 12345678")).toBe(true);
+    expect(validatePhoneNumber("+39 06 1234567")).toBe(false);
+
+    expect(validatePhoneNumber("+43 1 2345678")).toBe(true);
+    expect(validatePhoneNumber("+43 1 23456789")).toBe(false);
+
+    expect(validatePhoneNumber("+423 235 09 09")).toBe(true);
+    expect(validatePhoneNumber("+423 235 09 09 8")).toBe(false);
+
+    expect(validatePhoneNumber("+354 123 4567")).toBe(true);
+    expect(validatePhoneNumber("+55 12 34567 8901")).toBe(true);
+  });
+});
diff --git a/client/src/utils/phone.ts b/client/src/utils/phone.ts
new file mode 100644
index 00000000..cb03196a
--- /dev/null
+++ b/client/src/utils/phone.ts
@@ -0,0 +1,69 @@
+export function normalizeSwissPhoneNumber(input: string) {
+  return input
+    .replace(/\s+/g, "")
+    .replace("(0)", "")
+    .replaceAll("-", "")
+    .replaceAll("/", "")
+    .replaceAll("(", "")
+    .replaceAll(")", "")
+    .replace(/^0041/, "+41")
+    .replace(/^\+410/, "+41")
+    .replace(/^0/, "+41");
+}
+
+export function validatePhoneNumber(input: string) {
+  const normalized = normalizeSwissPhoneNumber(input);
+
+  if (
+    !normalized.startsWith("+") ||
+    isNaN(Number(normalized.slice(1))) ||
+    normalized[1] === "0"
+  ) {
+    // phone number can only start with a + and must be followed by numbers
+    return false;
+  }
+
+  if (["+41", "+43", "+49", "+39", "+33", "+42"].includes(normalized.slice(0, 3))) {
+    if (
+      // Swiss and French phone numbers
+      (normalized.startsWith("+41") || normalized.startsWith("+33")) &&
+      normalized.length === 12
+    ) {
+      return true;
+    } else if (
+      // German and Italian phone numbers
+      (normalized.startsWith("+49") || normalized.startsWith("+39")) &&
+      normalized.length === 13
+    ) {
+      return true;
+    } else if (
+      // Austrian and Liechtenstein phone numbers
+      (normalized.startsWith("+43") || normalized.startsWith("+423")) &&
+      normalized.length === 11
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  // every other country
+  if (normalized.length >= 10 || normalized.length <= 13) {
+    return true;
+  }
+
+  return false;
+}
+
+export function displaySwissPhoneNumber(input: string) {
+  if (input && input.length === 12 && input.startsWith("+41")) {
+    input = input.replace("+41", "0");
+    let result = "";
+    result += input.substring(0, 3) + " ";
+    result += input.substring(3, 6) + " ";
+    result += input.substring(6, 8) + " ";
+    result += input.substring(8);
+    return result;
+  }
+
+  return input;
+}
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 8a480d85..4a396792 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -126,7 +126,7 @@ describe("checkout.cy.js", () => {
     cy.get("#postal-code").type("1719");
     cy.get("#city").type("Zumholz");
 
-    cy.get("#phone").type("+41 79 201 85 86");
+    cy.get("#phone").type("079 201 85 86");
     cy.get("#birth-date").type("1982-06-09");
 
     cy.get('[data-cy="continue-pay"]').click();
@@ -141,7 +141,7 @@ describe("checkout.cy.js", () => {
       expect(ci.postal_code).to.equal("1719");
       expect(ci.city).to.equal("Zumholz");
       expect(ci.country).to.equal("CH");
-      expect(ci.phone_number).to.equal("+41 79 201 85 86");
+      expect(ci.phone_number).to.equal("+41792018586");
       expect(ci.birth_date).to.equal("1982-06-09");
       expect(ci.cembra_invoice).to.be.true;
 

From 9d91a9102a918a271ad7e65779867a2f57a8129e Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Jun 2024 14:56:55 +0200
Subject: [PATCH 06/19] Add more logging in app/database

---
 .../DatatransCembraDeviceFingerprint.vue      |   3 +-
 client/src/main.ts                            |   2 +-
 server/config/urls.py                         |   2 +-
 server/requirements/requirements-dev.txt      |   2 +
 server/requirements/requirements.in           |   1 +
 server/requirements/requirements.txt          |   2 +
 server/vbv_lernwelt/api/tests/test_profile.py |   5 +-
 server/vbv_lernwelt/core/admin.py             |  97 +++++++++++++-
 .../core/external_request_logger.py           |  85 ++++++++++++
 .../vbv_lernwelt/core/middleware/security.py  |  97 ++++++++++----
 .../migrations/0010_auto_20240620_1625.py     |  13 +-
 .../0011_delete_securityrequestresponselog.py |  15 +++
 .../migrations/0012_auto_20240621_1626.py     | 126 ++++++++++++++++++
 server/vbv_lernwelt/core/models.py            |  51 ++++++-
 .../vbv_lernwelt/shop/datatrans/__init__.py   |   0
 .../shop/datatrans/datatrans_api_client.py    |  42 ++++++
 .../{ => datatrans}/datatrans_fake_server.py  |   0
 .../shop/migrations/0015_cembra_fields.py     |  35 +++--
 server/vbv_lernwelt/shop/services.py          |  36 ++++-
 .../shop/tests/test_checkout_api.py           |  23 +++-
 .../shop/tests/test_datatrans_service.py      |  25 +---
 server/vbv_lernwelt/shop/views.py             |  12 +-
 22 files changed, 575 insertions(+), 99 deletions(-)
 create mode 100644 server/vbv_lernwelt/core/external_request_logger.py
 create mode 100644 server/vbv_lernwelt/core/migrations/0011_delete_securityrequestresponselog.py
 create mode 100644 server/vbv_lernwelt/core/migrations/0012_auto_20240621_1626.py
 create mode 100644 server/vbv_lernwelt/shop/datatrans/__init__.py
 create mode 100644 server/vbv_lernwelt/shop/datatrans/datatrans_api_client.py
 rename server/vbv_lernwelt/shop/{ => datatrans}/datatrans_fake_server.py (100%)

diff --git a/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue b/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
index 3ff87c27..6ccb9de2 100644
--- a/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
+++ b/client/src/components/onboarding/DatatransCembraDeviceFingerprint.vue
@@ -43,5 +43,4 @@ export default {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/client/src/main.ts b/client/src/main.ts
index 900b094d..f9124525 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,4 +1,5 @@
 import { i18nextInit } from "@/i18nextWrapper";
+import { generateLocalSessionKey } from "@/statistics";
 import * as Sentry from "@sentry/vue";
 import i18next from "i18next";
 import I18NextVue from "i18next-vue";
@@ -9,7 +10,6 @@ import type { Router } from "vue-router";
 import "../tailwind.css";
 import App from "./App.vue";
 import router from "./router";
-import { generateLocalSessionKey } from "@/statistics";
 
 declare module "pinia" {
   export interface PiniaCustomProperties {
diff --git a/server/config/urls.py b/server/config/urls.py
index c105ca41..f956de90 100644
--- a/server/config/urls.py
+++ b/server/config/urls.py
@@ -69,7 +69,7 @@ from vbv_lernwelt.importer.views import (
 from vbv_lernwelt.media_files.views import user_image
 from vbv_lernwelt.notify.views import email_notification_settings
 
-from vbv_lernwelt.shop.datatrans_fake_server import (
+from vbv_lernwelt.shop.datatrans.datatrans_fake_server import (
     fake_datatrans_api_view,
     fake_datatrans_pay_view,
 )
diff --git a/server/requirements/requirements-dev.txt b/server/requirements/requirements-dev.txt
index 7312ba40..799067cf 100644
--- a/server/requirements/requirements-dev.txt
+++ b/server/requirements/requirements-dev.txt
@@ -576,6 +576,8 @@ typing-extensions==4.7.1
     #   wagtail-localize
 typing-inspect==0.9.0
     # via libcst
+ua-parser==0.18.0
+    # via -r requirements.in
 ufmt==2.2.0
     # via -r requirements-dev.in
 uritemplate==4.1.1
diff --git a/server/requirements/requirements.in b/server/requirements/requirements.in
index 3b5ae91e..28ce1425 100644
--- a/server/requirements/requirements.in
+++ b/server/requirements/requirements.in
@@ -8,6 +8,7 @@ redis  # https://github.com/redis/redis-py
 uvicorn[standard]  # https://github.com/encode/uvicorn
 environs
 click
+ua-parser
 
 # Django
 # ------------------------------------------------------------------------------
diff --git a/server/requirements/requirements.txt b/server/requirements/requirements.txt
index 1987798b..783118be 100644
--- a/server/requirements/requirements.txt
+++ b/server/requirements/requirements.txt
@@ -324,6 +324,8 @@ typing-extensions==4.7.1
     #   dj-database-url
     #   uvicorn
     #   wagtail-localize
+ua-parser==0.18.0
+    # via -r requirements.in
 uritemplate==4.1.1
     # via drf-spectacular
 urllib3==1.26.16
diff --git a/server/vbv_lernwelt/api/tests/test_profile.py b/server/vbv_lernwelt/api/tests/test_profile.py
index bc31e8ec..bb8c3206 100644
--- a/server/vbv_lernwelt/api/tests/test_profile.py
+++ b/server/vbv_lernwelt/api/tests/test_profile.py
@@ -43,7 +43,8 @@ class ProfileViewTest(APITestCase):
         # THEN
         self.assertEqual(response.status_code, status.HTTP_200_OK)
         profile = response.data
-        self.assertEqual(
+        self.maxDiff = None
+        self.assertDictEqual(
             profile,
             {
                 "id": str(self.user.id),
@@ -62,6 +63,8 @@ class ProfileViewTest(APITestCase):
                 "postal_code": "",
                 "city": "",
                 "country": None,
+                "phone_number": "",
+                "birth_date": None,
                 "organisation_detail_name": "",
                 "organisation_street": "",
                 "organisation_street_number": "",
diff --git a/server/vbv_lernwelt/core/admin.py b/server/vbv_lernwelt/core/admin.py
index 8c44c349..e0c70dbb 100644
--- a/server/vbv_lernwelt/core/admin.py
+++ b/server/vbv_lernwelt/core/admin.py
@@ -2,7 +2,13 @@ from django.contrib import admin
 from django.contrib.auth import admin as auth_admin, get_user_model
 from django.utils.translation import gettext_lazy as _
 
-from vbv_lernwelt.core.models import Country, JobLog, Organisation
+from vbv_lernwelt.core.models import (
+    Country,
+    ExternalApiRequestLog,
+    JobLog,
+    Organisation,
+    SecurityRequestResponseLog,
+)
 from vbv_lernwelt.core.utils import pretty_print_json
 
 User = get_user_model()
@@ -109,6 +115,95 @@ class JobLogAdmin(LogAdmin):
         return None
 
 
+@admin.register(SecurityRequestResponseLog)
+class SecurityRequestResponseLogAdmin(LogAdmin):
+    date_hierarchy = "created"
+    list_display = (
+        "created",
+        "label",
+        "type",
+        "action",
+        "ref",
+        "request_username",
+        "request_full_path",
+        "request_method",
+        "response_status_code",
+        "request_client_ip",
+        "request_elapse_time",
+        "request_trace_id",
+        "session_key",
+        "user_agent_os",
+        "user_agent_browser",
+    )
+    list_filter = [
+        "label",
+        "type",
+        "action",
+        "request_full_path",
+        "request_method",
+        "response_status_code",
+        "user_agent_os",
+        "user_agent_browser",
+    ]
+    search_fields = [
+        "request_username",
+        "request_full_path",
+        "request_client_ip",
+        "request_trace_id",
+        "additional_json_data",
+    ]
+
+    def additional_json_data_pretty(self, instance):
+        return self.pretty_print_json(instance.additional_json_data)
+
+    def get_readonly_fields(self, request, obj=None):
+        return super().get_readonly_fields(request, obj) + [
+            "additional_json_data_pretty"
+        ]
+
+
+@admin.register(ExternalApiRequestLog)
+class ExternalApiRequestLogAdmin(LogAdmin):
+    date_hierarchy = "created"
+    list_display = (
+        "created",
+        "api_request_verb",
+        "api_url",
+        "api_response_status_code",
+        "elapsed_time",
+        "request_trace_id",
+        "request_username",
+    )
+    search_fields = [
+        "request_username",
+        "request_trace_id",
+        "api_request_data",
+        "api_response_data",
+        "additional_json_data",
+    ]
+    list_filter = [
+        "api_response_status_code",
+        "api_request_verb",
+        "api_url",
+    ]
+
+    def api_request_data_pretty(self, instance):
+        return self.pretty_print_json(instance.api_request_data)
+
+    def api_response_data_pretty(self, instance):
+        return self.pretty_print_json(instance.api_response_data)
+
+    def additional_data_pretty(self, instance):
+        return self.pretty_print_json(instance.additional_data)
+
+    def get_readonly_fields(self, request, obj=None):
+        return super().get_readonly_fields(request, obj) + [
+            "api_request_data_pretty",
+            "api_response_data_pretty",
+            "additional_data_pretty",
+        ]
+
+
 @admin.register(Organisation)
 class OrganisationAdmin(admin.ModelAdmin):
     list_display = (
diff --git a/server/vbv_lernwelt/core/external_request_logger.py b/server/vbv_lernwelt/core/external_request_logger.py
new file mode 100644
index 00000000..9c1cc2ea
--- /dev/null
+++ b/server/vbv_lernwelt/core/external_request_logger.py
@@ -0,0 +1,85 @@
+import time
+from functools import wraps
+
+import structlog
+
+from vbv_lernwelt.core.models import ExternalApiRequestLog
+
+logger = structlog.get_logger(__name__)
+
+
+class ExternalApiRequestLogDecorator:
+    def __init__(self, base_url, store_request_data=True, store_response_data=True):
+        self.base_url = base_url
+        self.store_request_data = store_request_data
+        self.store_response_data = store_response_data
+
+    def __call__(self, fn):
+        @wraps(fn)
+        def wrapper(*args, **kwargs):
+            store_request_data = self.store_request_data
+            store_response_data = self.store_response_data
+
+            request_data = kwargs.get("json", None)
+            if not request_data:
+                request_data = kwargs.get("data", None)
+            if not request_data:
+                request_data = kwargs.get("params", None)
+            if not request_data:
+                request_data = args[2] if len(args) > 2 else {}
+
+            url = args[1]
+            context_data = kwargs.get("context_data", {}) or {}
+
+            if not store_request_data:
+                request_data = {"hidden": True}
+
+            logger.debug(
+                "try to call subhub external api",
+                request_url=args[1],
+                request_data=request_data,
+                base_url=self.base_url,
+                label="subhub_external_communication",
+            )
+
+            log = ExternalApiRequestLog()
+            log.api_url = f"{self.base_url}{url}"
+            log.api_request_data = request_data
+
+            log.request_trace_id = context_data.get("request_trace_id", "")
+            log.request_username = context_data.get("request_username", "")
+            log.additional_json_data = context_data
+
+            # user = get_request_user()
+            # if user:
+            #     log.user = user.username
+
+            log.save()
+
+            start = time.time()
+            api_response = fn(*args, **kwargs)
+            log.elapsed_time = round(time.time() - start, 3)
+
+            log.api_request_verb = str(api_response.request.method)
+            log.api_response_status_code = api_response.status_code
+            if store_response_data:
+                log.api_response_data = str(api_response.text)
+            else:
+                log.api_response_data = "hidden"
+
+            log.save()
+
+            logger.info(
+                "call to subhub external api successful",
+                api_request_verb=log.api_request_verb,
+                api_url=log.api_url,
+                api_response_status_code=log.api_response_status_code,
+                api_time=log.elapsed_time,
+                api_request_data=log.api_request_data,
+                api_response_data=log.api_response_data,
+                label="subhub_external_communication",
+            )
+
+            return api_response
+
+        return wrapper
diff --git a/server/vbv_lernwelt/core/middleware/security.py b/server/vbv_lernwelt/core/middleware/security.py
index 2279b8c3..85e0d9b3 100644
--- a/server/vbv_lernwelt/core/middleware/security.py
+++ b/server/vbv_lernwelt/core/middleware/security.py
@@ -1,12 +1,13 @@
+import time
 import uuid
 
 import structlog
-from django.core.exceptions import PermissionDenied
-from django.http import Http404
 from ipware import get_client_ip
 from structlog.threadlocal import bind_threadlocal, clear_threadlocal
+from ua_parser import user_agent_parser
 
 from vbv_lernwelt.core.models import SecurityRequestResponseLog
+from vbv_lernwelt.importer.utils import try_parse_int
 
 logger = structlog.get_logger(__name__)
 
@@ -30,30 +31,68 @@ class SecurityRequestResponseLoggingMiddleware:
 
     def create_logging_threadlocalbind(self, request):
         request_username = request.user.username if hasattr(request, "user") else ""
-
+        request_trace_id = uuid.uuid4().hex
         bind_threadlocal(
             request_method=request.method,
             request_full_path=request.get_full_path(),
             request_username=request_username,
             request_client_ip=request.META.get("REMOTE_ADDR"),
-            request_trace_id=uuid.uuid4().hex,
+            request_trace_id=request_trace_id,
         )
 
-    def create_database_security_request_response_log(self, request, response):
+        return request_trace_id
+
+    def create_database_security_request_response_log(
+        self, request, response, elapsed_time, request_trace_id=""
+    ):
         try:
             entry = SecurityRequestResponseLog()
             entry.label = getattr(request, "security_request_logging", "")
+            entry.type = getattr(request, "type", "")
             entry.request_method = request.method
-            entry.request_full_path = request.get_full_path()[:255]
+            entry.request_full_path = request.get_full_path()[0:250]
             entry.request_username = (
                 request.user.username if hasattr(request, "user") else ""
             )
             entry.request_client_ip = request.META.get("REMOTE_ADDR")
-            entry.request_scn = getattr(request, "scn", "")
             entry.response_status_code = response.status_code
-            entry.additional_json_data = getattr(
-                request, "log_additional_json_data", {}
-            )
+            entry.request_trace_id = request_trace_id
+            entry.request_elapse_time = elapsed_time
+            entry.save()
+
+            # save predefined fields
+            additional_json_data = getattr(request, "log_additional_json_data", {})
+
+            entry.category = additional_json_data.pop("category", "")[0:255].strip()
+            entry.action = additional_json_data.pop("action", "")[0:255].strip()
+            entry.name = additional_json_data.pop("name", "")[0:255].strip()
+            entry.ref = additional_json_data.pop("ref", "")[0:255].strip()
+            entry.local_url = additional_json_data.pop("local_url", "")[0:255].strip()
+
+            entry.session_key = additional_json_data.pop("session_key", "")[
+                0:255
+            ].strip()
+            _, value = try_parse_int(additional_json_data.pop("value", 0), 0)
+            entry.value = value
+            entry.save()
+
+            user_agent = request.headers.get("User-Agent", "")
+            entry.user_agent = user_agent[0:4096].strip()
+            try:
+                ua_parsed = user_agent_parser.Parse(user_agent)
+                entry.user_agent_parsed = user_agent_parser.Parse(user_agent)
+                entry.user_agent_os = ua_parsed.get("os").get("family")
+                entry.user_agent_browser = ua_parsed.get("user_agent").get("family")
+            # pylint: disable=broad-except
+            except Exception as e:
+                logger.warning(
+                    "error while parsing user agent",
+                    label="analytics",
+                    user_agent=user_agent,
+                    error=str(e),
+                )
+
+            entry.additional_json_data = additional_json_data
 
             entry.save()
 
@@ -63,18 +102,32 @@ class SecurityRequestResponseLoggingMiddleware:
 
     def log_request_response(self, request):
         clear_threadlocal()
-        self.create_logging_threadlocalbind(request)
+        request_trace_id = self.create_logging_threadlocalbind(request)
+        request.request_trace_id = request_trace_id
 
         logger.info(
             "url access initialized",
             label="security",
         )
 
+        start_time = time.time()
         response = self.get_response(request)
+        elapsed_time = round(time.time() - start_time, 3)
 
-        security_request_logging = getattr(request, "security_request_logging", None)
-        if security_request_logging:
-            self.create_database_security_request_response_log(request, response)
+        try:
+            security_request_logging = getattr(
+                request, "security_request_logging", None
+            )
+            if security_request_logging:
+                self.create_database_security_request_response_log(
+                    request,
+                    response,
+                    elapsed_time=elapsed_time,
+                    request_trace_id=request_trace_id,
+                )
+        # pylint: disable=broad-except
+        except Exception:
+            logger.warn("could not create db entry", label="security", exc_info=True)
 
         logger.info(
             "url access finished",
@@ -82,6 +135,7 @@ class SecurityRequestResponseLoggingMiddleware:
             response_status_code=response.status_code,
             request_ratelimited=getattr(request, "limited", False),
             request_finished=True,
+            elapsed_time=elapsed_time,
         )
 
         clear_threadlocal()
@@ -90,18 +144,3 @@ class SecurityRequestResponseLoggingMiddleware:
 
     def __call__(self, request):
         return self.log_request_response(request)
-
-    def process_exception(self, request, exception):
-        if isinstance(exception, (Http404, PermissionDenied)):
-            # We don't log an exception here, and we don't set that we handled
-            # an error as we want the standard `request_finished` log message
-            # to be emitted.
-            return
-
-        self._raised_exception = True
-
-        logger.exception(
-            "request_failed",
-            label="security",
-            response_status_code=500,
-        )
diff --git a/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py b/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
index dfafcf04..72af3d36 100644
--- a/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
+++ b/server/vbv_lernwelt/core/migrations/0010_auto_20240620_1625.py
@@ -4,20 +4,19 @@ from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('core', '0009_country_refactor'),
+        ("core", "0009_country_refactor"),
     ]
 
     operations = [
         migrations.AddField(
-            model_name='user',
-            name='birth_date',
+            model_name="user",
+            name="birth_date",
             field=models.DateField(blank=True, null=True),
         ),
         migrations.AddField(
-            model_name='user',
-            name='phone_number',
-            field=models.CharField(blank=True, default='', max_length=255),
+            model_name="user",
+            name="phone_number",
+            field=models.CharField(blank=True, default="", max_length=255),
         ),
     ]
diff --git a/server/vbv_lernwelt/core/migrations/0011_delete_securityrequestresponselog.py b/server/vbv_lernwelt/core/migrations/0011_delete_securityrequestresponselog.py
new file mode 100644
index 00000000..61f01358
--- /dev/null
+++ b/server/vbv_lernwelt/core/migrations/0011_delete_securityrequestresponselog.py
@@ -0,0 +1,15 @@
+# Generated by Django 3.2.20 on 2024-06-21 13:10
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("core", "0010_auto_20240620_1625"),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name="SecurityRequestResponseLog",
+        ),
+    ]
diff --git a/server/vbv_lernwelt/core/migrations/0012_auto_20240621_1626.py b/server/vbv_lernwelt/core/migrations/0012_auto_20240621_1626.py
new file mode 100644
index 00000000..25b1fd45
--- /dev/null
+++ b/server/vbv_lernwelt/core/migrations/0012_auto_20240621_1626.py
@@ -0,0 +1,126 @@
+# Generated by Django 3.2.20 on 2024-06-21 14:26
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("core", "0011_delete_securityrequestresponselog"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ExternalApiRequestLog",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("created", models.DateTimeField(auto_now_add=True)),
+                ("api_url", models.TextField(blank=True, default="")),
+                ("api_request_data", models.JSONField(blank=True, default=dict)),
+                (
+                    "api_request_verb",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("api_response_status_code", models.IntegerField(default=0)),
+                ("api_response_data", models.TextField(blank=True, default="")),
+                (
+                    "request_username",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "request_trace_id",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("elapsed_time", models.FloatField(default=0)),
+                ("additional_json_data", models.JSONField(blank=True, default=dict)),
+            ],
+        ),
+        migrations.CreateModel(
+            name="SecurityRequestResponseLog",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("created", models.DateTimeField(auto_now_add=True)),
+                ("label", models.CharField(blank=True, default="", max_length=255)),
+                ("type", models.CharField(blank=True, default="", max_length=255)),
+                (
+                    "request_trace_id",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "request_method",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "request_full_path",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "request_username",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "request_client_ip",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("request_elapse_time", models.FloatField(default=0)),
+                (
+                    "response_status_code",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("category", models.CharField(blank=True, default="", max_length=255)),
+                ("action", models.CharField(blank=True, default="", max_length=255)),
+                ("name", models.CharField(blank=True, default="", max_length=255)),
+                ("ref", models.CharField(blank=True, default="", max_length=255)),
+                ("value", models.IntegerField(default=0)),
+                ("local_url", models.CharField(blank=True, default="", max_length=255)),
+                (
+                    "session_key",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("user_agent", models.TextField(blank=True, default="")),
+                ("user_agent_parsed", models.JSONField(blank=True, default=dict)),
+                (
+                    "user_agent_os",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                (
+                    "user_agent_browser",
+                    models.CharField(blank=True, default="", max_length=255),
+                ),
+                ("additional_json_data", models.JSONField(blank=True, default=dict)),
+            ],
+        ),
+        migrations.AddIndex(
+            model_name="securityrequestresponselog",
+            index=models.Index(fields=["type"], name="core_securi_type_009727_idx"),
+        ),
+        migrations.AddIndex(
+            model_name="securityrequestresponselog",
+            index=models.Index(fields=["label"], name="core_securi_label_dd1821_idx"),
+        ),
+        migrations.AddIndex(
+            model_name="securityrequestresponselog",
+            index=models.Index(
+                fields=["category"], name="core_securi_categor_1b776c_idx"
+            ),
+        ),
+        migrations.AddIndex(
+            model_name="securityrequestresponselog",
+            index=models.Index(fields=["action"], name="core_securi_action_5df089_idx"),
+        ),
+    ]
diff --git a/server/vbv_lernwelt/core/models.py b/server/vbv_lernwelt/core/models.py
index d1af6853..f1ee630d 100644
--- a/server/vbv_lernwelt/core/models.py
+++ b/server/vbv_lernwelt/core/models.py
@@ -154,16 +154,63 @@ class User(AbstractUser):
 
 
 class SecurityRequestResponseLog(models.Model):
-    label = models.CharField(max_length=255, blank=True, default="")
+    created = models.DateTimeField(auto_now_add=True)
 
+    label = models.CharField(max_length=255, blank=True, default="")
+    type = models.CharField(max_length=255, blank=True, default="")
+
+    request_trace_id = models.CharField(max_length=255, blank=True, default="")
     request_method = models.CharField(max_length=255, blank=True, default="")
     request_full_path = models.CharField(max_length=255, blank=True, default="")
     request_username = models.CharField(max_length=255, blank=True, default="")
     request_client_ip = models.CharField(max_length=255, blank=True, default="")
+    request_elapse_time = models.FloatField(default=0)
 
     response_status_code = models.CharField(max_length=255, blank=True, default="")
 
-    additional_json_data = JSONField(default=dict, blank=True)
+    category = models.CharField(max_length=255, blank=True, default="")
+    action = models.CharField(max_length=255, blank=True, default="")
+    name = models.CharField(max_length=255, blank=True, default="")
+    ref = models.CharField(max_length=255, blank=True, default="")
+    value = models.IntegerField(default=0)
+    local_url = models.CharField(max_length=255, blank=True, default="")
+
+    session_key = models.CharField(max_length=255, blank=True, default="")
+
+    user_agent = models.TextField(blank=True, default="")
+    user_agent_parsed = models.JSONField(blank=True, default=dict)
+    user_agent_os = models.CharField(max_length=255, blank=True, default="")
+    user_agent_browser = models.CharField(max_length=255, blank=True, default="")
+
+    additional_json_data = models.JSONField(default=dict, blank=True)
+
+    class Meta:
+        indexes = [
+            models.Index(fields=["type"]),
+            models.Index(fields=["label"]),
+            models.Index(fields=["category"]),
+            models.Index(fields=["action"]),
+        ]
+
+
+class ExternalApiRequestLog(models.Model):
+    created = models.DateTimeField(auto_now_add=True)
+
+    api_url = models.TextField(blank=True, default="")
+    api_request_data = models.JSONField(default=dict, blank=True)
+
+    api_request_verb = models.CharField(max_length=255, blank=True, default="")
+    api_response_status_code = models.IntegerField(default=0)
+    api_response_data = models.TextField(blank=True, default="")
+
+    request_username = models.CharField(max_length=255, blank=True, default="")
+    request_trace_id = models.CharField(max_length=255, blank=True, default="")
+    elapsed_time = models.FloatField(default=0)
+
+    additional_json_data = models.JSONField(default=dict, blank=True)
+
+    def __str__(self):
+        return f"{self.api_request_verb} {self.api_response_status_code} {self.api_url}"
 
 
 class JobLog(models.Model):
diff --git a/server/vbv_lernwelt/shop/datatrans/__init__.py b/server/vbv_lernwelt/shop/datatrans/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/server/vbv_lernwelt/shop/datatrans/datatrans_api_client.py b/server/vbv_lernwelt/shop/datatrans/datatrans_api_client.py
new file mode 100644
index 00000000..c4c7a828
--- /dev/null
+++ b/server/vbv_lernwelt/shop/datatrans/datatrans_api_client.py
@@ -0,0 +1,42 @@
+# -*- coding: utf-8 -*-
+
+import requests
+import structlog
+from django.conf import settings
+
+from vbv_lernwelt.core.external_request_logger import ExternalApiRequestLogDecorator
+
+logger = structlog.getLogger(__name__)
+
+
+class DatatransApiClient:
+    def __init__(self):
+        self.base_url = settings.DATATRANS_API_ENDPOINT
+
+    @ExternalApiRequestLogDecorator(
+        base_url=settings.DATATRANS_API_ENDPOINT,
+    )
+    def _get_request(self, url, params, headers=None, context_data=None):
+        complete_url = self.base_url + url
+        return requests.get(complete_url, params=params, headers=headers)
+
+    @ExternalApiRequestLogDecorator(
+        base_url=settings.DATATRANS_API_ENDPOINT,
+    )
+    def _post_request(self, url, json, headers=None, context_data=None):
+        complete_url = self.base_url + url
+        return requests.post(complete_url, json=json, headers=headers)
+
+    def post_initialize_transactions(
+        self, json_payload: dict, context_data: dict = None
+    ):
+        url = "/v1/transactions"
+        return self._post_request(
+            url,
+            json=json_payload,
+            headers={
+                "Authorization": f"Basic {settings.DATATRANS_BASIC_AUTH_KEY}",
+                "Content-Type": "application/json",
+            },
+            context_data=context_data,
+        )
diff --git a/server/vbv_lernwelt/shop/datatrans_fake_server.py b/server/vbv_lernwelt/shop/datatrans/datatrans_fake_server.py
similarity index 100%
rename from server/vbv_lernwelt/shop/datatrans_fake_server.py
rename to server/vbv_lernwelt/shop/datatrans/datatrans_fake_server.py
diff --git a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
index 06fa2a94..df6a8601 100644
--- a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
+++ b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
@@ -4,40 +4,39 @@ from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('shop', '0014_checkoutinformation_abacus_ssh_upload_done'),
+        ("shop", "0014_checkoutinformation_abacus_ssh_upload_done"),
     ]
 
     operations = [
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='birth_date',
+            model_name="checkoutinformation",
+            name="birth_date",
             field=models.DateField(blank=True, null=True),
         ),
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='cembra_invoice',
+            model_name="checkoutinformation",
+            name="cembra_invoice",
             field=models.BooleanField(default=False),
         ),
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='device_fingerprint_session_key',
-            field=models.CharField(blank=True, default='', max_length=255),
+            model_name="checkoutinformation",
+            name="device_fingerprint_session_key",
+            field=models.CharField(blank=True, default="", max_length=255),
         ),
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='email',
-            field=models.CharField(blank=True, default='', max_length=255),
+            model_name="checkoutinformation",
+            name="email",
+            field=models.CharField(blank=True, default="", max_length=255),
         ),
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='ip_address',
-            field=models.CharField(blank=True, default='', max_length=255),
+            model_name="checkoutinformation",
+            name="ip_address",
+            field=models.CharField(blank=True, default="", max_length=255),
         ),
         migrations.AddField(
-            model_name='checkoutinformation',
-            name='phone_number',
-            field=models.CharField(blank=True, default='', max_length=255),
+            model_name="checkoutinformation",
+            name="phone_number",
+            field=models.CharField(blank=True, default="", max_length=255),
         ),
     ]
diff --git a/server/vbv_lernwelt/shop/services.py b/server/vbv_lernwelt/shop/services.py
index 20c1aee8..a763c899 100644
--- a/server/vbv_lernwelt/shop/services.py
+++ b/server/vbv_lernwelt/shop/services.py
@@ -7,11 +7,36 @@ import structlog
 from django.conf import settings
 
 from vbv_lernwelt.core.admin import User
+from vbv_lernwelt.shop.datatrans.datatrans_api_client import DatatransApiClient
 from vbv_lernwelt.shop.models import CheckoutState
 
 logger = structlog.get_logger(__name__)
 
 
+def create_context_data_log(
+    request,
+    action: str,
+):
+    request._request.security_request_logging = "shop_view"
+    request._request.type = "datatrans"
+    request_trace_id = getattr(request._request, "request_trace_id", "")
+
+    context_data = {
+        "action": action,
+        "session_key": (request.data.get("session_key", "") or "")[0:255].strip(),
+        "ref": (request.data.get("ref", "") or "")[0:255].strip(),
+        "request_trace_id": (request_trace_id or "")[0:255].strip(),
+        "request_username": (
+            request._request.user.username if hasattr(request._request, "user") else ""
+        ),
+    }
+
+    request._request.log_additional_json_data = context_data
+
+    log = logger.bind(label="shop", **context_data)
+    return context_data, log
+
+
 class InitTransactionException(Exception):
     pass
 
@@ -54,6 +79,7 @@ def init_datatrans_transaction(
     webhook_url: str,
     datatrans_customer_data: dict = None,
     datatrans_int_data: dict = None,
+    context_data: dict = None,
 ):
     payload = {
         # We use autoSettle=True, so that we don't have to settle the transaction:
@@ -82,13 +108,9 @@ def init_datatrans_transaction(
 
     logger.info("Initiating transaction", payload=payload)
 
-    response = requests.post(
-        url=f"{settings.DATATRANS_API_ENDPOINT}/v1/transactions",
-        json=payload,
-        headers={
-            "Authorization": f"Basic {settings.DATATRANS_BASIC_AUTH_KEY}",
-            "Content-Type": "application/json",
-        },
+    api_client = DatatransApiClient()
+    response = api_client.post_initialize_transactions(
+        json_payload=payload, context_data=context_data
     )
 
     if response.status_code == 201:
diff --git a/server/vbv_lernwelt/shop/tests/test_checkout_api.py b/server/vbv_lernwelt/shop/tests/test_checkout_api.py
index 02228de8..efbee5da 100644
--- a/server/vbv_lernwelt/shop/tests/test_checkout_api.py
+++ b/server/vbv_lernwelt/shop/tests/test_checkout_api.py
@@ -83,13 +83,22 @@ class CheckoutAPITestCase(APITestCase):
         self.assertEqual(ci.state, "ongoing")
         self.assertEqual(ci.transaction_id, "1234567890")
 
-        mock_init_transaction.assert_called_once_with(
-            user=self.user,
-            amount_chf_centimes=324_30,
-            redirect_url_success=f"{REDIRECT_URL}/onboarding/{VV_DE_PRODUCT_SKU}/checkout/complete",
-            redirect_url_error=f"{REDIRECT_URL}/onboarding/{VV_DE_PRODUCT_SKU}/checkout/address?error",
-            redirect_url_cancel=f"{REDIRECT_URL}/",
-            webhook_url=f"{REDIRECT_URL}/api/shop/transaction/webhook/",
+        mock_init_transaction.assert_called_once()
+        call_kwargs = mock_init_transaction.call_args[1]
+        print(call_kwargs)
+        self.assertEqual(call_kwargs["user"], self.user)
+        self.assertEqual(call_kwargs["amount_chf_centimes"], 324_30)
+        self.assertEqual(
+            call_kwargs["redirect_url_success"],
+            f"{REDIRECT_URL}/onboarding/{VV_DE_PRODUCT_SKU}/checkout/complete",
+        )
+        self.assertEqual(
+            call_kwargs["redirect_url_error"],
+            f"{REDIRECT_URL}/onboarding/{VV_DE_PRODUCT_SKU}/checkout/address?error",
+        )
+        self.assertEqual(call_kwargs["redirect_url_cancel"], f"{REDIRECT_URL}/")
+        self.assertEqual(
+            call_kwargs["webhook_url"], f"{REDIRECT_URL}/api/shop/transaction/webhook/"
         )
 
     @patch("vbv_lernwelt.shop.views.init_datatrans_transaction")
diff --git a/server/vbv_lernwelt/shop/tests/test_datatrans_service.py b/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
index 9d3aca8a..08de6287 100644
--- a/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
+++ b/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
@@ -48,26 +48,11 @@ class DatatransServiceTest(TestCase):
         self.assertEqual(1234567890, transaction_id)
 
         # THEN
-        mock_post.assert_called_once_with(
-            url="https://api.sandbox.datatrans.com/v1/transactions",
-            json={
-                "autoSettle": True,
-                "amount": 324_30,
-                "currency": "CHF",
-                "language": self.user.language,
-                "refno": str(mock_uuid()),
-                "webhook": {"url": f"{REDIRECT_URL}/webhook"},
-                "redirect": {
-                    "successUrl": f"{REDIRECT_URL}/success",
-                    "errorUrl": f"{REDIRECT_URL}/error",
-                    "cancelUrl": f"{REDIRECT_URL}/cancel",
-                },
-            },
-            headers={
-                "Authorization": "Basic BASIC_AUTH_KEY",
-                "Content-Type": "application/json",
-            },
-        )
+        mock_post.assert_called_once()
+        call_kwargs = mock_post.call_args[1]
+        print(call_kwargs)
+        self.assertEqual(call_kwargs["json"]["autoSettle"], True)
+        self.assertEqual(call_kwargs["json"]["amount"], 324_30)
 
     @patch("vbv_lernwelt.shop.services.requests.post")
     def test_init_transaction_500(self, mock_post):
diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index 485afbaa..309fb92f 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -16,6 +16,7 @@ from vbv_lernwelt.shop.const import (
 )
 from vbv_lernwelt.shop.models import CheckoutInformation, CheckoutState, Product
 from vbv_lernwelt.shop.services import (
+    create_context_data_log,
     datatrans_state_to_checkout_state,
     get_payment_url,
     init_datatrans_transaction,
@@ -82,10 +83,12 @@ def checkout_vv(request):
      bei Browser Back redirections zu vermeiden."
 
     """
+    context_data, log = create_context_data_log(request, "checkout_vv")
+
     sku = request.data["product"]
     base_redirect_url = request.data["redirect_url"]
 
-    logger.info(f"Checkout requested: sku", user_id=request.user.id, sku=sku)
+    log.info(f"Checkout requested: sku", user_id=request.user.id, sku=sku)
 
     try:
         product = Product.objects.get(sku=sku)
@@ -116,7 +119,6 @@ def checkout_vv(request):
         datatrans_customer_data = None
         datatrans_int_data = None
         if with_cembra_invoice:
-
             if "fakeapi" not in settings.DATATRANS_API_ENDPOINT:
                 request.user.set_increment_abacus_debitor_number()
 
@@ -155,9 +157,11 @@ def checkout_vv(request):
             webhook_url=webhook_url(base_redirect_url),
             datatrans_customer_data=datatrans_customer_data,
             datatrans_int_data=datatrans_int_data,
+            context_data=context_data,
         )
     except InitTransactionException as e:
         if not settings.DEBUG:
+            log.error("Transaction initiation failed", exc_info=True, error=str(e))
             capture_exception(e)
         return next_step_response(
             url=checkout_error_url(
@@ -190,7 +194,9 @@ def checkout_vv(request):
         email=email,
         ip_address=ip_address,
         cembra_invoice=with_cembra_invoice,
-        device_fingerprint_session_key=request.data["device_fingerprint_session_key"],
+        device_fingerprint_session_key=request.data.get(
+            "device_fingerprint_session_key", ""
+        ),
         # address
         **request.data["address"],
     )

From 3ef1ba18b28658ae454c9d1f0fd9a4c3e437171a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 21 Jun 2024 17:23:25 +0200
Subject: [PATCH 07/19] Improve Cypress tests

---
 .../pages/onboarding/vv/CheckoutAddress.vue   |  9 ++++--
 client/src/stores/user.ts                     |  2 ++
 cypress/e2e/checkout-vv/checkout.cy.js        | 28 ++++++++++++++++++-
 cypress/support/commands.js                   | 20 +++++++++++++
 .../core/management/commands/cypress_reset.py |  6 ++++
 server/vbv_lernwelt/core/serializers.py       | 20 ++++++++++++-
 6 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 952d96d0..7aea4499 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -184,7 +184,10 @@ async function saveAddress() {
   typedProfileData.organisation_country = countries.value.find(
     (c) => c.country_code === organisation_country_code
   );
-  typedProfileData.phone_number = normalizeSwissPhoneNumber(phone_number);
+
+  if (phone_number) {
+    typedProfileData.phone_number = normalizeSwissPhoneNumber(phone_number);
+  }
 
   await user.updateUserProfile(typedProfileData);
 }
@@ -204,7 +207,9 @@ const executePayment = async () => {
   // anyway, so it seems fine to do it here.
   const fullHost = `${window.location.protocol}//${window.location.host}`;
 
-  address.value.phone_number = normalizeSwissPhoneNumber(address.value.phone_number);
+  if (address.value.phone_number) {
+    address.value.phone_number = normalizeSwissPhoneNumber(address.value.phone_number);
+  }
 
   itPost("/api/shop/vv/checkout/", {
     redirect_url: fullHost,
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index 4436c7b6..2c85dba7 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -81,6 +81,8 @@ const initialUserState: User = {
   postal_code: "",
   city: "",
   country: null,
+  birth_date: "",
+  phone_number: "",
   organisation_detail_name: "",
   organisation_street: "",
   organisation_street_number: "",
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 4a396792..5039a762 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -94,7 +94,7 @@ describe("checkout.cy.js", () => {
     });
   });
 
-  it.only("can checkout and pay Versicherungsvermittlerin with Cembra invoice", () => {
+  it("can checkout and pay Versicherungsvermittlerin with Cembra invoice", () => {
     cy.get('[data-cy="start-vv"]').click();
 
     // wähle "Deutsch"
@@ -131,6 +131,32 @@ describe("checkout.cy.js", () => {
 
     cy.get('[data-cy="continue-pay"]').click();
 
+    cy.loadExternalApiRequestLog("request_username", "empty@example.com").then((entry) => {
+      // ends with "/v1/transactions""
+      expect(entry.api_url).to.contain("/v1/transactions");
+      expect(entry.request_username).to.contain("empty@example.com");
+
+      expect(entry.api_request_data.amount).to.equal(32400);
+      expect(entry.api_request_data.currency).to.equal("CHF");
+      expect(entry.api_request_data.autoSettle).to.equal(true);
+
+      expect(entry.api_request_data.customer.firstName).to.equal("Flasche");
+      expect(entry.api_request_data.customer.lastName).to.equal("Leer");
+      expect(entry.api_request_data.customer.street).to.equal("Eggersmatt 32");
+      expect(entry.api_request_data.customer.zipCode).to.equal("1719");
+      expect(entry.api_request_data.customer.city).to.equal("Zumholz");
+      expect(entry.api_request_data.customer.country).to.equal("CH");
+      expect(entry.api_request_data.customer.type).to.equal("P");
+      expect(entry.api_request_data.customer.phone).to.equal("+41792018586");
+
+      expect(entry.api_request_data.INT.repaymentType).to.equal(3);
+      expect(entry.api_request_data.INT.riskOwner).to.equal("IJ");
+      expect(entry.api_request_data.INT.subtype).to.equal("INVOICE");
+      expect(entry.api_request_data.INT.deviceFingerprintId).to.not.be.empty;
+
+      expect(true).to.be.true;
+    });
+
     // check that results are stored on server
     cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
       expect(ci.first_name).to.equal("Flasche");
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index eaf772c1..50dfdf30 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -138,6 +138,26 @@ Cypress.Commands.add("loadAssignmentCompletion", (key, value) => {
   );
 });
 
+Cypress.Commands.add("loadSecurityRequestResponseLog", (key, value) => {
+  return loadObjectJson(
+    key,
+    value,
+    "vbv_lernwelt.core.models.SecurityRequestResponseLog",
+    "vbv_lernwelt.core.serializers.CypressSecurityRequestResponseLogSerializer",
+    true
+  );
+});
+
+Cypress.Commands.add("loadExternalApiRequestLog", (key, value) => {
+  return loadObjectJson(
+    key,
+    value,
+    "vbv_lernwelt.core.models.ExternalApiRequestLog",
+    "vbv_lernwelt.core.serializers.CypressExternalApiRequestLogSerializer",
+    true
+  );
+});
+
 Cypress.Commands.add("loadFeedbackResponse", (key, value) => {
   return loadObjectJson(
     key,
diff --git a/server/vbv_lernwelt/core/management/commands/cypress_reset.py b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
index 8d8ccce5..abfae404 100644
--- a/server/vbv_lernwelt/core/management/commands/cypress_reset.py
+++ b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
@@ -3,6 +3,7 @@ from datetime import datetime
 import djclick as click
 from dateutil.relativedelta import relativedelta, TU
 from django.contrib.auth.hashers import make_password
+from django.db import connection
 from django.utils import timezone
 
 from vbv_lernwelt.assignment.models import Assignment, AssignmentCompletion
@@ -158,6 +159,11 @@ def command(
         password=make_password("test"),
     )
 
+    cursor = connection.cursor()
+    cursor.execute("truncate core_securityrequestresponselog;")
+    cursor.execute("truncate core_externalapirequestlog;")
+    cursor.execute("truncate django_cache_table;")
+
     if create_assignment_completion or create_assignment_evaluation:
         print("create assignment completion data for test course")
         create_test_assignment_submitted_data(
diff --git a/server/vbv_lernwelt/core/serializers.py b/server/vbv_lernwelt/core/serializers.py
index b1cd79df..3a656c71 100644
--- a/server/vbv_lernwelt/core/serializers.py
+++ b/server/vbv_lernwelt/core/serializers.py
@@ -3,7 +3,13 @@ from typing import List
 from rest_framework import serializers
 from rest_framework.renderers import JSONRenderer
 
-from vbv_lernwelt.core.models import Country, Organisation, User
+from vbv_lernwelt.core.models import (
+    Country,
+    ExternalApiRequestLog,
+    Organisation,
+    SecurityRequestResponseLog,
+    User,
+)
 from vbv_lernwelt.course.models import CourseSessionUser
 from vbv_lernwelt.course_session_group.models import CourseSessionGroup
 
@@ -142,3 +148,15 @@ class OrganisationSerializer(serializers.ModelSerializer):
             return obj.name_it
 
         return obj.name_de
+
+
+class CypressExternalApiRequestLogSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ExternalApiRequestLog
+        fields = "__all__"
+
+
+class CypressSecurityRequestResponseLogSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = SecurityRequestResponseLog
+        fields = "__all__"

From 052b07eabff31d4e1d8017769fa217b2bd613ffa Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 27 Jun 2024 17:30:48 +0200
Subject: [PATCH 08/19] Add new "Datatrans VBV Sandbox Neu" env variables

---
 env_secrets/caprover_vbv-develop.env | Bin 983 -> 983 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/env_secrets/caprover_vbv-develop.env b/env_secrets/caprover_vbv-develop.env
index 613e64d5ea9e4e73af1fbbbc6d17d3f369e9588a..0a63614b40ce5b6c64cb257ac5b2341a91beda06 100644
GIT binary patch
literal 983
zcmV;|11S6eM@dveQdv+`0HD@+nP^3B&yI#^66Dx5Y9qqg2`xfs|35Ir2gWhq$l!?w
zr5F5WTc|JWMNrn5kJx?u@%7S~q<qu$41>&vOVYSVcz_Ev$)kIv?WG*PUQjKEUk{*!
zYZdYJm2_lnHiW_KBtou*QdhQ4yfQ3aJ~CRp(v7l0V~JI$H<mw0ZR7kvWs6b0Vt^7@
zObr-amVC70u?XsmB_L?VKzDG4UfoyEU!j8OPK|h}1;Z3;V&PrNPGJpqCujg$quXrj
z?}JIE04eh>p<G!7i(`Ct&VN7Pg6m>Roar$Fe1>rKd&z+>a0XamcnJb4!d7V%T=q#P
zbzs|H*?dRn&yx&@b2WoQEH%_My#jjezCoq9d%NH2tnnlhw)r{3&<fCZofGyT{fT6r
zTyZQ5I%=$HGiox2pU(gOEFH+tx^6MwpoVs1Mf*1~qW4eo%1hwqcsBdYh=Pgn!Lt<I
z?~`nK=cXJrT0IX#VuG~JFB|%mYW?D5p_FbLMskZtQZ$yFpp?$mCR{dKX_1ZY{Ru_=
zji-@@uKl?@b$HS(1SDfj*{uT+rFN3~%4wNHG-4Wa%^qzQz!x;5H?McpKdAFU4}-nm
z6&a_>V&A1)J{<f>RAg#j*rUN6sLxFV?8YD5%crWt_bm-`X#sleU8(b_jDfnA=rLAa
zW%Pp#hF`DG2g62j{xBQ<mXX6RCbf#d^?0sbQKo#Ni7M|JCC=_4h*@5vDcbLCCfwLd
zy~gW}MvgS*N`<o|YHAsd1la8LRvB%38hnD#^S-{um6gx=y1r1k(w>jVG6?z-MgAoN
zlfRA;ac>0ecJgk*s?PHgLmBR0miF)G@i|bm04l~PD&Wz40x^bW%`YT7Qa#fCBh%b+
z)@k*RCRr!TP~D(BW^Q9WAcNtJSiGLqjQ$f<wm+Rb=3JomsY-y#kLPCZI8L7~OObm>
z#b8LcJ}~kMs;aE{6?eq@W~LnX6D#$&hn$iM#5^0jopz`FzmI-7b8@`)m>N5Z*Ih?#
zrf6!W75!;s5XCn;?<ndJ00GY~Dk&o<$rQ*8!~zhfN)cJL>z?ExfZ>!kA)~?K)+tn6
zv*o7NkeM-_EO*Ih2BdD&Z8(I+b_OVpR2G9Z0!m-i(n__AcF7$p$I}`M5F7Q7aZ7Ri
z5bo}O^Kpx)n|9g9lZ?j8qok<f&mg85KmxWi*jsHE;l9R}0z!ifnzC2tziU96kAzz+
zJzO=x!Hfun)F@U)q)G*F=$G&EMKVg4<HYIn-9nblH1Em8<xy>)e#5(MV5|Sp8-p<q
F{@Qfc?Ck&m

literal 983
zcmV;|11S6eM@dveQdv+`00284w0}u=pyxt84URIkw53qFmm-kFEDi~lHw!r1fB&>{
zIP9PRWrbwq*c+H;(SfZZh%ZjHXZ~y-21@lP&<t5Wux3~4ON5)HtEN}Fxk8}aCHS#C
zY)Jnfz@46ng~nXANEH(<wqy{^q6W_=gz;o?o9~A}GK}20mTYNr0;K_aFEaaY2;&4j
z`;l5=hCDDXhtKJ<^YwcNh#9(S8LkyRimbH@!Wjk;l~dBf+oZL(#>3jE^XEeuXBXnD
zs;>RO=-32STb73Q;hA7sVr_SeI^X`89i{DYtlC!gtpsY=J&J|IFEnKJq$a336+$jw
zL1SfZV?Zbntu>*$cftu=gCJ-BJ~n8HX0P#IGt5BQgxDkfrg8~BIYNc%7E+|O(|k1U
zxPUqdhJ@tNp6HWd0n}qZ`6t3!f%5}PTvbXAot;qs^!Y7;_15feNhyo*%3>9ehc|GA
zLvidcB;O{>B!$`4aL@QsSO8#ry-~qE-l{&|HTX~Z1FUMqaq8vm{Q~1kIE51i4)x2u
zz7GF;M2~ouS30O_^`rr;^%g)QGH8u`l@j-=cw+Fy%p<uDJ@#l-5lHNeCCmv&&gqmw
zO>+7H%ty*dj)_*lcN<>Lq@aWv9;JAkOS5g(>KZ<Qfr8ZnN$+m3W2i%~EO0*$5>6*6
zPwJYEig{xrF+;JD3XxSx<rdO??u!xqW=f6gfizs>JLuqQbPm5~k1YwvGM+2(8}sbm
z%)x5tR#lc8&78$-v3G3vN^!V8T4CW7eZV)jt+2kz#jbZYGt0j=nORjJql}U;OA&DE
zi5obGlzmTrsKuY)i?*k+DN30spl5g<-mu(|9Oo}Eo8a&(Y9sA*e3a)sfL{{W)D&20
zhZLYf3J*KDtX^@V!dyND=`Y0Wj3<h@2>bVq9-rtF{rR1#K}SHq8v=zZgESxa7w<2@
zH1do><ls4#cS6h(AJ<v7+W5^;5I-*?&NLTzyhdRBj?aegxIOZ|pu4Rh-NkBDvCE5n
zoZbI*jvOb^&uIN)KDdsAH)b<(3lA+;EuVf5(R#w{2E}A~q6A_ao0E2xI=uphIESqM
zLAubcFWyfN8VqMDNN@J8WAkm_kxxoH5?bW9wS=M&O5(1LJ4O+=oIKeFFkOD*im*$F
z+4AZ<Riii;fNyfeMArr~EIotaavGotuM_%-+%{iIfa9s^r;Kc6PE34(MivMFZ-83{
zTo-z|Hv4hM#c{aaE^l@Wp%vMFUjVHj+X2P2HhZ8Nr>&!Nhs&?BwgGVl^)8Pag-~_5
Fgl@^j-h}`F


From fab92979895228538afd94f9c6647049bd2ca30a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 27 Jun 2024 18:09:21 +0200
Subject: [PATCH 09/19] Test cembra/byjuno invoice

---
 .../components/onboarding/PersonalAddress.vue | 40 +++++++++++++-
 .../pages/onboarding/vv/CheckoutAddress.vue   | 54 ++++++++-----------
 cypress/e2e/checkout-vv/checkout.cy.js        |  5 +-
 .../shop/migrations/0015_cembra_fields.py     |  2 +-
 server/vbv_lernwelt/shop/models.py            |  2 +-
 server/vbv_lernwelt/shop/services.py          |  4 ++
 server/vbv_lernwelt/shop/views.py             |  7 +--
 7 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 233391a0..827738a8 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useEntities } from "@/services/entities";
+import { t } from "i18next";
 
 const props = defineProps<{
   modelValue: {
@@ -11,6 +12,7 @@ const props = defineProps<{
     postal_code: string;
     city: string;
     country_code: string;
+    payment_method: string;
 
     phone_number: string;
     birth_date: string;
@@ -21,6 +23,13 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { countries } = useEntities();
 
+const paymentMethods = computed(() => {
+  return [
+    { value: "credit_card", label: t("a.Debit-/Kreditkarte / Twint") },
+    { value: "cembra_byjuno", label: t("a.Rechnung") },
+  ];
+});
+
 const address = computed({
   get() {
     return props.modelValue;
@@ -168,6 +177,35 @@ const address = computed({
     </div>
 
     <div class="col-span-full">
+      <label
+        for="paymentMethod"
+        class="block text-sm font-medium leading-6 text-gray-900"
+      >
+        {{ $t("a.Zahlungsart") }}
+      </label>
+      <div class="mt-2">
+        <select
+          id="paymentMethod"
+          v-model="address.payment_method"
+          required
+          name="paymentMethod"
+          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+        >
+          <option v-for="pm in paymentMethods" :key="pm.value" :value="pm.value">
+            {{ pm.label }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
+      <p class="mt-4">
+        TODO: Eine Zahlung mit Rechnung wird immer auf deine Privatadresse verrechnet.
+        Du musst zwinged deine Telefonnummer und dein Geburtsdatum angeben.
+      </p>
+    </div>
+
+    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Telefonnummer") }}
       </label>
@@ -183,7 +221,7 @@ const address = computed({
       </div>
     </div>
 
-    <div class="col-span-full">
+    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="birth-date" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Geburtsdatum") }}
       </label>
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 7aea4499..6c605492 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { type User, useUserStore } from "@/stores/user";
 import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
 import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
@@ -56,6 +56,8 @@ const address = ref({
   city: user.city,
   country_code: user.country?.country_code ?? "CH",
 
+  payment_method: "credit_card",
+
   phone_number: user.phone_number,
   birth_date: user.birth_date,
 
@@ -75,14 +77,14 @@ const setWithCompanyAddress = (value: boolean) => {
   address.value.invoice_address = value ? "org" : "prv";
 };
 
-const withCembraInvoice = ref<boolean>(false);
-
-function toggleCembraInvoice() {
-  withCembraInvoice.value = !withCembraInvoice.value;
-  if (!withCembraInvoice.value) {
-    setWithCompanyAddress(false);
+watch(
+  () => address.value.payment_method,
+  (newValue) => {
+    if (newValue === "cembra_byjuno") {
+      setWithCompanyAddress(false);
+    }
   }
-}
+);
 
 type FormErrors = {
   personal: string[];
@@ -136,7 +138,7 @@ function validateAddress() {
     }
   }
 
-  if (withCembraInvoice.value) {
+  if (address.value.payment_method === "cembra_byjuno") {
     if (!address.value.phone_number) {
       formErrors.value.personal.push(t("a.Telefonnummer"));
     }
@@ -211,11 +213,14 @@ const executePayment = async () => {
     address.value.phone_number = normalizeSwissPhoneNumber(address.value.phone_number);
   }
 
+  const addressData = Object.assign({}, address.value);
+  delete addressData.payment_method;
+
   itPost("/api/shop/vv/checkout/", {
     redirect_url: fullHost,
-    address: address.value,
+    address: addressData,
     product: props.courseType,
-    with_cembra_invoice: withCembraInvoice.value,
+    with_cembra_byjuno_invoice: address.value.payment_method === "cembra_byjuno",
     device_fingerprint_session_key: getLocalSessionKey(),
   }).then((res: any) => {
     console.log("Going to next page", res.next_step_url);
@@ -227,7 +232,9 @@ const executePayment = async () => {
 <template>
   <WizardPage :step="2">
     <template #content>
-      <DatatransCembraDeviceFingerprint v-if="withCembraInvoice" />
+      <DatatransCembraDeviceFingerprint
+        v-if="address.payment_method === 'cembra_byjuno'"
+      />
       <h2 class="my-10" data-cy="account-checkout-title">
         {{ $t("a.Lehrgang kaufen") }}
       </h2>
@@ -281,24 +288,7 @@ const executePayment = async () => {
         {{ formErrors.personal.join(", ") }}
       </p>
 
-      <div class="flex flex-row items-center space-x-2 text-sm">
-        <ItToggleSwitch
-          data-cy="cembra-switch"
-          :initially-switched-left="withCembraInvoice"
-          @click="toggleCembraInvoice()"
-        ></ItToggleSwitch>
-        <span :class="{ 'text-gray-700': !withCembraInvoice }">
-          "TODO: Zahlung auf Rechnung/Cembra"
-        </span>
-      </div>
-
-      <section v-if="withCembraInvoice">
-        <p class="mt-4">
-          TODO: Bei Zahlung auf Rechnung/Cembra, wird immer auf deine Privatadresse
-          verrechnet. Du musst zwinged deine Telefonnummer und Geburtsdatum angeben.
-        </p>
-      </section>
-      <section v-else>
+      <section v-if="address.payment_method !== 'cembra_byjuno'">
         <div class="mt-4">
           <button
             v-if="!withCompanyAddress"
@@ -362,7 +352,9 @@ const executePayment = async () => {
         data-cy="continue-pay"
         @click="executePayment"
       >
-        <template v-if="withCembraInvoice">TODO: Mit Rechnung/Cembra bezahlen</template>
+        <template v-if="address.payment_method === 'cembra_byjuno'">
+          {{ $t("a.Mit Rechnung bezahlen") }}
+        </template>
         <template v-else>
           {{ $t("a.Mit Kreditkarte bezahlen") }}
         </template>
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 5039a762..c684aa58 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -119,7 +119,8 @@ describe("checkout.cy.js", () => {
       "contain",
       "Lehrgang kaufen"
     );
-    cy.get('[data-cy="cembra-switch"]').click();
+
+    cy.get('#paymentMethod').select('cembra_byjuno');
 
     cy.get("#street-address").type("Eggersmatt");
     cy.get("#street-number").type("32");
@@ -169,7 +170,7 @@ describe("checkout.cy.js", () => {
       expect(ci.country).to.equal("CH");
       expect(ci.phone_number).to.equal("+41792018586");
       expect(ci.birth_date).to.equal("1982-06-09");
-      expect(ci.cembra_invoice).to.be.true;
+      expect(ci.cembra_byjuno_invoice).to.be.true;
 
       expect(ci.invoice_address).to.equal("prv");
 
diff --git a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
index df6a8601..67061756 100644
--- a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
+++ b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
@@ -16,7 +16,7 @@ class Migration(migrations.Migration):
         ),
         migrations.AddField(
             model_name="checkoutinformation",
-            name="cembra_invoice",
+            name="cembra_byjuno_invoice",
             field=models.BooleanField(default=False),
         ),
         migrations.AddField(
diff --git a/server/vbv_lernwelt/shop/models.py b/server/vbv_lernwelt/shop/models.py
index 0bd11045..1272d881 100644
--- a/server/vbv_lernwelt/shop/models.py
+++ b/server/vbv_lernwelt/shop/models.py
@@ -79,7 +79,7 @@ class CheckoutInformation(models.Model):
     )
 
     # optional fields for cembra payment
-    cembra_invoice = models.BooleanField(default=False)
+    cembra_byjuno_invoice = models.BooleanField(default=False)
     birth_date = models.DateField(null=True, blank=True)
     phone_number = models.CharField(max_length=255, blank=True, default="")
     email = models.CharField(max_length=255, blank=True, default="")
diff --git a/server/vbv_lernwelt/shop/services.py b/server/vbv_lernwelt/shop/services.py
index a763c899..b83091c9 100644
--- a/server/vbv_lernwelt/shop/services.py
+++ b/server/vbv_lernwelt/shop/services.py
@@ -80,6 +80,7 @@ def init_datatrans_transaction(
     datatrans_customer_data: dict = None,
     datatrans_int_data: dict = None,
     context_data: dict = None,
+    with_cembra_byjuno_invoice: bool = False,
 ):
     payload = {
         # We use autoSettle=True, so that we don't have to settle the transaction:
@@ -97,6 +98,9 @@ def init_datatrans_transaction(
         },
     }
 
+    # FIXME: test with working cembra byjuno invoice customer?
+    # if with_cembra_byjuno_invoice:
+    #     payload["paymentMethods"] = ["INT"]
     if datatrans_customer_data:
         payload["customer"] = datatrans_customer_data
     if datatrans_int_data:
diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index 309fb92f..67b8db4d 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -111,14 +111,14 @@ def checkout_vv(request):
     if checkouts.filter(state=CheckoutState.PAID).exists():
         return next_step_response(url="/")
 
-    with_cembra_invoice = request.data.get("with_cembra_invoice", False)
+    with_cembra_byjuno_invoice = request.data.get("with_cembra_byjuno_invoice", False)
     ip_address = request.META.get("REMOTE_ADDR")
     email = request.user.email
 
     try:
         datatrans_customer_data = None
         datatrans_int_data = None
-        if with_cembra_invoice:
+        if with_cembra_byjuno_invoice:
             if "fakeapi" not in settings.DATATRANS_API_ENDPOINT:
                 request.user.set_increment_abacus_debitor_number()
 
@@ -158,6 +158,7 @@ def checkout_vv(request):
             datatrans_customer_data=datatrans_customer_data,
             datatrans_int_data=datatrans_int_data,
             context_data=context_data,
+            with_cembra_byjuno_invoice=with_cembra_byjuno_invoice,
         )
     except InitTransactionException as e:
         if not settings.DEBUG:
@@ -193,7 +194,7 @@ def checkout_vv(request):
         product_description=product.description,
         email=email,
         ip_address=ip_address,
-        cembra_invoice=with_cembra_invoice,
+        cembra_byjuno_invoice=with_cembra_byjuno_invoice,
         device_fingerprint_session_key=request.data.get(
             "device_fingerprint_session_key", ""
         ),

From 52f2b30a5821ce2653fb3d890406acdbc746bd8c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 27 Jun 2024 18:57:27 +0200
Subject: [PATCH 10/19] Translations

---
 client/src/components/onboarding/PersonalAddress.vue | 5 ++---
 client/src/pages/onboarding/vv/CheckoutAddress.vue   | 5 +----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 827738a8..1ebfc9bc 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -25,7 +25,7 @@ const { countries } = useEntities();
 
 const paymentMethods = computed(() => {
   return [
-    { value: "credit_card", label: t("a.Debit-/Kreditkarte / Twint") },
+    { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
     { value: "cembra_byjuno", label: t("a.Rechnung") },
   ];
 });
@@ -200,8 +200,7 @@ const address = computed({
 
     <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
       <p class="mt-4">
-        TODO: Eine Zahlung mit Rechnung wird immer auf deine Privatadresse verrechnet.
-        Du musst zwinged deine Telefonnummer und dein Geburtsdatum angeben.
+        {{ $t("shop.paymentCembraByjunoMessage") }}
       </p>
     </div>
 
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 6c605492..554b4b2e 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -9,7 +9,6 @@ import { useEntities } from "@/services/entities";
 import { useRoute } from "vue-router";
 import { useTranslation } from "i18next-vue";
 import { getVVCourseName } from "./composables";
-import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
 import DatatransCembraDeviceFingerprint from "@/components/onboarding/DatatransCembraDeviceFingerprint.vue";
 import { getLocalSessionKey } from "@/statistics";
 import log from "loglevel";
@@ -214,6 +213,7 @@ const executePayment = async () => {
   }
 
   const addressData = Object.assign({}, address.value);
+  // @ts-ignore
   delete addressData.payment_method;
 
   itPost("/api/shop/vv/checkout/", {
@@ -253,9 +253,6 @@ const executePayment = async () => {
           $t("a.Mit dem Kauf erhältst du Zugang auf den gesamten Kurs (inkl. Prüfung).")
         }}
       </p>
-      <p>
-        {{ $t("a.Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.") }}
-      </p>
 
       <p v-if="paymentError" class="text-bold mt-12 text-lg text-red-700">
         {{

From 4f58415ff5237ba7a5363a57e37b96415cefc84c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 11:05:30 +0200
Subject: [PATCH 11/19] Refactor VV_PRODUCT_NUMBER as const

---
 server/vbv_lernwelt/shop/const.py          | 3 +++
 server/vbv_lernwelt/shop/invoice/abacus.py | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/vbv_lernwelt/shop/const.py b/server/vbv_lernwelt/shop/const.py
index 01eb648b..283fbee3 100644
--- a/server/vbv_lernwelt/shop/const.py
+++ b/server/vbv_lernwelt/shop/const.py
@@ -2,3 +2,6 @@
 VV_DE_PRODUCT_SKU = "vv-de"
 VV_FR_PRODUCT_SKU = "vv-fr"
 VV_IT_PRODUCT_SKU = "vv-it"
+
+# VBV Abacus VV product number
+VV_PRODUCT_NUMBER = "30202"
diff --git a/server/vbv_lernwelt/shop/invoice/abacus.py b/server/vbv_lernwelt/shop/invoice/abacus.py
index 201345d3..50b103f3 100644
--- a/server/vbv_lernwelt/shop/invoice/abacus.py
+++ b/server/vbv_lernwelt/shop/invoice/abacus.py
@@ -5,6 +5,7 @@ from xml.etree.ElementTree import Element, SubElement, tostring
 
 import structlog
 
+from vbv_lernwelt.shop.const import VV_PRODUCT_NUMBER
 from vbv_lernwelt.shop.invoice.abacus_sftp_client import AbacusSftpClient
 from vbv_lernwelt.shop.models import CheckoutInformation, CheckoutState
 
@@ -165,7 +166,7 @@ def render_invoice_xml(
     item_fields = SubElement(item_element, "ItemFields", mode="SAVE")
     SubElement(item_fields, "DeliveryDate").text = order_date.isoformat()
     SubElement(item_fields, "ItemNumber").text = "1"
-    SubElement(item_fields, "ProductNumber").text = "30202"
+    SubElement(item_fields, "ProductNumber").text = VV_PRODUCT_NUMBER
     SubElement(item_fields, "QuantityOrdered").text = "1"
 
     item_text = SubElement(item_element, "ItemText", mode="SAVE")

From b58a7313a8cee7a6f592e3b3940c7f0ec2e2222f Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 14:36:45 +0200
Subject: [PATCH 12/19] Add @vuepic/vue-datepicker for birth date in onboarding

---
 client/package-lock.json                      | 36 +++++++++++++++++++
 client/package.json                           |  1 +
 .../components/onboarding/PersonalAddress.vue | 25 ++++++++-----
 3 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 21502df7..9dd58f6d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "@urql/exchange-graphcache": "^6.3.2",
         "@urql/introspection": "^1.0.2",
         "@urql/vue": "^1.1.2",
+        "@vuepic/vue-datepicker": "^8.8.1",
         "@vueuse/core": "^10.9.0",
         "@vueuse/router": "^10.9.0",
         "cypress": "^12.14.0",
@@ -8212,6 +8213,26 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.1.tgz",
+      "integrity": "sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -26717,6 +26738,21 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "@vuepic/vue-datepicker": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.1.tgz",
+      "integrity": "sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==",
+      "requires": {
+        "date-fns": "^3.6.0"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+          "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+        }
+      }
+    },
     "@vueuse/core": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
diff --git a/client/package.json b/client/package.json
index 5c4742f5..63553cf5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "@urql/exchange-graphcache": "^6.3.2",
     "@urql/introspection": "^1.0.2",
     "@urql/vue": "^1.1.2",
+    "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^10.9.0",
     "@vueuse/router": "^10.9.0",
     "cypress": "^12.14.0",
diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 1ebfc9bc..a33ccddf 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useEntities } from "@/services/entities";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 import { t } from "i18next";
+import dayjs from "dayjs";
 
 const props = defineProps<{
   modelValue: {
@@ -225,14 +228,20 @@ const address = computed({
         {{ $t("a.Geburtsdatum") }}
       </label>
       <div class="mt-2">
-        <input
-          id="birth-date"
+        <VueDatePicker
           v-model="address.birth_date"
-          type="text"
-          name="phone"
-          autocomplete="birth-date"
-          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-        />
+          format="dd.MM.yyyy"
+          no-today
+          model-type="yyyy-MM-dd"
+          name="birth-date"
+          max-date="2007-01-01"
+          prevent-min-max-navigation
+          required
+          :enable-time-picker="false"
+          text-input
+          placeholder="15.06.1982"
+          start-date="1982-01-01"
+        ></VueDatePicker>
       </div>
     </div>
   </div>

From 517d1df38f6a45e6ab86b3fbe0048d79c7ab3c8c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 15:11:39 +0200
Subject: [PATCH 13/19] Add `refno2` field

---
 server/vbv_lernwelt/core/models.py                    |  5 +++--
 .../shop/migrations/0015_cembra_fields.py             |  5 +++++
 server/vbv_lernwelt/shop/models.py                    |  1 +
 server/vbv_lernwelt/shop/services.py                  |  3 +++
 server/vbv_lernwelt/shop/views.py                     | 11 ++++++++---
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/server/vbv_lernwelt/core/models.py b/server/vbv_lernwelt/core/models.py
index f1ee630d..71d4a3db 100644
--- a/server/vbv_lernwelt/core/models.py
+++ b/server/vbv_lernwelt/core/models.py
@@ -118,7 +118,7 @@ class User(AbstractUser):
     # is only set by abacus invoice export code
     abacus_debitor_number = models.BigIntegerField(unique=True, null=True, blank=True)
 
-    def set_increment_abacus_debitor_number(self):
+    def set_increment_abacus_debitor_number(self, disable_save=False):
         if self.abacus_debitor_number:
             return self
 
@@ -130,7 +130,8 @@ class User(AbstractUser):
             current_max if current_max is not None else 60_000_000
         ) + 1
         self.abacus_debitor_number = new_debitor_number
-        self.save()
+        if not disable_save:
+            self.save()
         return self
 
     def create_avatar_url(self, size=400):
diff --git a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
index 67061756..b714a6cd 100644
--- a/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
+++ b/server/vbv_lernwelt/shop/migrations/0015_cembra_fields.py
@@ -39,4 +39,9 @@ class Migration(migrations.Migration):
             name="phone_number",
             field=models.CharField(blank=True, default="", max_length=255),
         ),
+        migrations.AddField(
+            model_name="checkoutinformation",
+            name="refno2",
+            field=models.CharField(blank=True, default="", max_length=255),
+        ),
     ]
diff --git a/server/vbv_lernwelt/shop/models.py b/server/vbv_lernwelt/shop/models.py
index 1272d881..8373bc4d 100644
--- a/server/vbv_lernwelt/shop/models.py
+++ b/server/vbv_lernwelt/shop/models.py
@@ -62,6 +62,7 @@ class CheckoutInformation(models.Model):
 
     invoice_transmitted_at = models.DateTimeField(blank=True, null=True)
     transaction_id = models.CharField(max_length=255)
+    refno2 = models.CharField(max_length=255)
 
     # end user (required)
     first_name = models.CharField(max_length=255)
diff --git a/server/vbv_lernwelt/shop/services.py b/server/vbv_lernwelt/shop/services.py
index b83091c9..f5998d38 100644
--- a/server/vbv_lernwelt/shop/services.py
+++ b/server/vbv_lernwelt/shop/services.py
@@ -7,6 +7,7 @@ import structlog
 from django.conf import settings
 
 from vbv_lernwelt.core.admin import User
+from vbv_lernwelt.shop.const import VV_PRODUCT_NUMBER
 from vbv_lernwelt.shop.datatrans.datatrans_api_client import DatatransApiClient
 from vbv_lernwelt.shop.models import CheckoutState
 
@@ -77,6 +78,7 @@ def init_datatrans_transaction(
     redirect_url_error: str,
     redirect_url_cancel: str,
     webhook_url: str,
+    refno2: str,
     datatrans_customer_data: dict = None,
     datatrans_int_data: dict = None,
     context_data: dict = None,
@@ -90,6 +92,7 @@ def init_datatrans_transaction(
         "currency": "CHF",
         "language": user.language,
         "refno": str(uuid.uuid4()),
+        "refno2": refno2,
         "webhook": {"url": webhook_url},
         "redirect": {
             "successUrl": redirect_url_success,
diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index 67b8db4d..3d0cbad5 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -13,6 +13,7 @@ from vbv_lernwelt.shop.const import (
     VV_DE_PRODUCT_SKU,
     VV_FR_PRODUCT_SKU,
     VV_IT_PRODUCT_SKU,
+    VV_PRODUCT_NUMBER,
 )
 from vbv_lernwelt.shop.models import CheckoutInformation, CheckoutState, Product
 from vbv_lernwelt.shop.services import (
@@ -115,13 +116,16 @@ def checkout_vv(request):
     ip_address = request.META.get("REMOTE_ADDR")
     email = request.user.email
 
+    request.user.set_increment_abacus_debitor_number(
+        disable_save="fakeapi" in settings.DATATRANS_API_ENDPOINT
+    )
+
+    refno2 = f"{request.user.abacus_debitor_number}_{VV_PRODUCT_NUMBER}"
+
     try:
         datatrans_customer_data = None
         datatrans_int_data = None
         if with_cembra_byjuno_invoice:
-            if "fakeapi" not in settings.DATATRANS_API_ENDPOINT:
-                request.user.set_increment_abacus_debitor_number()
-
             # see https://api-reference.datatrans.ch/#tag/v1transactions as reference
             datatrans_customer_data = {
                 "firstName": request.user.first_name,
@@ -155,6 +159,7 @@ def checkout_vv(request):
             ),
             redirect_url_cancel=checkout_cancel_url(base_redirect_url),
             webhook_url=webhook_url(base_redirect_url),
+            refno2=refno2,
             datatrans_customer_data=datatrans_customer_data,
             datatrans_int_data=datatrans_int_data,
             context_data=context_data,

From d0b357c33c76290eeb28ea8c692309c142c4b648 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 15:36:27 +0200
Subject: [PATCH 14/19] Fix tests

---
 client/src/components/onboarding/PersonalAddress.vue     | 8 ++++++--
 cypress/e2e/checkout-vv/checkout.cy.js                   | 3 ++-
 server/vbv_lernwelt/core/admin.py                        | 2 ++
 server/vbv_lernwelt/shop/tests/test_datatrans_service.py | 2 ++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index a33ccddf..01c40306 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 import { useEntities } from "@/services/entities";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { t } from "i18next";
-import dayjs from "dayjs";
+import { useUserStore } from "@/stores/user";
 
 const props = defineProps<{
   modelValue: {
@@ -25,6 +25,7 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"]);
 
 const { countries } = useEntities();
+const userStore = useUserStore();
 
 const paymentMethods = computed(() => {
   return [
@@ -241,6 +242,9 @@ const address = computed({
           text-input
           placeholder="15.06.1982"
           start-date="1982-01-01"
+          :locale="userStore.language"
+          :cancel-text="$t('a.Abbrechen')"
+          :select-text="$t('a.Auswählen')"
         ></VueDatePicker>
       </div>
     </div>
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index c684aa58..00f39ac7 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -128,7 +128,7 @@ describe("checkout.cy.js", () => {
     cy.get("#city").type("Zumholz");
 
     cy.get("#phone").type("079 201 85 86");
-    cy.get("#birth-date").type("1982-06-09");
+    cy.get('[data-test="dp-input"]').type("09.06.1982{enter}");
 
     cy.get('[data-cy="continue-pay"]').click();
 
@@ -149,6 +149,7 @@ describe("checkout.cy.js", () => {
       expect(entry.api_request_data.customer.country).to.equal("CH");
       expect(entry.api_request_data.customer.type).to.equal("P");
       expect(entry.api_request_data.customer.phone).to.equal("+41792018586");
+      expect(entry.api_request_data.customer.birthDate).to.equal("1982-06-09");
 
       expect(entry.api_request_data.INT.repaymentType).to.equal(3);
       expect(entry.api_request_data.INT.riskOwner).to.equal("IJ");
diff --git a/server/vbv_lernwelt/core/admin.py b/server/vbv_lernwelt/core/admin.py
index e0c70dbb..962c9b71 100644
--- a/server/vbv_lernwelt/core/admin.py
+++ b/server/vbv_lernwelt/core/admin.py
@@ -60,6 +60,8 @@ class UserAdmin(auth_admin.UserAdmin):
                     "postal_code",
                     "city",
                     "country",
+                    "birth_date",
+                    "phone_number",
                     "invoice_address",
                 )
             },
diff --git a/server/vbv_lernwelt/shop/tests/test_datatrans_service.py b/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
index 08de6287..6dc907fe 100644
--- a/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
+++ b/server/vbv_lernwelt/shop/tests/test_datatrans_service.py
@@ -43,6 +43,7 @@ class DatatransServiceTest(TestCase):
             redirect_url_error=f"{REDIRECT_URL}/error",
             redirect_url_cancel=f"{REDIRECT_URL}/cancel",
             webhook_url=f"{REDIRECT_URL}/webhook",
+            refno2="",
         )
 
         self.assertEqual(1234567890, transaction_id)
@@ -68,6 +69,7 @@ class DatatransServiceTest(TestCase):
                 redirect_url_error=f"/error",
                 redirect_url_cancel=f"/cancel",
                 webhook_url=f"/webhook",
+                refno2="",
             )
 
     def test_get_payment_url(self):

From a53459f8bf1444bd93c487dcb6a759ec9b91e708 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 16:12:38 +0200
Subject: [PATCH 15/19] Theming for date picker

---
 .../components/onboarding/PersonalAddress.vue    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 01c40306..505c45cd 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -250,3 +250,19 @@ const address = computed({
     </div>
   </div>
 </template>
+
+<style>
+/* Theming for date picker */
+.dp__theme_light {
+  --dp-text-color: #585f63;
+  --dp-primary-color: #41b5fa;
+  --dp-border-color-focus: #3d6dcc;
+}
+
+:root {
+  --dp-font-family: "Buenos Aires" sans-serif;
+  --dp-border-radius: none;
+  --dp-font-size: 0.875rem;
+  --dp-cell-border-radius: none;
+}
+</style>

From dc576f4fa3ebff0741310316c9a30452462269b6 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 2 Jul 2024 16:25:13 +0200
Subject: [PATCH 16/19] Ignore test_cypress_datatrans.py

---
 server/conftest.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server/conftest.py b/server/conftest.py
index 74d55690..7bd76cc9 100644
--- a/server/conftest.py
+++ b/server/conftest.py
@@ -2,6 +2,11 @@ import pytest
 from _pytest.runner import runtestprotocol
 
 
+def pytest_ignore_collect(path, config):
+    if path.basename == "test_cypress_datatrans.py":
+        return True
+
+
 @pytest.hookimpl(tryfirst=True)
 def pytest_collection_modifyitems(config, items):
     parallel_items = []

From 8d9e111892dd76d253dd36ad1b9ccd554f8203a8 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Thu, 4 Jul 2024 15:49:09 +0200
Subject: [PATCH 17/19] Log datatrans webhook on Database

---
 server/vbv_lernwelt/shop/views.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/vbv_lernwelt/shop/views.py b/server/vbv_lernwelt/shop/views.py
index 3d0cbad5..1ce904a3 100644
--- a/server/vbv_lernwelt/shop/views.py
+++ b/server/vbv_lernwelt/shop/views.py
@@ -41,6 +41,10 @@ def transaction_webhook(request):
 
     logger.info("Webhook: Datatrans called transaction webhook", body=request.body)
 
+    request._request.security_request_logging = "datatrans_webhook"
+    request._request.type = "datatrans"
+    request._request.log_additional_json_data = request.data
+
     if not is_signature_valid(
         signature=request.headers.get("Datatrans-Signature", ""),
         payload=request.body,

From d9efdb0d73558f42ed4a30f1bb68c7d5001e9ba3 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 10 Jul 2024 18:08:25 +0200
Subject: [PATCH 18/19] chore: `paymentMethods` does not have to be computed

---
 client/src/components/onboarding/PersonalAddress.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 505c45cd..0430d18a 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -27,12 +27,10 @@ const emit = defineEmits(["update:modelValue"]);
 const { countries } = useEntities();
 const userStore = useUserStore();
 
-const paymentMethods = computed(() => {
-  return [
-    { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
-    { value: "cembra_byjuno", label: t("a.Rechnung") },
-  ];
-});
+const paymentMethods = [
+  { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
+  { value: "cembra_byjuno", label: t("a.Rechnung") },
+];
 
 const address = computed({
   get() {

From 3d3556f692d43cacf48bf31eb5f582d69ebeb7ac Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 10 Jul 2024 18:12:25 +0200
Subject: [PATCH 19/19] Filter out "cembra_byjuno" for prod

---
 client/src/components/onboarding/PersonalAddress.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index 0430d18a..e40dd405 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -32,6 +32,13 @@ const paymentMethods = [
   { value: "cembra_byjuno", label: t("a.Rechnung") },
 ];
 
+// TODO: remove after cembra is ready for production
+const appEnv = import.meta.env.VITE_APP_ENVIRONMENT || "local";
+if (appEnv.startsWith("prod")) {
+  paymentMethods.splice(1, 1);
+}
+// END TODO
+
 const address = computed({
   get() {
     return props.modelValue;