Org labels and typos (#9646)

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -24,9 +24,9 @@ interface UsernameAvailabilityFieldProps {
 function useUserNamePrefix(organization: RouterOutputs["viewer"]["me"]["organization"]): string {
   return organization
     ? organization.slug
-      ? `${organization.slug}.${subdomainSuffix()}`
+      ? `${organization.slug}.${subdomainSuffix()}/`
       : organization.metadata && organization.metadata.requestedSlug
-      ? `${organization.metadata.requestedSlug}.${subdomainSuffix()}`
+      ? `${organization.metadata.requestedSlug}.${subdomainSuffix()}/`
       : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")
     : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "");
 }

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

@@ -547,7 +547,7 @@
   "team_description": "A few sentences about your team. This will appear on your team's url page.",
   "org_description": "A few sentances about your organization. This will appear on your organization's url page.",
   "members": "Members",
-  "organization_members":"Organisation members",
+  "organization_members":"Organization members",
   "member": "Member",
   "number_member_one": "{{count}} member",
   "number_member_other": "{{count}} members",
@@ -1864,7 +1864,7 @@
   "about_your_organization": "About your organization",
   "about_your_organization_description": "Organizations are shared environments where you can create multiple teams with shared members, event types, apps, workflows and more.",
   "create_your_teams": "Create your teams",
-  "create_your_teams_description": "Start scheduling together by adding your team members to your organisation",
+  "create_your_teams_description": "Start scheduling together by adding your team members to your organization",
   "invite_organization_admins": "Invite your organization admins",
   "invite_organization_admins_description": "These admins will have access to all teams in your organization. You can add team admins and members later.",
   "set_a_password": "Set a password",
@@ -1890,5 +1890,8 @@
   "my_settings": "My Settings",
   "sender_id_info": "Name or number shown as the sender of an SMS (some countries do not allow alphanumeric sender IDs)",
   "no_organization_slug": "There was an error creating teams for this organization. Missing URL slug.",
+  "org_name": "Organization name",
+  "org_url": "Organization URL",
+  "copy_link_org": "Copy link to organization",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/ee/organizations/pages/settings/profile.tsx

@@ -7,6 +7,8 @@ import { useState, useLayoutEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
+import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -31,7 +33,6 @@ import {
 } from "@calcom/ui";
 
 import { getLayout } from "../../../../settings/layouts/SettingsLayout";
-import { extractDomainFromWebsiteUrl } from "../../lib/utils";
 
 const regex = new RegExp("^[a-zA-Z0-9-]*$");
 
@@ -47,6 +48,7 @@ const OrgProfileView = () => {
   const utils = trpc.useContext();
   const session = useSession();
   const [firstRender, setFirstRender] = useState(true);
+  const orgBranding = useOrgBrandingValues();
 
   useLayoutEffect(() => {
     document.body.focus();
@@ -88,7 +90,9 @@ const OrgProfileView = () => {
     (currentOrganisation.user.role === MembershipRole.OWNER ||
       currentOrganisation.user.role === MembershipRole.ADMIN);
 
-  const permalink = `${currentOrganisation?.slug}.cal.com`;
+  const permalink = `${new URL(process.env.NEXT_PUBLIC_WEBSITE_URL || "").protocol}//${
+    orgBranding?.slug
+  }.${subdomainSuffix()}`;
 
   const isBioEmpty =
     !currentOrganisation ||
@@ -163,7 +167,7 @@ const OrgProfileView = () => {
                   <div className="mt-8">
                     <TextField
                       name="name"
-                      label={t("team_name")}
+                      label={t("org_name")}
                       value={value}
                       onChange={(e) => {
                         form.setValue("name", e?.target.value);
@@ -175,10 +179,10 @@ const OrgProfileView = () => {
               <div className="mt-8">
                 <TextField
                   name="slug"
-                  label={t("team_url")}
+                  label={t("org_url")}
                   value={currentOrganisation.slug ?? ""}
                   disabled
-                  addOnSuffix={`.${extractDomainFromWebsiteUrl}`}
+                  addOnSuffix={`.${subdomainSuffix()}`}
                 />
               </div>
               <div className="mt-8">
@@ -201,7 +205,7 @@ const OrgProfileView = () => {
             <div className="flex">
               <div className="flex-grow">
                 <div>
-                  <Label className="text-emphasis">{t("team_name")}</Label>
+                  <Label className="text-emphasis">{t("org_name")}</Label>
                   <p className="text-default text-sm">{currentOrganisation?.name}</p>
                 </div>
                 {currentOrganisation && !isBioEmpty && (
@@ -221,7 +225,7 @@ const OrgProfileView = () => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Copied to clipboard", "success");
                   }}>
-                  {t("copy_link_team")}
+                  {t("copy_link_org")}
                 </LinkIconButton>
               </div>
             </div>