Merge pull request #32 from danieldaquino/#31

Add Purple checkout maintenance mode option
damus-io · Jan 2, 2025 · 1007f44 · 1007f44
2 parents e5b824c + 4aeb94d
commit 1007f44
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -48,6 +48,20 @@ The project is roughly structured as follows:
 - `postcss.config.js` - The [PostCSS](https://postcss.org/) configuration file, which is used to configure the PostCSS compiler. PostCSS is used to compile Tailwind CSS to regular CSS.
 - `src/pages/api` - The [Next.js API routes](https://nextjs.org/docs/api-routes/introduction), which can used to implement server-side (serverless) functions.
 
+## Operations
+
+### Putting Purple checkout under maintenance mode
+
+To put the Purple checkout under maintenance mode, simply make a route called `/purple-checkout-maintenance` available (returns HTTP 200). 
+
+In a static build, this can be done by creating a file called `purple-checkout-maintenance` at the root of wherever the static files are being hosted:
+
+```bash
+touch /path/to/static/files/purple-checkout-maintenance
+```
+
+When present, the checkout page will be replaced with a maintenance message.
+
 ## Contributing
 
 You can send me patches over nostr or [email][email] at [email protected]

diff --git a/content/compiled-locales/en.json b/content/compiled-locales/en.json
@@ -905,6 +905,24 @@
       "value": "Get more from Damus."
     }
   ],
+  "purple.checkout-maintenance.description": [
+    {
+      "type": 0,
+      "value": "Under maintenance"
+    }
+  ],
+  "purple.checkout-maintenance.description-2": [
+    {
+      "type": 0,
+      "value": "We are working on some fixes, please come back later. Thank you for your patience."
+    }
+  ],
+  "purple.checkout-maintenance.title": [
+    {
+      "type": 0,
+      "value": "Checkout"
+    }
+  ],
   "purple.checkout.continue": [
     {
       "type": 0,

diff --git a/content/locales/en.json b/content/locales/en.json
@@ -446,6 +446,15 @@
   "purple.benefits.headline": {
     "string": "Get more from Damus."
   },
+  "purple.checkout-maintenance.description": {
+    "string": "Under maintenance"
+  },
+  "purple.checkout-maintenance.description-2": {
+    "string": "We are working on some fixes, please come back later. Thank you for your patience."
+  },
+  "purple.checkout-maintenance.title": {
+    "string": "Checkout"
+  },
   "purple.checkout.continue": {
     "string": "Continue in the app"
   },

diff --git a/src/components/pages/purple-checkout.tsx b/src/components/pages/purple-checkout.tsx
@@ -2,17 +2,35 @@ import Head from "next/head";
 import { useIntl } from 'react-intl'
 import { Footer } from '@/components/sections/Footer';
 import { PurpleCheckout as CheckoutSection } from '@/components/sections/PurpleCheckout';
+import { useEffect, useState } from "react";
+import { PurpleCheckoutMaintenance } from "../sections/PurpleCheckoutMaintenance";
 
 
 export function PurpleCheckout() {
   const intl = useIntl()
+  const [underMaintenance, setUnderMaintenance] = useState(false);
+
+  // Declare the function to check maintenance status
+  const checkIfUnderMaintenance = async () => {
+    const response = await fetch('/purple-checkout-maintenance');
+    // If response is 200 OK, return true, if 404 Not Found, return false
+    return response.status === 200;
+  }
+
+  useEffect(() => {
+    checkIfUnderMaintenance().then((isUnderMaintenance: boolean) => {
+      setUnderMaintenance(isUnderMaintenance);
+    }).catch(error => {
+      console.error('Failed to check maintenance status:', error);
+    });
+  }, []);
 
   return (<>
     <Head>
       <title>Damus Purple checkout</title>
     </Head>
     <main style={{ scrollBehavior: "smooth" }}>
-      <CheckoutSection />
+      {underMaintenance ? <PurpleCheckoutMaintenance /> : <CheckoutSection />}
       <Footer />
     </main>
   </>)

diff --git a/src/components/sections/PurpleCheckoutMaintenance.tsx b/src/components/sections/PurpleCheckoutMaintenance.tsx
@@ -0,0 +1,29 @@
+import { Construction } from "lucide-react";
+import { PurpleLayout } from "../PurpleLayout";
+import { useIntl } from "react-intl";
+
+
+export function PurpleCheckoutMaintenance() {
+  const intl = useIntl()
+
+  // MARK: - Render
+
+  return (<>
+    <PurpleLayout>
+      <h2 className="text-2xl text-left text-purple-200 font-semibold break-keep mb-2">
+        {intl.formatMessage({ id: "purple.checkout-maintenance.title", defaultMessage: "Checkout" })}
+      </h2>
+      <div className="text-purple-200/70 text-normal text-left mb-6 font-semibold flex flex-col md:flex-row gap-3 rounded-lg bg-purple-200/10 p-3 items-center md:items-start">
+        <Construction className="w-6 h-6 shrink-0 mt-0 md:mt-1" />
+        <div className="flex flex-col text-center md:text-left">
+          <span className="text-normal md:text-lg mb-2">
+            {intl.formatMessage({ id: "purple.checkout-maintenance.description", defaultMessage: "Under maintenance" })}
+          </span>
+          <span className="text-xs text-purple-200/50">
+            {intl.formatMessage({ id: "purple.checkout-maintenance.description-2", defaultMessage: "We are working on some fixes, please come back later. Thank you for your patience." })}
+          </span>
+        </div>
+      </div>
+    </PurpleLayout>
+  </>)
+}