Page Comparison

...

Task 6—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 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.”

Task 8—Add new the component on store card component
- path: intl-whitelabel-app/workspaces/frontend/src/components/store-info-modal/index.tsx
  - Add the new component on component Hours
- path: intl-whitelabel-app/workspaces/frontend/src/components/store-card/index.tsx
  - Replace this component with the new component
- We will format the layout to get like this:
- and
- We will need to set “deprecated” on old component
- /** @deprecated Use Select from <path> e.g: '@rbilabs/components-library' instead */

...

Versions Compared

Old Version 18

New Version 19

Key