From 6e1d892e4a1797bc0aeb1697b01430fc92b24952 Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Wed, 8 Nov 2023 15:50:19 -0800
Subject: [PATCH] adding warning

---
 .../hubs/HubFormCard/HubFormCard.module.scss  |  7 ----
 .../modules/hubs/HubFormCard/HubFormCard.tsx  | 36 +++++++------------
 .../shared/Warning/Warning.module.scss        |  7 ++++
 client/components/shared/Warning/Warning.tsx  | 24 +++++++++++++
 client/pages/dashboard/dashboard.module.scss  |  8 +++++
 client/pages/dashboard/index.tsx              | 11 ++++++
 6 files changed, 62 insertions(+), 31 deletions(-)
 create mode 100644 client/components/shared/Warning/Warning.module.scss
 create mode 100644 client/components/shared/Warning/Warning.tsx

diff --git a/client/components/modules/hubs/HubFormCard/HubFormCard.module.scss b/client/components/modules/hubs/HubFormCard/HubFormCard.module.scss
index 426f6f42..a5e77948 100644
--- a/client/components/modules/hubs/HubFormCard/HubFormCard.module.scss
+++ b/client/components/modules/hubs/HubFormCard/HubFormCard.module.scss
@@ -103,10 +103,3 @@
   border-top: 2px solid $color-border-1;
   padding: 24px 32px;
 }
-
-.warning {
-  background: $color-semantic-warning;
-  margin: 0 32px;
-  padding: 24px;
-  border-radius: 20px;
-}
diff --git a/client/components/modules/hubs/HubFormCard/HubFormCard.tsx b/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
index 9a2be9f1..d1b05003 100644
--- a/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
+++ b/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
@@ -18,6 +18,7 @@ import { HubT } from 'types/General';
 import SecretCopy from '@Shared/SecretCopy/SecretCopy';
 import { CookiesE } from 'types/Cookies';
 import { getCookie } from 'cookies-next';
+import Warning from '@Shared/Warning/Warning';
 
 type HubFormCardPropsT = {
   hub: HubT;
@@ -203,29 +204,6 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
     return true;
   };
 
-  const Warning = () => (
-    <div className={styles.warning}>
-      <div className="flex-align-center mb-12">
-        <Icon name="alert-triangle" classProp="flex-shrink-0 mr-12" />
-        <h3>Be Advised</h3>
-      </div>
-      <p className="mb-24">
-        Due to temporary system instability, customizing a subdomain or
-        connecting a custom domain may impact Spoke and the Admin panel. If you
-        experience any issues with these features, please contact us.
-      </p>
-
-      <div className="flex-justify-end ">
-        <Button
-          onClick={() => {
-            window.open('mailto:hubs-feedback@mozilla.com');
-          }}
-          text="Contact"
-        />
-      </div>
-    </div>
-  );
-
   return (
     <div className={`${styles.card_wrapper} ${classProp}`}>
       <div className={styles.card_container}>
@@ -241,7 +219,17 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
           <h1 className={styles.title}>Hub Details</h1>
         </div>
 
-        <Warning />
+        <div className="mx-32">
+          <Warning
+            title="Be Advised"
+            message=" Due to temporary system instability, customizing a subdomain or
+        connecting a custom domain may impact Spoke and the Admin panel. If you
+        experience any issues with these features, please contact us."
+            onClick={() => {
+              window.open('mailto:hubs-feedback@mozilla.com');
+            }}
+          />
+        </div>
 
         <form onSubmit={formik.handleSubmit}>
           <div className={styles.form_contents}>
diff --git a/client/components/shared/Warning/Warning.module.scss b/client/components/shared/Warning/Warning.module.scss
new file mode 100644
index 00000000..70722a26
--- /dev/null
+++ b/client/components/shared/Warning/Warning.module.scss
@@ -0,0 +1,7 @@
+@use 'styles/core/boilerplate' as *;
+
+.warning {
+  background: $color-semantic-warning;
+  padding: 24px;
+  border-radius: 20px;
+}
diff --git a/client/components/shared/Warning/Warning.tsx b/client/components/shared/Warning/Warning.tsx
new file mode 100644
index 00000000..a58776ad
--- /dev/null
+++ b/client/components/shared/Warning/Warning.tsx
@@ -0,0 +1,24 @@
+import { Icon, Button } from '@mozilla/lilypad-ui';
+import styles from './Warning.module.scss';
+
+type WarningPropsT = {
+  onClick: () => void;
+  title: string;
+  message: string;
+};
+
+const Warning = ({ onClick, title, message }: WarningPropsT) => (
+  <div className={styles.warning}>
+    <div className="flex-align-center mb-12">
+      <Icon name="alert-triangle" classProp="flex-shrink-0 mr-12" />
+      <h3>{title}</h3>
+    </div>
+    <p className="mb-24">{message}</p>
+
+    <div className="flex-justify-end ">
+      <Button onClick={onClick} text="Contact" />
+    </div>
+  </div>
+);
+
+export default Warning;
diff --git a/client/pages/dashboard/dashboard.module.scss b/client/pages/dashboard/dashboard.module.scss
index 4fd82c13..64907400 100644
--- a/client/pages/dashboard/dashboard.module.scss
+++ b/client/pages/dashboard/dashboard.module.scss
@@ -9,3 +9,11 @@
     min-width: initial;
   }
 }
+
+.warning {
+  max-width: 1200px;
+  margin-bottom: 24px;
+  @include tablet-down {
+    max-width: 100%;
+  }
+}
diff --git a/client/pages/dashboard/index.tsx b/client/pages/dashboard/index.tsx
index 35d8c7c4..66105100 100644
--- a/client/pages/dashboard/index.tsx
+++ b/client/pages/dashboard/index.tsx
@@ -15,6 +15,7 @@ import { AxiosRequestHeaders } from 'axios';
 import SidePanelLayout from 'layouts/SidePanelLayout/SidePanelLayout';
 import { CustomizeHub } from '@Modules/hubs/CustomizeHub/CustomizeHub';
 import { useIsProfessionalUp } from 'hooks/usePlans';
+import Warning from '@Shared/Warning/Warning';
 
 type DashboardPropsT = { subscription: SubscriptionT };
 
@@ -156,6 +157,16 @@ const Dashboard = ({ subscription }: DashboardPropsT) => {
         subscription={subscription}
         isLoading={isLoading && Boolean(account.planName)}
       >
+        <div className={styles.warning}>
+          <Warning
+            title="Be Advised"
+            message="We are aware of an outage currently impacting Starter and Personal plans in one of our service regions. If your assigned URL contains 'us1' you may be affected by this outage. Our team is actively working to resolve the issue, and we appreciate your patience. We apologize for any inconvenience this may cause. If you have any questions regarding this issue, please contact us,"
+            onClick={() => {
+              window.open('mailto:hubs-feedback@mozilla.com');
+            }}
+          />
+        </div>
+
         <div className={styles.cards_wrapper}>
           {/* Hub Creating */}
           {/* TODO (Tech Debt): Right now (EA) we are only dealing with one hub, so, if there are zero