\n {setHourOnMessage(idStatus, labelStatus, openingDate, closingDate)}\n

\n );\n }\n return <>;\n};\n\nexport default StoreStatus;","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"for smalls layouts the status will break the line","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"14ce10b8-1b1a-4fc4-99b2-37d7876199b0"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"“For the layout colors, we can use styled-components props to implement the variations based on the status. A way to do that:","type":"text","marks":[{"type":"em"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text","marks":[{"type":"em"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.”","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":306,"id":"ade503c5-bca1-4aa0-88aa-8e08782267bb","collection":"contentId-4056154233","type":"file","height":553}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We will export the const ","type":"text"},{"text":"storeHoursSummary","type":"text","marks":[{"type":"code"}]},{"text":" to ","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/constants.ts","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"path:","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/components/store-info-modal/index.tsx","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"export const storeHoursSummary: [string, string][] = [\n ['monday', 'mon'],\n ['tuesday', 'tue'],\n ['wednesday', 'wed'],\n ['thursday', 'thr'],\n ['friday', 'fri'],\n ['saturday', 'sat'],\n ['sunday', 'sun'],\n];","type":"text"}]}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Task 8—Add new the component on ","type":"text"},{"text":"store-info-modal","type":"text","marks":[{"type":"code"}]},{"text":" component","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"path: ","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/components/store-info-modal/index.tsx","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the new component on component ","type":"text"},{"text":"Hours","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":728,"id":"224844e9-b4ab-4d2a-8e1a-6bc8a2fcd896","collection":"contentId-4056154233","type":"file","height":425}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We will format the layout to get like this:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":359,"id":"7a1de65b-b2ca-4e49-8e66-526d21c3bbf1","collection":"contentId-4056154233","type":"file","height":207}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Task 9—Add new the component on ","type":"text"},{"text":"store card","type":"text","marks":[{"type":"code"}]},{"text":" component","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We will need to return the operation hour, Then, we will change the hook ","type":"text"},{"text":"useOpenClosedText","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"path: ","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/hooks/use-open-closed-text.ts","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"interface IOpenClosedText {\n isOpen: boolean;\n text: string;\n operatingHours?: object;\n}\n\nconst getHoursToday = (operatingHours: IOperatingHours) => {\n const today = format(new Date(), 'iiii').toLowerCase();\n\n const hoursToday = storeHoursSummary\n .filter(([weekName]) => weekName.toLowerCase() === today)\n .map(([, weekAbbreviated]) => {\n const openingHours = operatingHours[`${weekAbbreviated}Open`];\n const closingHours = operatingHours[`${weekAbbreviated}Close`];\n\n return { openingHours, closingHours };\n });\n\n return hoursToday;\n};\n\nexport const useOpenClosedText = (restaurant: IRestaurantNode): IOpenClosedText => {\n const { availablePickupServiceModes } = useServiceModeStatus(restaurant);\n const { formatMessage } = useIntl();\n\n // Get the open hours for the pickup service mode that is open and not disabled.\n const [operatingHours] = availablePickupServiceModes.map(getOperatingHours(restaurant));\n\n if (!operatingHours) {\n return { isOpen: false, text: formatMessage({ id: 'closed' }) };\n }\n\n const [hours] = getHoursToday(operatingHours);\n if (isWithinOneHourOfClose(operatingHours)) {\n return {\n isOpen: true,\n text: formatMessage({ id: 'closesAt' }, { time: readableCloseHourToday(operatingHours) }),\n operatingHours: hours,\n };\n }\n\n return { isOpen: true, text: formatMessage({ id: 'open' }), operatingHours: hours };\n};","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On file: ","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/store-card.tsx","type":"text","marks":[{"type":"code"}]},{"text":", we will return the ","type":"text"},{"text":"operatingHours","type":"text","marks":[{"type":"code"}]},{"text":" on hook ","type":"text"},{"text":"useOpenClosedText","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":" const { isOpen, text, operatingHours } = useOpenClosedText(restaurant);\n \n ","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"We will change the type ","type":"text"},{"text":"StoreDetails","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"path: ","type":"text"},{"text":"intl-whitelabel-app/workspaces/frontend/src/pages/store-locator/new-ui/store-card/store-card.view.tsx","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"type StoreDetails = {\n ...\n operatingHours?: object;\n};","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On the same file, we will add the new component inside component ","type":"text"},{"text":"StoreCardCaption","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":547,"id":"4b1f5008-a604-4645-b03c-b15776dddbb1","collection":"contentId-4056154233","type":"file","height":262}}]}]}]}]}]}]}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Release","type":"text"}]},{"type":"paragraph"}],"version":1}