Acknowledgement UI

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

@@ -5,7 +5,8 @@
 </header>
 
 <section class="bread-crumbs">
-    <span [routerLink]="['/tabs/e-services']"> E-Services </span> / <span class="current-page"> Business Names </span>
+    <span [routerLink]="['/tabs/e-services']"> E-Services </span> / 
+    <span class="current-page"> Business Names </span>
 </section>
 
 <div class="search-input-container">
@@ -28,7 +29,7 @@
             </label>
         </p>
     
-        <button class="proceed-button" *ngIf="error && !error.isInvalid"
+        <button class="common-button" *ngIf="error && !error.isInvalid"
         (click)="confirmName()" [disabled]="error && !error.isInvalid && !agreeToReserve">
             {{ !error?.isUnique ? 'Appeal for name' : 'Proceed' }}
         </button>
@@ -61,10 +62,10 @@
     </section>
     
     <div class="form-action-buttons">
-        <button (click)="formState = 'INIT_REGISTER'">
+        <button class="common-button neutral" (click)="formState = 'INIT_REGISTER'">
             Back
         </button>
-        <button (click)="formState = 'SELECT_PLAN'">
+        <button class="common-button" (click)="formState = 'SELECT_PLAN'">
             Proceed
         </button>
     </div>
@@ -79,12 +80,12 @@
             <h4> {{ plan.name }} </h4>
             <h2> S$ {{ plan.amount }}/- <span> (govt fees + taxes extra) </span> </h2>
             <h4> {{ plan.range }} </h4>
-            <button (click)="selectPlan(plan)"> Pay </button>
+            <button class="common-button" (click)="selectPlan(plan)"> Pay </button>
         </li>
     </ul>
 
     <div class="form-action-buttons">
-        <button (click)="goBackToFormDetails()">
+        <button class="common-button neutral" (click)="goBackToFormDetails()">
             Back
         </button>
     </div>
@@ -98,5 +99,59 @@
                 'Please stand by while the Authority Officer contacts you with the results of your appeal' : 
                 'Congratulations! Your name has been submitted for reservation under "' + selectedPlan.range + ' Plan". Please proceed with further setup of your business entity' }}
         </p>
+
+        <button class="common-button" (click)="formState = 'ACKNOWLEDGEMENT'">
+            View Acknowledgement
+        </button>
+    </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>
+    
+                <li>
+                    2. Click <a>Here</a> for the estimated processing time
+                </li>
+            </ul>
+        </div>
+
+        <div class="form-action-buttons">
+            <button class="common-button neutral">
+                Print
+            </button>
+            <button class="common-button">
+                View Receipt
+            </button>
+        </div>
+
     </section>
-</div>
+</ng-container>

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

@@ -93,52 +93,15 @@
             color: var(--success);
         }
     }
-
-    .proceed-button {
-        border: none;
-        background-color: var(--highlight);
-        padding: 0 4rem;
-        color: white;
-        font-size: 1.6rem;
-        letter-spacing: 0.5px;
-        border-radius: 4rem;
-        height: 5rem;
-
-        &:disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-    }
 }
 
 .form-action-buttons {
     text-align: center;
+    margin-bottom: 2rem;
 
     button {
-        border: none;
-        background-color: var(--highlight);
-        padding: 0 4rem;
-        color: white;
-        font-size: 1.6rem;
-        letter-spacing: 0.5px;
-        border-radius: 4rem;
-        height: 5rem;
-        vertical-align: middle;
-
-        &.disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-
         &:first-child {
-            background-color: var(--border-grey);
-            color: var(--dark-grey);
-            margin-right: 20px;
-
-            &.highlight {
-                background-color: var(--highlight);
-                color: white;
-            }
+            margin-right: 2rem;
         }
     }
 }
@@ -253,17 +216,7 @@
         }
 
         button {
-            border: none;
-            background-color: var(--highlight);
-            padding: 0 6rem;
-            color: white;
-            font-size: 1.6rem;
-            letter-spacing: 0.5px;
-            border-radius: 4rem;
-            height: 5rem;
-            vertical-align: middle;
             margin-top: 4rem;
-            cursor: pointer;
         }
     }
 
@@ -288,4 +241,130 @@
             text-align: center;
         }
     }
+}
+
+.acknowledgement-receipt {
+    width: 100%;
+    margin: 0 auto;
+    
+    h2 {
+        font-size: 2rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 500;
+        margin: 2rem;
+    }
+
+    .container {
+        display: flex;
+        width: calc(100% - 2rem);
+        align-items: flex-start;
+        margin: 2rem auto;
+    }
+
+    .bill-container {
+        width: 50%;
+        border: 2px solid var(--border-grey);
+        border-radius: 1rem;        
+    }
+
+    .bill-breakup {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        list-style: none;
+
+        li {
+            margin: 1.8rem;
+            width: 100%;
+        }
+
+        label {
+            display: block;
+            color: var(--dark-grey);
+            font-size: 1.4rem;
+            filter: brightness(80%);
+        }
+
+        .value {
+            display: block;
+            color: var(--dark-grey);
+            opacity: 0.8;
+            font-size: 1.6rem;
+            letter-spacing: 0.5px;
+            line-height: 1.6;
+            margin-top: 1rem;
+
+            &.active {
+                color: var(--highlight);
+                font-weight: normal;
+            }
+        }
+    }
+
+    .form-action-buttons {
+        text-align: left;
+        margin: 2rem 1.5rem;
+    }
+
+    .total-amount {
+        text-align: right;
+        margin: 0 1.5rem 2rem;
+        overflow: hidden;        
+        padding: 1rem;
+        border-radius: 1rem;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--border-grey);
+            opacity: 0.4;
+        }
+
+        & > * {
+            position: relative;
+        }
+
+        label {      
+            font-size: 2rem;      
+            color: var(--dark-grey);
+        }
+
+        span {
+            margin-left: 1rem;
+            font-size: 2.4rem;
+            color: var(--highlight);
+        }
+    }
+
+    .message-board {
+        width: 50%;
+        padding: 0 2rem;
+        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;
+            }
+        }
+    }
 }

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

@@ -12,7 +12,9 @@ interface Plan {
     styleUrls: ['./register-business.component.scss']
 })
 export class RegisterBusinessComponent implements OnInit {
-    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'CHECK_NAME';
+    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 
+    'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | 
+    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'ACKNOWLEDGEMENT';
     nameToCheck: string = 'JK Enterprises ACRA Ltd';
     isAppealing: boolean = false;
     agreeToReserve: boolean = false;
@@ -49,7 +51,7 @@ export class RegisterBusinessComponent implements OnInit {
         name: string,
         type: 'date' | 'select' | 'text' | 'email' | 'number',
         placeholder?: string,
-        options?: Array<string>
+        options?: Array<string>,
     }> = [{
         name: 'Entity Type',
         type: 'select',
@@ -84,6 +86,38 @@ export class RegisterBusinessComponent implements OnInit {
         options: ['YES', 'NO']
     }];
 
+
+    transactionAcknowledgementDetails: Array<{
+        name: string,
+        value: string | number,
+        amount?: number,
+        needCopyWidget?: boolean,
+    }> = [{
+        name: 'UEM',
+        value: '---'
+    }, {
+        name: 'Entity Name',
+        value: this.nameToCheck
+    }, {
+        name: 'Transaction Number',
+        value: '39047729362923293',
+        needCopyWidget: true,
+    }, {
+        name: 'Receipt Number',
+        value: 'ACRA38293',
+        needCopyWidget: true
+    }, {
+        name: 'EP Reference No.',
+        value: '20910038829384470'
+    }, {
+        name: 'Payment Date',
+        value: '06/11/2021 11:28:01'
+    }, {
+        name: 'Description',
+        value: 'Application for Business Name',
+        amount: 15
+    }];
+
     constructor() { }
 
     ngOnInit(): void {

src/styles.scss

@@ -31,6 +31,11 @@ button, a {
     align-items: center;
     justify-content: flex-start;
     padding: 0 2rem;
+    position: sticky;
+    position: -webkit-sticky;
+    background-color: white;
+    z-index: 1;
+    top: 0;
 
     &::after {
         content: '';
@@ -52,7 +57,12 @@ button, a {
 .bread-crumbs {
     font-size: 1.4rem;
     color: var(--dark-grey);
-    margin: 2rem;
+    padding: 2rem;
+    position: sticky;
+    position: -webkit-sticky;
+    background-color: white;
+    top: 2.9rem;
+    z-index: 1;
 
     span {
         color: var(--highlight);
@@ -65,4 +75,25 @@ button, a {
             color: var(--dark-grey);
         }
     }
+}
+
+.common-button {
+    border: none;
+    background-color: var(--highlight);
+    padding: 0 4rem;
+    color: white;
+    font-size: 1.6rem;
+    letter-spacing: 0.5px;
+    border-radius: 4rem;
+    height: 5rem;
+
+    &.neutral {
+        background-color: var(--border-grey);
+        color: var(--dark-grey);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 }