Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/tax/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ const nextConfig = {
env: {
API_MOCKS: process.env.API_MOCKS ?? '',
},
typescript: {
ignoreBuildErrors: true,
},
}

const plugins = [
Expand Down
136 changes: 63 additions & 73 deletions apps/tax/pages/tax/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import React from 'react'
import React, { useState } from 'react'

import {
Box,
Button,
Checkbox,
FormStepperV2,
Icon,
Section,
Text,
} from '@island.is/island-ui/core'
import { Box, Button, Divider, FormStepperV2, Section } from '@island.is/island-ui/core'
import FormStepsLayout from '@island.is/tax/screens/Layouts/FormStepsLayout'

import StepOne from './steps/StepOne'
import StepTwo from './steps/StepTwo'

const steps = [
{ title: 'Gagnaöflun', index: 0 },
{ title: 'Umsækjandi', index: 1 },
{ title: 'Tekjur', index: 2 },
{ title: 'Eignir', index: 3 },
{ title: 'Skuldir og vaxtagjöld', index: 4 },
{ title: 'Yfirlit', index: 5 },
{ title: 'Staðfesting', index: 6 },
]

export async function getServerSideProps() {
const taxData = {
country: 'test',
Expand All @@ -25,90 +30,75 @@ export async function getServerSideProps() {
}
}

const renderStep = (step: number) => {
switch (step) {
case 0:
return <StepOne></StepOne>
case 1:
return <StepTwo></StepTwo>
case 2:
return <div>Step3</div>
case 3:
return <div>Step4</div>
case 4:
return <div>Step5</div>
case 5:
return <div>Step6</div>
case 6:
return <div>Step7</div>
default:
break
}
}

const Tax = ({ taxInfo }) => {
const [currentStep, setCurrentStep] = useState(0)

return (
<FormStepsLayout
sidebarContent={
<Box margin={3}>
<FormStepperV2
sections={[
sections={steps.map((step) => (
<Section
isActive
section={'Gagnaöflun'}
sectionIndex={0}
key={0}
/>,
<Section section={'Umsækjandi'} sectionIndex={1} key={1} />,
<Section section={'Tekjur'} sectionIndex={2} key={2} />,
<Section section={'Eignir'} sectionIndex={3} key={3} />,
<Section
section={'Skuldir og vaxtagjöld'}
sectionIndex={4}
key={4}
/>,
<Section section={'Yfirlit'} sectionIndex={5} key={5} />,
<Section section={'Staðfesting'} sectionIndex={6} key={6} />,
]}
key={`step-${step.index}`}
isActive={step.index === currentStep}
section={step.title}
sectionIndex={step.index}
/>
))}
/>
</Box>
}
>
<Box
background="white"
borderRadius="large"
padding={[3, 3, 10]}
marginY={4}
>
<Text variant="h2" as="h2">
Gagnaöflun
</Text>
<Box paddingY={4} display="flex" alignItems={['center']}>
<Icon icon="fileTrayFull" type="outline" color="blue400" />
<Box paddingLeft={2}>
<Text variant="h4" as="h4">
Eftirfarandi gögn verða sótt rafrænt
</Text>
</Box>
</Box>
<Text variant="h5" as="h5" color="blue400">
Persónupplýsingar
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar frá Þjóðskrá um nafn, kennitölu og lögheimili.
</Text>
<Text variant="h5" as="h5" color="blue400">
Netfang og símanúmer
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar frá Mínum síðum á Ísland.is um netfang og símanúmer.
</Text>
<Text variant="h5" as="h5" color="blue400">
Upplýsingar frá Skattinum
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar um ráðstöfun persónuafsláttar og greiðslur í lífeyrissjóð
verður sótt til Skattsins.
</Text>

<Box paddingBottom={10}>
<Checkbox
large
subLabel="Ég skil að ofangreind gögn verði sótt rafrænt."
/>
</Box>

<Box>
{renderStep(currentStep)}
<Box display="flex" justifyContent="spaceBetween">
<Button colorScheme="destructive" variant="ghost">
<Button
colorScheme="destructive"
variant="ghost"
onClick={() => {
if (currentStep > 0) {
const newStep = currentStep - 1
setCurrentStep(newStep)
}
}}
>
Hætta við
</Button>

<Button
colorScheme="default"
iconType="filled"
preTextIconType="filled"
size="default"
variant="primary"
icon="arrowForward"
onClick={() => {
if (currentStep < 6) {
const newStep = currentStep + 1
setCurrentStep(newStep)
}
}}
>
Halda áfram
</Button>
Expand Down
52 changes: 52 additions & 0 deletions apps/tax/pages/tax/steps/StepOne.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Box, Checkbox, Icon, Text } from '@island.is/island-ui/core'

const StepOne = () => {
return (
<Box
background="white"
borderRadius="large"
padding={[3, 3, 10]}
marginY={4}
>
<Text variant="h2" as="h2">
Gagnaöflun
</Text>
<Box paddingY={4} display="flex" alignItems={['center']}>
<Icon icon="fileTrayFull" type="outline" color="blue400" />
<Box paddingLeft={2}>
<Text variant="h4" as="h4">
Eftirfarandi gögn verða sótt rafrænt
</Text>
</Box>
</Box>
<Text variant="h5" as="h5" color="blue400">
Persónupplýsingar
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar frá Þjóðskrá um nafn, kennitölu og lögheimili.
</Text>
<Text variant="h5" as="h5" color="blue400">
Netfang og símanúmer
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar frá Mínum síðum á Ísland.is um netfang og símanúmer.
</Text>
<Text variant="h5" as="h5" color="blue400">
Upplýsingar frá Skattinum
</Text>
<Text fontWeight="light" color="dark400" paddingBottom={4}>
Upplýsingar um ráðstöfun persónuafsláttar og greiðslur í lífeyrissjóð
verður sótt til Skattsins.
</Text>

<Box paddingBottom={10}>
<Checkbox
large
subLabel="Ég skil að ofangreind gögn verði sótt rafrænt."
/>
</Box>
</Box>
)
}

export default StepOne
8 changes: 8 additions & 0 deletions apps/tax/pages/tax/steps/StepTwo.css.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { style } from '@vanilla-extract/css'

import { theme } from '@island.is/island-ui/theme'

export const fieldWrapper = style({
marginTop: theme.spacing[2],
marginBottom: theme.spacing[2],
})
124 changes: 124 additions & 0 deletions apps/tax/pages/tax/steps/StepTwo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import {
AlertMessage,
Box,
GridColumn,
GridContainer,
GridRow,
Input,
Text,
Typography,
} from '@island.is/island-ui/core'
import { fieldWrapper } from '@island.is/tax/screens/StepTwo.css'

const StepTwo = () => {
return (
<Box
background="white"
borderRadius="large"
padding={[3, 3, 10]}
marginY={4}
>
<Typography variant="h1" paddingBottom={1}>
Skil á framtali
</Typography>

<Text fontWeight="light">
Vinsamlegast leiðréttið eftirfarandi upplýsingar ef þörf er á
</Text>

<GridContainer className={fieldWrapper}>
<GridRow>
<GridColumn span="12/12" className={fieldWrapper}>
<Input
backgroundColor="white"
label="Fullt nafn"
name=""
placeholder="Jökull Þórðarson"
size="sm"
type="text"
/>
</GridColumn>
</GridRow>

<GridRow>
<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Kennitala"
name=""
placeholder="120389-4569"
size="sm"
type="number"
/>
</GridColumn>

<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Heimili"
name=""
placeholder="Bláfjallagata 12"
size="sm"
type="text"
/>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Póstnúmer"
name=""
placeholder="105"
size="sm"
type="number"
/>
</GridColumn>

<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Sveitarfélag"
name=""
placeholder="Reykjavík"
size="sm"
type="text"
/>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Netfang "
name=""
placeholder="jokull.thordarson@email.is"
size="sm"
type="email"
/>
</GridColumn>

<GridColumn span={['12/12', '12/12', '6/12']} className={fieldWrapper}>
<Input
backgroundColor="white"
label="Símanúmer"
name=""
placeholder="+354 772-8391"
size="sm"
type="tel"
/>
</GridColumn>
</GridRow>
</GridContainer>

<Box paddingY={2}>
<AlertMessage
type="info"
message="Ef netfang og símanúmer er ekki rétt hér að ofan þá verður að breyta þeim upplýsingum á mínum síðum Ísland.is"
/>
</Box>
</Box>
)
}

export default StepTwo
8 changes: 8 additions & 0 deletions apps/tax/screens/StepTwo.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { style } from '@vanilla-extract/css'

import { theme } from '@island.is/island-ui/theme'

export const fieldWrapper = style({
marginTop: theme.spacing[2],
marginBottom: theme.spacing[2],
})
Loading