Merge pull request #10 from alexjosesilva/developer

Developer

package.json

@@ -21,6 +21,7 @@
     "@fortawesome/fontawesome-free": "^6.5.2",
     "bootstrap": "^5.2.3",
     "ngx-bootstrap": "^9.0.0",
+    "ngx-mask": "^12.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app.module.ts

@@ -2,26 +2,31 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CardComponent } from './card/card.component';
 import { ModalComponent } from './modal/modal.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import { NgxMaskModule } from 'ngx-mask';
+import { SucessoModalComponent } from './sucesso-modal/sucesso-modal.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CardComponent,
-    ModalComponent
+    ModalComponent,
+    SucessoModalComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     BrowserAnimationsModule,
-    ModalModule.forRoot() // Importe e inicialize o módulo de modal do ngx-bootstrap
-
+    ModalModule.forRoot(),
+    NgxMaskModule.forRoot()
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/modal/modal.component.html

@@ -7,22 +7,33 @@ <h2>Como você prefere receber o nosso contato?</h2>
       <ul class="contact-list">
         <li>
           <i class="fas fa-phone"></i>
-          <label>Telefone </label>
-          <input type="radio" name="contactMethod" value="telefone">
+          <label>Telefone </label> 
+          <input type="radio" name="contactMethod" value="telefone" (change)="mostrarCampo('telefone')" [(ngModel)]="selectedMethod">
+        </li>
+        <li>
+          <div *ngIf="selectedMethod === 'telefone'" >
+             <label>Inserir o numero do Telefone</label>
+            <br> <input type="tel" name="telefone"  mask="(00) 0000-0000" [(ngModel)]="phoneNumber">
+          </div>
         </li>
         <hr>
         <li>
           <i class="fas fa-envelope"></i>
-          <label>E-mail</label> 
-          <input type="radio" name="contactMethod" value="email">
+          <label>E-mail</label>
+          <input type="radio" name="contactMethod" value="email" (change)="mostrarCampo('email')" [(ngModel)]="selectedMethod">
+          <li>
+            <div *ngIf="selectedMethod === 'email'" >
+              <label>Inserir o email</label>
+              <br> <input type="text" name="email" [(ngModel)]="email">
+            </div>
         </li>  
         <hr>
       </ul>
     </div>
 
     <p> 
       <i class="fas fa-sms"></i> 
-      <span> Atendimento em até 03 dias úteis.</span>
+      <span> Atendimento em até <b>03 dias úteis.</b></span>
     </p>
 
     <p>

src/app/modal/modal.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 //import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { BsModalRef } from 'ngx-bootstrap/modal'; // Importe apenas o BsModalRef
+import { SucessoModalComponent } from '../sucesso-modal/sucesso-modal.component';
 @Component({
   selector: 'app-modal',
   templateUrl: './modal.component.html',
@@ -14,9 +15,13 @@ export class ModalComponent {
   showEmail = false;
   phoneNumber: string = '';
   email: string = '';
+  selectedMethod: string = ''; // Guarda o método selecionado (telefone ou email)
 
-  constructor(public activeModal: BsModalRef) {}
+  constructor(public activeModal: BsModalRef, private modalService: BsModalService) {}
 
+  mostrarCampo(metodo: string): void {
+    this.selectedMethod = metodo;
+  }
   showPhoneInput() {
     console.log("phoneInput");
     this.showOptions = false;
@@ -29,19 +34,40 @@ export class ModalComponent {
   }
 
   closeModal() {
-    console.log("closeModal");
+    console.log("closeModal1");
     this.showOptions = true;
     this.showPhone = false;
     this.showEmail = false;
     this.activeModal.hide();
   }
 
   requestContact() {
-    if (this.phoneNumber) {
-      // Lógica para solicitar contato via telefone
-    } else if (this.email) {
-      // Lógica para solicitar contato via e-mail
+    if (this.phoneNumber || this.email) {
+      // Lógica para solicitar contato (telefone ou e-mail)
+      // Aqui você deve implementar a lógica para enviar a solicitação de contato
+
+      // Fecha o modal atual
+      console.log("closeModal2");
+      this.closeModal();
+
+      // Abre o modal de sucesso
+      const successModalRef = this.modalService.show(SucessoModalComponent, {
+        initialState: {
+          mensagem: 'Solicitação enviada com sucesso'
+        }
+      });
+
+      // Verifica se successModalRef e successModalRef.content são definidos
+      if (successModalRef && successModalRef.content) {
+        // Lidar com o evento de fechar modal do modal de sucesso
+
+        successModalRef.content.fecharModal.subscribe(() => {
+          console.log("5555555")
+          this.closeModal();
+          this.activeModal.hide(); // Fecha o modal principal
+        });
+      }
+
     }
-
   }
 }

src/app/sucesso-modal/sucesso-modal.component.html

@@ -0,0 +1,6 @@
+<div class="modalsucesso">
+    <h2>Solicitação enviada com sucesso</h2>
+    <p>Sua solicitação foi enviada com sucesso!</p>
+    <button (click)="fechar()">Fechar</button>
+</div>
+

src/app/sucesso-modal/sucesso-modal.component.scss

@@ -0,0 +1,37 @@
+.modalsucesso {
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  h2 {
+    color: #333;
+  }
+
+  p {
+    color: #666;
+  }
+
+  button {
+    text-align: left;
+    padding: 10px 20px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    color: #000;
+    background-color: transparent;
+    transition: background-color 0.3s;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        background-color: #8B4513; /* Marron leve */
+    }
+  }
+

src/app/sucesso-modal/sucesso-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SucessoModalComponent } from './sucesso-modal.component';
+
+describe('SucessoModalComponent', () => {
+  let component: SucessoModalComponent;
+  let fixture: ComponentFixture<SucessoModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SucessoModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SucessoModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sucesso-modal/sucesso-modal.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-sucesso-modal',
+  templateUrl: './sucesso-modal.component.html',
+  styleUrls: ['./sucesso-modal.component.scss']
+})
+export class SucessoModalComponent {
+
+  @Output() fecharModal = new EventEmitter<void>();
+  mensagem: string = '';
+
+  constructor() { }
+
+  fechar() {
+    console.log("closeModal3");
+    this.fecharModal.emit();
+  }
+
+}