Merge branch 'main' into stripe_metadat_restriction

Author: anikdhabal

apps/web/app/_utils.tsx

@@ -80,6 +80,48 @@ export const _generateMetadata = async (
   };
 };
 
+export const _generateMetadataForStaticPage = (
+  title: string,
+  description: string,
+  hideBranding?: boolean,
+  origin?: string,
+  pathname?: string
+) => {
+  const _pathname = pathname ?? "";
+  const canonical = buildCanonical({ path: _pathname, origin: origin ?? CAL_URL });
+  const titleSuffix = `| ${APP_NAME}`;
+  const displayedTitle = title.includes(titleSuffix) || hideBranding ? title : `${title} ${titleSuffix}`;
+  const metadataBase = new URL(IS_CALCOM ? getCalcomUrl() : WEBAPP_URL);
+
+  const metadata = {
+    title: title.length === 0 ? APP_NAME : displayedTitle,
+    description,
+    alternates: { canonical },
+    openGraph: {
+      description: truncateOnWord(description, 158),
+      url: canonical,
+      type: "website",
+      siteName: APP_NAME,
+      title: displayedTitle,
+    },
+    metadataBase,
+  };
+  const image =
+    SEO_IMG_OGIMG +
+    constructGenericImage({
+      title: metadata.title,
+      description: metadata.description,
+    });
+
+  return {
+    ...metadata,
+    openGraph: {
+      ...metadata.openGraph,
+      images: [image],
+    },
+  };
+};
+
 export const generateMeetingMetadata = async (
   meeting: MeetingImageProps,
   getTitle: (t: TFunction<string, undefined>) => string,

apps/web/app/icons/page.tsx

@@ -1,4 +1,5 @@
-import { _generateMetadata, getTranslate } from "app/_utils";
+import { _generateMetadataForStaticPage } from "app/_utils";
+import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 
@@ -8,6 +9,15 @@ import type { IconName } from "@calcom/ui/components/icon";
 import { lucideIconList } from "../../../../packages/ui/components/icon/icon-list.mjs";
 import { IconGrid } from "./IconGrid";
 
+export const dynamic = "force-static";
+export const metadata: Metadata = _generateMetadataForStaticPage(
+  "Icons Showcase",
+  "",
+  undefined,
+  undefined,
+  "/icons"
+);
+
 const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../../fonts/CalSans-SemiBold.woff2",
@@ -16,25 +26,16 @@ const calFont = localFont({
   display: "swap",
   weight: "600",
 });
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    (t) => t("icon_showcase"),
-    () => "",
-    undefined,
-    undefined,
-    "/icons"
-  );
-};
-export default async function IconsPage() {
+
+export default function IconsPage() {
   const icons = Array.from(lucideIconList).sort() as IconName[];
-  const t = await getTranslate();
 
   return (
     <div className={`${interFont.variable} ${calFont.variable}`}>
       <div className="bg-subtle flex h-screen">
         <IconSprites />
         <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
-          <h1 className="text-emphasis font-cal text-2xl font-medium">{t("icons_showcase")}</h1>
+          <h1 className="text-emphasis font-cal text-2xl font-medium">Icons Showcase</h1>
           <IconGrid title="Regular Icons" icons={icons} />
           <IconGrid
             title="Filled Icons"

packages/features/form-builder/FormBuilder.tsx

@@ -42,10 +42,30 @@ type RhfFormFields = RhfForm["fields"];
 
 type RhfFormField = RhfFormFields[number];
 
+type DataStore = {
+  options: Record<
+    string,
+    {
+      source: { label: string };
+      value: { label: string; value: string; inputPlaceholder?: string }[];
+    }
+  >;
+};
+
 function getCurrentFieldType(fieldForm: UseFormReturn<RhfFormField>) {
   return fieldTypesConfigMap[fieldForm.watch("type") || "text"];
 }
 
+const getLocationFieldType = (field: RhfFormField) => {
+  const baseFieldType = fieldTypesConfigMap[field.type];
+
+  if (field.name === "location") {
+    return { ...baseFieldType, label: "Location" };
+  }
+
+  return baseFieldType;
+};
+
 /**
  * It works with a react-hook-form only.
  * `formProp` specifies the name of the property in the react-hook-form that has the fields. This is where fields would be updated.
@@ -71,15 +91,7 @@ export const FormBuilder = function FormBuilder({
   /**
    * A readonly dataStore that is used to lookup the options for the fields. It works in conjunction with the field.getOptionAt property which acts as the key in options
    */
-  dataStore: {
-    options: Record<
-      string,
-      {
-        source: { label: string };
-        value: { label: string; value: string; inputPlaceholder?: string }[];
-      }
-    >;
-  };
+  dataStore: DataStore;
   /**
    * This is kind of a hack to allow certain fields to be just shown as required when they might not be required in a strict sense
    * e.g. Location field has a default value at backend so API can send no location but formBuilder in UI doesn't allow it.
@@ -226,7 +238,7 @@ export const FormBuilder = function FormBuilder({
               return null;
             }
 
-            const fieldType = fieldTypesConfigMap[field.type];
+            const fieldType = getLocationFieldType(field);
             const isFieldEditableSystemButOptional = field.editable === "system-but-optional";
             const isFieldEditableSystemButHidden = field.editable === "system-but-hidden";
             const isFieldEditableSystem = field.editable === "system";
@@ -565,7 +577,7 @@ function FieldEditDialog({
                 }
                 fieldForm.setValue("type", value, { shouldDirty: true });
               }}
-              value={fieldTypesConfigMap[formFieldType]}
+              value={dialog.data ? getLocationFieldType(dialog.data) : fieldTypesConfigMap[formFieldType]}
               options={fieldTypes.filter((f) => !f.systemOnly)}
               label={t("input_type")}
             />