cyril/service-provider-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feedback updates

Browse Source
This commit is contained in:
Cyril Joseph 2025-08-21 06:37:56 -03:00
parent 6dbcff7271
commit 3a147ce26b
12 changed files with 357 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/app/carnet/checkout/checkout.component.html Normal file
View File

@ -0,0 +1,60 @@
<div class="checkout-container">
<mat-card class="card-body" appearance="outlined">
<mat-card-header>
<mat-card-title>Checkout</mat-card-title>
</mat-card-header>
<mat-card-content>
<!-- Carnet Summary -->
<div class="order-summary">
<div *ngIf="estimatedFees.basicFee" class="summary-item">
<span>Basic fee: </span>
<span>{{estimatedFees.basicFee | currency}}</span>
</div>
<div *ngIf="estimatedFees.counterFoilFee" class="summary-item">
<span>Counterfoil fee: </span>
<span>{{estimatedFees.counterFoilFee | currency}}</span>
</div>
<div *ngIf="estimatedFees.continuationSheetFee" class="summary-item">
<span>Continuation sheet fee: </span>
<span>{{estimatedFees.continuationSheetFee | currency}}</span>
</div>
<div *ngIf="estimatedFees.expeditedFee" class="summary-item">
<span>Expedited fee: </span>
<span>{{estimatedFees.expeditedFee | currency}}</span>
</div>
<div *ngIf="estimatedFees.shippingFee" class="summary-item">
<span>Shipping fee: </span>
<span>{{estimatedFees.shippingFee | currency}}</span>
</div>
<div *ngIf="estimatedFees.bondPremium" class="summary-item">
<span>Bond Premium: </span>
<span>{{estimatedFees.bondPremium | currency}}</span>
</div>
<div *ngIf="estimatedFees.cargoPremium" class="summary-item">
<span>Cargo Premium: </span>
<span>{{estimatedFees.cargoPremium | currency}}</span>
</div>
<div *ngIf="estimatedFees.ldiPremium" class="summary-item">
<span>LDI Premium: </span>
<span>{{estimatedFees.ldiPremium | currency}}</span>
</div>
<div class="summary-item total">
<strong>Total:</strong>
<strong>{{ orderTotal | currency }}</strong>
</div>
</div>
<div class="paypal-container">
<div #paypalcontrol></div>
</div>
</mat-card-content>
</mat-card>
</div>

36
src/app/carnet/checkout/checkout.component.scss Normal file
View File

@ -0,0 +1,36 @@
.checkout-container {
max-width: 500px;
margin: 0 auto;
padding: 0 1rem;
.mat-mdc-card-header {
justify-content: center;
padding: 1rem;
border-bottom: 1px solid #ddd;
margin-bottom: 0.5rem;
}
mat-card-title {
color: var(--mat-sys-primary);
font-weight: 500;
}
.order-summary {
.summary-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.summary-item.total {
border-top: 1px solid #ddd;
padding-top: 0.5rem;
margin-top: 0.5rem;
font-size: 1.1rem;
}
}
.paypal-container {
margin-top: 2rem;
}
}

162
src/app/carnet/checkout/checkout.component.ts Normal file
View File

@ -0,0 +1,162 @@
import { Component, ElementRef, inject, ViewChild } from '@angular/core';
import { PaymentService } from '../../core/services/carnet/payment.service';
import { CommonModule } from '@angular/common';
import { Fees } from '../../core/models/carnet/fee';
import { CarnetService } from '../../core/services/carnet/carnet.service';
import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
import { NavigationService } from '../../core/services/common/navigation.service';
import { NotificationService } from '../../core/services/common/notification.service';
import { StorageService } from '../../core/services/common/storage.service';
import { finalize } from 'rxjs';
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
// This is necessary to tell TypeScript that a global 'paypal' object exists.
declare var paypal: any;
@Component({
selector: 'app-checkout',
imports: [CommonModule, AngularMaterialModule],
templateUrl: './checkout.component.html',
styleUrl: './checkout.component.scss'
})
export class CheckoutComponent {
paymentCompleted: boolean = false;
paymentError: boolean = false;
isLoading: boolean = false;
paymentDetails: any = null;
currentApplicationDetails: { headerid: number, applicationName: string, applicationType: string } | null = null;
changeInProgress: boolean = false;
estimatedFees: Fees = {};
@ViewChild('paypalcontrol', { static: true }) paypalElement!: ElementRef;
orderDetails = {
price: '',
description: '',
};
orderTotal = 0.00;
currency = 'USD';
private paymentService = inject(PaymentService);
private notificationService = inject(NotificationService);
private errorHandler = inject(ApiErrorHandlerService);
private storageService = inject(StorageService);
private navigationService = inject(NavigationService);
private carnetService = inject(CarnetService);
constructor() {
this.currentApplicationDetails = this.storageService.get<{ headerid: number, applicationName: string, applicationType: string }>('currentapplication')
this.orderDetails.description = ` 'Carnet Application - ${this.currentApplicationDetails?.applicationName}`
}
ngOnInit(): void {
if (this.currentApplicationDetails?.headerid) {
this.carnetService.getEstimatedFees(this.currentApplicationDetails?.headerid).subscribe({
next: (data: Fees) => {
if (data) {
this.estimatedFees = data;
this.calculateTotal();
}
},
error: (error: any) => {
let errorMessage = this.errorHandler.handleApiError(error, 'Failed to get estimated fees');
this.notificationService.showError(errorMessage);
console.error('Error getting estimated fees:', error);
}
});
}
}
ngAfterViewInit(): void {
this.initConfig();
}
initConfig(): void {
paypal
.Buttons({
style: {
layout: 'vertical', // or 'horizontal'
color: 'gold',
shape: 'pill',
label: 'pay',
height: 35 // Height in pixels (default is ~35-45px)
// 'paypal' – Standard PayPal button [defoult]
// 'checkout' – "Checkout with PayPal"
// 'buynow' – "Buy Now with PayPal"
// 'pay' – "Pay with PayPal"
// 'installment' – Displays installment information
// 'subscribe' – For subscriptions
// 'donate' – For donations
// pay : Pay with [PayPal]
// buynow : [PayPal] Buy Now
// Error: Expected style.height to be between 25px and 55px - got 10px
// width width usually doesn’t need to be set or must be reasonable.
},
// 1. Call your server to set up the transaction
createOrder: async (data: any, actions: any) => {
try {
// Call the createOrder method from your service
const orderId = await this.paymentService.createOrder(this.orderDetails);
// console.log('Order ID created by server:', orderId);
return orderId;
} catch (error) {
this.notificationService.showError('Failed to initiate the payment');
console.error('Error creating order:', error);
return;
}
},
// 2. Call your server to finalize the transaction
onApprove: async (data: any, actions: any) => {
try {
// data.orderID is the ID of the transaction from PayPal
const captureDetails = await this.paymentService.completePayment(data.orderID);
// console.log('Capture details:', captureDetails);
// You can now redirect the user or update the UI
this.changeInProgress = true;
this.carnetService.submitApplication(this.currentApplicationDetails?.headerid!).pipe(finalize(() => {
this.changeInProgress = false;
})).subscribe({
next: () => {
this.notificationService.showSuccess('Application submitted successfully');
this.storageService.removeItem('currentapplication');
this.navigationService.navigate(["home"]);
},
error: (error) => {
this.notificationService.showError('Failed to submit application');
console.error('Error submitting the application', error);
}
});
} catch (error) {
this.notificationService.showError('Failed to complete the payment');
console.error('Error completing the payment:', error);
return;
}
},
// 3. Handle errors
onError: (error: any) => {
this.notificationService.showError('Payment transaction failed');
console.error('An error occurred during the transaction:', error);
},
// 4. Handle cancellation
onCancel: (data: any) => {
}
}).render(this.paypalElement.nativeElement)
.catch((error: any) => {
console.error('Failed to render PayPal Buttons:', error);
});
}
calculateTotal(): void {
const validFees = Object.values(this.estimatedFees).filter(
(fee): fee is number => typeof fee === 'number'
);
this.orderTotal = validFees.reduce((total, fee) => total + fee, 0);
}
}

62
src/app/carnet/terms-conditions/terms-conditions.component.ts
View File

@ -13,6 +13,8 @@ import { StorageService } from '../../core/services/common/storage.service';
import { CarnetService } from '../../core/services/carnet/carnet.service';
import { Fees } from '../../core/models/carnet/fee';
import { finalize } from 'rxjs';
import { ShippingService } from '../../core/services/carnet/shipping.service';
import { Shipping } from '../../core/models/carnet/shipping';
@Component({
selector: 'app-terms-conditions',
@ -26,18 +28,20 @@ import { finalize } from 'rxjs';
styleUrl: './terms-conditions.component.scss'
})
export class TermsConditionsComponent {
isLoading: boolean = false;
currentDate = new Date();
hasReadAllTerms = false;
currentApplicationDetails: { headerid: number, applicationName: string, applicationType: string } | null = null;
changeInProgress: boolean = false;
estimatedFees: Fees = {};
needCheckOut: boolean = false;
private notificationService = inject(NotificationService);
private errorHandler = inject(ApiErrorHandlerService);
private storageService = inject(StorageService);
private navigationService = inject(NavigationService);
private carnetService = inject(CarnetService);
private shippingService = inject(ShippingService);
constructor() {
this.currentApplicationDetails = this.storageService.get<{ headerid: number, applicationName: string, applicationType: string }>('currentapplication')
@ -57,25 +61,31 @@ export class TermsConditionsComponent {
console.error('Error getting estimated fees:', error);
}
});
this.getPaymentType(this.currentApplicationDetails?.headerid);
}
}
onAccept(): void {
this.changeInProgress = true;
this.carnetService.submitApplication(this.currentApplicationDetails?.headerid!).pipe(finalize(() => {
this.changeInProgress = false;
})).subscribe({
next: () => {
this.notificationService.showSuccess('Application submitted successfully');
this.storageService.removeItem('currentapplication');
this.navigationService.navigate(["home"]);
},
error: (error) => {
let errorMessage = this.errorHandler.handleApiError(error, 'Failed to submit application');
this.notificationService.showError(errorMessage);
console.error('Error submitting the application', error);
}
});
if (this.needCheckOut) {
this.navigationService.navigate(['checkout']);
} else {
this.changeInProgress = true;
this.carnetService.submitApplication(this.currentApplicationDetails?.headerid!).pipe(finalize(() => {
this.changeInProgress = false;
})).subscribe({
next: () => {
this.notificationService.showSuccess('Application submitted successfully');
this.storageService.removeItem('currentapplication');
this.navigationService.navigate(["home"]);
},
error: (error) => {
let errorMessage = this.errorHandler.handleApiError(error, 'Failed to submit application');
this.notificationService.showError(errorMessage);
console.error('Error submitting the application', error);
}
});
}
}
onDecline(): void {
@ -100,4 +110,24 @@ export class TermsConditionsComponent {
}
})
}
getPaymentType(headerid: number): void {
this.isLoading = true;
this.shippingService.getShippingData(headerid).pipe(
finalize(() => {
this.isLoading = false;
})
).subscribe({
next: (shippingData: Shipping) => {
if (!shippingData) { // do nothing if empty
return;
}
this.needCheckOut = shippingData.paymentMethod !== 'ACH' && shippingData.paymentMethod !== 'INV';
},
error: (error: any) => {
console.error('Error loading shipping data', error);
this.errorHandler.handleApiError(error, 'Failed to load shipping data');
}
});
}
}

2
src/app/carnet/travel-plan/travel-plan.component.ts
View File

@ -304,7 +304,7 @@ export class TravelPlanComponent {
if (this.applicationType === 'additional' || this.applicationType === 'extend') {
const usentriesControl = this.travelForm.get('usaEntries');
usentriesControl?.setValidators([Validators.min(1), Validators.max(99)]);
usentriesControl?.setValidators([Validators.min(0), Validators.max(99)]);
usentriesControl?.updateValueAndValidity();
}

2
src/app/core/services/carnet/holder.service.ts
View File

@ -28,7 +28,7 @@ export class HolderService {
holderType: holder.HOLDERTYPE,
uscibMember: holder.USCIBMEMBERFLAG === 'Y',
// govAgency: holder.GOVAGENCYFLAG === 'Y',
holderName: holder.HOLDERNAME,
holderName: holder.NAMEOF,
//NAMEQUALIFIER: holder.NAMEQUALIFIER || null,
dbaName: holder.ADDLNAME || null,
address1: holder.ADDRESS1,

29
src/app/core/services/carnet/payment.service.ts Normal file
View File

@ -0,0 +1,29 @@
import { inject, Injectable } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PaymentService {
private apiUrl = environment.apiUrl;
private apiDb = environment.apiDb;
private http = inject(HttpClient);
createOrder(orderDetails: any): Promise<string> {
return firstValueFrom(
this.http.post<{ id: string }>(`${this.apiUrl}/${this.apiDb}/InitiatePayment`, {})
).then(order => order.id);
}
completePayment(orderId: string): Promise<any> {
const data = {
P_ORDERID: orderId
}
return firstValueFrom(
this.http.post(`${this.apiUrl}/oracle/CompletePayment`, data));
}
}

2
src/app/core/services/carnet/replacement.service.ts
View File

@ -21,7 +21,7 @@ export class ReplacementService {
}
private mapToExtensionData(extensionDataCollection: any): Replacement {
let extensionData = extensionDataCollection?.[0];
let extensionData = extensionDataCollection;
let replacementData: Replacement = {
replacementCarnetNumber: extensionData.REPLACECARNETNO,

1
src/app/core/services/home.service.ts
View File

@ -41,6 +41,7 @@ export class HomeService {
headerid: item.HEADERID,
clientid: item.CLIENTID,
locationid: item.LOCATIONID,
printGLStatus: item.PRINTGLSTATUS
}));
}
}

2
src/app/holder/search/search-holder.component.html
View File

@ -106,7 +106,7 @@
<tr matNoDataRow *matNoDataRow>
<td [attr.colspan]="displayedColumns.length" class="no-data-message">
<mat-icon>info</mat-icon>
<span>No records found matching your criteria</span>
<span>No records found</span>
</td>
</tr>
</table>

44
src/app/holder/search/search-holder.component.ts
View File

@ -29,21 +29,9 @@ import { environment } from '../../../environments/environment';
providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginator }],
})
export class SearchHolderComponent {
private _paginator!: MatPaginator;
@ViewChild(MatPaginator, { static: false })
set paginator(value: MatPaginator) {
this._paginator = value;
this.dataSource.paginator = value;
}
get paginator(): MatPaginator {
return this._paginator;
}
@ViewChild(MatSort, { static: false })
set sort(value: MatSort) {
this.dataSource.sort = value;
}
@ViewChild(MatPaginator, { static: false }) paginator!: MatPaginator;
@ViewChild(MatSort, { static: false }) sort!: MatSort;
@Input() isViewMode = false;
@Input() headerid: number = 0;
@ -73,8 +61,7 @@ export class SearchHolderComponent {
dataSource = new MatTableDataSource<any>([]);
ngAfterViewInit() {
// This is different from other pages to show the item selected in the table.
//this.dataSource.paginator = this.paginator;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
@ -93,19 +80,10 @@ export class SearchHolderComponent {
});
}
ngOnInit(): void {
if (this.allowActions) {
this.searchHolders();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['selectedHolderId']) {
if (this.selectedHolderId && this.paginator && this.dataSource.data.length && this.allowActions) {
this.goToItemPage(this.selectedHolderId);
}
if (!this.allowActions && this.selectedHolderId) {
if (this.selectedHolderId) {
this.showSelectedHolder(this.selectedHolderId);
}
}
@ -168,6 +146,11 @@ export class SearchHolderComponent {
this.isLoading = true;
const filterData: HolderFilter = this.searchForm.value;
if (!this.searchForm.value.holderName && this.selectedHolderId) {
this.showSelectedHolder(this.selectedHolderId);
return;
}
this.holderService.getHolders(filterData).pipe(finalize(() => {
this.isLoading = false;
})).subscribe({
@ -290,13 +273,4 @@ export class SearchHolderComponent {
// Filter out any empty, null, or undefined parts and then join them.
return parts.filter(part => part).join(', ');
}
goToItemPage(holderid: number): void {
const itemIndex = this.dataSource.data.findIndex(dataItem => dataItem.holderid === holderid);
if (itemIndex > -1 && this.paginator) {
const targetPageIndex = Math.floor(itemIndex / this.paginator.pageSize);
this.paginator.pageIndex = targetPageIndex;
this.dataSource.paginator = this.paginator;
}
}
}

13
src/app/home/home.component.html
View File

@ -87,16 +87,22 @@
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let item">
<div class="action-buttons">
<button mat-icon-button color="primary" (click)="processCarnet(item)"
<!-- <button mat-icon-button color="primary" (click)="processCarnet(item)"
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
[hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
matTooltip="Process">
<mat-icon>pending_actions</mat-icon>
</button>
</button> -->
<button matIconButton [matMenuTriggerFor]="carnetActions">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #carnetActions="matMenu">
<button mat-menu-item (click)="processCarnet(item)"
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
[hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'">
<mat-icon>pending_actions</mat-icon>
<span>Process</span>
</button>
<button mat-menu-item (click)="viewCarnet(item)">
<mat-icon>article</mat-icon>
<span>View</span>
@ -112,7 +118,8 @@
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item (click)="printGeneralList(item.headerid)">
<button mat-menu-item (click)="printGeneralList(item.headerid)"
*ngIf="item.printGLStatus === 'PRINTGL'">
<mat-icon>print</mat-icon>
<span>Print GL</span>
</button>