payment date

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

@@ -1 +1,83 @@
-<p>payment-date 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">"First payment date"</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="98"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="payment_date">
+          <span>First payment date <span class="red">*</span></span>
+        </label>
+        <select id="payment_date"></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 custom-input"
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+      >
+        <label for="payment_due" style="margin-bottom: 0">
+          <span>Effective date</span>
+        </label>
+        <span class="span">Mar 11th, 2023</span>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10">
+      <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>Invoice cycle ends</span>
+        </label>
+        <span class="span">Mars 31st, 2023</span>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10">
+      <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 due</span>
+        </label>
+        <span class="span">Same day</span>
+      </div>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
+  <span class="pageNumber">Page Number 3</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-date/payment-date.component.scss

@@ -0,0 +1,49 @@
+.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;
+}
+
+.span {
+  font-weight: bold;
+  color: #009fe3;
+}

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

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-payment-date',
   templateUrl: './payment-date.component.html',
-  styleUrls: ['./payment-date.component.scss']
+  styleUrls: ['./payment-date.component.scss'],
 })
 export class PaymentDateComponent {
-
+  constructor(public readonly dialog: MatDialog) {}
 }

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

@@ -123,7 +123,13 @@
 
   <div>
     <button mat-button mat-dialog-close>Back</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial class="next">
+    <button
+      mat-button
+      [mat-dialog-close]="true"
+      cdkFocusInitial
+      class="next"
+      (click)="onOpenDate()"
+    >
       Next
     </button>
   </div>

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

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