Remove organization profiles and render as identities

frontend/src/assets/scss/buttons.scss

@@ -339,7 +339,9 @@
   &--phone,
   &--phone:hover,
   &--custom-platform,
-  &--custom-platform:hover {
+  &--custom-platform:hover,
+  &--facebook,
+  &--facebook:hover {
     @apply leading-none cursor-pointer bg-white text-gray-600 border border-gray-200;
   }
 

frontend/src/integrations/facebook/config.js

@@ -0,0 +1,4 @@
+export default {
+  image: '/images/integrations/facebook.png',
+  hideAsIntegration: true,
+};

frontend/src/integrations/facebook/index.js

@@ -0,0 +1,3 @@
+import config from './config';
+
+export default config;

frontend/src/integrations/integrations-config.js

@@ -12,6 +12,7 @@ import zapier from './zapier';
 import crunchbase from './crunchbase';
 import make from './make';
 import git from './git';
+import facebook from './facebook';
 
 class IntegrationsConfig {
   get integrations() {
@@ -29,6 +30,7 @@ class IntegrationsConfig {
       git,
       crunchbase,
       make,
+      facebook,
     };
   }
 

frontend/src/modules/organization/components/form/organization-form-identities.vue

@@ -109,7 +109,7 @@ const platforms = [
   {
     name: 'linkedin',
     label: 'LinkedIn',
-    prefix: 'linkedin.com/',
+    prefix: 'linkedin.com/company/',
     imgContainerClass:
       'h-8 w-8 rounded flex items-center justify-center text-base platform-logo--linkedin',
   },
@@ -123,7 +123,7 @@ const platforms = [
   {
     name: 'crunchbase',
     label: 'Crunchbase',
-    prefix: 'crunchbase.com/',
+    prefix: 'crunchbase.com/organization/',
     imgContainerClass:
       'h-8 w-8 rounded flex items-center justify-center text-base platform-logo--crunchbase',
   },

frontend/src/modules/organization/components/list/organization-list-table.vue

@@ -488,45 +488,6 @@
                 </template>
               </el-table-column>
 
-              <!-- Profiles -->
-              <el-table-column
-                label="Profiles"
-                :width="profilesColumnWidth"
-              >
-                <template #default="scope">
-                  <router-link
-                    :to="{
-                      name: 'organizationView',
-                      params: { id: scope.row.id },
-                    }"
-                    class="block"
-                  >
-                    <div
-                      v-if="scope.row.profiles?.length && scope.row.profiles?.some((e) => !!e)"
-                      class="text-sm cursor-auto flex flex-wrap gap-1"
-                    >
-                      <app-tags
-                        :tags="scope.row.profiles"
-                        :interactive="true"
-                        :collapse-tags="true"
-                        :collapse-tags-tooltip="true"
-                      >
-                        <template #tagTooltipContent>
-                          <span>Open profile
-                            <i
-                              class="ri-external-link-line text-gray-400"
-                            /></span>
-                        </template>
-                      </app-tags>
-                    </div>
-                    <span
-                      v-else
-                      class="text-gray-500"
-                    >-</span>
-                  </router-link>
-                </template>
-              </el-table-column>
-
               <!-- Actions -->
               <el-table-column fixed="right">
                 <template #default="scope">
@@ -586,7 +547,6 @@ import {
 import { formatDateToTimeAgo } from '@/utils/date';
 import { formatNumberToCompact } from '@/utils/number';
 import { withHttp, toSentenceCase } from '@/utils/string';
-import AppTags from '@/shared/tags/tags.vue';
 import AppOrganizationIdentities from '../organization-identities.vue';
 import AppOrganizationListToolbar from './organization-list-toolbar.vue';
 import AppOrganizationName from '../organization-name.vue';
@@ -661,6 +621,7 @@ const hasIdentities = (row) => (
     || !!row.linkedin
     || !!row.twitter
     || !!row.crunchbase
+    || !!row.facebook
     || !!row.phoneNumbers?.length
 );
 
@@ -712,22 +673,6 @@ const emailsColumnWidth = computed(() => {
   return maxTabWidth;
 });
 
-const profilesColumnWidth = computed(() => {
-  let maxTabWidth = 150;
-
-  rows.value.forEach((row) => {
-    const tabWidth = row.profiles
-      ?.map((profile) => (profile ? profile.length * 12 : 0))
-      .reduce((a, b) => a + b, 0);
-
-    if (tabWidth > maxTabWidth) {
-      maxTabWidth = tabWidth > 400 ? 400 : tabWidth;
-    }
-  });
-
-  return maxTabWidth;
-});
-
 const trackEmailClick = () => {
   window.analytics.track('Click Organization Contact', {
     channel: 'Email',

frontend/src/modules/organization/components/organization-identities.vue

@@ -10,8 +10,9 @@
         platform="github"
         track-event-name="Click Organization Contact"
         track-event-channel="GitHub"
-        :has-tooltip="true"
         tooltip-label="GitHub profile"
+        :username-handles="[organization['github']?.handle]"
+        :has-tooltip="true"
         :href="getIdentityLink('github')"
         :as-link="
           !!(
@@ -27,8 +28,9 @@
         platform="linkedin"
         track-event-name="Click Organization Contact"
         track-event-channel="LinkedIn"
-        :has-tooltip="true"
         tooltip-label="LinkedIn profile"
+        :username-handles="[organization['linkedin']?.handle]"
+        :has-tooltip="true"
         :href="getIdentityLink('linkedin')"
         :as-link="
           !!(
@@ -44,8 +46,9 @@
         platform="twitter"
         track-event-name="Click Organization Contact"
         track-event-channel="Twitter"
-        :has-tooltip="true"
         tooltip-label="Twitter profile"
+        :username-handles="[organization['twitter']?.handle]"
+        :has-tooltip="true"
         :href="getIdentityLink('twitter')"
         :as-link="
           !!(
@@ -61,8 +64,9 @@
         platform="crunchbase"
         track-event-name="Click Organization Contact"
         track-event-channel="Crunchbase"
-        :has-tooltip="true"
         tooltip-label="Crunchbase profile"
+        :username-handles="[organization['crunchbase']?.handle]"
+        :has-tooltip="true"
         :href="getIdentityLink('crunchbase')"
         :as-link="
           !!(
@@ -73,6 +77,24 @@
       />
     </div>
 
+    <!-- Facebook -->
+    <app-platform
+      v-if="!!organization.facebook"
+      platform="facebook"
+      track-event-name="Click Organization Contact"
+      track-event-channel="Facebook"
+      tooltip-label="Facebook profile"
+      :username-handles="[organization['facebook']?.handle]"
+      :has-tooltip="true"
+      :href="getIdentityLink('facebook')"
+      :as-link="
+        !!(
+          organization['facebook']?.url
+          || organization['facebook']?.handle
+        )
+      "
+    />
+
     <el-divider
       v-if="showDivider"
       direction="vertical"
@@ -103,6 +125,7 @@
 </template>
 
 <script setup>
+import { withHttp } from '@/utils/string';
 import { defineProps, computed } from 'vue';
 
 const props = defineProps({
@@ -116,7 +139,8 @@ const hasSocialIdentities = computed(
   () => !!props.organization.github
     || !!props.organization.linkedin
     || !!props.organization.twitter
-    || !!props.organization.crunchbase,
+    || !!props.organization.crunchbase
+    || !!props.organization.facebook,
 );
 const showDivider = computed(
   () => !!props.organization.phoneNumbers?.length
@@ -125,24 +149,27 @@ const showDivider = computed(
 
 const getIdentityLink = (platform) => {
   if (props.organization[platform]?.url) {
-    return props.organization[platform]?.url;
+    return withHttp(props.organization[platform]?.url);
   } if (props.organization[platform]?.handle) {
     let url;
 
     if (platform === 'linkedin') {
-      url = 'https://www.linkedin.com/';
+      url = 'https://www.linkedin.com/company/';
     } else if (platform === 'github') {
       url = 'https://github.com/';
     } else if (platform === 'twitter') {
       url = 'https://twitter.com/';
     } else if (platform === 'crunchbase') {
-      url = 'https://www.crunchbase.com/';
+      url = 'https://www.crunchbase.com/organization/';
+    } else if (platform === 'facebook') {
+      url = 'https://www.facebook.com/';
     } else {
       return null;
     }
 
     return `${url}${props.organization[platform].handle}`;
   }
+
   return null;
 };
 </script>

frontend/src/modules/organization/components/view/_aside/_aside-enriched.vue

@@ -26,21 +26,6 @@
               })
             }}
           </span>
-          <div v-else-if="attribute.type === attributesTypes.multiSelect" class="flex flex-wrap gap-1">
-            <app-tags
-              :tags="organization[attribute.name]"
-              :interactive="attribute.isUrl"
-              :collapse-tags="true"
-              :collapse-tags-tooltip="true"
-            >
-              <template v-if="attribute.isUrl" #tagTooltipContent>
-                <span>Open profile
-                  <i
-                    class="ri-external-link-line text-gray-400"
-                  /></span>
-              </template>
-            </app-tags>
-          </div>
           <span v-else>
             {{ attribute.type === attributesTypes.string ? toSentenceCase(organization[attribute.name]) : organization[attribute.name] }}
           </span>
@@ -55,7 +40,6 @@ import { computed, defineProps } from 'vue';
 import enrichmentAttributes, { attributesTypes } from '@/modules/organization/config/organization-enrichment-attributes';
 import { formatDate } from '@/utils/date';
 import { toSentenceCase } from '@/utils/string';
-import AppTags from '@/shared/tags/tags.vue';
 
 const props = defineProps({
   organization: {

frontend/src/modules/organization/components/view/organization-view-aside.vue

@@ -95,6 +95,28 @@
             class="ri-external-link-line text-gray-300"
           />
         </a>
+        <a
+          v-if="getIdentityLink('facebook')"
+          class="px-6 py-2 flex justify-between items-center relative"
+          :class="
+            getIdentityLink('facebook')
+              ? 'hover:bg-gray-50 transition-colors cursor-pointer'
+              : ''
+          "
+          :href="getIdentityLink('facebook')"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div class="flex gap-3 items-center">
+            <app-platform platform="facebook" />
+            <span class="text-gray-900 text-xs">
+              Facebook</span>
+          </div>
+          <i
+            v-if="getIdentityLink('facebook')"
+            class="ri-external-link-line text-gray-300"
+          />
+        </a>
         <el-divider
           v-if="showDivider"
           class="border-t-gray-200"
@@ -167,6 +189,7 @@
 <script setup>
 import { defineProps, computed } from 'vue';
 import enrichmentAttributes, { attributesTypes } from '@/modules/organization/config/organization-enrichment-attributes';
+import { withHttp } from '@/utils/string';
 import AppOrganizationAsideEnriched from './_aside/_aside-enriched.vue';
 
 const props = defineProps({
@@ -182,14 +205,16 @@ const showDivider = computed(
     && (!!props.organization.github
       || !!props.organization.linkedin
       || !!props.organization.twitter
-      || !!props.organization.crunchbase),
+      || !!props.organization.crunchbase
+      || !!props.organization.facebook),
 );
 
 const noIdentities = computed(() => (
   !props.organization.github?.url
     && !props.organization.linkedin?.url
     && !props.organization.twitter?.url
     && !props.organization.crunchbase?.url
+    && !props.organization.facebook?.url
     && (!props.organization.emails
       || props.organization.emails.length === 0)
     && (!props.organization.phoneNumbers
@@ -206,18 +231,20 @@ const shouldShowAttributes = computed(() => enrichmentAttributes.some((a) => {
 
 const getIdentityLink = (platform) => {
   if (props.organization[platform]?.url) {
-    return props.organization[platform]?.url;
+    return withHttp(props.organization[platform]?.url);
   } if (props.organization[platform]?.handle) {
     let url;
 
     if (platform === 'linkedin') {
-      url = 'https://www.linkedin.com/';
+      url = 'https://www.linkedin.com/company';
     } else if (platform === 'github') {
       url = 'https://github.com/';
     } else if (platform === 'twitter') {
       url = 'https://twitter.com/';
     } else if (platform === 'crunchbase') {
-      url = 'https://www.crunchbase.com/';
+      url = 'https://www.crunchbase.com/organization/';
+    } else if (platform === 'facebook') {
+      url = 'https://www.facebook.com/';
     } else {
       return null;
     }

frontend/src/modules/organization/config/organization-enrichment-attributes.js

@@ -44,12 +44,4 @@ export default [
     showInForm: true,
     showInAttributes: true,
   },
-  {
-    name: 'profiles',
-    label: 'Profiles',
-    type: attributesTypes.multiSelect,
-    showInForm: true,
-    showInAttributes: true,
-    isUrl: true,
-  },
 ];