five type of contract

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

@@ -1 +1,147 @@
-<p>other-information 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">"Other information"</p>
+  </div>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <div class="who-submit" fxLayout="row" fxLayoutAlign="start center">
+    <span>Who can submit work?</span>
+    <div class="submit-type" fxLayout="row" fxLayoutAlign="start center">
+      <span class="type">Client</span>
+      <span class="type">Contractor</span>
+    </div>
+  </div>
+  <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-3">
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <label for="notice_period">
+        <span>Notice perioed<span class="red">*</span></span>
+      </label>
+      <input
+        type="text"
+        id="notice_period"
+        placeholder="Enter number of days"
+      />
+    </div>
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <label for="termination_date">
+        <span>Termination Date<span class="red">*</span></span>
+      </label>
+      <input type="date" id="datermination_datete" placeholder="select date" />
+    </div>
+  </div>
+  <div fxLayout="row wrap" fxLayoutAlign="center start" class="gap-10 mt-2">
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <div class="check_box">
+        <div fxLayout="row" fxLayoutAlign="space-between center">
+          <mat-checkbox class="example-margin">
+            <p class="check-span">Stock option offer</p></mat-checkbox
+          >
+          <button class="add-btn">Add</button>
+        </div>
+        <p class="description">
+          A stock option provides an employee with the opportunity to purchase a
+          set number of shares of company stock at a certain price within a
+          certain period of time. The price is called the “grant price” or
+          “strike price.” This price is usually based on a discounted price of
+          the stock at the time of hire
+        </p>
+      </div>
+    </div>
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <div class="check_box">
+        <div fxLayout="row" fxLayoutAlign="space-between center">
+          <mat-checkbox class="example-margin">
+            <p class="check-span">Coworking space membership</p></mat-checkbox
+          >
+          <button class="add-btn">Add</button>
+        </div>
+        <p class="description">
+          All Access is a monthly coworking membership to beautifully designed
+          spaces near home or around the world
+        </p>
+      </div>
+    </div>
+  </div>
+  <div fxLayout="row wrap" fxLayoutAlign="center start" class="gap-10 mt-2">
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <div class="check_box">
+        <div fxLayout="row" fxLayoutAlign="space-between center">
+          <mat-checkbox class="example-margin">
+            <p class="check-span">Additional Document</p></mat-checkbox
+          >
+          <button class="add-btn">Add</button>
+        </div>
+        <p class="description">
+          Additional Document attach any additional Document you may required
+          for the contract . attach a zip for multiple documents
+        </p>
+      </div>
+    </div>
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <div class="check_box">
+        <div fxLayout="row" fxLayoutAlign="space-between center">
+          <mat-checkbox class="example-margin">
+            <p class="check-span">Special Clause</p></mat-checkbox
+          >
+          <button class="add-btn">Add</button>
+        </div>
+        <p class="description">
+          You may want special clause in the contract to outline terms.
+        </p>
+      </div>
+    </div>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
+  <span class="pageNumber">Page Number 5</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/other-information/other-information.component.scss

@@ -0,0 +1,100 @@
+.personal-info-title {
+  div {
+    padding: 10px 0;
+    span {
+      font-size: 18px;
+      color: #2f2c83;
+    }
+    p {
+      font-size: 15px;
+      color: #009fe3;
+    }
+  }
+}
+
+.who-submit {
+  width: 98%;
+  background-color: #2f2c831a;
+  padding: 10px 15px;
+  border-radius: 10px;
+  gap: 20px;
+  margin: 0 auto;
+}
+
+.submit-type {
+  gap: 10px;
+}
+
+.type {
+  background-color: #70707059;
+  color: #707070;
+  padding: 3px 25px;
+  border-radius: 10px;
+  font-size: 15px;
+}
+
+.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;
+}
+
+.check_box {
+  background-color: #2f2c8326;
+  padding: 20px;
+  border-radius: 10px;
+  height: 200px;
+}
+
+.add-btn {
+  background-color: #009fe33f;
+  color: #009fe3;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 10px;
+  font-weight: bold;
+}
+
+.description {
+  color: #040000;
+  font-size: 13px;
+  margin-top: 10px;
+  text-align: justify;
+  line-height: 18px;
+  padding: 5px 10px;
+}
+
+.check-span {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}

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

@@ -23,7 +23,7 @@
         <label for="payment_date">
           <span>First payment date <span class="red">*</span></span>
         </label>
-        <select id="payment_date"></select>
+        <input type="date" id="payment_date" placeholder="select date" />
       </div>
     </div>
 
@@ -76,7 +76,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)="onOpenDialog()"
+    >
       Next
     </button>
   </div>

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { OtherInformationComponent } from '../other-information/other-information.component';
 
 @Component({
   selector: 'app-payment-date',
@@ -8,4 +9,15 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class PaymentDateComponent {
   constructor(public readonly dialog: MatDialog) {}
+
+  onOpenDialog(): void {
+    let dialogRef;
+    dialogRef = this.dialog.open(OtherInformationComponent, {
+      width: '70%',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }