fix: close and exit buttons

.env

@@ -25,6 +25,7 @@ FAVICON_URL=''
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
 ALGOLIA_APP_ID=''

.env.development

@@ -26,6 +26,7 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER='true'
 ENABLE_SKILLS_BUILDER_PROFILE=''
 ALGOLIA_APP_ID=''

src/index.jsx

@@ -58,6 +58,7 @@ initialize({
         ALGOLIA_JOBS_INDEX_NAME: process.env.ALGOLIA_JOBS_INDEX_NAME || null,
         ALGOLIA_PRODUCT_INDEX_NAME: process.env.ALGOLIA_PRODUCT_INDEX_NAME || null,
         ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || null,
+        MARKETING_SITE_SEARCH_URL: process.env.SEARCH_CATALOG_URL || null,
       }, 'App loadConfig override handler');
     },
   },

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useContext } from 'react';
 import {
-  Button, Container, Stepper, ModalDialog, Form,
+  Button, Container, Stepper, ModalDialog, Form, Hyperlink,
 } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useHistory } from 'react-router';
 import {
   STEP1, STEP2,
 } from '../data/constants';
@@ -23,12 +23,6 @@ const SkillsBuilderModal = () => {
   const { currentGoal, currentJobTitle, careerInterests } = state;
   const [currentStep, setCurrentStep] = useState(STEP1);
 
-  const history = useHistory();
-
-  const onCloseHandle = () => {
-    history.goBack();
-  };
-
   const sendActionButtonEvent = (eventSuffix) => {
     sendTrackEvent(
       `edx.skills_builder.${eventSuffix}`,
@@ -50,11 +44,10 @@ const SkillsBuilderModal = () => {
   };
   const exitButtonHandle = () => {
     sendActionButtonEvent('exit');
-    onCloseHandle();
   };
   const closeButtonHandle = () => {
     sendActionButtonEvent('close');
-    onCloseHandle();
+    window.location.href = getConfig().MARKETING_SITE_SEARCH_URL;
   };
 
   return (
@@ -93,10 +86,6 @@ const SkillsBuilderModal = () => {
 
         <ModalDialog.Footer>
           <Stepper.ActionRow eventKey={STEP1}>
-            <Button variant="outline-primary" onClick={onCloseHandle}>
-              {formatMessage(messages.goBackButton)}
-            </Button>
-            <Stepper.ActionRow.Spacer />
             <Button
               onClick={nextStepHandle}
               disabled={careerInterests.length === 0}
@@ -105,16 +94,15 @@ const SkillsBuilderModal = () => {
             </Button>
           </Stepper.ActionRow>
           <Stepper.ActionRow eventKey={STEP2}>
-            <Button
-              variant="outline-primary"
-              onClick={() => setCurrentStep(STEP1)}
-            >
+            <Button variant="outline-primary" onClick={() => setCurrentStep(STEP1)}>
               {formatMessage(messages.goBackButton)}
             </Button>
             <Stepper.ActionRow.Spacer />
-            <Button onClick={exitButtonHandle}>
-              {formatMessage(messages.exitButton)}
-            </Button>
+            <Hyperlink destination={getConfig().MARKETING_SITE_SEARCH_URL}>
+              <Button onClick={exitButtonHandle}>
+                {formatMessage(messages.exitButton)}
+              </Button>
+            </Hyperlink>
           </Stepper.ActionRow>
         </ModalDialog.Footer>
       </ModalDialog>