From 4aeb94d98eef34e1bd9dc0accc8ceefca393407c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=E2=80=99Aquino?= Date: Fri, 1 Nov 2024 10:41:59 -0700 Subject: [PATCH] Add Purple checkout maintenance mode option MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Daniel D’Aquino --- README.md | 14 +++++++++ content/compiled-locales/en.json | 18 ++++++++++++ content/locales/en.json | 9 ++++++ src/components/pages/purple-checkout.tsx | 20 ++++++++++++- .../sections/PurpleCheckoutMaintenance.tsx | 29 +++++++++++++++++++ 5 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 src/components/sections/PurpleCheckoutMaintenance.tsx diff --git a/README.md b/README.md index d452508..0790dfd 100644 --- 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 index bfb3ba6..ea2aeb9 100644 --- a/content/compiled-locales/en.json +++ b/content/compiled-locales/en.json @@ -455,6 +455,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 index 71872ee..3016eaa 100644 --- a/content/locales/en.json +++ b/content/locales/en.json @@ -221,6 +221,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 index e626360..fa7f992 100644 --- 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 (<> Damus Purple checkout
- + {underMaintenance ? : }
) diff --git a/src/components/sections/PurpleCheckoutMaintenance.tsx b/src/components/sections/PurpleCheckoutMaintenance.tsx new file mode 100644 index 0000000..29fa4c2 --- /dev/null +++ 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 (<> + +

+ {intl.formatMessage({ id: "purple.checkout-maintenance.title", defaultMessage: "Checkout" })} +

+
+ +
+ + {intl.formatMessage({ id: "purple.checkout-maintenance.description", defaultMessage: "Under maintenance" })} + + + {intl.formatMessage({ id: "purple.checkout-maintenance.description-2", defaultMessage: "We are working on some fixes, please come back later. Thank you for your patience." })} + +
+
+ + ) +}