ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/login-form-ec/login-form-ec.component.ts

@@ -0,0 +1,92 @@
+import { Component, EventEmitter, inject, Input, Output, signal } from '@angular/core';
+import { LoadingSectionEcComponent } from '../../widgets-ec';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { AuthService, ToastService } from '../../../ec-services';
+import { UserRoleType } from '../../../interfaces';
+import { firstValueFrom } from 'rxjs';
+import { JsonPipe } from '@angular/common';
+
+@Component({
+	selector: 'app-login-form-ec',
+	standalone: true,
+	imports: [LoadingSectionEcComponent, ReactiveFormsModule, RouterLink, JsonPipe],
+	templateUrl: './login-form-ec.component.html',
+	styleUrl: './login-form-ec.component.scss'
+})
+export class LoginFormEcComponent {
+	private _authService:AuthService = inject(AuthService);
+	private _formBuilder:FormBuilder = inject(FormBuilder);
+	private _toastService:ToastService = inject(ToastService);
+	private _router:Router = inject(Router);
+	/**
+	 * Parametro para indicar si tras loguear
+	 * debe redireccionar o no.
+	 */
+	@Input() redirect:boolean = true;
+	/**
+	 * Parametro para indicar a donde redireccionar.
+	 */
+	@Input() redirectTo:string = '/';
+	@Output() ready = new EventEmitter();
+	/**
+	 * Muestra si esta cargando o no.
+	 */
+	public loading: boolean = false;
+	public loggedIn: boolean = false;
+	/**
+	 * Signal que guarda el formulario de login.
+	 */
+	public loginForm: any = signal<FormGroup>(
+		this._formBuilder.group({
+			username: ['', Validators.required],
+			password: ['', Validators.required]
+		})
+	);
+	/**
+	 * Loguea al usuario en la plataforma.
+	 * @param $event 
+	 * @param withRoles 
+	 * @returns 
+	 */
+	public login($event: Event, withRoles: UserRoleType[] = []){
+		$event.preventDefault();
+		this.loading = true;
+		if(!this.loginForm().valid){
+			this._toastService.show('login-form-incomplete')
+			this.loading = false;
+			return;
+		}
+		firstValueFrom(this._authService.login(this.loginForm().value, withRoles)).then(
+			(res:any) => {
+				console.log(res);
+				if(res == 'ok'){
+					this.ready.emit(this.loginForm().value.username);
+					this.loggedIn = true;
+					this.redirect && this.redirectHome();
+
+				}
+				else {
+					if(res == 'error'){
+						this._toastService.error('invalid-credentials')
+					}
+				}
+				this.loading = false;
+			},
+			(err:any) => {
+				this.loading = false;
+			}
+		)
+	}
+	/**
+	 * Si el servicio de auth tiene configurado a donde volver, se ejecutar ese caso.
+	 * De lo contrario redirige al contenido de la variable `redirectTo`.
+	 */
+	redirectHome(){
+        const resolverFunction = this._authService.getHomeResolver()
+        resolverFunction
+            ? resolverFunction()
+            : this._router.navigateByUrl(this.redirectTo)
+    }
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/register-form-ec/register-form-ec.component.html

@@ -0,0 +1,55 @@
+<div class="w-100 pl-md-5 position-relative" id="register">
+  <div class="py-2">
+      <h5>CREAR CUENTA</h5>
+  </div>
+  <form id="registro" [formGroup]="form" (submit)="register($event)">
+      <div class="form-group">
+          <label for="" class="form-label">NOMBRE</label>
+          <input formControlName="firstName" class="form-control rounded-0" type="text" placeholder="Nombre">
+      </div>
+      <div class="form-group">
+          <label for="" class="form-label">APELLIDO</label>
+          <input formControlName="lastName" class="form-control rounded-0" type="text" placeholder="Apellido">
+      </div>
+      <div class="form-group">
+          <label for="" class="">CORREO ELECTRONICO</label>
+          <input formControlName="email" email required class="form-control rounded-0" type="email"
+              placeholder="Correo electrónico">
+      </div>
+      <div class="form-group">
+          <label for="" class="form-label">CONTRASEÑA</label>
+          <input formControlName="plainPassword" required class="form-control rounded-0" type="password"
+              placeholder="Contraseña">
+      </div>
+      <div class="form-group">
+          <label for="" class="form-label">REPETIR CONTRASEÑA</label>
+          <input formControlName="plainPassword2" required class="form-control rounded-0" type="password"
+              placeholder="Repetir contraseña">
+      </div>
+
+      <div class="custom-control d-flex flex-row form-check custom-checkbox mr-sm-2 mt-4 mb-2">
+          <input type="checkbox" formControlName="terms" required class="custom-control-input form-check-input" name="Color2"
+              id="Color2">
+          <label class="custom-control-label ff-ubuntu-light font-sm form-check-label" for="Color2"> He
+              leído y acepto las políticas de privacidad y los términos y
+              condiciones</label>
+      </div>
+
+      <div class="custom-control d-flex flex-row form-check custom-checkbox mr-sm-2 mb-4">
+          <input type="checkbox" formControlName="newsletter" class="custom-control-input form-check-input" name="Color3" id="Color3">
+          <label class="custom-control-label form-check-label ff-ubuntu-light font-sm" for="Color3">
+              Suscripción al Newsletter</label>
+      </div>
+
+      <div class="row">
+          <div class="col-12">
+              <button [disabled]="form.invalid" type="submit"
+                  class="btn btn-primary px-5 py-2 h-fit">CREAR</button>
+          </div>
+      </div>
+  </form>
+  @if(loading){
+    <app-loading-section-ec />
+  }
+  
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/register-form-ec/register-form-ec.component.ts

@@ -0,0 +1,102 @@
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { AnalyticsService, AuthService, ToastService } from '../../../ec-services';
+import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { LoadingSectionEcComponent } from "../../widgets-ec/loading";
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+	selector: 'app-register-form-ec',
+	standalone: true,
+	imports: [ReactiveFormsModule, LoadingSectionEcComponent],
+	templateUrl: './register-form-ec.component.html',
+	styleUrls: ['./register-form-ec.component.scss']
+})
+export class RegisterFormEcComponent {
+	private _authService: AuthService = inject(AuthService);
+	private _toastService: ToastService = inject(ToastService);
+	private _router: Router = inject(Router);
+	private _analyticsService: AnalyticsService = inject(AnalyticsService);
+	private _formBuilder: FormBuilder = inject(FormBuilder);
+	 /**
+     * Indica si debe redireccionar o se queda en la misma pantalla
+     */
+	@Input() redirect:boolean = true;
+	/**
+     * Para que se puede capturar el estado de la petición de registro.
+     */
+	@Output() ready = new EventEmitter();
+	/**
+	 * Contiene el formulario de registro.
+	 */
+	public form: FormGroup;
+	/**
+	 * Para indicar que se esta procesando la solicitud de registro.
+	 */
+	public loading: boolean = false;
+	/**
+	 * Para indicar el exito de la solicitud de registro.
+	 */
+	public success: boolean = false;
+
+	constructor() {
+		this.form = this._formBuilder.group({
+			firstName: ['', Validators.required],
+			lastName: ['', Validators.required],
+			email: ['', [Validators.required, Validators.email]],
+			plainPassword: ['', Validators.required],
+			plainPassword2: ['', Validators.required],
+			newsletter: [false],
+			terms: ['', Validators.required],
+		});
+	}
+	/**
+	 * Registra un usuario.
+	 * @param event 
+	 * @returns 
+	 */
+	register(event: Event){
+		event.preventDefault();
+		this.loading = true;
+		if (!this.form.valid) {
+            this._toastService.show('fields-incomplete');
+            this.loading = false
+            return;
+        };
+		if (this.form.value.plainPassword != this.form.value.plainPassword2) {
+            this._toastService.show('mismatched-password');
+            this.loading = false
+            return;
+        }
+		if(this.form.valid){
+			firstValueFrom(this._authService.singUp(this.form.value)).then(
+				res => {
+					this.loading = false
+					this._toastService.success('register-ok')
+					this._analyticsService.callEvent('sign_up', {
+						firstName: this.form.value.firstName,
+						lastName: this.form.value.lastName,
+						email: this.form.value.email
+					})
+					this.success = true
+					this.ready.emit(true)
+					if(this.redirect){
+						this._router.navigateByUrl('home')
+					}
+				},
+				err => {
+					this.loading = false
+					if(err.status == 400){
+						this._toastService.show('email-already-registered')
+					} else {
+						this._toastService.error('email-register-error')
+					}
+				}
+			)
+		} else {
+			this._toastService.show('invalid-form')
+			this.loading = false
+		}
+	}
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/register-wholesaler-form-ec/register-wholesaler-form-ec.component.html

@@ -0,0 +1,233 @@
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <div class="">
+                <div class="pt-5 pb-3 border-bottom">
+                    <h3 class="my-auto mx-2 text-left w-fit bold text-beige1 white-space-md-nowrap">CREAR CUENTA
+                        MAYORISTA</h3>
+                </div>
+                <div class=" py-3">
+                    <p>Si todavia no tienes una cuenta de grandes consumidores en nuestra plataforma, registrate
+                        ingresando estos
+                        datos:</p>
+                </div>
+                <form [formGroup]="form" (submit)="register($event)" class="position-relative">
+                    <div class="row w-100 mx-auto d-flex justify-content-center px-0 py-3">
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Nombre</label>
+                                <input type="text" id="" placeholder="Nombre" required name="firstName"
+                                    formControlName="firstName"
+                                    [class]="form.controls['firstName'].touched ? (form.controls['firstName'].valid && form.controls['firstName'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">El nombre es un campo obligatorio.</span>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">Apellidos</label>
+                                <input type="text" id="" placeholder="Apellido" required name="lastName"
+                                    formControlName="lastName"
+                                    [class]="form.controls['lastName'].touched ? (form.controls['lastName'].valid && form.controls['lastName'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">El apellido es un campo obligatorio.</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Email</label>
+                                <input type="email" id="" placeholder="Email" email required name="email"
+                                    formControlName="email"
+                                    [class]="form.controls['email'].touched ? (form.controls['email'].valid && form.controls['email'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">El email no posee un formato correcto.</span>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">Contraseña</label>
+                                <input type="password" id="" placeholder="Contraseña" required name="plainPassword"
+                                    formControlName="plainPassword"
+                                    [class]="form.controls['plainPassword'].touched ? (form.controls['plainPassword'].valid && form.controls['plainPassword'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">La contraseña es un campo obligatorio.</span>
+                            </div>
+                        </div>
+                        @if(documentTypes$ | async; as documentTypes){
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'document-type'|translate}}</label>
+                                <select name="documentType" formControlName="documentType" required
+                                    [class]="form.controls['documentType'].touched ? (form.controls['documentType'].valid && form.controls['documentType'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                    <option [value]="null" id="selectDocumentType" disabled>Seleccione un tipo</option>
+                                    @for (type of documentTypes; track $index) {
+                                    <option [value]="type.code">{{ type.name }}</option>
+                                    }
+                                </select>
+                                <span class="invalid-feedback">{{'document-type-help'|translate}}</span>
+                            </div>
+                        </div>
+                        }
+
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'document-number'|translate}}</label>
+                                <input type="text" id="" placeholder="{{'document-number'|translate}}" required
+                                    name="documentNumber" formControlName="documentNumber"
+                                    [class]="form.controls['documentNumber'].touched ? (form.controls['documentNumber'].valid && form.controls['documentNumber'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">{{'document-type-help'|translate}}</span>
+                            </div>
+                        </div>
+
+                        @if(countries$ | async; as countries ){
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'country'|translate}}</label>
+                                <select name="countryCode" formControlName="countryCode" required (change)="onCountrySelected($event)"
+                                    [class]="form.controls['countryCode'].touched ? (form.controls['countryCode'].valid && form.controls['countryCode'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                    <option [value]="null" id="selectOpPais" disabled>Seleccione un pais</option>
+                                    @for (country of countries; track $index) {
+                                    <option [value]="country.code"> {{ country.name }}</option>
+                                    }
+                                </select>
+                                <span class="invalid-feedback">{{'country-help'|translate}}</span>
+                            </div>
+                        </div>
+                        }
+                        @if(provinces$ |async ; as provinces){
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'state'|translate}}</label>
+                                <select name="provinceCode" formControlName="provinceCode" required (change)="onProvincesSelected($event, provinces)"
+                                    [class]="form.controls['provinceCode'].touched ? (form.controls['provinceCode'].valid && form.controls['provinceCode'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                    <option [value]="null" id="selectOpProvincia" disabled>Seleccione una provincia
+                                    </option>
+                                    @for (province of provinces; track $index) {
+                                    <option [value]="province.code">{{ province.name }}</option>
+                                    }
+                                </select>
+                                <span class="invalid-feedback">{{'state-help'|translate}}</span>
+                            </div>
+                        </div>
+                        }
+
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'address'|translate}}</label>
+                                <input placeholder="{{'address'|translate}}" required type="text" name="street"
+                                    formControlName="street"
+                                    [class]="form.controls['street'].touched ? (form.controls['street'].valid && form.controls['street'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">{{'address-help1'|translate}}</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'town-city'|translate}}</label>
+                                <input placeholder="{{'town-city'|translate}}" required type="text" name="city"
+                                    formControlName="city"
+                                    [class]="form.controls['city'].touched ? (form.controls['city'].valid && form.controls['city'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">{{'town-city-help'|translate}}</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pl-md-1">
+                            <div class="form-group">
+                                <label for="">{{'postal-code'|translate}}</label>
+                                <input placeholder="{{'postal-code'|translate}}" required type="text" name="postcode"
+                                    formControlName="postcode"
+                                    [class]="form.controls['postcode'].touched ? (form.controls['postcode'].valid && form.controls['postcode'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">{{'postal-code-help'|translate}}</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Nombre compañía</label>
+                                <input type="text" id="" placeholder="Nombre compañía" required name="companyName"
+                                    formControlName="companyName"
+                                    [class]="form.controls['companyName'].touched ? (form.controls['companyName'].valid && form.controls['companyName'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">El nombre compañía es un campo obligatorio.</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">{{'phone'|translate}}</label>
+                                <input type="text" id="" placeholder="{{'phone'|translate}}" required name="phoneNumber"
+                                    formControlName="phoneNumber"
+                                    [class]="form.controls['phoneNumber'].touched ? (form.controls['phoneNumber'].valid && form.controls['phoneNumber'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">El numero de telefono es un campo obligatorio.</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Sexo</label>
+                                <select required name="gender" formControlName="gender"
+                                    [class]="form.controls['gender'].touched ? (form.controls['gender'].valid && form.controls['gender'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                    <option value="null" id="selectOpSexo">Sexo</option>
+                                    <option value="u">Desconocido</option>
+                                    <option value="s">Femenino</option>
+                                    <option value="m">Masculino</option>
+                                </select>
+                                <span class="invalid-feedback">El sexo es un campo obligatorio.</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Fecha creacion</label>
+                                <input type="date" id="" placeholder="Fecha creacion" required name="birthday"
+                                    formControlName="birthday"
+                                    [class]="form.controls['birthday'].touched ? (form.controls['birthday'].valid && form.controls['birthday'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">La fecha de creacion es un campo obligatorio.</span>
+                            </div>
+                        </div>
+
+                        <div class="col-12 col-md-6 px-0 pr-md-1">
+                            <div class="form-group">
+                                <label for="">Identificacion</label>
+                                <input type="text" id="" placeholder="Identificacion" required name="taxIdentification"
+                                    formControlName="taxIdentification"
+                                    [class]="form.controls['taxIdentification'].touched ? (form.controls['taxIdentification'].valid && form.controls['taxIdentification'].touched) ?  'form-control rounded-0 is-valid' :  'form-control rounded-0 is-invalid' : 'form-control rounded-0'">
+                                <span class="invalid-feedback">La identificacion de la compañía es un campo
+                                    obligatorio.</span>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-6 px-0 py-4 pl-md-1 ">
+                            <div class="form-check py-2">
+                                <input class="form-check-input" type="checkbox" value="" id="terms" name="terms"
+                                    formControlName="terms" type="checkbox">
+                                <label for="terms" class="form-check-label">Acepto los <a
+                                        [routerLink]="['/section/terminos-y-condiciones']"
+                                        routerLinkActive="router-link-active" class="text-primary">términos y
+                                        condiciones *</a></label>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-6 px-0 py-4 pl-md-1">
+                            <div class="form-check py-2">
+                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"
+                                    name="subscribedToNewsletter" formControlName="subscribedToNewsletter"
+                                    type="checkbox">
+                                <label class="form-check-label" for="defaultCheck2">
+                                    Suscripción al newsletter
+                                </label>
+                            </div>
+                        </div>
+
+                        <div
+                            class="col-12 col-md-6 px-0 py-4 pr-md-1 d-flex justify-content-md-start order-2 order-md-1">
+
+                            <button type="submit" role="button" [disabled]="form.invalid"
+                                class="btn btn-primary rounded-0 px-5 py-2 w-100 w-md-auto h-fit">REGISTRATE</button>
+                        </div>
+
+                    </div>
+                    <pre>{{form.value | json}}</pre>
+                    @if(loading){
+                    <app-loading-section-ec />
+                    }
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/register-wholesaler-form-ec/register-wholesaler-form-ec.component.ts

@@ -0,0 +1,149 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { LoadingSectionEcComponent } from "../../widgets-ec/loading";
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AuthService, FormService, ToastService } from '../../../ec-services';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+    selector: 'app-register-wholesaler-form-ec',
+    standalone: true,
+    imports: [LoadingSectionEcComponent, ReactiveFormsModule, TranslateModule, AsyncPipe, JsonPipe, RouterLink],
+    templateUrl: './register-wholesaler-form-ec.component.html',
+    styleUrl: './register-wholesaler-form-ec.component.scss'
+})
+export class RegisterWholesalerFormEcComponent {
+    private _formBuilder: FormBuilder = inject(FormBuilder)
+    private _formService: FormService = inject(FormService)
+    private _toastService: ToastService = inject(ToastService)
+    private _authService: AuthService = inject(AuthService)
+    private _router: Router = inject(Router)
+    /**
+     * Indica si debe redireccionar o se queda en la misma pantalla
+     */
+    @Input() redirect: boolean = true;
+    /**
+     * Para que se puede capturar el estado de la petición de registro.
+     */
+    @Output() ready = new EventEmitter();
+    /**
+     * Contiene los paises y sus datos
+     */
+    public countries$ = this._formService.getCountriesData();
+    /**
+     * Contiene las provincias
+     */
+    public provinces$ = this._formService.provinces$;
+    /**
+     * Contiene los tipos de documentos.
+     */
+    public documentTypes$ = this._formService.documentTypes$;
+    /**
+     * Contiene el formulario de registro.
+     */
+    public form: FormGroup;
+    /**
+     * Para indicar cuando se esta procesando el registro.
+     */
+    public loading: boolean = false;
+    /**
+     * Para indicar cuando se proceso con exito el registro.
+     */
+    public success: boolean = false;
+
+    constructor() {
+        this.form = this._formBuilder.group({
+            firstName: ['', [Validators.required]],
+            lastName: ['', [Validators.required]],
+            documentType: [null, [Validators.required]],
+            documentNumber: ['', [Validators.required]],
+            email: ['', [Validators.required, Validators.email]],
+            plainPassword: [''],
+            plainPassword2: ['', []],
+            countryCode: [null, Validators.required],
+            street: [null, [Validators.maxLength(50)]],
+            city: ['', Validators.required],
+            postcode: ['', Validators.required],
+            provinceName: ['', Validators.required],
+            provinceCode: [null, Validators.required],
+            companyName: ['', [Validators.required]],
+            phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
+            gender: [null, []],
+            birthday: [null, [Validators.maxLength(11)]],
+            taxIdentification: ['', Validators.required],
+            comments: ['', []],
+            contactFirstName: ['', []],
+            contactLastName: ['', []],
+            contactCompanyPosition: ['', []],
+            contactEmail: ['', []],
+            contactDocumentType: ['', []],
+            contactDocumentNumber: ['', []],
+            subscribedToNewsletter: [false],
+            terms: [true, Validators.required],
+        });
+    }
+    /**
+     * Registra un usuario.
+     * @param event 
+     * @returns 
+     */
+    register(event: Event) {
+        event.preventDefault()
+        this.loading = true;
+        if (!this.form.valid) {
+            this._toastService.show('fields-incomplete');
+            this.loading = false
+            return;
+        };
+        if (this.form.valid) {
+            firstValueFrom(this._authService.signUpWholesaler(this.form.value)).then(
+                (res: any) => {
+                    this.loading = false;
+                    this._toastService.show('register-ok');
+                    this.success = true;
+                    this.ready.emit(true);
+                    if (this.redirect) {
+                        this._router.navigateByUrl('home')
+                    }
+                },
+                (error: any) => {
+                    this.loading = false;
+                    if (error.status == 400) {
+                        this._toastService.show('email-already-registered');
+                    } else {
+                        this._toastService.show('email-register-error');
+                    }
+                }
+            )
+        } else {
+            this._toastService.show('invalid-form');
+            this.loading = false;
+        }
+    }
+    /**
+     * Captura el evento de cuando cambia un pais en el `<select>`
+     * @param event 
+     */
+    onCountrySelected = (event: any) => {
+        const { value } = event.target;
+        //$('#selectOpPais').attr('disabled', true);
+        this.form.controls['countryCode'].setValue(value);
+        this.form.controls['provinceCode'].setValue('null');
+        //value != '' && this.provincesSubject.next(this.countriesSubject.value.find(country => country.code == value).provinces);
+        if (value != '' || value != 'null') {
+            this._formService.onCountrySelected(value);
+        }
+    }
+    /**
+     * Captura el evento de cuando cambia una provincia/estado en el `<select>`
+     * @param event 
+     * @param provinces lista de provincias para obtener el nombre de la seleccionada.
+     */
+    onProvincesSelected = (event: any, provinces: any) => {
+        const { value } = event.target;
+        this.form.controls['provinceName'].setValue(provinces.find((province: any) => province.code == value).name);
+    }
+
+}