Table of Contents
...
More details here: Promo code at checkout page X config offer type (WIP)
...
PoC working example
Important: Please disregard the delay when adding the offer. This is a PoC example. This needs to be improved in the final solution.
...
Main file to be changed:
src/state/loyalty/hooks/use-redeem-promo-code-checkout.ts
PoC branch: to be added
Task 1 - Create a new method responsible to add other types of offer
Get the whole Picker/Combo from Config Offers incentives
Option 1: adjust and extend the
config-offer.graphql
query to get all the Combo/PickerReuse this data to apply the offer item to the cart. Today we have a problem with this solution described here https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4459463872/Promo+code+at+checkout+page+X+config+offer+type+WIP#Option-1---Transform-and-apply-%E2%80%9CIn-App-Benefits%E2%80%9D-Combo/Picker-item-directly-(desired)
Option 2: with the return id from the Config Offers incentives item, make two new queries (new method) to get the item data:
If combo:
GetComboDocument
GetComboAvailabilityDocument
If Picker:
GetPickerDocument
GetPickerAvailabilityDocument
One option is to use the
Promise.all
to run the two queries and then merge the results of the queries using themerge
from lodash. This solution is based on what the menu methodqueryMenuData
(src/state/menu-options/legacy-menu-options.tsx
) does. We can also transform this function into a utils one to reuse.
Use the
ProductWizardUtils.SetDefaultSelections
to get the default selectionsUse the
getSelectionsFromMenuData
andconvertModActionsToSelections
to get the defaultmodifierSelections
Use the
transformMenuObjectToCartItem
to convert the Combo/Picker (the data that will come from Option1 or Option 2)Update the Redux state using the
dispatch
and theactions.loyalty.applyOffer
Adjust the price calculation for combo/picker. The value always needs to be correct (see PoC code example for more details and tips)
If we have a vendor config the value should be from there
If we don’t have a vendor config the value should be the offer price (offer config content)
If we don’t have any value at all then we need to look at the vendor config for the item
Adjust the loading state to only finish when we in fact add the new item into the cart
Use the
upsertCart
to add the transformed item to the cart
...
PoC code example and mentions
The code below should not be the final solution
The objective of the PoC is to prove an idea. I didn't make the code semantic or beautiful. This will be a responsibility for the dev
We should create new methods and reuse the code at maximum (see Suggestion of implementation below)
PoC code is inside this collapse:
Expand | |||||
---|---|---|---|---|---|
| |||||
Changes to
|
...
Sometimes, when we enter the cart page for the first time, we can get an error about invalid items in the cart. As we have our
useEffect
running all the time, I think that this is part of the problem. We need to ensure that nothing will be running at the wrong timeWhen we add a Picker item, the price can be wrong (without considering the offer
vendorConfig
information). The best way to know if the offer item was added correctly is to compare what happens if we add the same offer through the legacy flow (/offers
page). If something on the item (price, sub-items, etc) is wrong, then we have a problem!
About the item validation
The checkout page already has validations to prevent and invalid item to be used (for example if I tried to use a promo code that has an invalid item for my selected store):
...
After some seconds the page will also show this modal:
...
This legacy validations are important and we always need to ensure:
An offer item can only be user if the store returns that this is a valid/available item. As we are using the availability query we can know if the item is invalid too, if necessary
To test this we can use a menu item that is not available at a specific restaurant, for example
DOD-LIKE
Validate the behavior with manual tests
Adjust and create new unit tests for our hook
...