payment of contract

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, Inject } from '@angular/core';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { PaymantConfigComponent } from '../../pay-as-you-go/paymant-config/paymant-config.component';
 import { PaymentRateComponent } from '../payment-rate/payment-rate.component';
 
 @Component({
@@ -8,15 +9,26 @@ import { PaymentRateComponent } from '../payment-rate/payment-rate.component';
   styleUrls: ['./personal-information.component.scss'],
 })
 export class PersonalInformationComponent {
-  constructor(public readonly dialog: MatDialog) {}
+  constructor(
+    public readonly dialog: MatDialog,
+    @Inject(MAT_DIALOG_DATA) public data: { type: number }
+  ) {}
   onOpenPaymentRate(): void {
     let dialogRef;
-    dialogRef = this.dialog.open(PaymentRateComponent, {
-      width: '70%',
-    });
-
-    dialogRef.afterClosed().subscribe((result) => {
-      console.log(`Dialog result: ${result}`);
-    });
+    if (this.data.type === 0) {
+      dialogRef = this.dialog.open(PaymentRateComponent, {
+        width: '70%',
+      });
+      dialogRef.afterClosed().subscribe((result) => {
+        console.log(`Dialog result: ${result}`);
+      });
+    } else {
+      dialogRef = this.dialog.open(PaymantConfigComponent, {
+        width: '50%',
+      });
+      dialogRef.afterClosed().subscribe((result) => {
+        console.log(`Dialog result: ${result}`);
+      });
+    }
   }
 }

src/app/modules/contracts/components/pay-as-you-go/paymant-config/paymant-config.component.html

@@ -0,0 +1,56 @@
+<h2
+  mat-dialog-title
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  class="personal-info-title"
+>
+  <!-- <img src="../../../../../../assets/images/arrow.svg" alt="" title="" /> -->
+  <div class="text-center">
+    <span>Create contractor contract</span>
+    <p class="bold">"Payment"</p>
+  </div>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <form>
+    <div fxLayout="column wrap" fxLayoutAlign="center center" class="gap-10">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="98"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="entity">
+          <span>Payment Amount <span class="red">*</span></span>
+        </label>
+        <input type="text" id="entity" placeholder="enter amount" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="98"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="contractor_name">
+          <span>Payment Date <span class="red">*</span></span>
+        </label>
+        <input
+          type="date"
+          id="contractor_name"
+          placeholder="Enter contractor name"
+        />
+      </div>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
+  <span class="pageNumber">Page Number 2</span>
+
+  <div>
+    <button mat-button mat-dialog-close>Back</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial class="next">
+      Next
+    </button>
+  </div>
+</mat-dialog-actions>

src/app/modules/contracts/components/pay-as-you-go/paymant-config/paymant-config.component.scss

@@ -0,0 +1,36 @@
+.personal-info-title {
+  div {
+    padding: 10px 0;
+    span {
+      font-size: 18px;
+      color: #2f2c83;
+    }
+    p {
+      font-size: 15px;
+      color: #009fe3;
+    }
+  }
+}
+
+.mdc-dialog__title::before {
+  display: none;
+}
+
+.next {
+  background-color: #009fe3;
+  color: #fff !important;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.5s;
+  font-size: 15px;
+  &:hover {
+    background-color: #2f2c83;
+  }
+}
+
+.pageNumber {
+  font-size: 12px;
+  font-weight: bold;
+  color: #009fe3;
+}

src/app/modules/contracts/components/pay-as-you-go/paymant-config/paymant-config.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymantConfigComponent } from './paymant-config.component';
+
+describe('PaymantConfigComponent', () => {
+  let component: PaymantConfigComponent;
+  let fixture: ComponentFixture<PaymantConfigComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PaymantConfigComponent]
+    });
+    fixture = TestBed.createComponent(PaymantConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/contracts/components/pay-as-you-go/paymant-config/paymant-config.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-paymant-config',
+  templateUrl: './paymant-config.component.html',
+  styleUrls: ['./paymant-config.component.scss']
+})
+export class PaymantConfigComponent {
+
+}

src/app/modules/contracts/contract-type/contract-type.component.html

@@ -19,6 +19,7 @@
         alt=""
         title=""
       />
+      <p class="text-center type-text bold">Contractor</p>
       <div fxLayout="row" fxLayoutAlign="start center" class="info">
         <img src="../../../../assets/images/info.svg" alt="" title="" />
         <span
@@ -40,6 +41,8 @@
         alt=""
         title=""
       />
+      <p class="text-center type-text bold">Employee</p>
+
       <div fxLayout="row" fxLayoutAlign="start center" class="info">
         <img src="../../../../assets/images/info.svg" alt="" title="" />
         <span

src/app/modules/contracts/contract-type/contract-type.component.scss

@@ -1 +1,4 @@
-
+.type-text {
+  color: #2f2c83;
+  margin-top: 10px;
+}

src/app/modules/contracts/contractor-contract-type/contractor-contract-type.component.html

@@ -19,11 +19,11 @@
       [ngClass]="{ active: activeType === 0 }"
     >
       <div class="text-center">
-        <img src="../../../../assets/images/fixedRate.svg" alt="" title="" />
+        <img src="assets/images/fixedRate.svg" alt="" title="" />
         <p class="bold">Fixed Rate</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
-        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <img src="assets/images/info.svg" alt="" title="" />
         <span
           >A person who is employed by an organization for a wage or
           salary</span

src/app/modules/contracts/contractor-contract-type/contractor-contract-type.component.ts

@@ -21,11 +21,25 @@ export class ContractorContractTypeComponent {
     if (this.activeType === 0) {
       dialogRef = this.dialog.open(PersonalInformationComponent, {
         width: '70%',
+        data: { type: 0 },
       });
 
       dialogRef.afterClosed().subscribe((result) => {
         console.log(`Dialog result: ${result}`);
       });
+      return;
+    }
+
+    if (this.activeType === 1) {
+      dialogRef = this.dialog.open(PersonalInformationComponent, {
+        width: '70%',
+        data: { type: 1 },
+      });
+
+      dialogRef.afterClosed().subscribe((result) => {
+        console.log(`Dialog result: ${result}`);
+      });
+      return;
     }
   }
 }

src/app/modules/contracts/contracts-theme.scss

@@ -52,7 +52,7 @@
           }
 
           .info {
-            margin-top: 1.5rem;
+            margin-top: 1rem;
           }
           div {
             box-sizing: border-box;

src/app/modules/contracts/contracts.module.ts

@@ -11,9 +11,10 @@ import { PaymentRateComponent } from './components/fixed-rate-forms/payment-rate
 import { PaymentDateComponent } from './components/fixed-rate-forms/payment-date/payment-date.component';
 import { OtherInformationComponent } from './components/fixed-rate-forms/other-information/other-information.component';
 import { ContractCompilianceComponent } from './components/fixed-rate-forms/contract-compiliance/contract-compiliance.component';
+import { PaymantConfigComponent } from './components/pay-as-you-go/paymant-config/paymant-config.component';
 
 @NgModule({
-  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent, PersonalInformationComponent, PaymentRateComponent, PaymentDateComponent, OtherInformationComponent, ContractCompilianceComponent],
+  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent, PersonalInformationComponent, PaymentRateComponent, PaymentDateComponent, OtherInformationComponent, ContractCompilianceComponent, PaymantConfigComponent],
   imports: [CommonModule, ContractsRoutingModule, SharedModule],
 })
 export class ContractsModule {}