Stripe Integration

bizmatch-server/package.json

@@ -34,6 +34,8 @@
     "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.0.0",
     "@nestjs/serve-static": "^4.0.1",
+    "@types/stripe": "^8.0.417",
+    "body-parser": "^1.20.2",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.32.0",
@@ -55,6 +57,7 @@
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1",
     "sharp": "^0.33.2",
+    "stripe": "^16.8.0",
     "tsx": "^4.16.2",
     "urlcat": "^3.1.0",
     "winston": "^3.11.0",
@@ -114,4 +117,4 @@
     "coverageDirectory": "../coverage",
     "testEnvironment": "node"
   }
-}
+}

bizmatch-server/src/ai/ai.service.ts

@@ -68,7 +68,7 @@ export class AiService {
             role: 'system',
             content: `Please create unformatted JSON Object from a user input.
                       The type must be: ${JSON.stringify(businessListingCriteriaStructure)}.
-                      If location details available please fill city, county and state as State Code`,
+                      If location details available please fill city and state as State Code and only county if explicitly mentioned`,
           },
           {
             role: 'user',
@@ -77,6 +77,8 @@ export class AiService {
         ],
         model: 'llama-3.1-70b-versatile',
         //model: 'llama-3.1-8b-instant',
+        // model: 'mixtral-8x7b-32768',
+        //model: 'gemma2-9b-it',
         temperature: 0.2,
         max_tokens: 300,
         response_format: { type: 'json_object' },

bizmatch-server/src/app.module.ts

@@ -17,6 +17,7 @@ import { LogController } from './log/log.controller.js';
 import { LogModule } from './log/log.module.js';
 
 import { MailModule } from './mail/mail.module.js';
+import { PaymentModule } from './payment/payment.module.js';
 import { RequestDurationMiddleware } from './request-duration/request-duration.middleware.js';
 import { SelectOptionsModule } from './select-options/select-options.module.js';
 import { UserModule } from './user/user.module.js';
@@ -79,6 +80,7 @@ loadEnvFiles();
     PassportModule,
     AiModule,
     LogModule,
+    PaymentModule,
   ],
   controllers: [AppController, LogController],
   providers: [AppService, FileService],

bizmatch-server/src/drizzle/import.ts

@@ -115,7 +115,7 @@ fs.ensureDirSync(`./pictures/property`);
 //User
 for (let index = 0; index < usersData.length; index++) {
   const userData = usersData[index];
-  const user: User = createDefaultUser('', '', '');
+  const user: User = createDefaultUser('', '', '', null);
   user.licensedIn = [];
   userData.licensedIn.forEach(l => {
     console.log(l['value'], l['name']);

bizmatch-server/src/drizzle/schema.ts

@@ -5,6 +5,7 @@ export const genderEnum = pgEnum('gender', ['male', 'female']);
 export const customerTypeEnum = pgEnum('customerType', ['buyer', 'professional']);
 export const customerSubTypeEnum = pgEnum('customerSubType', ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
 export const listingsCategoryEnum = pgEnum('listingsCategory', ['commercialProperty', 'business']);
+export const subscriptionTypeEnum = pgEnum('subscriptionType', ['free', 'professional', 'broker']);
 
 export const users = pgTable('users', {
   id: uuid('id').primaryKey().defaultRandom().notNull(),
@@ -30,6 +31,11 @@ export const users = pgTable('users', {
   updated: timestamp('updated'),
   latitude: doublePrecision('latitude'),
   longitude: doublePrecision('longitude'),
+  stripeCustomerId: text('stripeCustomerId'),
+  subscriptionId: text('subscriptionId'),
+  planActive: boolean('planActive').default(false),
+  planExpires: timestamp('planExpires'),
+  subscriptionPlan: subscriptionTypeEnum('subscriptionType'),
   // embedding: vector('embedding', { dimensions: 1536 }),
 });
 

bizmatch-server/src/mail/mail.service.ts

@@ -3,7 +3,7 @@ import { BadRequestException, Injectable } from '@nestjs/common';
 import path, { join } from 'path';
 import { fileURLToPath } from 'url';
 import { ZodError } from 'zod';
-import { SenderSchema } from '../models/db.model.js';
+import { SenderSchema, User } from '../models/db.model.js';
 import { ErrorResponse, MailInfo, isEmpty } from '../models/main.model.js';
 import { UserService } from '../user/user.service.js';
 const __filename = fileURLToPath(import.meta.url);
@@ -81,4 +81,19 @@ export class MailService {
       },
     });
   }
+  async sendSubscriptionConfirmation(user: User): Promise<void> {
+    await this.mailerService.sendMail({
+      to: 'support@bizmatch.net',
+      from: `"Bizmatch Support Team" <info@bizmatch.net>`,
+      subject: `Subscription Confirmation`,
+      //template: './inquiry', // `.hbs` extension is appended automatically
+      template: join(__dirname, '../..', 'mail/templates/subscriptionConfirmation.hbs'),
+      context: {
+        // ✏️ filling curly brackets with content
+        firstname: user.firstname,
+        lastname: user.lastname,
+        subscriptionPlan: user.subscriptionPlan,
+      },
+    });
+  }
 }

bizmatch-server/src/mail/templates/subscriptionConfirmation.hbs

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Subscription Confirmation</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            color: #333333;
+            margin: 0;
+            padding: 0;
+        }
+        .email-container {
+            max-width: 600px;
+            margin: 20px auto;
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            text-align: center;
+            border-bottom: 1px solid #dddddd;
+            padding-bottom: 20px;
+        }
+        .header h1 {
+            font-size: 24px;
+            color: #333333;
+        }
+        .content {
+            margin-top: 20px;
+        }
+        .content p {
+            font-size: 16px;
+            line-height: 1.6;
+        }
+        .content .plan-info {
+            font-weight: bold;
+            color: #0056b3;
+        }
+        .footer {
+            margin-top: 30px;
+            text-align: center;
+            font-size: 14px;
+            color: #888888;
+        }
+    </style>
+</head>
+<body>
+    <div class="email-container">
+        <div class="header">
+            <h1>Subscription Confirmation</h1>
+        </div>
+        <div class="content">
+            <p>Dear {{firstname}} {{lastname}},</p>
+
+            <p>Thank you for subscribing to our service! We are thrilled to have you on board.</p>
+
+            <p>Your subscription details are as follows:</p>
+
+            <p><span class="plan-info">{{#if (eq subscriptionPlan "professional")}}Professional (CPA, Attorney, Title Company) Plan{{else if (eq subscriptionPlan "broker")}}Business Broker Plan{{/if}}</span></p>
+
+            <p>If you have any questions or need further assistance, please feel free to contact our support team at any time.</p>
+
+            <p>Thank you for choosing Bizmatch!</p>
+
+            <p>Best regards,</p>
+            <p>The Bizmatch Support Team</p>
+        </div>
+        <div class="footer">
+            <p>© 2024 Bizmatch. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

bizmatch-server/src/main.ts

@@ -1,10 +1,12 @@
 import { NestFactory } from '@nestjs/core';
+import bodyParser from 'body-parser';
 import express from 'express';
 import { AppModule } from './app.module.js';
 
 async function bootstrap() {
   const server = express();
   const app = await NestFactory.create(AppModule);
+  app.use('/bizmatch/payment/webhook', bodyParser.raw({ type: 'application/json' }));
   app.setGlobalPrefix('bizmatch');
   app.enableCors({
     origin: '*',

bizmatch-server/src/models/db.model.ts

@@ -29,6 +29,7 @@ export type ListingsCategory = 'commercialProperty' | 'business';
 
 export const GenderEnum = z.enum(['male', 'female']);
 export const CustomerTypeEnum = z.enum(['buyer', 'professional']);
+export const SubscriptionTypeEnum = z.enum(['free', 'professional', 'broker']);
 export const CustomerSubTypeEnum = z.enum(['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
 export const ListingsCategoryEnum = z.enum(['commercialProperty', 'business']);
 const PropertyTypeEnum = z.enum(['retail', 'land', 'industrial', 'office', 'mixedUse', 'multifamily', 'uncategorized']);
@@ -156,6 +157,11 @@ export const UserSchema = z
     customerSubType: CustomerSubTypeEnum.optional().nullable(),
     created: z.date().optional().nullable(),
     updated: z.date().optional().nullable(),
+    stripeCustomerId: z.string().optional().nullable(),
+    subscriptionId: z.string().optional().nullable(),
+    planActive: z.boolean().optional().nullable(),
+    planExpires: z.date().optional().nullable(),
+    subscriptionPlan: SubscriptionTypeEnum.optional().nullable(),
   })
   .superRefine((data, ctx) => {
     if (data.customerType === 'professional') {

bizmatch-server/src/models/main.model.ts

@@ -255,6 +255,10 @@ export interface ModalResult {
   accepted: boolean;
   criteria?: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
 }
+export interface Checkout {
+  priceId: string;
+  email: string;
+}
 export function isEmpty(value: any): boolean {
   // Check for undefined or null
   if (value === undefined || value === null) {
@@ -294,7 +298,7 @@ export interface ValidationMessage {
   field: string;
   message: string;
 }
-export function createDefaultUser(email: string, firstname: string, lastname: string): User {
+export function createDefaultUser(email: string, firstname: string, lastname: string, subscriptionPlan: 'free' | 'professional' | 'broker'): User {
   return {
     id: undefined,
     email,
@@ -316,6 +320,11 @@ export function createDefaultUser(email: string, firstname: string, lastname: st
     customerSubType: null,
     created: new Date(),
     updated: new Date(),
+    stripeCustomerId: null,
+    subscriptionId: null,
+    planActive: false,
+    planExpires: null,
+    subscriptionPlan: subscriptionPlan,
   };
 }
 export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {

bizmatch-server/src/payment/payment.controller.ts

@@ -0,0 +1,36 @@
+import { Body, Controller, HttpException, HttpStatus, Post, Req, Res } from '@nestjs/common';
+import { Request, Response } from 'express';
+import { Checkout } from 'src/models/main.model.js';
+import Stripe from 'stripe';
+import { PaymentService } from './payment.service.js';
+
+@Controller('payment')
+export class PaymentController {
+  constructor(private readonly paymentService: PaymentService) {}
+
+  // @Post()
+  // async createSubscription(@Body() subscriptionData: any) {
+  //   return this.paymentService.createSubscription(subscriptionData);
+  // }
+  @Post('create-checkout-session')
+  async calculateTax(@Body() checkout: Checkout) {
+    return this.paymentService.checkout(checkout);
+  }
+  @Post('webhook')
+  async handleWebhook(@Req() req: Request, @Res() res: Response): Promise<void> {
+    const signature = req.headers['stripe-signature'] as string;
+
+    try {
+      const event = await this.paymentService.constructEvent(req.body, signature);
+
+      if (event.type === 'checkout.session.completed') {
+        await this.paymentService.handleCheckoutSessionCompleted(event.data.object as Stripe.Checkout.Session);
+      }
+
+      res.status(200).send('Webhook received');
+    } catch (error) {
+      console.error(`Webhook Error: ${error.message}`);
+      throw new HttpException('Webhook Error', HttpStatus.BAD_REQUEST);
+    }
+  }
+}

bizmatch-server/src/payment/payment.module.ts

@@ -0,0 +1,17 @@
+import { Module } from '@nestjs/common';
+import { DrizzleModule } from '../drizzle/drizzle.module.js';
+import { FileService } from '../file/file.service.js';
+import { GeoService } from '../geo/geo.service.js';
+import { MailModule } from '../mail/mail.module.js';
+import { MailService } from '../mail/mail.service.js';
+import { UserModule } from '../user/user.module.js';
+import { UserService } from '../user/user.service.js';
+import { PaymentController } from './payment.controller.js';
+import { PaymentService } from './payment.service.js';
+
+@Module({
+  imports: [DrizzleModule, UserModule, MailModule],
+  providers: [PaymentService, UserService, MailService, FileService, GeoService],
+  controllers: [PaymentController],
+})
+export class PaymentModule {}

bizmatch-server/src/payment/payment.service.ts

@@ -0,0 +1,81 @@
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver.js';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import Stripe from 'stripe';
+import { Logger } from 'winston';
+import * as schema from '../drizzle/schema.js';
+import { PG_CONNECTION } from '../drizzle/schema.js';
+import { MailService } from '../mail/mail.service.js';
+import { Checkout } from '../models/main.model.js';
+import { UserService } from '../user/user.service.js';
+export interface BillingAddress {
+  country: string;
+  state: string;
+}
+@Injectable()
+export class PaymentService {
+  private stripe: Stripe;
+
+  constructor(
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    private readonly userService: UserService,
+    private readonly mailService: MailService,
+  ) {
+    this.stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
+      apiVersion: '2024-06-20',
+    });
+  }
+  async checkout(checkout: Checkout) {
+    try {
+      const session = await this.stripe.checkout.sessions.create({
+        mode: 'subscription',
+        payment_method_types: ['card'],
+        line_items: [
+          {
+            price: checkout.priceId,
+            quantity: 1,
+          },
+        ],
+        success_url: 'http://localhost:4200/success',
+        cancel_url: 'http://localhost:4200/pricing',
+        customer_email: checkout.email,
+        shipping_address_collection: {
+          allowed_countries: ['US'],
+        },
+        client_reference_id: '1234',
+        locale: 'en',
+      });
+
+      return session;
+    } catch (e) {
+      throw new BadRequestException(`error during checkout: ${e}`);
+    }
+  }
+  async constructEvent(body: string | Buffer, signature: string) {
+    return this.stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
+  }
+  async handleCheckoutSessionCompleted(session: Stripe.Checkout.Session): Promise<void> {
+    this.logger.info(JSON.stringify(session));
+    //const jwtUser:JwtUser = {firstname:,lastname:}
+    const user = await this.userService.getUserByMail(session.customer_details.email);
+    user.stripeCustomerId = session.customer as string;
+    user.subscriptionId = session.subscription as string;
+    user.planActive = true;
+    //session.shipping_details ->
+    // "shipping_details": {
+    //     "address": {
+    //         "city": "Springfield",
+    //         "country": "US",
+    //         "line1": "West Maple Avenue South",
+    //         "line2": null,
+    //         "postal_code": "62704",
+    //         "state": "IL"
+    //     },
+    //     "name": "Johnathan Miller"
+    // }
+    user.subscriptionPlan = session.amount_total === 4900 ? 'broker' : 'professional'; //session.metadata['subscriptionPlan'] as 'free' | 'professional' | 'broker';
+    this.userService.saveUser(user);
+    this.mailService.sendSubscriptionConfirmation(user);
+  }
+}

bizmatch-server/src/user/user.service.ts

@@ -96,7 +96,7 @@ export class UserService {
       .from(schema.users)
       .where(sql`email = ${email}`)) as User[];
     if (users.length === 0) {
-      const user: User = { id: undefined, customerType: 'buyer', ...createDefaultUser(email, jwtuser.firstname, jwtuser.lastname) };
+      const user: User = { id: undefined, customerType: 'buyer', ...createDefaultUser(email, jwtuser.firstname, jwtuser.lastname, 'free') };
       const u = await this.saveUser(user);
       return convertDrizzleUserToUser(u);
     } else {

bizmatch/package.json

@@ -31,6 +31,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@ng-select/ng-select": "^13.4.1",
     "@ngneat/until-destroy": "^10.0.0",
+    "@stripe/stripe-js": "^4.3.0",
     "@types/cropperjs": "^1.3.0",
     "@types/uuid": "^10.0.0",
     "browser-bunyan": "^1.8.0",
@@ -45,6 +46,7 @@
     "ngx-image-cropper": "^8.0.0",
     "ngx-mask": "^18.0.0",
     "ngx-quill": "^26.0.5",
+    "ngx-stripe": "^18.1.0",
     "on-change": "^5.0.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
@@ -71,4 +73,4 @@
     "tailwindcss": "^3.4.4",
     "typescript": "~5.4.5"
   }
-}
+}

bizmatch/src/app/app.config.ts

@@ -5,6 +5,7 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@a
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
 import { provideQuillConfig } from 'ngx-quill';
+import { provideNgxStripe } from 'ngx-stripe';
 import { environment } from '../environments/environment';
 import { customKeycloakAdapter } from '../keycloak';
 import { routes } from './app.routes';
@@ -52,6 +53,7 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     provideAnimations(),
+    provideNgxStripe('pk_test_IlpbVQhxAXZypLgnCHOCqlj8'),
     provideQuillConfig({
       modules: {
         syntax: true,

bizmatch/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { LogoutComponent } from './components/logout/logout.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 
+import { PaymentComponent } from './components/payment/payment.component';
 import { AuthGuard } from './guards/auth.guard';
 import { ListingCategoryGuard } from './guards/listing-category.guard';
 import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
@@ -18,6 +19,7 @@ import { EditCommercialPropertyListingComponent } from './pages/subscription/edi
 import { EmailUsComponent } from './pages/subscription/email-us/email-us.component';
 import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
 import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
+import { SuccessComponent } from './pages/success/success.component';
 
 export const routes: Routes = [
   {
@@ -132,5 +134,17 @@ export const routes: Routes = [
     path: 'pricing',
     component: PricingComponent,
   },
+  {
+    path: 'pricing/:id',
+    component: PricingComponent,
+  },
+  {
+    path: 'payment',
+    component: PaymentComponent,
+  },
+  {
+    path: 'success',
+    component: SuccessComponent,
+  },
   { path: '**', redirectTo: 'home' },
 ];

bizmatch/src/app/components/payment/payment.component.html

@@ -0,0 +1,161 @@
+<section class="bg-white py-8 antialiased dark:bg-gray-900 md:py-16">
+  <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
+    <div class="mx-auto max-w-5xl">
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">Payment</h2>
+
+      <div class="mt-6 sm:mt-8 lg:flex lg:items-start lg:gap-12">
+        <form action="#" class="w-full rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6 lg:max-w-xl lg:p-8">
+          <div ngxStripeCardGroup class="mb-6 grid grid-cols-2 gap-4">
+            <div class="col-span-2 sm:col-span-1">
+              <label for="full_name" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Full name (as displayed on card)* </label>
+              <input
+                type="text"
+                id="full_name"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="Bonnie Green"
+                required
+              />
+            </div>
+
+            <!-- <ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
+            <ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc> -->
+            <div class="col-span-2 sm:col-span-1">
+              <label for="card-number-input" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Card number* </label>
+              <!-- <input
+                type="text"
+                id="card-number-input"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pe-10 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="xxxx-xxxx-xxxx-xxxx"
+                pattern="^4[0-9]{12}(?:[0-9]{3})?$"
+                required
+              /> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-number [options]="numberOptions"></ngx-stripe-card-number>
+              </div>
+              <!-- <ngx-stripe-card [options]="cardOptions" /> -->
+            </div>
+
+            <div>
+              <label for="card-expiration-input" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Card expiration* </label>
+              <!-- <div class="relative">
+                <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5">
+                  <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      fill-rule="evenodd"
+                      d="M5 5a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1 2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a2 2 0 0 1 2-2ZM3 19v-7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm6.01-6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-10 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <input
+                  datepicker
+                  datepicker-format="mm/yy"
+                  id="card-expiration-input"
+                  type="text"
+                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-9 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                  placeholder="12/23"
+                  required
+                />
+              </div> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-expiry [options]="cvcOptions"></ngx-stripe-card-expiry>
+              </div>
+            </div>
+            <div>
+              <label for="cvv-input" class="mb-2 flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-white">
+                CVV*
+                <button data-tooltip-target="cvv-desc" data-tooltip-trigger="hover" class="text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white">
+                  <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      fill-rule="evenodd"
+                      d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.408-5.5a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1h-2Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+                <div
+                  id="cvv-desc"
+                  role="tooltip"
+                  class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
+                >
+                  The last 3 or 4 digits on back of card
+                  <div class="tooltip-arrow" data-popper-arrow></div>
+                </div>
+              </label>
+              <!-- <input
+                type="number"
+                id="cvv-input"
+                aria-describedby="helper-text-explanation"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="•••"
+                required
+              /> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-cvc [options]="cvcOptions"></ngx-stripe-card-cvc>
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+          >
+            Pay now
+          </button>
+        </form>
+
+        <div class="mt-6 grow sm:mt-8 lg:mt-0">
+          <div class="space-y-4 rounded-lg border border-gray-100 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800">
+            <div class="space-y-2">
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Subscription Price</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$49.00</dd>
+              </dl>
+
+              <!-- <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Savings</dt>
+                <dd class="text-base font-medium text-green-500">-$299.00</dd>
+              </dl>
+
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Store Pickup</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$99</dd>
+              </dl> -->
+
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Tax</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$1.43</dd>
+              </dl>
+            </div>
+
+            <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
+              <dt class="text-base font-bold text-gray-900 dark:text-white">Total</dt>
+              <dd class="text-base font-bold text-gray-900 dark:text-white">$50.43</dd>
+            </dl>
+          </div>
+
+          <div class="mt-6 flex items-center justify-center gap-8">
+            <!-- <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/paypal.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/paypal-dark.svg" alt="" /> -->
+            <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/visa.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/visa-dark.svg" alt="" />
+            <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/mastercard.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/mastercard-dark.svg" alt="" />
+          </div>
+        </div>
+      </div>
+
+      <p class="mt-6 text-center text-gray-500 dark:text-gray-400 sm:mt-8 lg:text-left">
+        Payment processed by <a href="#" title="" class="font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">Stripe</a> for
+        <a href="#" title="" class="font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">Bizmatch Inc.</a>
+        - United States Of America
+      </p>
+    </div>
+  </div>
+</section>

bizmatch/src/app/components/payment/payment.component.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, ViewChild } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { StripeCardCvcElementOptions, StripeCardNumberElementOptions, StripeElementsOptions } from '@stripe/stripe-js';
+import { injectStripe, StripeCardComponent, StripeCardCvcComponent, StripeCardExpiryComponent, StripeCardGroupDirective, StripeCardNumberComponent, StripeElementsDirective } from 'ngx-stripe';
+import { PaymentService } from './payment.service';
+
+@Component({
+  selector: 'app-payment-modal',
+  templateUrl: './payment.component.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule, StripeCardNumberComponent, StripeCardExpiryComponent, StripeCardCvcComponent, StripeElementsDirective, StripeCardGroupDirective],
+  styles: `
+    .ngx-input{
+    padding:0.85rem
+    }
+  `,
+})
+export class PaymentComponent {
+  @ViewChild('cardElement') cardElement: StripeCardComponent;
+  stripe = injectStripe('your-stripe-publishable-key');
+  name: string;
+  constructor() {}
+  cvcOptions: StripeCardCvcElementOptions = {
+    style: {
+      base: {
+        iconColor: '#666EE8',
+        color: '#111827',
+        fontWeight: '300',
+        fontFamily: 'sans-serif',
+        fontSize: '14px',
+        '::placeholder': {
+          color: '#CFD7E0',
+          // color: '#6B7280',
+        },
+      },
+    },
+  };
+  numberOptions: StripeCardNumberElementOptions = {
+    showIcon: true,
+    style: {
+      base: {
+        iconColor: '#666EE8',
+        color: '#111827',
+        fontWeight: '300',
+        fontFamily: 'sans-serif',
+        fontSize: '14px',
+        '::placeholder': {
+          color: '#CFD7E0',
+          // color: '#6B7280',
+        },
+      },
+    },
+  };
+
+  elementsOptions: StripeElementsOptions = {
+    locale: 'en',
+  };
+
+  paymentService = inject(PaymentService);
+
+  onSubmit(form: NgForm) {
+    if (form.valid) {
+      this.stripe.createToken(this.cardElement.element, { name: this.name }).subscribe(result => {
+        if (result.token) {
+          this.paymentService.processPayment(result.token.id).subscribe(() => {
+            console.log('Payment successful');
+          });
+        } else if (result.error) {
+          console.error(result.error.message);
+        }
+      });
+    }
+  }
+}

bizmatch/src/app/components/payment/payment.service.ts

@@ -0,0 +1,32 @@
+// 1. Shared Service (modal.service.ts)
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PaymentService {
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
+  private resolvePromise!: (value: boolean) => void;
+  constructor(private http: HttpClient) {}
+  openPaymentModal() {
+    this.modalVisibleSubject.next(true);
+    return new Promise<boolean>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
+  accept(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(true);
+  }
+
+  reject(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(false);
+  }
+  processPayment(token: string): Observable<any> {
+    return this.http.post('/api/subscription', { token });
+  }
+}

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

@@ -6,7 +6,7 @@
     } @else {
     <a routerLink="/pricing" class="text-gray-800">Pricing</a>
     <a (click)="login()" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Log In</a>
-    <a (click)="register()" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
+    <a routerLink="/pricing" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
     }
   </div>
   <button (click)="toggleMenu()" class="md:hidden text-gray-600">

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

@@ -20,10 +20,6 @@
             <i class="fas fa-check text-green-500 mr-2"></i>
             Get early access to new listings
           </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Professional/Broker trial period (3 month)
-          </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
             Extended search functionality
@@ -31,7 +27,7 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
+        <button (click)="register()" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
       </div>
     </div>
 
@@ -51,7 +47,7 @@
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
-            Extended public listings (3+ months)
+            3-Month Free Trial
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -76,7 +72,8 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
+        <!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button> -->
+        <button (click)="register('price_1PpSkpDjmFBOcNBs9UDPgBos')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
       </div>
     </div>
 
@@ -100,7 +97,7 @@
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
-            Extended public listings (3+ months)
+            3-Month Free Trial
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -125,7 +122,8 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
+        <!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button> -->
+        <button (click)="register('price_1PpSmRDjmFBOcNBsaaSp2nk9')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
       </div>
     </div>
   </div>

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

@@ -1,5 +1,10 @@
+import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
+import { StripeService } from 'ngx-stripe';
+import { switchMap } from 'rxjs';
+import { environment } from '../../../environments/environment';
 import { SharedModule } from '../../shared/shared/shared.module';
 
 @Component({
@@ -10,8 +15,40 @@ import { SharedModule } from '../../shared/shared/shared.module';
   styleUrl: './pricing.component.scss',
 })
 export class PricingComponent {
-  constructor(public keycloakService: KeycloakService) {}
+  private apiBaseUrl = environment.apiBaseUrl;
-  register() {
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+  constructor(public keycloakService: KeycloakService, private http: HttpClient, private stripeService: StripeService, private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    if (this.id) {
+      this.checkout(atob(this.id));
+    }
+  }
+
+  register(priceId?: string) {
+    if (priceId) {
+      this.keycloakService.register({ redirectUri: `${window.location.origin}/pricing/${btoa(priceId)}` });
+    } else {
+      this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+    }
+  }
+
+  checkout(priceId) {
+    // Check the server.js tab to see an example implementation
+    this.http
+      .post(`${this.apiBaseUrl}/bizmatch/payment/create-checkout-session`, { priceId })
+      .pipe(
+        switchMap((session: any) => {
+          return this.stripeService.redirectToCheckout({ sessionId: session.id });
+        }),
+      )
+      .subscribe(result => {
+        // If `redirectToCheckout` fails due to a browser or network
+        // error, you should display the localized error message to your
+        // customer using `error.message`.
+        if (result.error) {
+          alert(result.error.message);
+        }
+      });
   }
 }

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -133,7 +133,7 @@ export class AccountComponent {
       const confirmed = await this.confirmationService.showConfirmation({ message: 'Are you sure you want to switch to Buyer ? All your listings as well as all your professionals informations will be deleted' });
       if (confirmed) {
         const id = this.user.id;
-        this.user = createDefaultUser(this.user.email, this.user.firstname, this.user.lastname);
+        this.user = createDefaultUser(this.user.email, this.user.firstname, this.user.lastname, 'free');
         this.user.customerType = 'buyer';
         this.user.id = id;
         this.imageService.deleteLogoImagesByMail(this.user.email);

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);
+  }
+}

bizmatch/src/styles.scss

@@ -90,3 +90,7 @@ p-menubarsub ul {
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
   margin-right: 0 !important;
 }
+input::placeholder,
+textarea::placeholder {
+  color: #cfd7e0 !important;
+}