translations in location content, cleanup (commenting

)

pages/cart/locations/[id].tsx

@@ -5,6 +5,8 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { GetServerSideProps } from 'next';
 import { Location, UserRole } from "@prisma/client";
 import axiosServer from '../../../src/axiosServer';
+import { useTranslations, createTranslator } from 'next-intl';
+// import { getTranslations } from 'next-intl/server';
 
 const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
     const [activeTab, setActiveTab] = useState('mainLocation');
@@ -12,6 +14,7 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
 
     const [images, setImages] = useState([]);
     const [mainLocationImageCount, setMainLocationImageCount] = useState(0);
+    const t = useTranslations('content');
 
     useEffect(() => {
         const mainLocationImages = [location.picture1, location.picture2, location.picture3].filter(Boolean);
@@ -98,15 +101,37 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const axios = await axiosServer(context);
 
+    // Get the locale from context or use default
+    const locale = context.locale || 'en';
+    const messages = (await import(`../../../content/i18n/${locale}.json`)).default;
+
+    const t = createTranslator({ locale, messages });
+    // Function to replace placeholders in HTML content
+    const replacePlaceholders = (content: string) => {
+        if (!content) return '';
+        const placeholderPattern = /{([^}]+)}/g;
+        return content.replace(placeholderPattern, (match, key) => {
+            try {
+                return t(key);
+            } catch (error) {
+                return match;
+            }
+        });
+    };
+
+
+
     const { data: location } = await axios.get(
         `${process.env.NEXT_PUBLIC_PUBLIC_URL}/api/data/locations/${context.params.id}`
     );
+    location.content = replacePlaceholders(location.content);
+
     if (location.backupLocationId !== null) {
         const { data: backupLocation } = await axios.get(
             process.env.NEXT_PUBLIC_PUBLIC_URL + "/api/data/locations/" + location.backupLocationId
         );
         location.backupLocationName = backupLocation.name;
-        location.backupLocationContent = backupLocation ? backupLocation.content : "";
+        location.backupLocationContent = backupLocation ? replacePlaceholders(backupLocation.content) : "";
         location.backupLocationImages = backupLocation ? [backupLocation.picture1, backupLocation.picture2, backupLocation.picture3].filter(Boolean) : [];
     }