| @@ -21,7 +21,8 @@ | |||||
| <p> {{ error.message }} </p> | <p> {{ error.message }} </p> | ||||
| </section> | </section> | ||||
| <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'"> | |||||
| <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'" | |||||
| (click)="formState = 'CONFIRM_INIT'"> | |||||
| Proceed | Proceed | ||||
| </button> | </button> | ||||
| </ng-container> | </ng-container> | ||||
| @@ -33,13 +34,77 @@ | |||||
| 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! | 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> | </p> | ||||
| <div class="actions"> | |||||
| <button> | |||||
| <div class="form-action-buttons"> | |||||
| <button (click)="formState = 'INIT_REGISTER'"> | |||||
| Cancel | Cancel | ||||
| </button> | </button> | ||||
| <button> | |||||
| <button (click)="formState = 'REGISTER_FORM'"> | |||||
| Proceed | Proceed | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| </section> | </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 (click)="formState = 'REGISTER_FORM'" class="highlight"> | |||||
| Next | |||||
| </button> | |||||
| </div> | |||||
| </section> | |||||
| </div> | </div> | ||||
| @@ -124,7 +124,7 @@ header { | |||||
| color: var(--dark-grey); | color: var(--dark-grey); | ||||
| filter: brightness(80%); | filter: brightness(80%); | ||||
| font-weight: 500; | font-weight: 500; | ||||
| margin: 4rem 0; | |||||
| margin: 4rem 0 2rem; | |||||
| } | } | ||||
| .description { | .description { | ||||
| @@ -132,33 +132,184 @@ header { | |||||
| display: flex; | display: flex; | ||||
| align-items: flex-start; | align-items: flex-start; | ||||
| justify-content: flex-start; | justify-content: flex-start; | ||||
| margin-bottom: 4rem; | |||||
| input { | input { | ||||
| margin: 5px 10px; | margin: 5px 10px; | ||||
| } | } | ||||
| } | } | ||||
| } | |||||
| } | |||||
| .actions { | |||||
| margin-top: 2rem; | |||||
| .form-action-buttons { | |||||
| text-align: center; | |||||
| button { | |||||
| border: none; | |||||
| 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; | |||||
| &:first-child { | |||||
| background-color: var(--border-grey); | |||||
| color: var(--dark-grey); | |||||
| margin-right: 20px; | |||||
| &.highlight { | |||||
| background-color: var(--highlight); | background-color: var(--highlight); | ||||
| padding: 0 4rem; | |||||
| color: white; | color: white; | ||||
| font-size: 1.6rem; | |||||
| letter-spacing: 0.5px; | |||||
| border-radius: 4rem; | |||||
| height: 5rem; | |||||
| vertical-align: middle; | |||||
| &:first-child { | |||||
| background-color: var(--border-grey); | |||||
| color: var(--dark-grey); | |||||
| margin-right: 20px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .form { | |||||
| display: grid; | |||||
| grid-template-columns: 1fr 1fr 1fr; | |||||
| padding: 4rem; | |||||
| .input-holder { | |||||
| width: calc(100% - 2rem); | |||||
| margin: 3.5rem 0; | |||||
| position: relative; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: flex-start; | |||||
| label { | |||||
| font-size: 1.6rem; | |||||
| color: var(--primary); | |||||
| font-weight: 500; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| font-weight: 400; | |||||
| letter-spacing: 0.5px; | |||||
| transform: translate(2.5rem, -3rem); | |||||
| } | |||||
| input, select { | |||||
| display: block; | |||||
| width: 100%; | |||||
| border-radius: 4rem; | |||||
| height: 5.5rem; | |||||
| border: 1px solid var(--border-grey); | |||||
| padding: 0 2rem; | |||||
| font-size: 1.5rem; | |||||
| letter-spacing: 0.5px; | |||||
| color: var(--dark-grey); | |||||
| } | |||||
| select { | |||||
| -webkit-appearance: none; | |||||
| -moz-appearance: none; | |||||
| text-indent: 1px; | |||||
| text-overflow: ''; | |||||
| } | |||||
| img { | |||||
| position: relative; | |||||
| transform: translateX(-4rem); | |||||
| } | |||||
| } | |||||
| } | |||||
| .plan-list-container { | |||||
| text-align: center; | |||||
| 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%; | |||||
| } | |||||
| .plan-list { | |||||
| display: flex; | |||||
| align-items: flex-start; | |||||
| justify-content: center; | |||||
| list-style: none; | |||||
| 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); | |||||
| } | |||||
| } | |||||
| h4 { | |||||
| font-size: 2rem; | |||||
| font-weight: 400; | |||||
| color: var(--dark-grey); | |||||
| filter: brightness(80%); | |||||
| } | |||||
| h2 { | |||||
| font-size: 4rem; | |||||
| font-weight: 500; | |||||
| color: var(--dark-grey); | |||||
| filter: brightness(80%); | |||||
| text-align: center; | |||||
| margin: 4rem 0; | |||||
| span { | |||||
| font-size: 1.4rem; | |||||
| display: block; | |||||
| font-weight: 300; | |||||
| } | |||||
| } | |||||
| 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; | |||||
| } | |||||
| } | |||||
| .confirmation-box { | |||||
| h6 { | |||||
| font-size: 1.8rem; | |||||
| color: var(--dark-grey); | |||||
| filter: brightness(80%); | |||||
| font-weight: 500; | |||||
| margin: 4rem 0 2rem; | |||||
| } | |||||
| .description { | |||||
| width: 40%; | |||||
| margin: 0 auto 2rem; | |||||
| font-size: 1.2rem; | |||||
| color: var(--dark-grey); | |||||
| opacity: 0.6; | |||||
| letter-spacing: 0.5px; | |||||
| line-height: 1.4; | |||||
| font-weight: 300; | |||||
| text-align: center; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| @@ -6,13 +6,75 @@ import { Component, OnInit } from '@angular/core'; | |||||
| styleUrls: ['./register-business.component.scss'] | styleUrls: ['./register-business.component.scss'] | ||||
| }) | }) | ||||
| export class RegisterBusinessComponent implements OnInit { | export class RegisterBusinessComponent implements OnInit { | ||||
| formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | undefined = 'CONFIRM_INIT'; | |||||
| formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | undefined = 'CHECK_NAME'; | |||||
| nameToCheck: string = 'JK Enterprises'; | nameToCheck: string = 'JK Enterprises'; | ||||
| error: { | error: { | ||||
| message: string, | message: string, | ||||
| isError: boolean, | isError: boolean, | ||||
| } | undefined; | } | undefined; | ||||
| plans: Array<{ | |||||
| name: string, | |||||
| amount: number, | |||||
| range: string, | |||||
| }> = [{ | |||||
| name: 'Basic', | |||||
| amount: 2000, | |||||
| range: 'One Year' | |||||
| }, { | |||||
| name: 'Popular', | |||||
| amount: 5000, | |||||
| range: 'Three Years' | |||||
| }, { | |||||
| name: 'Premium', | |||||
| amount: 9000, | |||||
| range: 'Five Years' | |||||
| }]; | |||||
| selectedPlan: { | |||||
| name: string, | |||||
| amount: number, | |||||
| range: string, | |||||
| } | undefined; | |||||
| registerForm: Array<{ | |||||
| name: string, | |||||
| type: 'date' | 'select' | 'text' | 'email' | 'number', | |||||
| placeholder?: string, | |||||
| options?: Array<string> | |||||
| }> = [{ | |||||
| name: 'Date of Incorporation', | |||||
| type: 'date' | |||||
| }, { | |||||
| name: 'Company Status', | |||||
| type: 'select', | |||||
| options: ['Status 1', 'Status 2'] | |||||
| }, { | |||||
| name: 'Company Category', | |||||
| type: 'select', | |||||
| options: ['Category 1', 'Category 2'] | |||||
| }, { | |||||
| name: 'Company Sub-Category', | |||||
| type: 'select', | |||||
| options: ['Sub-Category 1', 'Sub-Category 2'] | |||||
| }, { | |||||
| name: 'Company Class', | |||||
| type: 'select', | |||||
| options: ['Class 1', 'Class 2'] | |||||
| }, { | |||||
| name: 'Registrar Office City', | |||||
| type: 'select', | |||||
| options: ['Class 1', 'Class 2'] | |||||
| }, { | |||||
| name: 'Registered Office', | |||||
| type: 'select', | |||||
| options: ['Office 1', 'Office 2'] | |||||
| }, { | |||||
| name: 'Capita Investment', | |||||
| type: 'number', | |||||
| placeholder: 'Enter here in Rupees' | |||||
| }]; | |||||
| constructor() { } | constructor() { } | ||||
| ngOnInit(): void { | ngOnInit(): void { | ||||