feat(web): My pages links for directorate of labour

.github/CODEOWNERS

@@ -18,6 +18,7 @@
 /libs/portals/admin/                                                                                      @island-is/aranja
 /libs/portals/core/                                                                                       @island-is/aranja @island-is/hugsmidjan
 /libs/shared/connected/                                                                                   @island-is/stefna
+/libs/shared/types/src/lib/api-cms-domain.ts                                                              @island-is/stefna
 
 /*                                                                                                        @island-is/core
 /libs/api/domains/identity/                                                                               @island-is/core

apps/web/hooks/useLinkResolver/useLinkResolver.ts

@@ -107,6 +107,10 @@ export const routesTemplate = {
     is: '/s/tryggingastofnun/reiknivel',
     en: '/en/o/social-insurance-administration/calculator',
   },
+  directorateoflabourmypages: {
+    is: '/s/vinnumalastofnun/minar-sidur',
+    en: '/en/o/directorate-of-labour/my-pages',
+  },
   digitalicelandservices: {
     is: '/s/stafraent-island/thjonustur',
     en: '/en/o/digital-iceland/island-services',

apps/web/pages/en/o/directorate-of-labour/my-pages/index.ts

@@ -0,0 +1,12 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import MyPages from '@island.is/web/screens/Organization/DirectorateOfLabour/MyPages'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+const Screen = withApollo(withLocale('en')(MyPages))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/pages/s/vinnumalastofnun/minar-sidur/index.ts

@@ -0,0 +1,12 @@
+import withApollo from '@island.is/web/graphql/withApollo'
+import { withLocale } from '@island.is/web/i18n'
+import MyPages from '@island.is/web/screens/Organization/DirectorateOfLabour/MyPages'
+import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePropsWrapper'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore make web strict
+const Screen = withApollo(withLocale('is')(MyPages))
+
+export default Screen
+
+export const getServerSideProps = getServerSidePropsWrapper(Screen)

apps/web/screens/Organization/DirectorateOfLabour/MyPages.strings.ts

@@ -0,0 +1,80 @@
+import { defineMessages } from 'react-intl'
+
+export const m = defineMessages({
+  mainTitle: {
+    id: 'web.directorateOfLabour.myPages:mainTitle',
+    defaultMessage: 'Mínar síður Vinnumálastofnunar',
+    description: 'Mínar síður Vinnumálastofnunar',
+  },
+  individualsLabel: {
+    id: 'web.directorateOfLabour.myPages:individualsLabel',
+    defaultMessage: 'Einstaklingar',
+    description: 'Einstaklingar',
+  },
+  individualsDescription: {
+    id: 'web.directorateOfLabour.myPages:individualsDescription',
+    defaultMessage: 'Mínar síður fyrir einstaklinga.',
+    description: 'Mínar síður fyrir einstaklinga.',
+  },
+  individualsHref: {
+    id: 'web.directorateOfLabour.myPages:individualsHref',
+    defaultMessage: 'https://vinnumalastofnun.is/islandisatvinnuleitandi',
+    description: 'https://vinnumalastofnun.is/islandisatvinnuleitandi',
+  },
+  individualsImageSrc: {
+    id: 'web.directorateOfLabour.myPages:individualsImageSrc',
+    defaultMessage:
+      'https://images.ctfassets.net/8k0h54kbe6bj/74YI1HhTZ5ufC1qSsr2TEF/315ca87541dd256c196d6394a6ecf50b/Vinnumalastofnun-Logo.svg',
+    description:
+      'https://images.ctfassets.net/8k0h54kbe6bj/74YI1HhTZ5ufC1qSsr2TEF/315ca87541dd256c196d6394a6ecf50b/Vinnumalastofnun-Logo.svg',
+  },
+  companyLabel: {
+    id: 'web.directorateOfLabour.myPages:companyLabel',
+    defaultMessage: 'Fyrirtæki',
+    description: 'Fyrirtæki',
+  },
+  companyDescription: {
+    id: 'web.directorateOfLabour.myPages:companyDescription',
+    defaultMessage: 'Mínar síður fyrir atvinnurekendur og fyrirtæki.',
+    description: 'Mínar síður fyrir atvinnurekendur og fyrirtæki.',
+  },
+  companyHref: {
+    id: 'web.directorateOfLabour.myPages:companyHref',
+    defaultMessage: 'https://vinnumalastofnun.is/islandisatvinnurekandi',
+    description: 'https://vinnumalastofnun.is/islandisatvinnurekandi',
+  },
+  companyImageSrc: {
+    id: 'web.directorateOfLabour.myPages:companyImageSrc',
+    defaultMessage:
+      'https://images.ctfassets.net/8k0h54kbe6bj/74YI1HhTZ5ufC1qSsr2TEF/315ca87541dd256c196d6394a6ecf50b/Vinnumalastofnun-Logo.svg',
+    description:
+      'https://images.ctfassets.net/8k0h54kbe6bj/74YI1HhTZ5ufC1qSsr2TEF/315ca87541dd256c196d6394a6ecf50b/Vinnumalastofnun-Logo.svg',
+  },
+  parentalLeaveLabel: {
+    id: 'web.directorateOfLabour.myPages:parentalLeaveLabel',
+    defaultMessage: 'Fæðingarorlof',
+    description: 'Fæðingarorlof',
+  },
+  parentalLeaveDescription: {
+    id: 'web.directorateOfLabour.myPages:parentalLeaveDescription',
+    defaultMessage: 'Innsend umsókn um fæðingarorlof.',
+    description: 'Innsend umsókn um fæðingarorlof.',
+  },
+  parentalLeaveHref: {
+    id: 'web.directorateOfLabour.myPages:parentalLeaveHref',
+    defaultMessage: 'https://island.is/umsoknir/faedingarorlof/',
+    description: 'https://island.is/umsoknir/faedingarorlof/',
+  },
+  parentalLeaveImageSrc: {
+    id: 'web.directorateOfLabour.myPages:parentalLeaveImageSrc',
+    defaultMessage:
+      'https://images.ctfassets.net/8k0h54kbe6bj/5ijRCutRCFu4Y9aPS0ys4Z/b809c1cb81df9d27ea99a30e00c2d1e8/is-logo-stakt_2x.png',
+    description:
+      'https://images.ctfassets.net/8k0h54kbe6bj/5ijRCutRCFu4Y9aPS0ys4Z/b809c1cb81df9d27ea99a30e00c2d1e8/is-logo-stakt_2x.png',
+  },
+  loginLabel: {
+    id: 'web.directorateOfLabour.myPages:loginLabel',
+    defaultMessage: 'Innskráning',
+    description: 'Innskráning',
+  },
+})

apps/web/screens/Organization/DirectorateOfLabour/MyPages.tsx

@@ -0,0 +1,176 @@
+import { useIntl } from 'react-intl'
+import { useRouter } from 'next/router'
+
+import {
+  Box,
+  CategoryCard,
+  GridColumn,
+  GridRow,
+  Stack,
+  Text,
+} from '@island.is/island-ui/core'
+import {
+  OrganizationFooter,
+  OrganizationWrapper,
+} from '@island.is/web/components'
+import {
+  ContentLanguage,
+  CustomPageUniqueIdentifier,
+  GetNamespaceQuery,
+  OrganizationPage,
+  Query,
+  QueryGetNamespaceArgs,
+  QueryGetOrganizationPageArgs,
+} from '@island.is/web/graphql/schema'
+import { useNamespace } from '@island.is/web/hooks'
+import { useI18n } from '@island.is/web/i18n'
+import { withMainLayout } from '@island.is/web/layouts/main'
+import { CustomNextError } from '@island.is/web/units/errors'
+import { getOrganizationSidebarNavigationItems } from '@island.is/web/utils/organization'
+import { webRichText } from '@island.is/web/utils/richText'
+
+import {
+  CustomScreen,
+  withCustomPageWrapper,
+} from '../../CustomPage/CustomPageWrapper'
+import { GET_NAMESPACE_QUERY, GET_ORGANIZATION_PAGE_QUERY } from '../../queries'
+import { m } from './MyPages.strings'
+
+interface MyPagesProps {
+  organizationPage: OrganizationPage
+  namespace: Record<string, string>
+}
+
+const MyPages: CustomScreen<MyPagesProps> = ({
+  organizationPage,
+  namespace,
+  customPageData,
+}) => {
+  const n = useNamespace(namespace)
+  const router = useRouter()
+  const baseRouterPath = router.asPath.split('?')[0].split('#')[0]
+  const { activeLocale } = useI18n()
+  const { formatMessage } = useIntl()
+
+  return (
+    <OrganizationWrapper
+      navigationData={{
+        title: n(
+          'navigationTitle',
+          activeLocale === 'is' ? 'Efnisyfirlit' : 'Menu',
+        ),
+        items: getOrganizationSidebarNavigationItems(
+          organizationPage,
+          baseRouterPath,
+        ),
+      }}
+      organizationPage={organizationPage}
+      pageTitle={formatMessage(m.mainTitle)}
+      minimal
+      mainContent={
+        <Box paddingBottom={8} paddingTop={[1, 1, 2]}>
+          <GridRow rowGap={5}>
+            <GridColumn span={['1/1', '1/1', '1/1', '4/7', '6/12']}>
+              <Text variant="h1" as="h1">
+                {formatMessage(m.mainTitle)}
+              </Text>
+
+              <Stack space={1}>
+                {webRichText(
+                  customPageData?.content ?? [],
+                  undefined,
+                  activeLocale,
+                )}
+              </Stack>
+            </GridColumn>
+            <GridColumn span={['1/1', '1/1', '1/1', '3/7', '6/12']}>
+              <Stack space={3}>
+                <CategoryCard
+                  heading={formatMessage(m.individualsLabel)}
+                  text={formatMessage(m.individualsDescription)}
+                  href={formatMessage(m.individualsHref)}
+                  src={formatMessage(m.individualsImageSrc)}
+                  alt=""
+                />
+                <CategoryCard
+                  heading={formatMessage(m.companyLabel)}
+                  text={formatMessage(m.companyDescription)}
+                  href={formatMessage(m.companyHref)}
+                  src={formatMessage(m.companyImageSrc)}
+                  alt=""
+                />
+                <CategoryCard
+                  heading={formatMessage(m.parentalLeaveLabel)}
+                  text={formatMessage(m.parentalLeaveDescription)}
+                  href={formatMessage(m.parentalLeaveHref)}
+                  src={formatMessage(m.parentalLeaveImageSrc)}
+                  alt=""
+                />
+              </Stack>
+            </GridColumn>
+          </GridRow>
+        </Box>
+      }
+    >
+      {organizationPage.organization && (
+        <OrganizationFooter organizations={[organizationPage.organization]} />
+      )}
+    </OrganizationWrapper>
+  )
+}
+
+MyPages.getProps = async ({ apolloClient, locale }) => {
+  const organizationSlug =
+    locale === 'en' ? 'directorate-of-labour' : 'vinnumalastofnun'
+
+  const [
+    {
+      data: { getOrganizationPage },
+    },
+    namespace,
+  ] = await Promise.all([
+    apolloClient.query<Query, QueryGetOrganizationPageArgs>({
+      query: GET_ORGANIZATION_PAGE_QUERY,
+      variables: {
+        input: {
+          slug: organizationSlug,
+          lang: locale as ContentLanguage,
+        },
+      },
+    }),
+    apolloClient
+      .query<GetNamespaceQuery, QueryGetNamespaceArgs>({
+        query: GET_NAMESPACE_QUERY,
+        variables: {
+          input: {
+            namespace: 'OrganizationPages',
+            lang: locale as ContentLanguage,
+          },
+        },
+      })
+      .then((res) =>
+        res.data.getNamespace?.fields
+          ? JSON.parse(res.data.getNamespace.fields)
+          : {},
+      ),
+  ])
+
+  if (!getOrganizationPage) {
+    throw new CustomNextError(404, 'Organization page not found')
+  }
+
+  return {
+    organizationPage: getOrganizationPage,
+    namespace,
+  }
+}
+
+export default withMainLayout(
+  withCustomPageWrapper(
+    CustomPageUniqueIdentifier.DirectorateOfLabourMyPages,
+    MyPages,
+  ),
+  {
+    footerVersion: 'organization',
+  },
+)

libs/cms/src/lib/generated/contentfulTypes.d.ts

@@ -771,6 +771,7 @@ export interface ICustomPageFields {
     | 'OfficialJournalOfIceland'
     | 'Vacancies'
     | 'Grants'
+    | 'DirectorateOfLabourMyPages'
     | undefined
 
   /** Alert Banner */

libs/shared/types/src/lib/api-cms-domain.ts

@@ -7,6 +7,7 @@ export enum CustomPageUniqueIdentifier {
   OfficialJournalOfIceland = 'OfficialJournalOfIceland',
   Vacancies = 'Vacancies',
   Grants = 'Grants',
+  DirectorateOfLabourMyPages = 'DirectorateOfLabourMyPages',
 }
 
 export interface StatisticSourceValue {