Page Comparison

Repos that we’ll change

...

Task 1 - Create a new Sanity document for QR Code settings

...

• Important: talk with Gabriel or Diego (UX team) to define:

  • Title and description for the number fields

  • Description for Serice Modes block

• Configuration of service modes (intl-whitelabel-cms)

  • Should create a new feature in Marketing Content / Features/ Feature QR Code Refill Drinks

  • Should create settings to service mode. (pick-up, diner, etc)

  • Should create two new field time to Bottom Sheets and Recente Order in minutes.

  • Should to be create a new feature in Marketing Content / Features/ Feature QR Code Refill Drinks / List of stores

    • Should create a new field items to set restaurants.

    • Should create settings to service mode.

    • Should create two new field time to Bottom Sheets and Recente Order by service mode in minutes.

• We can follow our solution like the feature menu: /schemas/features/documents/menu.tsx

  • Create a new document in the features/documents for our new QR Code document

  • Add the new document into the schema and in other places (like the menu one)

  • Create a new object to be used as a reference and render the Service Modes

    • Example of a document that uses an object reference: https://github.com/rbilabs/intl-sanity-shared-schemas/blob/main/src/schemas/menu/objects/add-on-section-option.ts

    • Example of the object for service mode: https://github.com/rbilabs/intl-sanity-shared-schemas/blob/main/src/schemas/menu/objects/add-on-section-service-modes.ts

...

• 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

• To test and validate: Call the query new hook at home (layout index) and see if the query is working before opening the PR (should get data from Sanity)

Task 4 - Add new icons

...

• Important: We’ll have different icons for each brand. With this in mind, we’ll need to follow this example: src/components/icons/add-new-credit-card

• 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

• The icon for QR Code should use the black from DS

• All colors should be from DS

...