Table of contents
| Table of Contents |
|---|
Definition
Status |
| ||||||||||||||||||||||
RBIberia Owner | Paula | ||||||||||||||||||||||
RBI Owner | Luke |
Open questions
| Info |
|---|
We need to constantly make this section become empty. |
We need to add the brand icons for each of the account menu options. Several LD flags control this (Hainzenreder, Diego not sure there will be a tech limitation and we will need same icons for both brands and cannot customize in sanity, since this is set through LD flags today)
https://app.launchdarkly.com/default/staging-plk/features/enable-settings-geolocation/targeting
Read info here + the account line of “settings” that we developed as part of coupon geolocation
Hainzenreder, Diego and Fisher, Luke to decide if this is hidden behind LD flag or not
Requirements
Problem statement
The menu items located in the customer's profile on Popeyes are unclear. They do not present a clear hierarchy of first and second level links, as well as it is not evident that they are clickable. The current app also uses icons that identify each area, and this is not available in the new version.
Acceptance criteria
Icons are displayed on first-level menu items and with the arrow after the label
There is greater emphasis on the links for " Encuentra tu restaurante" and " Inicia sesión o crea tu cuenta"
Second-level icons are highlighted
Success metrics
Solution
Potential
Add icons for each menu item.
Prioritize the importance of each link with 2 different solutions:Orange color for the first levelUnderline for the second level
Design
Development
Task 1 - Create feature flag
Task 2 - Add new icons
Some icons we have in storybook, so just need to import. https://ctg-components-library.rbictg.com/?path=/story/theme-icon--icons
But new icons we need to add in the repository
Task 3 - Create a new component for icon
The items of menu are controlled by feature flags, to activate all flags, you can add true in hard-code.
This menu it is in src/pages/account/index.tsx
Each item of menu are compost by component ArrowLink, so we need to create a new component for icons, we don’t change the ArrowLink because this component is used in other locals.
Attention, because the font label, color of label and icons changed and now the colors changed according to brand. (look figma) - The colors used have in file primitives.ts, for intl-whitelabel and ctg-components-library.