feat(mobile): add default country value (#124)

* feat(mobile): add default country value

* feat(readme): update documentation

README.md

@@ -501,7 +501,7 @@ https://user-images.githubusercontent.com/79102959/134945855-52577cab-9b16-4df5-
 | **registerConfig** | | json |
 | required | Define if the phone input is required | boolean | false
 
-Reminder: The isoCode prop that can be sent in the ReactFormBuilder component will define the default country displayed in the phone field.
+Reminder: The isoCode prop that can also be sent in the ReactFormBuilder component will define the default country displayed in the phone field.
 
 Basic phone
 
@@ -513,6 +513,7 @@ Basic phone
  "registerConfig": {
  "required": true
  },
+ "defaultCountry":"GB",
  "placeholder": "Phone",
  "errorMessages": {
  "required": "This field is required"

src/Questions/Phone/__tests__/phone.test.js

@@ -93,6 +93,24 @@ test('phone ES country is displayed', () => {
  expect(countryComponent.value).toBe('FR')
 })
 
+test('default country code is displayed', () => {
+ const newQuestion = { ...question, defaultCountry: 'fr' }
+ const { getByLabelText } = render(
+ <QuestionPhone
+ question={newQuestion}
+ useForm={{
+ errors: {},
+ register: () => {},
+ setValue: jest.fn()
+ }}
+ />
+ )
+ const countryComponent = getByLabelText('Phone number country')
+ expect(countryComponent.value).toBe('FR')
+ fireEvent.change(countryComponent, { target: { value: 'GB' } })
+ expect(countryComponent.value).toBe('GB')
+})
+
 test('pattern error is displayed', () => {
  render(
  <QuestionPhone

src/Questions/Phone/index.js

@@ -9,6 +9,14 @@ import { jsx } from 'theme-ui'
 const QuestionPhone = ({ isMobile, isoCode, question, useForm, ...props }) => {
  const { clearErrors, errors, register, setError, setValue } = useForm
 
+ const getDefaultCountry = () => {
+ if (question?.defaultCountry && question?.defaultCountry !== '')
+ return question?.defaultCountry.toUpperCase()
+
+ if (isoCode) return isoCode.toUpperCase()
+
+ return ''
+ }
  return (
  <React.Fragment>
  <div
@@ -24,7 +32,7 @@ const QuestionPhone = ({ isMobile, isoCode, question, useForm, ...props }) => {
  id={question.name}
  data-testid='question-phone'
  aria-describedby={'error_message_' + question.name}
- defaultCountry={isoCode ? isoCode.toUpperCase() : ''}
+ defaultCountry={getDefaultCountry()}
  register={register}
  setValue={setValue}
  setError={setError}