feat(rental-agreement): Continue to signing screen (#17392)

* Add alert message to summary. Cleanup components. Other minor fixes.

* Reorder imports for consistency

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

@@ -1,14 +1,14 @@
 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 './KeyValue'
-import { SummarySection } from './SummarySection'
-import { FieldBaseProps } from '@island.is/application/types'
+import { KeyValue } from './components/KeyValue'
 import { SummaryCardRow } from './components/SummaryCardRow'
-import { Routes } from '../../lib/constants'
+import { SummaryCard } from './components/SummaryCard'
 
 interface Props extends FieldBaseProps {
   goToScreen?: (id: string) => void
@@ -42,8 +42,8 @@ export const ApplicantsRepresentativesSummary: FC<Props> = ({ ...props }) => {
     return (
       <>
         {landlordListHasRepresentatives ? (
-          <SummarySection
-            sectionLabel={formatMessage(summary.landlordsRepresentativeLabel)}
+          <SummaryCard
+            cardLabel={formatMessage(summary.landlordsRepresentativeLabel)}
           >
             {landlordRepresentatives?.map((landlordRep) => {
               return (
@@ -81,13 +81,13 @@ export const ApplicantsRepresentativesSummary: FC<Props> = ({ ...props }) => {
                 </SummaryCardRow>
               )
             })}
-          </SummarySection>
+          </SummaryCard>
         ) : (
           ''
         )}
         {tenantListHasRepresentatives ? (
-          <SummarySection
-            sectionLabel={formatMessage(summary.tenantsRepresentativeLabel)}
+          <SummaryCard
+            cardLabel={formatMessage(summary.tenantsRepresentativeLabel)}
           >
             {tenantRepresentatives.map((tenantRep) => {
               return (
@@ -124,7 +124,7 @@ export const ApplicantsRepresentativesSummary: FC<Props> = ({ ...props }) => {
                 </SummaryCardRow>
               )
             })}
-          </SummarySection>
+          </SummaryCard>
         ) : (
           ''
         )}

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

@@ -1,12 +1,12 @@
 import { GridColumn } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
-import { summary } from '../../lib/messages'
+import { RentalAgreement } from '../../lib/dataSchema'
+import { Routes } from '../../lib/constants'
 import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
-import { KeyValue } from './KeyValue'
+import { KeyValue } from './components/KeyValue'
 import { SummaryCard } from './components/SummaryCard'
 import { SummaryCardRow } from './components/SummaryCardRow'
-import { Routes } from '../../lib/constants'
-import { RentalAgreement } from '../../lib/dataSchema'
+import { summary } from '../../lib/messages'
 
 type Props = {
   answers: RentalAgreement

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

@@ -7,10 +7,10 @@ import {
   formatDate,
   getRentalOtherFeesPayeeOptions,
 } from '../../lib/utils'
-import { summary } from '../../lib/messages'
-import { KeyValue } from './KeyValue'
-import { SummarySection } from './SummarySection'
+import { KeyValue } from './components/KeyValue'
 import { SummaryCardRow } from './components/SummaryCardRow'
+import { SummaryCard } from './components/SummaryCard'
+import { summary } from '../../lib/messages'
 
 type Props = {
   answers: RentalAgreement
@@ -34,20 +34,16 @@ export const OtherFeesSummary = ({ answers, goToScreen, route }: Props) => {
   const tenantPaysHeating =
     answers.rentOtherFees.heatingCost === RentOtherFeesPayeeOptions.TENANT
 
-  console.log('isTenantPayinhHouseFund', tenantPaysHouseFund)
-  console.log('isTenantPayingElectricity', tenantPaysElectricity)
-  console.log('isTenantPayingHeating', tenantPaysHeating)
-
   return (
-    <SummarySection sectionLabel={formatMessage(summary.otherCostsHeader)}>
+    <SummaryCard cardLabel={formatMessage(summary.otherCostsHeader)}>
       <SummaryCardRow
         editAction={goToScreen}
         route={route}
         isLast={
           !tenantPaysHouseFund && !tenantPaysElectricity && !tenantPaysHeating
         }
       >
-        <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+        <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
           <KeyValue
             label={summary.electricityCostLabel}
             value={
@@ -56,15 +52,15 @@ export const OtherFeesSummary = ({ answers, goToScreen, route }: Props) => {
             }
           />
         </GridColumn>
-        <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+        <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
           <KeyValue
             label={summary.heatingCostLabel}
             value={
               otherFeesPayee(answers.rentOtherFees.heatingCost as string) || '-'
             }
           />
         </GridColumn>
-        <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+        <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
           <KeyValue
             label={summary.houseFundLabel}
             value={
@@ -80,19 +76,19 @@ export const OtherFeesSummary = ({ answers, goToScreen, route }: Props) => {
           route={route}
           isLast={!tenantPaysHouseFund && !tenantPaysHeating}
         >
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.electricityMeterNumberLabel}
               value={answers.rentOtherFees.electricityCostMeterNumber || '-'}
             />
           </GridColumn>
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.meterStatusLabel}
               value={answers.rentOtherFees.electricityCostMeterStatus || '-'}
             />
           </GridColumn>
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.dateOfMeterReadingLabel}
               value={
@@ -113,19 +109,19 @@ export const OtherFeesSummary = ({ answers, goToScreen, route }: Props) => {
           route={route}
           isLast={!tenantPaysHouseFund}
         >
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.heatingCostMeterNumberLabel}
               value={answers.rentOtherFees.heatingCostMeterNumber || '-'}
             />
           </GridColumn>
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.meterStatusLabel}
               value={answers.rentOtherFees.heatingCostMeterStatus || '-'}
             />
           </GridColumn>
-          <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
+          <GridColumn span={['12/12', '6/12', '6/12', '4/12', '4/12']}>
             <KeyValue
               label={summary.dateOfMeterReadingLabel}
               value={
@@ -154,6 +150,6 @@ export const OtherFeesSummary = ({ answers, goToScreen, route }: Props) => {
           </GridColumn>
         </SummaryCardRow>
       )}
-    </SummarySection>
+    </SummaryCard>
   )
 }

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

@@ -1,4 +1,4 @@
-import { GridColumn, Link, Text } from '@island.is/island-ui/core'
+import { Box, GridColumn, Link, Text } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
 import { RentalAgreement } from '../../lib/dataSchema'
 import {
@@ -11,11 +11,12 @@ import {
   getPropertyClassOptions,
   getPropertyClassGroupOptions,
 } from '../../lib/utils'
-import { summary } from '../../lib/messages'
-import { KeyValue } from './KeyValue'
-import { SummarySection } from './SummarySection'
-import { fileLink, fileLinksList } from './summaryStyles.css'
+import { KeyValue } from './components/KeyValue'
 import { SummaryCardRow } from './components/SummaryCardRow'
+import { SummaryCard } from './components/SummaryCard'
+
+import { fileLink, fileLinksList } from './summaryStyles.css'
+import { summary } from '../../lib/messages'
 
 type Props = {
   answers: RentalAgreement
@@ -61,7 +62,7 @@ export const PropertyInfoSummary = ({
   }
 
   return (
-    <SummarySection sectionLabel={formatMessage(summary.propertyInfoHeader)}>
+    <SummaryCard cardLabel={formatMessage(summary.propertyInfoHeader)}>
       <SummaryCardRow editAction={goToScreen} route={categoryRoute}>
         <GridColumn span={['12/12', '6/12', '6/12', '6/12', '4/12']}>
           <KeyValue
@@ -162,29 +163,31 @@ export const PropertyInfoSummary = ({
         answers.condition.resultsFiles.length > 0 && (
           <SummaryCardRow editAction={goToScreen} route={fileUploadRoute}>
             <GridColumn span={['12/12']}>
-              <Text
-                variant={'small'}
-                as={'label'}
-                fontWeight="semiBold"
-                marginBottom={1}
-              >
-                {formatMessage(summary.fileUploadLabel)}
-              </Text>
-              <ul className={fileLinksList}>
-                {answers.condition.resultsFiles.map((file) => (
-                  <li key={file.name} className={fileLink}>
-                    <Link
-                      underline="small"
-                      underlineVisibility="hover"
-                      color="blue400"
-                      // TODO: Change this to the correct URL
-                      href={'http://localhost:4242/umsoknir/leigusamningur'}
-                    >
-                      {file.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+              <Box paddingY={'p2'}>
+                <Text
+                  variant={'small'}
+                  as={'label'}
+                  fontWeight="semiBold"
+                  marginBottom={1}
+                >
+                  {formatMessage(summary.fileUploadLabel)}
+                </Text>
+                <ul className={fileLinksList}>
+                  {answers.condition.resultsFiles.map((file) => (
+                    <li key={file.name} className={fileLink}>
+                      <Link
+                        underline="small"
+                        underlineVisibility="hover"
+                        color="blue400"
+                        // TODO: Change this to the correct URL
+                        href={'http://localhost:4242/umsoknir/leigusamningur'}
+                      >
+                        {file.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </Box>
             </GridColumn>
           </SummaryCardRow>
         )
@@ -220,6 +223,6 @@ export const PropertyInfoSummary = ({
           />
         </GridColumn>
       </SummaryCardRow>
-    </SummarySection>
+    </SummaryCard>
   )
 }

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

@@ -16,10 +16,10 @@ import {
   getSecurityAmountOptions,
   getSecurityDepositTypeOptions,
 } from '../../lib/utils'
-import { summary } from '../../lib/messages'
-import { KeyValue } from './KeyValue'
-import { SummarySection } from './SummarySection'
+import { SummaryCard } from './components/SummaryCard'
 import { SummaryCardRow } from './components/SummaryCardRow'
+import { KeyValue } from './components/KeyValue'
+import { summary } from '../../lib/messages'
 
 type Props = {
   answers: RentalAgreement
@@ -89,7 +89,7 @@ export const RentalInfoSummary = ({
   }
 
   return (
-    <SummarySection>
+    <SummaryCard>
       {/* Property Address */}
       <SummaryCardRow isChangeButton={false}>
         <GridColumn span={['12/12']}>
@@ -234,6 +234,6 @@ export const RentalInfoSummary = ({
           )}
         </SummaryCardRow>
       )}
-    </SummarySection>
+    </SummaryCard>
   )
 }