begin integration of payment gateways

src/webapp/main/src/views/purchasing/PurchaseView.vue

@@ -67,6 +67,7 @@
                 </div>
             </div>
         </div>
+        <notifications ref="notification" location="topleft" size="bigger"></notifications>
     </div>
 </template>
 
@@ -80,6 +81,7 @@
         transition: all 0.5s;
         font-size: 100%;
         margin-top: 4%;
+        cursor: pointer;
     }
 
     #buy-button:hover {
@@ -192,6 +194,7 @@
 import { useUserStore } from '@/stores/userStore';
 import { useBackendStore } from '@/stores/backendStore';
 import { mapStores } from 'pinia';
+import notifications from '@/components/notifications/notifications.vue';
 
 export default {
     name: 'PurchaseView',
@@ -205,6 +208,9 @@ export default {
             userData: {},
         }
     },
+    components: {
+        notifications,
+    },
     computed: {
         ...mapStores( useUserStore ),
         ...mapStores( useBackendStore )
@@ -248,6 +254,11 @@ export default {
                 route (plain HTML document) which then awaits processing completion and gives the
                 user a link to download the ticket. A mail has been sent to user automatically.
             */
+            let prep = this.$refs.notification.createNotification( 'Preparing payment...', 20, 'progress', 'high' );
+            setTimeout( () => {
+                this.$refs.notification.cancelNotification( prep );
+                this.$refs.notification.createNotification( 'Payment prepared, redirecting...', 5, 'progress', 'high' );
+            }, 5000 );
         }
     },
     created () {

src/webapp/main/src/views/purchasing/TicketsDetailsView.vue

@@ -11,8 +11,8 @@
     <div class="details">
         <div class="top-container" :style="`background: url( ${ event.banner } ); background-repeat: no-repeat; background-size: cover;`">
             <h1 class="eventTitle">{{ event.name }}</h1>
+            <router-link to="/tickets" class="back-button"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span></router-link>
         </div>
-        <router-link to="/tickets"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span>Back</router-link>
         <p>{{ event.description }}</p>
         <router-link to="/tickets/order">Order tickets</router-link>
     </div>
@@ -37,6 +37,22 @@
         padding: 1.5% 3%;
         margin: 0;
     }
+
+    .back-button {
+        color: white;
+        background-color: rgb(31, 31, 31);
+        padding: 10px;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: fit-content;
+        height: fit-content;
+        text-decoration: none;
+        position: fixed;
+        left: 2vh;
+        top: 2vh;
+    }
 </style>
 
 <script>