feat: param based cta and redirection (#984)

Register CTA label and authn redirection would be based on query params.

VAN-1535

src/data/constants.js

@@ -37,5 +37,5 @@ 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', 'host'];
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
 export const REDIRECT = 'redirect';

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -210,7 +210,13 @@ const ProgressiveProfiling = (props) => {
         </title>
       </Helmet>
       <ProgressiveProfilingPageModal isOpen={showModal} redirectUrl={registrationResult.redirectUrl} />
-      {props.shouldRedirect ? (
+      {queryParams?.next && (
+        <RedirectLogistration
+          success
+          redirectUrl={queryParams.next}
+        />
+      )}
+      {props.shouldRedirect && (
         <RedirectLogistration
           success
           redirectUrl={registrationResult.redirectUrl}
@@ -218,7 +224,7 @@ const ProgressiveProfiling = (props) => {
           educationLevel={values?.level_of_education}
           userId={authenticatedUser?.userId}
         />
-      ) : null}
+      )}
       <div className="mw-xs m-4 pp-page-content">
         <div>
           <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>

src/progressive-profiling/tests/ProgressiveProfiling.test.jsx

@@ -331,5 +331,28 @@ describe('ProgressiveProfilingTests', () => {
       await getProgressiveProfilingPage();
       expect(window.location.href).toBe(DASHBOARD_URL);
     });
+
+    it('should redirect to provided redirect url', async () => {
+      const redirectUrl = 'https://redirect-test.com';
+      delete window.location;
+      window.location = {
+        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+        href: getConfig().BASE_URL,
+        search: `?variant=${EMBEDDED}&host=http://localhost/host-website&next=${redirectUrl}`,
+      };
+      props = {};
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+          optionalFields,
+        },
+      });
+
+      const progressiveProfilingPage = await getProgressiveProfilingPage();
+      progressiveProfilingPage.find('button.btn-brand').simulate('click');
+      expect(window.location.href).toBe(redirectUrl);
+    });
   });
 });

src/register/RegistrationPage.jsx

@@ -88,7 +88,7 @@ const RegistrationPage = (props) => {
   const countryList = useMemo(() => getCountryList(getLocale()), []);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
   const registrationEmbedded = isHostAvailableInQueryParams();
-  const { host } = queryParams;
+  const { cta, host } = queryParams;
   const tpaHint = useMemo(() => getTpaHint(), []);
   const flags = {
     showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,
@@ -109,6 +109,7 @@ const RegistrationPage = (props) => {
     providers, currentProvider, secondaryProviders, finishAuthUrl,
   } = thirdPartyAuthContext;
   const platformName = getConfig().SITE_NAME;
+  const buttonLabel = cta ? formatMessage(messages['create.account.cta.button'], { label: cta }) : formatMessage(messages['create.account.for.free.button']);
 
   /**
    * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.
@@ -635,7 +636,7 @@ const RegistrationPage = (props) => {
                 className="register-button mt-4 mb-4"
                 state={submitState}
                 labels={{
-                  default: formatMessage(messages['create.account.for.free.button']),
+                  default: buttonLabel,
                   pending: '',
                 }}
                 onClick={handleSubmit}

src/register/messages.jsx

@@ -69,6 +69,11 @@ const messages = defineMessages({
     defaultMessage: 'Or register with:',
     description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
   },
+  'create.account.cta.button': {
+    id: 'create.account.cta.button',
+    defaultMessage: '{label}',
+    description: 'Label text for registration form submission button for those users who are landing through redirections',
+  },
   // Institution login
   'register.institution.login.button': {
     id: 'register.institution.login.button',

src/register/tests/RegistrationPage.test.jsx

@@ -619,6 +619,14 @@ describe('RegistrationPage', () => {
       });
     });
 
+    it('should show button label based on cta query params value', () => {
+      const buttonLabel = 'Register';
+      delete window.location;
+      window.location = { href: getConfig().BASE_URL, search: `?cta=${buttonLabel}` };
+      const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
+      expect(registrationPage.find('button[type="submit"] span').first().text()).toEqual(buttonLabel);
+    });
+
     it('should display no password field when current provider is present', () => {
       store = mockStore({
         ...initialState,