Merge branch 'feat/supermind-composer-validation-f5777' into 'master'

Feat/supermind composer validation f5777

See merge request minds/front!2068

Author: markharding

package-lock.json

@@ -5,6 +5,7 @@
   (focus)="onInputFocus($event)"
   (blur)="onInputBlur($event)"
   [placeholder]="placeholder"
+  [class.ng-invalid]="isInvalid"
   #input
 />
 <ul

src/app/common/components/forms/autocomplete-user-input/autocomplete-user-input.component.html

@@ -6,6 +6,12 @@
 
   input {
     width: 100%;
+
+    &.ng-dirty.ng-invalid {
+      @include m-theme() {
+        border-color: themed($m-alert) !important;
+      }
+    }
   }
 
   .m-formInputAutocompleteUserInput__popout {

src/app/common/components/forms/autocomplete-user-input/autocomplete-user-input.component.ng.scss

@@ -3,6 +3,7 @@ import {
   ElementRef,
   forwardRef,
   Input,
+  Self,
   ViewChild,
 } from '@angular/core';
 import {
@@ -25,7 +26,7 @@ import {
 import { ApiService } from '../../../api/api.service';
 import { ConfigsService } from '../../../services/configs.service';
 import { MindsUser } from '../../../../interfaces/entities';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { FastFadeAnimation } from '../../../../animations';
 
 /**
@@ -34,7 +35,6 @@ import { FastFadeAnimation } from '../../../../animations';
 export type UserSearchResponse = { status: string; entities: MindsUser[] };
 
 export const FORM_INPUT_AUTOCOMPLETE_USER_INPUT_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => AutocompleteUserInputComponent),
   multi: true,
 };
@@ -48,7 +48,7 @@ export const FORM_INPUT_AUTOCOMPLETE_USER_INPUT_VALUE_ACCESSOR: any = {
   selector: 'm-formInput__autocompleteUserInput',
   templateUrl: './autocomplete-user-input.component.html',
   styleUrls: ['./autocomplete-user-input.component.ng.scss'],
-  providers: [FORM_INPUT_AUTOCOMPLETE_USER_INPUT_VALUE_ACCESSOR],
+  // providers: [FORM_INPUT_AUTOCOMPLETE_USER_INPUT_VALUE_ACCESSOR],
   animations: [FastFadeAnimation],
 })
 export class AutocompleteUserInputComponent implements ControlValueAccessor {
@@ -141,8 +141,13 @@ export class AutocompleteUserInputComponent implements ControlValueAccessor {
    */
   readonly cdnUrl: string;
 
-  constructor(private api: ApiService, configs: ConfigsService) {
+  constructor(
+    @Self() private control: NgControl,
+    private api: ApiService,
+    configs: ConfigsService
+  ) {
     this.cdnUrl = configs.get('cdn_url');
+    this.control.valueAccessor = this;
   }
 
   ngOnInit() {
@@ -158,6 +163,10 @@ export class AutocompleteUserInputComponent implements ControlValueAccessor {
     this.usernameSubscription.unsubscribe();
   }
 
+  get isInvalid() {
+    return this.control.invalid;
+  }
+
   /**
    * Emits the username, will trigger rxjs flow
    * @param username

src/app/common/components/forms/autocomplete-user-input/autocomplete-user-input.component.ts

@@ -1,6 +1,6 @@
 import { Client } from '../api/client.service';
 import { BehaviorSubject } from 'rxjs';
-import { Injectable, Inject } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { RedirectService } from './redirect.service';
 import { Location } from '@angular/common';
 
@@ -28,8 +28,8 @@ export class ConfigsService {
     }
   }
 
-  get(key) {
-    return this.configs[key] || null;
+  get<T = any>(key): T | null {
+    return (this.configs[key] as T) || null;
   }
 
   set(key, value): void {

src/app/common/services/configs.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from '../api/api.service';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+export class EntityResolverServiceOptions {
+  get ref(): string {
+    return this._ref;
+  }
+
+  set ref(value: string) {
+    this._ref = value;
+  }
+
+  get refType(): 'guid' | 'username' {
+    return this._refType;
+  }
+
+  set refType(value: 'guid' | 'username') {
+    this._refType = value;
+  }
+
+  private _refType: 'guid' | 'username';
+
+  private _ref: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class EntityResolverService {
+  constructor(private apiService: ApiService) {}
+
+  public get$<T>(opt: EntityResolverServiceOptions): Observable<T | null> {
+    return this.apiService
+      .get<T>(`api/v3/entities/${opt.ref}`)
+      .pipe(catchError(e => of(null)));
+  }
+}

src/app/common/services/entity-resolver.service.ts

@@ -1,6 +1,7 @@
 /**
  * Activity Object
  */
+import { SupermindSettings } from '../modules/settings-v2/payments/supermind/supermind.types';
 import { WireRewardsStruc } from '../modules/wire/interfaces/wire.interfaces';
 
 export type BitBoolean = 0 | 1;
@@ -136,6 +137,7 @@ export interface MindsUser {
   seed?: boolean;
   require_login?: boolean;
   email_confirmed?: boolean;
+  supermind_settings?: SupermindSettings;
 }
 
 export interface MindsGroup {

src/app/interfaces/entities.ts

@@ -36,18 +36,22 @@ <h3 class="m-composerPopup__title" i18n="@@COMMON__SUPERMIND">Supermind</h3>
           <label> Target Channel</label>
         </div>
         <div class="m-form__row--input">
-          <!-- <input
-            type="text"
-            id="username"
-            formControlName="username"
-            placeholder="@username"
-          /> -->
           <m-formInput__autocompleteUserInput
             id="username"
             formControlName="username"
             placeholder="@username"
           ></m-formInput__autocompleteUserInput>
         </div>
+        <div
+          class="m-form__row--validation"
+          *ngIf="
+            !inProgress && formGroup.controls.username.errors?.merchantInvalid
+          "
+        >
+          <p i18n="@@MINDS_SUPERMIND_COMPOSER__MERCHANT_INVALID">
+            @{{ formGroup.controls.username.value }} cannot receive cash offers
+          </p>
+        </div>
       </div>
 
       <!------------------------>
@@ -64,7 +68,12 @@ <h3 class="m-composerPopup__title" i18n="@@COMMON__SUPERMIND">Supermind</h3>
             >
           </div>
           <div class="m-form__row--input">
-            <input type="number" id="offer_usd" formControlName="offerUsd" />
+            <input
+              type="number"
+              [pattern]="'([0-9]+\\.[0-9]{1,2}|[0-9]+)'"
+              id="offer_usd"
+              formControlName="offerUsd"
+            />
           </div>
         </div>
 
@@ -100,6 +109,7 @@ <h3 class="m-composerPopup__title" i18n="@@COMMON__SUPERMIND">Supermind</h3>
           <div class="m-form__row--input">
             <input
               type="number"
+              [pattern]="'([0-9]+\\.[0-9]{1,2}|[0-9]+)'"
               id="offer_tokens"
               formControlName="offerTokens"
             />
@@ -218,7 +228,7 @@ <h3 class="m-composerPopup__title" i18n="@@COMMON__SUPERMIND">Supermind</h3>
       i18n="@@COMPOSER_POPUP__SAVE_TAGS"
       size="small"
       color="blue"
-      [disabled]="!formGroup.valid"
+      [disabled]="inProgress || !formGroup.valid"
     >
       Save
     </m-button>

src/app/modules/composer/components/popup/supermind/supermind.component.html

@@ -1,22 +1,16 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { BehaviorSubject } from 'rxjs';
 import { ApiService } from '../../../../../common/api/api.service';
 import { CommonModule } from '../../../../../common/common.module';
 import { ButtonComponent } from '../../../../../common/components/button/button.component';
-import { AutocompleteUserInputComponent } from '../../../../../common/components/forms/autocomplete-user-input/autocomplete-user-input.component';
 import { ConfigsService } from '../../../../../common/services/configs.service';
-import { Client } from '../../../../../services/api';
-import { Session } from '../../../../../services/session';
 import { MockComponent, MockService } from '../../../../../utils/mock';
-import { PaymentsModule } from '../../../../payments/payments.module';
-import {
-  ComposerService,
-  ComposerSize,
-} from '../../../services/composer.service';
+import { ComposerService } from '../../../services/composer.service';
 import { PopupService } from '../popup.service';
 import { ComposerSupermindComponent } from '../supermind/supermind.component';
+import { EntityResolverService } from '../../../../../common/services/entity-resolver.service';
+import { of } from 'rxjs';
 
 describe('Composer Supermind Popup', () => {
   let comp: ComposerSupermindComponent;
@@ -49,6 +43,10 @@ describe('Composer Supermind Popup', () => {
     present: { toPromise: () => {} },
   });
 
+  const apiMock = new (function() {
+    this.get = jasmine.createSpy('get');
+  })();
+
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -71,7 +69,7 @@ describe('Composer Supermind Popup', () => {
           },
           {
             provide: ApiService,
-            useValue: MockService(ApiService),
+            useValue: apiMock,
           },
           //   {
           //     provide: Client,
@@ -84,7 +82,11 @@ describe('Composer Supermind Popup', () => {
           //   {
           //     provide: Session,
           //     useValue: MockService(Session),
-          //   }
+          //   },
+          {
+            provide: EntityResolverService,
+            useValue: MockService(EntityResolverService),
+          },
         ],
       }).compileComponents();
     })
@@ -93,6 +95,27 @@ describe('Composer Supermind Popup', () => {
   beforeEach(done => {
     fixture = TestBed.createComponent(ComposerSupermindComponent);
     comp = fixture.componentInstance;
+
+    (comp as any).mindsConfig.get.and.returnValue({
+      min_thresholds: {
+        min_cash: 10,
+        min_offchain_tokens: 1,
+      },
+    });
+
+    (comp as any).entityResolverService.get$.and.returnValue(
+      of({
+        supermind_settings: {
+          min_cash: 10,
+          min_offchain_tokens: 1,
+        },
+        merchant: {},
+      })
+    );
+
+    apiMock.get.calls.reset();
+    apiMock.get.and.returnValue([]);
+
     fixture.detectChanges();
 
     if (fixture.isStable()) {
@@ -128,13 +151,13 @@ describe('Composer Supermind Popup', () => {
     comp.formGroup.controls.termsAccepted.setValue(true);
     comp.formGroup.controls.username.setValue('minds');
     fixture.detectChanges();
-
     expect(getSaveBtn().disabled).toBeFalse();
   });
 
   it('should update composer supermindRequest$ service on save', () => {
     comp.formGroup.controls.termsAccepted.setValue(true);
     comp.formGroup.controls.username.setValue('minds');
+    // comp.formGroup.controls.username.markAsTouched({ onlySelf: true });
     fixture.detectChanges();
 
     getSaveBtn().onAction.next(new MouseEvent('click'));