feat(rental-agreement): Project structure & minimal functionality

libs/application/template-loader/src/lib/templateLoaders.ts

@@ -209,6 +209,8 @@ const templates: Record<ApplicationTypes, () => Promise<unknown>> = {
     import('@island.is/application/templates/new-primary-school'),
   [ApplicationTypes.MACHINE_REGISTRATION]: () =>
     import('@island.is/application/templates/aosh/register-new-machine'),
+  [ApplicationTypes.RENTAL_AGREEMENT]: () =>
+    import('@island.is/application/templates/rental-agreement'),
   [ApplicationTypes.SECONDARY_SCHOOL]: () =>
     import('@island.is/application/templates/secondary-school'),
 }

libs/application/templates/rental-agreement/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nx/react/babel"],
+  "plugins": []
+}

libs/application/templates/rental-agreement/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:@nx/react", "../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "rules": {},
+  "overrides": [
+    { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], "rules": {} },
+    { "files": ["*.ts", "*.tsx"], "rules": {} },
+    { "files": ["*.js", "*.jsx"], "rules": {} }
+  ]
+}

libs/application/templates/rental-agreement/README.md

@@ -0,0 +1,7 @@
+# application-templates-rental-agreement
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test application-templates-rental-agreement` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/application/templates/rental-agreement/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/application/templates/rental-agreement/jest.config.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+export default {
+  preset: './jest.preset.js',
+  rootDir: '../../../..',
+  roots: [__dirname],
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: `${__dirname}/babel-jest.config.json` },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory:
+    '<rootDir>/coverage/libs/application/templates/rental-agreement',
+  displayName: 'application-templates-rental-agreement',
+}

libs/application/templates/rental-agreement/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "application-templates-rental-agreement",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/application/templates/rental-agreement/src",
+  "projectType": "library",
+  "tags": ["scope:application-system", "lib:application-system"],
+  "generators": {},
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "options": {
+        "jestConfig": "libs/application/templates/rental-agreement/jest.config.ts"
+      },
+      "outputs": [
+        "{workspaceRoot}/coverage/libs/application/templates/rental-agreement"
+      ]
+    },
+    "extract-strings": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn ts-node -P libs/localization/tsconfig.lib.json libs/localization/scripts/extract libs/application/templates/rental-agreement/src/lib/messages.ts"
+      }
+    }
+  }
+}

libs/application/templates/rental-agreement/src/dataProviders/index.ts

@@ -0,0 +1,5 @@
+export {
+  UserProfileApi,
+  NationalRegistryUserApi,
+  NationalRegistrySpouseApi,
+} from '@island.is/application/types'

libs/application/templates/rental-agreement/src/fields/Summary/ApplicantsRepresentativesSummary.tsx

@@ -0,0 +1,136 @@
+import { FC } from 'react'
+import { GridColumn } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { FieldBaseProps } from '@island.is/application/types'
+import { RentalAgreement } from '../../lib/dataSchema'
+import { summary } from '../../lib/messages'
+import { Routes } from '../../lib/constants'
+import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
+import { KeyValue } from './components/KeyValue'
+import { SummaryCardRow } from './components/SummaryCardRow'
+import { SummaryCard } from './components/SummaryCard'
+
+interface Props extends FieldBaseProps {
+  goToScreen?: (id: string) => void
+  landlordsRoute?: Routes
+  tenantsRoute?: Routes
+}
+
+export const ApplicantsRepresentativesSummary: FC<Props> = ({ ...props }) => {
+  const { formatMessage } = useLocale()
+  const { application, goToScreen, landlordsRoute, tenantsRoute } = props
+  const answers = application.answers as RentalAgreement
+
+  const landlordListHasRepresentatives = answers.landlordInfo.table.some(
+    (landlord) =>
+      landlord.isRepresentative && landlord.isRepresentative.length > 0,
+  )
+  const tenantListHasRepresentatives = answers.tenantInfo.table.some(
+    (tenant) => tenant.isRepresentative && tenant.isRepresentative.length > 0,
+  )
+
+  const landlordRepresentatives = answers.landlordInfo.table?.filter(
+    (landlordRep) =>
+      landlordRep.isRepresentative && landlordRep.isRepresentative.length > 0,
+  )
+  const tenantRepresentatives = answers.tenantInfo.table.filter(
+    (tenantRep) =>
+      tenantRep.isRepresentative && tenantRep.isRepresentative.length > 0,
+  )
+
+  if (landlordListHasRepresentatives || tenantListHasRepresentatives) {
+    return (
+      <>
+        {landlordListHasRepresentatives ? (
+          <SummaryCard
+            cardLabel={formatMessage(summary.landlordsRepresentativeLabel)}
+          >
+            {landlordRepresentatives?.map((landlordRep) => {
+              return (
+                <SummaryCardRow
+                  key={landlordRep.nationalIdWithName?.nationalId}
+                  editAction={goToScreen}
+                  route={landlordsRoute}
+                >
+                  <GridColumn span={['12/12']}>
+                    <KeyValue
+                      labelVariant="h5"
+                      labelAs="p"
+                      label={landlordRep.nationalIdWithName?.name as string}
+                      value={`${formatMessage(
+                        summary.nationalIdLabel,
+                      )}${formatNationalId(
+                        landlordRep.nationalIdWithName?.nationalId || '-',
+                      )}`}
+                      gap={'smallGutter'}
+                    />
+                  </GridColumn>
+
+                  <GridColumn span={['12/12', '8/12']}>
+                    <KeyValue
+                      label={summary.emailLabel}
+                      value={landlordRep.email || '-'}
+                    />
+                  </GridColumn>
+                  <GridColumn span={['12/12', '4/12']}>
+                    <KeyValue
+                      label={summary.phoneNumberLabel}
+                      value={formatPhoneNumber(landlordRep.phone || '-')}
+                    />
+                  </GridColumn>
+                </SummaryCardRow>
+              )
+            })}
+          </SummaryCard>
+        ) : (
+          ''
+        )}
+        {tenantListHasRepresentatives ? (
+          <SummaryCard
+            cardLabel={formatMessage(summary.tenantsRepresentativeLabel)}
+          >
+            {tenantRepresentatives.map((tenantRep) => {
+              return (
+                <SummaryCardRow
+                  key={tenantRep.nationalIdWithName?.nationalId}
+                  editAction={props.goToScreen}
+                  route={tenantsRoute}
+                >
+                  <GridColumn span={['12/12']}>
+                    <KeyValue
+                      labelVariant="h5"
+                      labelAs="p"
+                      label={tenantRep.nationalIdWithName?.name as string}
+                      value={`${formatMessage(
+                        summary.nationalIdLabel,
+                      )}${formatNationalId(
+                        tenantRep.nationalIdWithName?.nationalId || '-',
+                      )}`}
+                      gap={'smallGutter'}
+                    />
+                  </GridColumn>
+                  <GridColumn span={['12/12', '8/12']}>
+                    <KeyValue
+                      label={summary.emailLabel}
+                      value={tenantRep.email || '-'}
+                    />
+                  </GridColumn>
+                  <GridColumn span={['12/12', '4/12']}>
+                    <KeyValue
+                      label={summary.phoneNumberLabel}
+                      value={formatPhoneNumber(tenantRep.phone || '-')}
+                    />
+                  </GridColumn>
+                </SummaryCardRow>
+              )
+            })}
+          </SummaryCard>
+        ) : (
+          ''
+        )}
+      </>
+    )
+  } else {
+    return ''
+  }
+}

libs/application/templates/rental-agreement/src/fields/Summary/ApplicantsSummary.tsx

@@ -0,0 +1,128 @@
+import { GridColumn } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { RentalAgreement } from '../../lib/dataSchema'
+import { Routes } from '../../lib/constants'
+import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
+import { KeyValue } from './components/KeyValue'
+import { SummaryCard } from './components/SummaryCard'
+import { SummaryCardRow } from './components/SummaryCardRow'
+import { summary } from '../../lib/messages'
+
+type Props = {
+  answers: RentalAgreement
+  goToScreen?: (id: string) => void
+  landlordsRoute?: Routes
+  tenantsRoute?: Routes
+}
+
+export const ApplicantsSummary = ({
+  answers,
+  goToScreen,
+  landlordsRoute,
+  tenantsRoute,
+}: Props) => {
+  const { formatMessage } = useLocale()
+
+  const landlordListWithoutRepresentatives = answers.landlordInfo.table.filter(
+    (landlord) =>
+      !landlord.isRepresentative || landlord.isRepresentative.length === 0,
+  )
+
+  const tenantListWithoutRepresentatives = answers.tenantInfo.table.filter(
+    (tenant) =>
+      !tenant.isRepresentative || tenant.isRepresentative.length === 0,
+  )
+
+  return (
+    <>
+      <SummaryCard
+        cardLabel={
+          landlordListWithoutRepresentatives &&
+          landlordListWithoutRepresentatives.length > 1
+            ? formatMessage(summary.landlordsHeaderPlural)
+            : formatMessage(summary.landlordsHeader)
+        }
+      >
+        {landlordListWithoutRepresentatives?.map((landlord) => {
+          return (
+            <SummaryCardRow
+              key={landlord.nationalIdWithName?.nationalId}
+              editAction={goToScreen}
+              route={landlordsRoute}
+            >
+              <GridColumn span={['12/12']}>
+                <KeyValue
+                  labelVariant="h5"
+                  labelAs="p"
+                  label={landlord.nationalIdWithName?.name as string}
+                  value={`${formatMessage(
+                    summary.nationalIdLabel,
+                  )}${formatNationalId(
+                    landlord.nationalIdWithName?.nationalId || '-',
+                  )}`}
+                  gap={'smallGutter'}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '8/12']}>
+                <KeyValue
+                  label={summary.emailLabel}
+                  value={landlord.email || ''}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '4/12']}>
+                <KeyValue
+                  label={summary.phoneNumberLabel}
+                  value={formatPhoneNumber(landlord.phone || '-')}
+                />
+              </GridColumn>
+            </SummaryCardRow>
+          )
+        })}
+      </SummaryCard>
+
+      <SummaryCard
+        cardLabel={
+          tenantListWithoutRepresentatives.length > 1
+            ? formatMessage(summary.tenantsHeaderPlural)
+            : formatMessage(summary.tenantsHeader)
+        }
+      >
+        {tenantListWithoutRepresentatives.map((tenant) => {
+          return (
+            <SummaryCardRow
+              key={tenant.nationalIdWithName?.nationalId}
+              editAction={goToScreen}
+              route={tenantsRoute}
+            >
+              <GridColumn span={['12/12']}>
+                <KeyValue
+                  labelVariant="h5"
+                  labelAs="p"
+                  label={tenant.nationalIdWithName?.name as string}
+                  value={`${formatMessage(
+                    summary.nationalIdLabel,
+                  )}${formatNationalId(
+                    tenant.nationalIdWithName?.nationalId || '-',
+                  )}`}
+                  gap={'smallGutter'}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '8/12']}>
+                <KeyValue
+                  label={summary.emailLabel}
+                  value={tenant.email || '-'}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '4/12']}>
+                <KeyValue
+                  label={summary.phoneNumberLabel}
+                  value={formatPhoneNumber(tenant.phone || '-')}
+                />
+              </GridColumn>
+            </SummaryCardRow>
+          )
+        })}
+      </SummaryCard>
+    </>
+  )
+}