chore: improve apple calendar message (#14139)

* chore: add better error message for apple calendar

* chore

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

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

@@ -1123,6 +1123,7 @@
   "connect_apple_server": "Connect to Apple Server",
   "calendar_url": "Calendar URL",
   "apple_server_generate_password": "Generate an app specific password to use with {{appName}} at",
+  "unable_to_add_apple_calendar":"Unable to add this Apple Calendar account. Please ensure you're using an app-specific password rather than your account password.",
   "credentials_stored_encrypted": "Your credentials will be stored and encrypted.",
   "it_stored_encrypted": "It will be stored and encrypted.",
   "go_to_app_store": "Go to App Store",
@@ -2321,4 +2322,4 @@
   "lock_org_users_eventtypes":"Lock individual event type creation",
   "lock_org_users_eventtypes_description":"Prevent members from creating their own event types.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
-}
+}

packages/app-store/applecalendar/api/add.ts

@@ -44,8 +44,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         data,
       });
     } catch (reason) {
-      logger.error("Could not add this caldav account", reason);
-      return res.status(500).json({ message: "Could not add this caldav account" });
+      logger.error("Could not add this apple calendar account", reason);
+      return res.status(500).json({ message: "unable_to_add_apple_calendar" });
     }
 
     return res

packages/app-store/applecalendar/pages/setup/index.tsx

@@ -51,19 +51,23 @@ export default function AppleCalendarSetup() {
               <Form
                 form={form}
                 handleSubmit={async (values) => {
-                  setErrorMessage("");
-                  const res = await fetch("/api/integrations/applecalendar/add", {
-                    method: "POST",
-                    body: JSON.stringify(values),
-                    headers: {
-                      "Content-Type": "application/json",
-                    },
-                  });
-                  const json = await res.json();
-                  if (!res.ok) {
-                    setErrorMessage(json?.message || t("something_went_wrong"));
-                  } else {
-                    router.push(json.url);
+                  try {
+                    setErrorMessage("");
+                    const res = await fetch("/api/integrations/applecalendar/add", {
+                      method: "POST",
+                      body: JSON.stringify(values),
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                    });
+                    const json = await res.json();
+                    if (!res.ok) {
+                      setErrorMessage(t(json?.message) || t("something_went_wrong"));
+                    } else {
+                      router.push(json.url);
+                    }
+                  } catch (err) {
+                    setErrorMessage(t("unable_to_add_apple_calendar"));
                   }
                 }}>
                 <fieldset