From 2a2c5abc811154e038ca78a0ba727dab68c2e9d8 Mon Sep 17 00:00:00 2001
From: Blue <ahtesham-quraish@users.noreply.github.com>
Date: Thu, 15 Jun 2023 12:29:04 +0500
Subject: [PATCH] fix: redirect user to welcome page  (#939) (#941)

Description
Redirect the user to welcome page after registration, as Authn is embedded in iframe which is located in Hubspot so we call window.postMessage function from Authn which let the Hubspot knows about redirect URL and then reload the welcome page in parent window.

VAN-1474
---
 .../RedirectLogistration.jsx                  | 12 ++++++-
 src/data/constants.js                         |  3 ++
 src/register/RegistrationPage.jsx             |  1 +
 src/register/tests/RegistrationPage.test.jsx  | 35 +++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/common-components/RedirectLogistration.jsx b/src/common-components/RedirectLogistration.jsx
index 862845ca..32c9a3cf 100644
--- a/src/common-components/RedirectLogistration.jsx
+++ b/src/common-components/RedirectLogistration.jsx
@@ -4,7 +4,9 @@ import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
-import { AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS } from '../data/constants';
+import {
+  AUTHN_PROGRESSIVE_PROFILING, DISCOVER_URL, RECOMMENDATIONS, REDIRECT,
+} from '../data/constants';
 import { setCookie } from '../data/utils';
 
 const RedirectLogistration = (props) => {
@@ -17,6 +19,7 @@ const RedirectLogistration = (props) => {
     redirectToRecommendationsPage,
     educationLevel,
     userId,
+    isRegistrationEmbedded,
   } = props;
   let finalRedirectUrl = '';
 
@@ -35,6 +38,11 @@ const RedirectLogistration = (props) => {
     if (redirectToProgressiveProfilingPage) {
       // TODO: Do we still need this cookie?
       setCookie('van-504-returning-user', true);
+
+      if (isRegistrationEmbedded) {
+        window.parent.postMessage({ action: REDIRECT, redirectUrl: `${window.location.origin}${AUTHN_PROGRESSIVE_PROFILING}` }, DISCOVER_URL);
+        return null;
+      }
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
         <Redirect to={{
@@ -79,6 +87,7 @@ RedirectLogistration.defaultProps = {
   optionalFields: {},
   redirectToRecommendationsPage: false,
   userId: null,
+  isRegistrationEmbedded: false,
 };
 
 RedirectLogistration.propTypes = {
@@ -90,6 +99,7 @@ RedirectLogistration.propTypes = {
   optionalFields: PropTypes.shape({}),
   redirectToRecommendationsPage: PropTypes.bool,
   userId: PropTypes.number,
+  isRegistrationEmbedded: PropTypes.bool,
 };
 
 export default RedirectLogistration;
diff --git a/src/data/constants.js b/src/data/constants.js
index ef528d20..9af7c344 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -37,3 +37,6 @@ export const INVALID_NAME_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.
 export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later', 'register_for_free', 'track', 'is_account_recovery', 'variant'];
+
+export const DISCOVER_URL = 'https://discover.edx.org';
+export const REDIRECT = 'redirect';
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 4e7c64e1..ed0583ce 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -520,6 +520,7 @@ const RegistrationPage = (props) => {
           redirectUrl={registrationResult.redirectUrl}
           finishAuthUrl={finishAuthUrl}
           optionalFields={optionalFields}
+          isRegistrationEmbedded={isRegistrationEmbedded}
           redirectToProgressiveProfilingPage={
             getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && Object.keys(optionalFields).includes('fields')
           }
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index bce31429..3023a0fb 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -862,6 +862,41 @@ describe('RegistrationPage', () => {
       expect(registrationPage.find(`button#${ssoProvider.id}`).hasClass(`btn-tpa btn-${ssoProvider.id}`)).toEqual(true);
     });
 
+    it('should call the postMessage API when embedded variant is rendered', () => {
+      getLocale.mockImplementation(() => ('en-us'));
+      mergeConfig({
+        ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: true,
+      });
+
+      window.parent.postMessage = jest.fn();
+
+      delete window.location;
+      window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING), search: '?variant=embedded' };
+
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          registrationResult: {
+            success: true,
+          },
+        },
+        commonComponents: {
+          optionalFields: {
+            extended_profile: {},
+            fields: {
+              level_of_education: { name: 'level_of_education', error_message: false },
+            },
+          },
+        },
+      });
+      const progressiveProfilingPage = mount(reduxWrapper(
+        <IntlRegistrationPage {...props} />,
+      ));
+      progressiveProfilingPage.update();
+      expect(window.parent.postMessage).toHaveBeenCalledTimes(2);
+    });
+
     it('should render icon if icon classes are missing in providers', () => {
       ssoProvider.iconClass = null;
       store = mockStore({