UI changes for the acknowledgement and receipt pages

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

@@ -6,7 +6,7 @@
 
 <section class="bread-crumbs">
     <span [routerLink]="['/tabs/e-services']"> E-Services </span> / 
-    <span class="current-page"> Business Names </span>
+    <span class="current-page"> Business Name Application </span>
 </section>
 
 <div class="search-input-container">
@@ -77,7 +77,7 @@
     </h5>
     <ul class="plan-list">
         <li *ngFor="let plan of plans">
-            <h4> {{ plan.name }} </h4>
+            <!-- <h4> {{ plan.name }} </h4> -->
             <h2> S$ {{ plan.amount }}/- <span> (govt fees + taxes extra) </span> </h2>
             <h4> {{ plan.range }} </h4>
             <button class="common-button" (click)="selectPlan(plan)"> Pay </button>
@@ -91,26 +91,13 @@
     </div>
 </div>
 
-<div class="plan-list-container" *ngIf="formState === 'COMPLETE_PURCHASE'">
-    <section class="confirmation-box" *ngIf="selectedPlan">
-        <h6> Successfully made payment </h6>
-        <p class="description">
-            {{ isAppealing ? 
-                '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>
-
 <section class="acknowledgement" *ngIf="formState === 'ACKNOWLEDGEMENT'">
     <h2> Acknowledgement </h2>
     
     <div class="container">
         <div class="bill-container">
+            <img class="check-icon" src="assets/icons/checkmark.svg" alt="check icon">
+            <h3>Payment Successful</h3>
             <ul class="bill-breakup">
                 <li *ngFor="let transaction of acknowledgementDetails">
                     <label> {{ transaction.name }} </label>
@@ -125,10 +112,19 @@
             <div class="total-amount">
                 <label> Paid Amount </label> <span> S$ 15.00 </span>
             </div>
-        </div>        
+        </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>     
 
         <ul class="message-board">
-            <h5> Important Messages </h5>
+            <h5> Messages </h5>
 
             <li>
                 1. Please click <a href="#">Here</a> to continue with your registeration. 
@@ -139,16 +135,11 @@
             <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>
+            <li *ngIf="isAppealing">
+                3. Please stand by while the Authority Officer contacts you with the results of your appeal
+            </li>
+        </ul>
     </div>
 </section>
 

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

@@ -252,23 +252,46 @@
         color: var(--dark-grey);
         filter: brightness(80%);
         font-weight: 500;
-        margin: 2rem;
+        margin: 2rem 2rem 3rem;
     }
 
     .container {
-        display: flex;
-        width: calc(100% - 2rem);
-        align-items: flex-start;
+        width: calc(70% - 2rem);
         margin: 2rem auto;
+
+        @media print {
+            width: calc(100% - 2rem);
+        }
     }
 
     .bill-container {
-        width: 50%;
-        border: 2px solid var(--border-grey);
-        border-radius: 1rem;        
+        width: 70%;
+        box-shadow: 0 0 10px var(--shadow-grey);
+        border-radius: 1rem;   
+        overflow: hidden;    
+        margin: 0 auto 5rem; 
+
+        @media print {
+            width: 100%;
+        }
+    }
+
+    .check-icon {
+        display: block;
+        width: 58px;
+        height: auto;
+        margin: 3rem auto 2rem;
+    }
+
+    h3 {
+        font-size: 3rem;
+        font-weight: normal;
+        text-align: center;
+        color: var(--success);
     }
 
     .bill-breakup {
+        margin-top: 3rem;
         display: grid;
         grid-template-columns: 1fr 1fr;
         list-style: none;
@@ -281,7 +304,7 @@
         label {
             display: block;
             color: var(--dark-grey);
-            font-size: 1.4rem;
+            font-size: 1.6rem;
             filter: brightness(80%);
         }
 
@@ -302,16 +325,17 @@
     }
 
     .form-action-buttons {
-        text-align: left;
         margin: 2rem 1.5rem;
+
+        @media print {
+            display: none;
+        }
     }
 
     .total-amount {
-        text-align: right;
-        margin: 0 1.5rem 2rem;
+        text-align: center;
         overflow: hidden;        
         padding: 1rem;
-        border-radius: 1rem;
         position: relative;
 
         &::before {
@@ -321,7 +345,7 @@
             top: 0;
             width: 100%;
             height: 100%;
-            background-color: var(--border-grey);
+            background-color: var(--footer-grey);
             opacity: 0.4;
         }
 
@@ -342,9 +366,12 @@
     }
 
     .message-board {
-        width: 50%;
         padding: 0 2rem;
         list-style: none;
+
+        @media print {
+            display: none;
+        }
         
         h5 {
             font-size: 1.6rem;
@@ -434,6 +461,10 @@
         .cell {
             width: calc(100% / 6);
 
+            @media print {
+                word-break: break-all;
+            }
+
             &:nth-child(1) {
                 text-align: center;
                 width: 10rem;
@@ -492,10 +523,11 @@
             color: var(--dark-grey);
             filter: brightness(80%);
             font-weight: 500;
+            margin-bottom: 1rem;
         }
 
         li {
-            margin: 1.5rem 0;
+            margin: 0.5rem 0;
             line-height: 1.7;
             letter-spacing: 0.5px;
             font-size: 1.4rem;
@@ -511,5 +543,9 @@
 
     .form-action-buttons {
         text-align: left;
+
+        @media print {
+            display: none;
+        }
     }
 }

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

@@ -13,8 +13,8 @@ interface Plan {
 })
 export class RegisterBusinessComponent implements OnInit {
     formState: 'CHECK_NAME' | 'INIT_REGISTER' | 
-    'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | 
-    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME';
+    'REGISTER_FORM' | 'SELECT_PLAN' | 
+    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'RECEIPT';
     nameToCheck: string = 'JK Enterprises ACRA Ltd';
     isAppealing: boolean = false;
     agreeToReserve: boolean = false;
@@ -30,11 +30,11 @@ export class RegisterBusinessComponent implements OnInit {
         range: 'One Year'
     }, {
         name: 'Popular',
-        amount: 20,
+        amount: 45,
         range: 'Three Years'
     }, {
         name: 'Premium',
-        amount: 25,
+        amount: 75,
         range: 'Five Years'
     }];
 
@@ -175,7 +175,7 @@ export class RegisterBusinessComponent implements OnInit {
 
         this.childCheck = window.setInterval(() => {
             if (this.paymentChild && this.paymentChild.closed) {
-                this.formState = 'COMPLETE_PURCHASE';
+                this.formState = 'ACKNOWLEDGEMENT';
                 window.clearInterval(this.childCheck);
                 this.childCheck = undefined;
             }

src/app/tabs/tabs.component.scss

@@ -23,6 +23,10 @@ $header-height: 10rem;
         align-items: center;
         justify-content: flex-start;
 
+        @media print {
+            display: none;
+        }
+
         a {
             font-size: 1.6rem;
             letter-spacing: 0.5px;
@@ -43,6 +47,10 @@ $header-height: 10rem;
         position: relative;
         margin-left: auto;
 
+        @media print {
+            display: none;
+        }
+
         input {
             display: block;
             height: 5rem;
@@ -78,6 +86,10 @@ $header-height: 10rem;
         position: relative;
         overflow: hidden;
         width: 20rem;
+
+        @media print {
+            display: none;
+        }
         
         &::before {
             content: '';

src/assets/icons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="HoiJCu43QtshzIrYCxOfCa" x1="21.241" x2="3.541" y1="39.241" y2="21.541" gradientUnits="userSpaceOnUse"><stop offset=".108" stop-color="#0d7044"/><stop offset=".433" stop-color="#11945a"/></linearGradient><path fill="url(#HoiJCu43QtshzIrYCxOfCa)" d="M16.599,41.42L1.58,26.401c-0.774-0.774-0.774-2.028,0-2.802l4.019-4.019	c0.774-0.774,2.028-0.774,2.802,0L23.42,34.599c0.774,0.774,0.774,2.028,0,2.802l-4.019,4.019	C18.627,42.193,17.373,42.193,16.599,41.42z"/><linearGradient id="HoiJCu43QtshzIrYCxOfCb" x1="-15.77" x2="26.403" y1="43.228" y2="43.228" gradientTransform="rotate(134.999 21.287 38.873)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#88b749"/><stop offset="1" stop-color="#8cb257"/></linearGradient><path fill="url(#HoiJCu43QtshzIrYCxOfCb)" d="M12.58,34.599L39.599,7.58c0.774-0.774,2.028-0.774,2.802,0l4.019,4.019	c0.774,0.774,0.774,2.028,0,2.802L19.401,41.42c-0.774,0.774-2.028,0.774-2.802,0l-4.019-4.019	C11.807,36.627,11.807,35.373,12.58,34.599z"/></svg>

src/styles.scss

@@ -21,6 +21,8 @@ button, a {
     --teal: #1e8bbc;
     --dark-grey: #7a7a7a;
     --border-grey: #e8e8e8;
+    --shadow-grey: hsl(0, 0%, 86%);
+    --footer-grey: hsl(0, 0%, 93%);
     --error: #d07a7a;
     --success: #88b749;
 }