Page Comparison

...

We’ll also not need anymore the “Add extras” modal to change the items quantity because we can change this directly with this proposal:

...

Approach 1:

The main idea of this approach is to change the free item behavior with a low impact on the existent feature:

• Create a new hook with a function that will return the correct PLU (free or paid)

• Adjust the use-pricing-function hook

  • Call the new hook

  • Adjust pricingFunctionNoSelections and call the function returned from the new hook inside the condition that checks if the pluType is a constant. The function will return the correct PLU to be passed inside `getPriceForPlus`

    • We’ll also need to adjust the itemQuantity variable or the return. We can have a function that will return the correct quantity to be multiplied based on the offer

      • If the item quantity is less than the actual offer use the quantity from the item. If not we’ll use the item quantity minus the actual maximum offered

  • Perhaps we’ll need to adjust other functions too… need to analyze the full impact of this

• Adjust the cart page (src/pages/cart/index.tsx) cartEntries `updatedCartEntries` return to also have the logic to use the free or the paid PLU

  • This is important because this array will be sent to the priceOrder query and we can’t charge for the free ones for example

  • We’ll need to find inside this array the offered item (we can use the new hook created above for that)

  • If we find the item we’ll need to adjust the vendorConfigsproperty to change the PLU (paid or free based on the max offer counter logic)

• Adjust the addons-item-container

  • Remove the logic that will show the paid item as now we’ll have only one item

  • Use the same method used in the upsell component to add the item to the cart. We’ll not need the hook from the addOns feature anymore

    • Adjust the cart-item buttons + and - to be disabled based in the rules of the free item feature

    • Hide the “edit” button. This button will not be used for our free item feature

  • Analyze and adjust the useAddOnsItemContainer to not look at the paid item anymore. Here we can remove or reuse what’s needed

  • Now when the free item is added to the cart we’ll not need the modal for the edition anymore

• Remove unnecessary logic and code from the addOn feature

• We’ll not touch on Sanity now and this will happen in the next changes/improvements

• Advantages of this approach:

  • Change the use-pricing-function will make all this work correctly even in the cart-preview for example

  • Low-impact development for an initial improvement

  • No need to touch on BE or other integrations

• Disadvantages of this approach:

  • Changing the PLU on a logic hide in the FE code (this will not be a clear config like the vendor config for example) in this first version of the improvement. This will be improved when we change the Sanity part in the future

  • Without the addOn feature and using the cart-item as it is (with the + and - buttons) the page will suffer from re-render when we change the item quantity. Using the addOn feature the state was isolated inside the “Add extras” modal

• Challenge: how do we show the free item quantity on the receipt?

  • Some thoughts of the author (Vinicius):

    • Option 1: have a “hide” item on the cart entries to be the one representing the free item quantity (this can be made on the (src/pages/cart/index.tsx) cartEntries). Perhaps we’ll need to change the component that show the “Your cart” information to hide the item there too

    • Option 2: analyze and discover how we can add items to the receipt without touching the cart entries

POC: https://github.com/rbilabs/intl-whitelabel-app/tree/iberia-dedicated-items-free-improvement-poc

Files changed in the POC above:

• Cart page: frontend/src/pages/cart/index.tsx

• Addons items container: frontend/src/pages/cart/addons-item-container/addons-item-container.tsx

• useAddonsItemContainer: frontend/src/pages/cart/addons-item-container/hook/use-addons-item-container.ts

• usePrincingFunction: frontend/src/state/menu-options/hooks/use-pricing-function.ts

Technical availability/effort: 1/1.5 sprint

...