feat: check how many users update country on registration form after …

…we auto populate it with IP (#1127)

Description: Check how many users update country on registration form after we auto populate it with IP.
VAN-1793

src/register/RegistrationPage.jsx

@@ -70,6 +70,7 @@ const RegistrationPage = (props) => {
     userPipelineDataLoaded,
     submitState,
     validations,
+    IPBasedCountryCode,
   } = useSelector(state => state.register);
 
   const {
@@ -177,8 +178,18 @@ const RegistrationPage = (props) => {
 
       // This is used by the "User Retention Rate Event" on GTM
       setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
+
+      // This event will be used to track the number of users who have
+      // changed country field and selected the country other than
+      // IP based country.
+      if (configurableFormFields.country?.countryCode !== IPBasedCountryCode) {
+        sendTrackEvent('edx.bi.user.auto-populatedcountry.changed', {
+          originalCountry: IPBasedCountryCode,
+          selectedCountry: configurableFormFields.country.countryCode,
+        });
+      }
     }
-  }, [registrationResult]);
+  }, [registrationResult, IPBasedCountryCode, configurableFormFields.country]);
 
   const handleOnChange = (event) => {
     const { name } = event.target;

src/register/RegistrationPage.test.jsx

@@ -519,6 +519,38 @@ describe('RegistrationPage', () => {
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {});
     });
 
+    it('should send track event when user changed the country field', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          IPBasedCountryCode: 'AL',
+          registrationFormData: {
+            ...registrationFormData,
+            configurableFormFields: {
+              marketingEmailsOptIn: true,
+              country: {
+                countryCode: 'PK',
+                displayValue: 'Pakistan',
+              },
+            },
+          },
+          registrationResult: {
+            success: true,
+            redirectUrl: 'https://test.com/testing-dashboard/',
+          },
+        },
+      });
+
+      delete window.location;
+      window.location = { href: getConfig().BASE_URL };
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.auto-populatedcountry.changed', {
+        originalCountry: 'AL',
+        selectedCountry: 'PK',
+      });
+    });
+
     it('should populate form with pipeline user details', () => {
       store = mockStore({
         ...initialState,

src/register/data/reducers.js

@@ -15,6 +15,7 @@ export const storeName = 'register';
 
 export const defaultState = {
   backendCountryCode: '',
+  IPBasedCountryCode: '',
   registrationError: {},
   registrationResult: {},
   registrationFormData: {
@@ -49,6 +50,7 @@ const reducer = (state = defaultState, action = {}) => {
     case BACKUP_REGISTRATION_DATA.BEGIN:
       return {
         ...defaultState,
+        IPBasedCountryCode: state.IPBasedCountryCode,
         usernameSuggestions: state.usernameSuggestions,
         registrationFormData: { ...action.payload },
         userPipelineDataLoaded: state.userPipelineDataLoaded,
@@ -108,6 +110,7 @@ const reducer = (state = defaultState, action = {}) => {
         return {
           ...state,
           backendCountryCode: countryCode,
+          IPBasedCountryCode: countryCode,
         };
       }
       return state;

src/register/data/tests/reducers.test.js

@@ -15,6 +15,7 @@ import reducer from '../reducers';
 describe('Registration Reducer Tests', () => {
   const defaultState = {
     backendCountryCode: '',
+    IPBasedCountryCode: '',
     registrationError: {},
     registrationResult: {},
     registrationFormData: {
@@ -246,6 +247,7 @@ describe('Registration Reducer Tests', () => {
       {
         ...defaultState,
         backendCountryCode: countryCode,
+        IPBasedCountryCode: countryCode,
       },
     );
   });