Table of Contents
Table of Contents | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
...
Business problem
Today the premium options items will be 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). The client Iberia asks for two options for this solution: the “short-term” solution and the “long-term” solution.
...
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
...
Add the new toggle in Sanity
shared-schema
repothis new behavior/fix:The new flag is: https://
This new toggle will be available for all combo slot configurations
...
Label: Schroer, Gabriel
Description: Schroer, Gabriel
After merge this new toggle in
shared-schemas
repo and publish the new package, bump this version in the CMS repo: https://github.com/rbilabs/intl-whitelabel-cms
Task 2: Update front end and add logic to change position by toggle in Sanity
...
- Update the sanity graphql to add this new toggle in the query:
src/queries/sanity/fragments/combo.graphql
/intl-guest-app/dev-plk-es/features/enable-premium-options-at-first-position/targeting
Or flag will depends on the
enable-product-upsell-simplified
flag (https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/enable-product-upsell-simplified/targeting). If this flag is off our solution will not work.
After updating the query, we need to adjust the
ProductCustomizationOptions
comp to use the new toggle from Sanity and add a new logic to adjust the order of the items by this toggle.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 toggle.
The new value from Sanity will come in the
comboSlot
property that this component already has.flag
DOD-LIKE
Condition the UI based on the new toggleflag
Test manually the logic
The premium options list should be ordered first if the toggle flag is ON and last if the toggle flag is OFF
Add a new UNIT test using the
each
from Jest to test if the behavior is correct based in the toggle flag value (true/false) if makes sense