Stripe Integration

bizmatch/src/app/pages/success/success.component.html

@@ -0,0 +1,31 @@
+<div class="min-h-screen flex items-center justify-center">
+  <div class="bg-white p-6 rounded-lg shadow-lg max-w-md">
+    <div class="text-center">
+      @if(user && (user.subscriptionPlan==='professional' || user.subscriptionPlan==='broker')){
+      <svg class="mx-auto h-16 w-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+      </svg>
+      <h2 class="text-2xl font-bold text-gray-800 mt-4">Subscription Successful!</h2>
+      <p class="text-gray-600 mt-2">Thank you for subscribing to our service.</p>
+      <p class="text-gray-600 mt-2">
+        You have successfully subscribed to the @if(user.subscriptionPlan==='professional'){
+        <span class="font-semibold text-gray-800">Professional (CPA, Attorney, Title Company) Plan</span>
+        } @if(user.subscriptionPlan==='broker'){
+        <span class="font-semibold text-gray-800">Business Broker Plan</span>. }
+      </p>
+      <p class="text-gray-600 mt-2">We are excited to have you on board!</p>
+
+      <div class="mt-6">
+        <a routerLink="/account" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg">Go to your Account</a>
+      </div>
+
+      <div class="mt-4 text-sm text-gray-500">
+        <p>If you have any questions, feel free to <a routerLink="/emailUs" class="text-blue-500 hover:underline">contact our support team</a>.</p>
+      </div>
+      } @else {
+      <p class="text-gray-600 mt-2">We are processing your subscription - Please be patient</p>
+      <div class="loader mt-8 mx-auto"></div>
+      }
+    </div>
+  </div>
+</div>

bizmatch/src/app/pages/success/success.component.scss

@@ -0,0 +1,33 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 15px;
+  aspect-ratio: 1;
+  position: relative;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #000;
+}
+.loader::before {
+  box-shadow: -25px 0;
+  animation: l8-1 1s infinite linear;
+}
+.loader::after {
+  transform: rotate(0deg) translateX(25px);
+  animation: l8-2 1s infinite linear;
+}
+
+@keyframes l8-1 {
+  100% {
+    transform: translateX(25px);
+  }
+}
+@keyframes l8-2 {
+  100% {
+    transform: rotate(-180deg) translateX(25px);
+  }
+}

bizmatch/src/app/pages/success/success.component.ts

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
+import { User } from '../../../../../bizmatch-server/src/models/db.model';
+import { LogService } from '../../services/log.service';
+import { UserService } from '../../services/user.service';
+import { map2User } from '../../utils/utils';
+
+@Component({
+  selector: 'app-success',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './success.component.html',
+  styleUrl: './success.component.scss',
+})
+export class SuccessComponent {
+  user: User;
+  constructor(private keycloakService: KeycloakService, private userService: UserService, private logService: LogService, private router: Router) {}
+  async ngOnInit() {
+    let email = null;
+    try {
+      const token = await this.keycloakService.getToken();
+      const keycloakUser = map2User(token);
+      email = keycloakUser.email;
+      this.user = await this.userService.getByMail(email);
+      this.checkSubscriptionPlan(email);
+    } catch (e) {
+      this.checkSubscriptionPlan(email, e.message);
+    }
+  }
+  async checkSubscriptionPlan(email: string, error?: string) {
+    if (!email) {
+      this.logService.log({ severity: 'error', text: `Unauthorized Access to Success Page ${error}` });
+      this.router.navigate(['home']);
+      return;
+    }
+
+    let attempts = 0;
+    const maxAttempts = 5;
+    const interval = 5000; // 5 Sekunden
+
+    const intervalId = setInterval(async () => {
+      if (attempts >= maxAttempts) {
+        clearInterval(intervalId);
+        console.error('Max attempts reached');
+        return;
+      }
+
+      attempts++;
+
+      this.user = await this.userService.getByMail(email);
+
+      if (this.user && this.user.subscriptionPlan) {
+        clearInterval(intervalId);
+        console.log('Subscription plan is set:', this.user.subscriptionPlan);
+      } else {
+        console.log(`Attempt ${attempts}: Subscription plan is not set yet.`);
+      }
+    }, interval);
+  }
+}