fix: rebuilds/-styles (and -names) application (pre)view component

- ViewInner.tsx becomes ViewApplication.tsx

apps/ui/components/application/ApplicantInfoPreview.tsx

@@ -1,86 +1,77 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { ApplicantTypeChoice, type ApplicationQuery } from "@gql/gql-types";
-import { getTranslation } from "common/src/common/util";
-import { SpanTwoColumns, TwoColumnContainer } from "../common/common";
-import Address from "./AddressPreview";
-import { StyledLabelValue } from "./styled";
+import {
+  ApplicationInfoContainer,
+  InfoItemContainer,
+  InfoItem,
+} from "./styled";
 
+const LabelValue = ({
+  label,
+  value,
+}: {
+  label: string;
+  value?: string | number | null;
+}) => {
+  return (
+    <InfoItemContainer>
+      <InfoItem>
+        <h4 className="info-label">{label}</h4>
+        <p>{value}</p>
+      </InfoItem>
+    </InfoItemContainer>
+  );
+};
 type Node = NonNullable<ApplicationQuery["application"]>;
 export function ApplicantInfoPreview({
   application,
 }: {
   application: Node;
 }): JSX.Element {
   const { t } = useTranslation();
-
+  const applicant = {
+    firstName: application.contactPerson?.firstName,
+    lastName: application.contactPerson?.lastName,
+    email: application.contactPerson?.email,
+    phoneNumber: application.contactPerson?.phoneNumber,
+  };
+  const fullName = `${applicant.firstName} ${applicant.lastName}`;
+  const contactsString = `${applicant.phoneNumber} / ${applicant.email}`;
+  const addressString = `${application.billingAddress?.streetAddressFi}, ${application.billingAddress?.postCode} ${application.billingAddress?.cityFi}`;
   return (
-    <TwoColumnContainer>
+    <ApplicationInfoContainer>
       {application.applicantType == null ? (
         // TODO translate (though this is more a system error than a user error)
         <div style={{ gridColumn: "1 / -1" }}>ERROR: applicantType is null</div>
       ) : application.applicantType !== ApplicantTypeChoice.Individual ? (
         <>
-          <StyledLabelValue
+          <LabelValue
             label={t("application:preview.organisation.name")}
             value={application.organisation?.nameFi}
           />
-          <StyledLabelValue
-            label={t("application:preview.applicantTypeLabel")}
-            value={t(
-              `application:preview.applicantType.${application.applicantType}`
-            )}
-          />
-          <SpanTwoColumns>
-            <StyledLabelValue
-              label={t("application:preview.organisation.coreBusiness")}
-              value={application.organisation?.coreBusinessFi}
-            />
-          </SpanTwoColumns>
-          <SpanTwoColumns>
-            <StyledLabelValue
-              label={t("application:preview.homeCity")}
-              value={getTranslation(application.homeCity ?? {}, "name")}
-            />
-          </SpanTwoColumns>
-          <Address
-            address={application.organisation?.address ?? undefined}
-            i18nMessagePrefix="common:address"
+          <LabelValue
+            label={t("application:preview.organisation.coreBusiness")}
+            value={application.organisation?.coreBusinessFi}
           />
-          <Address
-            address={application.billingAddress ?? undefined}
-            i18nMessagePrefix="common:billingAddress"
+          <LabelValue
+            label={t("application:preview.applicantTypeLabel")}
+            value={application.organisation?.identifier}
           />
         </>
       ) : null}
-      <StyledLabelValue
-        label={t("application:preview.firstName")}
-        value={application.contactPerson?.firstName}
+      <LabelValue
+        label={t("application:preview.contactPerson")}
+        value={fullName}
       />
-      <StyledLabelValue
-        label={t("application:preview.lastName")}
-        value={application.contactPerson?.lastName}
+      <LabelValue
+        label={t("application:preview.contactInfo")}
+        value={contactsString}
       />
-      <StyledLabelValue
-        label={t("application:preview.email")}
-        value={application.contactPerson?.email}
+      <LabelValue
+        label={t("application:preview.address")}
+        value={addressString}
       />
-      <StyledLabelValue
-        label={t("application:preview.phoneNumber")}
-        value={application.contactPerson?.phoneNumber}
-      />
-      {application.applicantType === ApplicantTypeChoice.Individual ? (
-        <>
-          <Address
-            address={application.billingAddress ?? undefined}
-            i18nMessagePrefix="common:address"
-          />
-          <StyledLabelValue
-            label={t("application:preview.additionalInformation")}
-            value={application.additionalInformation}
-          />
-        </>
-      ) : null}
-    </TwoColumnContainer>
+    </ApplicationInfoContainer>
   );
 }