fix: Fixed LinkedIn links with unicode (#3953)

* fix: Fixed LinkedIn links with unicode

* feat: Added checkUrlType and getDisplayValueByUrlType util functions

packages/twenty-front/src/utils/__tests__/checkUrlType.test.ts

@@ -0,0 +1,17 @@
+import { checkUrlType } from '~/utils/checkUrlType';
+
+describe('checkUrlType', () => {
+  it('should return "linkedin", if linkedin url', () => {
+    expect(checkUrlType('https://www.linkedin.com/in/håkan-fisk')).toBe(
+      'linkedin',
+    );
+  });
+
+  it('should return "twitter", if twitter url', () => {
+    expect(checkUrlType('https://www.twitter.com/john-doe')).toBe('twitter');
+  });
+
+  it('should return "url", if neither linkedin nor twitter url', () => {
+    expect(checkUrlType('https://www.example.com')).toBe('url');
+  });
+});

packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts

@@ -0,0 +1,40 @@
+import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
+
+describe('getDisplayValueByUrlType', () => {
+  it('should return the linkedin username from the url', () => {
+    expect(
+      getDisplayValueByUrlType({
+        type: LinkType.LinkedIn,
+        href: 'https://www.linkedin.com/in/håkan-fisk',
+      }),
+    ).toBe('håkan-fisk');
+    expect(
+      getDisplayValueByUrlType({
+        type: LinkType.LinkedIn,
+        href: 'https://www.linkedin.com/in/Matías',
+      }),
+    ).toBe('Matías');
+    expect(
+      getDisplayValueByUrlType({
+        type: LinkType.LinkedIn,
+        href: 'https://www.linkedin.com/in/Mårten',
+      }),
+    ).toBe('Mårten');
+    expect(
+      getDisplayValueByUrlType({
+        type: LinkType.LinkedIn,
+        href: 'https://www.linkedin.com/in/Sörvik',
+      }),
+    ).toBe('Sörvik');
+  });
+
+  it('should return the twitter username from the url', () => {
+    expect(
+      getDisplayValueByUrlType({
+        type: LinkType.Twitter,
+        href: 'https://www.twitter.com/john-doe',
+      }),
+    ).toBe('@john-doe');
+  });
+});

packages/twenty-front/src/utils/checkUrlType.ts

@@ -0,0 +1,16 @@
+import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+
+export const checkUrlType = (url: string) => {
+  if (
+    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
+      url,
+    )
+  ) {
+    return LinkType.LinkedIn;
+  }
+  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
+    return LinkType.Twitter;
+  }
+
+  return LinkType.Url;
+};

packages/twenty-front/src/utils/getDisplayValueByUrlType.ts

@@ -0,0 +1,33 @@
+import { LinkType } from '@/ui/navigation/link/components/SocialLink';
+
+type getUrlDisplayValueByUrlTypeProps = {
+  type: LinkType;
+  href: string;
+};
+
+export const getDisplayValueByUrlType = ({
+  type,
+  href,
+}: getUrlDisplayValueByUrlTypeProps) => {
+  if (type === 'linkedin') {
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company)\/(.*)/,
+    );
+    if (matches && matches[1]) {
+      return matches[1];
+    } else {
+      return 'LinkedIn';
+    }
+  }
+
+  if (type === 'twitter') {
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
+    );
+    if (matches && matches[1]) {
+      return `@${matches[1]}`;
+    } else {
+      return '@twitter';
+    }
+  }
+};