Update SupportDropdownMenu.tsx

Added the contents from "src/components/Support/ContactSupportLink.tsx" for easier manageability.

Author: josh-wong

src/components/Support/SupportDropdownMenu.tsx

@@ -2,44 +2,64 @@ import React, { useState, useEffect, useRef } from 'react';
 import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
-import ContactSupportLink from "./ContactSupportLink"; // Import the Enterprise support link.
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useLocation } from "@docusaurus/router"; // Import for location detection.
 
-const DropdownMenu: React.FC = () => {
+const SupportDropdownMenu: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
+  const [storedUrl, setStoredUrl] = useState<string | null>(null); // For storing the URL
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
 
   // Get document metadata from Docusaurus.
   const { metadata } = useDoc();
   const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
 
   // Detect the language based on the URL path.
-  const isJapanese = typeof window !== "undefined" && window.location.pathname.startsWith("/ja-jp");
+  const isJapanese = location.pathname.startsWith("/ja-jp");
+
+  useEffect(() => {
+    // Store the current URL in localStorage when the component first mounts.
+    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
+    localStorage.setItem("currentUrl", currentUrl);
+
+    // Retrieve stored URL (if available).
+    const savedUrl = localStorage.getItem("currentUrl");
+    if (savedUrl) {
+      setStoredUrl(savedUrl);
+    }
+  }, [location]);
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
 
   const openModal = (event: React.MouseEvent) => {
-    event.preventDefault(); // Prevent the default anchor behavior (page navigation).
-    setIsModalOpen(true); // Open the modal when the link is clicked.
-    setIsOpen(false); // Optionally close the dropdown when modal opens.
+    event.preventDefault(); // Prevent default anchor behavior.
+    setIsModalOpen(true);
+    setIsOpen(false);
   };
 
   const closeModal = () => {
     setIsModalOpen(false);
   };
 
+  const handleSupportClick = () => {
+    // Get the stored URL or fall back to the current URL.
+    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
+    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
+
+    // Open the support link in a new tab.
+    window.open(reportUrl, "_blank");
+  };
+
   // Generate GitHub issue URL dynamically.
   const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
-
-  // Define issue title dynamically based on language.
   const issueTitle = encodeURIComponent(
     isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
   );
 
-  // Define issue body dynamically based on language.
   const issueBody = encodeURIComponent(
     isJapanese
       ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
@@ -60,7 +80,7 @@ const DropdownMenu: React.FC = () => {
 
 該当する場合は、スクリーンショットを添付してください。
 `
-    : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+      : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## Expected behavior
 
@@ -78,12 +98,11 @@ If the issue is reproducible, please list the steps to reproduce it.
 
 If applicable, add screenshots to help explain your problem.
 `
-);
+  );
 
-  // Construct the GitHub issue URL.
   const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
 
-  // Close the dropdown when clicking outside of the content container.
+  // Close dropdown when clicking outside of it.
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -108,7 +127,12 @@ If applicable, add screenshots to help explain your problem.
 
       {isOpen && (
         <div className="supportDropdownContent">
-          <ContactSupportLink />
+          <div>
+            <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
+              <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
+              {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
+            </a>
+          </div>
           <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
@@ -127,10 +151,9 @@ If applicable, add screenshots to help explain your problem.
         </div>
       )}
 
-      {/* Pass isModalOpen to AssistantModal to control visibility. */}
       {isModalOpen && <AssistantModal isOpen={isModalOpen} onClose={closeModal} />}
     </div>
   );
 };
 
-export default DropdownMenu;
+export default SupportDropdownMenu;