Feature/document links

.github/workflows/ci.yml

@@ -0,0 +1,97 @@
+name: CI
+
+on:
+  # Open any PR -> run tests
+  pull_request:
+    types: [opened, synchronize, reopened]
+  # Push to main branch -> run tests, build & deploy to test
+  push:
+    branches: [master]
+
+env:
+  NODE_VERSION: 20
+  IMAGE_NAME: ${{ secrets.REGISTRY_ADDRESS }}/vuorovaikutusalusta
+
+jobs:
+  test-client:
+    name: Test client
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+          cache-dependency-path: ./client/package-lock.json
+      - name: Build & test
+        working-directory: client
+        run: npm i && npm test && npm run build
+
+  test-server:
+    name: Test server
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+          cache-dependency-path: ./server/package-lock.json
+      - name: Build & test
+        working-directory: server
+        run: npm i && npm test && npm run build
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_ADDRESS }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      # Push only with 'latest' tag for caching
+      - name: Build
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: ${{ env.IMAGE_NAME }}:latest
+          cache-from: type=registry,ref=${{ env.IMAGE_NAME }}:latest
+          cache-to: type=inline
+
+  push:
+    name: Push
+    # Run push only on pushes to master
+    if: ${{ github.event_name == 'push' }}
+    runs-on: ubuntu-latest
+    needs: [test-client, test-server, build]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_ADDRESS }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      # Rebuild the image using the "latest" tag as cache
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: ${{ env.IMAGE_NAME }}:latest
+          cache-from: type=registry,ref=${{ env.IMAGE_NAME }}:latest
+          cache-to: type=inline
+
+  deploy:
+    name: Deploy
+    needs: push
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy
+        run: curl --fail -X POST '${{ secrets.DEPLOY_WEBHOOK_URL }}'

client/src/components/Compose.tsx

@@ -1,5 +1,4 @@
-import React, { ComponentType } from 'react';
-import { ReactNode } from 'react';
+import React, { ComponentType, ReactNode } from 'react';
 
 type Components = ComponentType | [ComponentType, { [key: string]: any }];
 

client/src/components/SurveyInfoPage.tsx

@@ -0,0 +1,198 @@
+import { LocalizedText, PersonalInfo } from '@interfaces/survey';
+import { Button, Grid, TextField, Theme, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import { useSurveyAnswers } from '@src/stores/SurveyAnswerContext';
+import { useTranslations } from '@src/stores/TranslationContext';
+import { getClassList } from '@src/utils/classes';
+import React, { useState } from 'react';
+
+const useStyles = makeStyles((theme: Theme & { [customKey: string]: any }) => ({
+  root: {
+    display: 'flex',
+    width: '60%',
+    minHeight: '-webkit-fill-available',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 0,
+    [theme.breakpoints.down(600)]: {
+      fontSize: '9vw',
+      width: '100%',
+    },
+  },
+  queryContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  infoPageContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textField: {
+    marginBottom: '1rem',
+  },
+  title: {
+    fontFamily: '"Montserrat", sans-serif',
+    fontSize: '3rem',
+    [theme.breakpoints.down(600)]: {
+      fontSize: '9vw',
+    },
+  },
+  subtitle: {
+    fontFamily: '"Montserrat", sans-serif',
+    fontSize: '1rem',
+    textTransform: 'none',
+    paddingBottom: '1rem',
+    [theme.breakpoints.down(600)]: {
+      fontSize: '4vw',
+      paddingLeft: '1rem',
+    },
+  },
+  heading: {
+    textTransform: 'uppercase',
+    fontSize: '2rem',
+    wordBreak: 'break-word',
+    hyphens: 'auto',
+    textAlign: 'center',
+    fontWeight: 800,
+    lineHeight: 1.5,
+    margin: '1rem',
+    '& span': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      padding: '1rem',
+      boxDecorationBreak: 'clone',
+      [theme.breakpoints.down(600)]: {
+        padding: '1vw',
+      },
+    },
+  },
+}));
+
+interface Props {
+  infoPageContent: { title: LocalizedText; text: LocalizedText };
+  personalInfoQuery?: {
+    name?: boolean;
+    email?: boolean;
+    phoneNumber?: boolean;
+  };
+  onStart: () => void;
+}
+
+export default function SurveyInfoPage({
+  onStart,
+  infoPageContent,
+  personalInfoQuery,
+}: Props) {
+  const { tr, surveyLanguage } = useTranslations();
+  const classes = useStyles();
+  const { setPersonalInfo } = useSurveyAnswers();
+  const [personalInfoValues, setPersonalInfoValues] =
+    useState<PersonalInfo>(null);
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        setPersonalInfo(personalInfoValues);
+        onStart();
+      }}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Grid container spacing={4} className={classes.root}>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          {infoPageContent?.title?.[surveyLanguage] && (
+            <Typography
+              className={getClassList([classes.heading, classes.title])}
+              variant="h3"
+            >
+              {infoPageContent.title[surveyLanguage]}
+            </Typography>
+          )}
+          {infoPageContent?.text?.[surveyLanguage] && (
+            <Typography
+              className={getClassList([classes.subtitle])}
+              variant="body1"
+            >
+              {infoPageContent?.text[surveyLanguage]}
+            </Typography>
+          )}
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '2rem 0 0 0',
+          }}
+        >
+          <Typography style={{ paddingBottom: '1rem' }}>
+            {' '}
+            {tr.SurveyInfoPage.fillEntries}:{' '}
+          </Typography>
+          {personalInfoQuery.name && (
+            <TextField
+              className={classes.textField}
+              label={tr.SurveyInfoPage.name}
+              value={personalInfoValues?.name ?? ''}
+              onChange={(event) => {
+                setPersonalInfoValues({
+                  ...personalInfoValues,
+                  name: event.target.value,
+                });
+              }}
+            />
+          )}
+          {personalInfoQuery.phoneNumber && (
+            <TextField
+              type="tel"
+              inputProps={{
+                pattern: '\\+?[0-9\\s-]+',
+              }}
+              className={classes.textField}
+              label={tr.SurveyInfoPage.phoneNumber}
+              value={personalInfoValues?.phoneNumber ?? ''}
+              onChange={(event) => {
+                setPersonalInfoValues({
+                  ...personalInfoValues,
+                  phoneNumber: event.target.value,
+                });
+              }}
+            ></TextField>
+          )}
+          {personalInfoQuery.email && (
+            <TextField
+              type="email"
+              className={classes.textField}
+              label={tr.SurveyInfoPage.email}
+              value={personalInfoValues?.email ?? ''}
+              onChange={(event) => {
+                setPersonalInfoValues({
+                  ...personalInfoValues,
+                  email: event.target.value,
+                });
+              }}
+            ></TextField>
+          )}
+        </Grid>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          <Button type="submit" variant="contained">
+            {tr.SurveyInfoPage.startSurvey}
+          </Button>
+        </Grid>
+      </Grid>
+    </form>
+  );
+}

client/src/components/SurveyLandingPage.tsx

@@ -3,9 +3,9 @@ import {
   Box,
   Button,
   Link,
+  Stack,
   Theme,
   Typography,
-  Stack,
   useMediaQuery,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
@@ -142,7 +142,7 @@ export default function SurveyLandingPage({
         <img
           style={{
             maxWidth: '60%',
-            maxHeight: '100%',
+            maxHeight: '15vh',
           }}
           src={`/api/feature-styles/icons/logo`}
           alt={tr.IconAltTexts.logoAltText}
@@ -187,22 +187,17 @@ export default function SurveyLandingPage({
           whiteSpace: 'nowrap',
         }}
       >
-        <Footer>
+        <Footer style={{ backgroundColor: '#f2f2f2', paddingRight: '2rem'}}>
           <Link
             color="primary"
             underline="hover"
-            href="https://www.tampere.fi/asioi-kaupungin-kanssa/oskari-karttakyselypalvelun-saavutettavuusseloste"
+            href="https://www.ouka.fi/yhteystiedot-ja-palaute/oulun-kaupungin-karttakyselypalvelun-saavutettavuusseloste"
             target="_blank"
           >
             {tr.FooterLinks.accessibility}
           </Link>
           {survey.displayPrivacyStatement && (
-            <Link
-              color="primary"
-              underline="hover"
-              href="https://www.tampere.fi/tietosuoja-ja-tiedonhallinta/tietosuojaselosteet"
-              target="_blank"
-            >
+            <Link color="primary" underline="hover" href="https://www.ouka.fi/tietosuoja/tietosuojaselosteet" target="_blank">
               {tr.FooterLinks.privacyStatement}
             </Link>
           )}