Dynamic group booking fix to accept "+" in URL and updated Head SEO for dynamic booking (#2414)

apps/web/pages/[user].tsx

@@ -43,6 +43,11 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();
   const isSingleUser = props.users.length === 1;
   const isDynamicGroup = props.users.length > 1;
+  const dynamicNames = isDynamicGroup
+    ? props.users.map((user) => {
+        return user.name || "";
+      })
+    : [];
   const dynamicUsernames = isDynamicGroup
     ? props.users.map((user) => {
         return user.username || "";
@@ -106,10 +111,12 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
     <>
       <Theme />
       <HeadSeo
-        title={nameOrUsername}
-        description={(user.bio as string) || ""}
-        name={nameOrUsername}
-        username={(user.username as string) || ""}
+        title={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
+        description={
+          isDynamicGroup ? `Book events with ${dynamicUsernames.join(", ")}` : (user.bio as string) || ""
+        }
+        name={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
+        username={isDynamicGroup ? dynamicUsernames.join(", ") : (user.username as string) || ""}
         // avatar={user.avatar || undefined}
       />
       <div className="h-screen dark:bg-neutral-900">

packages/lib/defaultEvents.ts

@@ -141,6 +141,8 @@ export const getUsernameSlugLink = ({ users, slug }: UsernameSlugLinkProps): str
 export const getUsernameList = (users: string): string[] => {
   return users
     .toLowerCase()
+    .replace(" ", "+")
+    .replace("%20", "+")
     .split("+")
     .filter((el) => {
       return el.length != 0;