Merge pull request #42 from teamq-ec/DM2-2770-pagina-de-pagos

Dm2 2770 pagina de pagos
teamq-ec · Jul 31, 2024 · 1f981e7 · 1f981e7
2 parents 3edf6f9 + 55c6292
commit 1f981e7
Show file tree

Hide file tree

Showing 37 changed files with 736 additions and 202 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -19,6 +19,7 @@ import { ApplianceRegistrationModule } from './pages/appliance-registration/appl
 import { AlertConfirmationModule } from './pages/components/alert-confirmation/alert-confirmation.module';
 import { ProductModule } from './pages/product/product.module';
 import { ModalProductModule } from './pages/components/modal-product/modal-product.module';
+import { PaymentModule } from './pages/payment/payment.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -33,6 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     HomeModule,
     DashboardModule,
     ProductModule,
+    PaymentModule,
     ReactiveFormsModule,
     HttpClientModule,
     TranslateModule.forRoot({

diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
@@ -1,7 +1,8 @@
 <div class="relative min-h-screen flex items-center justify-center bg-gray-50">
   <img [src]="kitchenImage" alt="Fondo" class="absolute inset-0 w-full h-full object-cover z-0">
   <div class="absolute inset-0 bg-gray-900/50 z-0"></div>
-  <div class="relative z-10 w-full max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-4 pt-12 pb-24 sm:px-6 sm:pt-16 sm:pb-32 lg:px-8">
+  <div
+    class="relative z-10 w-full max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-4 pt-12 pb-24 sm:px-6 sm:pt-16 sm:pb-32 lg:px-8">
     <div class="relative hidden lg:block">
       <img [src]="kitchenImageTwo" alt="Lado" class="w-full h-full object-cover rounded-lg shadow-lg">
     </div>
@@ -34,7 +35,8 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 [class.border-red-500]="isFieldInvalid('email')"
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
-            <div *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
+            <div
+              *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
               <div *ngIf="loginForm.get('email')?.errors?.['required']" class="text-red-500 text-sm">
                 {{ 'login.requiredFieldError' | translate }}
               </div>
@@ -49,15 +51,17 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
               {{ 'login.passwordLabel' | translate }} <span class="text-red-500">*</span>
             </label>
             <div class="mt-2 relative">
-              <input [type]="showPassword ? 'text' : 'password'" id="password" name="password" formControlName="password"
+              <input [type]="showPassword ? 'text' : 'password'" id="password" name="password"
+                formControlName="password"
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pr-10"
                 placeholder="Ingrese su contraseña">
               <button type="button" (click)="togglePasswordVisibility()"
                 class="absolute inset-y-0 right-0 pr-3 flex items-center text-purple-600">
                 <i class="fas" [ngClass]="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
               </button>
             </div>
-            <div *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)">
+            <div
+              *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)">
               <div *ngIf="loginForm.get('password')?.errors?.['required']" class="text-red-500 text-sm">
                 {{ 'login.requiredFieldError' | translate }}
               </div>
@@ -77,12 +81,12 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
 
         <p class="mt-10 text-center text-sm text-gray-500">
           {{ 'login.registerPrompt' | translate }}
-          <a routerLink="/auth/register"
-            class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
+          <a routerLink="/auth/register" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
             {{ 'login.registerLink' | translate }}
           </a>
         </p>
       </div>
     </div>
   </div>
 </div>
+
diff --git a/src/app/components/auth/login/login.component.ts b/src/app/components/auth/login/login.component.ts
@@ -78,7 +78,7 @@ export class LoginComponent {
     this.router.navigate([RoutesConstants.register]);
   }
 
-  gotoIndex() {
+  gotoIndex(): void {
     this.router.navigate([RoutesConstants.home]);
   }
 

diff --git a/src/app/components/auth/register/register.component.html b/src/app/components/auth/register/register.component.html
@@ -36,10 +36,14 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   autocomplete="first_name" required [class.border-red-500]="isFieldInvalid('first_name')"
                   class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               </div>
-              <div *ngIf="form.get('first_name')?.invalid && (form.get('first_name')?.dirty || form.get('first_name')?.touched)">
-                <div *ngIf="form.get('first_name')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.first_name_required' | translate }}</div>
-                <div *ngIf="form.get('first_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{ 'register.first_name_minlength' | translate }}</div>
-                <div *ngIf="form.get('first_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{ 'register.first_name_maxlength' | translate }}</div>
+              <div
+                *ngIf="form.get('first_name')?.invalid && (form.get('first_name')?.dirty || form.get('first_name')?.touched)">
+                <div *ngIf="form.get('first_name')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.first_name_required' | translate }}</div>
+                <div *ngIf="form.get('first_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{
+                  'register.first_name_minlength' | translate }}</div>
+                <div *ngIf="form.get('first_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{
+                  'register.first_name_maxlength' | translate }}</div>
               </div>
             </div>
             <div>
@@ -51,10 +55,14 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   required [class.border-red-500]="isFieldInvalid('last_name')"
                   class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               </div>
-              <div *ngIf="form.get('last_name')?.invalid && (form.get('last_name')?.dirty || form.get('last_name')?.touched)">
-                <div *ngIf="form.get('last_name')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.last_name_required' | translate }}</div>
-                <div *ngIf="form.get('last_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{ 'register.last_name_minlength' | translate }}</div>
-                <div *ngIf="form.get('last_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{ 'register.last_name_maxlength' | translate }}</div>
+              <div
+                *ngIf="form.get('last_name')?.invalid && (form.get('last_name')?.dirty || form.get('last_name')?.touched)">
+                <div *ngIf="form.get('last_name')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.last_name_required' | translate }}</div>
+                <div *ngIf="form.get('last_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{
+                  'register.last_name_minlength' | translate }}</div>
+                <div *ngIf="form.get('last_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{
+                  'register.last_name_maxlength' | translate }}</div>
               </div>
             </div>
           </div>
@@ -69,8 +77,10 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
             <div *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched)">
-              <div *ngIf="form.get('email')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.email_required' | translate }}</div>
-              <div *ngIf="form.get('email')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'register.email_pattern' | translate }}</div>
+              <div *ngIf="form.get('email')?.errors?.['required']" class="text-red-500 text-sm">{{
+                'register.email_required' | translate }}</div>
+              <div *ngIf="form.get('email')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                'register.email_pattern' | translate }}</div>
             </div>
           </div>
 
@@ -89,9 +99,12 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   <i class="fas" [ngClass]="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                 </button>
               </div>
-              <div *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)">
-                <div *ngIf="form.get('password')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.password_required' | translate }}</div>
-                <div *ngIf="form.get('password')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'register.password_pattern' | translate }}</div>
+              <div
+                *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)">
+                <div *ngIf="form.get('password')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.password_required' | translate }}</div>
+                <div *ngIf="form.get('password')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                  'register.password_pattern' | translate }}</div>
               </div>
             </div>
           </div>
@@ -105,8 +118,10 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 placeholder="(123) 456-7890" pattern="[0-9]*">
               <div
                 *ngIf="form.get('phone_number')?.invalid && (form.get('phone_number')?.dirty || form.get('phone_number')?.touched)">
-                <div *ngIf="form.get('phone_number')?.errors?.['required']" class="text-red-500 text-sm">{{ 'formProduct.STATE_REQUIRED' | translate }}</div>
-                <div *ngIf="form.get('phone_number')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'formProduct.PHONE_NUMBER_PATTERN_ERROR' | translate }}</div>
+                <div *ngIf="form.get('phone_number')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'formProduct.STATE_REQUIRED' | translate }}</div>
+                <div *ngIf="form.get('phone_number')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                  'formProduct.PHONE_NUMBER_PATTERN_ERROR' | translate }}</div>
               </div>
             </div>
           </div>
@@ -121,7 +136,8 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
             <div *ngIf="form.get('address')?.invalid && (form.get('address')?.dirty || form.get('address')?.touched)">
-              <div *ngIf="form.get('address')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.address_required' | translate }}</div>
+              <div *ngIf="form.get('address')?.errors?.['required']" class="text-red-500 text-sm">{{
+                'register.address_required' | translate }}</div>
             </div>
           </div>
 
@@ -144,3 +160,4 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
 <div *ngIf="showAlertForm" class="fixed inset-0 flex items-center justify-center z-50">
   <app-alert-form (alertClosed)="onAlertClosed()"></app-alert-form>
 </div>
+
diff --git a/src/app/components/auth/register/register.component.ts b/src/app/components/auth/register/register.component.ts
@@ -9,7 +9,7 @@ import { RoutesConstants } from 'src/app/constants/routes.constants';
 import { UrlsConstants } from 'src/app/constants/urls.constants';
 import { DataTransferServiceService } from 'src/app/pages/services/data-transfer-service.service';
 import { TranslateService } from '@ngx-translate/core';
-
+import { ValidationConstants } from 'src/app/constants/validation.constants';
 
 @Component({
   selector: 'app-register',
@@ -45,16 +45,16 @@ export class RegisterComponent {
         '',
         [
           Validators.required,
-          Validators.minLength(1),
-          Validators.maxLength(40),
+          Validators.minLength(ValidationConstants.NAME_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.NAME_MAX_LENGTH),
         ],
       ],
       last_name: [
         '',
         [
           Validators.required,
-          Validators.minLength(1),
-          Validators.maxLength(40),
+          Validators.minLength(ValidationConstants.NAME_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.NAME_MAX_LENGTH),
         ],
       ],
       email: [
@@ -71,7 +71,11 @@ export class RegisterComponent {
   }
 
   isFieldInvalid(field: string): boolean {
-    const control = this.form.get(field) ?? { invalid: false, dirty: false, touched: false };
+    const control = this.form.get(field) ?? {
+      invalid: false,
+      dirty: false,
+      touched: false,
+    };
     return control.invalid && (control.dirty || control.touched);
   }
 
@@ -85,7 +89,7 @@ export class RegisterComponent {
   onSubmit(): void {
     if (this.form.invalid) {
       this.showAlertForm = true;
-      Object.keys(this.form.controls).forEach(key => {
+      Object.keys(this.form.controls).forEach((key) => {
         this.form.get(key)?.markAsTouched();
       });
       return;
@@ -111,6 +115,4 @@ export class RegisterComponent {
   onAlertClosed(): void {
     this.showAlertForm = false;
   }
-
 }
-
diff --git a/src/app/constants/pagination.constants.ts b/src/app/constants/pagination.constants.ts
@@ -0,0 +1,12 @@
+export const PaginationConstants = {
+  BUTTON_DISABLED_COLOR: 'text-gray-400',
+  BUTTON_ACTIVE_BG_COLOR: 'bg-indigo-600',
+  BUTTON_INACTIVE_BG_COLOR: 'bg-gray-50',
+  BUTTON_TEXT_ACTIVE_COLOR: 'text-white',
+  BUTTON_TEXT_INACTIVE_COLOR: 'text-gray-900',
+  BUTTON_RING_COLOR: 'ring-gray-300',
+  BUTTON_HOVER_COLOR: 'hover:bg-gray-50',
+  INITIAL_PAGE: 1,
+  TOTAL_PAGES: 1,
+  PAGE_SIZE: 10,
+};
diff --git a/src/app/constants/product.constants.ts b/src/app/constants/product.constants.ts
@@ -1,4 +1,12 @@
 export const ProductConstants = {
+  MAINTENANCE_DURATION: 7 * 24 * 60 * 60 * 1000,
+  REPAIR_DURATION: 15 * 24 * 60 * 60 * 1000,
+  INITIAL_PAGE: 1,
+  INITIAL_TOTAL_PAGES: 1,
+  INITIAL_TOTAL_ITEMS: 0,
+  MAINTENANCE: 'maintenance',
+  REPAIR: 'repair',
+  APPLIANCE_TYPE_ALL: 'all',
   src: 'https://i.pinimg.com/564x/e6/bf/d2/e6bfd29d843ea47649824286b4142877.jpg',
   srca: 'https://i.pinimg.com/564x/35/3e/d7/353ed734f8daed731235fce4e358d2e6.jpg',
   srcb: 'https://i.pinimg.com/564x/c4/b4/7b/c4b47bf2aa50aa03384a47290fed0f54.jpg',

diff --git a/src/app/constants/routes.constants.ts b/src/app/constants/routes.constants.ts
@@ -5,6 +5,5 @@ export const RoutesConstants = {
   dashboard: '/pages/:userId/home',
   form: '/pages/:userId/form',
   product: '/pages/:userId/product',
-  root: '/',
+  payment: '/pages/:userId/payment/:id',
 };
-
diff --git a/src/app/constants/time.constants.ts b/src/app/constants/time.constants.ts
@@ -0,0 +1,6 @@
+export const TimeConstants = {
+  MILLISECONDS_PER_SECOND: 1000,
+  SECONDS_PER_MINUTE: 60,
+  MINUTES_PER_HOUR: 60,
+  HOURS_PER_DAY: 24,
+};
diff --git a/src/app/constants/validation.constants.ts b/src/app/constants/validation.constants.ts
@@ -0,0 +1,7 @@
+export const ValidationConstants = {
+    NAME_MIN_LENGTH: 1,
+    NAME_MAX_LENGTH: 40,
+    BRAND_MIN_LENGTH: 2,
+    BRAND_MAX_LENGTH: 50,
+    ADDRESSS_MAX_LENGTH: 100,
+  };
diff --git a/src/app/models/payment.ts b/src/app/models/payment.ts
@@ -0,0 +1,11 @@
+export interface Payment {
+  user_id: number;
+  full_name: string;
+  email: string;
+  telephone_number: string;
+  card_type: string;
+  card_number: string;
+  security_code: string;
+  amount_payable: number;
+  product_id: number;
+}
diff --git a/src/app/pages/appliance-registration/appliance-registration.component.css b/src/app/pages/appliance-registration/appliance-registration.component.css
@@ -86,4 +86,4 @@ input[type="file"] {
 
 .remove-image:hover {
     background: rgba(0, 0, 0, 0.7);
-}
+}
diff --git a/src/app/pages/appliance-registration/appliance-registration.component.html b/src/app/pages/appliance-registration/appliance-registration.component.html
@@ -286,3 +286,4 @@ <h3 class="text-lg font-medium leading-6 text-gray-900">{{
 <div *ngIf="showAlert" class="fixed inset-0 flex items-center justify-center z-50">
     <app-alert-confirmation (alertClosed)="onAlertClosed()"></app-alert-confirmation>
 </div>
+
diff --git a/src/app/pages/appliance-registration/appliance-registration.component.ts b/src/app/pages/appliance-registration/appliance-registration.component.ts
@@ -5,6 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { PROVINCES_ECUADOR } from 'src/app/constants/constants';
 import { DataTransferServiceService } from '../services/data-transfer-service.service';
 import { ProductService } from '../services/product.service';
+import { ValidationConstants } from 'src/app/constants/validation.constants';
 
 @Component({
   selector: 'app-appliance-registration',
@@ -45,17 +46,17 @@ export class ApplianceRegistrationComponent implements OnInit {
         '',
         [
           Validators.required,
-          Validators.minLength(2),
-          Validators.maxLength(50),
+          Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.BRAND_MAX_LENGTH),
         ],
       ],
-      problem_details: ['', [Validators.required, Validators.minLength(5)]],
+      problem_details: ['', [Validators.required, Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH)]],
       address: [
         '',
         [
           Validators.required,
-          Validators.minLength(5),
-          Validators.maxLength(100),
+          Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.ADDRESSS_MAX_LENGTH),
         ],
       ],
       service_type: ['', [Validators.required]],

diff --git a/src/app/pages/components/alert-confirmation/alert-confirmation.component.ts b/src/app/pages/components/alert-confirmation/alert-confirmation.component.ts
@@ -17,14 +17,11 @@ export class AlertConfirmationComponent {
     if (userId) {
       this.userId = +userId;
     }
-    console.log('User ID:', this.userId);
   }
 
-  closeAlert() {
+  closeAlert(): void {
     if (this.userId) {
       this.router.navigate(['/pages', this.userId, 'product']);
-    } else {
-      console.error('User ID is not defined.');
     }
   }
 }
diff --git a/src/app/pages/components/form-product/form-product.component.ts b/src/app/pages/components/form-product/form-product.component.ts
@@ -4,6 +4,8 @@ import { DataTransferServiceService } from '../../services/data-transfer-service
 import { Router } from '@angular/router';
 import { PROVINCES_ECUADOR } from 'src/app/constants/constants';
 import { ProductConstants } from 'src/app/constants/product.constants';
+import { ValidationConstants } from 'src/app/constants/validation.constants';
+
 
 @Component({
   selector: 'app-form-product',
@@ -40,17 +42,17 @@ export class FormProductComponent {
         '',
         [
           Validators.required,
-          Validators.minLength(2),
-          Validators.maxLength(50),
+          Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.BRAND_MAX_LENGTH),
         ],
       ],
-      problem_details: ['', [Validators.required, Validators.minLength(5)]],
+      problem_details: ['', [Validators.required, Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH)]],
       address: [
         '',
         [
           Validators.required,
-          Validators.minLength(5),
-          Validators.maxLength(100),
+          Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.ADDRESSS_MAX_LENGTH),
         ],
       ],
       service_type: ['', [Validators.required]],
@@ -61,8 +63,8 @@ export class FormProductComponent {
         '',
         [
           Validators.required,
-          Validators.minLength(2),
-          Validators.maxLength(50),
+          Validators.minLength(ValidationConstants.BRAND_MIN_LENGTH),
+          Validators.maxLength(ValidationConstants.ADDRESSS_MAX_LENGTH),
         ],
       ],
     });
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,4 +86,4 @@ input[type="file"] { @@
     .remove-image:hover {
         background: rgba(0, 0, 0, 0.7);
-    }
+    }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -286,3 +286,4 @@ <h3 class="text-lg font-medium leading-6 text-gray-900">{{
		<div *ngIf="showAlert" class="fixed inset-0 flex items-center justify-center z-50">
		<app-alert-confirmation (alertClosed)="onAlertClosed()"></app-alert-confirmation>
		</div>