...
Task 1 – Create structure for new component
path:
intl-whitelabel-app/workspaces/frontend/src/components/store-status
store-status
__fixtures__
__tests__
index.test.tsx
utils.test.ts
index.tsx
styled.ts
types.tsutils
use-store-status.ts
Task 2—Create types
path:
intl-whitelabel-app/workspaces/frontend/src/components/store-status/types.ts
Code Block language typescript export enum StoreStatus { OpenNow = 'openNow', ClosedNow = 'closedNow', ClosedToday = 'closedToday', OpensAtTime = 'opensAtTime', ClosesAtTime = 'closesAtTime', } export interface IStoreStatus { openingHours: string; closingHours: string; dayWeek: string; dateNow: Date; } export type DateStatus = Date | undefined;
Task 3—Create translations
path:
intl-whitelabel-app/workspaces/frontend/src/state/translations/en.json
Code Block language json "openNow": "Open Now", "closedNow": "Closed Now", "closedToday": "Closed Today", "opensAtTime": "Opens at", "closesAtTime": "Closes at",
Add this translation on confluence page: /wiki/spaces/IN/pages/4071392004
Task 4—Create a method to format the store open and close time to date
path:
intl-whitelabel-app/workspaces/frontend/src/components/store-status/utils.ts
Code Block language typescript formatStoreHourToDate(date: Date, hour: string): Date | undefined
Example:
Code Block language typescript import { add, format } from 'date-fns'; export const getDateTimeFromStore = (date: Date, hours: string): Date | undefined => { if (!hours) { return; } return new Date(`${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()} ${hours}`); };
Task 5—Create method to return what the store status
path:
intl-whitelabel-app/workspaces/frontend/src/components/store-status/utils.ts
Code Block language typescript getIdStatus(today: Date, openDate: DateStatus, closeDate: DateStatus): StoreStatus | undefined
Open Now: the store is open at the moment;
Closed Now: the store is closed at the moment, but it has opening hours on the current day;
Closed Today: the store is closed through the entire day, it doesn‘t open on that day;
Opens at: the store is closed at the moment but will open in 60 minutes or less;
Closes at: the store is open but will close in 60 minutes or less.
Example:
Code Block language typescript import { add, format } from 'date-fns'; export const getIdStatus = ( today: Date, openDate: DateStatus, closeDate: DateStatus ): StoreStatus | undefined => { const existDates = !openDate && !closeDate; if (existDates) { return StoreStatus.ClosedToday; } const isOpen = today >= openDate! && today <= closeDate!; const isOpenAt = today <= openDate! && add(new Date(today), { hours: 1 }) >= openDate!; const isClose = today <= openDate! || today >= closeDate!; const isCloseAt = today <= closeDate! && add(new Date(today), { hours: 1 }) >= closeDate!; if (isCloseAt) { return StoreStatus.ClosesAtTime; } if (isOpen) { return StoreStatus.OpenNow; } if (isOpenAt) { return StoreStatus.OpensAtTime; } if (isClose) { return StoreStatus.ClosedNow; } return undefined; };
...