fix: unpublished org/team avatar and i18n (#11429)

* fix: unpublished org/team avatar and i18n

* Fixing e2e

Author: leog

apps/web/playwright/unpublished.e2e.ts

@@ -9,7 +9,7 @@ test.describe.configure({ mode: "parallel" });
 const title = (name: string) => `${name} is unpublished`;
 const description = (entity: string) =>
   `This ${entity} link is currently not available. Please contact the ${entity} owner or ask them to publish it.`;
-const avatar = (slug: string) => `/team/${slug}/avatar.png`;
+const avatar = (slug: string, entity = "team") => `/${entity}/${slug}/avatar.png`;
 
 test.afterAll(async ({ users }) => {
   await users.deleteAll();
@@ -52,7 +52,7 @@ test.describe("Unpublished", () => {
     expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
     expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
     expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
-    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug));
+    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug, "org"));
   });
 
   test("Organization sub-team", async ({ users, page }) => {
@@ -70,7 +70,7 @@ test.describe("Unpublished", () => {
     expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
     expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
     expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
-    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug));
+    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug, "org"));
   });
 
   test("Organization sub-team event-type", async ({ users, page }) => {
@@ -90,7 +90,7 @@ test.describe("Unpublished", () => {
     expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
     expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
     expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
-    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug));
+    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug, "org"));
   });
 
   test("Organization user", async ({ users, page }) => {
@@ -102,7 +102,7 @@ test.describe("Unpublished", () => {
     expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
     expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
     expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
-    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug));
+    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug, "org"));
   });
 
   test("Organization user event-type", async ({ users, page }) => {
@@ -115,6 +115,6 @@ test.describe("Unpublished", () => {
     expect(await page.locator('[data-testid="empty-screen"]').count()).toBe(1);
     expect(await page.locator(`h2:has-text("${title(org.name)}")`).count()).toBe(1);
     expect(await page.locator(`div:text("${description("organization")}")`).count()).toBe(1);
-    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug));
+    await expect(page.locator(`img`)).toHaveAttribute("src", avatar(requestedSlug, "org"));
   });
 });

apps/web/public/static/locales/en/common.json

@@ -1743,7 +1743,8 @@
   "show_on_booking_page": "Show on booking page",
   "get_started_zapier_templates": "Get started with Zapier templates",
   "team_is_unpublished": "{{team}} is unpublished",
-  "team_is_unpublished_description": "This {{entity}} link is currently not available. Please contact the {{entity}} owner or ask them to publish it.",
+  "org_is_unpublished_description": "This organization link is currently not available. Please contact the organization owner or ask them to publish it.",
+  "team_is_unpublished_description": "This team link is currently not available. Please contact the team owner or ask them to publish it.",
   "team_member": "Team member",
   "a_routing_form": "A Routing Form",
   "form_description_placeholder": "Form Description",

packages/ui/components/unpublished-entity/UnpublishedEntity.tsx

@@ -13,13 +13,17 @@ export function UnpublishedEntity(props: UnpublishedEntityProps) {
   return (
     <div className="m-8 flex items-center justify-center">
       <EmptyScreen
-        avatar={<Avatar alt={slug ?? ""} imageSrc={`/team/${slug}/avatar.png`} size="lg" />}
+        avatar={
+          <Avatar
+            alt={slug ?? ""}
+            imageSrc={props.orgSlug ? `/org/${slug}/avatar.png` : `/team/${slug}/avatar.png`}
+            size="lg"
+          />
+        }
         headline={t("team_is_unpublished", {
           team: props.name,
         })}
-        description={t("team_is_unpublished_description", {
-          entity: props.orgSlug ? t("organization").toLowerCase() : t("team").toLowerCase(),
-        })}
+        description={t(`${props.orgSlug ? "org" : "team"}_is_unpublished_description`)}
       />
     </div>
   );