fix: missing empty state in /apps/installed/web3 (#6377)

* refactor: turn enum into const assertion

* feat: add web3 to icon list

* fix: type

* fix: type cast query params and add category list

* fix: conditional rendering

* feat: add i18n keys

* fix: type errors

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -44,13 +44,15 @@ export default function InstalledAppsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const variant: typeof InstalledAppVariants[number] = "payment";
+
   const query = trpc.viewer.integrations.useQuery({
-    variant: InstalledAppVariants.payment,
+    variant,
     onlyInstalled: true,
   });
   let actualTabs = tabs;
   if (query.data?.items.length === 0) {
-    actualTabs = tabs.filter((tab) => tab.name !== InstalledAppVariants.payment);
+    actualTabs = tabs.filter((tab) => tab.name !== variant);
   }
 
   return (

apps/web/pages/apps/installed/[category].tsx

@@ -92,8 +92,8 @@ function ConnectOrDisconnectIntegrationButton(props: {
 }
 
 interface IntegrationsContainerProps {
-  variant?: keyof typeof InstalledAppVariants;
-  exclude?: (keyof typeof InstalledAppVariants)[];
+  variant?: typeof InstalledAppVariants[number];
+  exclude?: typeof InstalledAppVariants[number][];
 }
 
 interface IntegrationsListProps {
@@ -143,8 +143,10 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
     automation: Icon.FiShare2,
     analytics: Icon.FiBarChart,
     payment: Icon.FiCreditCard,
+    web3: Icon.FiBarChart,
     other: Icon.FiGrid,
   };
+
   return (
     <QueryCell
       query={query}
@@ -198,31 +200,29 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
 };
 
 const querySchema = z.object({
-  category: z.nativeEnum(InstalledAppVariants),
+  category: z.enum(InstalledAppVariants),
 });
 
+type querySchemaType = z.infer<typeof querySchema>;
+
 export default function InstalledApps() {
   const { t } = useLocale();
   const router = useRouter();
-  const category = router.query.category;
+  const category = router.query.category as querySchemaType["category"];
+  const categoryList: querySchemaType["category"][] = [
+    "payment",
+    "conferencing",
+    "automation",
+    "analytics",
+    "web3",
+  ];
+
   return (
     <InstalledAppsLayout heading={t("installed_apps")} subtitle={t("manage_your_connected_apps")}>
-      {(category === InstalledAppVariants.payment || category === InstalledAppVariants.conferencing) && (
-        <IntegrationsContainer variant={category} />
-      )}
-      {(category === InstalledAppVariants.automation || category === InstalledAppVariants.analytics) && (
-        <IntegrationsContainer variant={category} />
-      )}
-      {category === InstalledAppVariants.calendar && <CalendarListContainer />}
-      {category === InstalledAppVariants.other && (
-        <IntegrationsContainer
-          exclude={[
-            InstalledAppVariants.conferencing,
-            InstalledAppVariants.calendar,
-            InstalledAppVariants.analytics,
-            InstalledAppVariants.automation,
-          ]}
-        />
+      {categoryList.includes(category) && <IntegrationsContainer variant={category} />}
+      {category === "calendar" && <CalendarListContainer />}
+      {category === "other" && (
+        <IntegrationsContainer variant={category} exclude={[...categoryList, "calendar"]} />
       )}
     </InstalledAppsLayout>
   );

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

@@ -799,12 +799,14 @@
   "no_category_apps_description_analytics": "Add an analytics app for your booking pages",
   "no_category_apps_description_automation": "Add an automation app to use",
   "no_category_apps_description_other": "Add any other type of app to do all sorts of things",
+  "no_category_apps_description_web3": "Add a web3 app for your booking pages",
   "installed_app_calendar_description": "Set the calendars to check for conflicts to prevent double bookings.",
   "installed_app_conferencing_description": "Add your favourite video conferencing apps for your meetings",
   "installed_app_payment_description": "Configure which payment processing services to use when charging your clients.",
   "installed_app_analytics_description": "Configure which analytics apps to use for your booking pages",
   "installed_app_other_description": "All your installed apps from other categories.",
   "installed_app_automation_description": "Configure which automation apps to use",
+  "installed_app_web3_description": "Configure which web3 apps to use for your booking pages",
   "analytics": "Analytics",
   "empty_installed_apps_headline": "No apps installed",
   "empty_installed_apps_description": "Apps enable you to enhance your workflow and improve your scheduling life significantly.",
@@ -1217,6 +1219,7 @@
   "connect_automation_apps": "Connect automation apps",
   "connect_analytics_apps": "Connect analytics apps",
   "connect_other_apps": "Connect other apps",
+  "connect_web3_apps": "Connect web3 apps",
   "current_step_of_total": "Step {{currentStep}} of {{maxSteps}}",
   "add_variable": "Add variable",
   "custom_phone_number": "Custom phone number",

packages/app-store/_utils/getInstalledAppPath.ts

@@ -2,7 +2,7 @@ import z from "zod";
 
 import { InstalledAppVariants } from "../utils";
 
-const variantSchema = z.nativeEnum(InstalledAppVariants);
+const variantSchema = z.enum(InstalledAppVariants);
 
 export default function getInstalledAppPath(
   { variant, slug }: { variant?: string; slug?: string },

packages/app-store/utils.ts

@@ -31,14 +31,15 @@ const credentialData = Prisma.validator<Prisma.CredentialArgs>()({
 
 export type CredentialData = Prisma.CredentialGetPayload<typeof credentialData>;
 
-export enum InstalledAppVariants {
-  "conferencing" = "conferencing",
-  "calendar" = "calendar",
-  "payment" = "payment",
-  "analytics" = "analytics",
-  "automation" = "automation",
-  "other" = "other",
-}
+export const InstalledAppVariants = [
+  "conferencing",
+  "calendar",
+  "payment",
+  "analytics",
+  "automation",
+  "other",
+  "web3",
+] as const;
 
 export const ALL_APPS = Object.values(ALL_APPS_MAP);