payment rate

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.html

@@ -1 +1,130 @@
-<p>payment-rate works!</p>
+<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">"Personal Information"</p>
+  </div>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <form>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="rate_type">
+          <span>Rate Type <span class="red">*</span></span>
+        </label>
+        <select id="rate_type"></select>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="currency">
+          <span>Currancy <span class="red">*</span></span>
+        </label>
+        <select id="currency"></select>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="payment_rate">
+          <span>Payment Rate<span class="red">*</span></span>
+        </label>
+        <input type="text" id="payment_rate" placeholder="Enter payment rate" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="payment_frequency">
+          <span>Payment frequency <span class="red">*</span></span>
+        </label>
+        <select id="payment_frequency"></select>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="invoice_cycle">
+          <span>Invoice cycle<span class="red">*</span></span>
+        </label>
+        <select id="invoice_cycle"></select>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="invoice_cycle_ends">
+          <span>Invoice cycle ends <span class="red">*</span></span>
+        </label>
+        <select id="invoice_cycle_ends"></select>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="payment_due">
+          <span>Payment due<span class="red">*</span></span>
+        </label>
+        <select id="payment_due"></select>
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input custom-input"
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+      >
+        <label for="payment_due" style="margin-bottom: 0">
+          <span>Payment ahead of the weekend<span class="red">*</span></span>
+        </label>
+        <mat-slide-toggle class="example-margin"> </mat-slide-toggle>
+      </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/fixed-rate-forms/payment-rate/payment-rate.component.scss

@@ -0,0 +1,44 @@
+.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;
+}
+
+.custom-input {
+  background: #2f2c831a;
+  padding: 12px 20px;
+  border-radius: 10px;
+  margin-top: 1.5rem;
+  box-shadow: 0px 5px 6px #2f2c8324;
+}

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

@@ -134,9 +134,19 @@
     </div>
   </form>
 </mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Back</button>
-  <button mat-button [mat-dialog-close]="true" cdkFocusInitial class="next">
-    Next
-  </button>
+<mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
+  <span class="pageNumber">Page Number 1</span>
+
+  <div>
+    <button mat-button mat-dialog-close>Back</button>
+    <button
+      mat-button
+      [mat-dialog-close]="true"
+      cdkFocusInitial
+      class="next"
+      (click)="onOpenPaymentRate()"
+    >
+      Next
+    </button>
+  </div>
 </mat-dialog-actions>

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

@@ -28,3 +28,9 @@
     background-color: #2f2c83;
   }
 }
+
+.pageNumber {
+  font-size: 12px;
+  font-weight: bold;
+  color: #009fe3;
+}

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

@@ -1,10 +1,22 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PaymentRateComponent } from '../payment-rate/payment-rate.component';
 
 @Component({
   selector: 'app-personal-information',
   templateUrl: './personal-information.component.html',
-  styleUrls: ['./personal-information.component.scss']
+  styleUrls: ['./personal-information.component.scss'],
 })
 export class PersonalInformationComponent {
+  constructor(public readonly dialog: MatDialog) {}
+  onOpenPaymentRate(): void {
+    let dialogRef;
+    dialogRef = this.dialog.open(PaymentRateComponent, {
+      width: '70%',
+    });
 
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }