fix: refactor OG link builder (#17897)

* fix: manually encode special characters

* fix test

* fix

* fix

apps/web/playwright/booking-pages.e2e.ts

@@ -55,10 +55,10 @@ test("check SSR and OG - User Event Type", async ({ page, users }) => {
   expect(canonicalLink).toEqual(`${WEBAPP_URL}/${user.username}/30-min`);
   // Verify that there is correct URL that would generate the awesome OG image
   expect(ogImage).toContain(
-    "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage?type=meeting&title=30%20min"
+    "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D30%2Bmin"
   );
   // Verify Organizer Name in the URL
-  expect(ogImage).toContain("meetingProfileName=Test%20User");
+  expect(ogImage).toContain("meetingProfileName%3DTest%2BUser");
 });
 
 todo("check SSR and OG - Team Event Type");

apps/web/playwright/organization/booking.e2e.ts

@@ -428,10 +428,10 @@ test.describe("Bookings", () => {
           expect(canonicalLink).toEqual(`${orgOrigin}${calLink}`);
           // Verify that there is correct URL that would generate the awesome OG image
           expect(ogImage).toContain(
-            "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage?type=meeting&title="
+            "/_next/image?w=1200&q=100&url=%2Fapi%2Fsocial%2Fog%2Fimage%3Ftype%3Dmeeting%26title%3D"
           );
           // Verify Organizer Name in the URL
-          expect(ogImage).toContain("meetingProfileName=Test%20User");
+          expect(ogImage).toContain("meetingProfileName%3DTest%2BUser");
         }
       );
     });

apps/web/playwright/settings/upload-avatar.e2e.ts

@@ -64,9 +64,10 @@ test.describe("User Avatar", async () => {
       );
       // verify objectKey is passed to the OG image
       // yes, OG image URI encodes at multiple places.. don't want to mess with that.
+      const searchParam = `meetingImage=${encodeURIComponent(`${CAL_URL}/api/avatar/${objectKey}.png`)}`;
       await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
         "content",
-        new RegExp(`meetingImage=${encodeURIComponent(`${CAL_URL}/api/avatar/${objectKey}.png`)}`)
+        new RegExp(encodeURIComponent(searchParam))
       );
     });
   });