Frontend - Tech refinement

Owned by Augusto Romao, Vinicius
Last updated: Dec 12, 2023
2 min read

Table of Contents

Business problem

Today the premium options items are below the regular items, and with that, Iberia is losing some possible upsell and wants more control over the premium options on the UI (check here for more details:Premium Options). Iberia asks for two options for this solution: the “short-term” solution and the “long-term” solution.

 

Short term solution - premium options at first position in the list

This solution consists basically of adding a new toggle in Sanity for the configurations of the combo slots (where the premium options are available). With this toggle, we’ll condition the FE to show the premium options first.

 

Long term solution - choose the order of the items freely (will not be developed now)

Example of dynamic configuration:

  • Corn

  • Option Premium +1€

  • Patatas

  • Option Premium +1,5€

 

Tasks breakdown

Task 1: Update front end and add logic to change position by feature flag in LD

 

  • Add a new flag in LD to control this new behavior/fix:

  • After updating the query, we need to adjust the ProductCustomizationOptions comp

    • Comp path: src/components/product-detail/product-customization/product-customization-options.tsx

    • This is the part of the code that holds the logic for the list order. The first position of the array is for regular items, and the second object represents the premium options item. We can make a new function and change this to something dynamic based on the new flag

       

DOD-LIKE

  • Condition the UI based on the new flag

  • Test manually the logic

  • The premium options list should be ordered first if the flag is ON and last if the flag is OFF

  • Add a new UNIT test using the each from Jest to test if the behavior is correct based in the flag value (true/false) if makes sense