-
Notifications
You must be signed in to change notification settings - Fork 4
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
base: refactor-seasonal-reservation
Are you sure you want to change the base?
Changes from all commits
163a52d
942f96f
1902b61
fa97cb2
4f47eb9
3766c86
ba6e906
4070451
efff030
d74433e
5a488f5
f59b5e2
acdb5c3
ca636b6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
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" : "" | ||
} | ||
> | ||
<InfoItem> | ||
<h4 className="info-label">{label}</h4> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
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> | ||
); | ||
} |
There was a problem hiding this comment.
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?