➕ show timezone for attendee in confirmation email

backend/src/appointment/database/models.py

@@ -170,6 +170,7 @@ class Attendee(Base):
     id = Column(Integer, primary_key=True, index=True)
     email = Column(StringEncryptedType(String, secret, AesEngine, "pkcs5", length=255), index=True)
     name = Column(StringEncryptedType(String, secret, AesEngine, "pkcs5", length=255), index=True)
+    timezone = Column(String(255), index=True)
 
     slots = relationship("Slot", cascade="all,delete", back_populates="attendee")
 

backend/src/appointment/database/schemas.py

@@ -30,6 +30,7 @@
 class AttendeeBase(BaseModel):
     email: str
     name: str | None = None
+    timezone: str | None = None
 
 
 class Attendee(AttendeeBase):

backend/src/appointment/migrations/versions/2024_04_18_0823-89e1197d980d_add_attendee_timezone.py

@@ -0,0 +1,24 @@
+"""add attendee timezone
+
+Revision ID: 89e1197d980d
+Revises: fadd0d1ef438
+Create Date: 2024-04-18 08:23:55.660065
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '89e1197d980d'
+down_revision = 'fadd0d1ef438'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column('attendees', sa.Column('timezone', sa.String(255), index=True))
+
+
+def downgrade() -> None:
+    op.drop_column('attendees', 'timezone')

backend/src/appointment/routes/schedule.py

@@ -220,7 +220,12 @@ def request_schedule_availability_slot(
     # human readable date in subscribers timezone
     # TODO: handle locale date representation
     date = slot.start.replace(tzinfo=timezone.utc).astimezone(ZoneInfo(subscriber.timezone)).strftime("%c")
-    date = f"{date}, {slot.duration} minutes"
+    date = f"{date}, {slot.duration} minutes ({subscriber.timezone})"
+
+    # human readable date in attendee timezone
+    # TODO: handle locale date representation
+    attendee_date = slot.start.replace(tzinfo=timezone.utc).astimezone(ZoneInfo(slot.attendee.timezone)).strftime("%c")
+    attendee_date = f"{attendee_date}, {slot.duration} minutes ({slot.attendee.timezone})"
 
     # Create a pending appointment
     attendee_name = slot.attendee.name if slot.attendee.name is not None else slot.attendee.email
@@ -246,7 +251,7 @@ def request_schedule_availability_slot(
     background_tasks.add_task(send_confirmation_email, url=url, attendee=attendee, date=date, to=subscriber.email)
 
     # Sending pending email to attendee
-    background_tasks.add_task(send_pending_email, owner=subscriber, date=date, to=slot.attendee.email)
+    background_tasks.add_task(send_pending_email, owner=subscriber, date=attendee_date, to=slot.attendee.email)
 
     # Mini version of slot, so we can grab the newly created slot id for tests
     return schemas.SlotOut(

frontend/src/components/BookingModal.vue

@@ -79,9 +79,7 @@
 </template>
 
 <script setup>
-import {
-  inject, computed, reactive, ref, onMounted,
-} from 'vue';
+import { inject, computed, reactive, ref, onMounted } from 'vue';
 import { timeFormat } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -111,15 +109,14 @@ const props = defineProps({
 
 // Store
 const bookingModalStore = useBookingModalStore();
-const {
-  open, state, stateData, isLoading, hasErrors, isFinished, isEditable,
-} = storeToRefs(bookingModalStore);
+const { open, state, stateData, isLoading, hasErrors, isFinished, isEditable } = storeToRefs(bookingModalStore);
 
 // Refs
 
 const attendee = reactive({
   name: '',
   email: '',
+  timezone: dj.tz.guess(),
 });
 
 const bookingForm = ref();
@@ -145,6 +142,7 @@ onMounted(() => {
   if (user.exists()) {
     attendee.name = user.data.name;
     attendee.email = user.data.email;
+    attendee.timezone = user.data.timezone;
   }
 });
 </script>