Feat/k UI 1136/kurs alert

i18n/messages.en.js

@@ -34,6 +34,7 @@ module.exports = {
     skip_to_main_content: 'Skip to main content',
     back_to_top_label: 'To page top',
   },
+  bankIdAlertText: `Please note that <a href="https://intra.kth.se/en/utbildning/tentamen-och-schema/lasarsindelning/lasarsindelning-1.1201135" class="external-link" target="_blank" rel="noopener noreferrer">Students not located in Sweden may have problems attending a course at KTH.</a> <br/> You could meet obstacles if you're required to pay fees or if you do not have a Swedish Mobile BankID. `,
   breadCrumbLabels: {
     breadcrumbs: 'Breadcrumbs',
     university: 'KTH',

i18n/messages.se.js

@@ -35,6 +35,8 @@ module.exports = {
     skip_to_main_content: 'Hoppa till huvudinnehållet',
     back_to_top_label: 'Till sidans topp',
   },
+  bankIdAlertText:
+    'Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.',
   breadCrumbLabels: {
     breadcrumbs: 'Brödsmulor',
     university: 'KTH',

public/css/kursinfo-web.scss

@@ -261,6 +261,12 @@ main {
   align-items: center;
 }
 
+.bankIdAlert {
+  margin: 1rem 0 0 0;
+  p {
+    font-family: 'Open Sans', Arial, 'Helvetica Neue', helvetica, sans-serif;
+  }
+}
 #semesterButtonMenue,
 #roundDropdownMenu {
   & > .button-clean {

public/js/app/components/BankIdAlert.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Alert } from 'reactstrap'
+
+const BankIdAlert = ({ tutoringForm, fundingType, contextLang, roundSpecified, translation }) => {
+  const distanceCourse = tutoringForm === 'DST'
+
+  const standaloneCourse = fundingType === 'LL'
+
+  // Svenska sidan + fristående kurser som ges på distans
+  const case1 = contextLang === 'sv' && distanceCourse && standaloneCourse && roundSpecified
+
+  // Engelska sidan + fristående kurser
+  const case2 = contextLang === 'en' && standaloneCourse && roundSpecified
+
+  const showAlert = case1 || case2
+
+  return (
+    showAlert && (
+      <section className="bankIdAlert">
+        <Alert color="info">
+          <p dangerouslySetInnerHTML={{ __html: translation.bankIdAlertText }}></p>
+        </Alert>
+      </section>
+    )
+  )
+}
+
+export default BankIdAlert

public/js/app/components/__tests__/BankIdAlert.test.js

@@ -0,0 +1,154 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { WebContextProvider } from '../../context/WebContext'
+import i18n from '../../../../../i18n'
+
+import BankIdAlert from '../BankIdAlert'
+
+const context = { browserConfig: {} }
+const TRANSLATION_ENGLISH_INDEX = 0
+const TRANSLATION_SWEDISH_INDEX = 1
+
+describe('Comoponent <BankIdAlert>', () => {
+  test('renders a BankIdAlert in english with appropriate inputs', () => {
+    const translation = i18n.messages[TRANSLATION_ENGLISH_INDEX]
+
+    const propsWithRoundSelected = {
+      tutoringForm: 'DST',
+      fundingType: 'LL',
+      contextLang: 'en',
+      roundSpecified: true,
+      translation: translation,
+    }
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithRoundSelected} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.getByText(
+      new RegExp(
+        `You could meet obstacles if you're required to pay fees or if you do not have a Swedish Mobile BankID.`,
+        'i'
+      )
+    )
+    expect(alert).toBeInTheDocument()
+
+    const link = screen.getByRole('link', {
+      name: 'Students not located in Sweden may have problems attending a course at KTH.',
+    })
+    expect(link).toBeInTheDocument()
+  })
+
+  test('renders BankIdAlert in swedish with appropriate inputs', () => {
+    const translation = i18n.messages[TRANSLATION_SWEDISH_INDEX]
+
+    const propsWithRoundSelected = {
+      tutoringForm: 'DST',
+      fundingType: 'LL',
+      contextLang: 'sv',
+      roundSpecified: true,
+      translation: translation,
+    }
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithRoundSelected} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.getByText(
+      `Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.`
+    )
+    expect(alert).toBeInTheDocument()
+  })
+
+  test('does not render BankIdAlert for a Swedish non-distance course', () => {
+    const translation = i18n.messages[TRANSLATION_SWEDISH_INDEX]
+
+    const propsWithRoundSelected = {
+      tutoringForm: 'NML',
+      fundingType: 'LL',
+      contextLang: 'sv',
+      roundSpecified: true,
+      translation: translation,
+    }
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithRoundSelected} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.queryByText(
+      `Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.`
+    )
+    expect(alert).not.toBeInTheDocument()
+  })
+
+  test('does not render BankIdAlert without roundSpecified', () => {
+    const translation = i18n.messages[TRANSLATION_SWEDISH_INDEX]
+
+    const propsWithoutRoundSelected = {
+      tutoringForm: 'NML',
+      fundingType: 'LL',
+      contextLang: 'sv',
+      roundSpecified: false,
+      translation: translation,
+    }
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithoutRoundSelected} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.queryByText(
+      `Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.`
+    )
+    expect(alert).not.toBeInTheDocument()
+  })
+
+  test('does not render BankIdAlert with non LL fundingType', () => {
+    const translation = i18n.messages[TRANSLATION_SWEDISH_INDEX]
+
+    const propsWithWrongFundingType = {
+      tutoringForm: 'DST',
+      fundingType: 'VV',
+      contextLang: 'sv',
+      roundSpecified: true,
+      translation: translation,
+    }
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithWrongFundingType} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.queryByText(
+      `Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.`
+    )
+    expect(alert).not.toBeInTheDocument()
+  })
+  test('does not render BankIdAlert without contextLang', () => {
+    const translation = i18n.messages[TRANSLATION_SWEDISH_INDEX]
+
+    const propsWithoutUserLang = {
+      tutoringForm: 'DST',
+      fundingType: 'LL',
+      contextLang: undefined,
+      roundSpecified: true,
+      translation: translation,
+    }
+
+    render(
+      <WebContextProvider configIn={context}>
+        <BankIdAlert {...propsWithoutUserLang} />
+      </WebContextProvider>
+    )
+
+    const alert = screen.queryByText(
+      `Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.`
+    )
+    expect(alert).not.toBeInTheDocument()
+  })
+})

public/js/app/pages/CoursePage.jsx

@@ -15,6 +15,7 @@ import DropdownSemesters from '../components/DropdownSemesters'
 import InfoModal from '../components/InfoModal'
 import SideMenu from '../components/SideMenu'
 import { useWebContext } from '../context/WebContext'
+import BankIdAlert from '../components/BankIdAlert'
 
 const aboutCourseStr = (translate, courseCode = '') => `${translate.site_name} ${courseCode}`
 
@@ -64,6 +65,8 @@ function CoursePage() {
     showRoundData,
     syllabusInfoFade,
     useStartSemesterFromQuery,
+    lang,
+    roundSelectedIndex,
   } = context
   // * * //
   const hasOnlyOneRound = activeSemester?.length > 0 && courseData.roundList[activeSemester].length === 1
@@ -177,6 +180,15 @@ function CoursePage() {
               <img className="float-md-start" src={courseImage} alt="" height="auto" width="300px" />
               <div className="paragraphs" dangerouslySetInnerHTML={{ __html: introText }} />
             </Col>
+            {courseData.roundList && (
+              <BankIdAlert
+                tutoringForm={courseData.roundList[activeSemester][roundSelectedIndex].round_tutoring_form}
+                fundingType={courseData.roundList[activeSemester][roundSelectedIndex].round_funding_type}
+                contextLang={lang}
+                roundSpecified={activeSemesters.length > 0 && hasToShowRoundsData}
+                translation={translation}
+              />
+            )}
           </section>
           <Row id="columnContainer" key="columnContainer">
             <Col id="leftContainer" key="leftContainer">