Merge pull request #438 from communitybridge/feature/consent-ui

Added context UI

Author: amolsontakke3576

src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.html

@@ -103,6 +103,12 @@
             </div>
           </div>
 
+          <div class="row justify-content-center" style="margin: 30px 0 30px 0;">
+            <div class="col-12">
+              <app-consent (termAccepted)="hasTermAccepted = $event"></app-consent>
+            </div>
+        </div>
+
           <div class="col-12 buttons" [ngClass]="{ 'mt-30': selectedCompany }">
             <div class="row justify-content-center align-items-center">
               <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
@@ -119,9 +125,9 @@
                 <button
                   tabindex="-1"
                   type="button"
-                  [disabled]="selectedCompany === ''"
+                  [disabled]="selectedCompany === '' || !hasTermAccepted"
                   class="btn inactive"
-                  [ngClass]="{ active: selectedCompany !== '' }"
+                  [ngClass]="{ active: selectedCompany !== '' && hasTermAccepted }"
                   (click)="onClickProceed()"
                 >
                   Proceed

src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.ts

@@ -58,6 +58,7 @@ export class CorporateDashboardComponent implements OnInit, OnDestroy {
   mySubscription: Subscription;
   proccedWithExistingOrganization: Subscription;
   attempt: boolean;
+  hasTermAccepted = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -371,7 +372,7 @@ export class CorporateDashboardComponent implements OnInit, OnDestroy {
       }
       this.searchTimeout = setTimeout(() => {
         this.searchOrganization(encodeURIComponent(companyName));
-      }, 400);
+      }, 500);
     } else {
       this.selectedCompany = '';
       this.organizationList.list = [];

src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.html

@@ -33,15 +33,21 @@
                     </div>
                 </div>
 
+                <div class="row justify-content-center" style="margin: 30px 0 30px 0;">
+                    <div class="col-12">
+                      <app-consent (termAccepted)="hasTermAccepted = $event"></app-consent>
+                    </div>
+                  </div>
+
                 <div class="row buttons justify-content-center align-items-center">
                     <div class="col-xs-6 col-sm-6 col-md-5 col-lg-5">
                         <button tabindex="-1" type="button" class="btn" (click)="onClickBack()">
                             GO BACK
                         </button>
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-5 col-lg-5">
-                        <button tabindex="-1" type="button" [disabled]="status!=='Completed'"
-                            [ngClass]="{'blue':status==='Completed'}" class="btn gray" (click)="onClickSignCLA()">
+                        <button tabindex="-1" type="button" [disabled]="status!=='Completed' || !hasTermAccepted"
+                            [ngClass]="{'blue':status==='Completed' && hasTermAccepted}" class="btn gray" (click)="onClickSignCLA()">
                             SIGN CLA</button>
                     </div>
                 </div>

src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.ts

@@ -19,7 +19,8 @@ export class DocusignSignatureModelComponent {
 
   title: string;
   message: string;
-
+  hasTermAccepted = false;
+  
   constructor(
     private storageService: StorageService,
     private modalService: NgbModal

src/app/shared/components/checkbox/checkbox.component.html

@@ -1,8 +1,11 @@
 <!-- Copyright The Linux Foundation and each contributor to CommunityBridge.
  SPDX-License-Identifier: MIT -->
 
-<label class="container">
-    <span>{{text}}</span>
+ <label class="container">
+    <span [ngStyle]="{'font-size': fontSize, 'font-weight': bold ? 'bold' : 'normal'}">
+        <span *ngIf="required" style="color: red;">*</span>
+        {{text}}
+    </span>
     <input type="checkbox" [checked]="checked" (click)="onCheckboxClick()">
-    <span class="checkmark"></span>
+    <span class="checkmark" [ngStyle]="{'top': topMargin}"></span>
 </label>

src/app/shared/components/checkbox/checkbox.component.ts

@@ -11,6 +11,10 @@ import { Component, Input, EventEmitter, Output } from '@angular/core';
 export class CheckboxComponent {
   @Input() checked: boolean;
   @Input() text: string;
+  @Input() fontSize: string;
+  @Input() topMargin: string;
+  @Input() bold: boolean;
+  @Input() required: boolean;
   @Output() checkboxEmitter: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {}

src/app/shared/components/consent/consent.component.html

@@ -0,0 +1,21 @@
+<!-- Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT -->
+ 
+<div class="wrapper">
+    <div class="box">
+      <div class="consent-title">Consent </div>
+      <app-checkbox [checked]="hasTermAccepted" text="I hereby certify that I am not, and/or the organization I am representing is not"
+          (checkboxEmitter)="onClickTermAccepted($event)" fontSize="16px" topMargin="5px" bold="true" [required]="true">
+      </app-checkbox>
+      <ul class="mt-2">
+          <li>located in Cuba, Iran, North Korea, Syria, the Crimea Region of Ukraine, or the Russian-controlled areas of the Donetsk or Luhansk regions of Ukraine;
+          </li>
+          <li>owned or controlled by, acting for or on behalf of, or an individual or entity that has in the past acted for or on behalf of the Government of Cuba, 
+              Iran, North Korea, Syria, or Venezuela; or</li>
+          <li>listed as a blocked person by the U.S. Department of the Treasury’s 
+            <a style="color: #0099cc;" href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank">Office of Foreign Assets Control (OFAC)</a> 
+              or directly or indirectly owned 50 percent or more by such a listed person
+          </li>
+        </ul>
+    </div>
+  </div>

src/app/shared/components/consent/consent.component.scss

@@ -0,0 +1,13 @@
+/* Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT */
+ 
+.consent-title{
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-align: center;
+  }
+  /* Some custom styles to beautify this example */
+  .wrapper{
+    font-size: 16px;
+  }

src/app/shared/components/consent/consent.component.spec.ts

@@ -0,0 +1,29 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConsentComponent } from './consent.component';
+
+describe('ConsentComponent', () => {
+  let component: ConsentComponent;
+  let fixture: ComponentFixture<ConsentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConsentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConsentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/consent/consent.component.ts

@@ -0,0 +1,25 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-consent',
+  templateUrl: './consent.component.html',
+  styleUrls: ['./consent.component.scss']
+})
+export class ConsentComponent implements OnInit {
+
+  @Input() hasTermAccepted = false;
+  @Output() termAccepted: EventEmitter<boolean> = new EventEmitter<boolean>();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickTermAccepted(event:boolean) {
+    this.hasTermAccepted = event
+    this.termAccepted.emit(event)
+  }
+}