All files / src/features/Events/EventDetail/reviews EventReviewReply.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Stack } from "@mui/material";
import GiveAvatar from "@shared/Avatar/GiveAvatar";
import GiveText from "@shared/Text/GiveText";
import ReviewReplyBody from "./ReviewReplyBody";
import { formatReviewDate } from "./reviewDate";
import { EventReviewRow } from "./review.types";
 
type Props = { review: EventReviewRow };
 
/**
 * The merchant's published reply, nested under the review it answers
 * (frames 7506-74973 / 7506-75447).
 *
 * Attributed to the business, never to the staff member who wrote it — this
 * same text is what the public event page shows, which is why the clamp and its
 * Show More live in the shared ReviewReplyBody rather than here.
 */
const EventReviewReply = ({ review }: Props) => {
  const date = formatReviewDate(review.repliedAt);
 
  return (
    <Stack gap="12px" data-testid={`event-review-reply-${review.id}`}>
      <Stack direction="row" gap="12px" alignItems="flex-start">
        <GiveAvatar size="32px" name={review.replyAuthorName} />
        <Stack gap="2px">
          <GiveText variant="bodyM" color="primary">
            {review.replyAuthorName}
          </GiveText>
          {/* An unset date renders nothing rather than a 1970 fallback. */}
          {date && (
            <GiveText variant="bodyXS" color="secondary">
              {date}
            </GiveText>
          )}
        </Stack>
      </Stack>
      <Stack gap="4px" alignItems="flex-start">
        <ReviewReplyBody body={review.replyBody} />
      </Stack>
    </Stack>
  );
};
 
export default EventReviewReply;