display legal agreement

app/frontend/src/javascript/components/html-translate.tsx

@@ -0,0 +1,18 @@
+/**
+ * This component renders a translation with some HTML content.
+ */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface HtmlTranslateProps {
+  trKey: string,
+  options?: any
+}
+
+export const HtmlTranslate: React.FC<HtmlTranslateProps> = ({ trKey, options }) => {
+  const { t } = useTranslation(trKey?.split('.')[1]);
+
+  return (
+    <span dangerouslySetInnerHTML={{__html: t(trKey, options)}} />
+  );
+}

app/frontend/src/javascript/components/stripe-modal.tsx

@@ -26,6 +26,7 @@ import visaLogo from '../../../images/visa.png';
 import { CartItems, PaymentConfirmation } from '../models/payment';
 import WalletAPI from '../api/wallet';
 import PriceAPI from '../api/price';
+import { HtmlTranslate } from './html-translate';
 
 declare var Application: IApplication;
 declare var Fablab: IFablab;
@@ -193,8 +194,7 @@ const StripeModal: React.FC<StripeModalProps> = ({ isOpen, toggleModal, afterSuc
             </label>
           </div>}
           {isPaymentSchedule() && <div className="payment-schedule-info">
-            <i className="fa fa-warning" />
-            <p>{ t('app.shared.stripe.payment_schedule', { DEADLINES: schedule.items.length }) }</p>
+            <HtmlTranslate trKey="app.shared.stripe.payment_schedule_html" options={{ DEADLINES: schedule.items.length }} />
           </div>}
         </StripeForm>
         {!submitState && <button type="submit"

app/frontend/src/stylesheets/modules/stripe-modal.scss

@@ -48,11 +48,9 @@
     background-color: #fcf8e3;
     color: #8a6d3b;
 
-    .fa.fa-warning {
-      margin-right: 0.5em;
-    }
     p {
-      display: inline;
+      font-size: small;
+      margin-bottom: 0.5em;
     }
   }
   .validate-btn {