add tel/whatsapp as default fields for desk/user profile

[vdias38]

should allow to add default behavior to call/send msg could use convention for field label

[danconte72]

link do whatsapp became easy as https://api.whatsapp.com/send?phone=5549999854564&text=ola

[danconte72]

we should ask ddd for user

[vdias38]

@danconte72 can you explain how should it works and implementation flow.

Some previous insights https://github.com/meumobi/infomobi-v2/issues/224

[danconte72]

Links

• https://angularfirebase.com/snippets/angular-phone-number-validation-and-e164-formatting/ angular phone validation example
• lib to deal with phone number https://www.npmjs.com/package/ngx-intl-tel-input - it use a custom component with flags inside, too many options for our scenario demo it use google-libphonenumber to validate numbers
• phone validator lib https://github.com/ruimarinho/google-libphonenumber demo
• use google phone number on angular https://stackoverflow.com/questions/49530023/use-google-libphonenumber-in-angular-reactive-forms-validator - easy to use and it works

[danconte72]

how should it works

• On user/desk profile interface add an optional 'phone' field.
• On user/desk profile form add a 'phone' field
  • should ask for a phone without area code, without country code
  • If the phone field is not blank phoneNumber = '+55${phone}'
  • validate phoneNumber using google-libphonenumber validNumber = phoneNumberUtil.isValidNumber(phoneNumber);
  • only allows to save if the number is valid, save it with country code
  • On user/desk profile details if phone is not empty
  • add beside the number two icon buttons
  • logo-whatsapp
    • link to send message to whatsapp.
    • stripe + signal to use whatsapp api
    • link = 'https://api.whatsapp.com/send?phone=${phone}'
  • call
    • link to call the phone
    • link = 'tel:+${phone}'

implementation flow

1. update profiles interface, add field on forms without validation
2. create a helper to validate phone numbers using google-libphonenumber
3. add validation on profile forms
4. show phone field on profile details
5. 1 add call function on profile details
6. 2 add whatsapp function on profile details

[vdias38]

• Detail implementation of validation and helpers
• Check how it should work for french number (0643293608 is transformed to +33643293608 with international code, leading 0 is dropped)
• Should have a localized mask to show user how to fill field, international code list and ddd