Add view topic Legislation

README.md

@@ -605,3 +605,76 @@ MAIL_SERVER = smtp server e.g smtp.mailtrap.io
 ### Key Pages
 
 See https://tech.datopian.com/frontend/.
+
+
+## Adding New Topic Links
+
+To add new topic links for the legislation, you can modify the `topic-links.json` file located at:
+
+[Topic-link.json](./public/configs/topic-links.json)
+
+### Steps to Add a New Topic Link:
+
+1. Open the `topic-links.json` file.
+2. Add a new entry under the `topicLinks` object. The key should be a unique identifier for the topic (e.g., `"new-topic"`), and the value should be the URL for that topic.
+
+   Example:
+   ```json
+   "new-topic": "https://uaelegislation.gov.ae/en/new-topic"
+   ```
+
+3. Save the changes to the file.
+
+### Example of Updated `topic-links.json`:
+
+```json
+{
+  "defaultLink": "https://uaelegislation.gov.ae",
+  "topicLinks": {
+    "economy": "https://uaelegislation.gov.ae/en/economy",
+    "food-security": "https://uaelegislation.gov.ae/en/food-security",
+    "new-topic": "https://uaelegislation.gov.ae/en/new-topic"
+  }
+}
+```
+
+## Updating the Color of the "View Legislations" Button
+
+If you want to change the color of the "View Legislations" button, you can do so in the `ImageHeader.tsx` file located at:
+
+[ImageHeader.tsx](./components/_shared/image_header/ImageHeader.tsx) 
+
+### Steps to Update the Button Color:
+
+1. Open the [ImageHeader.tsx](./components/_shared/image_header/ImageHeader.tsx)  file.
+2. Locate the legislation link button code block, which looks like this:
+
+   ```tsx
+   <a
+     href={legislationLink}
+     target="_blank"
+     rel="noopener noreferrer"
+     className="inline-flex items-center gap-2 px-6 py-2 rounded-full font-avenir font-medium text-[#4D4D4D] bg-[#FAEEC5] hover:bg-[#F5E5B0] transition-all cursor-pointer border border-[#E8D9A8]"
+   >
+     {legislationText}
+     ...
+   </a>
+   ```
+
+3. Change the `bg-[#FAEEC5]` and `hover:bg-[#F5E5B0]` values to your desired color codes.
+
+### Example of Updated Button Color:
+
+```tsx
+<a
+  href={legislationLink}
+  target="_blank"
+  rel="noopener noreferrer"
+  className="inline-flex items-center gap-2 px-6 py-2 rounded-full font-avenir font-medium text-[#4D4D4D] bg-[#FFD700] hover:bg-[#FFC300] transition-all cursor-pointer border border-[#E8D9A8]"
+>
+  {legislationText}
+  ...
+</a>
+```
+
+In this example, the button background color is changed to a shade of gold (`#FFD700`), and the hover color is set to a darker shade (`#FFC300`).

components/_shared/image_header/ImageHeader.tsx

@@ -11,6 +11,8 @@ interface ImageHeaderProps {
   badgeText?: string;
   children: React.ReactNode;
   color?: string;
+  legislationLink?: string;
+  legislationText?: string;
   badgeOnClick?: () => void;
 }
 
@@ -21,6 +23,8 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
   badgeText,
   children,
   color,
+  legislationLink,
+  legislationText,
   badgeOnClick,
 }) => {
   const scrollbarCss = `
@@ -108,12 +112,36 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                     </Scrollbar>
                   </div>
                 </div>
-                <div className="pb-[3rem] mt-5">
+                <div className="pb-[3rem] mt-5 flex flex-wrap items-center gap-3">
                   <Badge
                     text={badgeText}
                     color={color}
                     onClick={badgeOnClick}
                   />
+                  {legislationLink && legislationText && (
+                    <a
+                      href={legislationLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 px-6 py-2 rounded-full font-avenir font-medium text-[#4D4D4D] bg-[#FAEEC5] hover:bg-[#F5E5B0] transition-all cursor-pointer border border-[#E8D9A8]"
+                    >
+                      {legislationText}
+                      <svg
+                        className="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        />
+                      </svg>
+                    </a>
+                  )}
                 </div>
               </div>
             </div>

components/topic/Header.tsx

@@ -6,6 +6,7 @@ const Header: React.FC<any> = ({
   datasetsCount,
   color,
   badgeOnClick,
+  legislationLink,
 }) => {
   const { t } = useTranslation('common');
 
@@ -33,6 +34,8 @@ const Header: React.FC<any> = ({
         image={image}
         color={color}
         badgeOnClick={badgeOnClick}
+        legislationLink={legislationLink}
+        legislationText={t('view-legislation')}
       >
         {description}
       </ImageHeader>

components/topic/MainOptions.tsx

@@ -22,6 +22,7 @@ const MainOptions: React.FC<any> = ({
   searchPage,
   setActiveTopic,
   configs,
+  topicLinksConfig,
 }) => {
   const { t } = useTranslation('common');
   const router = useRouter();
@@ -158,6 +159,10 @@ const MainOptions: React.FC<any> = ({
   subtopics.forEach((subtopic) => fixTranslations(subtopic));
 
   const color = configs?.filter((el) => el.name == topic)[0]?.color;
+  const getLegislationLink = () => {
+    if (!topicLinksConfig) return null;
+    return topicLinksConfig.topicLinks[topic] || topicLinksConfig.defaultLink;
+  };
 
   return (
     <>
@@ -171,6 +176,7 @@ const MainOptions: React.FC<any> = ({
               .getElementById('explore-top-datasets')
               ?.scrollIntoView({ behavior: 'smooth' });
           }}
+          legislationLink={getLegislationLink()}
         />
       </div>
       <div className="lg:container lg:mx-auto">

locales/ar/common.json

@@ -118,5 +118,6 @@
   "missing-translation": "عذرا ، لا توجد نسخة باللغة الإنجليزية لهذه الصفحة في الوقت الحالي",
   "error-404-t": "خطأ 404",
   "error-404-m": "الصفحة التي تبحث عنها لا يمكن العثور عليها",
-  "error-404-l": "اضغط هنا للرجوع"
+  "error-404-l": "اضغط هنا للرجوع",
+  "view-legislation": "عرض التشريعات"
 }

locales/en/common.json

@@ -118,5 +118,6 @@
   "missing-translation": "Sorry, there is no English version for this page right now",
   "error-404-t": "Error 404",
   "error-404-m": "The page you are looking for could not be found",
-  "error-404-l": "Click here to go back"
+  "error-404-l": "Click here to go back",
+  "view-legislation": "View Legislations"
 }

pages/api/contact.js

@@ -18,8 +18,12 @@ export default async (req, res) => {
   }
 
   try {
-
-    console.log("MAIL_SERVER, MAIL_ACCOUNT, MAIL_PASSWORD", MAIL_SERVER, MAIL_ACCOUNT, MAIL_PASSWORD)
+    console.log(
+      'MAIL_SERVER, MAIL_ACCOUNT, MAIL_PASSWORD',
+      MAIL_SERVER,
+      MAIL_ACCOUNT,
+      MAIL_PASSWORD
+    );
     const transporter = nodemailer.createTransport({
       port: MAIL_PORT,
       host: MAIL_SERVER,
@@ -29,6 +33,10 @@ export default async (req, res) => {
       },
       secure: false,
       connectionTimeout: 100 * 1000,
+      requireTLS: true, // Enforces STARTTLS
+      tls: {
+        ciphers: 'SSLv3',
+      },
     });
 
     const mailData = {
@@ -40,19 +48,18 @@ export default async (req, res) => {
       text: `Name of Sender: ${name}\n\nEmail of Sender: ${email}\n\n\nDetails/Content: ${message}`,
     };
 
-    console.log(mailData);
-
-    transporter.sendMail(mailData, function (err, info) {
-      console.log('Email sent');
-      if (err) {
-        console.log(err);
-        return res.status(400).send({
-          error: `There was an error sending this email, please contact us at `,
-        });
-      } else {
-        return res.status(200).send();
-      }
+    await new Promise((resolve, reject) => {
+      transporter.sendMail(mailData, (err, info) => {
+        if (err) {
+          console.error(err);
+          return reject(err);
+        } else {
+          console.log('Email sent', info);
+          return resolve(info);
+        }
+      });
     });
+    return res.status(200).send({ success: true });
   } catch (error) {
     return res.status(500).send({ error: error.message || error.toString() });
   }

pages/topic/[topic].tsx

@@ -28,7 +28,11 @@ import ScrollIndicator from '../../components/_shared/ScrollIndicator';
 import { fixTranslations } from '../../hooks/locale';
 import useTranslation from 'next-translate/useTranslation';
 
-const Topic: React.FC<any> = ({ variables, topicsConfigs }) => {
+const Topic: React.FC<any> = ({
+  variables,
+  topicsConfigs,
+  topicLinksConfig,
+}) => {
   const { t } = useTranslation('common');
   const router = useRouter();
   // eslint-disable-next-line prefer-const
@@ -108,6 +112,7 @@ const Topic: React.FC<any> = ({ variables, topicsConfigs }) => {
             searchPage={searchPage}
             setActiveTopic={setActiveTopic}
             configs={topicsConfigs}
+            topicLinksConfig={topicLinksConfig}
           ></MainOptions>
           <div id="developer-experience" className="lg:container lg:mx-auto">
             <DeveloperExperience
@@ -134,6 +139,15 @@ export const getServerSideProps: GetServerSideProps = async () => {
     return JSON.parse(data)?.topics;
   };
 
+  const getTopicLinks = async () => {
+    const filePath = path.join(
+      process.cwd(),
+      '/public/configs/topic-links.json'
+    );
+    const data = await fsPromises.readFile(filePath, 'utf8');
+    return JSON.parse(data);
+  };
+
   const apolloClient = initializeApollo();
 
   await apolloClient.query({
@@ -154,11 +168,14 @@ export const getServerSideProps: GetServerSideProps = async () => {
     variables,
   });
 
+  console.log('TOPIC LINK', await getTopicLinks());
+
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
       variables,
       topicsConfigs: await getTopicsConfigs(),
+      topicLinksConfig: await getTopicLinks(),
     },
   };
 };

public/configs/topic-links.json

@@ -0,0 +1,17 @@
+{
+  "defaultLink": "https://uaelegislation.gov.ae",
+  "topicLinks": {
+    "economy": "https://uaelegislation.gov.ae/en/economy",
+    "food-security": "https://uaelegislation.gov.ae/en/food-security",
+    "education": "https://uaelegislation.gov.ae/en/education",
+    "environment": "https://uaelegislation.gov.ae/en/environment",
+    "social": "https://uaelegislation.gov.ae/en/social",
+    "health-care": "https://uaelegislation.gov.ae/en/health-care",
+    "sport": "https://uaelegislation.gov.ae/en/sport",
+    "government": "https://uaelegislation.gov.ae/en/government",
+    "technology": "https://uaelegislation.gov.ae/en/technology",
+    "transport": "https://uaelegislation.gov.ae/en/transport",
+    "infrastructure": "https://uaelegislation.gov.ae/en/infrastructure",
+    "housing": "https://uaelegislation.gov.ae/housing"
+  }
+}