kj
/
bizfile
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

Receipt UI

master
kj1352 4 yıl önce
ebeveyn
a119f045cf
işleme
42e83c8973
4 değiştirilmiş dosya ile 294 ekleme ve 51 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +97
    -44
      src/app/register-business/register-business.component.html
  2. +146
    -1
      src/app/register-business/register-business.component.scss
  3. +35
    -5
      src/app/register-business/register-business.component.ts
  4. +16
    -1
      src/styles.scss

+ 97
- 44
src/app/register-business/register-business.component.html Dosyayı Görüntüle

@@ -106,52 +106,105 @@
</section>
</div>


<ng-container *ngIf="formState === 'ACKNOWLEDGEMENT'">
<section class="acknowledgement-receipt">
<h2> Acknowledgement </h2>
<div class="container">
<div class="bill-container">
<ul class="bill-breakup">
<li *ngFor="let transaction of transactionAcknowledgementDetails">
<label> {{ transaction.name }} </label>
<div class="value"
[ngClass]="{'active' : transaction.needCopyWidget && transaction.needCopyWidget === true }">
{{ transaction.value }}
<span *ngIf="transaction.amount"> - {{ transaction.amount }} </span>
</div>
</li>
</ul>
<div class="total-amount">
<label> Paid Amount </label> <span> S$ 15.00 </span>
</div>
</div>
<ul class="message-board">
<h5> Important Messages </h5>
<li>
1. Please click <a>Here</a> to continue with your registeration.
If you do not wish to register now, please take note of the "Transaction Number"
above for your registeration later.
</li>
<section class="acknowledgement" *ngIf="formState === 'ACKNOWLEDGEMENT'">
<h2> Acknowledgement </h2>
<li>
2. Click <a>Here</a> for the estimated processing time
</li>
<div class="container">
<div class="bill-container">
<ul class="bill-breakup">
<li *ngFor="let transaction of acknowledgementDetails">
<label> {{ transaction.name }} </label>
<div class="value"
[ngClass]="{'active' : transaction.highlight && transaction.highlight === true }">
{{ transaction.value }}
<span *ngIf="transaction.amount"> - {{ transaction.amount }} </span>
</div>
</li>
</ul>
</div>
<div class="total-amount">
<label> Paid Amount </label> <span> S$ 15.00 </span>
</div>
</div>

<ul class="message-board">
<h5> Important Messages </h5>

<li>
1. Please click <a href="#">Here</a> to continue with your registeration.
If you do not wish to register now, please take note of the "Transaction Number"
above for your registeration later.
</li>

<li>
2. Click <a href="#">Here</a> for the estimated processing time
</li>
</ul>
</div>

<div class="form-action-buttons">
<button class="common-button outline" (click)="print()">
Print
</button>
<button class="common-button" (click)="formState = 'RECEIPT'">
View Receipt
</button>
</div>
</section>

<section class="receipt" *ngIf="formState === 'RECEIPT'">
<h2> Receipt </h2>

<ul class="bill-breakup">
<li *ngFor="let transaction of receiptDetails">
<label> {{ transaction.name }}: </label>
<div class="value"> {{ transaction.value }} </div>
</li>
</ul>

<div class="form-action-buttons">
<button class="common-button neutral">
Print
</button>
<button class="common-button">
View Receipt
</button>
</div>

<section class="table">
<header>
<div class="cell"> S/N </div>
<div class="cell"> Transaction No. </div>
<div class="cell"> Entity Name </div>
<div class="cell"> Description </div>
<div class="cell"> Amount (S$) </div>
<div class="cell"> Status </div>
</header>
<ul>
<li>
<div class="cell"> 1 </div>
<div class="cell"> 39047729362923293 </div>
<div class="cell"> {{ nameToCheck }} </div>
<div class="cell"> Application for a new business name </div>
<div class="cell"> 15.00 </div>
<div class="cell"> Completed </div>
</li>
</ul>
</section>
</ng-container>

<ul class="message-board">
<h5> Please Note </h5>

<li>
1. This is a computer-generated receipt. No signature is required.
</li>

<li>
2. It is important to print a copy of the receipt for future reference.
</li>
</ul>

<div class="form-action-buttons">
<button class="common-button neutral" (click)="formState = 'ACKNOWLEDGEMENT'">
Back
</button>
<button class="common-button outline" (click)="print()">
Print
</button>
</div>

</section>

+ 146
- 1
src/app/register-business/register-business.component.scss Dosyayı Görüntüle

@@ -243,7 +243,7 @@
}
}

.acknowledgement-receipt {
.acknowledgement {
width: 100%;
margin: 0 auto;
@@ -367,4 +367,149 @@
}
}
}
}

.receipt {
width: calc(100% - 4rem);
margin: 0 auto;
h2 {
font-size: 2rem;
color: var(--dark-grey);
filter: brightness(80%);
font-weight: 500;
margin: 2rem 0;
}

.bill-breakup {
display: grid;
grid-template-columns: 1fr 1fr;
list-style: none;

li {
margin-bottom: 1rem;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}

label {
display: block;
color: var(--dark-grey);
font-size: 1.4rem;
}

.value {
display: block;
color: var(--dark-grey);
opacity: 0.8;
font-size: 1.6rem;
letter-spacing: 0.5px;
line-height: 1.6;
margin-left: 1rem;
}
}

.table {
margin: 2rem auto;
width: 100%;
border-radius: 1rem;
overflow: auto;
border: 2px solid var(--border-grey);
min-height: 10rem;
header {
background: linear-gradient(90deg, var(--secondary) 0%, var(--primary));
color: white;
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: flex-start;
height: 5.5rem;
font-weight: 300;
letter-spacing: 0.5px;
}
.cell {
width: calc(100% / 6);

&:nth-child(1) {
text-align: center;
width: 10rem;
}

&:nth-child(2) {
width: calc(20% + (10% - 10rem));
}

&:nth-child(3) {
width: 20%;
}

&:nth-child(4) {
width: 20%;
}

&:nth-child(5) {
width: 10%;
}

&:nth-child(3) {
width: 20%;
}
}
ul {
list-style: none;
}
li {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 2rem 0;
&:nth-child(even) {
background-color: var(--border-grey);
}
.cell {
font-size: 1.4rem;
color: var(--dark-grey);
line-height: 1.7;
}
}
}

.message-board {
width: 100%;
margin: 4rem 0;
list-style: none;
h5 {
font-size: 1.6rem;
color: var(--dark-grey);
filter: brightness(80%);
font-weight: 500;
}

li {
margin: 1.5rem 0;
line-height: 1.7;
letter-spacing: 0.5px;
font-size: 1.4rem;
color: var(--dark-grey);
opacity: 0.8;

a {
color: var(--highlight);
font-weight: 500;
}
}
}

.form-action-buttons {
text-align: left;
}
}

+ 35
- 5
src/app/register-business/register-business.component.ts Dosyayı Görüntüle

@@ -14,7 +14,7 @@ interface Plan {
export class RegisterBusinessComponent implements OnInit {
formState: 'CHECK_NAME' | 'INIT_REGISTER' |
'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' |
'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'ACKNOWLEDGEMENT';
'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME';
nameToCheck: string = 'JK Enterprises ACRA Ltd';
isAppealing: boolean = false;
agreeToReserve: boolean = false;
@@ -87,11 +87,11 @@ export class RegisterBusinessComponent implements OnInit {
}];


transactionAcknowledgementDetails: Array<{
acknowledgementDetails: Array<{
name: string,
value: string | number,
amount?: number,
needCopyWidget?: boolean,
highlight?: boolean,
}> = [{
name: 'UEM',
value: '---'
@@ -101,11 +101,11 @@ export class RegisterBusinessComponent implements OnInit {
}, {
name: 'Transaction Number',
value: '39047729362923293',
needCopyWidget: true,
highlight: true,
}, {
name: 'Receipt Number',
value: 'ACRA38293',
needCopyWidget: true
highlight: true
}, {
name: 'EP Reference No.',
value: '20910038829384470'
@@ -118,6 +118,32 @@ export class RegisterBusinessComponent implements OnInit {
amount: 15
}];

receiptDetails: Array<{
name: string,
value: string | number,
}> = [{
name: 'Receipt Number',
value: 'ACRA38293',
}, {
name: 'ARN',
value: 'ARN2021110294038',
}, {
name: 'EP Reference No.',
value: '20910038829384470'
}, {
name: 'Tax ID',
value: 'M9-0C038921',
}, {
name: 'Paid By',
value: 'KOH YA TING',
}, {
name: 'Payment Date',
value: '06/11/2021 11:28:01'
}, {
name: 'Paid Via',
value: 'Net Banking',
}];

constructor() { }

ngOnInit(): void {
@@ -180,4 +206,8 @@ export class RegisterBusinessComponent implements OnInit {
}
}

print() {
window.print();
}

}

+ 16
- 1
src/styles.scss Dosyayı Görüntüle

@@ -85,11 +85,26 @@ button, a {
font-size: 1.6rem;
letter-spacing: 0.5px;
border-radius: 4rem;
height: 5rem;
height: 4.5rem;
transition: box-shadow 0.3s;

&:hover {
box-shadow: 0px 0px 10px -2px var(--highlight);
}

&.neutral {
background-color: var(--border-grey);
color: var(--dark-grey);

&:hover {
box-shadow: 0px 0px 10px -2px var(--dark-grey);
}
}

&.outline {
border: 1px solid var(--highlight);
background-color: transparent;
color: var(--highlight);
}

&:disabled {


Yaz Önizleme
Yükleniyor…
İptal
Kaydet