ENGAGE-96 selectable timezone for event widget

Author: tom0827

met-api/migrations/versions/c5ee420f661a_add_timezone_to_event.py

@@ -0,0 +1,28 @@
+"""add timezone to event
+
+Revision ID: c5ee420f661a
+Revises: a72e849d93ad
+Create Date: 2025-10-14 12:01:15.322303
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = 'c5ee420f661a'
+down_revision = 'a72e849d93ad'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('event_item', sa.Column('timezone', sa.String(length=50), nullable=True))
+    op.execute("UPDATE event_item SET timezone = 'Canada/Pacific'")
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('event_item', 'timezone')
+    # ### end Alembic commands ###

met-api/src/met_api/models/event_item.py

@@ -24,6 +24,7 @@ class EventItem(BaseModel):  # pylint: disable=too-few-public-methods, too-many-
     url_label = db.Column(db.String(100), comment='Label to show for href links')
     sort_index = db.Column(db.Integer, nullable=True, default=1)
     widget_events_id = db.Column(db.Integer, ForeignKey('widget_events.id', ondelete='CASCADE'), nullable=True)
+    timezone = db.Column(db.String(50))
 
     @classmethod
     def save_event_items(cls, event_items: list) -> None:

met-api/src/met_api/schemas/event_item.py

@@ -11,16 +11,39 @@
 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
-"""Manager for widget link schema and export."""
+"""Manager for Event Item Schemas."""
 
+from marshmallow import fields
+import pytz
 from met_api.models import EventItem as EventItemModel
-
 from .base_schema import BaseSchema
 
 
+class LocalizedDateTime(fields.DateTime):
+    """Custom Marshmallow field to output datetime in the instance's timezone."""
+
+    def __init__(self, tz_field_name, *args, **kwargs):
+        """Initialize the field with the name of the timezone field."""
+        super().__init__(*args, **kwargs)
+        self.tz_field_name = tz_field_name
+
+    def _serialize(self, value, attr, obj, **kwargs):
+        if value is None:
+            return None
+        tz_name = getattr(obj, self.tz_field_name, None)
+        if tz_name:
+            tz = pytz.timezone(tz_name)
+            value = value.astimezone(tz)
+        return super()._serialize(value, attr, obj, **kwargs)
+
+
 class EventItemSchema(BaseSchema):  # pylint: disable=too-many-ancestors, too-few-public-methods
     """This is the schema for the Contact link model."""
 
+    start_date = LocalizedDateTime(tz_field_name='timezone', timezone=True)
+    end_date = LocalizedDateTime(tz_field_name='timezone', timezone=True)
+    timezone = fields.String()
+
     class Meta(BaseSchema.Meta):  # pylint: disable=too-few-public-methods
         """Maps all of the Widget Events fields to a default schema."""
 

met-api/src/met_api/services/widget_events_service.py

@@ -5,6 +5,7 @@
 from met_api.exceptions.business_exception import BusinessException
 from met_api.models.event_item import EventItem as EventItemsModel
 from met_api.models.widget_events import WidgetEvents as WidgetEventsModel
+from met_api.utils.datetime import to_utc
 
 
 class WidgetEventsService:
@@ -45,13 +46,13 @@ def _create_event_model(widget_id, event_details: dict):
         event.widget_id = widget_id
         event.title = event_details.get('title')
         event.type = event_details.get('type')
-        sort_index = WidgetEventsService._find_higest_sort_index(widget_id)
+        sort_index = WidgetEventsService._find_highest_sort_index(widget_id)
         event.sort_index = sort_index + 1
         event.flush()
         return event
 
     @staticmethod
-    def _find_higest_sort_index(widget_id):
+    def _find_highest_sort_index(widget_id):
         # find the highest sort order of the widget event
         sort_index = 0
         widget_events = WidgetEventsModel.get_all_by_widget_id(widget_id)
@@ -74,10 +75,11 @@ def _create_event_item(event, widget_events_id):
         event_item.description = event.get('description')
         event_item.location_name = event.get('location_name')
         event_item.location_address = event.get('location_address')
-        event_item.start_date = event.get('start_date')
-        event_item.end_date = event.get('end_date')
+        event_item.start_date = to_utc(event.get('start_date'), event.get('timezone'))
+        event_item.end_date = to_utc(event.get('end_date'), event.get('timezone'))
         event_item.url = event.get('url')
         event_item.url_label = event.get('url_label')
+        event_item.timezone = event.get('timezone')
         event_item.widget_events_id = widget_events_id
         return event_item
 
@@ -94,7 +96,12 @@ def update_event_item(widget_id, event_id, item_id, request_json):
             raise BusinessException(
                 error='Invalid widgets and event',
                 status_code=HTTPStatus.BAD_REQUEST)
-
+        # If timezone is being updated use new one otherwise use existing one.
+        timezone = request_json.get('timezone', event_item.timezone)
+        if 'start_date' in request_json:
+            request_json['start_date'] = to_utc(request_json.get('start_date'), timezone)
+        if 'end_date' in request_json:
+            request_json['end_date'] = to_utc(request_json.get('end_date'), timezone)
         WidgetEventsService._update_from_dict(event_item, request_json)
         event_item.commit()
 

met-api/src/met_api/utils/datetime.py

@@ -47,3 +47,16 @@ def convert_and_format_to_utc_str(date_val: datetime, dt_format='%Y-%m-%d %H:%M:
     utc_datetime_str = date_val_utc.strftime(dt_format)
 
     return utc_datetime_str
+
+
+def to_utc(dt_str, tz_str):
+    """Convert a naive datetime string in a given timezone to a UTC datetime string."""
+    # Parse naive datetime
+    dt = datetime.fromisoformat(dt_str)
+    # Convert timezone string to tzinfo object
+    tz = pytz.timezone(tz_str)
+    # Localize (attach tzinfo)
+    dt_local = tz.localize(dt)
+    # Convert to UTC
+    dt_utc = dt_local.astimezone(pytz.utc)
+    return dt_utc.isoformat()

met-api/tests/unit/api/test_widget_event.py

@@ -22,7 +22,7 @@
 
 from met_api.utils.enums import ContentType
 from met_api.constants.event_types import EventTypes
-from tests.utilities.factory_scenarios import TestEventnfo, TestJwtClaims, TestWidgetInfo
+from tests.utilities.factory_scenarios import TestEventInfo, TestJwtClaims, TestWidgetInfo
 from tests.utilities.factory_utils import factory_auth_header, factory_engagement_model, factory_widget_model
 
 
@@ -34,7 +34,7 @@ def test_create_events(client, jwt, session):  # pylint:disable=unused-argument
     engagement = factory_engagement_model()
     TestWidgetInfo.widget1['engagement_id'] = engagement.id
     widget = factory_widget_model(TestWidgetInfo.widget1)
-    event_info = TestEventnfo.event_meetup
+    event_info = TestEventInfo.event_meetup
     headers = factory_auth_header(jwt=jwt, claims=TestJwtClaims.no_role)
 
     data = {
@@ -61,7 +61,7 @@ def test_widget_events_sort(client, jwt, session):  # pylint:disable=unused-argu
     event_widget_info_1 = TestWidgetInfo.widget1
     event_widget_info_1['engagement_id'] = engagement.id
     widget = factory_widget_model(TestWidgetInfo.widget1)
-    event_info = TestEventnfo.event_openhouse
+    event_info = TestEventInfo.event_openhouse
     headers = factory_auth_header(jwt=jwt, claims=TestJwtClaims.no_role)
     data = {
         **event_info,
@@ -75,7 +75,7 @@ def test_widget_events_sort(client, jwt, session):  # pylint:disable=unused-argu
     )
     assert rv.status_code == 200
 
-    event_info = TestEventnfo.event_virtual
+    event_info = TestEventInfo.event_virtual
     headers = factory_auth_header(jwt=jwt, claims=TestJwtClaims.no_role)
     data = {
         **event_info,

met-api/tests/utilities/factory_scenarios.py

@@ -20,6 +20,7 @@
 from enum import Enum
 
 from faker import Faker
+import pytz
 
 from met_api.config import get_named_config
 from met_api.constants.comment_status import Status as CommentStatus
@@ -519,7 +520,7 @@ class TestCommentInfo(dict, Enum):
     }
 
 
-class TestEventnfo(dict, Enum):
+class TestEventInfo(dict, Enum):
     """Test scenarios of event."""
 
     event_meetup = {
@@ -535,6 +536,7 @@ class TestEventnfo(dict, Enum):
                 'end_date': (datetime.now() + timedelta(weeks=+1)).strftime('%Y-%m-%d'),
                 'url': fake.url(),
                 'url_label': fake.name(),
+                'timezone': pytz.timezone('Canada/Pacific').zone
             }
         ]
     }
@@ -552,6 +554,7 @@ class TestEventnfo(dict, Enum):
                 'end_date': (datetime.now() + timedelta(weeks=+1)).strftime('%Y-%m-%d'),
                 'url': fake.url(),
                 'url_label': fake.name(),
+                'timezone': pytz.timezone('Canada/Pacific').zone
             }
         ]
     }
@@ -569,6 +572,7 @@ class TestEventnfo(dict, Enum):
                 'end_date': (datetime.now() + timedelta(weeks=+1)).strftime('%Y-%m-%d'),
                 'url': fake.url(),
                 'url_label': fake.name(),
+                'timezone': pytz.timezone('Canada/Pacific').zone
             }
         ]
     }

met-web/src/components/engagement/form/EngagementWidgets/Events/EventInfoPaper.tsx

@@ -8,6 +8,7 @@ import { When } from 'react-if';
 import { Event } from 'models/event';
 import { formatDate } from 'components/common/dateHelper';
 import { EventsContext } from './EventsContext';
+import { TIMEZONE_OPTIONS } from 'constants/timezones';
 
 export interface EventInfoPaperProps {
     event: Event;
@@ -79,10 +80,18 @@ const EventInfoPaper = ({ event, removeEvent, ...rest }: EventInfoPaperProps) =>
                     </Grid>
                     <Grid item xs={9}>
                         <MetParagraph overflow="hidden" textOverflow={'ellipsis'} whiteSpace="nowrap">
-                            {`${formatDate(eventItem.start_date, 'h:mm a')} to ${formatDate(
-                                eventItem.end_date,
-                                'h:mm a',
-                            )} PT`}
+                            {`${new Date(eventItem.start_date).toLocaleTimeString('en-US', {
+                                hour: 'numeric',
+                                minute: '2-digit',
+                                hour12: true,
+                            })} to ${new Date(eventItem.end_date).toLocaleTimeString('en-US', {
+                                hour: 'numeric',
+                                minute: '2-digit',
+                                hour12: true,
+                            })} ${
+                                TIMEZONE_OPTIONS.find((tz: { value: string }) => tz.value === eventItem.timezone)
+                                    ?.label || ''
+                            }`}
                         </MetParagraph>
                     </Grid>
                 </Grid>

met-web/src/components/engagement/form/EngagementWidgets/Events/InPersonEventFormDrawer.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import Divider from '@mui/material/Divider';
-import { Grid } from '@mui/material';
+import { Grid, MenuItem } from '@mui/material';
 import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common';
 import { useForm, FormProvider, SubmitHandler } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -13,13 +13,11 @@ import ControlledTextField from 'components/common/ControlledInputComponents/Con
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { postEvent, patchEvent, PatchEventProps } from 'services/widgetService/EventService';
 import { Event, EVENT_TYPE } from 'models/event';
-import { formatToUTC, formatDate } from 'components/common/dateHelper';
+import { formatDate } from 'components/common/dateHelper';
 import { formEventDates } from './utils';
-import dayjs from 'dayjs';
-import tz from 'dayjs/plugin/timezone';
 import { updatedDiff } from 'deep-object-diff';
-
-dayjs.extend(tz);
+import ControlledSelect from 'components/common/ControlledInputComponents/ControlledSelect';
+import { TIMEZONE_OPTIONS, TIMEZONES } from 'constants/timezones';
 
 const schema = yup
     .object({
@@ -35,6 +33,7 @@ const schema = yup
         date: yup.string().defined().required('Date cannot be empty'),
         time_from: yup.string().required('Time from cannot be empty'),
         time_to: yup.string().required('Time to cannot be empty'),
+        timezone: yup.string().oneOf(Object.values(TIMEZONES)).defined().default(TIMEZONES.CANADA_PACIFIC),
     })
     .required();
 
@@ -53,8 +52,8 @@ const InPersonEventFormDrawer = () => {
     } = useContext(EventsContext);
     const [isCreating, setIsCreating] = useState(false);
     const eventItemToEdit = eventToEdit ? eventToEdit.event_items[0] : null;
-    const startDate = dayjs(eventItemToEdit ? eventItemToEdit?.start_date : '').tz('US/Pacific');
-    const endDate = dayjs(eventItemToEdit ? eventItemToEdit?.end_date : '').tz('US/Pacific');
+    const startDate = eventItemToEdit ? new Date(eventItemToEdit.start_date) : null;
+    const endDate = eventItemToEdit ? new Date(eventItemToEdit.end_date) : null;
     const methods = useForm<InPersonEventForm>({
         resolver: yupResolver(schema),
     });
@@ -70,8 +69,12 @@ const InPersonEventFormDrawer = () => {
         methods.setValue('location_name', eventItemToEdit?.location_name || '');
         methods.setValue('location_address', eventItemToEdit?.location_address || '');
         methods.setValue('date', eventItemToEdit ? formatDate(eventItemToEdit.start_date) : '');
-        methods.setValue('time_from', pad(startDate.hour()) + ':' + pad(startDate.minute()) || '');
-        methods.setValue('time_to', pad(endDate.hour()) + ':' + pad(endDate.minute()) || '');
+        methods.setValue(
+            'time_from',
+            startDate ? pad(startDate.getHours()) + ':' + pad(startDate.getMinutes()) || '' : '',
+        );
+        methods.setValue('time_to', endDate ? pad(endDate.getHours()) + ':' + pad(endDate.getMinutes()) || '' : '');
+        methods.setValue('timezone', eventItemToEdit?.timezone || TIMEZONES.CANADA_PACIFIC);
     }, [eventToEdit]);
 
     const { handleSubmit, reset } = methods;
@@ -86,8 +89,8 @@ const InPersonEventFormDrawer = () => {
             }) as PatchEventProps;
 
             await patchEvent(widget.id, eventToEdit.id, eventItemToEdit.id, {
-                start_date: formatToUTC(dateFrom),
-                end_date: formatToUTC(dateTo),
+                start_date: dateFrom,
+                end_date: dateTo,
                 ...eventUpdatesToPatch,
             });
 
@@ -98,7 +101,7 @@ const InPersonEventFormDrawer = () => {
 
     const createEvent = async (data: InPersonEventForm) => {
         const validatedData = await schema.validate(data);
-        const { description, location_address, location_name, date, time_from, time_to } = validatedData;
+        const { description, location_address, location_name, date, time_from, time_to, timezone } = validatedData;
         const { dateFrom, dateTo } = formEventDates(date, time_from, time_to);
         if (widget) {
             const createdWidgetEvent = await postEvent(widget.id, {
@@ -109,8 +112,9 @@ const InPersonEventFormDrawer = () => {
                         description: description,
                         location_name: location_name,
                         location_address: location_address,
-                        start_date: formatToUTC(dateFrom),
-                        end_date: formatToUTC(dateTo),
+                        timezone: timezone,
+                        start_date: dateFrom,
+                        end_date: dateTo,
                     },
                 ],
             });
@@ -250,6 +254,26 @@ const InPersonEventFormDrawer = () => {
                                     size="small"
                                 />
                             </Grid>
+                            <Grid item>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Timezone</MetLabel>
+                                <ControlledSelect
+                                    name="timezone"
+                                    variant="outlined"
+                                    label=" "
+                                    InputLabelProps={{
+                                        shrink: false,
+                                    }}
+                                    fullWidth
+                                    size="small"
+                                    defaultValue={TIMEZONES.CANADA_PACIFIC}
+                                >
+                                    {TIMEZONE_OPTIONS.map((option) => (
+                                        <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                        </MenuItem>
+                                    ))}
+                                </ControlledSelect>
+                            </Grid>
                             <Grid
                                 item
                                 xs={12}