OPHJOD-1137: Add link to Urataidot

Opetushallitus · Dec 16, 2024 · ebc2174 · ebc2174
1 parent 8b38a97
commit ebc2174
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 8 deletions.
diff --git a/src/components/HelpingToolsContent/HelpingToolLinkItem.tsx b/src/components/HelpingToolsContent/HelpingToolLinkItem.tsx
@@ -10,6 +10,10 @@ export interface HelpingToolProfileLinkItemProps extends HelpingToolLinkItemProp
   profileLink: ProfileLink;
 }
 
+export interface HelpingToolExternalLinkItemProps extends HelpingToolLinkItemProps {
+  href: string;
+}
+
 export const HelpingToolProfileLinkItem = ({ profileLink, icon, title }: HelpingToolProfileLinkItemProps) => {
   return (
     <HelpingToolLinkItem
@@ -23,6 +27,21 @@ export const HelpingToolProfileLinkItem = ({ profileLink, icon, title }: Helping
   );
 };
 
+export const HelpingToolExternalLinkItem = ({ href, icon, title }: HelpingToolExternalLinkItemProps) => {
+  return (
+    <HelpingToolLinkItem
+      /* eslint-disable-next-line react/no-unstable-nested-components */
+      component={({ ...rootProps }) => (
+        <a href={href} {...rootProps} target="_blank" rel="noreferrer">
+          {rootProps.children}
+        </a>
+      )}
+      icon={icon}
+      title={title}
+    />
+  );
+};
+
 interface ComponentProp {
   component: React.ComponentType<{ children: React.ReactNode }>;
 }

diff --git a/src/i18n/fi/translation.json b/src/i18n/fi/translation.json
@@ -439,7 +439,14 @@
       "title": "Kartoita tilanteesi"
     },
     "title": "Kohtaantotyökalu",
-    "tools": "Apuvälineitä",
+    "tools": {
+      "career-skills-self-assessment-tool": "Urataitojen itsearviointi työkalu",
+      "education-history": "Koulutukseni",
+      "free-time-activities": "Vapaa-ajan toimintoni",
+      "something-else": "Muut osaamiseni",
+      "title": "Apuvälineitä",
+      "work-history": "Työpaikkani"
+    },
     "your-opportunities": {
       "card": {
         "action": "Päivitä mahdollisuutesi",

diff --git a/src/routes/Tool/Competences.tsx b/src/routes/Tool/Competences.tsx
@@ -1,6 +1,7 @@
 import { client } from '@/api/client';
 import { components } from '@/api/schema';
 import { HelpingToolProfileLinkItem, HelpingToolsContent, OsaamisSuosittelija } from '@/components';
+import { HelpingToolExternalLinkItem } from '@/components/HelpingToolsContent/HelpingToolLinkItem';
 import { useInitializeFilters } from '@/hooks/useInitializeFilters';
 import { useLoginLink } from '@/hooks/useLoginLink';
 import { useToolStore } from '@/stores/useToolStore';
@@ -9,7 +10,7 @@ import { Accordion, Button, ConfirmDialog } from '@jod/design-system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdLightbulbOutline, MdOutlineSailing, MdOutlineSchool, MdWorkOutline } from 'react-icons/md';
-import { useLoaderData, useOutletContext, useRouteLoaderData } from 'react-router';
+import { useLoaderData, useOutletContext, useParams, useRouteLoaderData } from 'react-router';
 import { CompetenceFilters } from '../Profile/Competences/CompetenceFilters';
 import { FILTERS_ORDER } from '../Profile/Competences/constants';
 import { CompetencesLoaderData } from '../Profile/Competences/loader';
@@ -187,6 +188,7 @@ const Competences = () => {
     i18n: { language },
   } = useTranslation();
   const toolStore = useToolStore();
+  const { lng } = useParams();
 
   const data = useRouteLoaderData('root') as components['schemas']['YksiloCsrfDto'] | null;
   const competencesSlug = 'slugs.profile.competences';
@@ -245,27 +247,32 @@ const Competences = () => {
           )}
         </ConfirmDialog>
       </div>
-      <Accordion title={t('tool.tools')} lang={language}>
+      <Accordion title={t('tool.tools.title')} lang={language}>
         <HelpingToolsContent text={t('profile.help-text')}>
           <HelpingToolProfileLinkItem
             profileLink={workLink}
             icon={<MdWorkOutline size={24} color="#AD4298" />}
-            title={t('profile.work-history.title')}
+            title={t('tool.tools.work-history')}
           />
           <HelpingToolProfileLinkItem
             profileLink={educationLink}
             icon={<MdOutlineSchool size={24} color="#00818A" />}
-            title={t('profile.education-history.title')}
+            title={t('tool.tools.education-history')}
           />
           <HelpingToolProfileLinkItem
             profileLink={freeTimeLink}
             icon={<MdOutlineSailing size={24} className="text-accent" />}
-            title={t('profile.free-time-activities.title')}
+            title={t('tool.tools.free-time-activities')}
           />
           <HelpingToolProfileLinkItem
             profileLink={somethingElseLink}
             icon={<MdLightbulbOutline size={24} className="text-secondary-gray" />}
-            title={t('profile.something-else.title')}
+            title={t('tool.tools.something-else')}
+          />
+          <HelpingToolExternalLinkItem
+            href={`/urataidot/${lng}?yksilo=`}
+            icon={<MdOutlineSchool size={24} color="#00818A" />}
+            title={t('tool.tools.career-skills-self-assessment-tool')}
           />
         </HelpingToolsContent>
       </Accordion>

diff --git a/src/routes/Tool/Interests.tsx b/src/routes/Tool/Interests.tsx
@@ -110,7 +110,7 @@ const Interests = () => {
           )}
         </ConfirmDialog>
       </div>
-      <Accordion title={t('tool.tools')} lang={language}>
+      <Accordion title={t('tool.tools.title')} lang={language}>
         <HelpingToolsContent text={t('tool.my-own-data.interests.help-text')}>
           <HelpingToolProfileLinkItem
             profileLink={interestsLink}

diff --git a/vite.config.ts b/vite.config.ts
@@ -52,6 +52,10 @@ export default defineConfig({
         target,
         xfwd: true,
       },
+      '/urataidot': {
+        target: 'http://localhost:5173',
+        xfwd: true,
+      },
     },
   },
 });