From 5ee718ba5c96a09cd696d96ae3ad618c7e384e48 Mon Sep 17 00:00:00 2001
From: Sean Leong <seanleong888@gmail.com>
Date: Fri, 20 Dec 2024 02:18:21 +0800
Subject: [PATCH 1/3] feat + refactor: added messenger sharing

---
 frontend/components/btn/BtnShareIcon.vue     | 138 +++++++++
 frontend/components/modal/ModalSharePage.vue | 307 +++++--------------
 frontend/i18n/de.json                        |   4 +-
 frontend/i18n/en-US.json                     |   4 +-
 frontend/i18n/es.json                        |   4 +-
 frontend/i18n/fr.json                        |   4 +-
 frontend/i18n/pt.json                        |   4 +-
 7 files changed, 233 insertions(+), 232 deletions(-)
 create mode 100644 frontend/components/btn/BtnShareIcon.vue

diff --git a/frontend/components/btn/BtnShareIcon.vue b/frontend/components/btn/BtnShareIcon.vue
new file mode 100644
index 000000000..5121c5a22
--- /dev/null
+++ b/frontend/components/btn/BtnShareIcon.vue
@@ -0,0 +1,138 @@
+<template>
+  <component
+    v-if="type == 'vueSocials'"
+    :is="vueSocials[socialComponent]"
+    @popup-close="nativeBehaviorOptions.onClose"
+    @popup-open="nativeBehaviorOptions.onOpen"
+    @popup-block="nativeBehaviorOptions.onBlock"
+    @popup-focus="nativeBehaviorOptions.onFocus"
+    class="focus-brand"
+    :window-features="windowFeatures"
+    :share-options="shareOptions"
+    :use-native-behavior="useNativeBehavior"
+    :native-behavior-options="nativeBehaviorOptions"
+  >
+    <MetaTagSocialMedia
+      class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
+      :iconName="iconName"
+      :text="text"
+      :iconSize="iconSize"
+    />
+  </component>
+  <component
+    v-else-if="type == 'redirect'"
+    @click="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
+    @keypress.space="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
+    @keypress.enter="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
+    class="focus-brand"
+    tabindex="0"
+    role="button"
+  >
+    <MetaTagSocialMedia
+      v-if="!contentCopied"
+      class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
+      :iconName="iconName"
+      :text="text"
+      :iconSize="iconSize"
+    />
+    <MetaTagSocialMedia
+      v-if="contentCopied"
+      class="text-accepted-green hover:text-accepted-green dark:text-accepted-green dark:hover:text-accepted-green"
+      :iconName="IconMap.SQUARE_CHECK"
+      :text="$t('components.btn_share_icon.url_copied')"
+      :iconSize="iconSize"
+    />
+  </component>
+</template>
+
+<script setup lang="ts">
+import {
+  SEmail,
+  SFacebook,
+  SMastodon,
+  STelegram,
+  STwitter,
+  SFacebookMessenger,
+} from "vue-socials";
+import { ref, type Component } from "vue";
+import { IconMap } from "~/types/icon-map";
+import { toast } from "vue-sonner";
+import { useI18n } from "vue-i18n";
+
+const vueSocials: { [key: string]: Component } = {
+  SEmail,
+  SFacebook,
+  SMastodon,
+  STelegram,
+  STwitter,
+  SFacebookMessenger,
+};
+
+const props = defineProps({
+  type: String,
+  socialComponent: {
+    type: String,
+    default: "",
+  },
+  iconName: {
+    type: String,
+    default: "",
+  },
+  text: {
+    type: String,
+    default: "",
+  },
+  iconSize: String,
+  shareOptions: Object,
+  windowFeatures: Object,
+  useNativeBehavior: Boolean,
+  nativeBehaviorOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  urlLink: {
+    type: String,
+    default: "",
+  },
+  redirectLink: {
+    type: String,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const contentCopied = ref(false);
+
+const getCurrentI18n: { [key: string]: string } = {
+  signal: "components.btn_share_icon.opening_signal",
+};
+
+const copyToClipboardThenOpenUrl = async (
+  name: string,
+  url: string,
+  redirectUrl?: string
+) => {
+  try {
+    await navigator.clipboard.writeText(url);
+    contentCopied.value = true;
+    if (redirectUrl) {
+      toast(t(getCurrentI18n[props.text.toLowerCase()]));
+      setTimeout(() => {
+        contentCopied.value = false;
+        window.open(redirectUrl, "_blank");
+      }, 2000);
+    } else {
+      setTimeout(() => {
+        contentCopied.value = false;
+      }, 2000);
+    }
+  } catch (error) {
+    console.error(`Could not copy text: ${error}`);
+    contentCopied.value = false;
+  }
+};
+</script>
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 0fb20e528..841136c26 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -14,186 +14,94 @@
         <div
           class="grid w-full grid-cols-3 grid-rows-2 content-start gap-4 pt-4 lg:gap-8 lg:pt-6"
         >
-          <s-telegram
-            @popup-close="nativeBehaviorOptions.onClose"
-            @popup-open="nativeBehaviorOptions.onOpen"
-            @popup-block="nativeBehaviorOptions.onBlock"
-            @popup-focus="nativeBehaviorOptions.onFocus"
-            class="focus-brand"
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="STelegram"
+            :iconName="IconMap.TELEGRAM"
+            :text="$t('components.modal_share_page.telegram')"
+            iconSize="1.5em"
             :window-features="windowFeatures"
             :share-options="shareOptions"
             :use-native-behavior="useNativeBehavior"
             :native-behavior-options="nativeBehaviorOptions"
-          >
-            <MetaTagSocialMedia
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.TELEGRAM"
-              :text="$t('components.modal_share_page.telegram')"
-              iconSize="1.5em"
-            />
-          </s-telegram>
-          <s-mastodon
-            @popup-close="nativeBehaviorOptions.onClose"
-            @popup-open="nativeBehaviorOptions.onOpen"
-            @popup-block="nativeBehaviorOptions.onBlock"
-            @popup-focus="nativeBehaviorOptions.onFocus"
-            class="focus-brand"
+          />
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="SMastodon"
+            :iconName="IconMap.MASTODON"
+            :text="$t('components.modal_share_page.mastodon')"
+            iconSize="1.5em"
             :window-features="windowFeatures"
             :share-options="shareOptions"
             :use-native-behavior="useNativeBehavior"
-          >
-            <MetaTagSocialMedia
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.MASTODON"
-              :text="$t('components.modal_share_page.mastodon')"
-              iconSize="1.5em"
-            />
-          </s-mastodon>
-          <s-twitter
-            @popup-close="nativeBehaviorOptions.onClose"
-            @popup-open="nativeBehaviorOptions.onOpen"
-            @popup-block="nativeBehaviorOptions.onBlock"
-            @popup-focus="nativeBehaviorOptions.onFocus"
-            class="focus-brand"
+            :native-behavior-options="nativeBehaviorOptions"
+          />
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="STwitter"
+            :iconName="IconMap.TWITTER"
+            text="@activist_org"
+            iconSize="1.5em"
             :window-features="windowFeatures"
             :share-options="shareOptions"
             :use-native-behavior="useNativeBehavior"
-          >
-            <MetaTagSocialMedia
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.TWITTER"
-              text="@activist_org"
-              iconSize="1.5em"
-            />
-          </s-twitter>
-          <s-email class="focus-brand" :share-options="shareOptions">
-            <MetaTagSocialMedia
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.ENVELOPE"
-              text="Email"
-              iconSize="1.5em"
-            />
-          </s-email>
-          <s-facebook
-            @popup-close="nativeBehaviorOptions.onClose"
-            @popup-open="nativeBehaviorOptions.onOpen"
-            @popup-block="nativeBehaviorOptions.onBlock"
-            @popup-focus="nativeBehaviorOptions.onFocus"
-            class="focus-brand"
+            :native-behavior-options="nativeBehaviorOptions"
+          />
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="SEmail"
+            :iconName="IconMap.ENVELOPE"
+            text="Email"
+            iconSize="1.5em"
+            :share-options="shareOptions"
+          />
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="SFacebook"
+            :iconName="IconMap.FACEBOOK"
+            :text="$t('components.modal_share_page.facebook')"
+            iconSize="1.5em"
+            :window-features="windowFeatures"
+            :share-options="shareOptions"
+            :use-native-behavior="useNativeBehavior"
+            :native-behavior-options="nativeBehaviorOptions"
+          />
+          <BtnShareIcon
+            type="redirect"
+            :iconName="IconMap.SIGNAL"
+            :text="$t('components.modal_share_page.signal')"
+            iconSize="1.5em"
+            :window-features="windowFeatures"
+            :share-options="shareOptions"
+            :use-native-behavior="useNativeBehavior"
+            :native-behavior-options="nativeBehaviorOptions"
+            :urlLink="getCurrentUrl()"
+            :name="getCurrentName()"
+            redirect-link="https://signal.me/#p"
+          />
+          <BtnShareIcon
+            type="vueSocials"
+            social-component="SFacebookMessenger"
+            :iconName="IconMap.MESSENGER"
+            :text="$t('components.modal_share_page.messenger')"
+            iconSize="1.5em"
             :window-features="windowFeatures"
             :share-options="shareOptions"
             :use-native-behavior="useNativeBehavior"
-          >
-            <MetaTagSocialMedia
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.FACEBOOK"
-              :text="$t('components.modal_share_page.facebook')"
-              iconSize="1.5em"
-            />
-          </s-facebook>
-          <div
-            @click="
-              copyToClipboardThenOpenUrl(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl(),
-                'https://signal.me/#p'
-              )
-            "
-            @keypress.space="
-              copyToClipboardThenOpenUrl(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl(),
-                'https://signal.me/#p'
-              )
-            "
-            @keypress.enter="
-              copyToClipboardThenOpenUrl(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl(),
-                'https://signal.me/#p'
-              )
-            "
-            class="focus-brand"
-            tabindex="0"
-            role="button"
-          >
-            <MetaTagSocialMedia
-              v-if="!signalContentCopied"
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.SIGNAL"
-              :text="$t('components.modal_share_page.signal')"
-              iconSize="1.5em"
-            />
-            <MetaTagSocialMedia
-              v-if="signalContentCopied"
-              class="text-accepted-green hover:text-accepted-green dark:text-accepted-green dark:hover:text-accepted-green"
-              :iconName="IconMap.SQUARE_CHECK"
-              :text="$t('components.modal_share_page.url_copied')"
-              iconSize="1.5em"
-            />
-          </div>
-          <div
-            @click="
-              copyToClipboard(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl()
-              )
-            "
-            @keypress.space="
-              copyToClipboard(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl()
-              )
-            "
-            @keypress.enter="
-              copyToClipboard(
-                props?.event?.name
-                  ? props?.event?.name
-                  : props?.organization?.name
-                    ? props?.organization?.name
-                    : '',
-                getCurrentUrl()
-              )
-            "
-            class="focus-brand"
-            tabindex="0"
-            role="button"
-          >
-            <MetaTagSocialMedia
-              v-if="!contentCopied"
-              class="dark:hover:distinct-text text-primary-text hover:text-distinct-text"
-              :iconName="IconMap.LINK"
-              :text="$t('components.modal_share_page.copy_link')"
-              iconSize="1.5em"
-            />
-            <MetaTagSocialMedia
-              v-if="contentCopied"
-              class="text-accepted-green hover:text-accepted-green dark:text-accepted-green dark:hover:text-accepted-green"
-              :iconName="IconMap.SQUARE_CHECK"
-              :text="$t('components.modal_share_page.url_copied')"
-              iconSize="1.5em"
-            />
-          </div>
+            :native-behavior-options="nativeBehaviorOptions"
+          />
+          <BtnShareIcon
+            type="redirect"
+            :iconName="IconMap.LINK"
+            :text="$t('components.modal_share_page.copy_link')"
+            iconSize="1.5em"
+            :window-features="windowFeatures"
+            :share-options="shareOptions"
+            :use-native-behavior="useNativeBehavior"
+            :native-behavior-options="nativeBehaviorOptions"
+            :urlLink="getCurrentUrl()"
+            :name="getCurrentName()"
+          />
         </div>
       </div>
       <div class="pt-6">
@@ -218,28 +126,11 @@
           <ModalQRCodeBtn v-if="user" :user="user" type="meta-tag" />
         </div>
       </div>
-      <!-- <s-facebook-messenger
-        @popup-close="onClose"
-        @popup-open="onOpen"
-        @popup-block="onBlock"
-        @popup-focus="onFocus"
-        :window-features="windowFeatures"
-        :share-options="shareOptions"
-        :use-native-behavior="useNativeBehavior"
-      >
-        <MetaTagSocialMedia
-          class="dark:hover:distinct-text text-primary-text hover:text-distinct-text dark:text-primary-text"
-          :iconName="IconMap.MESSENGER"
-          :text="$t('components.modal_share_page.messenger')"
-          iconSize="1.5em"
-        />
-      </s-facebook-messenger> -->
     </div>
   </ModalBase>
 </template>
 
 <script setup lang="ts">
-import { SEmail, SFacebook, SMastodon, STelegram, STwitter } from "vue-socials";
 import ModalBase from "~/components/modal/ModalBase.vue";
 import type { User } from "~/types/auth/user";
 import type { BtnAction } from "~/types/btn-props";
@@ -249,7 +140,7 @@ import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
 import { DialogTitle } from "@headlessui/vue";
-import { toast, Toaster } from "vue-sonner";
+import { Toaster } from "vue-sonner";
 import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
@@ -286,6 +177,14 @@ const setEntityInfo = (
   };
 };
 
+const getCurrentName = () => {
+  return props?.event?.name
+    ? props?.event?.name
+    : props?.organization?.name
+      ? props?.organization?.name
+      : "";
+};
+
 // Function to grab the url to the base id of the entity to share.
 const getCurrentUrl = () => {
   if (props.organization) {
@@ -319,12 +218,10 @@ const shareOptions = {
     `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
   redirectUri: "https://www.domain.com/",
   domain: "https://mas.to",
-  // appId: 842766727626496, Facebook Messenger App ID
+  appId: 842766727626496,
 };
 
 const useNativeBehavior = false;
-const contentCopied = ref(false);
-const signalContentCopied = ref(false);
 
 // No specific actions should be taken on these events, but we can customize the behavior if needed.
 const nativeBehaviorOptions = {
@@ -335,38 +232,4 @@ const nativeBehaviorOptions = {
 };
 
 const windowFeatures = {};
-
-const copyToClipboard = async (name: string, url: string) => {
-  try {
-    await navigator.clipboard.writeText(url);
-    contentCopied.value = true;
-    setTimeout(() => {
-      contentCopied.value = false;
-    }, 2000);
-  } catch (error) {
-    console.error(`Could not copy text: ${error}`);
-    contentCopied.value = false;
-  }
-};
-
-const copyToClipboardThenOpenUrl = async (
-  name: string,
-  url: string,
-  redirectUrl?: string
-) => {
-  try {
-    await navigator.clipboard.writeText(url);
-    signalContentCopied.value = true;
-    toast(t("components.modal_share_page.opening_signal"));
-    setTimeout(() => {
-      signalContentCopied.value = false;
-      if (redirectUrl) {
-        window.open(redirectUrl, "_blank");
-      }
-    }, 2000);
-  } catch (error) {
-    console.error(`Could not copy text: ${error}`);
-    signalContentCopied.value = false;
-  }
-};
 </script>
diff --git a/frontend/i18n/de.json b/frontend/i18n/de.json
index 75f0e3ef6..dd545344a 100644
--- a/frontend/i18n/de.json
+++ b/frontend/i18n/de.json
@@ -75,6 +75,8 @@
   "components._global.upvote_application_aria_label": "Stimmen Sie ab, um die Organisation zu unterstützen, die sich der Aktivistin anschließt",
   "components._global.working_groups_subtext": "Die folgenden Arbeitsgruppen sind innerhalb von {entity_name}",
   "components.btn_road_map.aria_label": "Erfahren Sie mehr über die Roadmap für Aktivist*innen",
+  "components.btn_share_icon.url_copied": "URL kopiert",
+  "components.btn_share_icon.opening_signal": "Signal wird geöffnet",
   "components.card.about._global.full_text": "Für den vollständigen Text anklicken",
   "components.card.about._global.full_text_aria_label": "Klicken Sie hier, um ein Popup mit dem vollständigen Text anzuzeigen",
   "components.card.about._global.members_lower": "Mitglieder",
@@ -290,10 +292,8 @@
   "components.modal_share_page.messenger": "Messenger",
   "components.modal_share_page.offline": "Offline",
   "components.modal_share_page.online": "Online",
-  "components.modal_share_page.opening_signal": "Signal wird geöffnet",
   "components.modal_share_page.signal": "Signal",
   "components.modal_share_page.telegram": "Telegram",
-  "components.modal_share_page.url_copied": "URL kopiert",
   "components.modal_upload_images.drag_image": "Bild hierher ziehen oder hier klicken, um es hinzuzufügen",
   "components.modal_upload_images.drag_images": "Bilder hierher ziehen oder hier klicken, um sie hinzuzufügen",
   "components.modal_upload_images.drop_image": "Bild hier ablegen, um es hinzuzufügen",
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index 4aca74f57..aa34df10f 100644
--- a/frontend/i18n/en-US.json
+++ b/frontend/i18n/en-US.json
@@ -75,6 +75,8 @@
   "components._global.upvote_application_aria_label": "Vote to support the organization joining activist",
   "components._global.working_groups_subtext": "The following are working groups within {entity_name}",
   "components.btn_road_map.aria_label": "Learn about the activist roadmap",
+  "components.btn_share_icon.url_copied": "URL copied",
+  "components.btn_share_icon.opening_signal": "Opening Signal",
   "components.card.about._global.full_text": "Click for full text",
   "components.card.about._global.full_text_aria_label": "Click to view a popup with the full text",
   "components.card.about._global.members_lower": "members",
@@ -291,10 +293,8 @@
   "components.modal_share_page.messenger": "Messenger",
   "components.modal_share_page.offline": "Offline",
   "components.modal_share_page.online": "Online",
-  "components.modal_share_page.opening_signal": "Opening Signal",
   "components.modal_share_page.signal": "Signal",
   "components.modal_share_page.telegram": "Telegram",
-  "components.modal_share_page.url_copied": "URL copied",
   "components.modal_upload_images.drag_image": "Drag your image or click here to add it",
   "components.modal_upload_images.drag_images": "Drag your images or click here to add them",
   "components.modal_upload_images.drop_image": "Drop the image here to add it",
diff --git a/frontend/i18n/es.json b/frontend/i18n/es.json
index 7f574b95f..2574331b6 100644
--- a/frontend/i18n/es.json
+++ b/frontend/i18n/es.json
@@ -75,6 +75,8 @@
   "components._global.upvote_application_aria_label": "Vota para apoyar a la organización que se une a los activistas",
   "components._global.working_groups_subtext": "Los siguientes son grupos de trabajo dentro de {entity_name}",
   "components.btn_road_map.aria_label": "Conozca la hoja de ruta de activist",
+  "components.btn_share_icon.url_copied": "URL copiada",
+  "components.btn_share_icon.opening_signal": "Abriendo Signal",
   "components.card.about._global.full_text": "Click para texto completo",
   "components.card.about._global.full_text_aria_label": "Click para ver una ventana emergente con el texto completo",
   "components.card.about._global.members_lower": "miembros",
@@ -291,10 +293,8 @@
   "components.modal_share_page.messenger": "Messenger",
   "components.modal_share_page.offline": "Desconectado",
   "components.modal_share_page.online": "Conectado",
-  "components.modal_share_page.opening_signal": "Abriendo Signal",
   "components.modal_share_page.signal": "Signal",
   "components.modal_share_page.telegram": "Telegram",
-  "components.modal_share_page.url_copied": "URL copiada",
   "components.modal_upload_images.drag_image": "Arrastra tu imagen o haz clic aquí para agregarla",
   "components.modal_upload_images.drag_images": "Arrastra tus imágenes o haz clic aquí para agregarlas",
   "components.modal_upload_images.drop_image": "Suelta la imagen aquí para agregarla",
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
index 0ef3781e2..2c76b7fd6 100644
--- a/frontend/i18n/fr.json
+++ b/frontend/i18n/fr.json
@@ -75,6 +75,8 @@
   "components._global.upvote_application_aria_label": "Voter pour soutenir l’organisation qui rejoint le mouvement",
   "components._global.working_groups_subtext": "Les groupes de travail suivants font partie de {entity_name}",
   "components.btn_road_map.aria_label": "En savoir plus sur la feuille de route d'Activist",
+  "components.btn_share_icon.url_copied": "URL copiée",
+  "components.btn_share_icon.opening_signal": "Signal d'ouverture",
   "components.card.about._global.full_text": "Cliquer pour texte intégral",
   "components.card.about._global.full_text_aria_label": "Cliquez pour afficher une fenêtre contextuelle avec le texte intégral",
   "components.card.about._global.members_lower": "membres",
@@ -291,10 +293,8 @@
   "components.modal_share_page.messenger": "Messenger",
   "components.modal_share_page.offline": "Hors ligne",
   "components.modal_share_page.online": "En ligne",
-  "components.modal_share_page.opening_signal": "Signal d'ouverture",
   "components.modal_share_page.signal": "Signal",
   "components.modal_share_page.telegram": "Télégram",
-  "components.modal_share_page.url_copied": "URL copiée",
   "components.modal_upload_images.drag_image": "Faites glisser votre image ou cliquez ici pour l’ajouter",
   "components.modal_upload_images.drag_images": "Faites glisser vos images ou cliquez ici pour les ajouter",
   "components.modal_upload_images.drop_image": "Déposez l’image ici pour l’ajouter",
diff --git a/frontend/i18n/pt.json b/frontend/i18n/pt.json
index 48fe70b0f..ab5b3b003 100644
--- a/frontend/i18n/pt.json
+++ b/frontend/i18n/pt.json
@@ -75,6 +75,8 @@
   "components._global.upvote_application_aria_label": "Votar para apoiar a organização a juntar-se ao ativista",
   "components._global.working_groups_subtext": "Os seguintes são grupos de trabalho dentro de {entity_name}",
   "components.btn_road_map.aria_label": "Saber mais sobre o roadmap do ativista",
+  "components.btn_share_icon.url_copied": "URL copiado",
+  "components.btn_share_icon.opening_signal": "A abrir o Signal",
   "components.card.about._global.full_text": "Clique para o texto completo",
   "components.card.about._global.full_text_aria_label": "Clique para ver um popup com o texto completo",
   "components.card.about._global.members_lower": "membros",
@@ -291,10 +293,8 @@
   "components.modal_share_page.messenger": "Messenger",
   "components.modal_share_page.offline": "Offline",
   "components.modal_share_page.online": "Online",
-  "components.modal_share_page.opening_signal": "A abrir o Signal",
   "components.modal_share_page.signal": "Signal",
   "components.modal_share_page.telegram": "Telegram",
-  "components.modal_share_page.url_copied": "URL copiado",
   "components.modal_upload_images.drag_image": "Arraste a sua imagem ou clique aqui para adicioná-la",
   "components.modal_upload_images.drag_images": "Arraste as suas imagens ou clique aqui para adicioná-las",
   "components.modal_upload_images.drop_image": "Solte a imagem aqui para adicioná-la",

From 05ef792af02dbd20c878dd8bcbbf0bdefcd31e44 Mon Sep 17 00:00:00 2001
From: Sean Leong <seanleong888@gmail.com>
Date: Fri, 20 Dec 2024 02:32:34 +0800
Subject: [PATCH 2/3] hotfix: ESLint fix

---
 frontend/components/btn/BtnShareIcon.vue     | 2 +-
 frontend/components/modal/ModalSharePage.vue | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/components/btn/BtnShareIcon.vue b/frontend/components/btn/BtnShareIcon.vue
index 5121c5a22..cc8531c3c 100644
--- a/frontend/components/btn/BtnShareIcon.vue
+++ b/frontend/components/btn/BtnShareIcon.vue
@@ -1,12 +1,12 @@
 <template>
   <component
     v-if="type == 'vueSocials'"
-    :is="vueSocials[socialComponent]"
     @popup-close="nativeBehaviorOptions.onClose"
     @popup-open="nativeBehaviorOptions.onOpen"
     @popup-block="nativeBehaviorOptions.onBlock"
     @popup-focus="nativeBehaviorOptions.onFocus"
     class="focus-brand"
+    v-bind:is="vueSocials[socialComponent]"
     :window-features="windowFeatures"
     :share-options="shareOptions"
     :use-native-behavior="useNativeBehavior"
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 841136c26..61f139bd3 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -141,7 +141,6 @@ import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
 import { DialogTitle } from "@headlessui/vue";
 import { Toaster } from "vue-sonner";
-import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   cta: BtnAction["cta"];
@@ -152,7 +151,6 @@ const props = defineProps<{
   user?: User;
 }>();
 
-const { t } = useI18n();
 const modalName = "ModalSharePage";
 
 const getEntityType = () => {

From 11cbd5d388f2a6a1c10c5ce511dbc96ea69e428f Mon Sep 17 00:00:00 2001
From: Sean Leong <seanleong888@gmail.com>
Date: Fri, 20 Dec 2024 15:46:40 +0800
Subject: [PATCH 3/3] hotfix: linting and type check

---
 frontend/components/btn/BtnShareIcon.vue     | 3 ++-
 frontend/pages/organizations/[id]/events.vue | 5 ++++-
 frontend/types/entities/organization.d.ts    | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/components/btn/BtnShareIcon.vue b/frontend/components/btn/BtnShareIcon.vue
index cc8531c3c..7a659f9d2 100644
--- a/frontend/components/btn/BtnShareIcon.vue
+++ b/frontend/components/btn/BtnShareIcon.vue
@@ -5,8 +5,8 @@
     @popup-open="nativeBehaviorOptions.onOpen"
     @popup-block="nativeBehaviorOptions.onBlock"
     @popup-focus="nativeBehaviorOptions.onFocus"
+    :is="vueSocials[socialComponent]"
     class="focus-brand"
-    v-bind:is="vueSocials[socialComponent]"
     :window-features="windowFeatures"
     :share-options="shareOptions"
     :use-native-behavior="useNativeBehavior"
@@ -24,6 +24,7 @@
     @click="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
     @keypress.space="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
     @keypress.enter="copyToClipboardThenOpenUrl(name, urlLink, redirectLink)"
+    :is="vueSocials[socialComponent]"
     class="focus-brand"
     tabindex="0"
     role="button"
diff --git a/frontend/pages/organizations/[id]/events.vue b/frontend/pages/organizations/[id]/events.vue
index efad7ed5b..1ed08d170 100644
--- a/frontend/pages/organizations/[id]/events.vue
+++ b/frontend/pages/organizations/[id]/events.vue
@@ -27,7 +27,10 @@
         />
       </div>
     </HeaderAppPage>
-    <div v-if="organization.events?.length > 0" class="space-y-3 py-4">
+    <div
+      v-if="organization.events && organization.events.length > 0"
+      class="space-y-3 py-4"
+    >
       <CardSearchResultEvent
         v-for="(e, i) in organization.events"
         :key="i"
diff --git a/frontend/types/entities/organization.d.ts b/frontend/types/entities/organization.d.ts
index 78bcba262..55436fe95 100644
--- a/frontend/types/entities/organization.d.ts
+++ b/frontend/types/entities/organization.d.ts
@@ -1,4 +1,5 @@
 import type { Location } from "~/types/content/location";
+import type { Event } from "~/types/events/event";
 
 // MARK: Main Table