Update the payment page

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

@@ -22,7 +22,7 @@
             <p> {{ error.message }} </p>
         </section>
 
-        <p class="description" *ngIf="error && !error.isInvalid && error.isUnique">
+        <p class="description" *ngIf="error && !error.isInvalid">
             <input type="checkbox" id="confirm-init-register" [(ngModel)]="agreeToReserve">
             <label for="confirm-init-register">
                 I agree that I am reserving a name for my business entity, and am legally authorized to do so according to both national and local laws. I understand that the government will look through my financial records and will consent to the same.
@@ -71,18 +71,45 @@
     </div>
 </ng-container>
 
-<div class="plan-list-container" *ngIf="formState === 'SELECT_PLAN'">
-    <h5>
-        Choose a plan for <strong> {{ nameToCheck }} </strong>
-    </h5>
-    <ul class="plan-list">
-        <li *ngFor="let plan of plans">
-            <!-- <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>
-        </li>
-    </ul>
+<div class="payment-container" *ngIf="formState === 'SELECT_PLAN'">
+
+    <section class="payment-block">
+        <h3 class="payment-title">Payment for business name reservation</h3>
+        <h5 class="business-name">For "{{ nameToCheck }}"</h5>
+
+        <div class="tabs">
+            <div class="tab" [ngClass]="{'active': selectedPaymentTab === 'overview'}" (click)="selectedPaymentTab = 'overview'">Overview</div>
+            <div class="tab" [ngClass]="{'active': selectedPaymentTab === 'details'}" (click)="selectedPaymentTab = 'details'">Details</div>
+        </div>
+
+        <div class="tab-content">
+            <div *ngIf="selectedPaymentTab === 'overview'">
+                Reserve and purchase this business name for a set number of years
+            </div>
+            <div *ngIf="selectedPaymentTab === 'details'">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem qui ullam laboriosam, exercitationem non aliquam voluptatum esse molestiae reiciendis ad minus, nulla magnam maxime excepturi beatae perspiciatis, sunt repellendus atque.
+                </p>
+            </div>
+        </div>
+
+        <div class="no-of-years-label">No. of years</div>
+        <div class="select-holder">
+            <select [(ngModel)]="noOfYears">
+                <option *ngFor="let year of years" [value]="year"> {{ year }} </option>
+            </select>  
+            <img src="assets/icons/chevron-down.svg" alt="calendar icon">
+        </div>
+        <section class="total-price-container">
+            S$ {{ (noOfYears * perYearPrice).toFixed(2) }}
+        </section>
+
+        <div class="form-action-buttons">
+            <button class="common-button" (click)="payForReservation()">
+                Pay
+            </button>
+        </div>
+    </section>
 
     <div class="form-action-buttons">
         <button class="common-button neutral" (click)="goBackToFormDetails()">
@@ -110,7 +137,7 @@
             </ul>
     
             <div class="total-amount">
-                <label> Paid Amount </label> <span> S$ 15.00 </span>
+                <label> Paid Amount </label> <span> S$ {{ (noOfYears * perYearPrice).toFixed(2) }} </span>
             </div>
         </div>   
 
@@ -170,7 +197,7 @@
                 <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"> {{ (noOfYears * perYearPrice).toFixed(2) }} </div>
                 <div class="cell"> Completed </div>
             </li>            
         </ul>

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

@@ -109,7 +109,9 @@
 .form {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    width: calc(70% - 2rem);
     padding: 4rem;
+    margin: 0 auto;
 
     .input-holder {
         width: calc(100% - 2rem);
@@ -154,91 +156,106 @@
         img {
             position: relative;
             transform: translateX(-4rem);
+            pointer-events: none;
+            background-color: white;
         }
     }
 }
 
 
-.plan-list-container {
-    text-align: center;
+.payment-container {
+    padding: 1rem;
+    
+    .payment-block {
+        padding: 3rem 4rem;
+        width: calc(40% - 2rem);
+        box-shadow: 0 0 10px var(--shadow-grey);
+        border-radius: 1rem; 
+        margin: 0 auto 5rem; 
 
-    h5 {
-        font-size: 1.8rem;
-        color: var(--dark-grey);
-        filter: brightness(80%);
-        font-weight: 300;
-        line-height: 1.4;
-        letter-spacing: 0.5px;
-        margin: 4rem auto;
-        width: 50%;
-    }
+        .payment-title {
+            font-size: 2.2rem;
+            color: var(--dark-grey);
+            filter: brightness(50%);
+            font-weight: 500;
+            margin-bottom: 0.3rem;
+        }
 
-    .plan-list {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        list-style: none;
-        margin-bottom: 4rem;
+        .business-name {
+            font-size: 1.6rem;
+            color: var(--dark-grey);
+            font-weight: normal;
+            margin-bottom: 2rem;
+        }
 
-        li {
-            border: 1px solid var(--border-grey);
-            border-radius: 2rem;
-            padding: 3rem 6rem;
-            margin: 0 2rem;
-            transition: box-shadow 0.3s, transform 0.3s;
-
-            &:hover {
-                box-shadow: 0px 0px 20px -10px var(--dark-grey);
-                transform: scale(1.01);
+        .tabs {
+            display: flex;
+            font-size: 1.4rem;
+            border-bottom: 2px solid var(--border-grey);
+
+            .tab {
+                padding: 0.7rem 2rem;
+                margin-bottom: -2px;
+                cursor: pointer;
+
+                &.active {
+                    margin-bottom: -4px;
+                    color: var(--highlight);
+                    border-bottom: 4px solid var(--highlight);
+                }
             }
         }
 
-        h4 {
-            font-size: 2rem;
-            font-weight: 400;
+        .tab-content {
             color: var(--dark-grey);
-            filter: brightness(80%);
+            font-size: 1.2rem;
+            line-height: 1.5;
+            padding: 0.8rem 0 0;
+            height: 7rem;
+            border-top: none;
+            margin-bottom: 2rem;
+
+            p {
+                margin-bottom: 1.5rem;
+            }
         }
 
-        h2 {
-            font-size: 4rem;
-            font-weight: 500;
+        .no-of-years-label {
+            font-size: 1.7rem;
             color: var(--dark-grey);
-            filter: brightness(80%);
-            text-align: center;
-            margin: 4rem 0;
+            filter: brightness(70%);
+            margin-bottom: 1rem;
+        }
 
-            span {
-                font-size: 1.4rem;
-                display: block;
-                font-weight: 300;
+        .select-holder {
+            margin-bottom: 3rem;
+
+            select {
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                text-indent: 1px;
+                text-overflow: "";
+                padding: 0.7rem 1rem;
+                width: 5rem;
+                border: 1px solid var(--border-grey);
             }
-        }
 
-        button {
-            margin-top: 4rem;
+            img {
+                position: relative;
+                transform: translateX(-2rem);
+                pointer-events: none;
+            }
         }
-    }
 
-    .confirmation-box {
-        h6 {
-            font-size: 2rem;
-            color: var(--dark-grey);
-            filter: brightness(80%);
-            font-weight: 500;
-            margin: 4rem 0 2rem;
+        .total-price-container {
+            padding: 0.5rem;
+            font-weight: bold;
+            font-size: 3.5rem;
+            border-top: 1px solid var(--border-grey);
         }
-        
-        .description {
-            width: 40%;
-            margin: 0 auto 2rem;
-            font-size: 1.6rem;
-            color: var(--dark-grey);
-            opacity: 0.9;
-            letter-spacing: 0.5px;
-            line-height: 1.4;
-            font-weight: 300;
-            text-align: center;
+
+        .form-action-buttons {
+            margin-bottom: 0;
         }
     }
 }

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

@@ -14,8 +14,8 @@ interface Plan {
 export class RegisterBusinessComponent implements OnInit {
     formState: 'CHECK_NAME' | 'INIT_REGISTER' | 
     'REGISTER_FORM' | 'SELECT_PLAN' | 
-    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'RECEIPT';
-    nameToCheck: string = 'JK Enterprises ACRA Ltd';
+    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME';
+    nameToCheck: string = 'JK Enterprises ACRA';
     isAppealing: boolean = false;
     agreeToReserve: boolean = false;
     error?: {
@@ -24,25 +24,10 @@ export class RegisterBusinessComponent implements OnInit {
         isInvalid: boolean,
     }
 
-    plans: Array<Plan> = [{
-        name: 'Basic',
-        amount: 15,
-        range: 'One Year'
-    }, {
-        name: 'Popular',
-        amount: 45,
-        range: 'Three Years'
-    }, {
-        name: 'Premium',
-        amount: 75,
-        range: 'Five Years'
-    }];
-
-    selectedPlan: {
-        name: string,
-        amount: number,
-        range: string,
-    } | undefined;
+    selectedPaymentTab: 'overview'|'details' = 'overview';
+    noOfYears: number = 3;
+    perYearPrice: number = 15.0;
+    years: Array<number> = (new Array(15)).fill(1).map((value, index) => index + 1);
 
     paymentChild: Window | null = null;
     childCheck: number | undefined;
@@ -81,7 +66,7 @@ export class RegisterBusinessComponent implements OnInit {
         type: 'select',
         options: ['OFFICE 1', 'OFFICE 2']
     }, {
-        name: 'Drop the Suffice "Limited" or "Berhad" from ' + this.nameToCheck,
+        name: 'Drop the Suffix "Limited" or "Berhad"?',
         type: 'select',
         options: ['YES', 'NO']
     }];
@@ -169,8 +154,7 @@ export class RegisterBusinessComponent implements OnInit {
         this.formState = 'REGISTER_FORM'
     }
 
-    selectPlan(plan: Plan) {
-        this.selectedPlan = plan;
+    payForReservation() {
         this.paymentChild = window.open('/mock', '_blank', 'toolbar=0,status=0,width=626,height=436');
 
         this.childCheck = window.setInterval(() => {
@@ -185,13 +169,7 @@ export class RegisterBusinessComponent implements OnInit {
     checkName() {
         this.formState = 'INIT_REGISTER';
 
-        if (!this.nameToCheck.endsWith('Ltd')) {
-            this.error = {
-                message: 'The name should end with the Ltd suffix',
-                isUnique: false,
-                isInvalid: true,
-            };
-        } else if (this.nameToCheck === 'JK Enterprises Ltd') {
+        if (this.nameToCheck === 'JK Enterprises') {
             this.error = {
                 message: this.nameToCheck + ' is unavailable',
                 isUnique: false,