Receipt UI

src/app/register-business/register-business.component.html

@@ -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>

src/app/register-business/register-business.component.scss

@@ -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;
+    }
 }

src/app/register-business/register-business.component.ts

@@ -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();
+    }
+
 }

src/styles.scss

@@ -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 {