diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2dfe427..de146a3 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,12 +1,14 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; +import { MockComponent } from './mock/mock.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; import { TabsComponent } from './tabs/tabs.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login' }, { component: LoginComponent, path: 'login' }, + { component: MockComponent, path: 'mock' }, { component: TabsComponent, path: 'tabs', children : [ { path: '', pathMatch: 'full', redirectTo: 'register-business' diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f007d2b..0bb3409 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,13 +7,15 @@ import { LoginComponent } from './login/login.component'; import { TabsComponent } from './tabs/tabs.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; import { FormsModule } from '@angular/forms'; +import { MockComponent } from './mock/mock.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, TabsComponent, - RegisterBusinessComponent + RegisterBusinessComponent, + MockComponent ], imports: [ BrowserModule, diff --git a/src/app/mock/mock.component.html b/src/app/mock/mock.component.html new file mode 100644 index 0000000..d8e60a4 --- /dev/null +++ b/src/app/mock/mock.component.html @@ -0,0 +1 @@ +

Mocking external window

diff --git a/src/app/mock/mock.component.scss b/src/app/mock/mock.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/mock/mock.component.spec.ts b/src/app/mock/mock.component.spec.ts new file mode 100644 index 0000000..2df8705 --- /dev/null +++ b/src/app/mock/mock.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MockComponent } from './mock.component'; + +describe('MockComponent', () => { + let component: MockComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MockComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MockComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/mock/mock.component.ts b/src/app/mock/mock.component.ts new file mode 100644 index 0000000..cf95e39 --- /dev/null +++ b/src/app/mock/mock.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-mock', + templateUrl: './mock.component.html', + styleUrls: ['./mock.component.scss'] +}) +export class MockComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 9158042..8dccbc0 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -12,33 +12,33 @@

- 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? + This is the full name for a business entity that I wish to reserve, including any required prefixes and suffixes. I understand that this has to be nationally unique, and am not violating any copyrights or trademarks.

-
-
Sorry!
-
Yay!
+
+
Sorry!
+
Yay!

{{ error.message }}

-
{{ nameToCheck }}

- - 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! + + 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.

-
@@ -81,30 +81,32 @@
- -
- Your business name application for
{{ nameToCheck }} is successfully approved! -
-
    -
  • -

    {{ plan.name }}

    -

    ₹ {{ plan.amount }}/- (govt fees + taxes extra)

    -

    {{ plan.range }}

    - -
    • -
- +
+ Your business name application for
{{ nameToCheck }} is successfully approved! +
+
    +
  • +

    {{ plan.name }}

    +

    S$ {{ plan.amount }}/- (govt fees + taxes extra)

    +

    {{ plan.range }}

    + +
    • +
+ +
+ +
+
+
Successfully made payment

- 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! + {{ isAppealing ? + 'Please stand by while the Authority Officer contacts you with the results of your appeal' : + 'Congratulations! Your name has been reserved for ' + selectedPlan.range + ' time. Please proceed with further setup of your business entity' }}

- -
- -
\ No newline at end of file diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index c9f671c..31a7555 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -155,6 +155,10 @@ header { height: 5rem; vertical-align: middle; + &.disabled { + cursor: not-allowed; + opacity: 0.5; + } &:first-child { background-color: var(--border-grey); @@ -240,6 +244,7 @@ header { align-items: flex-start; justify-content: center; list-style: none; + margin-bottom: 30px; li { border: 1px solid var(--border-grey); diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index b3c2661..456feeb 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -1,23 +1,28 @@ import { Component, OnInit } from '@angular/core'; +interface Plan { + name: string, + amount: number, + range: string, +} + @Component({ selector: 'app-register-business', templateUrl: './register-business.component.html', styleUrls: ['./register-business.component.scss'] }) export class RegisterBusinessComponent implements OnInit { - formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | undefined = 'CHECK_NAME'; - nameToCheck: string = 'JK Enterprises'; - error: { + formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'SELECT_PLAN'; + nameToCheck: string = 'JK Enterprises ACRA Ltd'; + isAppealing: boolean = false; + agreeToReserve: boolean = false; + error?: { message: string, - isError: boolean, - } | undefined; + isUnique: boolean, + isInvalid: boolean, + } - plans: Array<{ - name: string, - amount: number, - range: string, - }> = [{ + plans: Array = [{ name: 'Basic', amount: 2000, range: 'One Year' @@ -37,6 +42,9 @@ export class RegisterBusinessComponent implements OnInit { range: string, } | undefined; + paymentChild: Window | null = null; + childCheck: number | undefined; + registerForm: Array<{ name: string, type: 'date' | 'select' | 'text' | 'email' | 'number', @@ -72,7 +80,7 @@ export class RegisterBusinessComponent implements OnInit { }, { name: 'Capita Investment', type: 'number', - placeholder: 'Enter here in Rupees' + placeholder: 'Enter here in Singapore Dollar' }]; constructor() { } @@ -80,17 +88,59 @@ export class RegisterBusinessComponent implements OnInit { ngOnInit(): void { } + confirmName() { + if (!this.error?.isUnique) { + this.isAppealing = true; + } + this.formState = 'CONFIRM_INIT'; + } + + goBackToFormDetails() { + if (typeof this.childCheck !== 'undefined') { + window.clearInterval(this.childCheck); + this.childCheck = undefined; + } + + if (this.paymentChild && !this.paymentChild.closed) { + this.paymentChild?.close() + } + + this.formState = 'REGISTER_FORM' + } + + selectPlan(plan: Plan) { + this.selectedPlan = plan; + this.paymentChild = window.open('/mock', '_blank', 'toolbar=0,status=0,width=626,height=436'); + + this.childCheck = window.setInterval(() => { + if (this.paymentChild && this.paymentChild.closed) { + this.formState = 'COMPLETE_PURCHASE'; + window.clearInterval(this.childCheck); + this.childCheck = undefined; + } + }, 1000); + } + checkName() { - if (this.nameToCheck === 'JK Enterprises') { + 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') { this.error = { - message: 'JK Enterprises is unavailable', - isError: true + message: this.nameToCheck + ' is unavailable', + isUnique: false, + isInvalid: false, }; } else { - this.formState = 'INIT_REGISTER'; this.error = { message: this.nameToCheck + ' is available', - isError: false + isUnique: true, + isInvalid: false }; } }