aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 5 Releases Wiki Activity

BugFix: #38 EMail Us

This commit is contained in:
Andreas Knuth 2024-05-29 17:03:23 -05:00
parent 044f8efa0f
commit d488f90f48
5 changed files with 179 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bizmatch-server/src/mail/mail.controller.ts
View File

@ -7,6 +7,10 @@ export class MailController {
constructor(private mailService: MailService) {} constructor(private mailService: MailService) {}
@Post() @Post()
sendEMail(@Body() mailInfo: MailInfo): Promise<void | ErrorResponse> { sendEMail(@Body() mailInfo: MailInfo): Promise<void | ErrorResponse> {
if (mailInfo.listing) {
return this.mailService.sendInquiry(mailInfo); return this.mailService.sendInquiry(mailInfo);
} else {
return this.mailService.sendRequest(mailInfo);
}
} }
} }

19
bizmatch-server/src/mail/mail.service.ts
View File

@ -41,4 +41,23 @@ export class MailService {
}, },
}); });
} }
async sendRequest(mailInfo: MailInfo): Promise<void | ErrorResponse> {
if (isEmpty(mailInfo.sender.name)) {
return { fields: [{ fieldname: 'name', message: 'Required' }] };
}
await this.mailerService.sendMail({
to: 'support@bizmatch.net',
from: `"Bizmatch Support Team" <info@bizmatch.net>`,
subject: `Support Request from ${mailInfo.sender.name}`,
//template: './inquiry', // `.hbs` extension is appended automatically
template: join(__dirname, '../..', 'mail/templates/request.hbs'),
context: {
// ✏️ filling curly brackets with content
request: mailInfo.sender.comments,
iname: mailInfo.sender.name,
phone: mailInfo.sender.phoneNumber,
email: mailInfo.sender.email,
},
});
}
} }

83
bizmatch-server/src/mail/templates/request.hbs Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification: New User Request</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}
.container {
width: 80%;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 20px;
color: #333333;
}
.subheader {
text-align: center;
margin-bottom: 20px;
color: #555555;
}
.section {
margin-bottom: 20px;
}
.section-title {
color: #1E90FF;
font-weight: bold;
border-bottom: 2px solid #1E90FF;
padding-bottom: 5px;
margin-bottom: 10px;
}
.info {
margin-bottom: 10px;
padding: 10px;
}
.info:nth-child(even) {
background-color: #f0f0f0;
}
.info-label {
font-weight: bold;
color: #333333;
}
.info-value {
margin-left: 10px;
color: #555555;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Notification: New request from a user of the Bizmatch Network</div>
<div class="section">
<div class="section-title">Requester Information</div>
<div class="info">
<span class="info-label">Contact Name:</span>
<span class="info-value">{{iname}}</span>
</div>
<div class="info">
<span class="info-label">Contact Email:</span>
<span class="info-value">{{email}}</span>
</div>
<div class="info">
<span class="info-label">Contact Phone:</span>
<span class="info-value">{{phone}}</span>
</div>
<div class="info">
<span class="info-label">Question:</span>
<span class="info-value">{{request}}</span>
</div>
</div>
</div>
</body>
</html>

15
bizmatch/src/app/pages/subscription/email-us/email-us.component.html
View File

@ -1,4 +1,3 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full"> <div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row"> <div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account> <menu-account></menu-account>
@ -6,27 +5,27 @@
<div class="text-900 font-semibold text-lg mt-3">Contact Us</div> <div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
<p-divider></p-divider> <p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row"> <div class="flex gap-5 flex-column-reverse md:flex-row">
<div class="flex-auto p-fluid"> <div class="flex-auto p-fluid formgrid">
<div class="grid"> <div class="grid">
<div class="mb-4 col-12 md:col-6"> <div class="mb-4 col-12 md:col-6">
<label for="name" class="block font-medium text-900 mb-2">Your name</label> <label for="name" class="block font-medium text-900 mb-2">Your name</label>
<input id="name" type="text" pInputText> <input [ngClass]="{ 'ng-invalid': containsError('name'), 'ng-dirty': containsError('name') }" name="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
</div> </div>
<div class="mb-4 col-12 md:col-6"> <div class="mb-4 col-12 md:col-6">
<label for="email" class="block font-medium text-900 mb-2">Your Email</label> <label for="email" class="block font-medium text-900 mb-2">Your Email</label>
<input id="email" type="text" pInputText> <input name="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
</div> </div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="phone" class="block font-medium text-900 mb-2">Your Phone</label> <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone</label>
<input id="phone" type="text" pInputText> <p-inputMask id="phoneNumber" name="phoneNumber" mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label> <label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
<textarea id="help" type="text" pInputTextarea rows="5" [autoResize]="true"></textarea> <textarea name="help" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="mailinfo.sender.comments"></textarea>
</div> </div>
<div> <div>
<button pButton pRipple label="Submit" class="w-auto"></button> <button pButton pRipple label="Submit" class="w-auto" (click)="mail()"></button>
</div> </div>
</div> </div>
</div> </div>

62
bizmatch/src/app/pages/subscription/email-us/email-us.component.ts
View File

@ -1,28 +1,50 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button'; import { KeycloakService } from 'keycloak-angular';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext'; import { MessageService } from 'primeng/api';
import { StyleClassModule } from 'primeng/styleclass'; import { InputMaskModule } from 'primeng/inputmask';
import { SelectOptionsService } from '../../../services/select-options.service'; import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { DropdownModule } from 'primeng/dropdown'; import { ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { FormsModule } from '@angular/forms'; import { environment } from '../../../../environments/environment';
import { CommonModule } from '@angular/common'; import { MailService } from '../../../services/mail.service';
import { ToggleButtonModule } from 'primeng/togglebutton'; import { UserService } from '../../../services/user.service';
import { TagModule } from 'primeng/tag'; import { SharedModule } from '../../../shared/shared/shared.module';
import data from '../../../../assets/data/user.json'; import { map2User } from '../../../utils/utils';
import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
@Component({ @Component({
selector: 'app-email-us', selector: 'app-email-us',
standalone: true, standalone: true,
imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule], imports: [SharedModule, InputMaskModule],
providers: [MessageService],
templateUrl: './email-us.component.html', templateUrl: './email-us.component.html',
styleUrl: './email-us.component.scss' styleUrl: './email-us.component.scss',
}) })
export class EmailUsComponent { export class EmailUsComponent {
mailinfo: MailInfo;
keycloakUser: KeycloakUser;
user: User;
errorResponse: ErrorResponse;
constructor(private mailService: MailService, private userService: UserService, public keycloakService: KeycloakService, private messageService: MessageService) {
this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
}
async ngOnInit() {
const token = await this.keycloakService.getToken();
this.keycloakUser = map2User(token);
if (this.keycloakUser) {
this.user = await this.userService.getByMail(this.keycloakUser.email);
this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
}
}
async mail() {
this.mailinfo.email = 'support@bizmatch.net';
const result = await this.mailService.mail(this.mailinfo);
if (result) {
this.errorResponse = result as ErrorResponse;
} else {
this.errorResponse = null;
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your request has been forwarded to the support team of bizmatch.', life: 3000 });
}
}
containsError(fieldname: string) {
return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
}
} }