Various event page fixes

frontend/src/components/calendar_permission_dialogs/MarkAvailabilityDialog.vue

@@ -55,6 +55,19 @@
                 <v-spacer />
               </div>
             </v-btn>
+            <v-btn block @click="autofillWithICS" class="tw-bg-white">
+              <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
+                <v-icon
+                  class="tw-flex-initial"
+                  size="20"
+                >
+                  mdi-calendar-sync
+                </v-icon>
+                <v-spacer />
+                Autofill with ICS Calendar Feed
+                <v-spacer />
+              </div>
+            </v-btn>
             <div class="tw-flex tw-items-center tw-gap-3">
               <v-divider />
               <div
@@ -91,6 +104,13 @@
           @addedAppleCalendar="$emit('addedAppleCalendar')"
         />
       </v-expand-transition>
+      <v-expand-transition>
+        <ICSCredentials
+          v-if="state === states.ICS_CREDENTIALS"
+          @back="state = states.CHOICES"
+          @addedCalendar="$emit('addedICSCalendar')"
+        />
+      </v-expand-transition>
     </v-card>
   </v-dialog>
 </template>
@@ -101,6 +121,7 @@ import { mapActions, mapState } from "vuex"
 import CalendarPermissionsCard from "./CalendarPermissionsCard"
 import CreateAccount from "./CreateAccount"
 import AppleCredentials from "./AppleCredentials"
+import ICSCredentials from "./ICSCredentials"
 
 export default {
   name: "MarkAvailabilityDialog",
@@ -114,6 +135,7 @@ export default {
     CalendarPermissionsCard,
     CreateAccount,
     AppleCredentials,
+    ICSCredentials,
   },
 
   data() {
@@ -123,6 +145,7 @@ export default {
         GCAL_PERMISSIONS: "gcal_permissions", // present to user the gcal permissions we request
         CREATE_ACCOUNT_APPLE: "create_account_apple", // present to user the create account dialog
         APPLE_CREDENTIALS: "apple_credentials", // present to user the apple credentials dialog
+        ICS_CREDENTIALS: "ics_credentials", // present to user the ICS feed URL dialog
       },
       state: this.initialState,
     }
@@ -156,6 +179,10 @@ export default {
       this.$posthog.capture("autofill_with_outlook_clicked")
       this.$emit("allowOutlookCalendar")
     },
+    autofillWithICS() {
+      this.$posthog.capture("autofill_with_ics_clicked")
+      this.state = this.states.ICS_CREDENTIALS
+    },
     showChoices() {
       this.state = this.states.CHOICES
     },

frontend/src/components/settings/CalendarAccount.vue

@@ -14,6 +14,7 @@
             hide-details
           />
           <div
+            v-if="hasSubCalendars"
             class="-tw-ml-2 tw-h-fit tw-w-fit tw-cursor-pointer"
             @click="
               () => {
@@ -70,7 +71,7 @@
     <!-- Sub-calendar accounts -->
 
     <v-expand-transition>
-      <div v-if="showSubCalendars" class="tw-space-y-2 tw-bg-[#EBF7EF] tw-py-2">
+      <div v-if="hasSubCalendars && showSubCalendars" class="tw-space-y-2 tw-bg-[#EBF7EF] tw-py-2">
         <div
           v-for="(subCalendar, id) in account.subCalendars"
           :key="id"
@@ -136,6 +137,9 @@ export default {
         this.toggleState
       )
     },
+    hasSubCalendars() {
+      return this.account.calendarType !== calendarTypes.ICS
+    },
     accountHasError() {
       const account =
         this.calendarEventsMap?.[

frontend/src/components/settings/CalendarAccounts.vue

@@ -44,33 +44,36 @@
             @openRemoveDialog="openRemoveDialog"
           ></CalendarAccount>
         </div>
-        <v-dialog
-          v-if="allowAddCalendarAccount"
-          v-model="addCalendarAccountDialog"
-          width="400"
-          content-class="tw-m-0"
-        >
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              text
-              color="primary"
-              :class="
-                toggleState ? '-tw-ml-2 tw-mt-0 tw-w-min tw-px-2' : 'tw-w-full'
-              "
-              v-bind="attrs"
-              v-on="on"
-              >+ Add calendar</v-btn
-            >
-          </template>
-          <CalendarTypeSelector
-            :visible="addCalendarAccountDialog"
-            @addGoogleCalendar="addGoogleCalendar"
-            @addOutlookCalendar="addOutlookCalendar"
-            @addedCalendar="addedCalendar"
-          />
-        </v-dialog>
       </span>
     </v-expand-transition>
+    <v-dialog
+      v-if="allowAddCalendarAccount && (showCalendars || !toggleState)"
+      v-model="addCalendarAccountDialog"
+      width="400"
+      content-class="tw-m-0"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <div>
+          <v-btn
+            text
+            color="primary"
+            :class="
+              toggleState ? '-tw-ml-2 tw-mt-0 tw-w-min tw-px-2' : 'tw-w-full'
+            "
+            v-bind="attrs"
+            v-on="on"
+            >+ Add calendar</v-btn
+          >
+          <p class="tw-text-xs tw-text-dark-gray">Only your available times are shared with respondents. Your personal event details are never shared.</p>
+        </div>
+      </template>
+      <CalendarTypeSelector
+        :visible="addCalendarAccountDialog"
+        @addGoogleCalendar="addGoogleCalendar"
+        @addOutlookCalendar="addOutlookCalendar"
+        @addedCalendar="addedCalendar"
+      />
+    </v-dialog>
     <v-dialog v-model="removeDialog" width="500" persistent>
       <v-card>
         <v-card-title>Are you sure?</v-card-title>

frontend/src/views/Event.vue

@@ -17,6 +17,7 @@
         "
         @setAvailabilityManually="setAvailabilityManually"
         @addedAppleCalendar="addedAppleCalendar"
+        @addedICSCalendar="addedICSCalendar"
       />
 
       <!-- Google sign in not supported dialog -->
@@ -999,6 +1000,12 @@ export default {
       this.scheduleOverlapComponent?.startEditing()
       this.scheduleOverlapComponent?.setAvailabilityAutomatically()
     },
+    /** Called when user adds ICS calendar account */
+    addedICSCalendar() {
+      this.choiceDialog = false
+      this.scheduleOverlapComponent?.startEditing()
+      this.scheduleOverlapComponent?.setAvailabilityAutomatically()
+    },
 
     /** Refresh calendar availabilities of everybody in the group */
     async fetchCalendarAvailabilities() {