feat: add hours warning to resource page (#479)

* feat: add hours warning to resource page

* feat: update covid warning

* chore: remove unnecessary fragment from <Resource/>

Co-authored-by: Jeremiah Tabb <51095001+jollyjerr@users.noreply.github.com>

Author: jacobvenable

packages/common/src/i18n/en.ts

@@ -147,6 +147,8 @@ export default {
     address: "Address",
     phoneNumber: "Phone Number",
     website: "Website",
+    covidWarning: "COVID-19 may affect normal business hours and operations.",
+    checkWebsite: "Please check their website for up-to-date info.",
     hoursOfOperation: "Hours of Operation",
     reportAProblem: "Report a Problem",
     services: "Services",

packages/common/src/i18n/es.ts

@@ -149,6 +149,9 @@ export default {
     address: "Dirección",
     phoneNumber: "Número de Teléfono",
     website: "Sitio Web",
+    covidWarning:
+      "COVID-19 puede afectar el horario comercial y las operaciones normales.",
+    checkWebsite: "Consulte su sitio web para obtener información actualizada.",
     hoursOfOperation: "Horas de Operación",
     reportAProblem: "Reportar un Problema",
     services: "Servicios",

packages/web/src/components/Resource.tsx

@@ -2,6 +2,7 @@ import { TCategoryDefinition, categories } from "./Categories";
 
 import BannerColorContext from "./BannerColorContext";
 import Button from "@material-ui/core/Button/Button";
+import Card from "@material-ui/core/Card";
 import Container from "@material-ui/core/Container";
 import FavoriteResourceFAB from "./FavoriteResourceFAB";
 import Image from "material-ui-image";
@@ -25,6 +26,7 @@ import Services from "./Services";
 import { TResource } from "@upswyng/types";
 import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import Typography from "@material-ui/core/Typography";
+import WarningIcon from "@material-ui/icons/Warning";
 import { colors } from "@upswyng/common";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import { useHistory } from "react-router";
@@ -110,6 +112,14 @@ export const Resource = () => {
         />
       )}
       <List component="div">
+        <ListItem component={Card}>
+          <ListItemIcon classes={listIconClasses}>
+            <WarningIcon color="secondary" />
+          </ListItemIcon>
+          <ListItemText>{`${t("covidWarning")} ${
+            !!resource.website ? t("checkWebsite") : ""
+          }`}</ListItemText>
+        </ListItem>
         {resource.address && (
           <ListItem component="div">
             <ListItemIcon classes={listIconClasses}>