...

Task 1 – Create structure for new component

path: intl-whitelabel-app/workspaces/frontend/src/components/store-status
- store-status
  - __fixtures__
  - __tests__
    - index.test.tsx
    - use-store-status.test.ts
  - index.tsx
  - styled.ts
  - types.ts
  - use-store-status.ts

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 2—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 3—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 4—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;
};

Task 5—Create method to set the hour on label

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

Code Block

language	typescript

setHourOnMessage = (idStatus: StoreStatus | undefined, message: string, openDate: DateStatus, closeDate: DateStatus): string

Example:

Code Block

language	typescript

import { add, format } from 'date-fns';

export const setHourOnMessage = (
  idStatus: StoreStatus | undefined,
  message: string,
  openDate: DateStatus,
  closeDate: DateStatus
): string => {
  if (idStatus === StoreStatus.ClosedToday) {
    return message;
  } else if (message && idStatus === StoreStatus.OpensAtTime) {
    return `${message} ${format(openDate!, 'hh aaa')}`;
  } else if (message && idStatus === StoreStatus.ClosesAtTime) {
    return `${message} ${format(closeDate!, 'hh aaa')}`;
  } else {
    return message;
  }
};

Task 6—Create feature flag

Task 7—Create component

path: intl-whitelabel-app/workspaces/frontend/src/components/store-status/index.tsx

https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=39-8977&t=BxgOcMjlu01NUFWf-0

Code Block

language	typescript

// created on type
export interface IStoreStatus {
  openingHours: string;
  closingHours: string;
  dayWeek: string;
  dateNow: Date;
}

StoreStatus = (props: IStoreStatus)

~~dateNow: current date~~
openingHours: date that the store will open
closingHours: date that the store will close
dayWeek: Day of the week. e.g: monday, tuesday…sunday

Example:

Code Block

language	typescript

import React from 'react';

import { format } from 'date-fns';
import { useIntl } from 'react-intl';

import { IStoreStatus } from './types';
import { getDateTimeFromStore, getIdStatus, setHourOnMessage } from './utils';

const StoreStatus = (props: IStoreStatus) => {
  const { formatMessage } = useIntl();

  const { openingHours, closingHours, dateNow, dayWeek } = props;

  const week = format(dateNow, 'iiii').toLowerCase();

  if (dayWeek.toLowerCase() === week) {
    const openingDate = getDateTimeFromStore(dateNow, openingHours);
    const closingDate = getDateTimeFromStore(dateNow, closingHours);

    const idStatus = getIdStatus(dateNow, openingDate, closingDate);

    const labelStatus = idStatus ? formatMessage({ id: idStatus }) : '';

    return (
      <div>
        <span>{setHourOnMessage(idStatus, labelStatus, openingDate, closingDate)}</span>
      </div>
    );
  }
  return <></>;
};

export default StoreStatus;

for smalls layouts the status will break the line

“For the layout colors, we can use styled-components props to implement the variations based on the status. A way to do that:
- Create a string variable with the status and pass it to the styled component tag. Inside the styles file, we can use this variable to choose the color and etc.
- We can use flex and other CSS approaches to make the line break of the text but if difficult we can use the available media screens in the project to set different values in the CSS.”

We will export the const storeHoursSummary to intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/constants.ts

path:intl-whitelabel-app/workspaces/frontend/src/components/store-info-modal/index.tsx

Code Block

language	typescript

export const storeHoursSummary: [string, string][] = [
  ['monday', 'mon'],
  ['tuesday', 'tue'],
  ['wednesday', 'wed'],
  ['thursday', 'thr'],
  ['friday', 'fri'],
  ['saturday', 'sat'],
  ['sunday', 'sun'],
];

Task 8—Add new the component on store-info-modal component

path: intl-whitelabel-app/workspaces/frontend/src/components/store-info-modal/index.tsx
- Add the new component on component Hours
We will format the layout to get like this:

Task 9—Add new the component on store card component

We will need to return the operation hour, Then, we will change the hook useOpenClosedText:

path: intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/hooks/use-open-closed-text.ts

Code Block

language	typescript

interface IOpenClosedText {
  isOpen: boolean;
  text: string;
  operatingHours?: object;
}

const getHoursToday = (operatingHours: IOperatingHours) => {
  const today = format(new Date(), 'iiii').toLowerCase();

  const hoursToday = storeHoursSummary
    .filter(([weekName]) => weekName.toLowerCase() === today)
    .map(([, weekAbbreviated]) => {
      const openingHours = operatingHours[`${weekAbbreviated}Open`];
      const closingHours = operatingHours[`${weekAbbreviated}Close`];

      return { openingHours, closingHours };
    });

  return hoursToday;
};

export const useOpenClosedText = (restaurant: IRestaurantNode): IOpenClosedText => {
  const { availablePickupServiceModes } = useServiceModeStatus(restaurant);
  const { formatMessage } = useIntl();

  // Get the open hours for the pickup service mode that is open and not disabled.
  const [operatingHours] = availablePickupServiceModes.map(getOperatingHours(restaurant));

  if (!operatingHours) {
    return { isOpen: false, text: formatMessage({ id: 'closed' }) };
  }

  const [hours] = getHoursToday(operatingHours);
  if (isWithinOneHourOfClose(operatingHours)) {
    return {
      isOpen: true,
      text: formatMessage({ id: 'closesAt' }, { time: readableCloseHourToday(operatingHours) }),
      operatingHours: hours,
    };
  }

  return { isOpen: true, text: formatMessage({ id: 'open' }), operatingHours: hours };
};

On file: intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/store-card.tsx, we will return the operatingHours on hook useOpenClosedText
Code Block
language typescript
const { isOpen, text, operatingHours } = useOpenClosedText(restaurant); <StoreCardView ... storeDetails={{ ... operatingHours ... }} />

We will change the type StoreDetails
- path: intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/store-card.view.tsx
  Code Block
  language typescript
  type StoreDetails = { ... operatingHours?: object; };
- On the same file, we will add the new component inside component StoreCardCaption

Release

Translations

...

english

...

catalan

...

spanish

...

euraska

...

galician

...

portuguese

...

closesAt

...

Closes at {time}

...

Tanca a les {time}

...

Cierra a las {time}

...

{time} ixten da

...

Pecha ás {time}

...

Encerra às {time}

...

opensAt

...

Opens at {time}

...

Obre a les {time}

...

Abre a las {time}

...

Orduetan irekitzen da {time}

...

Abre ás {time}

...

Abre às {time}

...

closedToday

...

Closed Today

...

Avui tancat

...

Cerrado hoy

...

Gaur itxita

...

Hoxe pechado

...

Fechado hoje

...

openNow

...

Open Now

...

Obert ara

...

Abierto ahora

...

Ireki orain

...

Aberto agora

...

Aberto agora

...

closedNow

...

Closed Now

...

Tancat ara

...

Cerrado ahora

...

Orain itxita

...

Pechado agora

...

Fechado agora

Versions Compared

Old Version 28

New Version 29

Key

Release

Translations

Page Comparison

Versions Compared

Old Version 28

New Version 29

Key

Release

Translations