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

<header class="tab-header">
    <h2>
        Business Name Application
    </h2>
</header>

<div class="search-input-container">
    <ng-container *ngIf="formState === 'CHECK_NAME' || formState === 'INIT_REGISTER'">
        <section class="search-input">
            <input type="text" placeholder="Enter your business name" [(ngModel)]="nameToCheck">
            <button (click)="checkName()" [disabled]="!nameToCheck"> Check </button>
        </section>
        
        <p class="description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam nisi quia fuga nobis magnam accusamus recusandae vitae architecto fugit natus! Nostrum doloremque id laborum sequi magni ducimus perferendis quam aspernatur?
        </p>
    
        <section class="form-message" [ngClass]="{'error' : error.isError}" *ngIf="error">
            <h5 *ngIf="error.isError"> Sorry! </h5>
            <h5 *ngIf="!error.isError"> Yay! </h5>
            <p> {{ error.message }} </p>
        </section>
    
        <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'"
        (click)="formState = 'CONFIRM_INIT'">
            Proceed
        </button>
    </ng-container>

    <section class="confirmation-box" *ngIf="formState === 'CONFIRM_INIT'">
        <h5> {{ nameToCheck }} </h5>
        <p class="description">
            <input type="checkbox">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam!
        </p>

        <div class="form-action-buttons">
            <button (click)="formState = 'INIT_REGISTER'">
                Cancel
            </button>
            <button (click)="formState = 'REGISTER_FORM'">
                Proceed
            </button>
        </div>
    </section>
</div>


<ng-container *ngIf="formState === 'REGISTER_FORM'">
    <section class="form">
        <div class="input-holder" *ngFor="let registerInput of registerForm">
            <label> {{ registerInput.name }}: </label>
    
            <ng-container *ngIf="registerInput.type === 'date'">
                <input type="date">
                <img src="assets/icons/calendar-fill.svg" alt="calendar icon">
            </ng-container>
    
            <ng-container *ngIf="registerInput.type === 'select'">
                <select *ngIf="registerInput.options">
                    <option *ngFor="let option of registerInput.options" value="option"> {{ option }} </option>
                </select>
                
                <img src="assets/icons/chevron-down.svg" alt="calendar icon">
            </ng-container>
    
            <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email' || registerInput.type === 'number'">
                <input [type]="registerInput.type" [placeholder]="registerInput.placeholder">
            </ng-container>
        </div>
    </section>
    
    <div class="form-action-buttons">
        <button (click)="formState = 'CONFIRM_INIT'">
            Back
        </button>
        <button (click)="formState = 'SELECT_PLAN'">
            Proceed
        </button>
    </div>
</ng-container>

<div class="plan-list-container" *ngIf="formState === 'SELECT_PLAN'">
    <ng-container *ngIf="!selectedPlan">
        <h5>
            Your business name application for <br> <strong> {{ nameToCheck }} </strong> is successfully approved!
        </h5>
        <ul class="plan-list">
            <li *ngFor="let plan of plans">
                <h4> {{ plan.name }} </h4>
                <h2> ₹ {{ plan.amount }}/- <span> (govt fees + taxes extra) </span> </h2>
                <h4> {{ plan.range }} </h4>
                <button (click)="selectedPlan = plan"> Pay </button>
            </li>
        </ul>
    </ng-container>

    <section class="confirmation-box" *ngIf="selectedPlan">
        <h6> Successfully made payment </h6>
        <p class="description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam!
        </p>
    
        <div class="form-action-buttons">
            <button class="highlight">
                Next
            </button>
        </div>
    </section>
</div>