Skip to content

Commit 7b22a09

Browse files
suxrobGMsuxrobGM
committed
improved process-payment page
1 parent e6de8cd commit 7b22a09

File tree

4 files changed

+123
-119
lines changed

4 files changed

+123
-119
lines changed

‎src/Client/Logistics.OfficeApp/src/app/pages/payment/components/payroll-details/payroll-details.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h6>Employee position:</h6>
1919
</div>
2020
<div class="row mb-3">
2121
<div class="col-4">
22-
<h6>Payroll period:</h6>
22+
<h6>Billing period:</h6>
2323
</div>
2424
<div class="col-8">
2525
{{payroll.startDate | date:'mediumDate'}} - {{payroll.endDate | date:'mediumDate'}}
@@ -39,7 +39,7 @@ <h6>Salary:</h6>
3939
</div>
4040
<div class="col-8">
4141
@if (payroll.employee.salaryType === salaryType.ShareOfGross) {
42-
{{payroll.employee.salary | percent}}
42+
{{payroll.employee.salary | percent}} of gross
4343
}
4444
@else {
4545
{{payroll.employee.salary | currency}}

‎src/Client/Logistics.OfficeApp/src/app/pages/payment/process-payment/process-payment.component.html

+92-86
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,107 @@ <h1 class="text-center">{{title}}</h1>
22
<hr class="w-100">
33

44
<div class="row justify-content-center mx-0">
5-
<div class="col-12 col-md-6">
5+
<div class="col-12 col-xl-6">
66
<p-card>
7-
@if (isLoading) {
8-
<p-progressSpinner></p-progressSpinner>
9-
}
7+
<div class="row mb-3">
8+
<div class="col-12">
9+
@if (isLoading) {
10+
<p-progressSpinner></p-progressSpinner>
11+
}
1012

11-
@if (invoice) {
12-
<app-invoice-details [invoice]="invoice"></app-invoice-details>
13-
}
13+
@if (invoice) {
14+
<app-invoice-details [invoice]="invoice"></app-invoice-details>
15+
}
16+
17+
@if (payroll) {
18+
<app-payroll-details [payroll]="payroll"></app-payroll-details>
19+
}
1420

15-
@if (payroll) {
16-
<app-payroll-details [payroll]="payroll"></app-payroll-details>
17-
}
21+
@if (isPaymentCompleted) {
22+
<div class="d-flex align-items-center">
23+
<i class="bi bi-check-circle-fill text-success h1"></i>
24+
<h4 class="ps-2">Payment is completed successfully</h4>
25+
</div>
26+
}
1827

19-
@if (isPaymentCompleted) {
20-
<div class="d-flex align-items-center">
21-
<i class="bi bi-check-circle-fill text-success h1"></i>
22-
<h4 class="ps-2">Payment is completed successfully</h4>
28+
<hr/>
2329
</div>
24-
}
25-
@else {
26-
<form [formGroup]="form" (ngSubmit)="submit()">
27-
<app-validation-summary [form]="form"></app-validation-summary>
28-
29-
<div class="mb-3">
30-
<h5>Choose payment method:</h5>
31-
@for (paymentMethod of paymentMethods; track paymentMethod.value) {
32-
<div class="field-checkbox">
33-
<p-radioButton formControlName="paymentMethod" [inputId]="paymentMethod.description" [value]="paymentMethod.value"></p-radioButton>
34-
<label [for]="paymentMethod.description" class="ms-2">{{paymentMethod.description}}</label>
35-
</div>
36-
}
37-
</div>
38-
39-
@if (form.get('paymentMethod')?.value === paymentMethod.CreditCard) {
40-
<h5>Credit/Debit card details</h5>
41-
<hr/>
42-
43-
<div class="col-12 col-md-6">
44-
<div class="mb-3">
45-
<label for="cardholderName" class="form-label">Cardholder Name</label>
46-
<input id="cardholderName" formControlName="cardholderName" class="form-control" placeholder="ex. John Smith" />
47-
</div>
48-
<div class="mb-3">
49-
<label for="cardNumber" class="form-label">Card Number</label>
50-
<p-inputMask id="cardNumber" formControlName="cardNumber" styleClass="form-control" mask="9999 9999 9999 9999" placeholder="1234 0000 0000 0000" />
30+
</div>
31+
32+
@if (!isPaymentCompleted) {
33+
<div class="row">
34+
<div class="col-12">
35+
<form class="row gx-5" [formGroup]="form" (ngSubmit)="submit()">
36+
<app-validation-summary [form]="form"></app-validation-summary>
37+
38+
<div class="col-12 col-md-6 col-lg-5">
39+
<h5>Billing address</h5>
40+
<hr/>
41+
<app-address-form formControlName="billingAddress"></app-address-form>
5142
</div>
52-
<div class="row mb-3">
53-
<div class="col-6">
54-
<label for="cardExpirationDate" class="form-label">Expiration Date</label>
55-
<p-inputMask id="cardExpirationDate" formControlName="cardExpirationDate" styleClass="form-control" mask="99/99" placeholder="MM/YY" />
56-
</div>
57-
<div class="col-6">
58-
<label for="cardCvv" class="form-label">CVV</label>
59-
<input id="cardCvv" formControlName="cardCvv" class="form-control" placeholder="123" />
43+
44+
<div class="col-12 col-md-6 col-lg-5">
45+
<div class="mb-3">
46+
<h5>Choose payment method:</h5>
47+
@for (paymentMethod of paymentMethods; track paymentMethod.value) {
48+
<div class="field-checkbox">
49+
<p-radioButton formControlName="paymentMethod" [inputId]="paymentMethod.description" [value]="paymentMethod.value"></p-radioButton>
50+
<label [for]="paymentMethod.description" class="ms-2">{{paymentMethod.description}}</label>
51+
</div>
52+
}
6053
</div>
54+
55+
@if (form.get('paymentMethod')?.value === paymentMethod.CreditCard) {
56+
<h5>Credit/Debit card details</h5>
57+
<hr/>
58+
59+
<div class="mb-3">
60+
<label for="cardholderName" class="form-label">Cardholder Name</label>
61+
<input id="cardholderName" formControlName="cardholderName" class="form-control" placeholder="ex. John Smith" />
62+
</div>
63+
<div class="mb-3">
64+
<label for="cardNumber" class="form-label">Card Number</label>
65+
<p-inputMask id="cardNumber" formControlName="cardNumber" styleClass="form-control" mask="9999 9999 9999 9999" placeholder="1234 0000 0000 0000" />
66+
</div>
67+
<div class="row mb-3">
68+
<div class="col-6">
69+
<label for="cardExpirationDate" class="form-label">Expiration Date</label>
70+
<p-inputMask id="cardExpirationDate" formControlName="cardExpirationDate" styleClass="form-control" mask="99/99" placeholder="MM/YY" />
71+
</div>
72+
<div class="col-6">
73+
<label for="cardCvv" class="form-label">CVV</label>
74+
<input id="cardCvv" formControlName="cardCvv" class="form-control" placeholder="123" />
75+
</div>
76+
</div>
77+
}
78+
@else if (form.get('paymentMethod')?.value === paymentMethod.BankAccount) {
79+
<h5>Bank account details</h5>
80+
<hr/>
81+
82+
<div class="mb-3">
83+
<label for="bankName" class="form-label">Bank Name</label>
84+
<input formControlName="bankName" class="form-control" placeholder="ex. Bank of America" />
85+
</div>
86+
<div class="mb-3">
87+
<label for="bankAccountNumber" class="form-label">Account Number</label>
88+
<input formControlName="bankAccountNumber" class="form-control" placeholder="ex. 1234567891011" />
89+
</div>
90+
<div class="mb-3">
91+
<label for="bankRoutingNumber" class="form-label">Routing Number</label>
92+
<input formControlName="bankRoutingNumber" class="form-control" placeholder="ex. 123456789" />
93+
</div>
94+
}
6195
</div>
62-
</div>
63-
64-
}
65-
@else if (form.get('paymentMethod')?.value === paymentMethod.BankAccount) {
66-
<h5>Bank account details</h5>
67-
<hr/>
68-
69-
<div class="col-12 col-md-6">
70-
<div class="mb-3">
71-
<label for="bankName" class="form-label">Bank Name</label>
72-
<input formControlName="bankName" class="form-control" placeholder="ex. Bank of America" />
73-
</div>
74-
<div class="mb-3">
75-
<label for="bankAccountNumber" class="form-label">Account Number</label>
76-
<input formControlName="bankAccountNumber" class="form-control" placeholder="ex. 1234567891011" />
77-
</div>
78-
<div class="mb-3">
79-
<label for="bankRoutingNumber" class="form-label">Routing Number</label>
80-
<input formControlName="bankRoutingNumber" class="form-control" placeholder="ex. 123456789" />
81-
</div>
82-
</div>
83-
}
84-
85-
<div>
86-
<h5>Billing address</h5>
87-
<hr/>
88-
<app-address-form formControlName="billingAddress"></app-address-form>
89-
</div>
90-
91-
<div>
92-
<p-button type="submit"
93-
class="mt-3"
94-
icon="bi bi-wallet"
95-
label="Process payment"
96-
[disabled]="isLoading || !form.valid">
97-
</p-button>
96+
97+
<p-button type="submit"
98+
class="mt-3"
99+
icon="bi bi-wallet"
100+
label="Process payment"
101+
[disabled]="isLoading || !form.valid">
102+
</p-button>
103+
</form>
98104
</div>
99-
</form>
105+
</div>
100106
}
101107
</p-card>
102108
</div>

‎src/Client/Logistics.OfficeApp/src/app/pages/payment/process-payment/process-payment.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export class ProcessPaymentComponent implements OnInit {
170170
this.isLoading = true;
171171
this.apiService.getPayroll(payrollId).subscribe((result) => {
172172
this.payroll = result.data;
173-
// this.isPaymentCompleted = this.invoice?.payment.status === PaymentStatus.Paid;
173+
this.isPaymentCompleted = this.payroll?.payment.status === PaymentStatus.Paid;
174174
this.isLoading = false;
175175
});
176176
}
@@ -179,7 +179,7 @@ export class ProcessPaymentComponent implements OnInit {
179179
this.isLoading = true;
180180
this.apiService.getInvoice(invoiceId).subscribe((result) => {
181181
this.invoice = result.data;
182-
// this.isPaymentCompleted = this.invoice?.payment.status === PaymentStatus.Paid;
182+
this.isPaymentCompleted = this.invoice?.payment.status === PaymentStatus.Paid;
183183
this.isLoading = false;
184184
});
185185
}

‎src/Client/Logistics.OfficeApp/src/app/shared/components/address-form/address-form.component.html

+27-29
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
1-
<div class="row">
2-
<form [formGroup]="form" class="col-12 col-md-6">
3-
<app-validation-summary [form]="form"></app-validation-summary>
4-
<div class="mb-3">
5-
<label for="addressLine1" class="form-label">Address Line 1:</label>
6-
<input type="text" id="addressLine1" formControlName="addressLine1" class="form-control"/>
7-
</div>
8-
<div class="mb-3">
9-
<label for="addressLine2" class="form-label">Address Line 2 (optional):</label>
10-
<input type="text" id="addressLine2" formControlName="addressLine2" class="form-control"/>
11-
</div>
12-
<div class="mb-3">
13-
<label for="city" class="form-label">City:</label>
14-
<input type="text" id="city" formControlName="city" class="form-control"/>
15-
</div>
16-
<div class="mb-3">
17-
<label for="region" class="form-label">State/Region:</label>
18-
<input type="text" id="region" formControlName="region" class="form-control"/>
19-
</div>
20-
<div class="mb-3">
21-
<label for="zipCode" class="form-label">Zip Code:</label>
22-
<input type="text" id="zipCode" formControlName="zipCode" class="form-control"/>
23-
</div>
24-
<div class="mb-3">
25-
<label for="country" class="form-label">Country:</label>
26-
<input type="text" id="country" formControlName="country" class="form-control"/>
27-
</div>
28-
</form>
29-
</div>
1+
<form [formGroup]="form">
2+
<app-validation-summary [form]="form"></app-validation-summary>
3+
<div class="mb-3">
4+
<label for="addressLine1" class="form-label">Address Line 1:</label>
5+
<input id="addressLine1" formControlName="addressLine1" class="form-control"/>
6+
</div>
7+
<div class="mb-3">
8+
<label for="addressLine2" class="form-label">Address Line 2 (optional):</label>
9+
<input id="addressLine2" formControlName="addressLine2" class="form-control"/>
10+
</div>
11+
<div class="mb-3">
12+
<label for="city" class="form-label">City:</label>
13+
<input id="city" formControlName="city" class="form-control"/>
14+
</div>
15+
<div class="mb-3">
16+
<label for="region" class="form-label">State/Region:</label>
17+
<input id="region" formControlName="region" class="form-control"/>
18+
</div>
19+
<div class="mb-3">
20+
<label for="zipCode" class="form-label">Zip Code:</label>
21+
<input id="zipCode" formControlName="zipCode" class="form-control"/>
22+
</div>
23+
<div class="mb-3">
24+
<label for="country" class="form-label">Country:</label>
25+
<input id="country" formControlName="country" class="form-control"/>
26+
</div>
27+
</form>

0 commit comments

Comments
 (0)