From 5c00b82894868abecff75730719bc652cee02c34 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 29 Mar 2024 10:10:35 +0000
Subject: [PATCH 1/5] chore: add status widget

---
 apps/marketing/package.json                   |  1 +
 .../src/components/(marketing)/footer.tsx     |  6 ++
 .../(marketing)/status-widget-container.tsx   | 24 +++++++
 .../components/(marketing)/status-widget.tsx  | 70 +++++++++++++++++++
 package-lock.json                             |  9 +++
 5 files changed, 110 insertions(+)
 create mode 100644 apps/marketing/src/components/(marketing)/status-widget-container.tsx
 create mode 100644 apps/marketing/src/components/(marketing)/status-widget.tsx

diff --git a/apps/marketing/package.json b/apps/marketing/package.json
index f6af3a9ff..2a7f5a024 100644
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -19,6 +19,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx
index a687af0d3..8d2e0c1d4 100644
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@@ -13,6 +13,8 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
+import { StatusWidgetContainer } from './status-widget-container';
+
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
@@ -62,6 +64,10 @@ export const Footer = ({ className, ...props }: FooterProps) => {
               </Link>
             ))}
           </div>
+
+          <div className="mt-6">
+            <StatusWidgetContainer />
+          </div>
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
new file mode 100644
index 000000000..ebcc4df2f
--- /dev/null
+++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
@@ -0,0 +1,24 @@
+import { Suspense, use } from 'react';
+
+import { getStatus } from '@openstatus/react';
+
+import { StatusWidget } from './status-widget';
+
+export function StatusWidgetContainer() {
+  const res = use(getStatus('documenso'));
+
+  return (
+    <Suspense fallback={<StatusWidgetFallback />}>
+      <StatusWidget status={res.status} />
+    </Suspense>
+  );
+}
+
+function StatusWidgetFallback() {
+  return (
+    <div className="border-border flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm">
+      <span className="bg-muted h-5 w-20 animate-pulse rounded-md" />
+      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
+    </div>
+  );
+}
diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx
new file mode 100644
index 000000000..b5cef32ab
--- /dev/null
+++ b/apps/marketing/src/components/(marketing)/status-widget.tsx
@@ -0,0 +1,70 @@
+import type { Status } from '@openstatus/react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const getStatusLevel = (level: Status) => {
+  return {
+    operational: {
+      label: 'Operational',
+      color: 'bg-green-500',
+      color2: 'bg-green-400',
+    },
+    degraded_performance: {
+      label: 'Degraded Performance',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    partial_outage: {
+      label: 'Partial Outage',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    major_outage: {
+      label: 'Major Outage',
+      color: 'bg-red-500',
+      color2: 'bg-red-400',
+    },
+    unknown: {
+      label: 'Unknown',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+    incident: {
+      label: 'Incident',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    under_maintenance: {
+      label: 'Under Maintenance',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+  }[level];
+};
+
+export function StatusWidget({ status }: { status: Status }) {
+  const level = getStatusLevel(status);
+
+  return (
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">{level.label}</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span
+          className={cn(
+            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+            level.color2,
+          )}
+        />
+        <span className={cn('relative inline-flex h-1.5 w-1.5 rounded-full', level.color)} />
+      </span>
+    </a>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 3dc4e9776..d2d29e5c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "@documenso/trpc": "*",
         "@documenso/ui": "*",
         "@hookform/resolvers": "^3.1.0",
+        "@openstatus/react": "^0.0.3",
         "contentlayer": "^0.3.4",
         "framer-motion": "^10.12.8",
         "lucide-react": "^0.279.0",
@@ -4138,6 +4139,14 @@
       "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="
     },
+    "node_modules/@openstatus/react": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@openstatus/react/-/react-0.0.3.tgz",
+      "integrity": "sha512-uDiegz7e3H67pG8lTT+op+6w5keTT7XpcENrREaqlWl5j53TYyO8nheOG1PeNw2/Qgd5KaGeRJJFn1crhTUSYw==",
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@opentelemetry/api": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",

From 171b8008f804d4e01bc06a02d64fd5f3b56a8173 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 29 Mar 2024 10:15:12 +0000
Subject: [PATCH 2/5] chore: credit

Co-authored-by: mxkaske <maximilian@kaske.org>
---
 .../src/components/(marketing)/status-widget-container.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
index ebcc4df2f..ebcc00cf1 100644
--- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
@@ -1,3 +1,4 @@
+// https://github.com/documenso/documenso/pull/1044/files#r1538258462
 import { Suspense, use } from 'react';
 
 import { getStatus } from '@openstatus/react';

From cc60437dcd76293deac80449c566681fbeba9d38 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 29 Mar 2024 10:20:09 +0000
Subject: [PATCH 3/5] fix: correct slug

---
 .../src/components/(marketing)/status-widget-container.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
index ebcc00cf1..19206024f 100644
--- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
@@ -6,7 +6,7 @@ import { getStatus } from '@openstatus/react';
 import { StatusWidget } from './status-widget';
 
 export function StatusWidgetContainer() {
-  const res = use(getStatus('documenso'));
+  const res = use(getStatus('documenso-status'));
 
   return (
     <Suspense fallback={<StatusWidgetFallback />}>

From 81ab220f1eea36ea37295307d20ff4e50221e1db Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 29 Mar 2024 11:14:44 +0000
Subject: [PATCH 4/5] fix: wrap use with suspense

skill issue
---
 .../(marketing)/status-widget-container.tsx   | 27 ++++++++++++-------
 .../components/(marketing)/status-widget.tsx  |  7 +++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
index 19206024f..ffc83bff0 100644
--- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
@@ -1,25 +1,32 @@
 // https://github.com/documenso/documenso/pull/1044/files#r1538258462
-import { Suspense, use } from 'react';
-
-import { getStatus } from '@openstatus/react';
+import { Suspense } from 'react';
 
 import { StatusWidget } from './status-widget';
 
 export function StatusWidgetContainer() {
-  const res = use(getStatus('documenso-status'));
-
   return (
     <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget status={res.status} />
+      <StatusWidget />
     </Suspense>
   );
 }
 
 function StatusWidgetFallback() {
   return (
-    <div className="border-border flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm">
-      <span className="bg-muted h-5 w-20 animate-pulse rounded-md" />
-      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
-    </div>
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">Operational</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500" />
+      </span>
+    </a>
   );
 }
diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx
index b5cef32ab..d53a79f43 100644
--- a/apps/marketing/src/components/(marketing)/status-widget.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget.tsx
@@ -1,4 +1,6 @@
-import type { Status } from '@openstatus/react';
+import { use } from 'react';
+
+import { type Status, getStatus } from '@openstatus/react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -42,7 +44,8 @@ const getStatusLevel = (level: Status) => {
   }[level];
 };
 
-export function StatusWidget({ status }: { status: Status }) {
+export function StatusWidget() {
+  const { status } = use(getStatus('documenso-status'));
   const level = getStatusLevel(status);
 
   return (

From ea64ccae29480ed6a761b077d496af3e54b09c84 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 5 Apr 2024 12:02:05 +0000
Subject: [PATCH 5/5] fix: unnecesary requests

---
 .../(marketing)/status-widget-container.tsx   | 19 ++++---------------
 .../components/(marketing)/status-widget.tsx  |  8 +++++---
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
index ffc83bff0..025c2df56 100644
--- a/apps/marketing/src/components/(marketing)/status-widget-container.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx
@@ -13,20 +13,9 @@ export function StatusWidgetContainer() {
 
 function StatusWidgetFallback() {
   return (
-    <a
-      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
-      href="https://status.documenso.com"
-      target="_blank"
-      rel="noreferrer"
-    >
-      <div>
-        <p className="text-sm">Operational</p>
-      </div>
-
-      <span className="relative ml-auto flex h-1.5 w-1.5">
-        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
-        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500" />
-      </span>
-    </a>
+    <div className="border-border inline-flex max-w-fit  items-center justify-between space-x-2 rounded-md border border-gray-200 px-2 py-2 pr-3 text-sm">
+      <span className="bg-muted h-2 w-36 animate-pulse rounded-md" />
+      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
+    </div>
   );
 }
diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx
index d53a79f43..1c94c0707 100644
--- a/apps/marketing/src/components/(marketing)/status-widget.tsx
+++ b/apps/marketing/src/components/(marketing)/status-widget.tsx
@@ -1,6 +1,7 @@
-import { use } from 'react';
+import { use, useMemo } from 'react';
 
-import { type Status, getStatus } from '@openstatus/react';
+import type { Status } from '@openstatus/react';
+import { getStatus } from '@openstatus/react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -45,7 +46,8 @@ const getStatusLevel = (level: Status) => {
 };
 
 export function StatusWidget() {
-  const { status } = use(getStatus('documenso-status'));
+  const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []);
+  const { status } = use(getStatusMemoized);
   const level = getStatusLevel(status);
 
   return (