From e4d8724d56431900507173e3ba90fab66e232be7 Mon Sep 17 00:00:00 2001
From: izaskun-pena <izaskun.pena@adevinta.com>
Date: Thu, 28 Sep 2023 13:19:18 +0200
Subject: [PATCH] feat(components/molecule/phoneInput): add onPrefixChange prop
 for detecting changes from selected pr

---
 components/molecule/phoneInput/src/index.js   | 13 +++++++++-
 .../molecule/phoneInput/test/index.test.js    | 26 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/components/molecule/phoneInput/src/index.js b/components/molecule/phoneInput/src/index.js
index 6dd03ef1d..6f05a3aab 100644
--- a/components/molecule/phoneInput/src/index.js
+++ b/components/molecule/phoneInput/src/index.js
@@ -14,6 +14,7 @@ import MoleculeInputField from '@s-ui/react-molecule-input-field'
 import {phoneValidationType} from './settings.js'
 
 const BASE_CLASS = 'sui-MoleculePhoneInput'
+const NOOP = () => {}
 
 export {PREFIXES} from './settings.js'
 export default function MoleculePhoneInput({
@@ -28,6 +29,7 @@ export default function MoleculePhoneInput({
   label,
   name,
   onChange,
+  onPrefixChange = NOOP,
   placeholder,
   prefixes = [],
   initialSelectedPrefix = prefixes[0],
@@ -77,6 +79,11 @@ export default function MoleculePhoneInput({
     }
   }, [])
 
+  useEffect(() => {
+    onPrefixChange(selectedPrefix)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedPrefix])
+
   const handlePhoneChange = (e, {value}) => {
     setIsLandLine(selectedPrefix.landlinePrefixs.includes(value[0]))
 
@@ -198,6 +205,7 @@ MoleculePhoneInput.propTypes = {
   }),
   hasError: PropTypes.bool,
   visiblePrefixes: PropTypes.bool,
+
   /** Boolean to decide if helptext should be auto hide */
   autoHideHelpText: PropTypes.bool,
   /** Success message to display when success state  */
@@ -219,5 +227,8 @@ MoleculePhoneInput.propTypes = {
   id: PropTypes.string,
 
   /** Label to set in the molecule field */
-  label: PropTypes.string
+  label: PropTypes.string,
+
+  /** Callback dispatch when selected prefix changes */
+  onPrefixChange: PropTypes.func
 }
diff --git a/components/molecule/phoneInput/test/index.test.js b/components/molecule/phoneInput/test/index.test.js
index ebc236e7d..fd9b25225 100644
--- a/components/molecule/phoneInput/test/index.test.js
+++ b/components/molecule/phoneInput/test/index.test.js
@@ -241,6 +241,32 @@ describe('MoleculePhoneInput', () => {
     expect(phonePrefix).to.be.equal(PREFIXES[0].countryCode)
   })
 
+  it('should call onPrefixChange when prefix changes value', () => {
+    const phoneValue = '666'
+    let phonePrefix = ''
+    // Given
+    const props = {
+      value: phoneValue,
+      prefixes: PREFIXES,
+      initialSelectedPrefix: PREFIXES[0],
+      onChange: () => {},
+      onPrefixChange: prefix => (phonePrefix = prefix)
+    }
+
+    const {container} = setup(props)
+    const prefix = container.querySelector(
+      'div.sui-MoleculePhoneInput-input-prefix'
+    )
+    // When
+    prefix.click()
+    const options = container.querySelectorAll('.sui-MoleculeDropdownOption')
+    const option = options[1]
+    option.click()
+
+    // Then
+    expect(phonePrefix).to.be.equal(PREFIXES[1])
+  })
+
   it('should add error class when error', () => {
     // Given
     const props = {