chore(lint): fix lint issues and add redirectWithDelay

Author: ssurendrannair

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-
 const LargeLayout = ({ fullName = null }) => {
   const { formatMessage } = useIntl();
 
@@ -20,8 +19,7 @@ const LargeLayout = ({ fullName = null }) => {
   const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
   const enterpriseName = enterpriseBranding?.enterpriseName || null;
 
-  const enterpriseWelcomeHtml =
-    enterpriseBranding?.enterpriseBrandedWelcomeString
+  const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
     || enterpriseBranding?.platformWelcomeString
     || '';
 
@@ -103,4 +101,4 @@ LargeLayout.propTypes = {
   fullName: PropTypes.string,
 };
 
-export default LargeLayout;
+export default LargeLayout;

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+
 import messages from './messages';
 
-const MediumLayout = ({ fullName = null }) => {
+const MediumLayout = () => {
   const { formatMessage } = useIntl();
 
   const enterpriseBranding = useSelector(
@@ -16,8 +17,7 @@ const MediumLayout = ({ fullName = null }) => {
 
   const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
   const enterpriseName = enterpriseBranding?.enterpriseName || null;
-  const enterpriseWelcomeHtml =
-    enterpriseBranding?.enterpriseBrandedWelcomeString
+  const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
     || enterpriseBranding?.platformWelcomeString
     || '';
 
@@ -45,11 +45,11 @@ const MediumLayout = ({ fullName = null }) => {
                 </div>
               )}
 
-               <div className="auth-hero-slash" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
-                <line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
-              </svg>
-            </div>
+              <div className="auth-hero-slash" aria-hidden="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
+                  <line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
+                </svg>
+              </div>
 
               <div className="auth-hero-heading">
                 <div className="auth-hero-heading-line text-white">
@@ -81,12 +81,5 @@ const MediumLayout = ({ fullName = null }) => {
   );
 };
 
-MediumLayout.propTypes = {
-  fullName: PropTypes.string,
-};
-
-MediumLayout.defaultProps = {
-  fullName: null,
-};
 
-export default MediumLayout;
+export default MediumLayout;

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+
 import messages from './messages';
 
-const SmallLayout = ({ fullName = null }) => {
+const SmallLayout = () => {
   const { formatMessage } = useIntl();
 
   const enterpriseBranding = useSelector(
@@ -16,8 +17,7 @@ const SmallLayout = ({ fullName = null }) => {
 
   const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
   const enterpriseName = enterpriseBranding?.enterpriseName || null;
-  const enterpriseWelcomeHtml =
-    enterpriseBranding?.enterpriseBrandedWelcomeString
+  const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
     || enterpriseBranding?.platformWelcomeString
     || '';
 
@@ -44,10 +44,10 @@ const SmallLayout = ({ fullName = null }) => {
           )}
 
           <div className="auth-hero-slash" aria-hidden="true">
-              <svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
-                <line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
-              </svg>
-            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
+              <line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
+            </svg>
+          </div>
 
           <div className="auth-hero-heading">
             <div className="auth-hero-heading-line text-white">
@@ -70,12 +70,5 @@ const SmallLayout = ({ fullName = null }) => {
   );
 };
 
-SmallLayout.propTypes = {
-  fullName: PropTypes.string,
-};
-
-SmallLayout.defaultProps = {
-  fullName: null,
-};
 
-export default SmallLayout;
+export default SmallLayout;

src/data/constants.js

@@ -9,7 +9,7 @@ export const RECOMMENDATIONS = '/recommendations';
 export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
 export const PAGE_NOT_FOUND = '/notfound';
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
-export const APP_NAME = 'authn'; 
+export const APP_NAME = 'authn';
 
 // Constants
 export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];

src/data/utils/dataUtils.js

@@ -114,3 +114,13 @@ export const addEnterpriseSlugToNext = (queryParams, enterpriseSlug) => {
 
   return updatedParams;
 };
+
+export const redirectWithDelay = (url, delay = 1000) => {
+  if (!url) {
+    return;
+  }
+
+  window.setTimeout(() => {
+    window.location.assign(url);
+  }, delay);
+};

src/login/LoginPage.jsx

@@ -44,7 +44,7 @@ const LoginPage = ({
 }) => {
   const dispatch = useDispatch();
   const backupFormState = useCallback((data) => dispatch(backupLoginFormBegin(data)), [dispatch]);
-   const getTPADataFromBackend = useCallback(
+  const getTPADataFromBackend = useCallback(
     (urlParams) => dispatch(getThirdPartyAuthContext(urlParams)),
     [dispatch],
   );

src/logistration/Logistration.jsx

@@ -17,16 +17,16 @@ import { Navigate, useNavigate } from 'react-router-dom';
 import BaseContainer from '../base-container';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
+  thirdPartyAuthContextSelector,
   tpaProvidersSelector,
-  thirdPartyAuthContextSelector
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
 import { backupLoginForm } from '../login/data/actions';
-import LoginComponentSlot from '../plugin-slots/LoginComponentSlot';
+import LoginComponentSlot from '../plugin-slots/MainAppSlot/index';
 import { RegistrationPage } from '../register';
 import { backupRegistrationForm } from '../register/data/actions';
 
@@ -40,22 +40,21 @@ const Logistration = ({
     providers,
     secondaryProviders,
   } = tpaProviders;
-   const thirdPartyAuthContext = useSelector(thirdPartyAuthContextSelector);  
+  const thirdPartyAuthContext = useSelector(thirdPartyAuthContextSelector);
   const { formatMessage } = useIntl();
   const [institutionLogin, setInstitutionLogin] = useState(false);
   const [key, setKey] = useState('');
   const navigate = useNavigate();
   const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
   const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
-const enterpriseBranding = useSelector(
+  const enterpriseBranding = useSelector(
     state => state.commonComponents?.thirdPartyAuthContext?.enterpriseBranding,
   );
- 
+
   const fullName = thirdPartyAuthContext?.pipelineUserDetails?.full_name
     || thirdPartyAuthContext?.pipelineUserDetails?.name
     || null;
 
-
   // Show welcome banner if enterprise branding is available
   const showWelcomeBanner = !!enterpriseBranding;
   useEffect(() => {