feedback updates

This commit is contained in:
Cyril Joseph 2025-12-06 05:59:06 -04:00
parent 2199d9b512
commit fe21c846c8
13 changed files with 131 additions and 18 deletions

View File

@ -33,7 +33,7 @@
</div> </div>
<div *ngIf="estimatedFees.bondPremium" class="summary-item"> <div *ngIf="estimatedFees.bondPremium" class="summary-item">
<span>Bond Premium: </span> <span>{{bondPremiumLabel}}: </span>
<span>{{estimatedFees.bondPremium | currency}}</span> <span>{{estimatedFees.bondPremium | currency}}</span>
</div> </div>
@ -46,6 +46,16 @@
<span>LDI Premium: </span> <span>LDI Premium: </span>
<span>{{estimatedFees.ldiPremium | currency}}</span> <span>{{estimatedFees.ldiPremium | currency}}</span>
</div> </div>
<div *ngIf="estimatedFees.securityAmount" class="summary-item">
<span>Security Amount: </span>
<span>{{estimatedFees.securityAmount | currency}}</span>
</div>
<div *ngIf="estimatedFees.insuredValue" class="summary-item">
<span>Insured Value: </span>
<span>{{estimatedFees.insuredValue | currency}}</span>
</div>
<div class="summary-item total"> <div class="summary-item total">
<strong>Total:</strong> <strong>Total:</strong>
<strong>{{ orderTotal | currency }}</strong> <strong>{{ orderTotal | currency }}</strong>

View File

@ -28,6 +28,7 @@ export class CheckoutComponent {
currentApplicationDetails: { headerid: number, applicationName: string, applicationType: string } | null = null; currentApplicationDetails: { headerid: number, applicationName: string, applicationType: string } | null = null;
changeInProgress: boolean = false; changeInProgress: boolean = false;
estimatedFees: Fees = {}; estimatedFees: Fees = {};
bondPremiumLabel: string = 'Bond Premium';
@ViewChild('paypalcontrol', { static: true }) paypalElement!: ElementRef; @ViewChild('paypalcontrol', { static: true }) paypalElement!: ElementRef;
@ -56,6 +57,15 @@ export class CheckoutComponent {
next: (data: Fees) => { next: (data: Fees) => {
if (data) { if (data) {
this.estimatedFees = data; this.estimatedFees = data;
if (this.estimatedFees.securityType === 'B') {
this.bondPremiumLabel = 'Bond Premium';
} else if (this.estimatedFees.securityType === 'C') {
this.bondPremiumLabel = 'Cash Deposit';
} else if (this.estimatedFees.securityType === 'G') {
this.bondPremiumLabel = 'Refundable claim deposit';
}
this.calculateTotal(); this.calculateTotal();
} }
}, },

View File

@ -16,11 +16,16 @@
</div> </div>
<div class="form-section"> <div class="form-section">
<div class="checkbox-group"> <mat-radio-group formControlName="roadVehiclesUsed" class="radio-group">
<mat-checkbox formControlName="roadVehiclesUsed">Road Vehicles <mat-label class="question">Are Road vehicle included in your General List?</mat-label>
used?</mat-checkbox> <mat-radio-button value="Y" class="radio-button">Yes</mat-radio-button>
<mat-checkbox formControlName="horseUsed">Horse used?</mat-checkbox> <mat-radio-button value="N" class="radio-button">No</mat-radio-button>
</div> </mat-radio-group>
<mat-radio-group formControlName="horseUsed" class="radio-group">
<mat-label class="question">Are Horse included in your General List?</mat-label>
<mat-radio-button value="Y" class="radio-button">Yes</mat-radio-button>
<mat-radio-button value="N" class="radio-button">No</mat-radio-button>
</mat-radio-group>
</div> </div>
<!-- Authorized Representatives Section --> <!-- Authorized Representatives Section -->

View File

@ -20,6 +20,22 @@
} }
} }
.radio-group {
display: flex;
gap: 16px;
mat-label {
margin-top: 5px;
color: var(--mat-checkbox-label-text-color, var(--mat-sys-on-surface));
font-family: var(--mat-checkbox-label-text-font, var(--mat-sys-body-medium-font));
line-height: var(--mat-checkbox-label-text-line-height, var(--mat-sys-body-medium-line-height));
font-size: var(--mat-checkbox-label-text-size, var(--mat-sys-body-medium-size));
letter-spacing: var(--mat-checkbox-label-text-tracking, var(--mat-sys-body-medium-tracking));
font-weight: var(--mat-checkbox-label-text-weight, var(--mat-sys-body-medium-weight));
}
}
.full-width { .full-width {
width: 100%; width: 100%;
} }

View File

@ -79,8 +79,8 @@ export class GoodsComponent {
commercialSample: [false], commercialSample: [false],
professionalEquipment: [false], professionalEquipment: [false],
exhibitionsFair: [false], exhibitionsFair: [false],
roadVehiclesUsed: [false], roadVehiclesUsed: ['N'],
horseUsed: [false], horseUsed: ['N'],
authorizedRepresentatives: ['', Validators.required] authorizedRepresentatives: ['', Validators.required]
}, { validator: this.atLeastOneRequired } }, { validator: this.atLeastOneRequired }
); );
@ -176,8 +176,8 @@ export class GoodsComponent {
this.goodsForm.patchValue({ this.goodsForm.patchValue({
commercialSample: data.commercialSample || false, commercialSample: data.commercialSample || false,
professionalEquipment: data.professionalEquipment || false, professionalEquipment: data.professionalEquipment || false,
exhibitionsFair: data.exhibitionsFair || false, exhibitionsFair: data.exhibitionsFair || 'N',
roadVehiclesUsed: data.roadVehiclesUsed || false, roadVehiclesUsed: data.roadVehiclesUsed || 'N',
horseUsed: data.horseUsed || false, horseUsed: data.horseUsed || false,
authorizedRepresentatives: data.authorizedRepresentatives || '' authorizedRepresentatives: data.authorizedRepresentatives || ''
}); });

View File

@ -23,10 +23,18 @@ import { NotificationService } from '../../core/services/common/notification.ser
{{estimatedFees.continuationSheetFee | currency}}</li> {{estimatedFees.continuationSheetFee | currency}}</li>
<li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li> <li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li>
<li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li> <li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li>
<li *ngIf="estimatedFees.bondPremium">Bond Premium: {{estimatedFees.bondPremium | currency}}</li> <li *ngIf="estimatedFees.bondPremium">{{bondPremiumLabel}}: {{estimatedFees.bondPremium | currency}}</li>
<li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li> <li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li>
<li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li> <li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li>
</ul> </ul>
<hr/>
<p>Additional Charges:</p>
<ul>
<li *ngIf="estimatedFees.securityAmount">Security Amount: {{estimatedFees.securityAmount | currency}}</li>
<li *ngIf="estimatedFees.insuredValue">Insured Value: {{estimatedFees.insuredValue | currency}}</li>
</ul>
<hr/>
<p class="total">Total: {{total | currency}}</p>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<button mat-raised-button color="primary" (click)="onClose()"> <button mat-raised-button color="primary" (click)="onClose()">
@ -38,11 +46,18 @@ import { NotificationService } from '../../core/services/common/notification.ser
li { li {
margin-bottom: 8px; margin-bottom: 8px;
} }
.total {
font-weight: bold;
margin-top: 12px;
}
`] `]
}) })
export class FeesDialogComponent { export class FeesDialogComponent {
estimatedFees: Fees = {}; estimatedFees: Fees = {};
headerid: number | null = null; headerid: number | null = null;
bondPremiumLabel: string = 'Bond Premium';
total: number = 0;
private carnetService = inject(CarnetService); private carnetService = inject(CarnetService);
private notificationService = inject(NotificationService); private notificationService = inject(NotificationService);
@ -61,6 +76,16 @@ export class FeesDialogComponent {
next: (data: Fees) => { next: (data: Fees) => {
if (data) { if (data) {
this.estimatedFees = data; this.estimatedFees = data;
if (this.estimatedFees.securityType === 'B') {
this.bondPremiumLabel = 'Bond Premium';
} else if (this.estimatedFees.securityType === 'C') {
this.bondPremiumLabel = 'Cash Deposit';
} else if (this.estimatedFees.securityType === 'G') {
this.bondPremiumLabel = 'Refundable claim deposit';
}
this.calculateTotal();
} }
}, },
error: (error: any) => { error: (error: any) => {
@ -72,6 +97,13 @@ export class FeesDialogComponent {
} }
} }
calculateTotal(): void {
const validFees = Object.values(this.estimatedFees).filter(
(fee): fee is number => typeof fee === 'number'
);
this.total = validFees.reduce((total, fee) => total + fee, 0);
}
onClose(): void { onClose(): void {
this.dialogRef.close(); this.dialogRef.close();
} }

View File

@ -18,10 +18,20 @@
{{estimatedFees.continuationSheetFee | currency}}</li> {{estimatedFees.continuationSheetFee | currency}}</li>
<li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li> <li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li>
<li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li> <li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li>
<li *ngIf="estimatedFees.bondPremium">Bond Premium: {{estimatedFees.bondPremium | currency}}</li> <li *ngIf="estimatedFees.bondPremium">{{bondPremiumLabel}}: {{estimatedFees.bondPremium | currency}}
</li>
<li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li> <li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li>
<li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li> <li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li>
</ul> </ul>
<hr />
<p>Additional Charges:</p>
<ul>
<li *ngIf="estimatedFees.securityAmount">Security Amount: {{estimatedFees.securityAmount | currency}}
</li>
<li *ngIf="estimatedFees.insuredValue">Insured Value: {{estimatedFees.insuredValue | currency}}</li>
</ul>
<hr />
<p class="total">Total: {{total | currency}}</p>
<mat-checkbox [(ngModel)]="hasReadAllTerms" color="primary" class="read-checkbox"> <mat-checkbox [(ngModel)]="hasReadAllTerms" color="primary" class="read-checkbox">
I have read and agree to all terms and conditions above I have read and agree to all terms and conditions above
</mat-checkbox> </mat-checkbox>

View File

@ -43,6 +43,11 @@ mat-card-header {
strong { strong {
font-weight: 500; font-weight: 500;
} }
.total {
font-weight: bold;
margin-top: 12px;
}
} }
.read-checkbox { .read-checkbox {

View File

@ -35,6 +35,8 @@ export class TermsConditionsComponent {
changeInProgress: boolean = false; changeInProgress: boolean = false;
estimatedFees: Fees = {}; estimatedFees: Fees = {};
needCheckOut: boolean = false; needCheckOut: boolean = false;
bondPremiumLabel: string = 'Bond Premium';
total: number = 0;
private notificationService = inject(NotificationService); private notificationService = inject(NotificationService);
private errorHandler = inject(ApiErrorHandlerService); private errorHandler = inject(ApiErrorHandlerService);
@ -53,6 +55,16 @@ export class TermsConditionsComponent {
next: (data: Fees) => { next: (data: Fees) => {
if (data) { if (data) {
this.estimatedFees = data; this.estimatedFees = data;
if (this.estimatedFees.securityType === 'B') {
this.bondPremiumLabel = 'Bond Premium';
} else if (this.estimatedFees.securityType === 'C') {
this.bondPremiumLabel = 'Cash Deposit';
} else if (this.estimatedFees.securityType === 'G') {
this.bondPremiumLabel = 'Refundable claim deposit';
}
this.calculateTotal();
} }
}, },
error: (error: any) => { error: (error: any) => {
@ -130,4 +142,11 @@ export class TermsConditionsComponent {
} }
}); });
} }
calculateTotal(): void {
const validFees = Object.values(this.estimatedFees).filter(
(fee): fee is number => typeof fee === 'number'
);
this.total = validFees.reduce((total, fee) => total + fee, 0);
}
} }

View File

@ -7,4 +7,7 @@ export interface Fees {
bondPremium?: number | null | undefined; bondPremium?: number | null | undefined;
cargoPremium?: number | null | undefined; cargoPremium?: number | null | undefined;
ldiPremium?: number | null | undefined; ldiPremium?: number | null | undefined;
securityAmount?: number | null | undefined;
securityType?: string | null | undefined;
insuredValue?: number | null | undefined;
} }

View File

@ -2,8 +2,8 @@ export interface Goods {
commercialSample: boolean; commercialSample: boolean;
professionalEquipment: boolean; professionalEquipment: boolean;
exhibitionsFair: boolean; exhibitionsFair: boolean;
roadVehiclesUsed: boolean; roadVehiclesUsed: string;
horseUsed: boolean; horseUsed: string;
authorizedRepresentatives: string; authorizedRepresentatives: string;
items?: GoodsItem[] | null; items?: GoodsItem[] | null;
} }

View File

@ -30,6 +30,9 @@ export class CarnetService {
bondPremium: estimatedFeesDetails.BONDPREMIUM, bondPremium: estimatedFeesDetails.BONDPREMIUM,
cargoPremium: estimatedFeesDetails.CARGOPREMIUM, cargoPremium: estimatedFeesDetails.CARGOPREMIUM,
ldiPremium: estimatedFeesDetails.LDIPREMIUM, ldiPremium: estimatedFeesDetails.LDIPREMIUM,
securityAmount: estimatedFeesDetails.SECURITYAMOUNT,
securityType: estimatedFeesDetails.SECURITYTYPE,
insuredValue: estimatedFeesDetails.INSUREDVALUE
}; };
return estimatedFeesData; return estimatedFeesData;

View File

@ -22,8 +22,8 @@ export class GoodsService {
private mapToGoods(goodDetails: any): Goods { private mapToGoods(goodDetails: any): Goods {
return { return {
roadVehiclesUsed: goodDetails.AUTOFLAG === 'Y', roadVehiclesUsed: goodDetails.AUTOFLAG,
horseUsed: goodDetails.HORSEFLAG === 'Y', horseUsed: goodDetails.HORSEFLAG,
exhibitionsFair: goodDetails.EXHIBITIONSFAIRFLAG === 'Y', exhibitionsFair: goodDetails.EXHIBITIONSFAIRFLAG === 'Y',
professionalEquipment: goodDetails.PROFEQUIPMENTFLAG === 'Y', professionalEquipment: goodDetails.PROFEQUIPMENTFLAG === 'Y',
commercialSample: goodDetails.COMMERCIALSAMPLEFLAG === 'Y', commercialSample: goodDetails.COMMERCIALSAMPLEFLAG === 'Y',
@ -56,8 +56,8 @@ export class GoodsService {
P_COMMERCIALSAMPLEFLAG: goodsData.commercialSample ? 'Y' : 'N', P_COMMERCIALSAMPLEFLAG: goodsData.commercialSample ? 'Y' : 'N',
P_PROFEQUIPMENTFLAG: goodsData.professionalEquipment ? 'Y' : 'N', P_PROFEQUIPMENTFLAG: goodsData.professionalEquipment ? 'Y' : 'N',
P_EXHIBITIONSFAIRFLAG: goodsData.exhibitionsFair ? 'Y' : 'N', P_EXHIBITIONSFAIRFLAG: goodsData.exhibitionsFair ? 'Y' : 'N',
P_AUTOFLAG: goodsData.roadVehiclesUsed ? 'Y' : 'N', P_AUTOFLAG: goodsData.roadVehiclesUsed,
P_HORSEFLAG: goodsData.horseUsed ? 'Y' : 'N', P_HORSEFLAG: goodsData.horseUsed,
P_AUTHREP: goodsData.authorizedRepresentatives, P_AUTHREP: goodsData.authorizedRepresentatives,
} }