Feat/mocks for demo

package.json

@@ -21,7 +21,7 @@
     "@amplitude/analytics-types": "^2.10.0",
     "@codexteam/ui": "0.2.0-rc.4",
     "@hawk.so/javascript": "3.2.13",
-    "@hawk.so/types": "^0.5.2",
+    "@hawk.so/types": "^0.5.9",
     "axios": "^1.12.2",
     "codex-notifier": "^1.1.2",
     "cssnano": "^7.1.1",

src/App.vue

@@ -13,13 +13,19 @@
 import * as api from './api/';
 import { setLanguage } from './i18n';
 import { defineComponent } from 'vue';
+import { useDemo } from './composables/useDemo';
 import FeedbackButton from './components/utils/FeedbackButton.vue';
 
 export default defineComponent({
   name: 'App',
   components: {
     FeedbackButton,
   },
+  setup() {
+    const { isDemoActive } = useDemo();
+
+    return { isDemoActive };
+  },
   computed: {
     /**
      * Returns classname according to the theme name
@@ -39,7 +45,7 @@ export default defineComponent({
     this.$store.watch(
       state => state.user.accessToken,
       (accessToken) => {
-        if (!accessToken) {
+        if (!accessToken && !this.isDemoActive) {
           this.$router.push('/login');
         }
         api.setAuthToken(accessToken);

src/api/billing/index.ts

@@ -1,16 +1,22 @@
 import { MUTATION_PAY_WITH_CARD, QUERY_BUSINESS_OPERATIONS, QUERY_COMPOSE_PAYMENT } from './queries';
 import * as api from '../';
+import { withDemoMock } from '@/utils/withDemoMock';
 import type { BusinessOperation } from '../../types/business-operation';
 import { BeforePaymentPayload } from '@/types/before-payment-payload';
 
 /**
  * Request business operations list for passed workspaces
  * @param ids - ids of workspaces
  */
-export async function getBusinessOperations(ids: string[]): Promise<BusinessOperation[]> {
+async function getBusinessOperationsRequest(ids: string[]): Promise<BusinessOperation[]> {
   return (await api.callOld(QUERY_BUSINESS_OPERATIONS, { ids })).businessOperations;
 }
 
+export const getBusinessOperations = withDemoMock(
+  getBusinessOperationsRequest,
+  '/src/api/billing/mocks/getBusinessOperations.mock.ts'
+);
+
 /**
  * Data for processing payment with saved card
  */

src/api/billing/mocks/getBusinessOperations.mock.ts

@@ -0,0 +1,15 @@
+import type { BusinessOperation } from '@/types/business-operation';
+import { DEMO_WORKSPACE_ID, DEMO_BUSINESS_OPERATIONS } from '@/api/mock-db';
+
+/**
+ * Mock: getBusinessOperations
+ *
+ * Returns demo business operations (payment history) for specified workspace IDs
+ */
+export default function mockGetBusinessOperations(ids: string[]): BusinessOperation[] {
+  // Return demo operations if requesting for demo workspace
+  if (ids.includes(DEMO_WORKSPACE_ID)) {
+    return DEMO_BUSINESS_OPERATIONS;
+  }
+  return [];
+}

src/api/events/index.ts

@@ -22,6 +22,7 @@ import {
 import type { User } from '@/types/user';
 import type { EventChartItem, ChartLine } from '@/types/chart';
 import type { APIResponse } from '../../types/api';
+import { withDemoMock } from '@/utils/withDemoMock';
 
 /**
  * Get specific event
@@ -30,19 +31,21 @@ import type { APIResponse } from '../../types/api';
  * @param originalEventId - id of the original event
  * @returns
  */
-export async function getEvent(projectId: string, eventId: string, originalEventId: string): Promise<HawkEvent | null> {
-  const project = await (await api.callOld(QUERY_EVENT, {
-    projectId,
-    eventId,
-    originalEventId,
-  })).project;
+export const getEvent = withDemoMock(
+  async function getEvent(projectId: string, eventId: string, originalEventId: string): Promise<HawkEvent | null> {
+    const project = await (await api.callOld(QUERY_EVENT, {
+      projectId,
+      eventId,
+      originalEventId,
+    })).project;
 
-  if (!project) {
-    return null;
-  }
-
-  return project.event;
-}
+    if (!project) {
+      return null;
+    }
+    return project.event;
+  },
+  '/src/api/events/mocks/getEvent.mock.ts'
+);
 
 /**
  * Returns portion (list) of daily events with pointer to the first daily event of the next portion
@@ -53,38 +56,40 @@ export async function getEvent(projectId: string, eventId: string, originalEvent
  * @param search - search string for daily events
  * @param release - release identifier to filter events
  */
-export async function fetchDailyEventsPortion(
-  projectId: string,
-  nextCursor: DailyEventsCursor | null = null,
+export const fetchDailyEventsPortion = withDemoMock(
+  async function fetchDailyEventsPortion(
+    projectId: string,
+    nextCursor: DailyEventsCursor | null = null,
   sort = EventsSortOrder.ByDate,
   filters: EventsFilters = {},
   search = '',
   release?: string
-): Promise<DailyEventsPortion> {
-  const response = await api.call(QUERY_PROJECT_DAILY_EVENTS, {
-    projectId,
-    cursor: nextCursor,
-    sort,
-    filters,
-    search,
-    release,
-  }, undefined, {
+  ): Promise<DailyEventsPortion> {
+    const response = await api.call(QUERY_PROJECT_DAILY_EVENTS, {
+      projectId,
+      cursor: nextCursor,
+      sort,
+      filters,
+      search,
+      release,
+    }, undefined, {
     /**
      * This request calls on the app start, so we don't want to break app if something goes wrong
      * With this flag, errors from the API won't be thrown, but returned in the response for further handling
      */
-    allowErrors: true,
-  });
+      allowErrors: true,
+    });
 
-  const project = response.data.project;
+    const project = response.data.project;
 
-  if (response.errors?.length) {
-    response.errors.forEach(e => console.error(e));
-  }
-
-  return project?.dailyEventsPortion ?? { cursor: null,
-    dailyEventsPortion: [] };
-}
+    if (response.errors?.length) {
+      response.errors.forEach(e => console.error(e));
+    }
+    return project?.dailyEventsPortion ?? { nextCursor: null,
+      dailyEvents: [] };
+  },
+  '/src/api/events/mocks/fetchDailyEventsPortion.mock.ts'
+);
 
 /**
  * Fetches event's repetitions portion from project
@@ -94,56 +99,64 @@ export async function fetchDailyEventsPortion(
  * @param cursor - the cursor to fetch the next page of repetitions
  * @returns
  */
-export async function getRepetitionsPortion(
-  projectId: string, originalEventId: string, limit: number, cursor?: string
-): Promise<APIResponse<{ project: { event: { repetitionsPortion: { repetitions: HawkEvent[];
-  nextCursor?: string; }; }; }; }>> {
-  const response = await api.call(QUERY_EVENT_REPETITIONS_PORTION, {
-    limit,
-    projectId,
-    originalEventId,
-    cursor,
-  }, undefined, {
+export const getRepetitionsPortion = withDemoMock(
+  async function getRepetitionsPortion(
+    projectId: string, originalEventId: string, limit: number, cursor?: string
+  ): Promise<APIResponse<{ project: { event: { repetitionsPortion: { repetitions: HawkEvent[];
+    nextCursor?: string; }; }; }; }>> {
+    const response = await api.call(QUERY_EVENT_REPETITIONS_PORTION, {
+      limit,
+      projectId,
+      originalEventId,
+      cursor,
+    }, undefined, {
     /**
      * This request calls on the app start, so we don't want to break app if something goes wrong
      * With this flag, errors from the API won't be thrown, but returned in the response for further handling
      */
-    allowErrors: true,
-  });
+      allowErrors: true,
+    });
 
-  if (response.errors?.length) {
-    response.errors.forEach(e => console.error(e));
-  }
-
-  return response;
-}
+    if (response.errors?.length) {
+      response.errors.forEach(e => console.error(e));
+    }
+    return response;
+  },
+  '/src/api/events/mocks/getRepetitionsPortion.mock.ts'
+);
 
 /**
  * Mark event as visited for current user
  * @param projectId - project event related to
  * @param originalEventId — original event id of the visited one
  * @returns
  */
-export async function visitEvent(projectId: string, originalEventId: string): Promise<boolean> {
-  return (await api.callOld(MUTATION_VISIT_EVENT, {
-    projectId,
-    originalEventId,
-  })).visitEvent;
-}
+export const visitEvent = withDemoMock(
+  async function visitEvent(projectId: string, originalEventId: string): Promise<boolean> {
+    return (await api.callOld(MUTATION_VISIT_EVENT, {
+      projectId,
+      originalEventId,
+    })).visitEvent;
+  },
+  '/src/api/events/mocks/visitEvent.mock.ts'
+);
 
 /**
  * Set or unset mark to event
  * @param projectId - project event is related to
  * @param eventId — event Id
  * @param mark — mark to set
  */
-export async function toggleEventMark(projectId: string, eventId: string, mark: EventMark): Promise<boolean> {
-  return (await api.callOld(MUTATION_TOGGLE_EVENT_MARK, {
-    projectId,
-    eventId,
-    mark,
-  })).toggleEventMark;
-}
+export const toggleEventMark = withDemoMock(
+  async function toggleEventMark(projectId: string, eventId: string, mark: EventMark): Promise<boolean> {
+    return (await api.callOld(MUTATION_TOGGLE_EVENT_MARK, {
+      projectId,
+      eventId,
+      mark,
+    })).toggleEventMark;
+  },
+  '/src/api/events/mocks/toggleEventMark.mock.ts'
+);
 
 /**
  * Update assignee
@@ -183,16 +196,19 @@ export async function removeAssignee(projectId: string, eventId: string): Promis
  * @param days - how many days we need to fetch for displaying in chart
  * @param timezoneOffset - user's local timezone
  */
-export async function fetchChartData(
-  projectId: string,
-  originalEventId: string,
-  days: number,
-  timezoneOffset: number
-): Promise<ChartLine[]> {
-  return (await api.callOld(QUERY_CHART_DATA, {
-    projectId,
-    originalEventId,
-    days,
-    timezoneOffset,
-  })).project.event.chartData;
-}
+export const fetchChartData = withDemoMock(
+  async function fetchChartData(
+    projectId: string,
+    originalEventId: string,
+    days: number,
+    timezoneOffset: number
+  ): Promise<ChartLine[]> {
+    return (await api.callOld(QUERY_CHART_DATA, {
+      projectId,
+      originalEventId,
+      days,
+      timezoneOffset,
+    })).project.event.chartData;
+  },
+  '/src/api/events/mocks/fetchChartData.mock.ts'
+);

src/api/events/mocks/fetchChartData.mock.ts

@@ -0,0 +1,68 @@
+import { getDemoEventsByProjectId } from '@/api/mock-db';
+import type { ChartLine } from '@hawk.so/types';
+
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_DAY = 24 * 60 * 60;
+
+function alignToDay(timestamp: number, timezoneOffset = 0): number {
+  const shiftedTimestamp = timestamp - timezoneOffset * SECONDS_IN_MINUTE;
+
+  return Math.floor(shiftedTimestamp / SECONDS_IN_DAY) * SECONDS_IN_DAY + timezoneOffset * SECONDS_IN_MINUTE;
+}
+
+/**
+ * Mock: fetchChartData (events)
+ *
+ * Returns chart data from mock-db
+ */
+export default function mockFetchChartData(
+  projectId: string,
+  originalEventId: string,
+  days = 14,
+  timezoneOffset = 0
+): ChartLine[] {
+  const nowSeconds = Math.floor(Date.now() / 1000);
+  const fromTimestamp = nowSeconds - Math.max(1, days) * SECONDS_IN_DAY;
+  const buckets = new Map<number, number>();
+
+  for (let day = 0; day <= days; day++) {
+    const dayTimestamp = alignToDay(fromTimestamp + day * SECONDS_IN_DAY, timezoneOffset);
+
+    buckets.set(dayTimestamp, 0);
+  }
+
+  const projectEvents = getDemoEventsByProjectId(projectId);
+  const anchorEvent = projectEvents.find(event => event.originalEventId === originalEventId);
+
+  const relatedEvents = projectEvents.filter((event) => {
+    if (event.timestamp < fromTimestamp || event.timestamp > nowSeconds) {
+      return false;
+    }
+
+    if (event.originalEventId === originalEventId) {
+      return true;
+    }
+
+    if (anchorEvent && event.payload.title === anchorEvent.payload.title) {
+      return true;
+    }
+
+    return false;
+  });
+
+  relatedEvents.forEach((event) => {
+    const dayBucket = alignToDay(event.timestamp, timezoneOffset);
+
+    buckets.set(dayBucket, (buckets.get(dayBucket) || 0) + event.totalCount);
+  });
+
+  return [
+    {
+      label: 'accepted',
+      data: Array.from(buckets.entries()).map(([timestamp, count]) => ({
+        timestamp,
+        count,
+      })),
+    },
+  ];
+}