commit 1007f44f86563a046eb869bfde8e7d37303b8080
parent e5b824c0b089b16034bef76ea0cc472ca3ba46c9
Author: Daniel D’Aquino <daniel@daquino.me>
Date: Thu, 2 Jan 2025 11:18:15 +0900
Merge pull request #32 from danieldaquino/#31
Add Purple checkout maintenance mode option
Diffstat:
5 files changed, 89 insertions(+), 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 jb55@jb55.com
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>
+ </>)
+}
