Versions Compared

Old Version 15

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

Saved on

compared with

New Version 16

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

Saved on

Key

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

...

  • Task 6—Create method to set the hour on label

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

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

    • Example:

      Code Block
      languagetypescript
      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
      languagetypescript
      // 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
      languagetypescript
      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 */

Release