Port takeover-dialog files to TypeScript

src/app/layouts/default/takeover-dialog/common.js → src/app/layouts/default/takeover-dialog/common.tsx

@@ -6,7 +6,22 @@ const msPerSec = 1000;
 const msPerMin = msPerSec * 60;
 const msPerHour = msPerMin * 60;
 
-function getHMS(goalTimeMs) {
+export type TakeoverData = {
+    goalTime: string;
+    fundraiserImage: string;
+    colorScheme: string;
+    headline: string;
+    message: string;
+    image: string;
+    buttonText: string;
+    buttonUrl: string;
+    messageType: 'message' | 'goal';
+    boxHeadline: string;
+    boxHtml: string;
+    goalAmount: number;
+};
+
+function getHMS(goalTimeMs: number) {
     const msDiff = goalTimeMs - Date.now();
 
     return {
@@ -16,7 +31,7 @@ function getHMS(goalTimeMs) {
     };
 }
 
-function useHMS(goalTime) {
+function useHMS(goalTime: string) {
     const goalTimeMs = new Date(goalTime).getTime();
     const [hms, setHms] = React.useState(getHMS(goalTimeMs));
 
@@ -29,25 +44,30 @@ function useHMS(goalTime) {
         return () => window.clearInterval(i);
     }, [goalTimeMs]);
 
-    return (hms);
+    return hms;
 }
 
-export function Countdown({goalTime}) {
+export function Countdown({goalTime}: {goalTime: string}) {
     const {h, m, s} = useHMS(goalTime);
 
     return (
         <div className="countdown-numbers">
-            <div><span className="number">{h}</span> hours</div>
-            <div><span className="number">{m}</span> minutes</div>
-            <div><span className="number">{s}</span> seconds</div>
+            <div>
+                <span className="number">{h}</span> hours
+            </div>
+            <div>
+                <span className="number">{m}</span> minutes
+            </div>
+            <div>
+                <span className="number">{s}</span> seconds
+            </div>
         </div>
     );
 }
 
-
 const numFormat = window.Intl.NumberFormat('en-US').format; // eslint-disable-line new-cap
 
-export function Amount({amount}) {
+export function Amount({amount}: {amount: number}) {
     return (
         <div className="amount-box">
             <div className="message">our goal is to raise</div>
@@ -56,10 +76,12 @@ export function Amount({amount}) {
     );
 }
 
-export function GiveButton({text, url}) {
+export function GiveButton({text, url}: {text: string; url: string}) {
     const {close} = useTakeoverContext();
 
     return (
-        <a className="btn primary" href={url} onClick={close}>{text}</a>
+        <a className="btn primary" href={url} onClick={close}>
+            {text}
+        </a>
     );
 }

src/app/layouts/default/takeover-dialog/content-desktop.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+import {Countdown, Amount, GiveButton, TakeoverData} from './common';
+import './content-desktop.scss';
+
+function Logo() {
+    return (
+        <img
+            className="logo-color"
+            src="/dist/images/logo.svg"
+            alt="OpenStax logo"
+            width="354"
+            height="81"
+        />
+    );
+}
+
+function Basic({
+    headline,
+    message,
+    image,
+    children
+}: {
+    headline: string;
+    message: string;
+    image: string;
+    children?: React.ReactNode;
+}) {
+    return (
+        <div className="takeover-content desktop-only">
+            <div className="text-side">
+                <Logo />
+                <RawHTML Tag="h1" html={headline} id="takeover-headline" />
+                <div className="message">{message}</div>
+                {children}
+            </div>
+            <div
+                className="picture-side"
+                style={{backgroundImage: `url(${image})`}}
+            />
+        </div>
+    );
+}
+
+function MessageBox({
+    buttonText,
+    buttonUrl,
+    headline,
+    html
+}: {
+    buttonText: string;
+    buttonUrl: string;
+    headline: string;
+    html: string;
+}) {
+    return (
+        <React.Fragment>
+            <GiveButton text={buttonText} url={buttonUrl} />
+            <div className="message-box">
+                <div className="color-fill" />
+                <div className="text-content">
+                    <h2>{headline}</h2>
+                    <RawHTML html={html} />
+                </div>
+            </div>
+        </React.Fragment>
+    );
+}
+
+function GoalBox({
+    buttonText,
+    buttonUrl,
+    goalAmount,
+    goalTime
+}: {
+    buttonText: string;
+    buttonUrl: string;
+    goalAmount: number;
+    goalTime: string;
+}) {
+    return (
+        <div className="goal-box">
+            <Amount amount={goalAmount} />
+            <div className="timer-side">
+                <a className="btn primary" href={buttonUrl}>
+                    {buttonText}
+                </a>
+                <div className="message">help us meet our goal in the next</div>
+                <Countdown goalTime={goalTime} />
+            </div>
+        </div>
+    );
+}
+
+function Box({data}: {data: TakeoverData}) {
+    return (
+        {
+            message: (
+                <MessageBox
+                    buttonText={data.buttonText}
+                    buttonUrl={data.buttonUrl}
+                    headline={data.boxHeadline}
+                    html={data.boxHtml}
+                />
+            ),
+            goal: (
+                <GoalBox
+                    buttonText={data.buttonText}
+                    buttonUrl={data.buttonUrl}
+                    goalAmount={data.goalAmount!}
+                    goalTime={data.goalTime}
+                />
+            )
+        }[data.messageType] || <h1>OOPS, {data.messageType}</h1>
+    );
+}
+
+export default function DesktopContent({data}: {data: TakeoverData}) {
+    return (
+        <Basic
+            headline={data.headline}
+            message={data.message}
+            image={data.image}
+        >
+            <Box data={data} />
+        </Basic>
+    );
+}