BugFix: #38 EMail Us
This commit is contained in:
parent
044f8efa0f
commit
d488f90f48
|
|
@ -7,6 +7,10 @@ export class MailController {
|
|||
constructor(private mailService: MailService) {}
|
||||
@Post()
|
||||
sendEMail(@Body() mailInfo: MailInfo): Promise<void | ErrorResponse> {
|
||||
if (mailInfo.listing) {
|
||||
return this.mailService.sendInquiry(mailInfo);
|
||||
} else {
|
||||
return this.mailService.sendRequest(mailInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<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">
|
||||
<menu-account></menu-account>
|
||||
|
|
@ -6,27 +5,27 @@
|
|||
<div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
|
||||
<p-divider></p-divider>
|
||||
<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="mb-4 col-12 md:col-6">
|
||||
<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 class="mb-4 col-12 md:col-6">
|
||||
<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 class="mb-4">
|
||||
<label for="phone" class="block font-medium text-900 mb-2">Your Phone</label>
|
||||
<input id="phone" type="text" pInputText>
|
||||
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone</label>
|
||||
<p-inputMask id="phoneNumber" name="phoneNumber" mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<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>
|
||||
<button pButton pRipple label="Submit" class="w-auto"></button>
|
||||
<button pButton pRipple label="Submit" class="w-auto" (click)="mail()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,50 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import data from '../../../../assets/data/user.json';
|
||||
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';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { InputMaskModule } from 'primeng/inputmask';
|
||||
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
import { ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { MailService } from '../../../services/mail.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { map2User } from '../../../utils/utils';
|
||||
@Component({
|
||||
selector: 'app-email-us',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule],
|
||||
imports: [SharedModule, InputMaskModule],
|
||||
providers: [MessageService],
|
||||
templateUrl: './email-us.component.html',
|
||||
styleUrl: './email-us.component.scss'
|
||||
styleUrl: './email-us.component.scss',
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue