From f86a15efdeffab1af5ee2aebc1e0da9dbd8cc44a Mon Sep 17 00:00:00 2001
From: Natan Yagudayev <natanyagudayev@gmail.com>
Date: Tue, 8 Apr 2025 17:09:30 -0400
Subject: [PATCH] Fix: Disabling form for maintenance (#2563)

* Disabling form

* Fix lint test

* Lint please
---
 packages/website/src/components/ApplyForm.js | 255 ++++++++++---------
 1 file changed, 136 insertions(+), 119 deletions(-)

diff --git a/packages/website/src/components/ApplyForm.js b/packages/website/src/components/ApplyForm.js
index ff178405..892d367e 100644
--- a/packages/website/src/components/ApplyForm.js
+++ b/packages/website/src/components/ApplyForm.js
@@ -97,136 +97,153 @@ function ApplyForm() {
   }
 
   return (
-    <Card className="uil-m-auto apply-form uil-pb-24">
-      <form
-        id="form-apply-docsearch"
-        method="POST"
-        action="https://docsearch-hub.herokuapp.com/form/inbound"
-        onSubmit={onSubmit}
+    <>
+      <div
+        className="uil-m-auto uil-pb-24"
+        style={{
+          maxWidth: '700px',
+          backgroundColor: '#f5a623',
+          color: 'white',
+          padding: '12px',
+          borderRadius: '8px',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          marginBottom: '16px',
+        }}
       >
-        <LabelText key="url" tag="label" htmlFor="url" className="apply-text">
-          Documentation or Blog URL
-          <Input
-            required={true}
-            id="url"
-            type="url"
-            name="url"
-            aria-label="URL of the open-source blog or documentation website"
-            value={url}
-            placeholder="https://project.org/docs"
-            onChange={handleSetUrl}
-          />
-        </LabelText>
-
-        <Text small={true} className="uil-pv-8 uil-d-block apply-text">
-          We'll scrape pages at this address and index the content on Algolia.
-        </Text>
-
-        <LabelText tag="label" htmlFor="email" key="email" className="apply-text">
-          Email
-          <Input
-            required={true}
-            id="email"
-            type="email"
-            name="email"
-            aria-label="Email address of the owner of this website"
-            value={email}
-            placeholder="you@project.org"
-            onChange={handleSetEmail}
-          />
-        </LabelText>
-
-        <Text small={true} className="uil-pv-8 uil-d-block apply-text">
-          We'll send you the snippet you'll have to integrate into your website and grant access to your Algolia
-          application.
-        </Text>
-
-        <LabelText tag="label" htmlFor="repoURL" key="repoURL" className="apply-text">
-          Repository URL (Optional)
-          <Input
-            required={false}
-            id="repoURL"
-            type="url"
-            name="repoURL"
-            aria-label="(Optional) The URL of your project repository"
-            value={repo}
-            placeholder="https://github.com/algolia/docsearch, https://gitlab.com/gitlab-org/gitlab, etc..."
-            onChange={handleSetRepo}
-          />
-        </LabelText>
-
-        <div className="uil-ph-32 uil-d-flex uil-fxd-column">
-          <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="public" key="public">
-            <input
+        🚧 The DocSearch submission process is currently down for maintenance. 🚧
+      </div>
+      <Card className="uil-m-auto apply-form uil-pb-24">
+        <form
+          id="form-apply-docsearch"
+          method="POST"
+          action="https://docsearch-hub.herokuapp.com/form/inbound"
+          onSubmit={onSubmit}
+        >
+          <LabelText key="url" tag="label" htmlFor="url" className="apply-text">
+            Documentation or Blog URL
+            <Input
               required={true}
-              id="public"
-              name="public"
-              aria-label="Confirm my website is a publicly available developer documentation or a technical blog."
-              type="checkbox"
-              className="uil-mr-8"
+              id="url"
+              type="url"
+              name="url"
+              aria-label="URL of the open-source blog or documentation website"
+              value={url}
+              placeholder="https://project.org/docs"
+              onChange={handleSetUrl}
             />
-            My website is a publicly available developer documentation or a technical blog.
           </LabelText>
 
-          <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="owner" key="owner">
-            <input
+          <Text small={true} className="uil-pv-8 uil-d-block apply-text">
+            We'll scrape pages at this address and index the content on Algolia.
+          </Text>
+
+          <LabelText tag="label" htmlFor="email" key="email" className="apply-text">
+            Email
+            <Input
               required={true}
-              id="owner"
-              name="owner"
-              aria-label="Confirm I am the owner of the website, or otherwise have obtained and
+              id="email"
+              type="email"
+              name="email"
+              aria-label="Email address of the owner of this website"
+              value={email}
+              placeholder="you@project.org"
+              onChange={handleSetEmail}
+            />
+          </LabelText>
+
+          <Text small={true} className="uil-pv-8 uil-d-block apply-text">
+            We'll send you the snippet you'll have to integrate into your website and grant access to your Algolia
+            application.
+          </Text>
+
+          <LabelText tag="label" htmlFor="repoURL" key="repoURL" className="apply-text">
+            Repository URL (Optional)
+            <Input
+              required={false}
+              id="repoURL"
+              type="url"
+              name="repoURL"
+              aria-label="(Optional) The URL of your project repository"
+              value={repo}
+              placeholder="https://github.com/algolia/docsearch, https://gitlab.com/gitlab-org/gitlab, etc..."
+              onChange={handleSetRepo}
+            />
+          </LabelText>
+
+          <div className="uil-ph-32 uil-d-flex uil-fxd-column">
+            <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="public" key="public">
+              <input
+                required={true}
+                id="public"
+                name="public"
+                aria-label="Confirm my website is a publicly available developer documentation or a technical blog."
+                type="checkbox"
+                className="uil-mr-8"
+              />
+              My website is a publicly available developer documentation or a technical blog.
+            </LabelText>
+
+            <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="owner" key="owner">
+              <input
+                required={true}
+                id="owner"
+                name="owner"
+                aria-label="Confirm I am the owner of the website, or otherwise have obtained and
               continue to maintain any required consents necessary to use
               DocSearch on the requested domain. And I have read the checklist."
-              type="checkbox"
-              className="uil-mr-8"
-            />
-            I am the owner of the website, or otherwise have obtained and continue to maintain any required consents
-            necessary to use DocSearch on the requested domain. And I have{' '}
-            <InlineLink href={withBaseUrl('docs/who-can-apply')}>read the checklist.</InlineLink>
-          </LabelText>
+                type="checkbox"
+                className="uil-mr-8"
+              />
+              I am the owner of the website, or otherwise have obtained and continue to maintain any required consents
+              necessary to use DocSearch on the requested domain. And I have{' '}
+              <InlineLink href={withBaseUrl('docs/who-can-apply')}>read the checklist.</InlineLink>
+            </LabelText>
 
-          <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="opensource" key="opensource">
-            <input
-              required={true}
-              id="opensource"
-              name="opensource"
-              aria-label="Confirm I understand that this is a Free Service as described in Algolia's Terms of Service and Algolia's Special Free Service Terms"
-              type="checkbox"
-              className="uil-mr-8"
-            />
-            I understand that this is a Free Service as described in Algolia's{' '}
-            <InlineLink href="https://www.algolia.com/policies/terms/">Terms of Service</InlineLink> and Algolia's{' '}
-            <InlineLink href="https://www.algolia.com/policies/free-services-terms/">
-              Special Free Services Terms
+            <LabelText className="uil-pt-12 apply-text" tag="label" htmlFor="opensource" key="opensource">
+              <input
+                required={true}
+                id="opensource"
+                name="opensource"
+                aria-label="Confirm I understand that this is a Free Service as described in Algolia's Terms of Service and Algolia's Special Free Service Terms"
+                type="checkbox"
+                className="uil-mr-8"
+              />
+              I understand that this is a Free Service as described in Algolia's{' '}
+              <InlineLink href="https://www.algolia.com/policies/terms/">Terms of Service</InlineLink> and Algolia's{' '}
+              <InlineLink href="https://www.algolia.com/policies/free-services-terms/">
+                Special Free Services Terms
+              </InlineLink>
+              .
+            </LabelText>
+
+            <Button
+              primary={true}
+              disabled={true}
+              className="uil-mt-16 uil-mb-16"
+              tag="button"
+              // type="submit"
+              id="joinButton"
+            >
+              Join the program
+            </Button>
+          </div>
+
+          <Text small={true} className="uil-ta-center">
+            <InlineLink href="https://www.algolia.com/policies/privacy/">
+              Refer to Algolia's Privacy Policy for more information on how we use and protect your data
             </InlineLink>
-            .
-          </LabelText>
+          </Text>
 
-          <Button
-            primary={true}
-            disabled={state.status === 'loading'}
-            className="uil-mt-16 uil-mb-16"
-            tag="button"
-            type="submit"
-            id="joinButton"
-          >
-            Join the program
-          </Button>
-        </div>
-
-        <Text small={true} className="uil-ta-center">
-          <InlineLink href="https://www.algolia.com/policies/privacy/">
-            Refer to Algolia's Privacy Policy for more information on how we use and protect your data
-          </InlineLink>
-        </Text>
-
-        <Text small={true} className="uil-ta-center">
-          <strong>
-            For support requests, make sure to first{' '}
-            <InlineLink href="/docs/docsearch-program#support">read our policy</InlineLink>.
-          </strong>{' '}
-        </Text>
-      </form>
-    </Card>
+          <Text small={true} className="uil-ta-center">
+            <strong>
+              For support requests, make sure to first{' '}
+              <InlineLink href="/docs/docsearch-program#support">read our policy</InlineLink>.
+            </strong>{' '}
+          </Text>
+        </form>
+      </Card>
+    </>
   );
 }