feat(): autofocus on week with availability (#68)

* feat(): autofocus on week with availability * chore(): comments
awell-health · Nov 14, 2024 · 2fc2231 · 2fc2231
1 parent 6710de7
commit 2fc2231
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 2 deletions.
diff --git a/src/atoms/Calendar/week/WeekCalendar.spec.ts b/src/atoms/Calendar/week/WeekCalendar.spec.ts
@@ -1,11 +1,22 @@
 import { within, userEvent, expect } from '@storybook/test';
 
+/**
+ * For all tests below, the current date is mocked to be 2024-10-14
+ */
+
 export const NoAvailabilitiesSpec = async ({
   canvasElement
 }: {
   canvasElement: HTMLElement;
 }) => {
   const canvas = within(canvasElement);
+
+  // Current week should be visible
+  expect(
+    await canvas.findByTestId('Mon Oct 14 2024'),
+    'Oct 14 2024 should be visible'
+  ).toBeVisible();
+
   const virtualButton = await canvas.findByRole('button', {
     name: 'Telehealth'
   });
@@ -55,3 +66,31 @@ export const NoAvailabilitiesSpec = async ({
     'nextWeekButton should be disabled after 5 weeks in advance'
   ).toBeDisabled();
 };
+
+export const CurrentWeekAvailabilitySpec = async ({
+  canvasElement
+}: {
+  canvasElement: HTMLElement;
+}) => {
+  const canvas = within(canvasElement);
+
+  // Current week should be visible
+  expect(
+    await canvas.findByTestId('Mon Oct 14 2024'),
+    'Oct 14 2024 should be visible'
+  ).toBeVisible();
+};
+
+export const NextWeekAvailabilitySpec = async ({
+  canvasElement
+}: {
+  canvasElement: HTMLElement;
+}) => {
+  const canvas = within(canvasElement);
+
+  // Next week should be visible
+  expect(
+    await canvas.findByTestId('Mon Oct 21 2024'),
+    'Oct 21 2024 should be visible'
+  ).toBeVisible();
+};
diff --git a/src/atoms/Calendar/week/WeekCalendar.stories.tsx b/src/atoms/Calendar/week/WeekCalendar.stories.tsx
@@ -3,7 +3,12 @@ import { WeekCalendar as WeekCalendarComponent } from './WeekCalendar';
 import { ThemeProvider } from '@awell-health/ui-library';
 import { fn } from '@storybook/test';
 import { mockProviderAvailabilityResponse } from '@/lib/api/__mocks__';
-import { NoAvailabilitiesSpec } from './WeekCalendar.spec';
+import {
+  NoAvailabilitiesSpec,
+  NextWeekAvailabilitySpec,
+  CurrentWeekAvailabilitySpec
+} from './WeekCalendar.spec';
+import { EventDeliveryMethod } from '@/lib/api';
 
 const meta: Meta<typeof WeekCalendarComponent> = {
   title: 'Atoms/Calendar/Week',
@@ -65,3 +70,65 @@ export const TestNoAvailabilities: Story = {
     return <WeekCalendarComponent {...noAvailArgs} />;
   }
 };
+
+export const TestCurrentWeekAvailability: Story = {
+  play: CurrentWeekAvailabilitySpec,
+  render: (args) => {
+    // Current date is mocked to be 2024-10-14 (Monday)
+    const scrollToAvailabilitiesArgs = {
+      ...args,
+      availabilities: [
+        {
+          eventId: 't68403en62hji9lad095mv2srk',
+          slotstart: new Date('2024-10-15T21:00:00Z'), // Tuesday, same week
+          providerId: '1717',
+          duration: 60,
+          facility: 'NY - Brooklyn Heights',
+          location: EventDeliveryMethod.Telehealth
+        },
+        {
+          eventId: 't68403en62hji9lad095mv2srk',
+          slotstart: new Date('2024-10-22T21:00:00Z'), // Tuesday, next week
+          providerId: '1717',
+          duration: 60,
+          facility: 'NY - Brooklyn Heights',
+          location: EventDeliveryMethod.Telehealth
+        }
+      ],
+      weekStartsOn: 'monday' as const,
+      hideWeekends: true
+    };
+    return <WeekCalendarComponent {...scrollToAvailabilitiesArgs} />;
+  }
+};
+
+export const TestNextWeekAvailability: Story = {
+  play: NextWeekAvailabilitySpec,
+  render: (args) => {
+    // Current date is mocked to be 2024-10-14 (Monday)
+    const scrollToAvailabilitiesArgs = {
+      ...args,
+      availabilities: [
+        {
+          eventId: 't68403en62hji9lad095mv2srk',
+          slotstart: new Date('2024-10-21T21:00:00Z'), // Monday one week later
+          providerId: '1717',
+          duration: 60,
+          facility: 'NY - Brooklyn Heights',
+          location: EventDeliveryMethod.Telehealth
+        },
+        {
+          eventId: 't68403en62hji9lad095mv2srk',
+          slotstart: new Date('2024-10-28T21:00:00Z'), // Monday two weeks later
+          providerId: '1717',
+          duration: 60,
+          facility: 'NY - Brooklyn Heights',
+          location: EventDeliveryMethod.Telehealth
+        }
+      ],
+      weekStartsOn: 'monday' as const,
+      hideWeekends: true
+    };
+    return <WeekCalendarComponent {...scrollToAvailabilitiesArgs} />;
+  }
+};
diff --git a/src/atoms/Calendar/week/WeekCalendar.tsx b/src/atoms/Calendar/week/WeekCalendar.tsx
@@ -65,6 +65,23 @@ export const WeekCalendar: FC<WeekCalendarProps> = ({
     handleSelectLocation(preferredLocation);
   }, [availabilities]);
 
+  useEffect(() => {
+    if (availabilities.length > 0) {
+      const firstAvailableSlot = availabilities.reduce((earliest, slot) =>
+        earliest && earliest.slotstart < slot.slotstart ? earliest : slot
+      );
+
+      const firstAvailableWeekStart = startOfWeek(
+        firstAvailableSlot.slotstart,
+        {
+          weekStartsOn: weekStartsOn === 'sunday' ? 0 : 1
+        }
+      );
+
+      setCurrentWeek(firstAvailableWeekStart);
+    }
+  }, [availabilities, weekStartsOn]);
+
   const handlePreviousWeek = useCallback(() => {
     setCurrentWeek((prevWeek) => subWeeks(prevWeek, 1));
   }, []);

diff --git a/src/molecules/Scheduler/Scheduler.stories.tsx b/src/molecules/Scheduler/Scheduler.stories.tsx
@@ -18,7 +18,12 @@ const meta: Meta<typeof SchedulerComponent> = {
   title: 'Molecules/Scheduler',
   component: SchedulerComponent,
   parameters: {
-    mockingDate: new Date('2024-10-14T18:00:00.000Z'),
+    /**
+     * We are mocking the current date to be 2024-10-07.
+     * First available appointment is on 2024-10-17 but scheduler
+     * should auto focus on the week with first available date
+     */
+    mockingDate: new Date('2024-10-07T18:00:00.000Z'),
     fetchAvailability: fetchAvailabilityMock
   },
   decorators: [