Page Comparison

...

• Task 1 - Create a Feature Flag

• Task 2 - Update Whitelabel-Graphql - Sanity settings

  • Task 3 - Create a new hook for the new sanity query

• Task 4 - Add new icons

• Task 4 5 - Create a Bottom Sheet with QRCode on Home Page

• Task 5 6 - Create componente to show QRCode in Recent Orders and Finish Order

• Task 6 7 - Validations of durations of QR code - Recent Order

• Task 7 8 - Validations of durations of QR code - Home Page

• Task 8 9 - Validate Sanity if save hash in LocalStorage (back-end necessary)

...

• Update Graphql (intl-whitelabel-graphql)

DOD-LIKE

• Codegen should not be broken and apollo:generate command should works without problem after add the new graphql files

Task 3 - Create a new hook for the new sanity query

• The creation of a new hook that we’ll use to get the data from the new Sanity document

• Example of a hook that uses a query from Sanity: src/hooks/use-feature-menu/use-feature-menu.ts

• The hook should be created inside the src/hooks folder

DOD-LIKE

• Create the hook in the correct folder

• Create an index file to export the hook and a file with the hook name for the code itself

• If necessary or if makes sense the unit test needs to be implemented

• Call the query at home and see if the query is working before opening the PR (should get data from Sanity)

Task 4 - Add new

...

• Should add new icons to QRCode components (only whitelabel-app)

...

icons

...

• Get the icon as SVG from Figma

• Put SVG code in https://react-svgr.com/playground/ and get the JSX result that will be used on the Whitelabel code

• The icon should be in src/components/icons

  • Create a new folder for the new icon with a semantic name

  • Example of an icon: icons/book/index.js

    • We need to pass the props to the icon like in this example. The desired result is to have a black icon. The responsibility of setting the color will be where the icon is used

  • Add the new icon in /src/components/icons/icons.stories.tsx

DOD-LIKE

• The icon is generic and black

• Dev is able to pass the desired color when using the icon (through styled component, etc)

Task 5 - Create a Bottom Sheet with QRCode on Home Page

• Create a component BottomSheets in the folder workspaces/frontend/src/components/

• Add this new component in path: workspaces/frontend/src/components/layout/index.tsx - but this component just can show in home page, so we can know if in home page with code const isHomePage = window.location.pathname === '/';

• Should create a new component to show QRCode with hash value, this hash must get the Storage using a key

• Should use QRCode component in workspaces/frontend/src/components/qrcode/qr-code.tsx

Gravação de Tela 2023-08-02 às 15.06.54.mov

...

DOD-LIKE

• Display Bottom Sheet with QR only on home screen

• Show this component just has HashCode in LocalStorage

• Show this component while the time configured in sanity does not expire

• Show this component just Home Page

• Show this component if new feature flag “ENABLE_QRCODE_REFILL" is activated.

• Expand content on click

• The Start Order should appear just above the bottom sheet, but when the bottom sheet is expanded the start order button should be overlaid by the bottom sheet and the background has to be obscured, to highlight the qrcode. Attention, the POC don’t have this comportment, so we need to implement this.

  

• Feature flag ENABLE_BOTTOM_SERVICE_MODE must continue to work, because this flag active other component in footer.

• Should show this QRCode only on mobile devices.

...

• https://github.com/rbilabs/intl-whitelabel-app/pull/1693

Task

...

6 - Create componente to show QRCode in Recent Orders and Finish Order

• path: workspaces/frontend/src/pages/account/account-orders/index.tsx

• path finish order: workspaces/frontend/src/pages/order-confirmation/order-confirmation.tsx

• Should create a new card component in Recent Order to show QRCode with hash value, this hash must get the Storage using a key

• Should use QRCode component in workspaces/frontend/src/components/qrcode/qr-code.tsx

...

...

DOD-LIKE

• Show a new component with QRCode information in Recent Orders

• When clicking QRCode icon it should show modal with QRCode with hash value

• Should show this QRCode only on mobile devices.

• Show this component if new feature flag “ENABLE_QRCODE_REFILL" is activated.

...

• https://github.com/rbilabs/intl-whitelabel-app/pull/1682

Task

...

7 - Validations of durations of QR code - Recent Order

• if hash is expired, should not show on the QRCode card

• Should not removed hash the LocalStorage

• The order must have status equal to INSERT_SUCCESSFUL or UPDATE_SUCCESSFUL

• The updateAt field in the Order must be the calculation basis

Task

...

8 - Validations of durations of QR code - Home Page

• if hash is expired, should not show bottom sheet

• Should not removed hash the LocalStorage

• The order must have status equal to INSERT_SUCCESSFUL or UPDATE_SUCCESSFUL

• The updateAt field in the Order must be the calculation basis

Task

...

9 - Validate Sanity if save hash in LocalStorage (back-end necessary)

• After finishing Order, must save hash in LocalStorage, according to service mode settings

• RBI::ORDER_REFILL_ID key in LocalStorage

...