Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit c07db96

Browse files
joonatankjoonatank
committed
add: testids to admin reservation
1 parent f0f6bc7 commit c07db96

1 file changed

Lines changed: 143 additions & 181 deletions

File tree

‎apps/admin-ui/src/component/reservations/requested/RequestedReservation.tsx‎

Lines changed: 143 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { trim } from "lodash";
33
import React, { useEffect, useRef, useState } from "react";
44
import { useTranslation } from "react-i18next";
55
import { useParams } from "react-router-dom";
6-
import styled from "styled-components";
6+
import styled, { css } from "styled-components";
77
import type { TFunction } from "i18next";
88
import { add, startOfISOWeek } from "date-fns";
99
import { breakpoints } from "common/src/common/style";
1010
import {
11-
type Maybe,
1211
type ReservationQuery,
1312
CustomerTypeChoice,
1413
PricingType,
@@ -59,72 +58,62 @@ const Summary = styled(ApplicationDatas)`
5958
padding: var(--spacing-m);
6059
gap: var(--spacing-s);
6160
background: var(--color-black-5);
62-
63-
display: grid;
64-
grid-template-columns: 1fr;
65-
@media (min-width: ${breakpoints.m}) {
66-
grid-template-columns: 1fr 1fr;
67-
}
6861
`;
6962

70-
const PropValue = styled.span`
71-
white-space: pre-wrap;
72-
${fontMedium}
73-
`;
74-
function ApplicationProp({
75-
label,
76-
data,
77-
wide,
78-
}: {
79-
label: string;
80-
data?: Maybe<string> | number;
81-
wide?: boolean;
82-
}) {
83-
if (data == null) {
84-
return null;
85-
}
86-
return (
87-
<div style={{ gridColumn: wide ? "1 / -1" : "" }}>
88-
{label}:{" "}
89-
<PropValue data-testid={`reservation__summary--${label}`}>
90-
{data}
91-
</PropValue>
92-
</div>
93-
);
94-
}
95-
96-
// Need to set max-width otherwise word-break doesn't work, different max-width because of the side menu.
97-
const KVPair = styled.div<{ $wide?: boolean }>`
98-
font-weight: 400;
99-
max-width: calc(50vw - 32px);
100-
grid-column: ${({ $wide }) => ($wide ? "1 / span 2" : "auto")};
101-
@media (width > ${breakpoints.m}) {
102-
max-width: calc(50vw - 100px);
103-
}
104-
`;
105-
const Label = styled.div`
106-
padding-bottom: var(--spacing-xs);
107-
color: var(--color-black-70);
63+
const Label = styled.div<{ $isSummary?: boolean }>`
64+
${({ $isSummary }) =>
65+
$isSummary &&
66+
css`
67+
color: var(--color-black-70);
68+
display: inline-block;
69+
`};
10870
`;
109-
const Value = styled.div`
110-
font-size: var(--fontsize-body-l);
71+
const Value = styled.div<{ $isSummary?: boolean }>`
11172
word-wrap: break-word;
73+
overflow-wrap: anywhere;
74+
${({ $isSummary }) =>
75+
$isSummary
76+
? css`
77+
${fontMedium}
78+
white-space: pre-wrap;
79+
display: inline-block;
80+
`
81+
: css`
82+
font-size: var(--fontsize-body-l);
83+
`};
84+
`;
85+
const KVWrapper = styled.div<{ $isWide?: boolean; $isSummary?: boolean }>`
86+
grid-column: ${({ $isWide }) => ($isWide ? "1 / -1" : "")};
87+
${({ $isSummary }) =>
88+
$isSummary &&
89+
css`
90+
display: flex;
91+
gap: var(--spacing-2-xs);
92+
`};
11293
`;
11394

114-
const ApplicationData = ({
95+
function DataWrapper({
11596
label,
116-
data,
117-
wide,
97+
children,
98+
isWide,
99+
isSummary,
118100
}: {
119101
label: string;
120-
data?: Maybe<string> | number | JSX.Element;
121-
wide?: boolean;
122-
}) => (
123-
<KVPair $wide={wide}>
124-
<Label>{label}</Label>
125-
<Value>{data}</Value>
126-
</KVPair>
127-
);
102+
children: React.ReactNode;
103+
isWide?: boolean;
104+
isSummary?: boolean;
105+
}): JSX.Element {
106+
const testSection = isSummary ? "summary" : "info";
107+
const testId = `reservation__${testSection}--${label}`;
108+
return (
109+
<KVWrapper $isWide={isWide} $isSummary={isSummary}>
110+
<Label $isSummary={isSummary}>{label}:</Label>
111+
<Value data-testid={testId} $isSummary={isSummary}>
112+
{children}
113+
</Value>
114+
</KVWrapper>
115+
);
116+
}
128117

129118
function ButtonsWithPermChecks({
130119
reservation,
@@ -276,14 +265,18 @@ function ReservationSummary({
276265

277266
return (
278267
<Summary>
279-
{summary.map((e) => (
280-
<ApplicationProp
281-
key={e.l}
282-
label={t(e.l)}
283-
data={e.v}
284-
wide={e.l === "RequestedReservation.handlingDetails"}
285-
/>
286-
))}
268+
{summary
269+
.filter((e) => e.v != null)
270+
.map((e) => (
271+
<DataWrapper
272+
isSummary
273+
key={e.l}
274+
label={t(e.l)}
275+
isWide={e.l === "RequestedReservation.handlingDetails"}
276+
>
277+
{e.v}
278+
</DataWrapper>
279+
))}
287280
</Summary>
288281
);
289282
}
@@ -482,147 +475,116 @@ function RequestedReservation({
482475
<TimeBlock reservation={reservation} onReservationUpdated={refetch} />
483476
<Accordion heading={t("RequestedReservation.reservationDetails")}>
484477
<ApplicationDatas>
485-
<ApplicationData
486-
label={t("RequestedReservation.id")}
487-
data={reservation.pk}
488-
/>
489-
<ApplicationData
490-
label={t("RequestedReservation.numPersons")}
491-
data={reservation.numPersons}
492-
/>
478+
<DataWrapper label={t("RequestedReservation.id")}>
479+
{reservation.pk}
480+
</DataWrapper>
481+
<DataWrapper label={t("RequestedReservation.numPersons")}>
482+
{reservation.numPersons}
483+
</DataWrapper>
493484
{reservation.ageGroup && (
494-
<ApplicationData
495-
label={t("filters.ageGroup")}
496-
data={`${ageGroup(reservation.ageGroup)} ${t(
497-
"RequestedReservation.ageGroupSuffix"
498-
)}`}
499-
/>
485+
<DataWrapper label={t("filters.ageGroup")}>
486+
{`${ageGroup(reservation.ageGroup)} ${t("RequestedReservation.ageGroupSuffix")}`}
487+
</DataWrapper>
500488
)}
501-
<ApplicationData
502-
label={t("filters.purpose")}
503-
data={reservation.purpose?.nameFi}
504-
/>
505-
<ApplicationData
506-
label={t("RequestedReservation.description")}
507-
data={reservation.description}
508-
/>
489+
<DataWrapper label={t("filters.purpose")}>
490+
{reservation.purpose?.nameFi}
491+
</DataWrapper>
492+
<DataWrapper label={t("RequestedReservation.description")}>
493+
{reservation.description}
494+
</DataWrapper>
509495
</ApplicationDatas>
510496
</Accordion>
511497
<Accordion heading={t("RequestedReservation.reservationUser")}>
512498
<ApplicationDatas>
513-
<ApplicationData
514-
label={t("RequestedReservation.reserveeType")}
515-
data={translateType(reservation, t)}
516-
wide={
517-
reservation.reserveeType === CustomerTypeChoice.Individual
518-
}
519-
/>
520-
<ApplicationData
499+
<DataWrapper label={t("RequestedReservation.reserveeType")}>
500+
{translateType(reservation, t)}
501+
</DataWrapper>
502+
<DataWrapper
521503
label={t(
522504
reservation.reserveeType === CustomerTypeChoice.Business
523505
? "RequestedReservation.reserveeBusinessName"
524506
: "RequestedReservation.reserveeOrganisationName"
525507
)}
526-
data={reservation.reserveeOrganisationName}
527-
/>
528-
<ApplicationData
529-
label={t("filters.homeCity")}
530-
data={reservation.homeCity?.nameFi}
531-
/>
532-
<ApplicationData
533-
label={t("RequestedReservation.reserveeId")}
534-
data={
535-
reservation.reserveeId ||
536-
t("RequestedReservation.noReserveeId")
537-
}
538-
/>
539-
<ApplicationData
540-
label={t("RequestedReservation.reserveeFirstName")}
541-
data={reservation.reserveeFirstName}
542-
/>
543-
<ApplicationData
544-
label={t("RequestedReservation.reserveeLastName")}
545-
data={reservation.reserveeLastName}
546-
/>
547-
<ApplicationData
548-
label={t("RequestedReservation.reserveePhone")}
549-
data={reservation.reserveePhone}
550-
/>
551-
<ApplicationData
552-
label={t("RequestedReservation.reserveeEmail")}
553-
data={reservation.reserveeEmail}
554-
/>
508+
>
509+
{reservation.reserveeOrganisationName}
510+
</DataWrapper>
511+
<DataWrapper label={t("filters.homeCity")}>
512+
{reservation.homeCity?.nameFi}
513+
</DataWrapper>
514+
<DataWrapper label={t("RequestedReservation.reserveeId")}>
515+
{reservation.reserveeId ||
516+
t("RequestedReservation.noReserveeId")}
517+
</DataWrapper>
518+
<DataWrapper label={t("RequestedReservation.reserveeFirstName")}>
519+
{reservation.reserveeFirstName}
520+
</DataWrapper>
521+
<DataWrapper label={t("RequestedReservation.reserveeLastName")}>
522+
{reservation.reserveeLastName}
523+
</DataWrapper>
524+
<DataWrapper label={t("RequestedReservation.reserveePhone")}>
525+
{reservation.reserveePhone}
526+
</DataWrapper>
527+
<DataWrapper label={t("RequestedReservation.reserveeEmail")}>
528+
{reservation.reserveeEmail}
529+
</DataWrapper>
555530
</ApplicationDatas>
556531
</Accordion>
557532
{isNonFree && (
558533
<Accordion heading={t("RequestedReservation.pricingDetails")}>
559534
<ApplicationDatas>
560-
<ApplicationData
561-
label={t("RequestedReservation.price")}
562-
data={reservation.price && reservationPrice(reservation, t)}
563-
/>
564-
<ApplicationData
565-
label={t("RequestedReservation.paymentState")}
566-
data={
567-
reservation.order?.status == null
568-
? "-"
569-
: t(`Payment.status.${reservation.order?.status}`)
570-
}
571-
/>
572-
<ApplicationData
535+
<DataWrapper label={t("RequestedReservation.price")}>
536+
{reservation.price && reservationPrice(reservation, t)}
537+
</DataWrapper>
538+
<DataWrapper label={t("RequestedReservation.paymentState")}>
539+
{reservation.order?.status == null
540+
? "-"
541+
: t(`Payment.status.${reservation.order?.status}`)}
542+
</DataWrapper>
543+
<DataWrapper
573544
label={t("RequestedReservation.applyingForFreeOfCharge")}
574-
data={t(
545+
>
546+
{t(
575547
reservation.applyingForFreeOfCharge
576548
? "common.true"
577549
: "common.false"
578550
)}
579-
/>
580-
<ApplicationData
551+
</DataWrapper>
552+
<DataWrapper
581553
label={t("RequestedReservation.freeOfChargeReason")}
582-
data={reservation.freeOfChargeReason}
583-
/>
554+
>
555+
{reservation.freeOfChargeReason}
556+
</DataWrapper>
584557
</ApplicationDatas>
585558
</Accordion>
586559
)}
587560
<Accordion heading={t("RequestedReservation.reserveeDetails")}>
588561
<ApplicationDatas>
589-
<ApplicationData
590-
label={t("RequestedReservation.user")}
591-
data={
592-
trim(
593-
`${reservation?.user?.firstName || ""} ${
594-
reservation?.user?.lastName || ""
595-
}`
596-
) || t("RequestedReservation.noName")
597-
}
598-
/>
599-
<ApplicationData
600-
label={t("RequestedReservation.email")}
601-
data={reservation?.user?.email}
602-
/>
603-
<ApplicationData
604-
label={t("RequestedReservation.birthDate")}
605-
data={<BirthDate reservationPk={reservation?.pk ?? 0} />}
606-
/>
607-
<ApplicationData
608-
label={t("RequestedReservation.addressStreet")}
609-
data={
610-
<>
611-
<span>{reservation.reserveeAddressStreet || "-"}</span>
612-
<br />
613-
<span>
614-
{reservation.reserveeAddressZip ||
615-
reservation.reserveeAddressCity
616-
? `${reservation.reserveeAddressZip} ${reservation.reserveeAddressCity}`
617-
: ""}
618-
</span>
619-
</>
620-
}
621-
/>
622-
<ApplicationData
623-
label={t("RequestedReservation.addressCity")}
624-
data={reservation.reserveeAddressCity || "-"}
625-
/>
562+
<DataWrapper label={t("RequestedReservation.user")}>
563+
{trim(
564+
`${reservation?.user?.firstName || ""} ${
565+
reservation?.user?.lastName || ""
566+
}`
567+
) || t("RequestedReservation.noName")}
568+
</DataWrapper>
569+
<DataWrapper label={t("RequestedReservation.email")}>
570+
{reservation?.user?.email}
571+
</DataWrapper>
572+
<DataWrapper label={t("RequestedReservation.birthDate")}>
573+
<BirthDate reservationPk={reservation?.pk ?? 0} />
574+
</DataWrapper>
575+
<DataWrapper label={t("RequestedReservation.addressStreet")}>
576+
<span>{reservation.reserveeAddressStreet || "-"}</span>
577+
<br />
578+
<span>
579+
{reservation.reserveeAddressZip ||
580+
reservation.reserveeAddressCity
581+
? `${reservation.reserveeAddressZip} ${reservation.reserveeAddressCity}`
582+
: ""}
583+
</span>
584+
</DataWrapper>
585+
<DataWrapper label={t("RequestedReservation.addressCity")}>
586+
{reservation.reserveeAddressCity || "-"}
587+
</DataWrapper>
626588
</ApplicationDatas>
627589
</Accordion>
628590
</div>

0 commit comments

Comments
 (0)