fix: style html terms correctly

refactor: move Sanitizer to common components.
City-of-Helsinki · Jan 16, 2025 · 7fd47fa · 7fd47fa
1 parent c5a7c61
commit 7fd47fa
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 34 deletions.
diff --git a/apps/admin-ui/src/component/ShowTOS.tsx b/apps/admin-ui/src/component/ShowTOS.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { useGenericTerms } from "common/src/hooks/useGenericTerms";
 import { Maybe, type TermsOfUseNode } from "@gql/gql-types";
+import { Sanitize } from "common/src/components/Sanitize";
 
 // NOTE This is partial duplicate from ui/application/Preview.tsx
 // see if we can combine them (and other Terms later with parameters)
@@ -22,12 +23,22 @@ const Terms = styled.div`
   }
 `;
 
-const TOSElement = ({ title, text }: { title: string; text: string }) => (
-  <Terms>
-    <h3>{title}</h3>
-    <p>{text}</p>
-  </Terms>
-);
+function TOSElement({
+  title,
+  text,
+  isHtml,
+}: {
+  title: string;
+  text: string;
+  isHtml?: boolean;
+}) {
+  return (
+    <Terms>
+      <h3>{title}</h3>
+      {isHtml ? <Sanitize html={text} /> : <p>{text}</p>}
+    </Terms>
+  );
+}
 
 // TODO use a fragment
 type TOSNode = Pick<TermsOfUseNode, "textFi">;
@@ -77,6 +88,7 @@ const ShowTOS = ({ reservationUnit }: { reservationUnit: Node }) => {
       <TOSElement
         title={t("tos.generalTermsTitle")}
         text={genericTerms?.textFi ?? ""}
+        isHtml
       />
     </div>
   );

diff --git a/apps/ui/components/CancellationForm.tsx b/apps/ui/components/CancellationForm.tsx
@@ -5,7 +5,6 @@ import { Button, IconCross } from "hds-react";
 import { useTranslation } from "next-i18next";
 import { fontMedium } from "common/src/common/typography";
 import { type CancelReasonFieldsFragment } from "@gql/gql-types";
-import Sanitize from "./common/Sanitize";
 import {
   convertLanguageCode,
   getTranslationSafe,
@@ -16,6 +15,7 @@ import { ButtonLikeLink } from "./common/ButtonLikeLink";
 import TermsBox from "common/src/termsbox/TermsBox";
 import { AccordionWithState } from "./Accordion";
 import { breakpoints } from "common";
+import { Sanitize } from "common/src/components/Sanitize";
 
 const Actions = styled(ButtonContainer).attrs({
   $justifyContent: "space-between",

diff --git a/apps/ui/components/application/ApprovedReservations.tsx b/apps/ui/components/application/ApprovedReservations.tsx
@@ -40,7 +40,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import Sanitize from "../common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { LinkLikeButton } from "common/styles/buttonCss";
 import { type TFunction } from "i18next";
 import { convertWeekday } from "common/src/conversion";

diff --git a/apps/ui/components/application/NotesWhenApplying.tsx b/apps/ui/components/application/NotesWhenApplying.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next";
 import styled from "styled-components";
 import { getTranslationSafe } from "common/src/common/util";
 import { getLocalizationLang } from "common/src/helpers";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { H4 } from "common";
 
 const NotesBox = styled.div`

diff --git a/apps/ui/components/application/ViewApplication.tsx b/apps/ui/components/application/ViewApplication.tsx
@@ -15,7 +15,7 @@ import {
   TermsAccordion as Accordion,
 } from "./styled";
 import { ApplicationEventList } from "./ApplicationEventList";
-import Sanitize from "../common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import TermsBox from "common/src/termsbox/TermsBox";
 import {
   convertLanguageCode,

diff --git a/apps/ui/components/common/InfoDialog.tsx b/apps/ui/components/common/InfoDialog.tsx
@@ -2,7 +2,7 @@ import { Dialog, IconInfoCircleFill } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import { BlackButton } from "../../styles/util";
-import Sanitize from "./Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 
 type Props = {
   id: string;

diff --git a/apps/ui/components/reservation/AcceptTerms.tsx b/apps/ui/components/reservation/AcceptTerms.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import TermsBox from "common/src/termsbox/TermsBox";
 import { useTranslation } from "next-i18next";
 import { getTranslation } from "@/modules/util";
-import Sanitize from "../common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { type ReservationUnitPageQuery } from "@/gql/gql-types";
 import { Flex } from "common/styles/util";
 

diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
@@ -34,7 +34,7 @@ import { ReservationTimePicker } from "./ReservationTimePicker";
 import { QuickReservation } from "../reservation-unit/QuickReservation";
 import { getNextAvailableTime } from "../reservation-unit/utils";
 import { ReservationInfoCard } from "./ReservationInfoCard";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { type RoundPeriod } from "@/modules/reservable";
 import { PinkBox as PinkBoxBase } from "./styles";
 import { H4 } from "common";

diff --git a/apps/ui/package.json b/apps/ui/package.json
@@ -42,7 +42,6 @@
     "react-hook-form": "^7.52.1",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.5.1",
-    "sanitize-html": "^2.13.0",
     "sass": "^1.81.0",
     "styled-components": "5.3.11",
     "tsconfig": "workspace:*",
@@ -60,7 +59,6 @@
     "@types/react": "18.2.7",
     "@types/react-dom": "18.3.0",
     "@types/react-transition-group": "^4.4.11",
-    "@types/sanitize-html": "^2.13.0",
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
     "axe-core": "^4.10.0",

diff --git a/apps/ui/pages/recurring/[id]/criteria/index.tsx b/apps/ui/pages/recurring/[id]/criteria/index.tsx
@@ -10,7 +10,7 @@ import {
 } from "@gql/gql-types";
 import { breakpoints, H1 } from "common";
 import { createApolloClient } from "@/modules/apolloClient";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { getTranslation } from "@/modules/util";
 import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
 import { getApplicationRoundName } from "@/modules/applicationRound";

diff --git a/apps/ui/pages/reservation-unit/[...params].tsx b/apps/ui/pages/reservation-unit/[...params].tsx
@@ -26,7 +26,7 @@ import {
 import { type Inputs } from "common/src/reservation-form/types";
 import { createApolloClient } from "@/modules/apolloClient";
 import { getReservationPath, getReservationUnitPath } from "@/modules/urls";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { isReservationUnitFreeOfCharge } from "@/modules/reservationUnit";
 import {
   getCheckoutUrl,

diff --git a/apps/ui/pages/reservation-unit/[id].tsx b/apps/ui/pages/reservation-unit/[id].tsx
@@ -37,7 +37,7 @@ import {
 } from "common/src/helpers";
 import { Head } from "@/components/reservation-unit/Head";
 import { AddressSection } from "@/components/reservation-unit/Address";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import {
   RelatedUnits,
   type RelatedNodeT,

diff --git a/apps/ui/pages/reservations/[id]/index.tsx b/apps/ui/pages/reservations/[id]/index.tsx
@@ -29,7 +29,7 @@ import {
 import Link from "next/link";
 import { createApolloClient } from "@/modules/apolloClient";
 import { formatDateTimeRange } from "@/modules/util";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import { AccordionWithState as Accordion } from "@/components/Accordion";
 import {
   getCheckoutUrl,

diff --git a/apps/ui/pages/terms/[id].tsx b/apps/ui/pages/terms/[id].tsx
@@ -11,7 +11,7 @@ import {
 import { H1 } from "common/src/common/typography";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { createApolloClient } from "@/modules/apolloClient";
-import Sanitize from "@/components/common/Sanitize";
+import { Sanitize } from "common/src/components/Sanitize";
 import {
   convertLanguageCode,
   getTranslationSafe,

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -33,6 +33,7 @@
     "react-hook-form": "^7.52.1",
     "react-toastify": "^10.0.5",
     "react-use": "^17.5.1",
+    "sanitize-html": "^2.13.0",
     "styled-components": "5.3.11",
     "tsconfig": "workspace:*",
     "zod": "^3.23.8"
@@ -53,6 +54,7 @@
     "@types/react": "^18.2.7",
     "@types/react-big-calendar": "^1.16.0",
     "@types/react-dom": "18.3.0",
+    "@types/sanitize-html": "^2.13.0",
     "@types/styled-components": "^5.1.29",
     "@vercel/style-guide": "^6.0.0",
     "chalk": "^5.3.0",

diff --git a/apps/ui/components/common/Sanitize.tsx → packages/common/src/components/Sanitize.tsx b/apps/ui/components/common/Sanitize.tsx → packages/common/src/components/Sanitize.tsx
@@ -11,6 +11,7 @@ const StyledContent = styled.div`
   p:empty {
     display: none;
   }
+
   /* old data has extra line-breaks instead of just using <p> */
   p br {
     display: none;
@@ -51,7 +52,7 @@ const config = {
   },
 };
 
-function Sanitize({ html }: Props): JSX.Element | null {
+export function Sanitize({ html }: Props): JSX.Element | null {
   if (!html) {
     return null;
   }
@@ -64,5 +65,3 @@ function Sanitize({ html }: Props): JSX.Element | null {
     />
   );
 }
-
-export default Sanitize;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml