Merge pull request #20 from leonardodimarchi/develop

Merging develop into master

src/app/infrastructure/modules/back-button/services/back-button.service.spec.ts

@@ -8,7 +8,8 @@ describe('BackButtonService', () => {
   let service: BackButtonService;
 
   beforeEach(() => {
-    service = new BackButtonService();
+    const zone = jasmine.createSpyObj('NgZone', ['run']);
+    service = new BackButtonService(zone);
     service.initialize();
   });
 

src/app/infrastructure/modules/back-button/services/back-button.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable, NgZone } from "@angular/core";
 import { App } from "@capacitor/app";
 
 interface Action {
@@ -11,20 +11,26 @@ interface Action {
 })
 export class BackButtonService {
 
+  constructor(
+    private readonly ngZone: NgZone,
+  ) {}
+
   private actions: Action[] = [];
 
   initialize(): void {
     App.addListener('backButton', ({canGoBack}) => {
-      if(!canGoBack) {
-        App.exitApp();
-
-      } else if (this.actions.length) {
-        const lastAction = this.actions.pop();
-
-        lastAction?.action();
-      } else {
-        window.history.back();
-      }
+      this.ngZone.run(() => {
+        if(!canGoBack) {
+          App.exitApp();
+
+        } else if (this.actions.length) {
+          const lastAction = this.actions.pop();
+
+          lastAction?.action();
+        } else {
+          window.history.back();
+        }
+      })
     });
   }
 

src/app/presenter/components/header/header.component.scss

@@ -2,6 +2,8 @@
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
+
   width: 100vw;
 
   > img {

src/app/presenter/models/pages/register/register-steps.enum.ts

@@ -16,4 +16,19 @@ export class RegisterStepHelper {
 
     return next[current];
   }
+
+  public static getPrevious(current: RegisterStep): RegisterStep {
+    const previous: Record<RegisterStep, RegisterStep> = {
+      [RegisterStep.BASIC_INFORMATION]: RegisterStep.BASIC_INFORMATION,
+      [RegisterStep.PERSONAL_INFORMATION]: RegisterStep.BASIC_INFORMATION,
+      [RegisterStep.ADDRESS]: RegisterStep.PERSONAL_INFORMATION,
+      [RegisterStep.DONE]: RegisterStep.ADDRESS,
+    }
+
+    return previous[current];
+  }
+
+  public static toList(): RegisterStep[] {
+    return Object.values(RegisterStep);
+  }
 }

src/app/presenter/pages/login/login.component.html

@@ -1,3 +1,4 @@
+<!-- TODO: Close the keyboard when logging in -->
 <div class="page">
   <img src="assets/images/logo.png" />
 

src/app/presenter/pages/register/components/personal-information-form/personal-information-form.component.scss

@@ -5,7 +5,7 @@
   width: 100%;
   min-height: 100%;
 
-  > input, > .input-with-suffix, > textarea {
+  > input, > .input-with-suffix, > textarea, > app-pill-select {
     margin-bottom: 1.5rem;
   }
 

src/app/presenter/pages/register/register.component.html

@@ -1,3 +1,4 @@
+<!-- TODO: Scroll back to the top when closing the keyboard -->
 <div class="page">
   <app-header title="Criar perfil"></app-header>
 
@@ -21,4 +22,11 @@
       ></app-address-information-form>
     </ng-container>
   </form>
+
+  <button
+    *ngIf="!isAtBasicInformation"
+    class="button__tertiary"
+    (click)="returnStep()">
+    Voltar
+  </button>
 </div>

src/app/presenter/pages/register/register.component.scss

@@ -14,6 +14,5 @@
 
   form {
     width: 100%;
-    height: 100%;
   }
 }

src/app/presenter/pages/register/register.component.spec.ts

@@ -7,6 +7,7 @@ import { ValidationError } from '@domain/errors/validation_error';
 import { ToastServiceInterface } from '@infra/modules/toast/contracts/toast-service.interface';
 import { BadRequestError } from '@domain/errors';
 import { RouterServiceInterface } from '@infra/modules/router/contracts/router-service.interface';
+import { BackButtonService } from '@infra/modules/back-button/services/back-button.service';
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
@@ -16,15 +17,17 @@ describe('RegisterComponent', () => {
   let loginUsecase: jasmine.SpyObj<LoginUsecase>;
   let toastService: jasmine.SpyObj<ToastServiceInterface>;
   let routerService: jasmine.SpyObj<RouterServiceInterface>;
+  let backButtonService: jasmine.SpyObj<BackButtonService>;
 
   beforeEach(async () => {
     formBuilder = new FormBuilder();
     registerUsecase = jasmine.createSpyObj('RegisterUsecase', ['call']);
     loginUsecase = jasmine.createSpyObj('LoginUsecase', ['call']);
     toastService = jasmine.createSpyObj('ToastServiceInterface', ['showWarning', 'showError', 'showSuccess']);
     routerService = jasmine.createSpyObj('RouterServiceInterface', ['navigate']);
+    backButtonService = jasmine.createSpyObj('BackButtonService', ['addAction', 'removeAction']);
 
-    component = new RegisterComponent(formBuilder, loginUsecase, registerUsecase, toastService, routerService);
+    component = new RegisterComponent(formBuilder, loginUsecase, registerUsecase, toastService, routerService, backButtonService);
   });
 
   it('should create', () => {
@@ -140,4 +143,22 @@ describe('RegisterComponent', () => {
       });
     });
   });
+
+  describe('returnStep', () => {
+    it('should return to the BASIC_INFORMATION step', () => {
+      component.step = RegisterStep.PERSONAL_INFORMATION;
+
+      component.returnStep();
+
+      expect(component.step).toBe(RegisterStep.BASIC_INFORMATION);
+    });
+
+    it('should return to the PERSONAL_INFORMATION step', () => {
+      component.step = RegisterStep.ADDRESS;
+
+      component.returnStep();
+
+      expect(component.step).toBe(RegisterStep.PERSONAL_INFORMATION);
+    });
+  });
 });

src/app/presenter/pages/register/register.component.ts

@@ -1,10 +1,11 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { BadRequestError } from "@domain/errors";
 import { ValidationError } from "@domain/errors/validation_error";
 import { UserGenderEnum } from "@domain/models/user/user_gender.enum";
 import { LoginUsecase } from "@domain/usecases/user/login_usecase";
 import { RegisterUsecase } from "@domain/usecases/user/register_usecase";
+import { BackButtonService } from "@infra/modules/back-button/services/back-button.service";
 import { RouterServiceInterface } from "@infra/modules/router/contracts/router-service.interface";
 import { ToastServiceInterface } from "@infra/modules/toast/contracts/toast-service.interface";
 import { FormGroupFrom } from "@presenter/models/common/form-group-from";
@@ -20,13 +21,14 @@ import { FormValidators } from "@presenter/validators/form-validators";
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.scss'],
 })
-export class RegisterComponent {
+export class RegisterComponent implements OnDestroy {
   constructor(
     private readonly formBuilder: FormBuilder,
     private readonly loginUsecase: LoginUsecase,
     private readonly registerUsecase: RegisterUsecase,
     private readonly toastService: ToastServiceInterface,
     private readonly routerService: RouterServiceInterface,
+    private readonly backButtonService: BackButtonService,
   ) {
     this.form = this.createForm();
   }
@@ -49,42 +51,34 @@ export class RegisterComponent {
     return this.step === RegisterStep.ADDRESS;
   }
 
+  public ngOnDestroy(): void {
+    RegisterStepHelper.toList().forEach(step => {
+      this.backButtonService.removeAction(`register-return-step-to-${step}`);
+    })
+  }
+
+  public returnStep(): void {
+    const previousStep = RegisterStepHelper.getPrevious(this.step);
+
+    this.backButtonService.removeAction(`register-return-step-to-${previousStep}`);
+
+    this.step = previousStep
+  }
+
   public async nextStep(): Promise<void> {
     if (this.isLoading)
       return;
 
     try {
       this.isLoading = true;
 
-      if (this.step === RegisterStep.ADDRESS) {
-        const {
-          address,
-          basicInformation,
-          personalInformation,
-        } = this.form.getRawValue()
-
-        await this.registerUsecase.call({
-          address: {
-            ...address as AddressForm,
-            houseNumber: +(address as AddressForm).houseNumber,
-          },
-          ...basicInformation as BasicInformationForm,
-          ...personalInformation as PersonalInformationForm,
-          birthDate: new Date((personalInformation as PersonalInformationForm).birthDate),
-        });
-
-        await this.loginUsecase.call({
-          email: (basicInformation as BasicInformationForm).email,
-          password: (basicInformation as BasicInformationForm).password,
-        });
-
-        this.toastService.showSuccess({
-          title: 'Sucesso!',
-          message: 'Sua conta foi cadastrada =)'
-        });
-
-        return await this.routerService.navigate('/login');
-      }
+      if (this.step === RegisterStep.ADDRESS)
+        return await this.register();
+
+      this.backButtonService.addAction({
+        key: `register-return-step-to-${this.step}`,
+        action: this.returnStep.bind(this),
+      });
 
       this.step = RegisterStepHelper.getNext(this.step);
     } catch (error) {
@@ -99,6 +93,36 @@ export class RegisterComponent {
     }
   }
 
+  private async register(): Promise<void> {
+    const {
+      address,
+      basicInformation,
+      personalInformation,
+    } = this.form.getRawValue()
+
+    await this.registerUsecase.call({
+      address: {
+        ...address as AddressForm,
+        houseNumber: +(address as AddressForm).houseNumber,
+      },
+      ...basicInformation as BasicInformationForm,
+      ...personalInformation as PersonalInformationForm,
+      birthDate: new Date((personalInformation as PersonalInformationForm).birthDate),
+    });
+
+    await this.loginUsecase.call({
+      email: (basicInformation as BasicInformationForm).email,
+      password: (basicInformation as BasicInformationForm).password,
+    });
+
+    this.toastService.showSuccess({
+      title: 'Sucesso!',
+      message: 'Sua conta foi cadastrada =)'
+    });
+
+    return await this.routerService.navigate('/login');
+  }
+
   private createForm(): FormGroupFrom<RegisterForm> {
     return this.formBuilder.nonNullable.group({
       basicInformation: this.formBuilder.nonNullable.group({

src/app/presenter/styles/button.scss

@@ -23,4 +23,12 @@
     color: var(--color-pink);
     background: white;
   }
+
+  &__tertiary {
+    @extend .button;
+
+    color: var(--color-gray-dark);
+    background: transparent;
+    box-shadow: none;
+  }
 }