Merge branch 'feature/IO-1828-Front-End-Package-Updates' into test-beta

client/src/App/App.jsx

@@ -17,7 +17,7 @@ import TechPageContainer from "../pages/tech/tech.page.container";
 import {setOnline} from "../redux/application/application.actions";
 import {selectOnline} from "../redux/application/application.selectors";
 import {checkUserSession} from "../redux/user/user.actions";
-import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors";
+import {selectBodyshop, selectCurrentEula, selectCurrentUser,} from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
 import handleBeta from "../utils/betaHandler";
@@ -37,13 +37,14 @@ const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
     online: selectOnline,
     bodyshop: selectBodyshop,
+    currentEula: selectCurrentEula
 });
 const mapDispatchToProps = (dispatch) => ({
     checkUserSession: () => dispatch(checkUserSession()),
     setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({bodyshop, checkUserSession, currentUser, online, setOnline}) {
+export function App({bodyshop, checkUserSession, currentUser, online, setOnline, currentEula}) {
     const client = useSplitClient().client;
     const [listenersAdded, setListenersAdded] = useState(false)
     const {t} = useTranslation();
@@ -122,7 +123,7 @@ export function App({bodyshop, checkUserSession, currentUser, online, setOnline}
             />
         );
 
-    if (!currentUser.eulaIsAccepted) {
+    if (currentEula && !currentUser.eulaIsAccepted) {
         return <Eula/>
     }
 

client/src/components/eula/eula.component.jsx

@@ -26,9 +26,15 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
         const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
         if (bottom && !hasEverScrolledToBottom) {
             setHasEverScrolledToBottom(true);
+        } else if (e.target.scrollHeight <= e.target.clientHeight && !hasEverScrolledToBottom) {
+            setHasEverScrolledToBottom(true);
         }
     };
 
+    useEffect(() => {
+        handleScroll({ target: markdownCardRef.current });
+    }, []);
+
     const handleChange = useCallback(() => {
         form.validateFields({ validateOnly: true })
             .then(() => setFormReady(hasEverScrolledToBottom))
@@ -93,26 +99,26 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
                 )}
                 closable={false}
             >
-                <Space direction='vertical'>
                     <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
                         <div id='markdowndiv' className='eula-markdown-div'>
                             <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')} />
                         </div>
                     </Card>
+
                     <EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t} />
+
                     {!hasEverScrolledToBottom && (
                         <Card className='eula-never-scrolled' type='inner'>
                             <h3>{t('eula.content.never_scrolled')}</h3>
                         </Card>
                     )}
-                </Space>
             </Modal>
         </>
     )
 }
 
 const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
-    <Card type='inner' title={t('eula.titles.upper_card')}>
+    <Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
         <Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
             <Row gutter={24}>
                 <Col span={12}>