fix(cbn): parsing phone number with language code

the language code should be replaced with country as soon as we figure out how to detect it
vivocha · Apr 3, 2020 · 8bf3aee · 8bf3aee
1 parent 6deeb8b
commit 8bf3aee
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 2 deletions.
diff --git a/interaction/app/default/src/app/app.component.ts b/interaction/app/default/src/app/app.component.ts
@@ -99,7 +99,7 @@ export class AppComponent implements OnInit {
     this.appState$ = this.interactionService.getState();
     this.interactionService.init().subscribe(context => this.setInitialDimensions(context));
     this.interactionService.events().subscribe(evt => this.listenForEvents(evt));
-    this.interactionService.getState().subscribe( state => console.log(JSON.stringify(state, null, 2)));
+    //this.interactionService.getState().subscribe( state => console.log(JSON.stringify(state, null, 2)));
   }
   acceptAgentRequest(requestId) {
     this.interactionService.acceptAgentRequest(requestId);

diff --git a/interaction/lib/core/src/lib/store/models.interface.ts b/interaction/lib/core/src/lib/store/models.interface.ts
@@ -29,6 +29,7 @@ export interface EventsState {
 }
 
 export interface  ContextState {
+  language?: string;
   loaded: boolean;
   cbnMode?: boolean;
   cbnState?: CbnStatus;
@@ -209,6 +210,7 @@ export interface UiState {
   isSendAreaVisible: boolean;
   isUploading: boolean;
   isWriting: boolean;
+  language: string;
   notRead: number;
   offeringMedia: string;
   selectedDataCollection: any;

diff --git a/interaction/lib/core/src/lib/store/reducers/widget.reducer.ts b/interaction/lib/core/src/lib/store/reducers/widget.reducer.ts
@@ -426,6 +426,7 @@ export const getUiStateRedux = (
       isSendAreaVisible: isChatBoxVisible,
       isUploading: widgetState.context.isUploading,
       isWriting:  widgetState.chat && widgetState.chat.isWriting && !isClosed,
+      language: widgetState.context.language,
       notRead: (widgetState.chat) ? widgetState.chat.notRead : 0,
       offeringMedia: widgetState.protocol.offeringMedia,
       selectedDataCollection: dataCollectionState.selectedItem,

diff --git a/interaction/lib/layout/package.json b/interaction/lib/layout/package.json
@@ -28,6 +28,7 @@
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@ngx-translate/core": "^11.0.1",
     "@vivocha/public-entities": "^7.0.11",
+    "libphonenumber-js": "^1.7.49",
     "autolinker": "^1.6.2",
     "rxjs": "~6.4.0",
     "zone.js": "~0.9.1"

diff --git a/interaction/lib/layout/src/lib/data-collection/custom-validators/phone-validator.ts b/interaction/lib/layout/src/lib/data-collection/custom-validators/phone-validator.ts
@@ -0,0 +1,10 @@
+import {AbstractControl, ValidatorFn} from '@angular/forms';
+import {parsePhoneNumberFromString} from 'libphonenumber-js';
+
+export function phoneNumberValidator(country): ValidatorFn {
+  return  (control: AbstractControl): {[key: string]: any} | null => {
+    const phoneNumber = control.value;
+    const phone = parsePhoneNumberFromString(phoneNumber, country.toUpperCase());
+    return (!phone || (phone && !phone.isValid())) ? { 'invalidPhoneNumber': { value: control.value }} : null;
+  }
+}
diff --git a/...raction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html b/...raction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html
@@ -1,5 +1,6 @@
 <div *ngIf="!showFeedback">
 <vvc-form [dc]="context.selectedDataCollection.dc"
+          [country]="context.language"
           (submit)="submitData($event)"></vvc-form>
 </div>
 <div *ngIf="showFeedback" [innerHtml]="'STRINGS.SURVEY.FEEDBACK' | translate | vvcSanitize:'html' ">

diff --git a/interaction/lib/layout/src/lib/data-collection/form/form.component.ts b/interaction/lib/layout/src/lib/data-collection/form/form.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy}
 import {FormGroup, FormBuilder, Validators} from '@angular/forms';
 
 import {DataCollectionField, MessageMetaField} from '@vivocha/public-entities/dist/data_collection';
+import {phoneNumberValidator} from '../custom-validators/phone-validator';
 
 @Component({
   selector: 'vvc-form',
@@ -17,6 +18,7 @@ export class FormComponent implements OnInit {
   form: FormGroup;
   hasRequired = false;
   @Input() dc;
+  @Input() country;
   @Input() readMode = false;
   @Output() submit = new EventEmitter();
 
@@ -61,7 +63,12 @@ export class FormComponent implements OnInit {
         validators.push(Validators.pattern(validation));
       }
       if (elem.format === 'phonenum' && !elem.validation) {
-        validators.push(Validators.pattern('^\\s*\\+\\s*(?:\\d\\s*){7,}$'));
+        if (this.country) {
+          validators.push(phoneNumberValidator(this.country));
+        }
+        else {
+          validators.push(Validators.pattern('^\\s*\\+\\s*(?:\\d\\s*){7,}$'));
+        }
       }
       if (elem.format === 'email') {
         validators.push(Validators.email);