Versions Compared

Old Version 17

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

compared with

New Version 18

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Task 1 – Create structure for new component

    • path: intl-whitelabel-app/workspaces/frontend/src/components/store-status

      • store-status

        • __fixtures__

        • __tests__

          • index.test.tsx

          • utilsuse-store-status.test.ts

        • index.tsx

        • styled.ts

        • types.ts

        • use-store-status.ts

  • Task 2—Create types

    • path: intl-whitelabel-app/workspaces/frontend/src/components/store-status/types.ts

      Code Block
      languagetypescript
      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
      languagejson
      "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
      languagetypescript
      formatStoreHourToDate(date: Date, hour: string): Date | undefined

    • Example:

      Code Block
      languagetypescript
      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
      languagetypescript
      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
      languagetypescript
      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;
};

...