Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 14 commits into
base: refactor-seasonal-reservation
Choose a base branch
from
Open
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
1,064 changes: 501 additions & 563 deletions apps/admin-ui/gql/gql-types.ts

Large diffs are not rendered by default.

116 changes: 59 additions & 57 deletions apps/ui/components/application/ApplicantInfoPreview.tsx
Original file line number Diff line number Diff line change
@@ -1,86 +1,88 @@
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
className={
label === "preview.organisation.billingAddress" ? "fullWidth" : ""
}
>
Comment on lines +18 to +22
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this not a styled parameter? why use a CSS class?

<InfoItem>
<h4 className="info-label">{label}</h4>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why use a class?

<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 contactPersonName = `${applicant.firstName} ${applicant.lastName}`;
const contactInfo = `${applicant.phoneNumber} / ${applicant.email}`;
const addressString = `${application.organisation?.address?.streetAddressFi}, ${application.organisation?.address?.postCode} ${application.organisation?.address?.cityFi}`;
const billingAddressString = `${application.billingAddress?.streetAddressFi}, ${application.billingAddress?.postCode} ${application.billingAddress?.cityFi}`;
Comment on lines +45 to +46
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't look correct. how does it make sure these are not undefined?
so we don't end up with

"undefined, undefined undefined"

also how is the billing address checked if it exists? turning it into string with no null checks makes it impossible to check later

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.organisation.registrationNumber")}
value={application.organisation?.identifier}
/>
</>
) : null}
<StyledLabelValue
label={t("application:preview.firstName")}
value={application.contactPerson?.firstName}
/>
<StyledLabelValue
label={t("application:preview.lastName")}
value={application.contactPerson?.lastName}
<LabelValue
label={t("application:preview.contactPerson")}
value={contactPersonName}
/>
<StyledLabelValue
label={t("application:preview.email")}
value={application.contactPerson?.email}
<LabelValue
label={t("application:preview.contactInfo")}
value={contactInfo}
/>
<StyledLabelValue
label={t("application:preview.phoneNumber")}
value={application.contactPerson?.phoneNumber}
<LabelValue
label={t("application:preview.address")}
value={addressString}
/>
{application.applicantType === ApplicantTypeChoice.Individual ? (
<>
<Address
address={application.billingAddress ?? undefined}
i18nMessagePrefix="common:address"
/>
<StyledLabelValue
label={t("application:preview.additionalInformation")}
value={application.additionalInformation}
/>
</>
) : null}
</TwoColumnContainer>
{application.billingAddress && (
<LabelValue
label={t("application:preview.organisation.billingAddress")}
value={billingAddressString}
/>
)}
</ApplicationInfoContainer>
);
}
Loading