From 8bf3aee1ec7a31421242f3fb3caa39c4c67a0aba Mon Sep 17 00:00:00 2001 From: Marco Amadori Date: Fri, 3 Apr 2020 16:10:59 +0200 Subject: [PATCH] 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 --- interaction/app/default/src/app/app.component.ts | 2 +- interaction/lib/core/src/lib/store/models.interface.ts | 2 ++ .../lib/core/src/lib/store/reducers/widget.reducer.ts | 1 + interaction/lib/layout/package.json | 1 + .../custom-validators/phone-validator.ts | 10 ++++++++++ .../data-collection/data-collection.component.html | 1 + .../src/lib/data-collection/form/form.component.ts | 9 ++++++++- 7 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 interaction/lib/layout/src/lib/data-collection/custom-validators/phone-validator.ts diff --git a/interaction/app/default/src/app/app.component.ts b/interaction/app/default/src/app/app.component.ts index 174e0791..7b588bdb 100644 --- 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 index 6b623770..a532a3fa 100644 --- 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 index 7378216b..a27d316e 100644 --- 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 index 1e85b075..5b9fd03c 100644 --- 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 new file mode 100644 index 00000000..e60bebc0 --- /dev/null +++ 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/interaction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html b/interaction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html index 50768977..7cac771a 100644 --- a/interaction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html +++ b/interaction/lib/layout/src/lib/data-collection/data-collection/data-collection.component.html @@ -1,5 +1,6 @@
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 index 93256c6f..8ae031c1 100644 --- 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);